/* =========================================================================
   Sona — telecomando.
   Mobile first, ma su schermi larghi diventa un vero pannello a due colonne
   invece di una colonna da telefono persa in mezzo allo schermo.
   La palette --accent arriva via SSE dallo stato del player.
   ========================================================================= */

:root {
  --accent: #7c5cff;
  --accent-2: #ff4d9d;
  --ink: #fff;
  --ink-dim: rgba(255, 255, 255, .62);
  --ink-faint: rgba(255, 255, 255, .36);
  --base: #08080d;
  --card: rgba(255, 255, 255, .06);
  --card-hi: rgba(255, 255, 255, .10);
  --stroke: rgba(255, 255, 255, .10);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: 18px;
  /* Altezza della barra in alto: la usa anche il selettore delle sezioni,
     che si aggancia esattamente sotto di lei. */
  --top-h: calc(61px + env(safe-area-inset-top));
  --font: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* L'attributo hidden non copre il namespace SVG: senza questa riga le
   icone play e pausa comparirebbero entrambe. */
[hidden] { display: none !important; }

svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Anello di messa a fuoco visibile solo a chi naviga da tastiera: su PC
   il telecomando si usa anche senza mouse. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

kbd {
  padding: 1px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--stroke);
  font: inherit; font-size: .88em;
}

/* ------------------------------------------------------------- sfondo --- */

#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--base); }
.bg-img {
  position: absolute; inset: -20%;
  background-size: cover; background-position: center;
  filter: blur(64px) saturate(1.6) brightness(.46);
  opacity: 0; transition: opacity 1s var(--ease);
}
.bg-img.on { opacity: 1; }
.bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 50% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .8) 55%, var(--base));
}

/* ----------------------------------------------------------- accesso --- */

#join {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(90% 70% at 50% 26%, #17121f, #05050a 72%);
}
body.joined #join { display: none; }

.join-card { width: min(340px, 100%); text-align: center; }
.join-mark {
  width: 62px; height: 70px;
  margin: 0 auto 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 26px color-mix(in oklab, var(--accent) 60%, transparent));
}
.join-mark svg { stroke-width: 2; }
.join-mark circle { fill: currentColor; stroke: none; }

.join-card h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.join-card p { margin: 12px 0 26px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); }

