/* Radio screen: a working list, not a gallery. Rows are dense and uniform so the eye runs down
   them; the persistent player bar at the bottom is the site's own, so nothing here styles it. */
.radio-head{margin-bottom:14px}
.radio-head h1{margin:0 0 4px}
.radio-shell{padding-bottom:120px}

.radio-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.radio-search{flex:1 1 260px;min-height:46px;padding:12px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font:16px var(--body)}
.radio-search:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.radio-select{min-height:46px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font:600 15px var(--body)}

.radio-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.radio-chips:empty{display:none}
.radio-chips .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.radio-listhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.radio-playall{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:16px;cursor:pointer}
.radio-mode,.radio-dice{min-height:40px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font:600 14px var(--body);cursor:pointer}
.radio-mode.is-active{background:var(--accent-soft);border-color:var(--accent)}
.radio-dice{width:44px;padding:0}
.radio-count{margin-left:auto;color:var(--muted);font-size:14px}

.radio-list{list-style:none;margin:0;padding:0}
.radio-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer}
.radio-row:hover{background:var(--bg)}
.radio-row.is-playing{background:var(--accent-soft)}
.row-n{width:24px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;flex:none}
.row-cover{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg)}
.row-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.row-text b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-text small{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-time{margin-left:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;flex:none}
.row-q{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;flex:none}
.row-q:hover{border-color:var(--accent)}
.radio-empty{color:var(--muted);padding:24px 4px}

/* The queue rides above the player bar, and gets out of the way on a phone. */
.radio-queue{position:fixed;right:16px;bottom:104px;width:min(320px,86vw);max-height:46vh;overflow:auto;z-index:30;background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:10px 12px}
.radio-queue-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.radio-queue-head h2{margin:0;font:700 15px var(--display)}
.radio-queue ol{list-style:none;margin:8px 0 0;padding:0}
.radio-queue li{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;cursor:pointer}
.radio-queue li:hover{background:var(--bg)}
.q-close{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:6px 8px;min-height:36px}

.radio-wall{max-width:440px;text-align:center}
.radio-wall .dlg-actions{justify-content:center;flex-wrap:wrap}

@media (max-width:560px){
  .radio-queue{left:8px;right:8px;width:auto;bottom:96px}
  .row-time{display:none}
  .radio-count{width:100%;margin-left:0}
}

/* The stage is written to fill a page on its own; here it is a hero with a list underneath, so
   its height comes off and the art column shrinks. Everything else about it is untouched. */
body.radiopage .stage{min-height:0}
body.radiopage .stage-inner{padding:20px 20px 24px;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:26px;align-items:center}
body.radiopage .stage-art{position:static}
body.songpage.radiopage .stage-lyrics{max-height:200px;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)}
body.radiopage .stage-viz{height:56%}
/* The beat rings are meant to break the card's edge -- that is the whole effect -- so the card
   itself must not clip. The blurred cover art and the visualiser still have to stay inside the
   rounded corners, and .stage-fx is already the element that clips them; it only needed the
   radius. Escaping rings cannot add a sideways scrollbar because body.songpage is overflow-x:clip. */
.radio-stage{position:relative;margin:0 0 16px;border-radius:20px;overflow:visible}
body.radiopage .stage-fx{border-radius:20px}
.radio-stage.is-empty{background:none;border-radius:0}
.radio-stage .radio-head{padding:8px 0 0}
.radio-stage:not(.is-empty) .radio-head{display:none}
.radio-hint{color:var(--muted);font-size:14px;margin:6px 0 0}

.radio-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.radio-share-label{font:700 14px var(--display);color:var(--muted);margin-right:2px}

