:root{
  --navy:#011538;
  --navy-2:#06275a;
  --blue:#0878c9;
  --cyan:#12b9e7;
  --orange:#f7a500;
  --white:#fff;
  --soft:#b8c4d9;
  --line:rgba(255,255,255,.12);
  --card:rgba(7,34,75,.86);
  --shadow:0 28px 80px rgba(0,0,0,.28);
  --radius:28px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--navy)}
body{
  margin:0;min-height:100%;
  font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 15% 18%,rgba(18,185,231,.09),transparent 28%),
    radial-gradient(circle at 88% 70%,rgba(247,165,0,.07),transparent 22%),
    var(--navy);
  color:var(--white);
  overflow-x:hidden;
  padding:
    max(16px,env(safe-area-inset-top))
    max(16px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));
}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid rgba(18,185,231,.72);outline-offset:4px}
.ambient{position:fixed;z-index:0;pointer-events:none;border-radius:999px;filter:blur(4px)}
.ambient-one{width:420px;height:420px;left:-210px;top:6%;border:1px solid rgba(18,185,231,.11);box-shadow:0 0 0 48px rgba(18,185,231,.028),0 0 0 96px rgba(18,185,231,.018)}
.ambient-two{width:350px;height:350px;right:-210px;bottom:5%;border:1px solid rgba(247,165,0,.1);box-shadow:0 0 0 44px rgba(247,165,0,.02)}
.shell{position:relative;z-index:1;min-height:calc(100dvh - 148px);display:grid;place-items:center;padding:22px 0}
.station{width:min(1120px,100%)}
.brand-block{display:grid;justify-items:center;text-align:center;gap:12px;margin-bottom:24px}
.station-logo{width:clamp(150px,36vw,230px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))}
.brand-copy{display:grid;gap:3px}
.frequency{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:#91b9e4;font-weight:700}
h1{font-size:clamp(2rem,9vw,4.3rem);line-height:.95;margin:0;letter-spacing:-.045em;font-weight:650}
.slogan{font-size:clamp(1rem,4vw,1.28rem);margin:5px 0 0;color:#e1e9f5}
.location{margin:4px 0 0;color:#91a9c9;font-size:.91rem}
.player-card{
  display:grid;gap:24px;align-items:center;
  padding:clamp(18px,4vw,34px);
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(10,49,101,.9),rgba(3,25,57,.93));
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
}
.artwork-stage{position:relative;width:min(68vw,250px);aspect-ratio:1;margin:auto;isolation:isolate}
.broadcast-rings{position:absolute;inset:-10%;border:1px solid rgba(18,185,231,.2);border-radius:50%;z-index:-1}
.broadcast-rings:before,.broadcast-rings:after{content:"";position:absolute;border:1px solid rgba(18,185,231,.11);border-radius:50%;inset:-10%}
.broadcast-rings:after{inset:-20%;border-color:rgba(247,165,0,.075)}
body.is-playing .broadcast-rings{animation:pulse 2.8s ease-in-out infinite}
.album-art{width:100%;height:100%;object-fit:cover;border-radius:24px;background:#031a3c;box-shadow:0 20px 45px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.09);transition:opacity .22s ease}
.album-art.is-changing{opacity:.42}
.album-art.is-fallback{object-fit:contain;padding:18px;background:#011538}
.album-art.has-artwork{object-fit:cover;padding:0;background:#031a3c}
.live-pill{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  background:#fff;color:#061c3e;font-size:.68rem;font-weight:800;letter-spacing:.12em;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.22)
}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#e23535;box-shadow:0 0 0 4px rgba(226,53,53,.12)}
.now-playing{text-align:center;min-width:0}
.eyebrow{display:block;font-size:.69rem;letter-spacing:.22em;color:#7fb6ea;font-weight:800;margin-bottom:8px}
.now-playing h2{
  margin:0;font-size:clamp(1.45rem,7vw,2.55rem);line-height:1.08;letter-spacing:-.028em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#artist-name{margin:8px 0 0;font-size:clamp(1rem,4.3vw,1.3rem);color:#dce7f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metadata-status{margin:10px 0 0;color:#90a8c7;font-size:.84rem}
.controls{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.play-button{
  width:74px;height:74px;border:0;border-radius:50%;background:#fff;color:#071d3f;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease
}
.play-button:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(0,0,0,.3)}
.play-button svg{width:30px;height:30px;fill:currentColor}
.icon-pause,.loader{display:none}
body.is-playing .icon-play{display:none}
body.is-playing .icon-pause{display:block}
body.is-loading .icon-play,body.is-loading .icon-pause{display:none}
body.is-loading .loader{display:block;width:25px;height:25px;border-radius:50%;border:3px solid rgba(1,21,56,.2);border-top-color:#011538;animation:spin .7s linear infinite}
.volume-cluster{display:flex;align-items:center;gap:10px;min-width:min(280px,70vw)}
.icon-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:50%;cursor:pointer}
.icon-button svg{width:22px;height:22px;fill:#dce9f8}
.volume-off{display:none}
body.is-muted .volume-on{display:none}
body.is-muted .volume-off{display:block}
#volume{width:min(180px,52vw);accent-color:#fff;cursor:pointer}
.install-button{border:1px solid rgba(255,255,255,.18);background:transparent;padding:12px 15px;border-radius:999px;cursor:pointer;font-weight:700}
.site-footer{position:relative;z-index:1;text-align:center;color:#7891b4;font-size:.75rem;line-height:1.55;padding:16px 8px 6px}
.site-footer p{margin:2px 0}.site-footer strong{color:#a9bdd8}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(.98);opacity:.62}50%{transform:scale(1.045);opacity:1}}
@media (min-width:760px){
  .brand-block{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;gap:26px;margin-bottom:30px}
  .station-logo{width:210px}
  .player-card{grid-template-columns:220px minmax(0,1fr) auto;gap:32px}
  .artwork-stage{width:220px;margin:0}
  .now-playing{text-align:left}
  .controls{justify-content:flex-end;max-width:310px}
}
@media (min-width:1050px){
  .player-card{grid-template-columns:250px minmax(0,1fr) 330px}
  .artwork-stage{width:250px}
  .play-button{width:82px;height:82px}
}
@media (max-width:380px){
  .player-card{border-radius:22px}
  .controls{gap:13px}
  .play-button{width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

.remote-playback-button{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);padding:11px 14px;border-radius:999px;cursor:pointer;
  font-weight:750;letter-spacing:.01em;transition:background .18s ease,transform .18s ease,border-color .18s ease
}
.remote-playback-button[hidden]{display:none!important}
.remote-playback-button:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.remote-playback-button svg{width:20px;height:20px;fill:currentColor}
.remote-playback-button.is-available{border-color:rgba(18,185,231,.32)}
@media (max-width:520px){.remote-playback-button span{display:none}.remote-playback-button{width:46px;height:46px;padding:0;justify-content:center}}

/* =====================================================================
   v11 — SINGLE MOBILE LAYOUT / approved mockup
   Removes legacy mobile overrides from v7-v10 and defines one source of truth.
   ===================================================================== */

/* New wrappers are mobile-oriented, but desktop must remain fully functional. */
.mobile-live-pill,
.mobile-brand-footer,
.mobile-volume-row,
.mobile-transport-row,
.skip-button,
.volume-percent{
  display:none;
}

.station-logo-picture{display:block}

/* ---------- DESKTOP REPAIR ---------- */
@media (min-width:760px){
  .station-logo-picture{
    display:block;
    width:210px;
    flex:0 0 210px;
  }
  .station-logo-picture .station-logo{
    width:100%;
    height:auto;
  }

  .controls{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    max-width:330px;
  }

  .mobile-volume-row{
    display:flex;
    align-items:center;
    width:100%;
    gap:10px;
  }

  .mobile-volume-row .icon-button{
    flex:0 0 auto;
  }

  .mobile-volume-row #volume{
    flex:1 1 auto;
    min-width:130px;
    width:auto;
  }

  .volume-percent{
    display:block;
    min-width:40px;
    font-size:.8rem;
    color:#dce7f6;
    text-align:right;
  }

  .mobile-transport-row{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
  }

  .mobile-transport-row .skip-button{
    display:none!important;
  }

  .mobile-transport-row .play-button{
    display:grid!important;
    place-items:center;
  }

  .mobile-brand-footer,
  .mobile-live-pill{
    display:none!important;
  }
}

/* ---------- MOBILE: one viewport, mockup proportions ---------- */
@media (max-width:759px){
  :root{
    --mobile-bg:#011538;
    --mobile-bg-2:#021a3b;
    --mobile-cyan:#159eff;
  }

  html,
  body{
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    overflow:hidden!important;
    background:var(--mobile-bg);
  }

  body{
    padding:
      max(4px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(5px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
    background:
      radial-gradient(circle at 50% 34%,rgba(0,133,255,.15),transparent 28%),
      radial-gradient(circle at 50% 66%,rgba(0,92,184,.065),transparent 38%),
      linear-gradient(180deg,#011538 0%,#021a3b 55%,#01132d 100%);
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(circle at 50% 39%,transparent 0 27%,
        rgba(26,150,255,.035) 27.2% 27.45%,transparent 27.7% 33%,
        rgba(26,150,255,.025) 33.2% 33.45%,transparent 33.7%);
  }

  .ambient{display:none!important}

  .shell{
    position:relative;
    z-index:1;
    width:100%;
    height:calc(100dvh - max(9px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));
    min-height:0!important;
    padding:0!important;
    display:block!important;
  }

  .station{
    width:100%;
    max-width:480px;
    height:100%;
    min-height:0;
    margin:0 auto;
    display:grid!important;
    grid-template-rows:
      minmax(132px,20.5dvh)
      minmax(0,1fr)
      minmax(42px,5.8dvh);
    gap:0!important;
    align-items:stretch;
  }

  /* BIG logo: cropped mobile asset means CSS width is real visible width */
  .brand-block{
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .station-logo-picture{
    display:block!important;
    width:min(82vw,350px)!important;
    max-width:350px!important;
    flex:0 0 auto!important;
  }

  .station-logo{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:19.5dvh!important;
    object-fit:contain!important;
    margin:0 auto!important;
    transform:none!important;
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.19))!important;
  }

  .brand-copy,
  .frequency,
  .brand-copy h1,
  .slogan,
  .location{
    display:none!important;
  }

  /* Remove desktop card visual; mockup is an integrated player */
  .player-card{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 clamp(8px,3vw,14px)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:
      minmax(174px,34.5dvh)
      auto
      minmax(180px,24.5dvh)!important;
    grid-template-areas:
      "art"
      "meta"
      "controls"!important;
    align-items:center!important;
    justify-items:center!important;
    gap:0!important;
    overflow:visible!important;
    isolation:isolate;
  }

  .player-card::before{
    content:"";
    position:absolute;
    z-index:-2;
    top:31%;
    left:50%;
    width:min(94vw,440px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(0,143,255,.15) 0%,
      rgba(0,103,212,.075) 37%,
      transparent 69%);
    filter:blur(2px);
    pointer-events:none;
  }

  /* Artwork: dominant, square, aligned with mockup */
  .artwork-stage{
    grid-area:art!important;
    position:relative!important;
    width:min(57vw,238px)!important;
    min-width:176px!important;
    max-width:238px!important;
    aspect-ratio:1!important;
    margin:0 auto!important;
    align-self:center!important;
  }

  .broadcast-rings{
    display:block!important;
    position:absolute!important;
    inset:-12%!important;
    z-index:-1!important;
    border:1px solid rgba(17,148,255,.12)!important;
    border-radius:50%!important;
    opacity:.9!important;
    box-shadow:
      0 0 0 34px rgba(15,137,239,.024),
      0 0 0 68px rgba(15,137,239,.015)!important;
  }

  .broadcast-rings::before,
  .broadcast-rings::after{
    border-color:rgba(18,151,255,.05)!important;
  }

  body.is-playing .broadcast-rings{
    animation:pulse 3.1s ease-in-out infinite!important;
  }

  .album-art{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border-radius:25px!important;
    object-fit:cover!important;
    background:#031a3c!important;
    border:1px solid rgba(137,211,255,.42)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.055) inset,
      0 0 17px rgba(0,158,255,.57),
      0 0 43px rgba(0,108,220,.28),
      0 22px 48px rgba(0,0,0,.31)!important;
    transition:opacity .24s ease,transform .24s ease!important;
  }

  .album-art.is-changing{
    opacity:.55!important;
    transform:scale(.985)!important;
  }

  .album-art.is-fallback{
    object-fit:contain!important;
    padding:18px!important;
  }

  .album-art.has-artwork{
    object-fit:cover!important;
    padding:0!important;
  }

  .artwork-stage>.live-pill{
    display:none!important;
  }

  /* Metadata centered just under artwork */
  .now-playing{
    grid-area:meta!important;
    width:min(96%,430px)!important;
    min-width:0!important;
    margin:0!important;
    padding:3px 0 4px!important;
    text-align:center!important;
    align-self:center!important;
  }

  .eyebrow{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    margin:0 0 7px!important;
    color:#8ac7fb!important;
    font-size:clamp(.59rem,2.45vw,.68rem)!important;
    line-height:1!important;
    letter-spacing:.235em!important;
    font-weight:800!important;
  }

  .eyebrow::before,
  .eyebrow::after{
    content:""!important;
    display:block!important;
    width:31px!important;
    height:1px!important;
  }

  .eyebrow::before{
    background:linear-gradient(90deg,transparent,#118fe8)!important;
  }

  .eyebrow::after{
    background:linear-gradient(90deg,#118fe8,transparent)!important;
  }

  .now-playing h2{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
    white-space:normal!important;
    text-overflow:clip!important;
    color:#fff!important;
    font-size:clamp(1.68rem,7.7vw,2.18rem)!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
    font-weight:690!important;
    text-wrap:balance!important;
  }

  #artist-name{
    margin:7px 0 0!important;
    color:rgba(225,238,252,.83)!important;
    font-size:clamp(1rem,4.6vw,1.22rem)!important;
    line-height:1.15!important;
    font-weight:420!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .metadata-status{
    display:none!important;
  }

  .mobile-live-pill{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin-top:10px!important;
    padding:7px 13px!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#061a39!important;
    font-size:.66rem!important;
    font-weight:820!important;
    letter-spacing:.12em!important;
    box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
  }

  .mobile-live-pill i{
    width:9px!important;
    height:9px!important;
    border-radius:50%!important;
    background:#f04c57!important;
    box-shadow:0 0 0 5px rgba(240,76,87,.12)!important;
  }

  /* Controls: volume -> transport -> optional Cast */
  .controls{
    grid-area:controls!important;
    width:100%!important;
    max-width:450px!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:2px 0 0!important;
    display:grid!important;
    grid-template-rows:auto 1fr auto!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:5px!important;
  }

  .mobile-volume-row{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) 42px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
  }

  .mobile-volume-row .icon-button{
    display:grid!important;
    place-items:center!important;
    width:32px!important;
    height:32px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  .mobile-volume-row .icon-button svg{
    width:24px!important;
    height:24px!important;
    fill:#fff!important;
  }

  #volume{
    --volume-fill:50%;
    -webkit-appearance:none!important;
    appearance:none!important;
    width:100%!important;
    height:4px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,
      #fff 0%,
      #fff var(--volume-fill),
      rgba(255,255,255,.27) var(--volume-fill),
      rgba(255,255,255,.27) 100%)!important;
  }

  #volume::-webkit-slider-runnable-track{
    height:4px!important;
    border-radius:999px!important;
    background:transparent!important;
  }

  #volume::-webkit-slider-thumb{
    -webkit-appearance:none!important;
    width:17px!important;
    height:17px!important;
    margin-top:-6.5px!important;
    border:0!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(0,0,0,.2)!important;
  }

  #volume::-moz-range-track{
    height:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.27)!important;
  }

  #volume::-moz-range-progress{
    height:4px!important;
    border-radius:999px!important;
    background:#fff!important;
  }

  #volume::-moz-range-thumb{
    width:17px!important;
    height:17px!important;
    border:0!important;
    border-radius:50%!important;
    background:#fff!important;
  }

  .volume-percent{
    display:block!important;
    color:#fff!important;
    font-size:.92rem!important;
    font-weight:530!important;
    text-align:right!important;
  }

  .mobile-transport-row{
    display:grid!important;
    grid-template-columns:62px 88px 62px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:25px!important;
    width:100%!important;
    align-self:center!important;
  }

  .skip-button{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:58px!important;
    height:58px!important;
    padding:0!important;
    justify-self:center!important;
    border:1px solid rgba(99,178,247,.14)!important;
    border-radius:50%!important;
    background:rgba(3,26,60,.22)!important;
    color:#fff!important;
  }

  .skip-button svg{
    width:38px!important;
    height:38px!important;
    fill:none!important;
    stroke:#fff!important;
    stroke-width:2!important;
  }

  .skip-button span{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-41%)!important;
    font-size:.65rem!important;
    font-weight:800!important;
  }

  .mobile-transport-row .play-button{
    display:grid!important;
    place-items:center!important;
    width:88px!important;
    height:88px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#061a39!important;
    box-shadow:
      0 0 0 8px rgba(10,105,207,.07),
      0 13px 33px rgba(0,0,0,.30)!important;
  }

  .mobile-transport-row .play-button:active{
    transform:scale(.96)!important;
  }

  .mobile-transport-row .play-button svg{
    width:33px!important;
    height:33px!important;
  }

  .remote-playback-button{
    display:flex!important;
    justify-self:center!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    width:auto!important;
    max-width:100%!important;
    min-height:32px!important;
    margin:0!important;
    padding:3px 8px!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:rgba(225,239,252,.88)!important;
    box-shadow:none!important;
    font-size:.77rem!important;
    font-weight:440!important;
    white-space:nowrap!important;
  }

  .remote-playback-button[hidden]{
    display:none!important;
  }

  .remote-playback-button svg{
    width:21px!important;
    height:21px!important;
    fill:#16a6ff!important;
  }

  .remote-playback-button .device-dot{
    width:7px!important;
    height:7px!important;
    border-radius:50%!important;
    background:#0ea7ff!important;
    box-shadow:0 0 9px rgba(14,167,255,.9)!important;
  }

  .install-button{
    display:none!important;
  }

  /* Mockup footer */
  .mobile-brand-footer{
    display:grid!important;
    grid-template-columns:auto 1px 1fr!important;
    align-items:center!important;
    gap:10px!important;
    min-height:0!important;
    padding:7px 6px 1px!important;
    border-top:1px solid rgba(75,163,240,.11)!important;
    color:rgba(227,239,252,.9)!important;
  }

  .mobile-brand-name{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }

  .mobile-brand-name strong{
    font-size:clamp(.64rem,2.75vw,.76rem)!important;
    font-weight:650!important;
    letter-spacing:.015em!important;
  }

  .mini-wave{
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    height:22px!important;
  }

  .mini-wave i{
    display:block!important;
    width:3px!important;
    border-radius:999px!important;
    background:#fff!important;
  }

  .mini-wave i:nth-child(1){height:10px!important}
  .mini-wave i:nth-child(2){height:22px!important}
  .mini-wave i:nth-child(3){height:13px!important}

  .mobile-brand-divider{
    display:block!important;
    width:1px!important;
    height:23px!important;
    background:rgba(255,255,255,.12)!important;
  }

  .mobile-brand-slogan{
    min-width:0!important;
    color:#91c9f8!important;
    font-size:clamp(.61rem,2.65vw,.73rem)!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  .site-footer{
    display:none!important;
  }

  /* iOS install helper retained */
  .ios-install-hint{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    z-index:9999!important;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:14px 14px 14px 16px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:rgba(3,25,57,.97);
    box-shadow:0 18px 50px rgba(0,0,0,.32);
    backdrop-filter:blur(18px);
  }

  .ios-install-hint__content{display:grid;gap:4px;min-width:0}
  .ios-install-hint__content strong{font-size:.92rem;color:#fff}
  .ios-install-hint__content span{font-size:.78rem;line-height:1.35;color:#b8c4d9}
  .ios-install-hint__close{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:1.25rem;
  }
}

/* Short phones: keep exactly same UX hierarchy, only scale proportions. */
@media (max-width:759px) and (max-height:700px){
  .station{
    grid-template-rows:minmax(96px,16dvh) minmax(0,1fr) 38px!important;
  }

  .station-logo-picture{
    width:min(70vw,280px)!important;
  }

  .station-logo{
    max-height:15dvh!important;
  }

  .player-card{
    grid-template-rows:minmax(142px,30dvh) auto minmax(152px,24dvh)!important;
  }

  .artwork-stage{
    width:min(46vw,182px)!important;
    min-width:142px!important;
  }

  .now-playing h2{
    font-size:clamp(1.4rem,6.9vw,1.82rem)!important;
  }

  #artist-name{
    font-size:clamp(.92rem,4.2vw,1.06rem)!important;
  }

  .mobile-live-pill{
    margin-top:6px!important;
    padding:6px 10px!important;
  }

  .mobile-transport-row{
    grid-template-columns:52px 72px 52px!important;
    gap:19px!important;
  }

  .skip-button{
    width:50px!important;
    height:50px!important;
  }

  .mobile-transport-row .play-button{
    width:72px!important;
    height:72px!important;
  }
}

/* Tall phones / installed app: logo and cover grow closer to approved mockup. */
@media (max-width:759px) and (min-height:820px){
  .station{
    grid-template-rows:minmax(150px,21.5dvh) minmax(0,1fr) minmax(44px,5.5dvh)!important;
  }

  .station-logo-picture{
    width:min(85vw,365px)!important;
  }

  .artwork-stage{
    width:min(59vw,250px)!important;
    max-width:250px!important;
  }
}

@media (display-mode:standalone) and (max-width:759px){
  .station{
    grid-template-rows:minmax(155px,22dvh) minmax(0,1fr) minmax(46px,5.7dvh)!important;
  }
}

@media (min-width:760px){
  .ios-install-hint{display:none!important}
}


/* ===== v12 — controles simplificados + aviso PWA ===== */
.skip-button{
  display:none !important;
}

@media (max-width:759px){
  .mobile-transport-row{
    grid-template-columns:92px !important;
    justify-content:center !important;
    gap:0 !important;
  }

  .pwa-install-notice{
    position:fixed;
    left:14px;
    right:14px;
    bottom:max(14px, env(safe-area-inset-bottom));
    z-index:99999;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto 34px;
    align-items:center;
    gap:11px;
    padding:12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:20px;
    background:rgba(3,25,57,.97);
    box-shadow:0 18px 55px rgba(0,0,0,.38);
    backdrop-filter:blur(18px);
    transform:translateY(120%);
    opacity:0;
    transition:transform .22s ease, opacity .22s ease;
  }

  .pwa-install-notice[hidden]{
    display:none !important;
  }

  .pwa-install-notice.is-visible{
    transform:translateY(0);
    opacity:1;
  }

  .pwa-install-notice__icon{
    width:56px;
    height:56px;
    border-radius:15px;
    overflow:hidden;
    background:#011538;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
  }

  .pwa-install-notice__icon img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .pwa-install-notice__content{
    display:grid;
    gap:3px;
    min-width:0;
  }

  .pwa-install-notice__content strong{
    font-size:.88rem;
    line-height:1.15;
    color:#fff;
  }

  .pwa-install-notice__content span{
    font-size:.72rem;
    line-height:1.32;
    color:#aebed3;
  }

  .pwa-install-notice__install{
    min-height:36px;
    padding:0 12px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#011538;
    font-size:.74rem;
    font-weight:800;
    cursor:pointer;
  }

  .pwa-install-notice__close{
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:1.15rem;
    line-height:1;
    cursor:pointer;
  }
}

@media (min-width:760px){
  .pwa-install-notice{
    display:none !important;
  }
}


/* ===== v13 — MOBILE FULL CENTER ALIGNMENT ===== */
@media (max-width:759px){
  .station,
  .brand-block,
  .player-card,
  .artwork-stage,
  .now-playing,
  .controls,
  .mobile-volume-row,
  .mobile-transport-row,
  .mobile-brand-footer{
    justify-items:center;
    text-align:center;
  }

  .station{
    align-items:center;
  }

  .brand-block{
    width:100%;
    justify-content:center;
    align-items:center;
  }

  .station-logo-picture{
    margin-inline:auto;
  }

  .station-logo{
    margin-inline:auto;
  }

  .player-card{
    justify-content:center;
    justify-items:center;
    align-items:center;
  }

  .artwork-stage{
    justify-self:center;
    align-self:center;
    margin-inline:auto;
  }

  .now-playing{
    justify-self:center;
    align-self:center;
    margin-inline:auto;
    text-align:center;
  }

  .eyebrow{
    justify-content:center;
    margin-inline:auto;
  }

  .now-playing h2,
  #artist-name{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .mobile-live-pill{
    margin-left:auto;
    margin-right:auto;
  }

  .controls{
    justify-self:center;
    justify-items:center;
    align-items:center;
    text-align:center;
    margin-inline:auto;
  }

  .mobile-volume-row{
    width:min(92%,420px);
    margin-inline:auto;
    justify-self:center;
  }

  .mobile-volume-row .icon-button{
    justify-self:center;
  }

  .volume-percent{
    text-align:center;
    justify-self:center;
  }

  .mobile-transport-row{
    width:100%;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    margin-inline:auto;
  }

  .play-button{
    display:grid;
    place-items:center;
    justify-self:center !important;
    align-self:center !important;
    margin:0 auto !important;
    flex:0 0 auto;
  }

  .play-button svg,
  .play-button .loader{
    margin:auto;
  }

  .remote-playback-button{
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center;
  }

  .mobile-brand-footer{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-inline:auto;
    text-align:center;
  }

  .mobile-brand-name{
    justify-content:center;
  }

  .mobile-brand-slogan{
    text-align:center;
  }
}