/* ==========================================================================
   La partita al tavolo (Tavolo.razor): la sala riusa le porte dell'online (play.css), qui ci sono
   la barra del codice, l'impostazione a due squadre, il compagno di tavolo e il risultato.
   Pensata prima per il telefono: è lì che si usa, accanto al tabellone vero.
   ========================================================================== */

.tv { --tv-a: 77, 142, 247; --tv-b: var(--danger-rgb, 242, 104, 95); }
.tv-fair { margin: 0 0 1rem; padding-inline-start: 1.1rem; display: grid; gap: 0.35rem; color: #c4cfe0; font-size: 0.9rem; }
.tv-h2 { margin: 0 0 0.7rem; font: 700 1rem/1.1 'Rajdhani', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tv-h2 small { margin-inline-start: 0.4rem; color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-weight: 600; }

/* la barra del codice */
.tv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1rem; padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 209, 102, 0.25); border-radius: 14px; }
.tv-code { display: grid; }
.tv-code small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tv-code b { font: 700 2rem/1 'Rajdhani', sans-serif; letter-spacing: 0.22em; color: var(--accent); }
.tv-state { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font: 700 0.75rem/1 'Rajdhani', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.tv-state.s-in-corso { background: rgba(var(--ok-rgb), 0.18); color: var(--ok); }
.tv-state.s-contestata { background: rgba(var(--danger-rgb), 0.18); color: var(--danger); }
.tv-state.s-conclusa { background: rgba(255, 209, 102, 0.18); color: var(--accent); }
.tv-meta { color: #c4cfe0; font-size: 0.9rem; }
.tv-rank { padding: 0.2rem 0.6rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.78rem; color: var(--muted); }
.tv-rank.on { border-color: rgba(255, 209, 102, 0.5); color: var(--accent); }
.tv-copy { margin-inline-start: auto; }

/* impostazione */
.tv-settings, .tv-judge, .tv-pick, .tv-go, .tv-round, .tv-result, .tv-final { margin-bottom: 1rem; }
.tv-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem 1rem; align-items: end; }
.tv-set-grid label { display: grid; gap: 0.3rem; }
.tv-set-grid small { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tv select { width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(8, 11, 17, 0.8); color: inherit; font: inherit; }
.tv-check { display: flex !important; align-items: center; gap: 0.5rem; }
.tv-check input { accent-color: var(--accent); width: 18px; height: 18px; }

.tv-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.tv-side { border-top: 3px solid rgb(var(--tv-a)); }
.tv-side.side-1 { border-top-color: rgb(var(--tv-b)); }
.tv-side > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.tv-side.side-0 .tv-h2 { color: rgb(var(--tv-a)); }
.tv-side.side-1 .tv-h2 { color: rgb(var(--tv-b)); }
.tv-credits { color: var(--muted); font-size: 0.85rem; }
.tv-seat { margin-bottom: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.tv-seat.me { border-color: rgba(255, 209, 102, 0.35); }
.tv-seat-head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.tv-ready { color: var(--muted); font-size: 0.8rem; }
.tv-ready.on { color: var(--ok); }
.tv-mech { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; padding: 0.3rem 0; font-size: 0.92rem; }
.tv-mech small { color: var(--muted); }
.tv-mech em { font-style: normal; color: var(--accent); font-size: 0.85rem; }
.tv-class { display: inline-grid; place-items: center; width: 22px; height: 25px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--accent); color: #1b1405; font: 700 0.8rem/1 'Rajdhani', sans-serif;
    flex-shrink: 0;
}
.tv-x { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: none; color: var(--muted); cursor: pointer; }
.tv-x:hover { color: var(--danger); border-color: var(--danger); }
.tv-judge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; }
.tv-judge p { margin: 0; color: #c4cfe0; }
.tv-pick-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tv-pick-row select { flex: 1 1 260px; }
.tv-fairness { margin: 0 0 0.8rem; font-weight: 600; }
.tv-fairness.ok { color: var(--ok); }
.tv-fairness.warn { color: var(--danger); }
.tv-go-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* il compagno di tavolo */
.tv-round { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.tv-round-n { display: grid; text-align: center; min-width: 70px; }
.tv-round-n small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tv-round-n b { font: 700 2.4rem/1 'Rajdhani', sans-serif; color: var(--accent); }
.tv-round-btns, .tv-dice { display: flex; gap: 0.4rem; }
.tv-rolls { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.tv-rolls li { display: grid; place-items: center; min-width: 54px; padding: 0.3rem 0.4rem; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.tv-rolls li:first-child { border-color: rgba(255, 209, 102, 0.5); animation: tv-tiro 0.35s ease-out; }
.tv-rolls b { font: 700 1.3rem/1 'Rajdhani', sans-serif; }
.tv-rolls small { color: var(--muted); font-size: 0.65rem; }
.tv-rolls li.crit b { color: var(--ok); }
.tv-rolls li.fail b { color: var(--danger); }
@keyframes tv-tiro { from { transform: rotate(-25deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.tv-round-note { flex-basis: 100%; margin: 0; }

.tv-unit { margin-bottom: 0.8rem; padding: 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.tv-unit.out { opacity: 0.55; filter: grayscale(0.6); }
.tv-unit > header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-bottom: 0.5rem; }
.tv-unit > header small { color: var(--muted); }
.tv-out { margin-inline-start: auto; padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(var(--danger-rgb), 0.18); color: var(--danger); font-style: normal; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
/* Una riga per pezzo: sopra il nome e il valore, sotto la barra e i pulsanti accanto. Sul
   telefono, accanto al tabellone, conta vedere tutto il mecha senza scorrere. */
.tv-energy, .tv-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b s"; gap: 0.15rem 0.6rem; align-items: center; padding: 0.3rem 0; }
.tv-energy > small, .tv-part > small { grid-area: n; }
.tv-energy > .tv-bar-track, .tv-part > .tv-bar-track { grid-area: b; }
.tv-energy > b, .tv-part > b { grid-area: v; }
.tv-energy small, .tv-part small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tv-energy b, .tv-part b { text-align: end; font: 700 1rem/1 'Rajdhani', sans-serif; }
.tv-energy b small, .tv-part b small { font-size: 0.75rem; letter-spacing: 0; }
.tv-bar-track { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tv-bar-track > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; background: linear-gradient(90deg, #4d8ef7, #8fc0ff); transition: width 0.25s ease-out; }
.tv-bar-track > i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent); }
.tv-bar-track.hp > span { background: linear-gradient(90deg, var(--ok), #a6e3c3); }
.tv-part.hurt .tv-bar-track.hp > span { background: linear-gradient(90deg, #ffb347, var(--accent)); }
.tv-part.dead .tv-bar-track.hp > span { background: var(--danger); }
.tv-part.dead b { color: var(--danger); }
.tv-part.slot-Head small, .tv-part.slot-Core small { color: #c4cfe0; }
.tv-steps { grid-area: s; display: flex; gap: 0.25rem; justify-content: flex-end; }
.tv-steps button { min-width: 40px; height: 32px; padding: 0 0.4rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
    color: var(--text); font: 700 0.9rem/1 'Rajdhani', sans-serif; cursor: pointer; touch-action: manipulation; }
.tv-steps button:hover { border-color: var(--accent); }
.tv-steps button:active { transform: scale(0.94); }

/* il risultato */
.tv-result.disputed { border-color: rgba(var(--danger-rgb), 0.45); }
.tv-suggest { margin: 0 0 0.6rem; color: #c4cfe0; }
.tv-declared { margin: 0 0 0.8rem; padding: 0; list-style: none; display: grid; gap: 0.25rem; color: #c4cfe0; }
.tv-declare { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.tv-final { text-align: center; }
.tv-trophy { display: block; font-size: 3rem; color: var(--accent); filter: drop-shadow(0 0 14px rgba(255, 209, 102, 0.6)); }
.tv-final h2 { margin: 0.3rem 0; font: 700 2rem/1.1 'Rajdhani', sans-serif; text-transform: uppercase; }
.tv-final p { color: #c4cfe0; }
.tv-elo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem; margin: 1rem 0; padding: 0; list-style: none; }
.tv-elo li.me b { color: var(--accent); }
.tv-elo em { font-style: normal; font-weight: 700; }
.tv-elo em.up { color: var(--ok); }
.tv-elo em.down { color: var(--danger); }
.tv-final .tv-go-actions { justify-content: center; }

@media (max-width: 760px) {
    .tv-sides { grid-template-columns: 1fr; }
    .tv-copy { margin-inline-start: 0; }
    .tv-code b { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-rolls li:first-child { animation: none; }
}

/* Dentro una partita il testo introduttivo cede il posto: il telefono serve per i numeri. */
.tv.in-room .pl-lead { display: none; }

/* Il livello della partita e il giudice ufficiale. */
.tv-rank.lv-mondiale { border-color: rgba(255, 209, 102, 0.8); background: rgba(255, 209, 102, 0.14); color: var(--accent); font-weight: 700; }
.tv-rank.lv-mondiale::before { content: "♛ "; }
.tv-rank.lv-ranked::before { content: "⚖ "; }
.tv-official { margin-inline-start: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 6px; background: linear-gradient(135deg, #ffd166, #ff9f43); color: #1b1405; font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; }
.tv-judge.official { border-color: rgba(255, 209, 102, 0.5); box-shadow: 0 0 24px rgba(255, 209, 102, 0.12); }
.tv-judge .pl-note { margin: 0.4rem 0 0; }