/* The page keeps the dark stage palette, so the list has to read on it. */
body.radiopage .radio-search,body.radiopage .radio-select,body.radiopage .radio-mode,body.radiopage .radio-dice{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#EEF2F8}
body.radiopage .radio-row:hover{background:rgba(255,255,255,.06)}
body.radiopage .radio-row.is-playing{background:rgba(255,255,255,.12)}
body.radiopage .row-n,body.radiopage .row-time,body.radiopage .row-text small,body.radiopage .radio-count,body.radiopage .radio-hint{color:#B7C0D0}
body.radiopage .row-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#EEF2F8}
body.radiopage .radio-queue{background:rgba(18,23,32,.96);border-color:rgba(255,255,255,.14);color:#EEF2F8}
body.radiopage .radio-queue li:hover{background:rgba(255,255,255,.08)}
body.radiopage .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#EEF2F8}
@media (max-width:760px){body.radiopage .stage-inner{grid-template-columns:1fr}body.radiopage .stage-art{max-width:200px;margin:0 auto}}

@media (max-width:760px){
  body.songpage.radiopage .stage-lyrics{max-height:150px;padding:10px 4px}
  body.songpage.radiopage .stage-inner{padding:14px 14px 18px;gap:14px}
}

/* Queue as a surface, not an overlay: its own column next to the list on a wide screen, its own
   block under the list on a narrow one. Nothing is ever drawn on top of anything. */
.radio-body{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1040px){.radio-body{grid-template-columns:minmax(0,1fr) 320px}}
.radio-queue{position:static;width:auto;max-height:none;box-shadow:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 14px;overflow:visible}
@media (min-width:1040px){.radio-queue{position:sticky;top:16px;max-height:calc(100vh - 200px);overflow:auto}}

/* Give the lyric block its own quiet ground so the visualiser does not read through the words,
   and keep the controls clear of it rather than fading one into the other. */
body.songpage.radiopage .stage-lyrics{background:rgba(9,13,20,.42);border-radius:14px;padding:14px 12px}
body.songpage.radiopage .stage-controls{margin-top:16px}
body.radiopage .stage-viz{opacity:.5}

/* Phones: transport is icons only, round, at a real tap size. The karaoke button is the one
   control that carries a word, and the word is what makes the row wrap onto a second line. */
@media (max-width:760px){
  body.radiopage .stage-controls{gap:6px;justify-content:center;padding:10px}
  body.radiopage .stage-controls .st-btn span{display:none}
  body.radiopage .stage-controls .st-btn{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;justify-content:center}
  body.radiopage .stage-controls .st-seekwrap{order:-1;flex:0 0 100%;width:100%}
  body.radiopage .stage-controls > *{flex:0 0 auto}
  body.radiopage .stage-controls .st-play{width:48px;height:48px}
  body.radiopage .stage-controls .st-vol{width:44px}
  body.radiopage .stage-controls .st-volume{display:none}
  body.radiopage .radio-share .btn{flex:1 1 46%}
}

/* Share row: a label and a set of marks. Text rides alongside where there is room and drops away
   on a phone, where five wide buttons were four stacked rows taller than the player itself. */
.sh-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);color:#EEF2F8;font:600 15px var(--body);cursor:pointer;text-decoration:none}
.sh-btn:hover{background:rgba(255,255,255,.14)}
.sh-i{display:inline-flex}
.sh-i svg{width:20px;height:20px;fill:currentColor;display:block}
.sh-btn.is-ok{border-color:#34d399;color:#34d399}
.sh-wa:hover{background:rgba(37,211,102,.22);border-color:#25D366}
.sh-fb:hover{background:rgba(24,119,242,.22);border-color:#1877F2}
.sh-more{background:var(--accent);border-color:var(--accent);color:#fff}

@media (max-width:760px){
  .radio-share{gap:10px}
  .radio-share-label{width:100%;margin:0 0 2px}
  .sh-btn{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;justify-content:center}
  .sh-t{display:none}
  body.radiopage .radio-share .btn{flex:0 0 auto}
}

/* Fullscreen. The compact-hero rules above are what make the radio a hero with a list under it,
   and they outrank stage.css's own fullscreen block -- so min-height:0 stayed and the whole
   screen sat crammed into the top-left corner. Restored here, at a specificity that wins. */
body.radiopage .stage:fullscreen{min-height:100vh;display:flex;align-items:center;justify-content:center}
body.radiopage .stage:fullscreen .stage-inner{width:100%;max-width:1500px;padding:40px 48px;grid-template-columns:minmax(240px,400px) minmax(0,1fr);gap:48px;align-items:center}
body.songpage.radiopage .stage:fullscreen .stage-lyrics{max-height:58vh;background:none;padding:20px 12px}
body.radiopage .stage:fullscreen .stage-viz{height:46%;opacity:.75}
body.radiopage .stage:fullscreen .stage-title{font-size:clamp(32px,4vw,64px)}
@media (max-width:760px){
  body.radiopage .stage:fullscreen .stage-inner{grid-template-columns:1fr;padding:20px 16px;gap:18px}
  body.songpage.radiopage .stage:fullscreen .stage-lyrics{max-height:40vh}
}

/* Nazwa zespolu MA WYGLADAC NA KLIKALNA.
   Pierwsza wersja miala color:inherit i podkreslenie dopiero na :hover -- czyli na telefonie
   nie bylo ZADNEGO sygnalu, ze to odnosnik, a na desktopie trzeba bylo najechac, zeby sie
   dowiedziec. W wierszu, ktory caly jest przyciskiem odtwarzania, brak takiego sygnalu oznacza,
   ze profilu zespolu po prostu nie da sie znalezc. Kolor akcentu + stale podkreslenie kropkowane:
   widac, ze to co innego niz gatunek obok, a wiersz nie zamienia sie w pasek linkow. */
.row-a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-thickness:1px}
.row-a:hover,.row-a:focus-visible{text-decoration-style:solid}
body.radiopage .row-text small .row-a{color:var(--accent-ink)}