:root {
    --bg: #0b0e14;
    --panel: #141a25;
    --panel-2: #1b2331;
    --border: #263043;
    --text: #e6ecf6;
    --muted: #92a1b8;
    --accent: #ffd166;
    --accent-2: #4d8ef7;
    --danger: #f2685f;
    --ok: #59c08a;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    margin: 0 0 0.6rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }

h1:focus, h2:focus {
    outline: none;
}

p { margin: 0 0 0.8rem; }

a { color: var(--accent-2); }

.muted { color: var(--muted); }

.subtitle {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* ---------- pannelli ---------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}

.panel + .panel { margin-top: 1rem; }

.panel-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row-tight { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; min-width: 0; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

/* Usato dove la griglia deve prendersi più spazio della colonna laterale. */
.layout-split-wide {
    grid-template-columns: 300px minmax(0, 1fr);
}

/* Metà e metà, dove le due colonne hanno lo stesso peso: nella simulazione a destra ci sono
   tabelle larghe quanto quelle a sinistra, e una colonna fissa da 340px le stringeva fino a
   farle scorrere mentre i comandi avanzavano spazio vuoto. */
.layout-split-even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .layout-split,
    .layout-split-wide,
    .layout-split-even { grid-template-columns: 1fr; }
}

/* ---------- schermata di battaglia ----------
   Con una colonna sola a destra i pannelli si impilavano — mecha in campo, scheda, diario — e
   per vedere tutto insieme bisognava rimpicciolire la pagina. Su uno schermo largo diventano
   tre colonne: comandi, campo, situazione. La griglia resta appiccicata in alto, così scorrere
   il diario non la porta fuori vista. */

.layout-battle {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 0.6rem;
    align-items: start;
}

/* Senza il pannello dei comandi — turno dell'IA, o nessun mecha scelto — la colonna sparisce
   invece di restare vuota. */
.layout-battle.no-controls {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.battle-board {
    position: sticky;
    /* Segue l'altezza della barra: se quella cambia, questo va cambiato con lei. */
    top: 3.1rem;
}

.battle-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

@media (max-width: 1500px) {
    .layout-battle,
    .layout-battle.no-controls { grid-template-columns: minmax(0, 1fr) 320px; }

    .layout-battle .battle-board { position: static; }

    /* Con due colonne i comandi tornano sopra la griglia, dove si guarda già. Vale solo
       quando la colonna dei comandi esiste: senza, le celle si dispongono da sole. */
    .layout-battle:not(.no-controls) .battle-controls { grid-column: 1; grid-row: 1; }
    .layout-battle:not(.no-controls) .battle-board { grid-column: 1; grid-row: 2; }
    .layout-battle:not(.no-controls) .battle-status { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 1000px) {
    .layout-battle,
    .layout-battle.no-controls { grid-template-columns: 1fr; }

    .layout-battle .battle-controls,
    .layout-battle .battle-board,
    .layout-battle .battle-status { grid-column: 1; grid-row: auto; }
}

/* Il campo non deve restare una fessura quando la colonna che lo ospita è larga: la griglia
   si centra da sola, ma un contenitore stretto la fa scorrere invece di mostrarla. */
.battle-board .hex-grid-wrapper { min-width: 0; }

/* ---------- riepilogo della partita ---------- */

.match-header {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
}

.match-phase {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.match-phase-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.86rem;
    color: var(--accent);
}

.match-turn {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.match-mode {
    color: var(--muted);
    font-size: 0.88rem;
    margin-left: auto;
}

.match-teams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.7rem;
}

.team-card {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    background: var(--panel-2);
}

.team-card.owner-0 { border-left-color: var(--accent-2); }
.team-card.owner-1 { border-left-color: var(--danger); }

.team-card.is-turn {
    box-shadow: inset 0 0 0 1px var(--accent);
}

.team-name {
    font-weight: 650;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.team-kind {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.team-meta {
    color: var(--muted);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.team-units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.unit-chip {
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    background: #0e131c;
}

.unit-chip em {
    font-style: normal;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: 0.3rem;
}

.unit-chip.down {
    color: var(--danger);
    text-decoration: line-through;
}

/* ---------- barra di avanzamento ---------- */

.progress {
    height: 8px;
    border-radius: 999px;
    background: #0e131c;
    border: 1px solid var(--border);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width 0.15s linear;
}

/* ---------- controlli ---------- */

button, .btn {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    padding: 0.45rem 0.9rem;
    transition: background 0.12s ease, border-color 0.12s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover:not(:disabled), .btn:hover {
    background: #243046;
    border-color: #35435c;
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #1b1405;
    font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
    background: #ffdd8a;
    border-color: #ffdd8a;
}

.btn-danger {
    border-color: #4a2b2b;
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: #331d1d;
}

.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

.btn-toggle.active {
    border-color: var(--accent);
    color: var(--accent);
    background: #2a2415;
}

input[type=text], input[type=number], select {
    font: inherit;
    background: #0e131c;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}

input:focus, select:focus, button:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 1px;
}

label { display: block; }

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field > span {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.checkline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- menu principale ---------- */

/* ---------- home ----------
   ⚠ Globali e non nel CSS isolato della Home: toccano la barra e il contenitore del layout, che
   stanno fuori dal componente. La barra diventa trasparente e fissa sopra l'hero. */
body:has(:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb)) .topbar {
    position: fixed;
    inset-inline: 0;
    background: linear-gradient(to bottom, rgba(7, 9, 13, 0.75), rgba(7, 9, 13, 0));
    backdrop-filter: none;
    border-bottom-color: transparent;
    transition: background 0.3s, border-color 0.3s;
}

/* Appena si scorre via dall'hero la barra torna vetro, o i link finirebbero sopra il testo. */
html[data-scrolled] body:has(:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb)) .topbar {
    background: rgba(11, 14, 20, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}


html:has(:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb)) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html:has(:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb)) { scroll-behavior: auto; }
}

/* Le intestazioni delle sezioni della Home: globali perché le usano sia la pagina sia i suoi
   componenti (WorldSection), e il CSS isolato non attraversa i componenti. */
:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.9rem;
    color: var(--accent);
    font: 600 0.85rem/1 'Rajdhani', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .kicker::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--accent);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow: 0 0 12px var(--accent);
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .section-head h2 {
    margin: 0 0 1.1rem;
    font: 700 clamp(2rem, 4.6vw, 3.4rem)/1.02 'Rajdhani', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #f4f7fc;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .lead {
    margin: 0;
    color: #b6c3d7;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.8rem;
    border-radius: 2px;
    font: 700 0.95rem/1 'Rajdhani', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-primary {
    background: linear-gradient(135deg, #ffd166, #ff9f43);
    border: 0;
    color: #1b1405;
    box-shadow: 0 10px 30px rgba(255, 159, 67, 0.25);
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-primary:hover {
    background: linear-gradient(135deg, #ffe09a, #ffb066);
    transform: translateY(-2px);
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-ghost {
    /* ⚠ Il bordo non si fa con border: il clip-path degli angoli lo taglierebbe proprio sui lati
       corti. Lo sfondo del pulsante È il bordo, e ::before ci stende sopra il fondo scuro con lo
       stesso taglio, rientrato di un pixel: così il contorno segue anche le diagonali. */
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.4);
    border: 0;
    color: #eef3fb;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-ghost::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: #12161f;
    clip-path: polygon(11.5px 0, 100% 0, 100% calc(100% - 11.5px), calc(100% - 11.5px) 100%, 0 100%, 0 11.5px);
    transition: background 0.2s;
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-ghost:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

:is(.home, .hangar, .hm, .lore, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb) .btn-ghost:hover::before { background: #1d1f22; }

/* La scelta della modalità in Gioca: le schede che prima stavano anche nella Home. */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
}

.menu-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.menu-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.menu-card .icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.6rem;
}

.menu-card h2 { margin-bottom: 0.3rem; }
.menu-card p { color: var(--muted); margin: 0; font-size: 0.9rem; }

/* ---------- liste ---------- */

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.card.selectable { cursor: pointer; }
.card.selectable:hover { border-color: #3c4c68; }
.card.selected { border-color: var(--accent); background: #1d2231; }

.card h3 { margin-bottom: 0.15rem; }

.card-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.empty {
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
}

/* ---------- badge e statistiche ---------- */

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--panel-2);
}

.badge.class-C { color: #9fb0c9; }
.badge.class-B { color: #59c08a; }
.badge.class-A { color: #4d8ef7; }
.badge.class-S { color: #c084f5; }
.badge.class-Z { color: var(--accent); border-color: var(--accent); }

.badge.owner-0 { color: var(--accent-2); border-color: #2b4370; }
.badge.owner-1 { color: var(--danger); border-color: #5b302c; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.4rem 0.9rem;
}

.stat {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px dotted #232c3d;
    padding: 0.18rem 0;
    font-size: 0.9rem;
}

.stat .k { color: var(--muted); }
.stat .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Foto della componente accanto alla sua descrizione. */
.component-shot {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.component-shot img {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #0e131c;
    object-fit: cover;
}

.component-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.component-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding-bottom: 0.25rem;
}

.component-table td {
    padding: 0.18rem 0;
    border-bottom: 1px dotted #232c3d;
}

.component-table td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-right: 0.8rem;
}

/* Le righe di spareggio: partite che il campo non ha chiuso, e si devono distinguere a occhio. */
.component-table tr.on-points td { color: var(--accent); }

/* La stessa marcatura su una singola cella: nelle tabelle del girone la riga è mista, perché
   ogni colonna racconta un esito diverso della stessa permutazione. */
.component-table td.on-points { color: var(--accent); }

/* Le tabelle larghe scorrono per conto proprio invece di allargare la pagina. */
.table-scroll { overflow-x: auto; }

.component-table tr.condition-impaired td { color: var(--accent); }
.component-table tr.condition-destroyed td { color: var(--danger); text-decoration: line-through; }

.section-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0.9rem 0 0.35rem;
}

.issues {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
}

.issues li {
    color: var(--danger);
    font-size: 0.88rem;
    padding: 0.15rem 0;
}

.notice {
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    background: var(--panel-2);
}

.notice.ok { border-color: #2c5a44; color: var(--ok); }
.notice.error { border-color: #5b302c; color: var(--danger); }

/* ---------- passi del percorso di gioco ---------- */

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.steps .step {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}

.steps .step.done { color: var(--ok); border-color: #2c5a44; }
.steps .step.current { color: var(--accent); border-color: var(--accent); }

/* ---------- diario di battaglia ----------
   Ventotto tipi di riga tutti dello stesso grigio erano illeggibili: un colpo a segno deve
   saltare all'occhio più di una rotazione. Il tipo lo dichiara il motore (BattleLogKind),
   qui si traduce in colore, icona e peso. */

.log {
    max-height: 340px;
    overflow-y: auto;
    font-size: 0.86rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    scrollbar-width: thin;
}

.log-round {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(var(--panel) 70%, transparent);
    padding: 0.5rem 0 0.25rem;
}

.log-round:first-child { padding-top: 0; }

.log-round-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    display: block;
    padding-bottom: 0.2rem;
}

.log-line {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.16rem 0.35rem;
    border-radius: 5px;
    color: var(--muted);
    border-left: 2px solid transparent;
}

.log-icon {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.85;
}

.log-text { min-width: 0; overflow-wrap: anywhere; }

/* Un colpo a segno è la cosa più importante che possa comparire: è l'unica riga a piena luce. */
.log-line.kind-colpo {
    color: var(--text);
    background: rgba(242, 104, 95, 0.09);
    border-left-color: var(--danger);
}

.log-line.kind-colpo .log-icon { color: var(--danger); }

.log-line.kind-rovina {
    color: #ffb3ad;
    background: rgba(242, 104, 95, 0.16);
    border-left-color: var(--danger);
    font-weight: 600;
}

.log-line.kind-schivata {
    color: #a9d8ff;
    border-left-color: var(--accent-2);
}

.log-line.kind-mancato { color: #7d8ba3; }

.log-line.kind-energia { color: #e2c98a; }

.log-line.kind-manovra { color: #7f8da3; }

.log-line.kind-sistema {
    color: var(--accent);
    font-weight: 600;
}

/* ---------- mecha in campo ---------- */

.field-roster + .field-roster { margin-top: 0.9rem; }

.field-roster-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.turn-flag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
}

.unit-row {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.unit-row:hover { border-color: #3c4c68; background: #202a3c; }
.unit-row.picked { border-color: var(--accent); }
.unit-row.acting { border-left-color: var(--accent); }
.unit-row.spent { opacity: 0.62; }

.unit-row.down {
    opacity: 0.55;
    border-left-color: var(--danger);
}

.unit-row.down .unit-row-name { text-decoration: line-through; }

.unit-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.unit-row-name { font-weight: 600; }

.unit-row-state {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    white-space: nowrap;
}

.unit-row.acting .unit-row-state { color: var(--accent); }

/* La struttura come barra: «1442 su 1879» non si legge a colpo d'occhio, una barra sì. */
.hp-bar {
    height: 6px;
    border-radius: 999px;
    background: #0b0f17;
    border: 1px solid #1d2534;
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease-out, background 0.35s ease-out;
}

.hp-fill.healthy { background: linear-gradient(90deg, #3f9d72, var(--ok)); }
.hp-fill.hurt { background: linear-gradient(90deg, #c8a13f, var(--accent)); }
.hp-fill.critical { background: linear-gradient(90deg, #c0453d, var(--danger)); }

.unit-row-meta {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.28rem;
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.unit-row-meta em { font-style: normal; opacity: 0.6; }

.unit-row-damage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.dmg-chip {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    border: 1px solid transparent;
}

.dmg-chip.hurt { color: var(--accent); border-color: #4a3f1c; background: #241f0e; }
.dmg-chip.gone { color: var(--danger); border-color: #4a2b2b; background: #2a1614; }

.resonance-note { font-size: 0.78rem; margin: 0.2rem 0 0; }

/* ---------- taratura a mano ----------
   Decine di numeri sulla stessa schermata: se ognuno prende una riga non ci si sta, e la
   taratura si fa guardando i valori vicini fra loro, non scorrendoli uno alla volta. */

.num-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.3rem 0.45rem;
    margin-bottom: 0.5rem;
}

.num-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.num-cell > span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.num-cell input {
    width: 100%;
    padding: 0.15rem 0.35rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Un valore toccato deve distinguersi da uno di catalogo: è la differenza fra ciò che si sta
   provando e ciò che è già stato deciso. */
.num-cell.changed > span { color: var(--accent); }

.num-cell.changed input {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- la squadra come contenitore ----------
   I mecha stavano in pannelli fratelli sotto a un titolo: con due schieramenti aperti insieme,
   dire a colpo d'occhio a chi apparteneva il terzo pannello voleva dire risalire con gli occhi
   fino all'intestazione. Adesso la squadra è una scatola, e il colore del suo bordo torna su
   ogni mecha che contiene. */

.tuner-team {
    border: 1px solid var(--border);
    border-left: 4px solid var(--side);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    background: var(--panel);
}

.tuner-team + .tuner-team { margin-top: 1rem; }

.tuner-team.side-a { --side: var(--accent-2); }
.tuner-team.side-b { --side: #c07ae8; }

.tuner-team-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.tuner-team-head h3 { margin: 0; }

/* La lettera della squadra: è l'aggancio visivo che si ritrova sul bordo di ogni suo mecha. */
.tuner-team-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    background: var(--side);
    color: #0b0e14;
    font-weight: 700;
    font-size: 0.9rem;
    flex: none;
}

.tuner-team .tuner {
    background: var(--panel-2);
    border-left: 3px solid var(--side);
}

/* Dentro una squadra i mecha sono già distanziati dal pannello che li contiene. */
.tuner-team .panel + .panel { margin-top: 0.8rem; }

/* ---------- la componente come scatola ----------
   Prima erano sei blocchi di numeri separati da un'etichetta: dove finisse la testa e
   cominciasse il core lo diceva solo la riga di titolo, e con quaranta caselle sulla stessa
   schermata non bastava. */

.tuner-slot {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    padding: 0.5rem 0.6rem 0.15rem;
    margin-bottom: 0.55rem;
}

.tuner-slot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dotted var(--border);
}

.tuner-slot-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    flex: none;
}

/* Il modello montato: è ciò che si sta tarando, quindi si legge più del nome dello slot. */
.tuner-slot-part {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tuner-mount {
    border-left: 2px solid var(--border);
    background: var(--panel);
    border-radius: 0 6px 6px 0;
    padding: 0.35rem 0.5rem 0.05rem;
    margin: 0.15rem 0 0.5rem;
}

.tuner-mount-name {
    font-size: 0.78rem;
    color: var(--muted);
    display: block;
    margin-bottom: 0.25rem;
}

/* ---------- azione in attesa di conferma ----------
   Un click sbagliato costava il movimento del turno. Adesso l'azione si ferma qui, e questa
   barra deve saltare all'occhio più del pannello che la ospita: è l'unica cosa da fare. */

.pending-action {
    border: 1px solid var(--accent);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    background: #241f0e;
}

.pending-what {
    font-weight: 650;
    color: var(--accent);
}

.pending-detail {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

/* ---------- verdetto di fine partita ----------
   Come è finita conta quanto chi ha vinto: una partita decisa allo spareggio con i mecha quasi
   intatti non è una vittoria sul campo, e il giocatore deve saperlo senza leggere il diario. */

.verdict {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 0.8rem 1.1rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--panel-2), var(--panel));
}

.verdict.clean { border-left-color: var(--ok); }
.verdict.on-points { border-left-color: var(--accent); }
.verdict.mutual { border-left-color: var(--danger); }

.verdict-crown { font-size: 1.6rem; line-height: 1; }
.verdict.clean .verdict-crown { color: var(--ok); }
.verdict.on-points .verdict-crown { color: var(--accent); }
.verdict.mutual .verdict-crown { color: var(--danger); }

.verdict-name { font-weight: 700; font-size: 1.1rem; }
.verdict-how { color: var(--muted); font-size: 0.88rem; }

.verdict-tally {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: right;
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .verdict { flex-wrap: wrap; }
    .verdict-tally { margin-left: 0; text-align: left; }
}

/* ---------- promemoria richiudibile ---------- */

.rules-hint {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 0.35rem 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.rules-hint summary {
    cursor: pointer;
    color: var(--muted);
    padding: 0.2rem 0;
    list-style: none;
}

.rules-hint summary::before {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: -0.15rem;
}

.rules-hint summary:hover { color: var(--text); }
.rules-hint[open] summary { color: var(--text); margin-bottom: 0.3rem; }
.rules-hint p { margin: 0 0 0.4rem; color: var(--muted); }

.btn-chip {
    font-size: 0.74rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: var(--muted);
}

.btn-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: #2a2415;
}

/* ---------- etichette sulla griglia ----------
   Emesse dal componente SvgText, quindi fuori dal CSS isolato di HexGrid. */

.hex-height,
.hex-powerup,
.hex-unit-label {
    text-anchor: middle;
    pointer-events: none;
    font-weight: 700;
}

.hex-height {
    fill: #eef3fb;
    font-size: 0.72rem;
    paint-order: stroke;
    stroke: #0b0e14;
    stroke-width: 2.5px;
}

.hex-powerup {
    fill: #ffd166;
    font-size: 0.95rem;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #0b0e14;
    stroke-width: 2.5px;
}

.hex-unit-label {
    fill: #ffffff;
    font-size: 0.7rem;
}

/* Il danno appena preso, sopra il mecha: grande, rosso, sale e svanisce. Globale perché il testo
   lo scrive SvgText, che non riceve l'attributo del CSS isolato di HexGrid. */
.hex-flash-text {
    fill: #ff5c5c;
    font: 800 1.15rem 'Rajdhani', sans-serif;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #0b0e14;
    stroke-width: 4px;
    pointer-events: none;
}

.hex-flash {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: hex-flash 2.4s cubic-bezier(.2, .8, .2, 1) both;
    pointer-events: none;
}

@keyframes hex-flash {
    0% { opacity: 0; transform: translateY(6px) scale(0.6); }
    12% { opacity: 1; transform: translateY(0) scale(1.25); }
    25% { transform: translateY(-2px) scale(1); }
    80% { opacity: 1; transform: translateY(-14px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) { .hex-flash { animation: none; } }

/* ---------- errori Blazor ---------- */

#blazor-error-ui {
    background: #b32121;
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.7rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore.";
}

/* ---------------------------------------------------------------- provenienza
   Di serie, di una casa, assemblato: i tre gradi con cui un mecha dichiara da
   dove viene. È colore, quindi i colori distinguono senza ordinare — nessuno
   dei tre è «meglio», e infatti nessuno usa il verde del successo o il rosso
   dell'errore. */
.provenance {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .6rem;
}

.provenance-compact {
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}

.provenance-house { font-size: .85rem; }

.provenance-compact .provenance-house { color: var(--muted); }

.provenance-style { margin-top: .3rem; font-style: italic; }

.badge.prov-stock { color: #9fb0c9; border-color: #33415c; }
.badge.prov-house { color: var(--accent-2); border-color: #2b4370; }
.badge.prov-mixed { color: var(--muted); border-color: #333a45; }

/* L'abilità di un pilota: prima cosa fa in numeri, poi il colore.

   ⚠ La gerarchia è deliberata. Prima queste schede mostravano la sola descrizione, che è colore e
   per giunta invecchiato — le prose parlano ancora della vecchia scala dell'energia — quindi non
   si capiva quale bonus desse davvero. Gli effetti stanno in cima e nel colore del testo pieno;
   la prosa sotto, smorzata e in corsivo, dove non si scambia per una regola. */
.skill-card {
    margin-top: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #232c3d;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.015);
}

.skill-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
}

.skill-terms {
    font-size: 0.78rem;
    color: var(--muted);
}

.skill-effects {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.86rem;
}

.skill-effects li { padding: 0.06rem 0; }

/* Il pallino è un segno, non un elenco puntato: dice «questo è un effetto di gioco». */
.skill-effects li::before {
    content: "▸";
    color: var(--accent);
    margin-right: 0.4rem;
}

.skill-flavour {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--muted);
}

/* ---------- comparsa allo scroll ----------
   Un elemento .reveal entra salendo quando arriva nello schermo (js/home.js). Senza JS, o con
   prefers-reduced-motion, è semplicemente visibile: la classe html.js-reveal la mette lo script. */
html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1);
}

html.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* La preferenza «animazioni ridotte» del profilo: vale come prefers-reduced-motion, ma la sceglie
   il giocatore. Il selettore è sull'html, quindi copre anche il CSS isolato dei componenti. */
html[data-animazioni="ridotte"] *,
html[data-animazioni="ridotte"] *::before,
html[data-animazioni="ridotte"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}


/* ---------- le caselle che si girano al passaggio di un mecha ---------- */
.hex-flips { pointer-events: none; }
.hex-flip { --t: calc(var(--i) * 0.16s); }
.hex-flip > g { transform-box: fill-box; transform-origin: center; }
.hex-flip polygon { stroke-width: 2; }
.hex-flip-back polygon { fill: #1c2433; stroke: #ffd166; }
.hex-flip-back { animation: hex-flip-out 0.2s ease-in forwards; animation-delay: var(--t); }
.hex-flip-front { transform: scaleX(0); animation: hex-flip-in 0.22s ease-out forwards, hex-flip-fade 0.6s ease-in forwards; animation-delay: calc(var(--t) + 0.2s), calc(var(--t) + 1.6s); }
.hex-flip.empty .hex-flip-front polygon { fill: rgba(20, 26, 38, 0.92); stroke: rgba(146, 161, 184, 0.7); }
.hex-flip.found .hex-flip-front polygon { fill: rgba(255, 209, 102, 0.28); stroke: #ffd166; filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.9)); }
.hex-flip-q, .hex-flip-glyph { font: 700 15px/1 Rajdhani, sans-serif; text-anchor: middle; }
.hex-flip-q { fill: #ffd166; }
.hex-flip.empty .hex-flip-glyph { fill: #92a1b8; }
.hex-flip.found .hex-flip-glyph { fill: #fff; font-size: 18px; }
@keyframes hex-flip-out { to { transform: scaleX(0); } }
@keyframes hex-flip-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hex-flip-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hex-flip-back, .hex-flip-front { animation-duration: 0.01s; } }

/* ---------- gli sfondi delle sezioni ----------
   Addestramento e home hanno il loro sfondo; tutte le altre pagine prendono
   questo: due bagliori nel colore della sezione che derivano piano, una griglia esagonale che
   scorre e sfuma verso il basso. (Niente scanline: le righine orizzontali sembravano un difetto dello schermo.) Sta su due pseudo-elementi del body,
   fissi e dietro a tutto: il body diventa trasparente perché il suo sfondo coprirebbe lo z-index
   negativo, e il colore di base resta sull'html. */
body:has(:is(.hangar, .hm, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb, .sim-page, .lore)) {
    --sez-a: 77, 142, 247;
    --sez-b: 94, 234, 212;
    background: transparent;
}
body:has(:is(.hangar, .hm, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb, .sim-page, .lore))::before,
body:has(:is(.hangar, .hm, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb, .sim-page, .lore))::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body:has(:is(.hangar, .hm, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb, .sim-page, .lore))::before {
    background:
        radial-gradient(ellipse 50% 45% at 12% 8%, rgba(var(--sez-a), 0.2), transparent 70%),
        radial-gradient(ellipse 45% 50% at 92% 30%, rgba(var(--sez-b), 0.13), transparent 70%),
        radial-gradient(ellipse 70% 40% at 50% 115%, rgba(var(--sez-a), 0.1), transparent 70%);
    background-size: 140% 140%;
    animation: sez-deriva 38s ease-in-out infinite alternate;
}
body:has(:is(.hangar, .hm, .officina, .pf, .mp, .pl:not(.pl-hud), .sf, .lb, .sim-page, .lore))::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='120'%3E%3Cpath d='M34.64 0L69.28 20V60L34.64 80L0 60V20ZM34.64 80V120' fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E");
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 25%, transparent 85%);
    mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 25%, transparent 85%);
    animation: sez-griglia 90s linear infinite;
}
@keyframes sez-deriva { 0% { background-position: 0% 0%; } 100% { background-position: 100% 60%; } }
@keyframes sez-griglia { to { background-position: 0 240px; } }
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
}

/* Il colore di ogni sezione. */
body:has(.lb) { --sez-a: 255, 209, 102; --sez-b: 192, 122, 232; }
body:has(.sf.shop) { --sez-a: 192, 122, 232; --sez-b: 255, 209, 102; }
body:has(:is(.sf.dl, .sf.ch, .sf.pp)) { --sez-a: 255, 159, 67; --sez-b: 255, 209, 102; }
body:has(.sf.tn) { --sez-a: 255, 209, 102; --sez-b: 242, 104, 95; }
body:has(.sf.cl) { --sez-a: 242, 104, 95; --sez-b: 255, 159, 67; }
body:has(.sf.fr) { --sez-a: 89, 192, 138; --sez-b: 63, 242, 255; }
body:has(.sf.fo) { --sez-a: 111, 164, 255; --sez-b: 192, 122, 232; }
body:has(:is(.sf.db, .pf.adm)) { --sez-a: 242, 104, 95; --sez-b: 111, 164, 255; }
body:has(.pf:not(.adm)) { --sez-a: 94, 234, 212; --sez-b: 255, 209, 102; }
body:has(.mp) { --sez-a: 89, 192, 138; --sez-b: 255, 209, 102; }
body:has(.pl:not(.pl-hud)) { --sez-a: 242, 104, 95; --sez-b: 255, 159, 67; }
body:has(:is(.hangar, .hm, .officina)) { --sez-a: 111, 164, 255; --sez-b: 94, 234, 212; }
body:has(.sim-page) { --sez-a: 192, 122, 232; --sez-b: 63, 242, 255; }
/* Le pagine del mondo (storia, case, X-Piator) e il regolamento: i colori della forgia. */
body:has(.lore) { --sez-a: 255, 159, 67; --sez-b: 77, 142, 247; }

/* ---------- il mecha a strati (MechaVista) ----------
   Cinque immagini, una per componente, tutte con lo stesso riquadro 300×400 e messe esattamente
   una sopra l'altra: l'ancoraggio è il riquadro stesso. */
.mvs { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.6rem; width: 100%; height: 100%; min-height: 0; }
.mvs-stack { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: 3 / 4; animation: mv-entra 0.45s ease-out both; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)); }
.mvs.con-selettore .mvs-stack { animation: mv-entra 0.45s ease-out both, mv-fluttua 7s ease-in-out 0.45s infinite; }
.mvs-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.mvs-views { position: relative; z-index: 3; flex: none; display: flex; justify-content: center; gap: 0.3rem; }
.mvs-views button { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(8, 10, 16, 0.75); color: #9fb0c8; font: 700 0.7rem/1 Rajdhani, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.mvs-views button:hover:not(:disabled) { color: #eef3fb; border-color: rgba(255, 255, 255, 0.35); }
.mvs-views button.on { color: #0d1118; background: rgb(var(--tinta, 255, 209, 102)); border-color: transparent; }
.mvs-views button:disabled { opacity: 0.35; cursor: default; }
@keyframes mv-entra { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }
@keyframes mv-fluttua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Il piè di pagina: discreto, e assente sugli HUD a schermo intero (schieramento e battaglia). */
.site-footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; padding: 1.4rem 1rem 1.8rem; color: #6f7c90; font-size: 0.78rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.site-footer a { color: #8b98ab; text-decoration: none; }
.site-footer a:hover { color: #ffd166; }
body:has(.pl-hud, .stampa-pagina) .site-footer { display: none; }
.auth-legal { margin: 0.2rem 0 0.6rem; color: #8b98ab; font-size: 0.78rem; line-height: 1.45; } .auth-legal a { color: #ffd166; }

/* ---------- modalità per daltonici ----------
   I due lati da blu/rosso a azzurro/arancio (palette Okabe-Ito, distinguibile con deuteranopia e
   protanopia), e il secondo lato anche con un segno che non è un colore: il tratteggio. */
.footer-a11y { border: 0; background: none; color: #8b98ab; font: inherit; cursor: pointer; padding: 0; }
.footer-a11y:hover { color: #ffd166; }
html[data-daltonici] { --accent-2: #56b4e9; --danger: #e69f00; }
html[data-daltonici] .footer-a11y { color: #56b4e9; }
html[data-daltonici] .bt, html[data-daltonici] .mv-plate, html[data-daltonici] .sm { --p0: 86, 180, 233; --p1: 230, 159, 0; }
html[data-daltonici] .bt-plate.p0, html[data-daltonici] .asta-player.p0 { --pc: 86, 180, 233; }
html[data-daltonici] .bt-plate.p1, html[data-daltonici] .asta-player.p1, html[data-daltonici] .mv-plate.p1, html[data-daltonici] .sm.p1 { --pc: 230, 159, 0; }
html[data-daltonici] .hex.owner-0 .hex-unit { fill: #56b4e9 !important; }
html[data-daltonici] .hex.owner-1 .hex-unit { fill: #e69f00 !important; stroke: #fff !important; stroke-dasharray: 3 2; }
html[data-daltonici] .hex.cambio.c0 { --cambio: 86, 180, 233; }
html[data-daltonici] .hex.cambio.c1 { --cambio: 230, 159, 0; }
html[data-daltonici] .hex.cambio.c1 .hex-top { stroke-dasharray: 2 4; }
html[data-daltonici] .pl-note.warn { color: #e69f00; }
html[data-daltonici] .pl-note.ok { color: #56b4e9; }

/* ---------- il diorama (MechaVista col selettore) ----------
   La pila si inclina col puntatore (diorama.js scrive --rx e --ry) e ogni strato sta a una
   profondità sua: i propulsori dietro, le braccia davanti. La luce segue il puntatore. */
.mvs.con-selettore { perspective: 900px; cursor: grab; outline: none; }
.mvs.con-selettore.girando { cursor: grabbing; }
.mvs.con-selettore .mvs-stack { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; }
.mvs.con-selettore .mvs-layer { transition: transform 0.25s ease-out; }
.mvs.con-selettore .mvs-layer.s-propulsori { transform: translateZ(-26px); }
.mvs.con-selettore .mvs-layer.s-gambe { transform: translateZ(-8px); }
.mvs.con-selettore .mvs-layer.s-testa { transform: translateZ(10px); }
.mvs.con-selettore .mvs-layer.s-braccia { transform: translateZ(20px); }
.mvs.con-selettore[data-vista="retro"] .mvs-layer.s-propulsori { transform: translateZ(20px); }
.mvs.con-selettore[data-vista="retro"] .mvs-layer.s-braccia { transform: translateZ(-26px); }
.mvs-luce { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--lx, 35%) var(--ly, 25%), rgba(255, 255, 255, 0.16), transparent 45%); mix-blend-mode: soft-light; }
.mvs-pavimento { position: absolute; left: 15%; right: 15%; bottom: 2.6rem; height: 18px; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%); filter: blur(2px); }
.mvs.con-selettore:focus-visible { outline: 2px solid #ffd166; outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .mvs.con-selettore .mvs-stack { transform: none !important; } }