:root{
  --ink: #eef3ff;
  --ink-dim: rgba(238,243,255,0.6);
  --bg-top: #0a1030;
  --bg-mid: #0e1c5c;
  --bg-bottom: #124fc2;
  --brand-blue: #0a63d6;
  /* Bas de la barre de navigation. Couleur opaque unique, partagée par la
     barre et le fond du body pour qu'aucune jointure ne soit visible.
     Ne pas revenir à un color-mix dont la somme des pourcentages est < 100 :
     CSS y applique alors une transparence involontaire. */
  --tab-bar-deep: #0959c1;
  --brand-blue-light: #4fa8ff;
  --gold: #ffd479;
  --gold-dim: rgba(255,212,121,0.5);
  --ring-track: rgba(238,243,255,0.14);
  --glow: rgba(79,168,255,0.55);

  --paper: #f5f8ff;
  --paper-card: #ffffff;
  --text: #10193b;
  --text-dim: rgba(16,25,59,0.58);
  --hairline: rgba(16,25,59,0.1);
}

:root[data-theme="light"]{
  --ink: #0d1a3f;
  --ink-dim: rgba(13,26,63,0.6);
  --bg-top: #dce8ff;
  --bg-mid: #bcd3ff;
  --bg-bottom: #6fa4ff;
  --ring-track: rgba(13,26,63,0.14);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink: #0d1a3f;
    --ink-dim: rgba(13,26,63,0.6);
    --bg-top: #dce8ff;
    --bg-mid: #bcd3ff;
    --bg-bottom: #6fa4ff;
    --ring-track: rgba(13,26,63,0.14);
  }
}
:root[data-theme="dark"]{
  --paper: #0d1330;
  --paper-card: #161d45;
  --text: #eef3ff;
  --text-dim: rgba(238,243,255,0.6);
  --hairline: rgba(238,243,255,0.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0d1330;
    --paper-card: #161d45;
    --text: #eef3ff;
    --text-dim: rgba(238,243,255,0.6);
    --hairline: rgba(238,243,255,0.12);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
/* Le fond du body n'est visible que si la coquille ne couvre pas tout
   (vide résiduel en bas, rebond d'overscroll). On le met à la couleur de la
   barre de navigation : un éventuel liseré passe alors inaperçu au lieu
   d'apparaître en blanc. */
body{
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", -apple-system, sans-serif;
  background: var(--tab-bar-deep);
  overflow:hidden;
}

/* ---------- Splash ---------- */
.splash{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 50% 100%, var(--bg-bottom) 0%, var(--bg-mid) 45%, var(--bg-top) 100%);
  overflow:hidden;
  z-index:100;
  transition: opacity 0.5s ease;
}
.splash.is-hidden{
  opacity:0;
  pointer-events:none;
}

.stars{ position:absolute; inset:0; overflow:hidden; }
.star{
  position:absolute;
  width:2px; height:2px;
  background: var(--ink);
  border-radius:50%;
  opacity:0.5;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0.15; transform:scale(1); }
  50%{ opacity:0.9; transform:scale(1.6); }
}

.stage{
  position:relative;
  width:230px;
  height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.glow{
  position:absolute;
  width:220px; height:220px;
  border-radius:50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  filter: blur(4px);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(0.92); opacity:0.55; }
  50%{ transform:scale(1.08); opacity:0.9; }
}

.ring{ position:absolute; inset:0; transform: rotate(-90deg); }
.ring circle{ fill:none; stroke-width:2.5; }
.ring .track{ stroke: var(--ring-track); }
.ring .fill{
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 578;
  stroke-dashoffset: 578;
  animation: fillring 2.6s cubic-bezier(.4,0,.2,1) forwards 0.2s;
}
@keyframes fillring{ to{ stroke-dashoffset: 55; } }

.badge{
  position:relative;
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation: breathe 3.1s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: scale(1) translateY(0); }
  50%{ transform: scale(1.045) translateY(-3px); }
}
.badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