#joinForm { display: flex; flex-direction: column; gap: 10px; }
#joinCode {
  width: 100%;
  padding: 17px 16px;
  border-radius: 15px;
  background: var(--card); border: 1px solid var(--stroke);
  color: #fff; outline: none;
  font: inherit; font-size: 30px; font-weight: 750;
  letter-spacing: .34em; text-align: center; text-transform: uppercase;
  /* Il rientro compensa la spaziatura, che altrimenti scentra il testo. */
  text-indent: .34em;
  transition: border-color .2s, background .2s;
}
#joinCode:focus { border-color: color-mix(in oklab, var(--accent) 70%, transparent); background: var(--card-hi); outline: none; }
#joinCode::placeholder { color: rgba(255, 255, 255, .15); letter-spacing: .34em; }
#btnJoin {
  padding: 15px; border-radius: 14px;
  font-size: 15px; font-weight: 650; color: #0a0a10;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  transition: filter .2s, transform .15s var(--ease);
}
#btnJoin:disabled { filter: saturate(.5) brightness(.8); cursor: progress; }
.join-error { color: #ff8e9c !important; font-size: 13px !important; margin: 14px 0 0 !important; }
.join-back {
  width: 100%;
  margin-top: 12px; padding: 13px;
  border-radius: 14px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-dim);
  background: var(--card);
  border: 1px solid var(--stroke);
  transition: background .2s, color .2s;
}
.join-back:hover { color: var(--ink); background: var(--card-hi); }
.join-back span { color: var(--ink); letter-spacing: .12em; }
.join-force { margin-top: 14px; color: var(--ink); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.join-tip { margin-top: 24px !important; font-size: 12px !important; color: var(--ink-faint) !important; }

/* ------------------------------------------------------------- guscio --- */

#shell { padding: 0 var(--pad) calc(28px + env(safe-area-inset-bottom)); }

#remoteFoot { flex: 0 0 auto; text-align: center; margin-top: 18px; }
.credit-link {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: .8;
  transition: opacity .2s, color .2s;
}
.credit-link:hover { opacity: 1; color: var(--accent); }

/* --- barra in alto --- */

#top {
  /* Un pixel sopra il bordo: quando la barra si aggancia sfora verso l'alto,
     cosi' durante lo scorrimento (e mentre il browser del telefono ritrae la
     propria barra) non resta mai scoperto il filo di sfondo sopra l'intestazione. */
  position: sticky; top: -1px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  /* Il guscio rientra di --pad: qui lo annulliamo per andare da bordo a bordo,
     e il rientro torna come spaziatura interna. Cosi' il velo copre tutta la
     larghezza invece di lasciare due strisce nitide ai lati. */
  height: var(--top-h);
  margin: 0 calc(var(--pad) * -1) 10px;
  padding: calc(env(safe-area-inset-top) + 1px) var(--pad) 0;
  /* Il velo sfocato tiene leggibile la barra sopra la copertina che scorre,
     senza il taglio netto di un fondo pieno. */
  background: linear-gradient(to bottom, rgba(8, 8, 13, .92), rgba(8, 8, 13, .55) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 19px; height: 22px; flex: 0 0 auto;
  color: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 55%, transparent));
}
.brand-mark svg { stroke-width: 2.1; }
.brand-mark circle { fill: currentColor; stroke: none; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

/* Un solo controllo per stato, identita' del player e cambio player. */
.room-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 13px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--stroke);
  transition: background .2s, border-color .2s, transform .12s var(--ease);
}
.room-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #8a8a96;
  transition: background .3s, box-shadow .3s;
}
.room-pill.ok .dot { background: #35d07f; box-shadow: 0 0 9px #35d07f; }
.room-pill.bad .dot { background: #ff5c72; box-shadow: 0 0 9px #ff5c72; }
.room-pill.bad { border-color: rgba(255, 92, 114, .34); }

.room-code {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .17em;
  font-variant-numeric: tabular-nums;
  /* La spaziatura aggiunge un vuoto in coda: lo riassorbiamo. */
  margin-right: -.17em;
}
.room-swap { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-faint); }
.room-pill:active { transform: scale(.96); }

/* --- avviso --- */

.banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(255, 92, 114, .11);
  border: 1px solid rgba(255, 92, 114, .28);
  font-size: 13px; line-height: 1.5; color: #ffc9d1;
}
.banner svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

/* ---------------------------------------------------------- brano attuale */

#now { text-align: center; }

#artCard {
  position: relative;
  width: min(66vw, 280px); aspect-ratio: 1;
  margin: 4px auto 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, #23233a, #101018);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
/* L'alone riprende il colore della copertina e stacca la card dal fondo. */
#artGlow {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 62%, transparent), transparent 68%);
  filter: blur(40px);
  opacity: .5;
  z-index: -1;
  transition: background .8s linear;
}
#art {
  /* Senza display:block l'immagine resta inline e lo spazio sotto la linea
     di base allunga la card di qualche pixel: la copertina non sarebbe piu' quadrata. */
  display: block;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  opacity: 0; transition: opacity .5s var(--ease);
}
#art.on { opacity: 1; }
#artFallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .13);
  transition: opacity .4s;
}
#artFallback svg { width: 34%; height: 34%; stroke-width: 1.6; }
#artFallback circle { fill: currentColor; stroke: none; }
#art.on + #artFallback { opacity: 0; }

