/* La schermata iniziale e la sala della stanza online (29 ottobre).
   Una domanda per volta: dove siedono i giocatori; poi, nella sala, posto per posto: siediti, collega il
   telefono, conferma. Il tavolo visto dall'alto a sinistra dice chi c'è a colpo d'occhio. */

/* --- Schermata iniziale ------------------------------------------------------------------------- */
.intro__h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; }
.intro__title--small { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.intro__back { justify-self: start; margin-left: -10px; }

.ways { display: grid; gap: 12px; }
.way {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  width: 100%; min-height: 84px; padding: 14px 16px 14px 14px; text-align: left;
  background: var(--paper-3); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 14px;
  transition: border-color var(--t-state) ease, background-color var(--t-state) ease, transform var(--t-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
}
.way:hover { border-color: var(--ink); }
.way:active { transform: scale(0.99); }
.way:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.way[aria-busy='true'] { opacity: 0.6; cursor: progress; }
.way__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sea); box-shadow: inset 0 0 0 1.5px var(--brass); color: var(--ink); }
.way__icon .icon { width: 28px; height: 28px; }
.way__text { display: grid; gap: 3px; min-width: 0; }
.way__text b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.way__text span { color: var(--ink-2); font-size: var(--t-15); line-height: 1.35; }
.way__go { color: var(--ink-3); }

.code-join { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 4px 0; }
.code-join label { display: grid; gap: 2px; }
.code-join label b { font-size: var(--t-17); }
.code-join__field { display: flex; gap: 8px; }
.code-join input { width: 10.5ch; min-height: 44px; border: 1.5px solid var(--ink); border-radius: var(--r-card); padding: 6px 10px; background: var(--paper-3); font: inherit; font-weight: 800; font-size: var(--t-17); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink); }
.code-join input::placeholder { color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; }
@media (max-width: 420px) { .code-join { grid-template-columns: minmax(0, 1fr); } }

.resume { gap: 4px; padding: 12px 14px; }
.resume__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; }
.resume__row + .resume__row { border-top: 1px solid var(--rule); }
.resume__icon { color: var(--ink-2); display: grid; place-items: center; }
.resume__text { display: grid; gap: 1px; min-width: 0; }
.resume__text .hint { font-size: var(--t-13); }
@media (max-width: 420px) { .resume__row { grid-template-columns: 30px minmax(0, 1fr) auto; } .resume__row > :last-child:not(:nth-child(3)) { grid-column: 2 / -1; justify-self: start; } }

