/* ==========================================================================================
   STIKLET · web player, cleaned (test at /test5). The current player (js/player.js and
   css/player.css, unchanged) with the homepage's language laid over it:
   - moods are words with an underline, never pills; no FM numbers anywhere (the dial is banned)
   - Unbounded for every heading, set big where it matters (genre, player)
   - covers are printed sleeves; on a genre the record peeks out of its sleeve, like the hero
   - the page takes the colour of the genre, softly; nothing decorative on top of it
   Everything the player can do stays where it was: Settings, Sound (EQ), sleep timer, the
   Android app, install, favorites, liked songs, recent, search, keyboard keys.
   ========================================================================================== */

/* ---------- base ---------- */
#player{--bg:#0D0915;--line:rgba(255,255,255,.07)}
#player .sec{margin:44px 0 16px}
#player .sec h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em}
#player .sec span{font-weight:600}
@media (min-width:1000px){#player .sec h2{font-size:24px}}

/* the genre colour washes the top of the page, a little deeper than before */
#player .glow{height:560px;opacity:.9}

/* ---------- moods: words with an underline ---------- */
#player .chips{gap:22px;padding-top:6px;padding-bottom:8px}
#player .chip{position:relative;padding:4px 0;border-radius:0;background:none;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em;color:rgba(243,238,251,.5);transition:color .3s}
@media (hover:hover){#player .chip:hover{color:rgba(243,238,251,.9);background:none}}
#player .chip[aria-pressed="true"]{background:none;color:var(--text)}
#player .chip::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:1px;background:var(--tint);transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1)}
#player .chip[aria-pressed="true"]::after{transform:scaleX(1)}
#player .recents-q .chip{color:var(--soft)}
#player .poster .chip,#player .poster .chip[aria-pressed="true"]{background:none;color:#fff}
@media (min-width:1000px){#player .chip{font-size:15px}}

/* ---------- no FM numbers ---------- */
#player .gt .fm,#player .hero .fm,#player .gcard small{display:none}

/* ---------- home ---------- */
/* Surprise me: the mood's colour, one big word, a die; the circles calm down */
#player .surprise{background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 34%,#1a0f2e),#140c22 70%)}
#player .surprise .c1{background:color-mix(in srgb,var(--tint) 70%,#FF5A6E);opacity:.85}
#player .surprise .c2{background:color-mix(in srgb,var(--tint) 50%,#8FB4FF);opacity:.7}
#player .surprise .c3{opacity:.8}
#player .surprise .txt b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
#player .jump .jt b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}

/* genre tiles: a coloured card with the genre's sleeve; its record slides out when you point at it */
#player .gt{isolation:isolate;background-image:linear-gradient(150deg,rgba(255,255,255,.08),rgba(0,0,0,.28))!important}
#player .gt b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
#player .gt img{z-index:1;border-radius:6px;box-shadow:0 10px 22px rgba(0,0,0,.4)}
#player .gt::after{content:"";position:absolute;z-index:0;border-radius:50%;
  background:radial-gradient(circle,#0B0710 0 9%,rgba(255,255,255,.18) 9.5% 30%,#0B0710 31%),repeating-radial-gradient(circle,#0B0710 0 2px,#17121f 2px 4px);
  width:70px;height:70px;right:-14px;bottom:-14px;transform:rotate(18deg);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
#player .gt:hover::after{transform:translate(-34px,-10px) rotate(18deg)}
#player .gt:hover img{transform:rotate(6deg) scale(1.04)}
@media (min-width:1000px){
  #player .gt{height:140px}
  #player .gt b{font-size:19px}
  #player .gt::after{width:96px;height:96px;right:-16px;bottom:-16px}
  #player .gt:hover::after{transform:translate(-46px,-14px) rotate(18deg)}
}

/* recent and quick picks: printed sleeves */
#player .rc img,#player .qt img,#player .sr-row img,#player .sf img,#player .st-uc img,#player .un img,#player .b-open img{border-radius:6px}
#player .rc b{font-weight:800}
#player .qt b{font-weight:800}

/* ---------- genre page: the sleeve with its record, the name set big ---------- */
#player .ghero{position:relative}
#player .ghero img{position:relative;z-index:1;border-radius:8px;transform:rotate(-2deg)}
#player .hero h1{font-size:clamp(40px,10vw,64px);letter-spacing:-.05em;line-height:.95}
#player .hero p{font-weight:600}
@media (min-width:1000px){
  #player .ghero{gap:clamp(96px,8vw,150px);padding:14px 0 40px}
  #player .ghero::before{content:"";position:absolute;left:96px;top:20px;width:208px;height:208px;border-radius:50%;
    background:radial-gradient(circle,#0B0710 0 4%,var(--tint) 4.5% 30%,rgba(0,0,0,.25) 30.5% 31.5%,transparent 32%),repeating-radial-gradient(circle,#0B0710 0 2px,#17121f 2px 4px);
    box-shadow:0 20px 40px rgba(0,0,0,.4);animation:v5disc .9s cubic-bezier(.2,.9,.25,1) .1s backwards}
  #player .ghero h1{font-size:clamp(56px,7vw,124px);margin:6px 0 10px}
}
@keyframes v5disc{from{transform:translateX(-90px)}}

/* ---------- station table: calmer, the name first ---------- */
#player .rows-head{border-bottom:0;color:rgba(243,238,251,.45)}
#player .sr-row{border-radius:12px}
#player .sr-row .t b{font-weight:800}
#player .badge{background:none;padding:0;color:color-mix(in srgb,var(--tint) 70%,#fff)}
#player .badge.ll{background:none}

/* ---------- pills become calmer buttons ---------- */
#player .pill{font-weight:800}
#player .pill.white{background:var(--tint);color:var(--ink)}

/* ---------- page headers: one quiet poster style ---------- */
#player .poster h1{letter-spacing:-.04em}

/* ---------- side rail: quiet, the page is where the eye goes ---------- */
@media (min-width:1000px){
  #player .side{background:#0B0812;border-right-color:rgba(255,255,255,.05)}
  #player .side .nav-i{font-weight:700;color:rgba(243,238,251,.6)}
  #player .side .nav-i[aria-current="page"]{background:rgba(255,255,255,.06);color:var(--text)}
  #player .side .nav-i[aria-current="page"] svg{color:var(--tint)}
  #player .side-app{background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 26%,#1a1028),#140c20)}
  #player .sf.cur b{color:var(--text)}
}

/* ---------- the bar and the big player: the title in Unbounded ---------- */
#player .b-t b{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:14px}
#player .np-title b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
#player .st-title{letter-spacing:-.04em}
#player .st-pill.on,#player .snd-pill.on{background:var(--tint);color:var(--ink)}
#player .ctrl .big,#player .b-ctrl .big{background:var(--tint)}

/* ---------- phones ---------- */
@media (max-width:999px){
  #player .chips{gap:18px}
  #player .chip{font-size:14px}
  #player .gt{height:110px}
  #player .gt b{font-size:16px}
}

/* ==========================================================================================
   ROUND 3: one colour system and the presentation page's hero.
   The colour comes from what you're looking at (js/player5.js sets it): the genre in front of
   the crate on Home, the genre page you're on, the station on air in the player. Same formulas
   as the presentation page: --pm the light at the top, --pd its deep colour, --ps near black with
   the genre's hue, --pw the pale tint for words and buttons, --pk the ink on that tint.
   Nothing else carries colour: no fixed purple, no rainbow of tiles.
   ========================================================================================== */
@property --pw{syntax:"<color>";inherits:true;initial-value:#D8C5FF}
@property --pd{syntax:"<color>";inherits:true;initial-value:#2A1452}
@property --pm{syntax:"<color>";inherits:true;initial-value:#4B3483}
@property --ps{syntax:"<color>";inherits:true;initial-value:#120C1E}
@property --pk{syntax:"<color>";inherits:true;initial-value:#170D29}
#player{--bg:var(--ps);--surface:color-mix(in srgb,var(--pd) 55%,var(--ps));--sheet:color-mix(in srgb,var(--pd) 60%,var(--ps));
  --text:#F6F1FF;--soft:rgba(246,241,255,.78);--muted:rgba(246,241,255,.62);--dim:rgba(246,241,255,.48);--line:rgba(246,241,255,.07);
  transition:--pw .9s ease,--pd .9s ease,--pm .9s ease,--ps .9s ease,--pk .9s ease}
/* the genre's tint replaces the fixed purple everywhere the player uses an accent */
#player .app,#player .overlay,#player .mini,#player .tabs,#player .sheet,#player .snack{--tint:var(--pw);--accent:var(--pw);--ink:var(--pk)}

/* ---------- surfaces ---------- */
#player .app{background:var(--ps)}
#player .main{background:radial-gradient(70% 520px at 50% -80px,var(--pm),transparent),linear-gradient(180deg,var(--pd) 0,color-mix(in srgb,var(--pd) 45%,var(--ps)) 640px,var(--ps) 1100px)}
#player .main>.glow{display:none}
#player .top{background:linear-gradient(color-mix(in srgb,var(--pd) 88%,transparent) 30%,transparent)}
@media (min-width:1000px){
  #player .side{background:linear-gradient(180deg,color-mix(in srgb,var(--pd) 55%,var(--ps)),var(--ps) 70%);border-right:1px solid rgba(246,241,255,.05)}
  #player .side .nav-i[aria-current="page"]{background:color-mix(in srgb,var(--pw) 10%,transparent)}
  #player .side .nav-i[aria-current="page"] svg{color:var(--pw)}
  #player .side-app{background:color-mix(in srgb,var(--pw) 9%,transparent)!important;border:1px solid color-mix(in srgb,var(--pw) 14%,transparent)}
  #player .bar{background:color-mix(in srgb,var(--pd) 30%,var(--ps))!important;border-top:1px solid rgba(246,241,255,.06)}
}
#player .tabs{background:var(--ps)}
#player .tabs::before{background:linear-gradient(transparent,var(--ps))}
#player .mini{background:color-mix(in srgb,var(--pd) 80%,#000)!important}
#player .mini .line{background:color-mix(in srgb,var(--pw) 30%,transparent)}
#player .overlay{background:linear-gradient(180deg,var(--pm) 0%,var(--pd) 45%,var(--ps) 100%)}
@media (min-width:1000px){
  #player .overlay{background:none}
  #player .overlay::before{background:radial-gradient(70% 70% at 50% 0%,var(--pm),transparent),linear-gradient(180deg,var(--pd) 0%,var(--ps) 100%)}
}
#player .qt{background:rgba(246,241,255,.06)}
#player .qt.cur{background:color-mix(in srgb,var(--pw) 16%,transparent)}
#player .qt.cur b{color:var(--pw)}
#player .jump{background:rgba(246,241,255,.06)!important;border:1px solid rgba(246,241,255,.06)}
#player .jump .go{background:var(--pw);color:var(--pk)}
#player .pill.white,#player .st-pill.on,#player .snd-pill.on{background:var(--pw);color:var(--pk)}
#player .ctrl .big,#player .b-ctrl .big{background:var(--pw);color:var(--pk)}
#player .badge{color:var(--pw)}
#player .chip::after{background:var(--pw)}

/* ---------- genre cards: each in its own genre's deep colour, the name in its pale tint ---------- */
#player .gt{background:rgba(246,241,255,.055)!important;box-shadow:inset 0 0 0 1px rgba(246,241,255,.06);transition:background-color .3s,transform .18s}
#player .gt:hover{background:rgba(246,241,255,.1)!important}
#player .gt b{color:var(--text)}
#player .gt img{box-shadow:0 10px 24px rgba(0,0,0,.35)}
#player .gt span{color:rgba(246,241,255,.62)}
#player .gt::after{display:none}
#player .gcard .gimg{background:var(--gd)}

/* ---------- Home: the crate ---------- */
#player.v5-home .wrap.home>.chips{justify-content:center}
#player .v5-hero{--s:min(340px,36vh,28vw);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 6px;overflow:hidden;overflow:clip;margin:0 -32px;padding-left:32px;padding-right:32px}
#player .v5-kick{margin:0;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--pw) 72%,transparent)}
#player .v5-mid{position:relative;width:100%}
#player .v5-word{position:relative;z-index:0;margin:10px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(64px,11vw,200px);line-height:.88;letter-spacing:-.06em;white-space:nowrap;color:var(--pw)}
#player .v5-stage{position:relative;z-index:1;height:calc(var(--s) * 1.02);margin-top:calc(var(--fs,140px) * -.2);perspective:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#player .v5-it{position:absolute;left:50%;top:0;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);padding:0;border-radius:4px;
  transition:transform .75s cubic-bezier(.2,.85,.25,1),opacity .45s ease;will-change:transform}
#player .v5-it:focus-visible{outline:none}
#player .v5-it:focus-visible .v5-sleeve{outline:2px solid var(--pw);outline-offset:4px}
#player .v5-sleeve{position:absolute;inset:0;border-radius:4px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.42);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
#player .v5-sleeve img{width:100%;height:100%;display:block}
#player .v5-sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.06) 3%,transparent 9%,transparent 70%,rgba(0,0,0,.12)),linear-gradient(180deg,rgba(255,255,255,.07),transparent 40%)}
#player .v5-it:not(.on) .v5-sleeve::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ps);opacity:var(--dim,.3);transition:opacity .4s}
#player .v5-it:not(.on):hover .v5-sleeve::before{opacity:.05}
#player .v5-it.on:hover .v5-sleeve{transform:translateY(-8px)}
#player .v5-disc{pointer-events:none;position:absolute;left:5%;top:5%;width:90%;height:90%;border-radius:50%;
  background:radial-gradient(circle,#0B0710 0 3.2%,var(--la) 3.6% 17%,#0B0710 17.6%,#151019 30%,#0B0710 31%,#141018 46%,#0B0710 47%,#161119 62%,#0B0710 63%,#121016 70%,#0B0710 71.5%);
  box-shadow:0 20px 40px rgba(0,0,0,.4);transition:transform .9s cubic-bezier(.2,.8,.2,1) .1s}
#player .v5-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,255,255,.08) 12%,transparent 18% 50%,rgba(255,255,255,.06) 62%,transparent 68%)}
#player .v5-it.on .v5-disc{transform:translateX(40%)}
#player .v5-floor{position:absolute;left:50%;bottom:-6%;width:calc(var(--s) * 2.2);height:calc(var(--s) * .3);translate:-50% 0;background:radial-gradient(closest-side,rgba(6,3,12,.4),transparent);pointer-events:none;z-index:0}
#player .v5-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px;position:relative;z-index:2}
#player .v5-btn{height:56px;padding:0 30px;border-radius:28px;font-weight:800;font-size:16px;white-space:nowrap;transition:background-color .7s,color .7s,border-color .7s,box-shadow .3s,transform .25s cubic-bezier(.2,.9,.25,1)}
#player .v5-btn:hover{transform:translateY(-2px)}
#player .v5-btn.pri{background:var(--pw);color:var(--pk);box-shadow:0 16px 40px rgba(6,3,12,.3)}
#player .v5-btn.pri b{font-weight:800}
#player .v5-btn.soft{background:transparent;color:var(--text);border:1.5px solid color-mix(in srgb,var(--pw) 45%,transparent)}
#player .v5-btn.soft:hover{background:color-mix(in srgb,var(--pw) 12%,transparent);border-color:var(--pw)}

/* the old Surprise card is the hero's button now; Jump back in stays, full width */
#player.v5-home .surprise{display:none}
#player.v5-home .home-hero.two{grid-template-columns:1fr}
#player.v5-home .home-hero:not(.two){display:none}
#player.v5-home .home-hero{margin-top:56px}

/* sections: centred, like the presentation page */
#player.v5-home .sec{flex-direction:column;align-items:center;gap:8px;margin:80px 0 26px;text-align:center}
#player.v5-home .sec h2{font-size:clamp(28px,3.6vw,52px);letter-spacing:-.05em;line-height:.95;color:var(--text)}
#player.v5-home .sec span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--pw) 70%,transparent)}

@media (max-width:999px){
  #player .v5-hero{--s:min(58vw,280px,34vh);margin:0 -16px;padding:18px 16px 4px}
  #player .v5-word{font-size:clamp(48px,15vw,96px)}
  #player .v5-stage{margin-top:calc(var(--fs,60px) * -.08)}
  #player .v5-cta{margin-top:30px;gap:10px}
  #player .v5-btn{height:50px;padding:0 22px;font-size:15px}
  #player.v5-home .sec{margin:56px 0 18px}
  #player.v5-home .wrap.home>.chips{justify-content:flex-start}
}
@media (min-width:1600px){#player .v5-hero{--s:min(420px,38vh,26vw)}}
@media (prefers-reduced-motion:reduce){#player .v5-it,#player .v5-disc{transition:none}#player{transition:none}}
#player .ghero h1{color:var(--pw)}
#player .fly:not(.show){display:none!important}

/* ==========================================================================================
   ROUND 4: the other pages (Search, Favorites, Liked songs, Recent, Settings) in the same
   language. The coloured banner with its drawn shapes goes; each page opens like Home: a small
   kicker, the page's name set big in the genre's tint, a line under it, the two buttons, and on
   the right a little fan of your own sleeves from that page. Cards are quiet glass.
   ========================================================================================== */
#player .poster{background:none!important;border-radius:0;min-height:0;padding:34px 0 22px;margin-bottom:6px;overflow:visible;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick fan" "txt fan" "acts fan";column-gap:40px;row-gap:12px;align-items:end}
#player .poster .part,#player .poster .pbadge{display:none!important}
#player .poster .kick{position:static;grid-area:kick;max-width:none;font-size:11px;font-weight:800;letter-spacing:.22em;line-height:1.4;color:color-mix(in srgb,var(--pw) 72%,transparent)}
#player .poster .ptxt{grid-area:txt;gap:10px}
#player .poster h1{margin:0;max-width:none;font:700 clamp(48px,7vw,116px)/.9 var(--display);letter-spacing:-.055em;color:var(--pw);transition:color .8s}
#player .poster p{max-width:none;font-size:15px;font-weight:600;color:var(--soft)}
#player .poster .pacts{grid-area:acts;max-width:none;margin-top:8px;gap:12px}
#player .poster .pill{height:50px;padding:0 24px;border-radius:25px;background:transparent;color:var(--text);border:1.5px solid color-mix(in srgb,var(--pw) 42%,transparent);font-weight:800}
#player .poster .pill:hover{background:color-mix(in srgb,var(--pw) 12%,transparent)}
#player .poster .pill.white{background:var(--pw);color:var(--pk);border-color:transparent;box-shadow:0 14px 34px rgba(6,3,12,.28)}
#player .poster .chips{gap:22px}
#player .poster .chip,#player .poster .chip[aria-pressed="true"]{background:none;border:0;padding:4px 0;border-radius:0}
#player .poster .chip{color:rgba(246,241,255,.5)}
#player .poster .chip[aria-pressed="true"]{color:var(--text)}
/* search: a dark glass field, not a white box */
#player .poster .shero{grid-area:acts;width:100%}
#player .poster .search.big{max-width:720px;background:rgba(246,241,255,.07);border:1px solid rgba(246,241,255,.12);color:var(--text)}
#player .poster .search.big input{color:var(--text)}
#player .poster .search.big input::placeholder{color:var(--dim)}
#player .poster .search.big svg,#player .poster .search.big .clr{color:var(--soft)}
#player .poster .search.big kbd{background:rgba(246,241,255,.1);color:var(--soft)}
#player .poster .search.big:focus-within{border-color:color-mix(in srgb,var(--pw) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--pw) 18%,transparent)}
/* the fan of your own sleeves */
#player .v5-pfan{grid-area:fan;align-self:center;position:relative;width:250px;height:150px;margin-right:24px}
#player .v5-pfan img{position:absolute;top:10px;width:132px;height:132px;border-radius:4px;box-shadow:0 22px 44px rgba(0,0,0,.42);
  left:calc(var(--j) * 58px);transform:rotate(calc((var(--j) - 1) * 7deg)) translateY(calc(var(--j) * var(--j) * 4px - var(--j) * 8px));z-index:calc(3 - var(--j));transition:transform .5s cubic-bezier(.2,.9,.25,1)}
#player .v5-pfan img:nth-child(1){z-index:3}
#player .poster:hover .v5-pfan img{transform:rotate(calc((var(--j) - 1) * 10deg)) translateY(calc(var(--j) * -6px))}

/* the page under the header */
#player .wrap.page .sec h2{color:var(--text)}
#player .empty{padding:56px 16px}
#player .empty b{font:700 22px/1.15 var(--display);letter-spacing:-.03em;color:var(--pw);margin-bottom:10px}
#player .mtile{background:rgba(246,241,255,.055)!important;box-shadow:inset 0 0 0 1px rgba(246,241,255,.06)}
#player .mtile:hover{background:rgba(246,241,255,.1)!important;transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(246,241,255,.08)}
#player .mtile b{font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--mw,var(--text))}
#player .mtile small{color:var(--muted)}
#player .mstack img{border-radius:4px}
#player .gcard{background:rgba(246,241,255,.05)!important}
#player .gcard:hover{background:rgba(246,241,255,.1)!important}
#player .gcard .gimg{background:none}
#player .moodhead{background:rgba(246,241,255,.055)!important}
#player .topcard{background:rgba(246,241,255,.06)!important}
#player .topcard .go{background:var(--pw);color:var(--pk)}
/* settings */
#player .stile{background:rgba(246,241,255,.05);box-shadow:inset 0 0 0 1px rgba(246,241,255,.06)}
#player .stile.on{background:color-mix(in srgb,var(--pw) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pw) 34%,transparent)}
#player .stile.on .sw{background:var(--pw)}
#player .stile.on .sw::after{background:var(--pk)}
#player .stile b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
#player .stile.on b{color:var(--pw)}
#player .stile img{border-radius:4px}
#player .qt.sq{background:rgba(246,241,255,.05)}
#player .qt.sq:hover{background:rgba(246,241,255,.09)}
#player .kt kbd{background:rgba(246,241,255,.08)}

@media (max-width:999px){
  #player .poster{grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "txt" "acts";padding:22px 0 16px}
  #player .v5-pfan{display:none}
  #player .poster h1{font-size:clamp(42px,11vw,72px)}
}
@media (max-width:639px){
  #player .poster{display:grid;column-gap:0;row-gap:10px}
  #player .poster .kick{display:block}
  #player .poster h1{font:700 clamp(40px,12.5vw,60px)/.92 var(--display);letter-spacing:-.05em}
  #player .poster p{font-size:13.5px}
  #player .poster .pill{height:46px;padding:0 20px}
  #player .stile{min-height:128px;padding-top:48px}
  #player .stile b{font-size:15px;max-width:none}
  #player .settings .sec span{display:none}
}

/* ==========================================================================================
   ROUND 5: Home below the hero, calmer. No "Jump back in" card and no Quick picks (favorites
   live in the side rail and their own page): just your recent sleeves in one row, then every
   genre as a word, an index set in Unbounded. Pointing at a word lights it in its own colour
   and lifts its sleeve beside it. The crate follows a drag, like the presentation page.
   ========================================================================================== */
#player .v5-stage{cursor:grab}
#player .v5-stage.drag{cursor:grabbing}
#player .v5-stage.drag .v5-it{transition:opacity .2s ease}
#player .v5-stage.drag .v5-sleeve{transform:none!important}

#player.v5-home .home-hero{display:none!important}
#player.v5-home .sec:has(+ .quick),#player.v5-home .quick{display:none}

/* section titles: a small kicker, the hero stays the only big thing */
#player.v5-home .sec{flex-direction:row;justify-content:center;align-items:baseline;gap:12px;margin:88px 0 26px}
#player.v5-home .sec h2{font:800 12px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--pw) 75%,transparent)}
#player.v5-home .sec span{font-size:12px;letter-spacing:.22em;color:var(--dim)}

/* recently played: sleeves in a row, centred when they fit */
#player.v5-home .recent{justify-content:safe center;gap:22px;padding-bottom:6px}
#player.v5-home .rc{width:128px}
#player.v5-home .rc img{width:128px;height:128px;border-radius:4px;box-shadow:0 16px 34px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.9,.25,1)}
#player.v5-home .rc:hover img{transform:translateY(-6px)}
#player.v5-home .rc b{font-size:13px;margin-top:12px}
#player.v5-home .rc span{font-size:12px}

/* every genre as a sleeve on the wall: the cover, its name under it, nothing boxed; pointing at one lifts it and
   slides its record out, like the hero */
#player.v5-home .genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:34px 26px;padding:0 0 48px}
#player.v5-home .gt{position:relative;overflow:visible;height:auto!important;padding:0;border-radius:0;background:none!important;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;transform:none!important}
#player.v5-home .gt::before{content:"";position:absolute;left:4%;top:4%;width:92%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#0B0710 0 3.2%,var(--gw,#888) 3.6% 16%,#0B0710 16.6%,#151019 30%,#0B0710 31%,#141018 46%,#0B0710 47%,#161119 62%,#0B0710 63%,#121016 70%,#0B0710 71.5%);
  box-shadow:0 12px 26px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
#player.v5-home .gt img{position:relative;right:auto;bottom:auto;z-index:1;width:100%;height:auto;aspect-ratio:1;border-radius:3px;transform:none!important;box-shadow:0 16px 34px rgba(0,0,0,.38);transition:transform .45s cubic-bezier(.2,.9,.25,1)!important}
#player.v5-home .gt b{position:relative;z-index:1;max-width:100%;margin-top:14px;font:700 15px/1.2 var(--display);letter-spacing:-.025em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player.v5-home .gt span{position:relative;z-index:1;display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#player.v5-home .gt .fm{display:none}
@media (hover:hover){
  #player.v5-home .gt:hover img{transform:translateY(-6px)!important}
  #player.v5-home .gt:hover::before{transform:translate(24%,-6px)}
  #player.v5-home .gt:hover b{color:var(--gw,var(--text))}
}
#player.v5-home .gt:focus-visible{outline:none}
#player.v5-home .gt:focus-visible img{outline:2px solid var(--pw);outline-offset:4px}
#player.v5-home .gt .eq{display:none}

@media (max-width:999px){
  #player.v5-home .sec{margin:60px 0 18px}
  #player.v5-home .recent{justify-content:flex-start;gap:14px}
  #player.v5-home .rc,#player.v5-home .rc img{width:104px}
  #player.v5-home .rc img{height:104px}
  #player.v5-home .genres{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
  #player.v5-home .gt b{font-size:12.5px;margin-top:9px}
  #player.v5-home .gt span{display:none}
}

/* ==========================================================================================
   ROUND 6: genres on shelves, one per mood. Bigger sleeves, scrolled sideways (drag, arrows,
   swipe); the shelf's name in the mood's pale colour, and "Play night drive" next to it.
   ========================================================================================== */
#player.v5-home .genres,#player.v5-home .sec:has(+ .genres){display:none!important}
#player:not(.v5-shelfmode) .v5-shelves{display:none}
#player .v5-shelves{display:flex;flex-direction:column;gap:56px;margin:84px 0 40px}
#player .v5-sh{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
#player .v5-sh h2{margin:0;font:700 clamp(26px,2.6vw,40px)/1 var(--display);letter-spacing:-.045em;color:var(--mw,var(--text))}
#player .v5-sh>span:not(.v5-sharr){font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#player .v5-shplay{align-self:center;margin-left:6px;height:34px;padding:0 16px;border-radius:17px;font-weight:800;font-size:13px;color:var(--text);
  border:1.5px solid color-mix(in srgb,var(--mw) 45%,transparent);transition:background-color .25s,border-color .25s,color .25s}
#player .v5-shplay:hover{background:var(--mw);border-color:var(--mw);color:#140C22}
#player .v5-sharr{margin-left:auto;align-self:center;display:flex;gap:8px}
#player .v5-arr{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:rgba(246,241,255,.08);transition:background-color .2s,opacity .2s}
#player .v5-arr:hover{background:rgba(246,241,255,.16)}
#player .v5-shelf.at-start [data-v5="prev"],#player .v5-shelf.at-end [data-v5="next"]{opacity:.25;pointer-events:none}
#player .v5-shelf.at-start.at-end .v5-sharr{display:none}

#player .v5-track{display:flex;gap:28px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scrollbar-width:none;
  margin:0 -32px;padding:14px 32px 10px;scroll-padding:0 32px;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 48px),transparent)}
#player .v5-track::-webkit-scrollbar{display:none}
#player .v5-track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
#player .v5-track.drag .v5-rec{pointer-events:none}
#player .v5-rec{flex:none;width:clamp(200px,15vw,250px);scroll-snap-align:start;text-align:left;padding:0;background:none}
#player .v5-recart{position:relative;display:block;width:100%;aspect-ratio:1}
#player .v5-recart::before{content:"";position:absolute;left:4%;top:4%;width:92%;height:92%;border-radius:50%;
  background:radial-gradient(circle,#0B0710 0 3.2%,var(--gw,#888) 3.6% 16%,#0B0710 16.6%,#151019 30%,#0B0710 31%,#141018 46%,#0B0710 47%,#161119 62%,#0B0710 63%,#121016 70%,#0B0710 71.5%);
  box-shadow:0 12px 26px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
#player .v5-recart img{position:relative;display:block;width:100%;height:100%;border-radius:3px;background:rgba(246,241,255,.06);box-shadow:0 18px 38px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
#player .v5-rec b{display:block;margin-top:16px;font:700 17px/1.2 var(--display);letter-spacing:-.03em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
@media (hover:hover){
  #player .v5-rec:hover .v5-recart img{transform:translateY(-8px)}
  #player .v5-rec:hover .v5-recart::before{transform:translate(30%,-8px) rotate(30deg)}
  #player .v5-rec:hover b{color:var(--gw)}
}
#player .v5-rec:focus-visible{outline:none}
#player .v5-rec:focus-visible img{outline:2px solid var(--pw);outline-offset:4px}

@media (max-width:999px){
  #player .v5-shelves{gap:40px;margin-top:56px}
  #player .v5-sh{flex-wrap:wrap;gap:6px 12px;margin-bottom:12px}
  #player .v5-sh h2{font-size:24px}
  #player .v5-sharr{display:none}
  #player .v5-shplay{margin-left:auto;height:32px;font-size:12.5px}
  #player .v5-track{gap:14px;margin:0 -16px;padding:8px 16px 6px;scroll-padding:0 16px;-webkit-mask-image:none;mask-image:none}
  #player .v5-rec{width:42vw;max-width:190px}
  #player .v5-rec b{font-size:14px;margin-top:10px}
}

/* ==========================================================================================
   ROUND 7: genres as a mosaic (default). Full-bleed covers in three sizes; the name on the
   cover; on pointing, the art zooms a little and the moods and a play button come up.
   ========================================================================================== */
#player .v5-bento{margin:84px 0 40px}
#player .v5-bh{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
#player .v5-bh h2{margin:0;font:700 clamp(28px,3vw,46px)/1 var(--display);letter-spacing:-.05em;color:var(--pw)}
#player .v5-bh span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#player .v5-mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:minmax(170px,auto);grid-auto-flow:dense;gap:16px}
#player .v5-tile{position:relative;overflow:hidden;border-radius:6px;background:var(--gd);aspect-ratio:1;isolation:isolate;
  box-shadow:0 14px 34px rgba(0,0,0,.28);animation:v5tile .6s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:calc(var(--i) * 25ms)}
@keyframes v5tile{from{opacity:0;transform:translateY(18px)}}
#player .v5-tile.big{grid-column:span 2;grid-row:span 2}
#player .v5-tile.wide{grid-column:span 2;aspect-ratio:auto}
#player .v5-topen{position:absolute;inset:0;padding:0;display:block;background:none}
#player .v5-topen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.9,.25,1),filter .4s}
#player .v5-tile.wide .v5-topen img{left:auto;right:0;width:50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
#player .v5-topen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,5,14,.72));pointer-events:none;transition:opacity .3s}
#player .v5-tile.wide .v5-topen::after{background:linear-gradient(90deg,var(--gd) 30%,transparent 70%)}
#player .v5-tcap{position:absolute;left:16px;right:60px;bottom:14px;z-index:1;pointer-events:none}
#player .v5-tcap b{display:block;font:700 18px/1.08 var(--display);letter-spacing:-.035em;color:#F6F1FF;text-shadow:0 2px 14px rgba(0,0,0,.35)}
#player .v5-tcap small{display:block;margin-top:6px;font-size:12px;font-weight:700;color:rgba(246,241,255,.78);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .3s}
#player .v5-tile.big .v5-tcap{left:24px;bottom:22px}
#player .v5-tile.big .v5-tcap b{font-size:clamp(30px,3.2vw,48px);letter-spacing:-.05em}
#player .v5-tile.big .v5-tcap small{max-height:30px;opacity:1;font-size:13px}
#player .v5-tile.wide .v5-tcap{top:50%;bottom:auto;transform:translateY(-50%);right:52%}
#player .v5-tile.wide .v5-tcap b{font-size:clamp(22px,2.2vw,32px);color:var(--gw)}
#player .v5-tile.wide .v5-tcap small{max-height:30px;opacity:1}
#player .v5-tplay{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gw);color:var(--gk);
  box-shadow:0 10px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.25,1)}
#player .v5-tplay svg{margin-left:2px}
#player .v5-tile.big .v5-tplay{width:56px;height:56px;right:20px;bottom:20px}
@media (hover:hover){
  #player .v5-tile:hover .v5-topen img{transform:scale(1.06)}
  #player .v5-tile:hover .v5-tcap small{max-height:30px;opacity:1}
  #player .v5-tile:hover .v5-tplay,#player .v5-tile:focus-within .v5-tplay{opacity:1;transform:none}
}
@media (hover:none){#player .v5-tplay{opacity:1;transform:none;width:38px;height:38px;right:10px;bottom:10px}}
#player .v5-topen:focus-visible{outline:none}
#player .v5-tile:has(.v5-topen:focus-visible){outline:2px solid var(--pw);outline-offset:3px}
@media (max-width:999px){
  #player .v5-bento{margin-top:56px}
  #player .v5-bh h2{font-size:28px}
  #player .v5-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
  #player .v5-tile.wide{aspect-ratio:2/1}
  #player .v5-tcap{left:12px;bottom:11px;right:52px}
  #player .v5-tcap b{font-size:15px}
  #player .v5-tile.big .v5-tcap b{font-size:32px}
  #player .v5-tile.wide .v5-tcap b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){#player .v5-tile{animation:none}}
#player .v5-tile:not(.big) .v5-tplay{top:12px;bottom:auto}
#player .v5-tile:not(.big) .v5-tcap{right:16px}
@media (max-width:999px){#player .v5-tile:not(.big) .v5-tplay{top:10px}#player .v5-tile:not(.big) .v5-tcap{right:12px}}

/* ==========================================================================================
   ROUND 8: the mosaic, further. Its own mood filter (the tiles glide to their new places),
   a tall size besides big and wide, a slight tilt toward the pointer, the station count the
   player already knows, and a live mark on the genre that's on air.
   ========================================================================================== */
#player .v5-bh{flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
#player .v5-bt{display:flex;align-items:baseline;gap:14px}
#player .v5-bh h2{color:var(--fw,var(--pw));transition:color .4s}
#player .v5-bf{display:flex;flex-wrap:wrap;gap:6px 20px;padding-bottom:4px}
#player .v5-bf button{position:relative;padding:4px 0;background:none;font:700 14px/1.2 var(--display);letter-spacing:-.02em;color:rgba(246,241,255,.45);transition:color .25s}
#player .v5-bf button::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:1px;background:var(--mw);transform:scaleX(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
#player .v5-bf button:hover{color:var(--mw)}
#player .v5-bf button[aria-pressed="true"]{color:var(--mw)}
#player .v5-bf button[aria-pressed="true"]::after{transform:scaleX(1)}
#player .v5-tile[hidden]{display:none}
#player .v5-tile{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .3s}
#player .v5-tile:hover{box-shadow:0 24px 50px rgba(0,0,0,.4)}
#player .v5-tile.tall{grid-row:span 2;aspect-ratio:auto}
#player .v5-tile.tall .v5-topen img{height:62%;bottom:auto}
#player .v5-tile.tall .v5-topen::after{background:linear-gradient(180deg,transparent 40%,var(--gd) 62%)}
#player .v5-tile.tall .v5-tcap small,#player .v5-tile.tall .v5-tcap em{max-height:30px;opacity:1}
#player .v5-tile.tall .v5-tcap b{font-size:21px;color:var(--gw)}
#player .v5-tcap em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--gw);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .3s}
#player .v5-tile.big .v5-tcap em,#player .v5-tile.wide .v5-tcap em{max-height:30px;opacity:1}
@media (hover:hover){#player .v5-tile:hover .v5-tcap em{max-height:30px;opacity:1}}
#player .v5-air{position:absolute;left:12px;top:12px;z-index:2;display:none;align-items:flex-end;gap:2px;height:24px;padding:0 10px 0 9px;border-radius:12px;align-items:center;
  background:var(--gw);color:var(--gk);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.3)}
#player .v5-tile.on-air .v5-air{display:flex}
#player .v5-air i{width:3px;height:10px;margin-right:1px;border-radius:1px;background:currentColor;animation:v5eq .9s ease-in-out infinite alternate}
#player .v5-air i:nth-child(2){animation-delay:-.3s}#player .v5-air i:nth-child(3){animation-delay:-.6s;margin-right:6px}
@keyframes v5eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
#player .v5-tile.on-air{box-shadow:0 0 0 2px var(--gw),0 18px 40px rgba(0,0,0,.35)}
@media (max-width:999px){
  #player .v5-bf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;gap:18px}
  #player .v5-bf::-webkit-scrollbar{display:none}
  #player .v5-bf button{flex:none}
}
@media (prefers-reduced-motion:reduce){#player .v5-air i{animation:none}#player .v5-tile{transform:none}}

/* ==========================================================================================
   ROUND 9: the mosaic laid out in bands that always fill their rows; cards that are sleeves
   with their record (the record slides out and turns as you point, and turns as you scroll);
   covers rise in as they come into view; the hero eases away on scroll. The logo without its
   square. The open player's sound as layered waves from the bottom (as in /test4).
   ========================================================================================== */
#player .brand .logo,#player .logo{border-radius:0;background:none}

/* hero on scroll */
#player .v5-mid{perspective:1400px}
#player .v5-hero .v5-word{transform:translateY(calc(var(--sp,0) * 90px));opacity:calc(1 - var(--sp,0) * 1.1)}
#player .v5-stage{transform:translateY(calc(var(--sp,0) * 40px)) rotateX(calc(var(--sp,0) * 16deg)) scale(calc(1 - var(--sp,0) * .08));transform-origin:50% 100%}
#player .v5-hero .v5-cta{opacity:calc(1 - var(--sp,0) * 1.6)}
#player .v5-it .v5-disc{transform:rotate(var(--spin,0deg))}
#player .v5-it.on .v5-disc{transform:translateX(40%) rotate(var(--spin,0deg))}
#player .v5-it .v5-disc{transition:transform .9s cubic-bezier(.2,.8,.2,1) .1s}
#player .v5-disc::before{content:"";position:absolute;left:50%;top:14%;width:4%;height:4%;margin-left:-2%;border-radius:50%;background:rgba(255,255,255,.18)}

/* mosaic grid: explicit places from js (bands), square-ish rows */
#player .v5-mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:row;gap:18px}
#player .v5-tile{aspect-ratio:auto;min-height:0;height:100%;background:radial-gradient(130% 120% at 85% 15%,var(--gm),var(--gd) 70%)}
#player .v5-tile.s{aspect-ratio:1}
#player .v5-tile.big{aspect-ratio:1;grid-column:auto;grid-row:auto}
#player .v5-tile.wide{aspect-ratio:2.12/1;grid-column:auto}
#player .v5-tile.pano{aspect-ratio:3.2/1}
#player .v5-tile.banner{aspect-ratio:6.4/1}
#player .v5-tile.tall{aspect-ratio:auto}

/* the sleeve and its record inside a card */
#player .v5-tsl{position:absolute;inset:0;z-index:1;overflow:hidden;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
#player .v5-tsl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .6s cubic-bezier(.2,.9,.25,1)}
#player .v5-tdisc{position:absolute;z-index:0;border-radius:50%;aspect-ratio:1;display:none;
  background:radial-gradient(circle,#0B0710 0 3.2%,var(--ga) 3.6% 16%,#0B0710 16.6%,#151019 30%,#0B0710 31%,#141018 46%,#0B0710 47%,#161119 62%,#0B0710 63%,#121016 70%,#0B0710 71.5%);
  box-shadow:0 16px 34px rgba(0,0,0,.4);transform:rotate(var(--spin,0deg));transition:left .7s cubic-bezier(.2,.85,.2,1),top .7s cubic-bezier(.2,.85,.2,1),right .7s cubic-bezier(.2,.85,.2,1)}
#player .v5-tdisc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,255,255,.08) 12%,transparent 18% 50%,rgba(255,255,255,.06) 62%,transparent 68%)}
#player .v5-topen::after{z-index:2}
/* big: the sleeve sits in the card, tipped, its record half out to the right */
#player .v5-tile.big .v5-tsl{inset:9% auto auto 7%;width:62%;height:auto;aspect-ratio:1;border-radius:3px;box-shadow:0 26px 50px rgba(0,0,0,.45);transform:rotate(-3deg)}
#player .v5-tile.big .v5-tdisc{display:block;width:56%;top:12%;left:30%}
#player .v5-tile.big .v5-topen::after{background:linear-gradient(180deg,transparent 52%,rgba(8,5,14,.75))}
/* tall: the sleeve on top, its record peeking out underneath */
#player .v5-tile.tall .v5-tsl{inset:7% 9% auto 9%;height:auto;aspect-ratio:1;border-radius:3px;box-shadow:0 22px 40px rgba(0,0,0,.45)}
#player .v5-tile.tall .v5-tsl img{height:100%}
#player .v5-tile.tall .v5-tdisc{display:block;width:74%;left:13%;top:30%}
#player .v5-tile.tall .v5-topen::after{background:linear-gradient(180deg,transparent 55%,var(--gd) 78%)}
/* wide / pano / banner: the sleeve on the right, its record sliding out to the left behind the name */
#player .v5-tile.wide .v5-tsl,#player .v5-tile.pano .v5-tsl,#player .v5-tile.banner .v5-tsl{inset:10% 5% 10% auto;width:auto;height:80%;aspect-ratio:1;border-radius:3px;box-shadow:0 20px 40px rgba(0,0,0,.45);-webkit-mask-image:none;mask-image:none}
#player .v5-tile.wide .v5-tdisc,#player .v5-tile.pano .v5-tdisc,#player .v5-tile.banner .v5-tdisc{display:block;height:74%;width:auto;top:13%;right:20%}
#player .v5-tile.wide .v5-topen::after,#player .v5-tile.pano .v5-topen::after,#player .v5-tile.banner .v5-topen::after{background:linear-gradient(90deg,var(--gd) 22%,transparent 60%)}
#player .v5-tile.wide .v5-topen img{left:0;width:100%;-webkit-mask-image:none;mask-image:none}
#player .v5-tile.pano .v5-tcap,#player .v5-tile.banner .v5-tcap{top:50%;bottom:auto;transform:translateY(-50%);right:45%;left:28px}
#player .v5-tile.pano .v5-tcap b,#player .v5-tile.banner .v5-tcap b{font-size:clamp(26px,2.6vw,40px);color:var(--gw)}
#player .v5-tile.pano .v5-tcap small,#player .v5-tile.pano .v5-tcap em,#player .v5-tile.banner .v5-tcap small,#player .v5-tile.banner .v5-tcap em{max-height:30px;opacity:1}
#player .v5-tcap{z-index:3}
#player .v5-tplay,#player .v5-air{z-index:4}
@media (hover:hover){
  #player .v5-tile.big:hover .v5-tsl{transform:rotate(-5deg) translateY(-4px)}
  #player .v5-tile.big:hover .v5-tdisc{left:40%}
  #player .v5-tile.tall:hover .v5-tdisc{top:40%}
  #player .v5-tile.wide:hover .v5-tdisc,#player .v5-tile.pano:hover .v5-tdisc,#player .v5-tile.banner:hover .v5-tdisc{right:32%}
  #player .v5-tile.s:hover .v5-tsl img{transform:scale(1.06)}
  #player .v5-tile:hover .v5-tdisc{animation:v5spin 2.4s linear infinite}
}
@keyframes v5spin{to{transform:rotate(360deg)}}

/* covers rise in */
#player .v5-tile.rv{opacity:0;translate:0 34px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.85,.25,1),transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .3s;transition-delay:calc(var(--i,0) % 6 * 50ms)}
#player .v5-tile.rv.in{opacity:1;translate:0 0}
#player .v5-tile{animation:none}

/* the open player's sound: waves from the bottom */
#player .overlay canvas.vz-card,#player .overlay.open canvas.vz-card{opacity:0!important;pointer-events:none}
#player .v5-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:38%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}

@media (max-width:999px){
  #player .v5-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #player .v5-tile.wide{aspect-ratio:2.1/1}
  #player .v5-tile.big .v5-tdisc{width:54%}
  #player .v5-tile.wide .v5-tcap{right:48%}
}
@media (prefers-reduced-motion:reduce){#player .v5-tile.rv{opacity:1;translate:none}#player .v5-hero .v5-word,#player .v5-stage{transform:none}}
#player .v5-tile.wide .v5-tcap{right:46%;left:18px}
#player .v5-tile.wide .v5-tcap b{font-size:clamp(19px,1.7vw,26px);line-height:1.05}
/* the old bars stay running (the waves read their levels) but take no room in the layout */
#player .overlay canvas.vz-card,#player .overlay.open canvas.vz-card{position:absolute!important;left:0;bottom:0;width:360px!important;height:48px!important;margin:0!important;visibility:visible;opacity:0!important;pointer-events:none;z-index:-1}
#player .v5-waves{height:42%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%);mask-image:linear-gradient(180deg,transparent,#000 35%)}

/* ==========================================================================================
   ROUND 10: Search. Moods as big posters in their own colour (name set large, three sleeves
   fanned out of the bottom that spread on pointing); genres as full-bleed sleeves with the
   name on them and the record sliding out on pointing.
   ========================================================================================== */
#player .moods{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
#player .mtile{position:relative;overflow:hidden;height:230px!important;padding:22px!important;border-radius:6px!important;
  background:radial-gradient(120% 90% at 100% 0%,var(--mm,#4b3483),var(--md,#2a1452) 70%)!important;box-shadow:0 18px 40px rgba(0,0,0,.3)!important;transform:none}
#player .mtile:hover{transform:translateY(-4px)!important;box-shadow:0 26px 50px rgba(0,0,0,.4)!important}
#player .mtile b{font:700 clamp(26px,2.2vw,34px)/1 var(--display)!important;letter-spacing:-.05em;color:var(--mw)!important}
#player .mtile small{margin-top:8px;font-size:11px!important;font-weight:800!important;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,255,.6)!important}
#player .mstack{position:absolute;left:0;right:0;bottom:-38px;width:auto!important;height:130px!important}
#player .mstack img{width:118px!important;height:118px!important;bottom:0;border-radius:3px!important;box-shadow:0 16px 30px rgba(0,0,0,.45)!important;
  left:50%;right:auto!important;margin-left:-59px;transform:translateX(calc((var(--j) - 1) * 62px)) rotate(calc((var(--j) - 1) * 9deg)) translateY(calc(var(--j) * 0px))!important;
  z-index:calc(3 - var(--j));transition:transform .5s cubic-bezier(.2,.9,.25,1)!important}
#player .mstack img:nth-child(2){z-index:3}
#player .mtile:hover .mstack img{transform:translateX(calc((var(--j) - 1) * 84px)) rotate(calc((var(--j) - 1) * 14deg)) translateY(-14px)!important}

#player .gcards,#player .gcards.row1{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:18px!important}
#player .gcard{position:relative;display:block!important;padding:0!important;aspect-ratio:1;border-radius:4px!important;overflow:visible;background:none!important;transform:none}
#player .gcard::before{content:"";position:absolute;left:6%;top:6%;width:88%;height:88%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#0B0710 0 3.2%,var(--gw,#888) 3.6% 16%,#0B0710 16.6%,#151019 30%,#0B0710 31%,#141018 46%,#0B0710 47%,#161119 62%,#0B0710 63%,#121016 70%,#0B0710 71.5%);
  box-shadow:0 12px 26px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
#player .gcard .gimg{position:absolute!important;inset:0;z-index:1;display:block;width:100%!important;height:100%!important;border-radius:4px!important;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.38);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
#player .gcard .gimg img{width:100%!important;height:100%!important;border-radius:0!important;transform:none!important}
#player .gcard .gimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,5,14,.78))}
#player .gcard b{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;font:700 16px/1.1 var(--display)!important;letter-spacing:-.03em;color:#F6F1FF;white-space:normal!important;text-shadow:0 2px 12px rgba(0,0,0,.4)}
#player .gcard:hover{transform:none!important}
@media (hover:hover){
  #player .gcard:hover .gimg{transform:translateX(-10%) rotate(-3deg)}
  #player .gcard:hover::before{transform:translateX(22%) rotate(40deg)}
}
@media (max-width:999px){
  #player .moods{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #player .mtile{height:170px!important;padding:16px!important}
  #player .mtile b{font-size:22px!important}
  #player .mstack{bottom:-46px}
  #player .mstack img{width:86px!important;height:86px!important;margin-left:-43px;transform:translateX(calc((var(--j) - 1) * 44px)) rotate(calc((var(--j) - 1) * 9deg))!important}
  #player .gcards,#player .gcards.row1{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  #player .gcard b{font-size:12.5px!important;left:9px;right:9px;bottom:8px}
}
#player .moods{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
#player .mtile{height:220px!important}
#player .mtile b{font-size:clamp(22px,1.75vw,28px)!important;overflow-wrap:anywhere}
#player .mstack{bottom:-26px;height:120px!important}
#player .mstack img{width:96px!important;height:96px!important;margin-left:-48px;transform-origin:50% 120%;transform:translateX(calc((var(--j) - 1) * 34px)) rotate(calc((var(--j) - 1) * 12deg))!important}
#player .mtile:hover .mstack img{transform:translateX(calc((var(--j) - 1) * 46px)) rotate(calc((var(--j) - 1) * 18deg)) translateY(-12px)!important}
@media (max-width:999px){#player .mstack img{width:80px!important;height:80px!important;margin-left:-40px;transform:translateX(calc((var(--j) - 1) * 30px)) rotate(calc((var(--j) - 1) * 12deg))!important}#player .mtile{height:160px!important}}
#player .moods{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#player .mtile b{font-size:clamp(17px,1.4vw,24px)!important;white-space:nowrap;overflow-wrap:normal}
@media (max-width:999px){#player .moods{grid-template-columns:repeat(2,minmax(0,1fr))}#player .mtile b{font-size:21px!important}}
#player .mtile{padding:18px 16px!important}
#player .mtile b{font-size:clamp(16px,1.22vw,22px)!important}
@media (max-width:999px){#player .mtile:last-child:nth-child(odd){grid-column:span 2}#player .mtile b{font-size:21px!important}}

/* ==========================================================================================
   ROUND 11: the big player's info column, in a clearer order. What's playing first (kick,
   song, artist, station), then the transport as one centred row, then a footer line with the
   two pills on the left and the volume on the right. Long song names get smaller, not taller.
   ========================================================================================== */
@media (min-width:1000px){
  #player .st-info{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"kick kick" "title title" "by by" "sub sub" "ctrl ctrl" "pills vol";
    column-gap:24px;row-gap:0;align-items:center}
  #player .st-kick{grid-area:kick;margin-bottom:14px}
  #player .st-title{grid-area:title;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.02!important;letter-spacing:-.04em}
  #player .st-title.l,#player .st-title.xl{-webkit-line-clamp:3}
  #player .st-by{grid-area:by;margin:12px 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pw);opacity:1}
  #player .st-sub{grid-area:sub;margin:6px 0 0!important;font-size:14px!important;color:var(--muted)}
  #player .st-info>.ctrl{grid-area:ctrl;margin:36px 0 30px;padding:18px 22px!important;border-radius:999px;background:rgba(246,241,255,.06);box-shadow:inset 0 0 0 1px rgba(246,241,255,.06)}
  #player .stage .ctrl .big{width:80px!important;height:80px!important;margin:-22px 0}
  #player .st-pills{grid-area:pills;flex-wrap:nowrap}
  #player .st-pill{height:42px}
  #player .st-vol{grid-area:vol;min-width:0}
}
@media (min-width:1000px){
  #player .st-info>.ctrl{background:none;box-shadow:none;padding:0 4px!important;margin:34px 0 28px}
  #player .stage .ctrl .big{width:92px!important;height:92px!important;margin:0}
}

/* ==========================================================================================
   ROUND 12: the big player. Like and Favorite are about the song, so they sit next to its
   title as two round buttons; volume belongs with the transport, so it's a slim line under
   it. The sound is a 3D terrain of ridges flying toward you, filling the lower half.
   ========================================================================================== */
@media (min-width:1000px){
  #player .st-info{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick kick" "title acts" "by acts" "sub sub" "ctrl ctrl" "vol vol"}
  #player .st-pills{grid-area:acts;align-self:center;flex-direction:row;gap:10px;margin-left:12px}
  #player .st-pill{width:52px;height:52px!important;padding:0!important;border-radius:50%!important;justify-content:center;font-size:0!important;gap:0!important;
    background:rgba(246,241,255,.08)!important;color:var(--text)!important;transition:background-color .2s,color .2s,transform .2s}
  #player .st-pill:hover{background:rgba(246,241,255,.16)!important;transform:scale(1.06)}
  #player .st-pill.on{background:var(--pw)!important;color:var(--pk)!important}
  #player .st-pill svg{width:22px;height:22px}
  #player .st-info>.ctrl{margin:34px 0 16px!important}
  #player .st-vol{grid-area:vol;max-width:380px;width:100%;justify-self:center;opacity:.85}
  #player .st-vol input{height:4px}
}
#player .v5-waves{height:52%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
@media (max-width:999px){#player .v5-waves{height:34%;z-index:-1;position:fixed;opacity:.55}}
/* the terrain ends above "Up next", fading out at both edges */
@media (min-width:1000px){
  #player .v5-waves{bottom:96px;height:46%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 82%,transparent)}
}
/* the GPU terrain: taller, behind everything, its far edge melting into the page */
#player .v5-gl{height:62%!important;bottom:0!important;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent)!important;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent)!important}
@media (min-width:1000px){#player .v5-gl{bottom:80px!important;height:60%!important}}
@media (min-width:1000px){#player .v5-gl{height:44%!important;bottom:84px!important}}
@media (max-width:999px){#player .v5-gl{height:28%!important;opacity:.45}}
/* the flat visuals cover the whole player, behind everything; the picker sits bottom-right above Up next */
#player .v5-flat{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#player .overlay.v5-flatmode .v5-gl,#player .overlay.v5-flatmode .v5-waves:not(.v5-flat){display:none}
#player .overlay:not(.v5-flatmode) .v5-flat{display:none}
#player .v5-vizpick{position:absolute;right:28px;bottom:100px;z-index:5;display:flex;gap:4px;padding:4px;border-radius:20px;background:rgba(12,8,18,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#player .v5-vizpick button{height:30px;padding:0 13px;border-radius:15px;font-size:12px;font-weight:800;color:rgba(246,241,255,.65);transition:background-color .2s,color .2s}
#player .v5-vizpick button:hover{color:#F6F1FF}
#player .v5-vizpick button[aria-pressed="true"]{background:var(--pw);color:var(--pk)}
#player .overlay:not(.open) .v5-vizpick{display:none}
@media (max-width:999px){#player .v5-vizpick{position:static;align-self:center;margin:4px auto 0}#player .v5-flat{opacity:.6}}
/* test-only visual picker (to be removed): a dropdown bottom-right */
#player .v5-vizpick{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 14px;border-radius:22px}
#player .v5-vizpick span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,255,.6)}
#player .v5-vizpick select{appearance:none;-webkit-appearance:none;height:32px;padding:0 34px 0 14px;border:0;border-radius:16px;font:800 13px/1 var(--body);color:var(--pk);background:var(--pw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23140C22' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
#player .v5-vizpick select option{color:#140C22;background:#F6F1FF}

/* ---------- Sound: the visual picker, its own card. A strip of live tiles; the one in the middle is the visual ---------- */
#player .v5-vpanel{position:absolute;z-index:6;left:50%;bottom:20px;width:min(1000px,calc(100% - 80px));translate:-50% 0;padding:14px 0 14px;border-radius:26px;
  background:rgba(18,11,28,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);animation:v5vp .45s cubic-bezier(.2,.9,.25,1)}
@keyframes v5vp{from{opacity:0;transform:translateY(20px)}}
#player .v5-vhead{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 16px 10px}
#player .v5-vname{text-align:center;min-width:220px}
#player .v5-vname small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;color:rgba(246,241,255,.6)}
#player .v5-vname small i{font-style:normal;color:var(--pw)}
#player .v5-vname b{display:block;margin-top:3px;font:700 22px/1.1 var(--display);letter-spacing:-.03em;color:var(--pw)}
#player .v5-vname span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
#player .v5-varr{width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;color:var(--text);background:rgba(246,241,255,.08);transition:background-color .2s}
#player .v5-varr:hover{background:rgba(246,241,255,.18)}
#player .v5-vgrid{position:relative;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:6px calc(50% - 75px) 6px;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#player .v5-vgrid::-webkit-scrollbar{display:none}
#player .v5-vgrid.drag{cursor:grabbing;scroll-snap-type:none}
#player .v5-vt{position:relative;flex:none;width:150px;padding:0;border-radius:14px;overflow:hidden;background:var(--ps,#120C1E);aspect-ratio:16/10;scroll-snap-align:center;
  box-shadow:inset 0 0 0 1px rgba(246,241,255,.08);opacity:.55;transform:scale(.88);transition:transform .35s cubic-bezier(.2,.9,.25,1),opacity .3s,box-shadow .3s}
#player .v5-vt canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#player .v5-vt b{position:absolute;left:9px;bottom:7px;font-size:11.5px;font-weight:800;color:#F6F1FF;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#player .v5-vt:hover{opacity:.85}
#player .v5-vt[aria-selected="true"]{opacity:1;transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--pw),0 10px 30px color-mix(in srgb,var(--pw) 30%,transparent)}
#player .v5-vt[aria-selected="true"] b{opacity:0}
#player .v5-xfade{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:opacity .5s ease}
/* in Sound the queue gives its place to the card; the EQ card stays as it was */
#player .overlay:has(.stage.is-snd) .st-up{opacity:0!important;pointer-events:none}
#player .st-eq{max-height:none;overflow:visible}
@media (min-width:1000px){#player .overlay:has(.stage.is-snd) .st-body{transform:translateY(-70px)}}
@media (max-width:999px){
  #player .snd .v5-vpanel{top:72px;bottom:auto;width:calc(100% - 28px);max-width:560px;padding:10px 0}
  #player .v5-vt{width:112px}
  #player .v5-vgrid{padding:4px calc(50% - 56px) 4px;gap:8px}
  #player .v5-vname{min-width:0}
  #player .v5-vname b{font-size:18px}
  #player .v5-vname span{display:none}
  #player .v5-varr{width:34px;height:34px}
  #player .snd-card{max-height:none;overflow:visible}
}
#player .v5-vizpick{display:none!important}
#player .v5-bloom{z-index:0}
#player .overlay:not(.v5-flatmode) .v5-bloom{display:none}

/* Settings → Look (the switch also shows in the classic look, where this file is off: it carries inline-safe basics below) */
#player .v5-uiswitch{margin-bottom:8px}
#player .v5-uis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
#player .v5-uis button{text-align:left;padding:16px 18px;border-radius:16px;background:rgba(246,241,255,.05);box-shadow:inset 0 0 0 1px rgba(246,241,255,.08)}
#player .v5-uis button b{display:block;font:700 18px/1.2 var(--display);letter-spacing:-.03em}
#player .v5-uis button small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
#player .v5-uis button[aria-pressed="true"]{background:color-mix(in srgb,var(--pw) 14%,transparent);box-shadow:inset 0 0 0 2px var(--pw)}
#player .v5-uis button[aria-pressed="true"] b{color:var(--pw)}

/* ==========================================================================================
   ROUND 20: tablets and phones.
   - The player's own content always sits above the visual (on phones and tablets it isn't
     positioned, so an opaque visual could hide it: "the player shows nothing").
   - iPad portrait: the player is a centred column, the cover big, not a phone layout stretched.
   - Phone Sound page: the chosen visual moves behind the equalizer; the old cover animation goes.
   ========================================================================================== */
@media (max-width:999px){
  #player .overlay>*:not(canvas):not(.v5-vpanel){position:relative;z-index:2}
  #player .overlay .v5-flat,#player .overlay .v5-gl,#player .overlay .v5-waves{position:fixed;z-index:0}
  #player .overlay .v5-flat{opacity:.75}
  #player .overlay .v5-gl{opacity:.6}
  #player .snd .snd-art{display:none}
  #player .snd .v5-flat{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1}
  #player .snd>*:not(canvas){position:relative;z-index:2}
  #player .snd .v5-vpanel{position:absolute}
  #player .snd .snd-card{position:absolute;z-index:3;background:rgba(18,11,28,.55)}
}
@media (min-width:640px) and (max-width:999px){
  #player .overlay>div{width:100%;max-width:560px;margin:0 auto}
  #player .overlay .art{max-width:520px}
  #player .overlay .np-title b{font-size:30px}
}

/* ---------- ROUND 21: the side bar is glass ----------
   On a computer the player now spans the whole window, under the side bar too (its content keeps clear of the bar),
   so the visual moves behind the bar and shows through it, softly blurred. With the player closed, the bar is the
   same glass over the page's colour. */
@media (min-width:1000px){
  #player .app{background:radial-gradient(70% 520px at 50% -80px,var(--pm),transparent),linear-gradient(180deg,var(--pd) 0,color-mix(in srgb,var(--pd) 45%,var(--ps)) 640px,var(--ps) 1100px)}
  #player .side{position:relative;z-index:9;
    background:linear-gradient(180deg,color-mix(in srgb,var(--pd) 42%,transparent),color-mix(in srgb,var(--ps) 58%,transparent))!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
    border-right:1px solid rgba(246,241,255,.09);box-shadow:inset -1px 0 0 rgba(255,255,255,.03),12px 0 40px -24px rgba(0,0,0,.5)}
  #player .side .nav-i:hover{background:rgba(246,241,255,.06)}
  #player .side .nav-i[aria-current="page"]{background:color-mix(in srgb,var(--pw) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pw) 16%,transparent)}
  #player .side-app{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  /* the player under the bar: full width, content kept to the right of it */
  #player .overlay{left:0!important;padding-left:var(--sideW)!important;border-left:0!important}
  #player .overlay>.v5-flat,#player .overlay>.v5-bloom,#player .overlay>.v5-waves{left:0!important;width:100%!important}
}
/* no backdrop blur (older browsers, or "reduce transparency"): a solid bar instead of a see-through one */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:1000px){#player .side{background:linear-gradient(180deg,color-mix(in srgb,var(--pd) 55%,var(--ps)),var(--ps) 70%)!important}}
}
@media (prefers-reduced-transparency:reduce){
  @media (min-width:1000px){#player .side{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,color-mix(in srgb,var(--pd) 55%,var(--ps)),var(--ps) 70%)!important}}
}

/* a device that can't keep up (the visuals stepped their quality down): no live blur behind the side bar */
@media (min-width:1000px){#player.v5-lowfx .side{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,color-mix(in srgb,var(--pd) 70%,transparent),color-mix(in srgb,var(--ps) 86%,transparent))!important}}

/* ---------- ROUND 22: the phone/tablet player fits the window's height ----------
   The cover was sized by width only, so on a short window under 1000px (a small laptop window, a tablet in landscape
   with the browser bar) the controls ended up below the fold. It now also shrinks with the height, so the cover,
   the title, what's on air and the controls always fit together. */
@media (max-width:999px){
  #player .overlay .art{max-width:min(420px,max(180px,calc(100vh - 330px)));max-width:min(420px,max(180px,calc(100dvh - 330px)))}
}
@media (min-width:640px) and (max-width:999px){
  #player .overlay .art{max-width:min(520px,max(180px,calc(100vh - 330px)));max-width:min(520px,max(180px,calc(100dvh - 330px)))}
}
/* a phone on its side: cover on the left, everything else beside it, so the controls are on screen without scrolling */
@media (max-width:999px) and (max-height:500px) and (orientation:landscape){
  #player .overlay>div.playing,#player .overlay>div.paused{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:auto;align-content:start;column-gap:clamp(18px,4vw,36px);row-gap:10px;width:100%;max-width:820px;margin:0 auto}
  #player .overlay .np-head{grid-column:1/-1}
  #player .overlay .art{grid-column:1;grid-row:2/span 4;width:min(calc(100vh - 96px),300px);width:min(calc(100dvh - 96px),300px);max-width:none;align-self:start}
  #player .overlay .np-title,#player .overlay .onair,#player .overlay .ctrl,#player .overlay .timer-left{grid-column:2}
  #player .overlay .np-title b{font-size:24px}
  #player .overlay .upnext{grid-column:1/-1;margin-top:8px}
}