#title {
  margin: 0 0 -.1em; font-size: 22px; font-weight: 750; line-height: 1.24;
  letter-spacing: -.017em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Il ritaglio cade a filo dell'ultima riga: senza questo margine le code
     di g, p, y e le parentesi restano tagliate. */
  padding-bottom: .1em;
}
#artist {
  margin: 8px 0 0; font-size: 14.5px; font-weight: 500;
  color: transparent;
  background: linear-gradient(96deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  filter: brightness(1.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -------------------------------------------------------- avanzamento --- */

#seek { margin: 22px 0 4px; }
#seekTrack {
  position: relative; height: 7px;
  border-radius: 99px; background: rgba(255, 255, 255, .14);
  cursor: pointer;
  /* Area di presa piu' generosa del tratto visibile: sul telefono
     centrare 7 px con il pollice e' impossibile. */
  padding: 14px 0; background-clip: content-box;
  box-sizing: content-box;
  transition: height .18s var(--ease);
  /* Lo scorrimento verticale resta della pagina: il browser se lo prende
     senza chiedere permesso e ci manda un pointercancel. Di lato invece
     comanda il cursore. Senza questa riga il dito che scorre si porta via
     anche l'avanzamento. */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
#seekFill {
  position: absolute; left: 0; top: 14px; height: 7px; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 55%, transparent);
}
#seekHead {
  position: absolute; right: 0; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transform: translate(50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  transition: transform .18s var(--ease);
}
#seek.dragging #seekHead { transform: translate(50%, -50%) scale(1.32); }
#times {
  display: flex; justify-content: space-between;
  margin-top: 2px; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
}

/* ------------------------------------------------------------ comandi --- */

#transport {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 18px 0 8px;
}
.ico {
  width: 46px; height: 46px; padding: 13px;
  border-radius: 13px; color: var(--ink-dim);
  transition: color .2s, background .2s, transform .12s var(--ease);
}
.ico:active { transform: scale(.9); background: var(--card-hi); }
.ico.big { width: 56px; height: 56px; padding: 13px; color: rgba(255, 255, 255, .92); }
.ico.big svg { fill: currentColor; stroke-width: 2; }
.ico.sm { width: 40px; height: 40px; padding: 11px; }
.ico[aria-pressed="true"] { color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, transparent); }

.play {
  position: relative;
  width: 74px; height: 74px; padding: 23px;
  border-radius: 50%; color: #08080c; background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: transform .14s var(--ease), box-shadow .3s;
}
.play:active { transform: scale(.93); }
.play svg { display: none; fill: currentColor; stroke: none; }
.play[data-icon="play"] #iconPlay,
.play[data-icon="pause"] #iconPause { display: block; }

#volRow { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }

/* Cursore del volume: stessa pasta dell'avanzamento, stessa area di presa
   generosa e stessa regola sullo scorrimento. */
#vol {
  flex: 1 1 auto; position: relative;
  padding: 14px 0; cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.slider-track {
  position: relative; height: 5px;
  border-radius: 99px; background: rgba(255, 255, 255, .18);
}
.slider-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 80%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.slider-head {
  position: absolute; right: 0; top: 50%;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; transform: translate(50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  transition: transform .18s var(--ease);
}
#volVal { width: 30px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* Il cursore in mano al dito si fa vedere: cosi' si capisce che da adesso
   comanda lui e non la pagina. */
#seek.dragging #seekTrack, #vol.dragging .slider-track {
  background: rgba(255, 255, 255, .26);
}
#vol.dragging .slider-head { transform: translate(50%, -50%) scale(1.3); }
#seek.dragging #seekFill, #vol.dragging .slider-fill {
  filter: brightness(1.12);
}