.options-form { display: grid; gap: 14px; }
.options-summary { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.options-summary li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-15); }
.options-summary .icon { color: var(--ok); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.variants summary .hint { font-weight: 400; font-size: var(--t-13); margin-left: 8px; }

/* --- Il film della schermata iniziale (28 ottobre sera) -------------------------------------------
   Il tavolo vero in una partita a metà, ripreso piano e con dissolvenze incrociate (src/ui/showreel.js).
   A sinistra il film con il nome del gioco, a destra la carta con le scelte; sul telefono il film sta sopra.
   Il velo (vignetta e scuro in basso) è un livello fermo: non costa nulla a ogni fotogramma. */
.intro--reel { --panel-w: clamp(420px, 37vw, 560px); --reel-fade: 2400ms; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; background: #120c08; }
@media (min-width: 960px) { .intro--reel { grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-rows: auto; } }

.intro__film { position: relative; overflow: hidden; height: clamp(380px, 60dvh, 620px); background: #120c08; color: var(--deck-ink); isolation: isolate; }
@media (min-width: 960px) { .intro__film { position: sticky; top: 0; height: 100dvh; } }
/* la cornice in ottone a filo, come intorno alla carta nautica di prima */
.intro__film::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(201, 160, 78, 0.42); border-radius: 2px; pointer-events: none; z-index: 4; }
@media (min-width: 960px) { .intro__film::after { inset: 18px; } }

.reel { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 42% 46%, #3a2515 0%, #1f140c 52%, #0d0806 100%); }
.reel__stage, .reel__still, .reel__fallback, .reel__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel__stage { opacity: 0; transition: opacity 2600ms cubic-bezier(0.4, 0, 0.2, 1); }
.reel[data-state='playing'] .reel__stage { opacity: 1; }
.reel__stage canvas.world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.reel__still { display: block; opacity: 0; pointer-events: none; }
.reel__still.is-fading { transition: opacity var(--reel-fade) cubic-bezier(0.45, 0, 0.55, 1); }
.reel__fallback { display: none; background: var(--sea); }
.reel__fallback svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel[data-state='still'] .reel__fallback { display: block; }
.reel__veil {
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 48% 40%, transparent 52%, rgba(10, 6, 4, 0.5) 100%),
    linear-gradient(to top, rgba(12, 8, 5, 0.86) 0%, rgba(12, 8, 5, 0.5) 24%, rgba(12, 8, 5, 0) 50%);
}

.intro__brand { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; gap: 12px; padding: 0 clamp(28px, 4.4vw, 72px) clamp(30px, 5.5vh, 64px); pointer-events: none; }
.intro--reel .intro__title { color: var(--deck-ink); font-size: clamp(2.35rem, 5vw, 4.9rem); line-height: 0.94; max-width: 14ch; text-shadow: 0 2px 28px rgba(8, 5, 3, 0.55); }
.intro--reel .intro__brand .intro__lead { color: var(--deck-ink-2); max-width: 44ch; font-size: clamp(var(--t-15), 1.3vw, var(--t-17)); line-height: 1.45; text-shadow: 0 1px 14px rgba(8, 5, 3, 0.6); }
.intro--reel .intro__brand a { pointer-events: auto; }

.reel__pause {
  position: absolute; z-index: 5; right: 26px; top: 26px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(201, 160, 78, 0.5); background: rgba(18, 12, 8, 0.42); color: var(--deck-ink);
  opacity: 0; transition: opacity var(--t-state) ease, background-color var(--t-state) ease; -webkit-tap-highlight-color: transparent;
}
.reel[data-state='playing'] .reel__pause { opacity: 0.72; }
.reel[data-state='playing'] .reel__pause:hover, .reel__pause:focus-visible, .reel[data-paused='true'] .reel__pause { opacity: 1; background: rgba(18, 12, 8, 0.7); }
.reel__pause:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
.reel__pause .icon { width: 20px; height: 20px; }
.reel__pause .icon path[d^='M8.5'] { fill: currentColor; }
@media (min-width: 960px) { .reel__pause { right: 34px; top: 34px; } }

/* la carta delle scelte: carta chiara e inchiostro, come ogni cosa da leggere */
.intro--reel .intro__body {
  max-width: none; min-height: 0; align-content: start; gap: 24px; padding: 28px var(--gutter) 24px;
  background-color: var(--paper); background-image: url('../assets/textures/carta.jpg'); background-size: 420px;
  position: relative; z-index: 1;
}
@media (min-width: 960px) {
  .intro--reel .intro__body { min-height: 100dvh; align-content: center; padding: clamp(40px, 7vh, 88px) clamp(32px, 3.6vw, 60px) 28px; box-shadow: inset 1px 0 0 var(--brass-line); }
  .intro--reel .intro__credits { align-self: end; }
}
/* sul telefono la carta sale un poco sul film, come un foglio appoggiato sopra */
@media (max-width: 959px) { .intro--reel .intro__body { margin-top: -18px; border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 var(--brass-line); } }
.intro--reel .intro__credits { color: var(--ink-3); padding-top: 8px; }

/* le due strade: un medaglione scuro con l'anello d'ottone, il titolo, la freccia che si sposta sotto il dito */
.intro--reel .way { border-color: rgba(42, 30, 20, 0.14); background: rgba(252, 249, 241, 0.86); }
.intro--reel .way__icon { background: radial-gradient(circle at 50% 38%, var(--deck-2), var(--deck)); color: var(--deck-ink); box-shadow: inset 0 0 0 1.5px var(--brass-bright), inset 0 0 0 4px var(--deck), inset 0 0 0 5px rgba(201, 160, 78, 0.45); }
.intro--reel .way__go { transition: transform var(--t-state) var(--ease-out), color var(--t-state) ease; }
@media (hover: hover) {
  .intro--reel .way:hover { border-color: var(--ink); background: var(--paper-3); }
  .intro--reel .way:hover .way__go { transform: translateX(3px); color: var(--ink); }
}
.intro--reel .intro__h2 { font-size: 1.6rem; }
.intro--reel .intro__title--small { color: var(--ink); text-shadow: none; font-size: clamp(2rem, 3.2vw, 2.7rem); max-width: none; }

/* l'ingresso: il film si apre dal buio, la carta sale appena */
@media (prefers-reduced-motion: no-preference) {
  .intro--reel .intro__brand { animation: brand-in 1600ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .intro--reel .intro__body > * { animation: card-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .intro--reel .intro__body > :nth-child(2) { animation-delay: 60ms; }
  .intro--reel .intro__body > :nth-child(3) { animation-delay: 120ms; }
  .intro--reel .intro__body > :nth-child(n + 4) { animation-delay: 180ms; }
}
@keyframes brand-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reel__stage, .reel__still.is-fading { transition-duration: 900ms; } }

/* --- La sala ------------------------------------------------------------------------------------ */
@media (min-width: 960px) { .intro--lobby { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.intro__body.lobby { max-width: 780px; gap: 22px; align-content: start; padding-bottom: 0; }
@media (min-width: 960px) { .intro__body.lobby { padding-top: clamp(28px, 4vw, 52px); } }
.lobby__art { display: grid; place-items: center; }
.lobby-table { width: min(440px, 82%); height: auto; position: relative; overflow: visible; }
/* il tavolo dall'alto è un riassunto: sotto i 960 px le righe dei posti dicono già tutto, lo spazio va a loro */
.lobby__art .lobby-table { position: relative; inset: auto; height: auto; }
@media (min-width: 960px) { .lobby__art { position: sticky; top: 0; height: 100dvh; align-self: start; } }
@media (max-width: 959px) { .intro--lobby > .lobby__art { display: none; } }
.lobby-table__wood { fill: #6e4524; }
.lobby-table__rim { fill: none; stroke: var(--brass-bright); stroke-width: 5; }
.lobby-table__inlay { fill: none; stroke: rgba(201, 160, 78, 0.45); stroke-width: 1.5; stroke-dasharray: 2 6; }
.lobby-seat__disc { fill: var(--paper-3); stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 5 5; }
.lobby-seat__letter { font: 800 26px var(--font-ui); text-anchor: middle; dominant-baseline: central; fill: var(--ink-3); }
.lobby-seat.is-taken .lobby-seat__disc { stroke: rgba(23, 38, 48, 0.55); stroke-dasharray: none; }
.lobby-seat--p0.is-taken .lobby-seat__disc { fill: var(--p0); }
.lobby-seat--p1.is-taken .lobby-seat__disc { fill: var(--p1); }
.lobby-seat--p2.is-taken .lobby-seat__disc { fill: var(--p2); }
.lobby-seat--p3.is-taken .lobby-seat__disc { fill: var(--p3); }
.lobby-seat.is-taken .lobby-seat__letter { fill: #fff; }
.lobby-seat--p1.is-taken .lobby-seat__letter { fill: var(--p1-on); }
.lobby-seat.is-mine .lobby-seat__disc { stroke: var(--ink); stroke-width: 4; }
.lobby-seat__ready { fill: var(--ok); stroke: var(--paper-3); stroke-width: 2.5; }
.lobby-seat__tick { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lobby-seat__wheel { color: var(--brass); fill: none; stroke: var(--brass); stroke-width: 1.9; }

.lobby__head { display: grid; gap: 8px; }
.room-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.room-code__label { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.room-code__value { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; letter-spacing: 0.12em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.room-code .btn { align-self: center; }
.lobby__lead { color: var(--ink-2); font-size: var(--t-15); max-width: 60ch; }

/* il binario della stanza: lo stesso disegno delle fasi del turno, sulla carta */
.rail--paper { flex-wrap: wrap; row-gap: 6px; }
.rail--paper .rail__stop { color: var(--ink-3); border-color: var(--rule); background: transparent; }
.rail--paper .rail__stop.is-done { color: var(--ink); border-color: var(--brass-line); background: rgba(201, 160, 78, 0.16); }
.rail--paper .rail__stop.is-done .rail__node { background: var(--brass); border-color: var(--brass); }
.rail--paper .rail__stop.is-now { color: var(--accent-on); border-color: var(--accent); background: var(--accent); }
.rail--paper .rail__stop.is-next { color: var(--ink-3); border-color: var(--ink-3); }
.rail--paper .rail__link { background: var(--rule); }
.rail--paper .rail__link.is-live { box-shadow: inset 0 0 0 1px var(--rule); }
.rail--paper .rail__fill { background: var(--brass); }

.lobby__notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--magenta-tint); color: var(--ink); font-size: var(--t-15); }
.lobby__notice > span { flex: 1 1 220px; }

.lobby__seats { display: grid; gap: 6px; }
.lobby__seats { container-type: inline-size; }
.seat-head, .seat-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 6px 14px; align-items: center; }
.seat-head { padding: 0 14px; font-size: var(--t-13); font-weight: 700; color: var(--ink-3); }
.seat-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.seat-row { min-height: 72px; padding: 10px 14px; border-radius: 12px; background: var(--paper-3); border: 1px solid var(--rule); }
.seat-row.is-mine { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seat-row.is-free { background: transparent; border-style: dashed; border-color: var(--ink-3); }
.seat-row__chip { width: 34px; height: 34px; font-size: var(--t-17); }
.seat-row.is-free .seat-row__chip { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.seat-row__who { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.seat-row__name { font-weight: 800; font-size: var(--t-17); overflow-wrap: anywhere; }
.seat-row__name.is-empty { color: var(--ink-3); font-weight: 700; }
.seat-row__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.seat-row__sub .hint { font-size: var(--t-13); }
.seat-row__hands, .seat-row__ready { display: flex; align-items: center; min-width: 0; }
.seat-row__ready { justify-content: flex-end; }
.seat-row__leave { margin-left: -12px; color: var(--ink-2); font-weight: 600; }
.seat-name {
  width: min(100%, 260px); min-height: 44px; padding: 6px 10px; margin-left: -10px;
  font: inherit; font-weight: 800; font-size: var(--t-17); color: var(--ink);
  background: transparent; border: 1.5px solid transparent; border-bottom-color: var(--ink-3); border-radius: 8px 8px 0 0;
}
.seat-name:hover { border-bottom-color: var(--ink); }
.seat-name:focus { outline: none; background: #fff; border-color: var(--ink); border-radius: 8px; }
.seat-name:placeholder-shown { border-bottom-style: dashed; }
.seat-name::placeholder { color: var(--magenta); font-weight: 700; }
.seat-type { min-height: 44px; border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--paper-3); padding: 6px 10px; font: inherit; font-weight: 700; color: var(--ink); margin-top: 4px; }
.seat-tools { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
.seat-tools .btn { color: var(--ink-2); font-weight: 600; }

.badge-command { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-13); font-weight: 800; color: var(--brass); }
.badge-command .icon { width: 16px; height: 16px; }

.seat-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-15); font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.seat-state .icon { width: 20px; height: 20px; flex: none; }
.seat-state--ok { color: var(--ok); font-weight: 700; }
.seat-state--wait { color: var(--magenta); }
.seat-state--muted { color: var(--ink-3); font-weight: 500; }
.seat-link { border: 0; background: transparent; padding: 0; min-height: 44px; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.btn.seat-link { padding: 6px 8px; margin-left: -8px; }

.seat-hands { display: grid; justify-items: start; }
.seat-ready { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-15); font-weight: 600; color: var(--ink-3); }
.seat-ready.is-ready { color: var(--ok); font-weight: 800; }
.seat-ready .icon { width: 18px; height: 18px; }
.ready-btn { min-width: 132px; }
.ready-btn.is-ready { background: #e3efe6; border-color: var(--ok); color: var(--ok); }
.ready-btn .icon { width: 18px; height: 18px; }

/* il QR sta nella riga del suo posto: chi lo deve inquadrare lo trova accanto al proprio nome */
.seat-row__qr { grid-column: 2 / -1; display: grid; gap: 10px; padding: 12px 0 4px; border-top: 1px dashed var(--rule); margin-top: 4px; }
.seat-row__qr .phone-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; justify-items: start; }
.seat-row__qr .qr { width: 168px; height: 168px; padding: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.seat-row__qr figcaption { display: grid; gap: 4px; flex: 1 1 220px; max-width: 42ch; font-weight: 400; font-size: var(--t-15); color: var(--ink-2); }
.seat-row__qr figcaption b { color: var(--ink); }
.seat-row__qr figcaption > b:first-child { font-size: var(--t-17); }
.seat-row__alt { display: grid; gap: 0; justify-items: start; }
.seat-row__alt .hint { font-size: var(--t-13); }
.phone-code figcaption { display: grid; gap: 4px; }

.lobby__settings { display: grid; gap: 14px; padding-top: 6px; }
.lobby__settings > .btn--danger-text { justify-self: start; }
.btn--danger-text { color: var(--heart); }

.lobby__foot {
  position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px;
  background: rgba(243, 236, 220, 0.96); border-top: 1px solid var(--rule); backdrop-filter: blur(6px);
}
@media (min-width: 960px) { .lobby__foot { margin: 0 calc(-1 * clamp(32px, 5vw, 72px)); padding-inline: clamp(32px, 5vw, 72px); } }
.lobby__status { font-size: var(--t-15); font-weight: 700; color: var(--ink-2); text-wrap: pretty; }
.lobby__status.is-ok { color: var(--ok); }
.lobby__start { min-width: 196px; }
.lobby__start .icon { width: 22px; height: 22px; }

/* le righe dei posti si impilano quando la colonna è stretta (telefono, o computer piccolo con il tavolo accanto) */
@container (max-width: 600px) {
  .seat-head { display: none; }
  .seat-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'chip who ready' '. hands hands'; padding: 10px 12px; }
  .seat-row__chip { grid-area: chip; align-self: start; margin-top: 6px; }
  .seat-row__who { grid-area: who; }
  .seat-row__ready { grid-area: ready; align-self: start; margin-top: 2px; }
  .seat-row__hands { grid-area: hands; }
  .seat-row__qr { grid-column: 1 / -1; }
  .seat-row__qr .qr { width: 196px; height: 196px; }
  .ready-btn { min-width: 0; }
}
@media (max-width: 719px) {
  .lobby__foot { grid-template-columns: auto minmax(0, 1fr); }
  .lobby__status { grid-column: 1 / -1; grid-row: 1; }
  .lobby__start { min-width: 0; justify-self: stretch; }
}

/* telefono: la sala con la propria conferma */
.phone-seats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.phone-seats__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: var(--r-card); background: var(--paper-3); border: 1px solid var(--rule); }
.phone-seats__row.is-me { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.phone-seats__name { font-weight: 700; overflow-wrap: anywhere; }