/* ============================================================
   Trivia 90s Radio
   Homepage hero (.t90r-hero) and the /radio page (.t90r-page),
   both driven by assets/js/radio.js. Self-contained: every rule
   is prefixed t90r- and falls back to its own colours, so the
   same files can run on a standalone radio site.
   ============================================================ */

.t90r-hero, .t90r-page {
    /* boombox body + LCD, with the site's pink/teal/gold as the neon accents */
    --r-pink: var(--color-primary, #FF1493);
    --r-pink-dark: var(--color-primary-dark, #D4107A);
    --r-teal: var(--color-accent, #00CED1);
    --r-gold: var(--color-highlight, #FFD700);
    --r-ink: var(--color-text, #2D1B69);
    --r-muted: var(--color-text-muted, #6B5B8D);
    --r-line: var(--color-border, #E8D5F0);
    --r-surface: var(--color-surface, #fff);
    --r-box: #231452;
    --r-box-2: #2F1C6B;
    --r-box-edge: #160B38;
    --r-lcd-bg: #0B2427;
    --r-lcd-fg: #7DF9E4;
    --r-lcd-dim: #3E8F86;
    --r-font: var(--font-family, 'Poppins', system-ui, sans-serif);
    --r-lcd-font: 'VT323', 'Courier New', ui-monospace, monospace;
    font-family: var(--r-font);
    color: var(--r-ink);
}
.t90r-hero *, .t90r-page * { box-sizing: border-box; }
/* zero-specificity reset so component rules below always win */
/* the hidden attribute must win over the display rules below (station filter, quiz groups) */
.t90r-hero [hidden], .t90r-page [hidden] { display: none !important; }
:where(.t90r-hero, .t90r-page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.t90r-hero :focus-visible, .t90r-page :focus-visible { outline: 3px solid var(--r-teal); outline-offset: 2px; border-radius: 6px; }

/* ---------- Boombox (shared by hero and page) ---------- */
.t90r-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 120px);
    gap: 18px;
    align-items: center;
    padding: 30px 22px 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%),
        var(--r-box);
    border: 2px solid var(--r-box-edge);
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), 0 18px 40px -18px rgba(35,20,82,.55);
    color: #fff;
    min-width: 0;
}
/* carry handle */
.t90r-box::before {
    content: "";
    position: absolute;
    left: 28%; right: 28%; top: -14px; height: 22px;
    border: 5px solid var(--r-box-edge);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}

/* speakers: dot grille, cone thumps while playing */
.t90r-spk {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle, rgba(255,255,255,.18) 1.4px, transparent 1.8px) 0 0 / 9px 9px,
        radial-gradient(circle at 50% 50%, #1a0f3f 0 58%, #120a2e 59% 100%);
    border: 5px solid var(--r-box-2);
    box-shadow: inset 0 0 0 3px var(--r-box-edge);
}
.t90r-spk::after {
    content: "";
    position: absolute;
    inset: 33%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #5a4a8f, #241656 70%);
    box-shadow: 0 0 0 4px #160b38, 0 0 0 6px rgba(255,20,147,.35);
}
.is-playing .t90r-spk::after { animation: t90r-thump .48s ease-in-out infinite alternate; }
.is-playing .t90r-spk:last-of-type::after { animation-delay: -.24s; }
@keyframes t90r-thump { from { transform: scale(1); } to { transform: scale(1.08); } }

.t90r-deck { display: grid; gap: 14px; min-width: 0; }

/* LCD */
.t90r-lcd {
    background: var(--r-lcd-bg);
    border-radius: 12px;
    padding: 10px 14px 8px;
    border: 3px solid #071518;
    box-shadow: inset 0 0 18px rgba(125,249,228,.12);
    font-family: var(--r-lcd-font);
    color: var(--r-lcd-fg);
    text-shadow: 0 0 6px rgba(125,249,228,.45);
    min-width: 0;
    display: grid;
    gap: 2px;
}
.t90r-lcd-top {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--r-lcd-dim);
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.t90r-lcd-top > span { overflow: hidden; text-overflow: ellipsis; }
.t90r-status { display: inline-flex; align-items: center; gap: 6px; }
.t90r-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r-lcd-dim); }
.is-playing:not(.is-connecting) .t90r-status { color: var(--r-pink); }
.is-playing:not(.is-connecting) .t90r-status::before { background: var(--r-pink); box-shadow: 0 0 8px var(--r-pink); animation: t90r-blink 1.4s steps(2) infinite; }
.is-error .t90r-status { color: var(--r-gold); }
@keyframes t90r-blink { 50% { opacity: .2; } }

.t90r-lcd-station { font-size: 1.9rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t90r-marquee { overflow: hidden; white-space: nowrap; font-size: 1.3rem; line-height: 1.2; min-height: 1.2em; }
.t90r-marquee > span { display: inline-block; }
.t90r-marquee.is-scrolling > span { animation: t90r-scroll var(--t90r-dur, 12s) linear infinite; padding-right: 3em; }
@keyframes t90r-scroll { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(var(--t90r-dist, -50%)); } }

/* spectrum bars */
.t90r-eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 4px; }
.t90r-eq i { flex: 1; height: 12%; background: var(--r-lcd-fg); opacity: .75; border-radius: 1px; }
.is-playing:not(.is-connecting) .t90r-eq i { animation: t90r-eq .9s ease-in-out infinite alternate; }
.t90r-eq i:nth-child(3n) { animation-duration: .7s; }
.t90r-eq i:nth-child(4n+1) { animation-duration: 1.1s; animation-delay: -.3s; }
.t90r-eq i:nth-child(5n+2) { animation-duration: .6s; animation-delay: -.5s; }
@keyframes t90r-eq { from { height: 12%; } to { height: 100%; } }

/* genre buttons on the deck */
.t90r-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.t90r-genre {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(255,255,255,.08);
    color: #E9E3FF;
    border: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
}
.t90r-genre:hover { background: rgba(255,255,255,.16); }
.t90r-genre[aria-pressed="true"] { background: var(--r-teal); border-color: var(--r-teal); color: #08262A; }

/* transport */
.t90r-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t90r-ib {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #3A2780;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
    color: #fff;
}
.t90r-ib:hover { background: #46309A; }
.t90r-ib:active { transform: translateY(1px); box-shadow: none; }
.t90r-ib svg { width: 20px; height: 20px; }
.t90r-play {
    width: 58px; height: 58px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--r-pink);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 4px rgba(255,20,147,.22);
    color: #fff;
    position: relative;
}
.t90r-play:hover { background: var(--r-pink-dark); }
.t90r-play svg { width: 26px; height: 26px; }
.is-connecting .t90r-play::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--r-gold);
    animation: t90r-spin .8s linear infinite;
}
@keyframes t90r-spin { to { transform: rotate(360deg); } }
.t90r-vol { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #CFC6F5; }
.t90r-vol svg { width: 18px; height: 18px; flex: none; }
.t90r-vol input { width: 100px; accent-color: var(--r-pink); }
.t90r-fav { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #CFC6F5; }
.t90r-fav svg { width: 22px; height: 22px; }
.t90r-fav[aria-pressed="true"] { color: var(--r-pink); }
.t90r-msg { font-size: .82rem; color: var(--r-gold); min-height: 1.2em; margin: -4px 0 0; }
.t90r-msg:empty { display: none; }

/* ---------- Homepage hero ---------- */
.t90r-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "top box" "bottom box";
    column-gap: 40px;
    align-items: center;
    margin: 28px 0 44px;
    padding: 34px;
    border-radius: var(--card-radius, 20px);
    background:
        radial-gradient(circle at 92% 8%, rgba(0,206,209,.16) 0 120px, transparent 121px),
        radial-gradient(circle at 4% 96%, rgba(255,215,0,.22) 0 90px, transparent 91px),
        var(--r-surface);
    border: 1px solid var(--color-border-light, #F5EDF9);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));
}
.t90r-hero-top { grid-area: top; align-self: end; }
.t90r-hero-bottom { grid-area: bottom; align-self: start; }
.t90r-hero > .t90r-box { grid-area: box; }
.t90r-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--r-pink);
    margin: 0 0 8px;
}
.t90r-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r-pink); box-shadow: 0 0 0 4px rgba(255,20,147,.18); }
.t90r-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; color: var(--r-ink); }
.t90r-lead { color: var(--r-muted); font-size: 1.02rem; margin: 0 0 20px; max-width: 46ch; }
.t90r-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.t90r-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    background: var(--r-pink); color: #fff;
    transition: background .15s, transform .15s;
}
.t90r-btn:hover { background: var(--r-pink-dark); color: #fff; transform: translateY(-1px); }
.t90r-btn.is-ghost { background: transparent; color: var(--r-ink); box-shadow: inset 0 0 0 2px var(--r-line); }
.t90r-btn.is-ghost:hover { box-shadow: inset 0 0 0 2px var(--r-ink); color: var(--r-ink); }
.t90r-quizlink {
    display: grid; gap: 2px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--color-primary-bg, #FFF0F7);
    text-decoration: none;
    color: var(--r-ink);
    max-width: 460px;
}
.t90r-quizlink small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--r-pink); }
.t90r-quizlink span { font-weight: 600; line-height: 1.35; }
.t90r-quizlink:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- /radio page ---------- */
.t90r-page { margin: 28px 0 48px; display: grid; gap: 28px; }
.t90r-page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.15; }
.t90r-page-head p { color: var(--r-muted); margin: 0; max-width: 62ch; }
.t90r-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "player stations" "rest stations";
    gap: 24px 28px;
    align-items: start;
}
.t90r-player { grid-area: player; min-width: 0; }
.t90r-rest { grid-area: rest; display: grid; gap: 24px; min-width: 0; }
.t90r-layout > .t90r-stations { grid-area: stations; }