#levelRow { display: flex; justify-content: center; margin: 14px 0 0; }
.chip.toggle { display: flex; align-items: center; gap: 9px; }
/* Il pallino a sinistra dice se e' attivo senza dover leggere. */
.chip.toggle::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .2s, box-shadow .2s;
}
.chip.toggle[aria-checked="true"] {
  color: var(--ink); border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 16%, var(--card));
}
.chip.toggle[aria-checked="true"]::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.chip-val { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.chip-val:empty { display: none; }
.chip-val.pending { opacity: .55; }

#vizRow { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 14px 0 4px; }
.chip {
  padding: 8px 15px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--stroke);
  font-size: 12.5px; color: var(--ink-dim);
  transition: color .2s, background .2s, border-color .2s;
}
.chip.is-on {
  color: #0a0a10; font-weight: 650;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

/* Le scorciatoie servono solo a chi ha una tastiera. */
.key-hint { display: none; }

/* --------------------------------------------------------- sezioni --- */

/* Il selettore resta a portata di pollice: si aggancia sotto l'intestazione
   e non scorre via con la lista. Il velo sconfina oltre il rientro del guscio,
   altrimenti le righe passerebbero nitide nei due margini laterali. */
#segBar {
  position: sticky; top: calc(var(--top-h) - 1px); z-index: 9;
  margin: 26px calc(var(--pad) * -1) 14px;
  padding: 8px var(--pad) 10px;
}
/* Solo sfocatura, senza fondo pieno: sotto l'intestazione deve continuare a
   vedersi il colore della copertina, non una fascia nera. La maschera spegne
   la sfocatura verso il basso, altrimenti resterebbe un taglio netto in mezzo
   alla lista. Sta su uno strato dietro al selettore, che invece resta nitido. */
#segBar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Ora dietro al selettore scorre la lista invece del fondo pagina: il fondo
   scuro sta qui, sulla pastiglia, dove ci sono le etichette da leggere.
   Resta comunque per meta' trasparente, quindi il colore passa lo stesso. */
#segments {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 14px; border: 1px solid var(--stroke);
  background: linear-gradient(var(--card), var(--card)), rgba(8, 8, 13, .46);
}
/* Quattro sezioni su uno schermo da telefono: le etichette devono restare
   su una riga sola, altrimenti la barra raddoppia di altezza. */
.seg {
  flex: 1 1 0; min-width: 0; padding: 11px 6px;
  border-radius: 10px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-faint); transition: color .2s, background .2s;
}
.seg.is-on { color: #fff; background: var(--card-hi); }
.seg span { opacity: .55; font-variant-numeric: tabular-nums; }

/* Cambiando sezione con un dito la nuova entra dal lato da cui e' arrivata:
   senza, il salto sembra un errore invece di uno spostamento. Lo scostamento
   sta dentro il rientro del guscio, cosi' la pagina non guadagna per un
   istante uno scorrimento orizzontale. */
#panes { overflow-x: clip; }
.pane.slide-next { animation: paneNext .24s var(--ease); }
.pane.slide-prev { animation: panePrev .24s var(--ease); }
@keyframes paneNext { from { opacity: 0; transform: translateX(14px); } }
@keyframes panePrev { from { opacity: 0; transform: translateX(-14px); } }

.field {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 5px 5px 13px; margin-bottom: 12px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--stroke);
  transition: border-color .2s, background .2s;
}
.field:focus-within { border-color: color-mix(in oklab, var(--accent) 60%, transparent); background: var(--card-hi); }
.field-ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-faint); }
#q {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none; color: #fff;
  font: inherit; font-size: 16px;   /* 16px evita lo zoom automatico su iOS */
  padding: 10px 0;
}
#q::placeholder { color: var(--ink-faint); }
#q::-webkit-search-cancel-button { filter: invert(1); opacity: .4; }
#btnGo {
  padding: 10px 16px; flex: 0 0 auto;
  border-radius: 11px; color: #0a0a10;
  font-size: 13px; font-weight: 650;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  transition: filter .2s;
}
#btnGo:disabled { opacity: .5; cursor: progress; }

.pane-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }
.lib-sep {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 4px 10px; padding-top: 14px;
  border-top: 1px solid var(--stroke);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.badge {
  padding: 3px 8px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent); letter-spacing: .1em; font-size: 9.5px;
}

/* --- scheda della stanza --- */

.row-main { flex: 1 1 auto; min-width: 0; }
.row-act {
  flex: 0 0 auto;
  padding: 7px 12px; border-radius: 99px;
  border: 1px solid var(--stroke); background: var(--card);
  color: var(--ink); font-size: 12px; font-weight: 600;
}
.row-act:active { background: var(--card-hi); }

.lock-list { display: flex; flex-direction: column; gap: 4px; }
.lock-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 13px;
}
.lock-item > div { flex: 1 1 auto; min-width: 0; }
.lock-item strong { display: block; font-size: 14px; font-weight: 600; }
.lock-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); }