.sparkle-sweep{
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,0.16) 50%, transparent 55%);
  background-size: 300% 300%;
  background-position: -100% -100%;
  mix-blend-mode: overlay;
  animation: sweep 5.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%, 15%{ background-position: -100% -100%; }
  55%, 100%{ background-position: 100% 100%; }
}

.wordmark{
  margin-top: 38px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align:center;
  opacity:0;
  animation: rise 0.8s ease forwards 0.5s;
}
.wordmark .dot{ color: var(--gold); }

.tagline{
  margin-top:8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align:center;
  opacity:0;
  animation: rise 0.8s ease forwards 0.75s;
  max-width: 260px;
}

@keyframes rise{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.status{
  position:absolute;
  bottom:76px;
  left:0; right:0;
  text-align:center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--ink-dim);
  opacity:0;
  animation: rise 0.6s ease forwards 1s;
}
.status .dots span{ display:inline-block; animation: blink 1.4s infinite; }
.status .dots span:nth-child(2){ animation-delay:0.2s; }
.status .dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes blink{
  0%,80%,100%{ opacity:0.25; }
  40%{ opacity:1; }
}

.byline{
  position:absolute;
  bottom:34px;
  left:0; right:0;
  text-align:center;
  font-size: 10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--ink-dim);
  opacity:0;
  animation: rise 0.6s ease forwards 1.15s;
}

@media (prefers-reduced-motion: reduce){
  .star, .glow, .badge, .sparkle-sweep, .ring .fill, .wordmark, .tagline, .status, .byline, .status .dots span{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .ring .fill{ stroke-dashoffset: 55; }
  .wordmark, .tagline, .status, .byline{ opacity:1; transform:none; }
}

/* ---------- App shell ---------- */
/* inset:0 seul suffit et garantit exactement la zone visible.
   Ne PAS ajouter de height explicite ici : elle écraserait la contrainte
   bottom:0 et laisserait un vide sous la barre en mode app installée. */
.app-shell{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background: var(--paper);
  animation: rise 0.5s ease;
}
.app-shell[hidden]{ display:none; }

.app-header{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px;
  background: var(--brand-blue);
  color:#fff;
  overflow:hidden;
}
.app-header__mark{ width:26px; height:26px; object-fit:contain; flex:0 0 auto; }
.app-header__title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
  font-weight:800;
  letter-spacing:0.01em;
}