.t90r-page .t90r-box { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 150px); padding: 34px 26px 24px; }
.t90r-page .t90r-lcd { padding: 14px 18px 10px; }
.t90r-page .t90r-lcd-station { font-size: 1.6rem; color: var(--r-lcd-dim); text-shadow: none; }
.t90r-lcd-songbig { font-size: 2.5rem; line-height: 1.05; }
.t90r-lcd-artist { font-size: 1.5rem; color: var(--r-lcd-fg); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.1em; }
.t90r-sleep { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: #CFC6F5; }
.t90r-sleep button { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: .76rem; color: #E9E3FF; }
.t90r-sleep button[aria-pressed="true"] { background: var(--r-gold); border-color: var(--r-gold); color: #2D1B69; font-weight: 600; }
.t90r-sleep .t90r-left { color: var(--r-gold); margin-left: 4px; }

.t90r-card {
    background: var(--r-surface);
    border: 1px solid var(--color-border-light, #F5EDF9);
    border-radius: var(--card-radius, 20px);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    min-width: 0;
}
.t90r-card h2 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -.01em; }
.t90r-card .t90r-sub { color: var(--r-muted); font-size: .88rem; margin: 0 0 14px; }

/* song history */
.t90r-history { list-style: none; margin: 0; padding: 0; display: grid; }
.t90r-history li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--color-border-light, #F5EDF9); align-items: baseline; }
.t90r-history li:first-child { border-top: 0; }
.t90r-history time { font-size: .78rem; color: var(--r-muted); font-variant-numeric: tabular-nums; }
.t90r-history b { font-weight: 600; display: block; overflow-wrap: anywhere; }
.t90r-history span { font-size: .85rem; color: var(--r-muted); }
.t90r-empty { color: var(--r-muted); font-size: .9rem; margin: 0; }

/* station list */
.t90r-stations { position: sticky; top: 84px; min-width: 0; align-self: start; }
.t90r-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.t90r-tab {
    padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: var(--color-border-light, #F5EDF9); color: var(--r-muted);
}
.t90r-tab[aria-pressed="true"] { background: var(--r-ink); color: #fff; }
.t90r-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 640px; overflow-y: auto; }
.t90r-item { display: flex; align-items: center; gap: 4px; border-radius: 14px; padding: 6px; transition: background .15s; }
.t90r-item:hover { background: var(--color-bg, #FFF8F0); }
.t90r-item.is-current { background: var(--color-primary-bg, #FFF0F7); box-shadow: inset 0 0 0 2px var(--r-pink); }
.t90r-st { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.t90r-st-meta { min-width: 0; display: grid; }
.t90r-st-meta b { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t90r-st-meta small { font-size: .78rem; color: var(--r-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t90r-item .t90r-fav { width: 38px; height: 38px; color: var(--color-text-light, #9B8DB8); }
.t90r-item .t90r-fav[aria-pressed="true"] { color: var(--r-pink); }

/* generated station tile: genre colour + Memphis confetti + initials */
.t90r-art {
    --a: #FF1493; --b: #7B2FF7;
    position: relative; flex: none;
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    font-weight: 800; font-size: .95rem; letter-spacing: -.02em; color: #fff;
    background:
        radial-gradient(circle at 80% 22%, rgba(255,255,255,.35) 0 3px, transparent 4px),
        linear-gradient(135deg, transparent 0 62%, rgba(255,255,255,.18) 62% 70%, transparent 70%),
        linear-gradient(135deg, var(--a), var(--b));
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    overflow: hidden;
}
.t90r-art.g-hits  { --a: #FF1493; --b: #9B2FD6; }
.t90r-art.g-dance { --a: #00CED1; --b: #2D6BFF; }
.t90r-art.g-rock  { --a: #FF7A1A; --b: #C2185B; }
.t90r-art.g-rnb   { --a: #7B2FF7; --b: #2D1B69; }
.t90r-art.g-easy  { --a: #FFB800; --b: #FF5A7A; }
.t90r-eqmini { display: none; position: absolute; inset: auto 0 5px; justify-content: center; align-items: flex-end; gap: 2px; height: 12px; }
.t90r-eqmini i { width: 3px; background: #fff; height: 40%; border-radius: 1px; }
.is-current .t90r-eqmini { display: flex; }
.is-current .t90r-art { font-size: 0; }
.t90r-page.is-playing .is-current .t90r-eqmini i { animation: t90r-eq .8s ease-in-out infinite alternate; }
.t90r-eqmini i:nth-child(2) { animation-delay: -.3s !important; }
.t90r-eqmini i:nth-child(3) { animation-delay: -.55s !important; }

/* quizzes for the current genre */
.t90r-quizzes .card-grid { margin-top: 4px; }
.t90r-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.t90r-qgrid .card-title { font-size: .95rem; }

/* about / faq */
.t90r-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; }
.t90r-about h2 { grid-column: 1 / -1; font-size: 1.25rem; margin: 0; }
.t90r-about h3 { font-size: 1rem; margin: 0 0 4px; }
.t90r-about p { margin: 0; color: var(--r-muted); font-size: .93rem; max-width: 60ch; }

/* ---------- Large now-playing readout (top of the control deck) ----------
   The retro skin shrinks the LCD to fit the boombox illustration; this repeats
   station / song / artist at a readable size. Own class names, so skin rules
   aimed at .t90r-lcd / .t90r-marquee / .t90r-status don't reach it. */
.t90r-readout { display: grid; gap: 2px; min-width: 0; color: #fff; }
.t90r-readout-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #B9AEDD;
}
.t90r-readout-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px 2px 7px; border-radius: 999px;
    background: rgba(255,255,255,.1); color: #fff;
}
.t90r-readout-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8A7FB5; }
.is-playing:not(.is-connecting) .t90r-readout-status { background: var(--r-pink); }
.is-playing:not(.is-connecting) .t90r-readout-status::before { background: #fff; animation: t90r-blink 1.4s steps(2) infinite; }
.is-connecting .t90r-readout-status::before { background: var(--r-gold); }
.is-error .t90r-readout-status { background: var(--r-gold); color: #2D1B69; }
.t90r-readout-station {
    font-size: 1.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;
}
.t90r-readout-song {
    font-size: 1.05rem; font-weight: 600; line-height: 1.35;
    color: var(--r-gold);
    overflow: hidden; white-space: nowrap; min-height: 1.35em;
}
.t90r-readout-song > span { display: inline-block; }
.t90r-readout-song.is-scrolling > span { animation: t90r-scroll var(--t90r-dur, 12s) linear infinite; padding-right: 3em; }
.t90r-readout-artist {
    font-size: .95rem; color: #DCD5F5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em;
}
@media (max-width: 640px) {
    .t90r-readout-station { font-size: 1.1rem; }
    .t90r-readout-song { font-size: 1rem; }
}

/* ---------- Retro /radio page, desktop: keep boombox + controls above the fold ----------
   Scoped to .t90-radio (the radio page only; the homepage hero is untouched). Lives here rather
   than in retro.css so the two sessions' files don't collide; radio.css loads after retro.css,
   so these equal-specificity rules win. The boombox width follows the viewport height so a
   ~600px-tall 720p window still shows the play button; the deck goes two-column when wide enough. */
@media (min-width: 1101px) {
    body:has(.t90-radio) main { padding-top: 8px; }
    .t90-radio .t90r-page { margin-top: 6px; }
    .t90-radio .t90r-page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
    .t90-radio .t90r-page-head .t90r-eyebrow { margin: 0; }
    .t90-radio .t90-radio-main { gap: 8px; }
    .t90-radio .t90r-player { width: clamp(420px, calc((100svh - 300px) * 1.5625), 100%); }
    .t90-radio .t90r-page .t90r-deck { margin-top: 10px; padding: 12px 14px; }
}
@media (min-width: 1101px) and (max-height: 760px) {
    /* short windows: the header's "90s Radio" button already labels the page */
    .t90-radio .t90r-page-head .t90r-eyebrow { display: none; }
}
@container (min-width: 440px) {
    .t90-radio .t90r-page .t90r-deck {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px; row-gap: 8px;
        align-items: center;
    }
    .t90-radio .t90r-page .t90r-readout { grid-column: 1; grid-row: 1 / span 2; }
    .t90-radio .t90r-page .t90r-controls { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
    .t90-radio .t90r-page .t90r-sleep { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 4px; font-size: .74rem; }
    .t90-radio .t90r-page .t90r-sleep button { padding: 3px 8px; font-size: .72rem; }
    .t90-radio .t90r-page .t90r-msg { grid-column: 1 / -1; }
    .t90-radio .t90r-page .t90r-ib { width: 38px; height: 38px; }
    .t90-radio .t90r-page .t90r-play { width: 50px; height: 50px; }
    .t90-radio .t90r-page .t90r-fav { width: 36px; height: 36px; }
    .t90-radio .t90r-page .t90r-vol { margin-left: 4px; gap: 6px; }
    .t90-radio .t90r-page .t90r-vol input { width: 72px; }
    .t90-radio .t90r-page .t90r-readout-station { font-size: 1.1rem; margin-top: 2px; }
    .t90-radio .t90r-page .t90r-readout-song { font-size: 1rem; }
    .t90-radio .t90r-page .t90r-readout-artist { font-size: .88rem; }
}

@container (min-width: 440px) and (max-width: 559px) {
    /* narrower boombox (short windows): no room for the volume slider beside the readout;
       the sleep timer takes its own row under both columns */
    .t90-radio .t90r-page .t90r-vol { display: none; }
    .t90-radio .t90r-page .t90r-readout { grid-row: 1; }
    .t90-radio .t90r-page .t90r-sleep { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .t90r-layout { grid-template-columns: 1fr; grid-template-areas: "player" "stations" "rest"; }
    .t90r-stations { position: static; }
    .t90r-list { max-height: none; }
}
@media (max-width: 900px) {
    .t90r-hero { grid-template-columns: 1fr; grid-template-areas: "top" "box" "bottom"; row-gap: 22px; padding: 22px; }
    .t90r-lead { margin-bottom: 0; }
}
@media (max-width: 640px) {
    .t90r-hero { margin: 16px 0 28px; padding: 18px 16px 20px; }
    .t90r-box, .t90r-page .t90r-box { grid-template-columns: 1fr; padding: 24px 14px 16px; }
    .t90r-spk { display: none; }
    .t90r-lcd-station { font-size: 1.6rem; }
    .t90r-lcd-songbig { font-size: 1.9rem; }
    .t90r-vol { display: none; }
    .t90r-controls { justify-content: center; }
    .t90r-genres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .t90r-genres::-webkit-scrollbar { display: none; }
    .t90r-card { padding: 16px; }
    .t90r-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .t90r-qgrid .card-title { font-size: .85rem; }
    .t90r-qgrid .card-body { padding: 10px 12px; }
    .t90r-cta { margin-bottom: 14px; }
}
@media (pointer: coarse) { .t90r-vol { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .t90r-hero *, .t90r-page * { animation: none !important; transition: none !important; }
}