.list { list-style: none; margin: 0 0 14px; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 13px;
  transition: background .15s;
}
.row:active { background: var(--card-hi); }
.row.is-current { background: color-mix(in oklab, var(--accent) 20%, transparent); }
.row-tap { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; text-align: left; padding: 0; }
.row-art { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: var(--card); }
.row-txt { min-width: 0; flex: 1 1 auto; }
.row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.row-del, .row-add {
  width: 34px; height: 34px; padding: 9px; flex: 0 0 auto;
  border-radius: 9px; color: var(--ink-faint);
  transition: color .18s, background .18s, opacity .18s;
}
.row-add:active { color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, transparent); }
.row-del:active { color: #ff6b81; background: rgba(255, 107, 129, .15); }
.empty { padding: 30px 14px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-faint); }

/* ------------------------------------------------- riordino della coda ---
   Col dito non esiste il passaggio del mouse, quindi qui l'impugnatura e
   le frecce restano sempre in vista. La striscia di presa e' alta quanto
   la riga: e' stretta, ma si azzecca comunque al primo tentativo. */

.row.is-sortable { gap: 8px; padding-left: 3px; }
.row-grip {
  flex: 0 0 auto; align-self: stretch;
  width: 24px; min-height: 44px; margin: -9px 0;
  display: grid; place-items: center;
  border-radius: 10px; color: var(--ink-faint);
  cursor: grab; touch-action: none;
  transition: color .18s, background .18s;
}
.row-grip svg { width: 16px; height: 24px; }
.row-grip:active { color: var(--ink); background: var(--card-hi); cursor: grabbing; }

/* Le due frecce stanno in colonna, ma insieme non devono superare di
   troppo la copertina: e' loro l'altezza della riga, e la coda su un
   telefono e' fatta per essere scorsa. */