.install-header-btn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.install-header-btn[hidden]{ display:none; }
.install-header-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.install-header-btn:active{ background: rgba(255,255,255,0.22); }
.install-header-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.install-tip{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 14px;
  background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  border-bottom:1px solid var(--hairline);
}
.install-tip[hidden]{ display:none; }
.install-tip p{
  flex:1 1 auto;
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  color: var(--text);
}
.install-tip button{
  flex:0 0 auto;
  border:none;
  background:none;
  color: var(--text-dim);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.app-content{
  flex:1 1 auto;
  overflow:hidden;
  position:relative;
}

.panel{ display:none; height:100%; padding:20px 18px 32px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.panel--active{ display:block; }

.radio-panel{
  position:relative;
  overflow:hidden;
  padding:0;
}

.placeholder{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  color: var(--text-dim);
}
.placeholder__glyph{ font-size:40px; margin-bottom:6px; opacity:0.8; }
.placeholder__title{
  font-size:16px;
  font-weight:700;
  color: var(--text);
  margin:0;
}
.placeholder__text{ font-size:13px; margin:0; max-width:240px; }

.reseaux__intro{
  font-size:14px;
  color: var(--text-dim);
  margin: 4px 0 18px;
}

/* ---------- Accueil ---------- */
.home{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.home__eyebrow{
  margin:0 0 2px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.home__hello{
  margin:0;
  font-size:26px;
  font-weight:800;
  color: var(--text);
}

.home__weather{
  margin:6px 0 0;
  font-size:13.5px;
  color: var(--text-dim);
}
.home__weather strong{
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.card{
  background: var(--paper-card);
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:16px;
}

.home__quick{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.quick-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:14px;
  border-radius:16px;
  background: var(--paper-card);
  border:1px solid var(--hairline);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition: transform 0.15s ease;
}
.quick-card:active{ transform: scale(0.97); }
.quick-card:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}
.quick-card__icon{
  width:36px; height:36px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.quick-card__icon svg{ width:19px; height:19px; }
.quick-card__logo{ width:22px; height:22px; object-fit:contain; }
.quick-card__icon--attractions{ background: var(--brand-blue); }
.quick-card__icon--radio{ background:#8a6bff; }
.quick-card__icon--reseaux{ background:#fff; }
.quick-card__label{
  font-size:13.5px;
  font-weight:700;
  color: var(--text);
}

.home__spotlight-eyebrow{
  margin:0 0 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--gold-dim);
}
.home__spotlight-text{
  margin:0;
  font-size:13.5px;
  line-height:1.5;
  color: var(--text-dim);
}

.home__hours-title{
  margin:0 0 12px;
  font-size:14.5px;
  font-weight:700;
  color: var(--text);
}
.hours-row{
  display:flex;
  gap:10px;
}
.hours-loading{
  margin:0;
  font-size:12.5px;
  color: var(--text-dim);
}
.hours-park{
  flex:1 1 0;
  padding:10px;
  border-radius:12px;
  background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
  min-width:0;
}
.hours-park__name{
  margin:0 0 4px;
  font-size:11.5px;
  font-weight:700;
  color: var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hours-park__time{
  margin:0;
  font-size:14px;
  font-weight:700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hours-park__emh{
  margin:2px 0 0;
  font-size:10.5px;
  color: var(--gold-dim);
}

/* ---------- Attractions ---------- */
.attractions__updated{
  margin:0 0 14px;
  font-size:11.5px;
  color: var(--text-dim);
}

.attractions__segments{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:14px;
  background: var(--paper-card);
  border:1px solid var(--hairline);
  margin-bottom:14px;
}
.segment{
  flex:1 1 0;
  padding:9px 4px;
  border-radius:10px;
  border:none;
  background:transparent;
  color: var(--text-dim);
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.segment.is-active{
  background: var(--brand-blue);
  color:#fff;
}
.segment:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

ul.category-view{ display:none; }
ul.category-view.is-active{ display:flex; }

.attractions__filters{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  margin-bottom:14px;
}
.attractions__filters::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex:0 0 auto;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background: var(--paper-card);
  color: var(--text-dim);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.filter-chip.is-active{
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color:#fff;
}
.filter-chip:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

.attraction-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.attractions__loading{
  list-style:none;
  padding:24px 0;
  text-align:center;
  font-size:13px;
  color: var(--text-dim);
}
.attraction-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background: var(--paper-card);
  border:1px solid var(--hairline);
}
.attraction-card__icon{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
}
.attraction-card__body{
  flex:1 1 auto;
  min-width:0;
}
.attraction-card__name{
  margin:0 0 3px;
  font-size:14px;
  font-weight:700;
  color: var(--text);
}
.attraction-card__land{
  margin:0;
  font-size:11.5px;
  color: var(--text-dim);
}

.attraction-card--times{
  align-items:flex-start;
}
.time-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.time-chip{
  padding:4px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
}
.time-chip--past{
  background: var(--hairline);
  color: var(--text-dim);
}
.time-chip--upcoming{
  background: rgba(255,180,64,0.18);
  color:#c9821a;
}
.time-chip--live{
  background: rgba(111,207,143,0.18);
  color:#3f9f63;
}
:root[data-theme="dark"] .time-chip--upcoming{ color:#ffc267; }
:root[data-theme="dark"] .time-chip--live{ color:#7fe0a3; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .time-chip--upcoming{ color:#ffc267; }
  :root:not([data-theme="light"]) .time-chip--live{ color:#7fe0a3; }
}
.attraction-card__bell{
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background: transparent;
  color: var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.attraction-card__bell svg{ width:16px; height:16px; }
.attraction-card__bell.is-watching{
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
.attraction-card__bell:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

.wait-pill{
  flex:0 0 auto;
  padding:6px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
.wait-pill--low{ background: rgba(111,207,143,0.18); color:#3f9f63; }
.wait-pill--mid{ background: rgba(255,180,64,0.18); color:#c9821a; }
.wait-pill--high{ background: rgba(224,100,95,0.18); color:#d1453e; }
.wait-pill--closed{ background: var(--hairline); color: var(--text-dim); }
:root[data-theme="dark"] .wait-pill--low{ color:#7fe0a3; }
:root[data-theme="dark"] .wait-pill--mid{ color:#ffc267; }
:root[data-theme="dark"] .wait-pill--high{ color:#ff9d97; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wait-pill--low{ color:#7fe0a3; }
  :root:not([data-theme="light"]) .wait-pill--mid{ color:#ffc267; }
  :root:not([data-theme="light"]) .wait-pill--high{ color:#ff9d97; }
}

.attractions__disclaimer{
  margin:16px 0 0;
  font-size:11px;
  color: var(--text-dim);
  text-align:center;
}


.social-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.social-card__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background: var(--paper-card);
  border:1px solid var(--hairline);
  text-decoration:none;
  color:inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-card__link:active{ transform: scale(0.98); }
.social-card__link:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

.social-card__icon{
  flex: 0 0 auto;
  width:38px; height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.social-card__icon svg{ width:20px; height:20px; }
.social-card__icon--instagram{ background: linear-gradient(135deg,#f5c04a,#e0507a,#7b4ad1); }
.social-card__icon--tiktok{ background:#0d1521; }
.social-card__icon--facebook{ background:#1877f2; }
.social-card__icon--youtube{ background:#ff0000; }
.social-card__icon--discord{ background:#5865f2; }

.social-card__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.social-card__name{ font-size:14.5px; font-weight:700; color: var(--text); }
.social-card__handle{ font-size:12.5px; color: var(--text-dim); }

.social-card__chevron{
  flex:0 0 auto;
  font-size:20px;
  color: var(--text-dim);
}

.reseaux__note{
  margin-top:18px;
  font-size:11.5px;
  color: var(--text-dim);
  text-align:center;
}

.radio{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:20px 18px 32px;
}

.radio__blobs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.radio__blob{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  filter: blur(36px);
  opacity:0.45;
  animation: radio-blob-drift 9s ease-in-out infinite;
}
.radio__blob--blue{
  top:-50px; left:-70px;
  background: var(--brand-blue-light);
  animation-duration: 10s;
}
.radio__blob--gold{
  bottom:-70px; right:-50px;
  background: var(--gold);
  opacity:0.3;
  animation-duration: 8s;
  animation-delay: -2s;
}
.radio__blob--violet{
  top:35%; right:-90px;
  width:220px; height:220px;
  background: #8a6bff;
  opacity:0.35;
  animation-duration: 11s;
  animation-delay: -5s;
}
.radio__blob--pink{
  bottom:20%; left:-80px;
  width:200px; height:200px;
  background: #ff6fae;
  opacity:0.28;
  animation-duration: 12.5s;
  animation-delay: -7s;
}
@keyframes radio-blob-drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  25%{ transform: translate(36px,-30px) scale(1.22); }
  50%{ transform: translate(-10px,22px) scale(0.88); }
  75%{ transform: translate(-32px,-18px) scale(1.1); }
}

.radio__stars{ position:absolute; inset:0; pointer-events:none; }
.radio__stars span{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background: var(--text);
  opacity:0.5;
  animation: radio-twinkle 3s ease-in-out infinite;
}
@keyframes radio-twinkle{
  0%,100%{ opacity:0.12; transform:scale(1); }
  50%{ opacity:0.8; transform:scale(1.6); }
}

.radio__badge{
  position:relative;
  z-index:1;
  width:240px;
  max-width:80%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0;
}
.radio__badge img{
  width:100%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35));
  position:relative;
  z-index:1;
}
.radio__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(ellipse 70% 60% at center, var(--glow) 0%, transparent 70%);
  filter: blur(6px);
  opacity:0;
  transform:scale(0.9);
}
.radio__badge.is-live .radio__ring{
  animation: radio-pulse 2.2s ease-out infinite;
}
@keyframes radio-pulse{
  0%{ opacity:0.5; transform:scale(0.9); }
  100%{ opacity:0; transform:scale(1.15); }
}

.radio__eq{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  height:20px;
  opacity:0;
  transition: opacity 0.3s ease;
}
.radio__eq.is-live{ opacity:1; }
.radio__eq span{
  width:3px;
  height:100%;
  border-radius:2px;
  background: var(--gold);
  transform-origin: bottom center;
  animation: radio-eq-bar 1.2s ease-in-out infinite;
  animation-play-state: paused;
}
.radio__eq.is-live span{ animation-play-state: running; }
.radio__eq span:nth-child(1){ animation-duration:0.8s; animation-delay:-0.6s; }
.radio__eq span:nth-child(2){ animation-duration:1.1s; animation-delay:-0.2s; }
.radio__eq span:nth-child(3){ animation-duration:0.7s; animation-delay:-0.9s; }
.radio__eq span:nth-child(4){ animation-duration:1s; animation-delay:-0.4s; }
.radio__eq span:nth-child(5){ animation-duration:0.9s; animation-delay:-0.1s; }
@keyframes radio-eq-bar{
  0%,100%{ transform: scaleY(0.25); }
  50%{ transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce){
  .radio__stars span, .radio__eq span, .radio__badge.is-live .radio__ring, .radio__blob{
    animation: none !important;
  }
}

.radio__status{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.radio__status.is-live{ color:#e0645f; }
.radio__status.is-live::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:#e0645f;
  margin-right:6px;
  vertical-align:middle;
}

.radio__title{
  margin:0;
  max-width:280px;
  font-size:14.5px;
  font-weight:600;
  color: var(--text);
  min-height:20px;
  opacity:0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.radio__title.is-updating{
  opacity:1;
  transform: translateY(0);
}

.radio__play{
  width:64px; height:64px;
  border-radius:50%;
  border:none;
  background: var(--brand-blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 12px 24px -8px rgba(10,99,214,0.55);
}
.radio__play svg{ width:26px; height:26px; }
.radio__play svg.is-hidden{ display:none; }
.radio__play:active{ transform: scale(0.96); }
.radio__play:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}

.radio__volume{
  display:flex;
  align-items:center;
  gap:8px;
  width:200px;
  color: var(--text-dim);
}
.radio__volume svg{ width:18px; height:18px; flex:0 0 auto; }
.radio__volume input[type="range"]{
  flex:1 1 auto;
  accent-color: var(--brand-blue);
}

.tab-bar{
  position:relative;
  flex:0 0 auto;
  padding-top:26px;
  background: var(--tab-bar-deep);
}

.tab-bar__surface{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding: 14px 18px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--brand-blue) 0%, var(--tab-bar-deep) 100%);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 24px -12px rgba(10,20,60,0.35);
  -webkit-mask-image: radial-gradient(circle 34px at 50% 0px, transparent 99%, black 100%);
  mask-image: radial-gradient(circle 34px at 50% 0px, transparent 99%, black 100%);
}

.tab-bar__side{
  display:flex;
  flex:1 1 0;
  justify-content:space-evenly;
  gap:6px;
}

.tab-bar__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px 4px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:10.5px;
  font-weight:600;
  color: rgba(255,255,255,0.55);
  cursor:pointer;
  transition: color 0.15s ease;
}
.tab-bar__item svg{ width:22px; height:22px; }
.tab-bar__item[aria-current="true"]{ color:#fff; }
.tab-bar__item:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius:8px;
}

.tab-bar__center{
  position:absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%);
  width:60px;
  height:60px;
  padding:0;
  border-radius:50%;
  background: var(--paper-card);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px -6px rgba(10,20,60,0.45);
  cursor:pointer;
  animation: tab-bar-float 3.6s ease-in-out infinite;
}
.tab-bar__center:active{ transform: translateX(-50%) scale(0.94); animation-play-state:paused; }
.tab-bar__center img{
  width:30px;
  height:30px;
  object-fit:contain;
}
.tab-bar__center:focus-visible{
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}
@keyframes tab-bar-float{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .tab-bar__center{ animation:none; }
}