.row-move { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.row-arrow {
  width: 29px; height: 27px; padding: 4px 6px;
  border-radius: 8px; color: var(--ink-faint);
  transition: color .18s, background .18s, opacity .18s;
}
.row-arrow:active:not(:disabled) { color: #fff; background: var(--card-hi); }
.row-arrow:disabled { opacity: .2; cursor: default; }

.list.is-sorting .row { transition: transform .16s var(--ease), background .18s; }
.row.is-dragging {
  position: relative; z-index: 3;
  transition: none;
  background: var(--card-hi);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}
.row.is-dragging .row-grip { color: var(--ink); }
body.is-sorting { user-select: none; -webkit-user-select: none; }

.danger {
  display: block; width: 100%;
  padding: 13px; border-radius: 13px;
  background: rgba(255, 92, 114, .1); border: 1px solid rgba(255, 92, 114, .26);
  color: #ff8e9c; font-size: 13.5px; font-weight: 600;
  transition: background .2s;
}
.danger:active { background: rgba(255, 92, 114, .2); }

#toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 40; transform: translate(-50%, 14px);
  max-width: min(92vw, 460px);
  padding: 12px 20px; border-radius: 99px;
  background: rgba(14, 14, 20, .94);
  backdrop-filter: blur(18px); border: 1px solid var(--stroke);
  font-size: 13px; text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none;
  transition: opacity .28s, transform .28s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================== mouse ===
   Su telefono :hover non esiste e applicarlo lascia gli elementi
   "accesi" dopo il tocco: questi stati valgono solo con un puntatore. */

@media (hover: hover) and (pointer: fine) {
  .ico:hover { color: #fff; background: var(--card-hi); transform: translateY(-1px); }
  .play:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 0 10px color-mix(in oklab, var(--accent) 20%, transparent);
  }
  .room-pill:hover { background: var(--card-hi); border-color: rgba(255, 255, 255, .2); }
  .room-pill:hover .room-swap { color: var(--ink); }
  .seg:hover { color: var(--ink-dim); }
  .seg.is-on:hover { color: #fff; }
  .chip:hover { color: #fff; background: var(--card-hi); }
  .chip.is-on:hover { color: #0a0a10; filter: brightness(1.08); }
  .row:hover { background: var(--card-hi); }
  .row-del { opacity: 0; }
  .row:hover .row-del, .row-del:focus-visible { opacity: 1; }
  .row-del:hover { color: #ff6b81; background: rgba(255, 107, 129, .13); }
  .row-grip:hover { color: var(--ink); background: var(--card-hi); }
  .row-arrow:hover:not(:disabled) { color: #fff; background: var(--card-hi); }
  .danger:hover { background: rgba(255, 92, 114, .18); }
  #btnGo:hover:not(:disabled), #btnJoin:hover { filter: brightness(1.12); transform: translateY(-1px); }
  #seekTrack:hover { height: 9px; }
  #vol:hover .slider-head { transform: translate(50%, -50%) scale(1.15); }
}

/* ============================================================ desktop ===
   Da qui in poi il telecomando smette di essere una colonna da telefono
   centrata nel vuoto: diventa un pannello a due colonne, alto quanto la
   finestra, con la lista che scorre per conto suo. */

@media (min-width: 880px) and (min-height: 560px) {
  body { overflow: hidden; }

  #shell {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px 28px;
  }

  /* Qui il guscio ha gia' il suo rientro e la barra non ha velo: niente
     sconfinamento laterale, torna allineata alle due colonne. */
  #top { height: 74px; margin: 0 0 4px; padding: 0; background: none; backdrop-filter: none; }
  .brand-mark { width: 22px; height: 25px; }
  .brand-name { font-size: 19px; }
  .room-pill { padding: 10px 14px 10px 15px; }
  .room-code { font-size: 14.5px; }

  #cols {
    flex: 1 1 auto; min-height: 0;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(360px, 440px);
    gap: 44px;
    align-items: start;
  }

  /* Colonna sinistra: centrata verticalmente, non scorre. */
  #now {
    height: 100%; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding-bottom: 20px;
  }
  #artCard { width: min(30vh, 260px); margin: 0 auto 26px; }
  #title { font-size: clamp(22px, 2vw, 30px); }
  #artist { font-size: clamp(15px, 1.3vw, 18px); }
  #seek { max-width: 460px; width: 100%; margin-inline: auto; }
  #volRow { max-width: 320px; margin-inline: auto; }

  .key-hint {
    display: block;
    margin: 26px auto 0;
    font-size: 11.5px; line-height: 2.1;
    color: var(--ink-faint);
    max-width: 420px;
  }

  /* Colonna destra: intestazione fissa, elenco che scorre da solo. */
  #side {
    height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--stroke);
    padding: 14px;
  }
  /* Qui la colonna e' gia' alta quanto la finestra e la lista scorre per
     conto suo: il selettore e' fermo di suo, senza bisogno di agganciarsi. */
  #segBar { position: static; margin: 0 0 14px; padding: 0; }
  #segBar::before { display: none; }
  #segments { background: var(--card); }
  /* min-height la mette il telecomando sul telefono, per far salire il
     selettore anche quando la sezione e' vuota: qui la annulliamo. */
  #panes { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; padding-right: 4px; }
  #panes::-webkit-scrollbar { width: 9px; }
  #panes::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
  #panes::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }

  .banner { margin-bottom: 12px; }
  #toast { bottom: 32px; }
}

/* Tablet e telefoni in orizzontale: colonna centrata, non a tutta larghezza. */
@media (min-width: 620px) and (max-width: 879px) {
  #shell { max-width: 560px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ----------------------------------------------------------- playlist ---
   Le playlist di questo dispositivo e quelle del player: stesso vestito,
   comandi diversi. Il dito ha bisogno di bersagli larghi, quindi i modi di
   accodare stanno su una riga tutta loro invece che in fondo al nome. */

.pl-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.cta {
  flex: 1 1 0;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 13px; font-weight: 650;
  color: #0a0a10;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  transition: filter .2s;
}
.cta:active { filter: brightness(1.15); }
.cta.ghost {
  color: var(--ink);
  background: var(--card); border: 1px solid var(--stroke);
}
.cta.ghost:active { background: var(--card-hi); }

.plist-row {
  padding: 12px 13px 11px;
  margin-bottom: 9px;
  border-radius: 14px;
  background: var(--card); border: 1px solid var(--stroke);
}
.plist-row.is-open { background: var(--card-hi); border-color: rgba(255, 255, 255, .18); }

/* Il nome apre e chiude il contenuto: bersaglio largo quanto la riga. */
.plist-open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; text-align: left; }
.plist-txt { min-width: 0; flex: 1 1 auto; }
.plist-chev {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: var(--ink-faint);
  transition: transform .22s var(--ease), color .2s;
}
.plist-row.is-open .plist-chev { transform: rotate(180deg); color: var(--ink); }

.plist-tracks {
  margin: 11px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--stroke);
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.plist-tracks .row { padding: 6px 4px; }
.plist-tracks .row-art { width: 40px; height: 40px; border-radius: 8px; }
.plist-tracks .empty { padding: 20px 10px; }

.plist-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist-meta { margin-top: 3px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.plist-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

.pl-btn {
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--card-hi); border: 1px solid var(--stroke);
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
  transition: color .18s, background .18s;
}
.pl-btn:active { color: #fff; background: rgba(255, 255, 255, .16); }
.pl-btn.is-primary {
  color: #0a0a10; font-weight: 700; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}
.pl-btn.ghost { background: none; color: var(--ink-faint); }
.pl-btn.ghost:active { color: var(--ink); background: var(--card-hi); }
.pl-btn.is-danger { color: #ff8e9c; }
.pl-btn.is-danger:active { background: rgba(255, 92, 114, .18); }

/* --------------------------------------------------------- una domanda ---
   Il prompt() del browser sul telefono e' un pannello di sistema fuori tema
   che copre lo schermo: la richiesta di un nome se la disegna Sona. */

.ask {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: end center;
  padding: 20px;
  background: rgba(4, 4, 8, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: askIn .18s var(--ease);
}
.ask-card {
  width: min(440px, 100%);
  margin-bottom: max(18px, env(safe-area-inset-bottom));
  padding: 20px;
  border-radius: 20px;
  background: rgba(18, 18, 26, .97);
  border: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
  animation: askUp .24s var(--ease);
}
.ask-title { margin: 0; font-size: 16px; font-weight: 700; }
.ask-hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.ask-input {
  width: 100%; margin-top: 15px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--card); border: 1px solid var(--stroke);
  color: var(--ink); font: inherit; font-size: 16px;   /* 16px: iOS non zooma */
}
.ask-input:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.ask-actions { display: flex; gap: 8px; margin-top: 16px; }
.ask-btn {
  flex: 1 1 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--card); border: 1px solid var(--stroke);
  font-size: 13.5px; font-weight: 650; color: var(--ink-dim);
}
.ask-btn.is-primary {
  color: #0a0a10; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}
.ask-btn.is-danger {
  color: #ff8e9c;
  background: rgba(255, 92, 114, .12); border-color: rgba(255, 92, 114, .28);
}

@keyframes askIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes askUp { from { transform: translateY(16px); } to { transform: none; } }

/* Su schermo largo la domanda sta al centro, non appoggiata in basso. */
@media (min-width: 880px) {
  .ask { place-items: center; }
  .ask-card { margin-bottom: 0; }
}

/* Scelta fra piu' voci (per esempio: in quale playlist finisce il brano). */
.ask-list { margin-top: 14px; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }

.ask-group {
  margin: 14px 2px 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ask-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 13px; border-radius: 12px;
  font-size: 14px; color: var(--ink-dim); text-align: left;
  background: var(--card);
  margin-bottom: 6px;
  transition: color .16s, background .16s;
}
.ask-item:active { color: #fff; background: var(--card-hi); }
.ask-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-item-meta { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ask-item.is-action { color: var(--ink); font-weight: 650; background: none; border: 1px dashed var(--stroke); }
.ask-empty { margin: 18px 4px 6px; font-size: 13px; color: var(--ink-faint); text-align: center; }