/* ==========================================================================
   web/css/app.css — design system "Soliton" di Among Us Live (docs/DESIGN.md §2-§4)
   Token, font, superficie CRT, componenti, transizioni, schermate core.
   Regola: si animano solo transform/opacity. prefers-reduced-motion rispettato in fondo.
   ========================================================================== */

/* ---------------------------------------------------------------- font (self-hosted, OFL) */
@font-face {
  font-family: 'Black Ops One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/black-ops-one-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Black Ops One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/black-ops-one-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/share-tech-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/vt323-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/vt323-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- token */
:root {
  /* fondo e superfici */
  --bg-0: #010a04;
  --bg-1: #03140a;
  --bg-2: #062312;
  --grid: rgba(92, 255, 138, .07);
  /* fosforo */
  --ph-1: #39ff14;
  --ph-2: #5cff8a;
  --ph-3: #1f7a3d;
  --ph-dim: #46c46e;      /* testo secondario leggibile al sole (≈8:1 su --bg-0); --ph-3 solo per bordi/tacche */
  --ph-4: #0e3d1e;             /* bordi spenti, separatori */
  --ph-glow: 0 0 6px rgba(92, 255, 138, .55), 0 0 18px rgba(57, 255, 20, .25);
  --ph-glow-soft: 0 0 4px rgba(92, 255, 138, .35);
  /* stati d'allerta (MGS) */
  --caution: #ffb000;
  --alert: #ff2a2a;
  --alert-glow: 0 0 10px rgba(255, 42, 42, .8), 0 0 30px rgba(255, 42, 42, .4);
  --caution-glow: 0 0 8px rgba(255, 176, 0, .6), 0 0 22px rgba(255, 176, 0, .25);
  /* radio / codec */
  --codec: #7fe8ff;
  --codec-glow: 0 0 8px rgba(127, 232, 255, .6), 0 0 20px rgba(127, 232, 255, .25);
  /* obiettivi */
  --gold: #ffc83d;
  --gold-glow: 0 0 8px rgba(255, 200, 61, .7), 0 0 24px rgba(255, 200, 61, .3);
  --cardboard: #b08850;
  --ghost: #a9c7d6;
  /* forme */
  --cut: 10px;
  --radius-pill: 999px;
  /* tipografia */
  --font-display: 'Black Ops One', 'Impact', system-ui, sans-serif;
  --font-hud: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-pixel: 'VT323', ui-monospace, monospace;
  /* movimento */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .5, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  /* safe area */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  /* livelli */
  --z-map: 1;
  --z-app: 10;
  --z-sheet: 200;
  --z-codec: 900;
  --z-toast: 950;
  --z-fx: 2000;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-0);
}
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ph-2);
  font: 400 16px/1.4 var(--font-hud);
  letter-spacing: .02em;
  text-shadow: 0 0 2px rgba(92, 255, 138, .35);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 28%, rgba(20, 110, 50, .22), transparent 70%),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--ph-2); }
img, svg { display: block; }
svg.icon { flex: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--codec); outline-offset: 3px; }
::selection { background: var(--ph-2); color: var(--bg-0); }

/* ---------------------------------------------------------------- livelli */
#map-layer {
  position: fixed; inset: 0; z-index: var(--z-map);
  visibility: hidden; opacity: 0;
  transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms;
  background: var(--bg-0);
}
#map-layer.is-on { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
#app { position: fixed; inset: 0; z-index: var(--z-app); overflow: hidden; }
/* --svc-h: altezza del banner di ricezione del servizio (css/radio.css, .svc-rx) quando è visibile */
#codec-root {
  position: fixed; z-index: var(--z-codec); left: 0; right: 0;
  top: calc(var(--sat) + 8px);
  translate: 0 var(--svc-h, 0px);
  transition: translate 220ms var(--ease-out);
  display: flex; justify-content: center; padding: 0 10px;
  pointer-events: none;
}
#toast-root {
  position: fixed; z-index: var(--z-toast); left: 0; right: 0;
  top: calc(var(--sat) + 6px);
  transform: translateY(var(--codec-h, 0px));
  translate: 0 var(--svc-h, 0px);
  transition: transform 220ms var(--ease-out), translate 220ms var(--ease-out);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px;
  pointer-events: none;
}
/* sopra la mappa (schieramento/partita) Codec e toast si agganciano sotto la barra dell'HUD, mai sopra
   timer/fase/obiettivi: stessi offset di --radar-status-top in game.css */
body[data-screen="game"] #codec-root, body[data-screen="game"] #toast-root { top: max(calc(var(--sat) + 158px), calc(var(--hud-top-h, 0px) + 6px)); }
body[data-screen="deploy"] #codec-root, body[data-screen="deploy"] #toast-root { top: max(calc(var(--sat) + 138px), calc(var(--hud-top-h, 0px) + 6px)); }
#fx { position: fixed; inset: 0; z-index: var(--z-fx); pointer-events: none; }
/* scanline */
#fx::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .9) 2px 3px);
  opacity: .085;
}
/* vignettatura */
#fx::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
/* flicker CRT impercettibile (opacità 0.97↔1) */
.fx__flicker { position: absolute; inset: 0; background: #000; opacity: 0; animation: fx-flicker 9.7s steps(1) infinite; }
@keyframes fx-flicker {
  0%, 100% { opacity: 0; }
  12% { opacity: .03; } 12.6% { opacity: 0; }
  41% { opacity: .025; } 41.4% { opacity: 0; } 41.9% { opacity: .03; } 42.3% { opacity: 0; }
  77% { opacity: .02; } 77.5% { opacity: 0; }
}
body.is-alert #fx::after { background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 50%, rgba(120, 0, 0, .55) 100%); }

/* mappa accesa: niente griglia sotto le schermate trasparenti */
body.map-on { background-image: none; }

/* splash */
.boot { transition: opacity 300ms ease; }
.boot.is-out { opacity: 0; }

/* ---------------------------------------------------------------- tipografia */
.t-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.t-pixel { font-family: var(--font-pixel); letter-spacing: .04em; }
.t-hud { font-family: var(--font-hud); }
.t-label {
  font-family: var(--font-hud); font-size: 12px; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ph-dim); text-shadow: none;
}
.t-title { font-family: var(--font-display); font-size: 26px; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--ph-glow); }
.t-huge { font-family: var(--font-display); font-size: clamp(48px, 18vw, 76px); line-height: .95; letter-spacing: .08em; }
.t-big { font-size: 20px; }
.t-small { font-size: 13px; }
.t-center { text-align: center; }
.t-upper { text-transform: uppercase; letter-spacing: .12em; }
.glow { text-shadow: var(--ph-glow); }
.c-ph1 { color: var(--ph-1); }
.c-muted { color: var(--ph-dim); text-shadow: none; }
.c-caution { color: var(--caution); text-shadow: var(--caution-glow); }
.c-alert { color: var(--alert); text-shadow: var(--alert-glow); }
.c-codec { color: var(--codec); text-shadow: var(--codec-glow); }
.c-gold { color: var(--gold); text-shadow: var(--gold-glow); }
.c-ghost { color: var(--ghost); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cursor::after {
  content: ''; display: inline-block; width: .55em; height: 1em; margin-left: .15em; vertical-align: -.12em;
  background: currentColor; animation: blink 1s steps(1) infinite;
}

/* ---------------------------------------------------------------- cornice smussata (base di pannelli, bottoni, input, carte)
   Il bordo è ::before (colore --frame-c), il riempimento ::after (inset --bw). */
.frame, .panel, .btn, .field__box, .card, .badge, .codebox__cell, .sheet, .codec__frame, .toast, .chip {
  --bw: 1px;
  --frame-c: var(--ph-3);
  --fill: rgba(3, 20, 10, .9);
  --clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-in: polygon(calc(var(--cut) - var(--bw) * .59) 0, 100% 0, 100% calc(100% - var(--cut) + var(--bw) * .59), calc(100% - var(--cut) + var(--bw) * .59) 100%, 0 100%, 0 calc(var(--cut) - var(--bw) * .59));
  /* anello del bordo (poligono con foro, evenodd): i riempimenti possono essere trasparenti */
  --ring: polygon(evenodd,
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--bw) * .414) var(--bw), calc(100% - var(--bw)) var(--bw),
    calc(100% - var(--bw)) calc(100% - var(--cut) - var(--bw) * .414), calc(100% - var(--cut) - var(--bw) * .414) calc(100% - var(--bw)),
    var(--bw) calc(100% - var(--bw)), var(--bw) calc(var(--cut) + var(--bw) * .414), calc(var(--cut) + var(--bw) * .414) var(--bw));
  position: relative;
  isolation: isolate;
  clip-path: var(--clip);
}
.frame::before, .panel::before, .btn::before, .field__box::before, .card::before, .badge::before,
.codebox__cell::before, .sheet::before, .codec__frame::before, .toast::before, .chip::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--frame-c);
  clip-path: var(--ring);
  pointer-events: none;
}
.frame::after, .panel::after, .btn::after, .field__box::after, .card::after, .badge::after,
.codebox__cell::after, .sheet::after, .codec__frame::after, .toast::after, .chip::after {
  content: ''; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--fill);
  clip-path: var(--clip-in);
  pointer-events: none;
}

/* ---------------------------------------------------------------- pannelli */
.panel {
  --fill:
    linear-gradient(var(--ph-2), var(--ph-2)) top right / 14px 2px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) top right / 2px 14px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) bottom left / 2px 14px no-repeat,
    linear-gradient(180deg, rgba(6, 35, 18, .92), rgba(3, 20, 10, .9));
  padding: 16px;
}
.panel--tight { padding: 12px; }
.panel--flush { padding: 0; }
.panel--alert { --frame-c: var(--alert); }
.panel--caution { --frame-c: var(--caution); }
.panel--codec { --frame-c: var(--codec); }
.panel--gold { --frame-c: var(--gold); }
.panel--hi { --frame-c: var(--ph-2); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.panel__title { font-family: var(--font-display); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; text-shadow: var(--ph-glow-soft); }
.panel__title small { font-family: var(--font-hud); font-size: 12px; color: var(--ph-dim); letter-spacing: .18em; margin-left: 8px; }
.divider { height: 1px; margin: 14px 0; background: repeating-linear-gradient(90deg, var(--ph-3) 0 6px, transparent 6px 10px); opacity: .8; }

/* ---------------------------------------------------------------- bottoni */
.btn {
  --cut: 9px;
  --bw: 1.5px;
  --frame-c: var(--ph-2);
  --fill: var(--ph-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px;
  color: var(--bg-0);
  font-family: var(--font-display); font-size: 19px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}
.btn__label { position: relative; overflow: hidden; text-overflow: ellipsis; }
.btn__icon { display: inline-flex; }
.btn__icon svg { width: 22px; height: 22px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--primary:active:not(:disabled) { --fill: var(--ph-1); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 64px; font-size: 22px; }
.btn--sm { --cut: 6px; min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn--xs { --cut: 5px; min-height: 36px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn--xs .btn__icon svg, .btn--sm .btn__icon svg { width: 18px; height: 18px; }
.btn--secondary { --fill: rgba(1, 10, 4, .82); color: var(--ph-2); text-shadow: var(--ph-glow-soft); }
.btn--secondary:active:not(:disabled) { --fill: rgba(57, 255, 20, .18); }
/* secondario ambra (es. ATTIVA SENSORI, come il chip DA ATTIVARE): da fare, ma non è l'azione primaria */
.btn--secondary.btn--caution { --frame-c: var(--caution); color: var(--caution); text-shadow: none; }
.btn--secondary.btn--caution:active:not(:disabled) { --fill: rgba(255, 176, 0, .18); }
.btn--danger { --frame-c: var(--alert); --fill: var(--alert); color: #fff; }
.btn--danger.btn--outline { --fill: rgba(30, 0, 0, .8); color: var(--alert); text-shadow: 0 0 6px rgba(255, 42, 42, .5); }
.btn--codec { --frame-c: var(--codec); --fill: rgba(0, 18, 24, .85); color: var(--codec); text-shadow: var(--codec-glow); }
.btn--gold { --frame-c: var(--gold); --fill: var(--gold); color: #1a1000; }
.btn--ghost {
  --frame-c: transparent; --fill: transparent;
  color: var(--ph-2); min-height: 48px; padding: 0 12px;
  font-family: var(--font-hud); font-size: 15px; letter-spacing: .18em;
  text-decoration: underline; text-decoration-color: var(--ph-3); text-underline-offset: 5px;
}
.btn--ghost:active:not(:disabled) { --fill: rgba(57, 255, 20, .12); }
.btn--icon {
  --cut: 7px;
  --fill: rgba(1, 10, 4, .82);
  width: 48px; min-height: 48px; height: 48px; padding: 0;
  color: var(--ph-2);
}
.btn--icon .btn__icon svg { width: 24px; height: 24px; }
.btn--icon.btn--sm { width: 40px; height: 40px; min-height: 40px; }
/* cursore di selezione lampeggiante (menu di gioco): è l'icona dei CTA senza icona propria */
.btn--cta .btn__label::before { content: '▶'; display: inline-block; margin-right: 10px; font-size: .7em; vertical-align: .12em; animation: blink 1.1s steps(1) infinite; }
.btn--cta.btn--has-icon .btn__label::before { display: none; }
/* disabilitato: tratteggio + testo spento */
.btn:disabled, .btn[aria-disabled='true'] {
  --frame-c: repeating-linear-gradient(45deg, var(--ph-3) 0 5px, transparent 5px 9px);
  --fill: rgba(3, 20, 10, .92);
  color: var(--ph-dim); text-shadow: none; cursor: not-allowed;
}
.btn--ghost:disabled { --frame-c: transparent; --fill: transparent; }
/* occupato */
.btn.is-busy { cursor: progress; opacity: .92; }
.btn.is-busy:disabled { color: var(--ph-2); --fill: repeating-linear-gradient(-45deg, rgba(57, 255, 20, .1) 0 8px, rgba(3, 20, 10, .95) 8px 16px); }
.btn.is-busy .btn__label::after {
  content: ''; display: inline-block; width: .5em; height: .9em; margin-left: .4em; vertical-align: -.08em;
  background: currentColor; animation: blink .6s steps(1) infinite;
}
.btn.is-busy .btn__icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; min-width: 0; }
.btn-row .btn--cta .btn__label::before { display: none; }
.btn-stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- campi */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; }
.field__box { --cut: 8px; --fill: var(--bg-2); display: flex; align-items: center; min-height: 52px; }
.field__box:focus-within { --frame-c: var(--ph-2); --bw: 1.5px; }
.field__box > .field__prefix { padding-left: 14px; color: var(--ph-dim); }
.input {
  flex: 1; min-width: 0; height: 52px; padding: 0 14px;
  background: transparent; border: 0; border-radius: 0;
  color: var(--ph-2); font-size: 19px; letter-spacing: .08em; text-transform: uppercase;
  caret-color: var(--ph-1);
  text-shadow: var(--ph-glow-soft);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--ph-dim); opacity: .8; text-shadow: none; letter-spacing: .1em; }
.field__hint { font-size: 13px; color: var(--ph-dim); text-shadow: none; min-height: 1em; }
.field.is-error .field__box { --frame-c: var(--alert); --bw: 1.5px; }
.field.is-error .field__hint { color: var(--alert); text-shadow: 0 0 6px rgba(255, 42, 42, .45); }
.field__count { margin-right: 12px; font-size: 12px; color: var(--ph-dim); }

/* codice stanza a 4 caselle: un input vero sopra 4 celle disegnate */
.codebox { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.codebox__input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  opacity: 0; border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; text-transform: uppercase;
}
.codebox__cell {
  --cut: 10px; --bw: 1.5px; --fill: var(--bg-2);
  display: grid; place-items: center; aspect-ratio: 3 / 4; min-height: 72px;
  font-family: var(--font-display); font-size: 40px; color: var(--ph-2); text-shadow: var(--ph-glow);
}
.codebox__cell.is-filled { --frame-c: var(--ph-2); }
.codebox__cell.is-filled .codebox__char { animation: char-in 180ms var(--ease-snap); }
@keyframes char-in { from { transform: scale(1.6); opacity: 0; } }
.codebox.is-focus .codebox__cell.is-active { --frame-c: var(--ph-1); --fill: rgba(57, 255, 20, .1); }
.codebox.is-focus .codebox__cell.is-active::after { background: var(--fill); }
.codebox__cursor { width: 22px; height: 34px; background: var(--ph-1); box-shadow: var(--ph-glow); animation: blink 1s steps(1) infinite; }
.codebox:not(.is-focus) .codebox__cursor { opacity: .35; animation: none; }
.codebox.is-error .codebox__cell { --frame-c: var(--alert); color: var(--alert); text-shadow: var(--alert-glow); }
.codebox.is-error { animation: shake 360ms var(--ease-out); }
.codebox.is-ok .codebox__cell { --frame-c: var(--ph-1); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(3px); }
}

/* slider */
.range { display: flex; flex-direction: column; gap: 8px; }
.range__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.range__label { font-size: 14px; color: var(--ph-2); letter-spacing: .06em; }
.range__value { font-family: var(--font-pixel); font-size: 24px; line-height: 1; color: var(--ph-1); text-shadow: var(--ph-glow); white-space: nowrap; }
.range input[type='range'] {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.range input[type='range']::-webkit-slider-runnable-track {
  height: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(1, 10, 4, .9) calc(10% - 1px) 10%),
    linear-gradient(90deg, var(--ph-2) var(--p), var(--ph-4) var(--p));
  box-shadow: 0 0 0 1px var(--ph-3);
}
.range input[type='range']::-moz-range-track {
  height: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(1, 10, 4, .9) calc(10% - 1px) 10%),
    linear-gradient(90deg, var(--ph-2) var(--p), var(--ph-4) var(--p));
  box-shadow: 0 0 0 1px var(--ph-3);
}
.range input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px;
  background: var(--ph-1); border: 3px solid var(--bg-0); transform: rotate(45deg);
  box-shadow: 0 0 0 1px var(--ph-1), var(--ph-glow);
}
.range input[type='range']::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 0;
  background: var(--ph-1); border: 3px solid var(--bg-0); transform: rotate(45deg);
  box-shadow: 0 0 0 1px var(--ph-1), var(--ph-glow);
}
.range__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ph-dim); text-shadow: none; letter-spacing: .1em; }

/* spunta */
.check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.35; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check__box {
  flex: none; width: 26px; height: 26px; margin-top: -2px; display: grid; place-items: center;
  border: 1.5px solid var(--ph-2); background: rgba(1, 10, 4, .7);
  color: var(--bg-0);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.check__box svg { width: 20px; height: 20px; opacity: 0; transform: scale(.4); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-snap); }
.check input:checked + .check__box { background: var(--ph-2); box-shadow: var(--ph-glow); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid var(--codec); outline-offset: 3px; }
.check:active .check__box { transform: scale(.9); }
.check__text b { color: var(--ph-1); font-weight: 400; }

/* ---------------------------------------------------------------- carte, liste, chip */
.card {
  --cut: 12px;
  --fill: linear-gradient(170deg, rgba(8, 44, 22, .92), rgba(3, 20, 10, .92));
  display: block; width: 100%; padding: 14px; text-align: left; color: var(--ph-2);
}
button.card { transition: transform var(--dur-fast) var(--ease-out); }
button.card:active:not(:disabled) { transform: scale(.98); }
.card.is-selected { --frame-c: var(--ph-1); --bw: 2px; --fill: linear-gradient(170deg, rgba(57, 255, 20, .16), rgba(3, 20, 10, .92)); }
.card.is-selected .card__check { opacity: 1; transform: none; }
.card:disabled, .card.is-disabled { opacity: .45; cursor: not-allowed; }
.card__check {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--ph-1); color: var(--bg-0); opacity: 0; transform: scale(.5);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.card__check svg { width: 18px; height: 18px; }
.card--mine { --frame-c: var(--ph-2); --bw: 1.5px; }
.list { display: flex; flex-direction: column; }
.list__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px dashed var(--ph-4); }
.list__item:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
.list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__sub { font-size: 13px; color: var(--ph-dim); text-shadow: none; }
.chip { --cut: 6px; --fill: rgba(1, 10, 4, .8); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; }

/* ---------------------------------------------------------------- badge e indicatori */
.badge {
  --cut: 5px; --frame-c: var(--ph-3); --fill: rgba(1, 10, 4, .85);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px;
  font-size: 12px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ph-2); text-shadow: none;
}
.badge svg { width: 14px; height: 14px; }
.badge--ok { --frame-c: var(--ph-2); color: var(--ph-1); }
.badge--solid { --frame-c: var(--ph-2); --fill: var(--ph-2); color: var(--bg-0); }
.badge--warn { --frame-c: var(--caution); color: var(--caution); }
.badge--danger { --frame-c: var(--alert); color: var(--alert); }
.badge--codec { --frame-c: var(--codec); color: var(--codec); }
.badge--gold { --frame-c: var(--gold); color: var(--gold); }
.badge--muted { color: var(--ph-dim); }
.dot { display: inline-block; width: 9px; height: 9px; flex: none; background: var(--ph-3); transform: rotate(45deg); }
.dot--ok { background: var(--ph-1); box-shadow: var(--ph-glow); }
.dot--warn { background: var(--caution); box-shadow: var(--caution-glow); }
.dot--danger { background: var(--alert); box-shadow: var(--alert-glow); }
.dot--off { background: transparent; border: 1.5px solid var(--ph-3); }
.dot--pulse { animation: pulse-o 1.2s ease-in-out infinite; }
@keyframes pulse-o { 50% { opacity: .3; } }
/* barre di segnale (codec, rete) */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.bars i { display: block; width: 4px; height: 100%; background: currentColor; transform-origin: bottom; }
.bars i:nth-child(1) { transform: scaleY(.3); }
.bars i:nth-child(2) { transform: scaleY(.5); }
.bars i:nth-child(3) { transform: scaleY(.7); }
.bars i:nth-child(4) { transform: scaleY(.9); }
.bars i.is-off { opacity: .22; }

/* banner (avvisi in pagina) */
.banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-left: 3px solid var(--caution); background: rgba(40, 26, 0, .6);
  color: var(--caution); text-shadow: none; font-size: 14px; line-height: 1.35;
}
.banner svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.banner b { font-weight: 400; color: #ffd36b; }
.banner--danger { border-color: var(--alert); background: rgba(40, 0, 0, .6); color: #ff8a8a; }
.banner--info { border-color: var(--codec); background: rgba(0, 26, 34, .6); color: var(--codec); }
.banner--ok { border-color: var(--ph-2); background: rgba(6, 35, 18, .7); color: var(--ph-2); }

/* accordion */
.acc { border-top: 1px dashed var(--ph-3); }
.acc > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .acc__chev { margin-left: auto; transition: transform var(--dur) var(--ease-out); }
.acc[open] > summary .acc__chev { transform: rotate(180deg); }
.acc__body { padding: 4px 0 16px; display: flex; flex-direction: column; gap: 18px; animation: acc-in 200ms var(--ease-out); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } }
.acc__group-title { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; margin-bottom: -6px; }
.acc__body .range[hidden], .acc__body .switch[hidden] { display: none; }
.range.is-inactive, .switch.is-inactive { opacity: .45; }
/* v1.1: interruttore sì/no (radar adattivo) */
.switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.switch__label { flex: 1; min-width: 0; font-size: 14px; color: var(--ph-2); letter-spacing: .06em; }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch__track {
  position: relative; flex: none; width: 52px; height: 28px;
  background: var(--ph-4); box-shadow: inset 0 0 0 1.5px var(--ph-3);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.switch__knob { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: var(--ph-dim); transition: transform var(--dur) var(--ease-out); }
.switch__input:checked ~ .switch__track { background: rgba(57, 255, 20, .22); box-shadow: inset 0 0 0 1.5px var(--ph-2); }
.switch__input:checked ~ .switch__track .switch__knob { transform: translateX(24px); background: var(--ph-1); box-shadow: var(--ph-glow); }
.switch__input:focus-visible ~ .switch__track { outline: 2px solid var(--codec); outline-offset: 3px; }
.switch__state { min-width: 2.2ch; font-family: var(--font-pixel); font-size: 24px; line-height: 1; text-align: right; color: var(--ph-1); text-shadow: var(--ph-glow); }

/* ---------------------------------------------------------------- sheet e modali */
.backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(0, 5, 2, .72);
  animation: fade-in 180ms ease-out;
}
.backdrop.is-out { opacity: 0; transition: opacity 160ms; }
.sheet {
  --cut: 16px; --bw: 1.5px; --frame-c: var(--ph-2);
  --clip: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
  --clip-in: polygon(calc(var(--cut) - var(--bw) * .59) 0, calc(100% - var(--cut) + var(--bw) * .59) 0, 100% calc(var(--cut) - var(--bw) * .59), 100% 100%, 0 100%, 0 calc(var(--cut) - var(--bw) * .59));
  --ring: polygon(evenodd,
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--bw) * .414) var(--bw), calc(100% - var(--cut) - var(--bw) * .414) var(--bw),
    calc(100% - var(--bw)) calc(var(--cut) + var(--bw) * .414), calc(100% - var(--bw)) 100%, var(--bw) 100%,
    var(--bw) calc(var(--cut) + var(--bw) * .414), calc(var(--cut) + var(--bw) * .414) var(--bw));
  --fill: linear-gradient(180deg, #062312, #020f07 30%);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
  max-width: 560px; margin: 0 auto; max-height: 88dvh;
  display: flex; flex-direction: column;
  padding: 8px 16px calc(16px + var(--sab));
  animation: sheet-in 260ms var(--ease-out);
}
.sheet.is-out { transform: translateY(100%); transition: transform 200ms ease-in; }
.sheet:focus-visible { outline: none; } /* il focus sul dialogo stesso (fogli bloccanti) non va evidenziato */
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet__handle { align-self: center; width: 44px; height: 4px; margin: 2px 0 10px; background: var(--ph-3); }
.sheet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sheet__title { flex: 1; font-family: var(--font-display); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; text-shadow: var(--ph-glow-soft); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; margin: 0 -16px; padding: 2px 16px 8px; }
.sheet__foot { padding-top: 12px; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- schermate: struttura */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--sat) var(--sar) 0 var(--sal);
  overflow: hidden;
  transform-origin: 50% 50%;
}
.screen--solid { background: var(--bg-0); }
.topbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 60px; padding: 6px 12px;
}
.topbar__title { flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-size: 19px; letter-spacing: .12em; text-transform: uppercase; text-shadow: var(--ph-glow-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__title small { display: block; font-family: var(--font-hud); font-size: 11px; letter-spacing: .3em; color: var(--ph-dim); text-shadow: none; }
.topbar__side { width: 48px; flex: none; display: flex; justify-content: center; }
.screen__body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 16px 24px;
}
.screen__foot {
  flex: none; position: relative;
  padding: 12px 16px calc(14px + var(--sab));
  background: linear-gradient(180deg, rgba(1, 10, 4, 0), rgba(1, 10, 4, .94) 22%);
}
.screen__foot::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ph-3), transparent); }
.col { width: 100%; max-width: 480px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--lg { gap: 22px; }
.stack--sm { gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { display: grid; place-items: center; text-align: center; }
.mt-auto { margin-top: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- transizioni schermata */
.screen--enter-crt { animation: crt-on 240ms var(--ease-out) both; }
.screen--exit-crt { animation: crt-off 200ms ease-in both; pointer-events: none; }
.screen--enter-glitch { animation: glitch-in 280ms steps(1) both; }
.screen--exit-glitch { animation: glitch-out 180ms steps(1) both; pointer-events: none; }
.screen--enter-fade { animation: fade-in 200ms ease-out both; }
.screen--exit-fade { animation: fade-out 160ms ease-in both; pointer-events: none; }
@keyframes crt-on {
  0% { transform: scale(.7, .006); opacity: 0; }
  30% { transform: scale(1, .006); opacity: 1; }
  62% { transform: scale(1, 1.03); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes crt-off {
  0% { transform: none; opacity: 1; }
  55% { transform: scale(1, .006); opacity: 1; }
  100% { transform: scale(0, .006); opacity: 0; }
}
@keyframes glitch-in {
  0% { opacity: 0; transform: translateX(-14px); }
  15% { opacity: 1; transform: translateX(10px) skewX(-6deg); }
  30% { opacity: .5; transform: translateX(-6px); }
  45% { opacity: 1; transform: translateX(4px) skewX(3deg); }
  60% { opacity: .8; transform: translateX(-2px); }
  75%, 100% { opacity: 1; transform: none; }
}
@keyframes glitch-out {
  0% { opacity: 1; transform: none; }
  30% { opacity: .6; transform: translateX(8px) skewX(4deg); }
  60% { opacity: .9; transform: translateX(-10px); }
  100% { opacity: 0; transform: translateX(14px); }
}
@keyframes fade-out { to { opacity: 0; } }
.screen--exit-crt, .screen--exit-glitch, .screen--exit-fade { z-index: 1; }

/* ---------------------------------------------------------------- codec (notifiche) */
.codec {
  width: min(100%, 460px);
  pointer-events: auto;
  transform-origin: 50% 50%;
  animation: codec-open 260ms var(--ease-out) both;
}
.codec.is-closing { animation: codec-close 200ms ease-in both; }
@keyframes codec-open {
  0% { transform: scale(1, .02); opacity: 0; }
  40% { transform: scale(1, .02); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes codec-close {
  0% { transform: none; opacity: 1; }
  60% { transform: scale(1, .02); opacity: 1; }
  100% { transform: scale(0, .02); opacity: 0; }
}
.codec__frame {
  --cut: 12px; --bw: 1.5px; --frame-c: var(--codec);
  --fill:
    repeating-linear-gradient(0deg, rgba(127, 232, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0, 28, 36, .96), rgba(0, 12, 16, .96));
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; padding: 10px 12px 12px;
  color: var(--codec); text-shadow: 0 0 4px rgba(127, 232, 255, .45);
  cursor: pointer;
}
.codec--warn .codec__frame { --frame-c: var(--caution); color: #ffd98a; }
.codec--danger .codec__frame { --frame-c: var(--alert); color: #ffb3b3; --fill: repeating-linear-gradient(0deg, rgba(255, 42, 42, .05) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(40, 0, 4, .96), rgba(16, 0, 2, .96)); }
.codec--success .codec__frame { --frame-c: var(--ph-2); color: var(--ph-2); --fill: repeating-linear-gradient(0deg, rgba(92, 255, 138, .04) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(4, 34, 16, .96), rgba(1, 14, 6, .96)); }
.codec__portrait {
  grid-row: span 2; width: 64px; height: 76px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(127, 232, 255, .18), rgba(0, 0, 0, .6) 70%);
  box-shadow: inset 0 0 0 1px currentColor;
  position: relative;
}
.codec__portrait::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px); }
.codec__portrait .crewmate { width: 54px; height: auto; transform: translateY(6px); }
.codec__portrait .hq-radar { width: 64px; height: 64px; }
.codec__meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.codec__name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codec__freq { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-pixel); line-height: 1; }
.codec__freq small { font-size: 13px; letter-spacing: .1em; opacity: .8; }
.codec__freq b { font-weight: 400; font-size: 28px; letter-spacing: .04em; }
.codec__bars { height: 18px; }
.codec__bars i { width: 3px; animation: codec-bar 520ms ease-in-out infinite alternate; }
.codec__bars i:nth-child(2) { animation-delay: -120ms; }
.codec__bars i:nth-child(3) { animation-delay: -300ms; }
.codec__bars i:nth-child(4) { animation-delay: -60ms; }
.codec__bars i:nth-child(5) { animation-delay: -400ms; }
.codec__bars i:nth-child(6) { animation-delay: -220ms; }
@keyframes codec-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.codec.is-done .codec__bars i { animation-play-state: paused; }
.codec__text { grid-column: 2; min-height: 2.6em; font-family: var(--font-hud); font-size: 16px; line-height: 1.3; color: #e6fbff; text-shadow: 0 0 3px rgba(127, 232, 255, .35); overflow-wrap: anywhere; }
.codec--warn .codec__text { color: #fff1d6; }
.codec--danger .codec__text { color: #ffe3e3; }
.codec--success .codec__text { color: #e8ffee; }
.codec__text .cursor::after { width: .5em; }
.codec__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .55; transform-origin: left; transform: scaleX(0); }
/* Codec compatto sopra l'HUD (schieramento/partita): ritratto 44 px, testo 15 px, massimo 2 righe */
body[data-screen="game"] .codec__frame, body[data-screen="deploy"] .codec__frame { gap: 4px 10px; padding: 6px 10px 8px; }
body[data-screen="game"] .codec__portrait, body[data-screen="deploy"] .codec__portrait { width: 44px; height: 44px; }
body[data-screen="game"] .codec__portrait .hq-radar, body[data-screen="deploy"] .codec__portrait .hq-radar { width: 44px; height: 44px; }
body[data-screen="game"] .codec__portrait .crewmate, body[data-screen="deploy"] .codec__portrait .crewmate { width: 36px; transform: translateY(4px); }
body[data-screen="game"] .codec__freq b, body[data-screen="deploy"] .codec__freq b { font-size: 20px; }
body[data-screen="game"] .codec__name, body[data-screen="deploy"] .codec__name { font-size: 12px; }
body[data-screen="game"] .codec__bars, body[data-screen="deploy"] .codec__bars { height: 12px; }
body[data-screen="game"] .codec__text, body[data-screen="deploy"] .codec__text {
  min-height: 0; font-size: 15px; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* ---------------------------------------------------------------- toast */
.toast {
  --cut: 8px; --bw: 1.5px; --frame-c: var(--ph-2); --fill: rgba(2, 16, 8, .96);
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 460px); min-height: 44px; padding: 9px 14px;
  font-size: 15px; line-height: 1.3; color: var(--ph-2);
  pointer-events: auto; cursor: pointer;
  animation: toast-in 240ms var(--ease-out) both;
}
.toast svg { flex: none; width: 20px; height: 20px; }
.toast__text {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  /* striscia compatta: 2 righe, tocca per leggere tutto */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.toast.is-expanded .toast__text, .toast--sticky .toast__text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.toast--warn { --frame-c: var(--caution); color: var(--caution); --fill: rgba(28, 18, 0, .96); }
.toast--danger { --frame-c: var(--alert); color: #ff8080; --fill: rgba(30, 0, 2, .96); }
.toast--success { --frame-c: var(--ph-1); color: var(--ph-1); }
.toast--info { --frame-c: var(--codec); color: var(--codec); --fill: rgba(0, 18, 24, .96); }
.toast.is-out { animation: toast-out 180ms ease-in both; }
.toast--update { --frame-c: var(--ph-1); --fill: var(--ph-2); color: var(--bg-0); text-shadow: none; font-family: var(--font-display); letter-spacing: .06em; font-size: 14px; }
@keyframes toast-in {
  0% { opacity: 0; transform: translateY(-120%); }
  60% { opacity: 1; transform: translateY(4px); }
  75% { transform: translateY(0) skewX(-4deg); }
  100% { transform: none; }
}
@keyframes toast-out { to { opacity: 0; transform: translateY(-60%) scaleY(.4); } }

/* ---------------------------------------------------------------- omini (ui/avatar.js) */
.crewmate { overflow: visible; }
.crewmate * { transform-box: fill-box; }
.is-anim.crewmate--idle, .is-anim.crewmate--seeker, .is-anim.crewmate--chaser {
  transform-origin: 50% 100%;
  animation: cm-bob 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -370ms);
}
@keyframes cm-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5%) rotate(2deg); }
}
.is-anim.crewmate--ghost { animation: cm-float 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -500ms); }
@keyframes cm-float {
  0%, 100% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-9%); opacity: .7; }
}
.is-anim.crewmate--shh .cm-shh { transform-origin: 30% 100%; animation: cm-shh 1.6s ease-in-out infinite; }
@keyframes cm-shh { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-6deg); } 90% { transform: rotate(4deg); } }
.is-anim.crewmate--dead { animation: cm-wobble 3s ease-in-out infinite; }
@keyframes cm-wobble { 50% { transform: rotate(3deg); } }
.crewmate .cm-wave { opacity: 0; }
.is-anim .cm-wave { animation: cm-wave 1.4s ease-out infinite; }
.is-anim .cm-wave--2 { animation-delay: .25s; }
@keyframes cm-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.is-anim .cm-beacon { animation: pulse-o .9s steps(2) infinite; }
.is-anim .cm-glint { transform-origin: center; animation: cm-glint 2.2s ease-in-out infinite; }
@keyframes cm-glint { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 72% { opacity: 1; transform: scale(1.1) rotate(45deg); } 85% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.is-anim .cm-halo { animation: pulse-o 2s ease-in-out infinite; }
.crewmate.is-off { opacity: .32; }
/* omino "salta" (fine partita, conferme) */
.is-jump { animation: cm-jump .9s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * -150ms); transform-origin: 50% 100%; }
@keyframes cm-jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-28%) scale(.96, 1.05); }
  75% { transform: translateY(0) scale(1.06, .94); }
}

/* ritratto HQ */
.hq-radar .hq-sweep { transform-origin: 50px 50px; transform-box: view-box; animation: spin 2.4s linear infinite; }
.hq-radar .hq-blip { animation: pulse-o 1.2s steps(2) infinite; }
.hq-radar .hq-blip--2 { animation-delay: .6s; }

/* ---------------------------------------------------------------- logo */
.logo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; user-select: none; }
.logo__top {
  font-family: var(--font-display); font-size: clamp(28px, 10.5vw, 44px); line-height: 1; letter-spacing: .09em;
  color: var(--ph-2); text-shadow: var(--ph-glow);
}
.logo__stage { position: relative; margin-top: -2px; }
.logo__main {
  position: relative; z-index: 2; display: block;
  font-family: var(--font-display); font-size: clamp(84px, 33vw, 132px); line-height: .9; letter-spacing: .06em;
  color: var(--ph-1);
  text-shadow: 0 0 10px rgba(57, 255, 20, .6), 0 0 34px rgba(57, 255, 20, .3);
}
/* copie sfalsate per il glitch (clip statiche, si anima solo transform/opacity) */
.logo__main::before, .logo__main::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.logo__main::before { color: var(--alert); clip-path: inset(18% 0 55% 0); text-shadow: none; }
.logo__main::after { color: var(--codec); clip-path: inset(62% 0 8% 0); text-shadow: none; }
.logo.is-intro .logo__top { animation: logo-top-in 700ms steps(1) both; }
.logo.is-intro .logo__main { animation: logo-main-in 900ms steps(1) both; }
.logo.is-intro .logo__main::before { animation: glitch-a 900ms steps(1) both; }
.logo.is-intro .logo__main::after { animation: glitch-b 900ms steps(1) both; }
.logo.is-glitch .logo__main { animation: logo-jolt 380ms steps(1); }
.logo.is-glitch .logo__main::before { animation: glitch-a 380ms steps(1); }
.logo.is-glitch .logo__main::after { animation: glitch-b 380ms steps(1); }
@keyframes logo-top-in {
  0% { opacity: 0; } 10% { opacity: 1; transform: translateX(-6px); } 20% { opacity: .2; } 30% { opacity: 1; transform: none; }
  45% { opacity: .6; } 55%, 100% { opacity: 1; }
}
@keyframes logo-main-in {
  0%, 20% { opacity: 0; } 22% { opacity: 1; transform: translateX(10px) skewX(-8deg); } 30% { opacity: .3; transform: translateX(-8px); }
  38% { opacity: 1; transform: translateX(4px); } 50% { opacity: .7; transform: none; } 58% { opacity: 1; transform: translateX(-3px) skewX(4deg); }
  66%, 100% { opacity: 1; transform: none; }
}
@keyframes logo-jolt { 0% { transform: translateX(-4px); } 30% { transform: translateX(5px) skewX(-6deg); } 60% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes glitch-a { 0% { opacity: .9; transform: translateX(-9px); } 25% { transform: translateX(7px); } 50% { opacity: .8; transform: translateX(-4px); } 75% { opacity: .5; transform: translateX(3px); } 100% { opacity: 0; transform: none; } }
@keyframes glitch-b { 0% { opacity: .9; transform: translateX(8px); } 25% { transform: translateX(-10px); } 50% { opacity: .7; transform: translateX(5px); } 75% { opacity: .4; transform: translateX(-2px); } 100% { opacity: 0; transform: none; } }
.logo__sub {
  margin-top: 12px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .42em; color: var(--ph-2); text-transform: uppercase;
}
.logo__sub::before, .logo__sub::after { content: ''; width: 26px; height: 1px; background: var(--ph-3); }
.logo.is-intro .logo__sub { animation: fade-in 500ms 700ms both; }
/* omino che sbuca da dietro la scritta */
.logo__peek {
  position: absolute; z-index: 1; right: 4%; top: -14%;
  width: 22%; transform-origin: 50% 100%;
  transform: translateY(70%) rotate(8deg); opacity: 0;
  animation: peek 7.5s var(--ease-out) 1.2s infinite;
}
.logo__peek .crewmate { width: 100%; height: auto; }
@keyframes peek {
  0% { transform: translateY(70%) rotate(8deg); opacity: 0; }
  6% { opacity: 1; }
  10% { transform: translateY(0) rotate(14deg); }
  14% { transform: translateY(-4%) rotate(10deg); }
  30% { transform: translateY(0) rotate(14deg); opacity: 1; }
  36% { transform: translateY(80%) rotate(8deg); opacity: 1; }
  38%, 100% { transform: translateY(80%) rotate(8deg); opacity: 0; }
}

/* ---------------------------------------------------------------- radar decorativo (home, splash) */
.deco-radar { position: absolute; left: 50%; top: 42%; width: min(150vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; }
.deco-radar__ring { position: absolute; inset: 0; border: 1px solid rgba(31, 122, 61, .55); border-radius: 50%; }
.deco-radar__ring:nth-child(2) { inset: 16%; }
.deco-radar__ring:nth-child(3) { inset: 32%; border-style: dashed; }
.deco-radar__ring:nth-child(4) { inset: 44%; }
.deco-radar__cross { position: absolute; inset: 0; background: linear-gradient(var(--ph-4), var(--ph-4)) center / 1px 100% no-repeat, linear-gradient(var(--ph-4), var(--ph-4)) center / 100% 1px no-repeat; opacity: .7; }
.deco-radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(57, 255, 20, 0) 0deg, rgba(57, 255, 20, 0) 290deg, rgba(57, 255, 20, .08) 330deg, rgba(57, 255, 20, .32) 359deg, rgba(57, 255, 20, 0) 360deg);
  animation: spin 4s linear infinite;
}
.deco-radar__blip { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--ph-2); box-shadow: var(--ph-glow); opacity: 0; animation: blip 4s linear infinite; }
.deco-radar__blip--red { background: var(--alert); box-shadow: var(--alert-glow); }
@keyframes blip { 0% { opacity: 0; } 2% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } }

/* ==========================================================================
   SCHERMATE CORE
   ========================================================================== */

/* ---------------------------------------------------------------- home */
.home { justify-content: space-between; }
.home__hero { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px 16px 0; }
.home__top { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.home__status { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .2em; color: var(--ph-dim); text-shadow: none; }
.home__actions { position: relative; z-index: 2; padding: 0 20px 8px; }
.home__actions .btn-stack { max-width: 420px; margin: 0 auto; }
.home__foot {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 18px calc(10px + var(--sab)); font-size: 12px; letter-spacing: .12em; color: var(--ph-dim); text-shadow: none;
}
.home__foot a { color: var(--ph-dim); }
.home__resume { max-width: 420px; margin: 0 auto 12px; }

/* ---------------------------------------------------------------- come si gioca */
.howto__deck { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.howto__track { display: flex; height: 100%; transition: transform 320ms var(--ease-out); will-change: transform; }
.howto__slide { flex: 0 0 100%; height: 100%; overflow-y: auto; padding: 4px 16px 16px; }
.howto__card { max-width: 480px; margin: 0 auto; }
.howto__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.howto__head .codec__portrait { flex: none; width: 64px; height: 64px; overflow: visible; }
.howto__head .codec__portrait svg { width: 100%; height: 100%; }
.howto__art { position: relative; height: 200px; display: grid; place-items: center; margin: 4px 0 16px; overflow: hidden; }
.howto__art .crewmate { height: auto; }
.howto__title { font-family: var(--font-display); font-size: 26px; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--ph-glow); margin-bottom: 10px; }
.howto__text { font-size: 17px; line-height: 1.45; min-height: 7.5em; }
.howto__text p + p { margin-top: 8px; }
.howto__text b { color: var(--ph-1); font-weight: 400; }
.howto__text .c-alert, .howto__text .c-gold, .howto__text .c-codec, .howto__text .c-caution { font-weight: 400; }
.btn-row > .howto__prev { flex: 0 0 72px; padding: 0; }
.howto__dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 12px; }
/* unico indicatore di avanzamento (10 slide): trattini che si stringono sugli schermi piccoli */
.howto__dot { flex: 1 1 0; max-width: 34px; height: 6px; background: var(--ph-4); transform: skewX(-30deg); }
.howto__dot.is-on { background: var(--ph-2); box-shadow: var(--ph-glow); }
.howto__dot.is-seen { background: var(--ph-3); }
.art-vs { display: flex; align-items: flex-end; gap: 18px; }
.art-vs__label { font-family: var(--font-display); font-size: 28px; color: var(--ph-dim); align-self: center; }
.art-cap { font-size: 14px; letter-spacing: .12em; text-align: center; margin-top: 4px; }
.art-radar { position: relative; width: 190px; height: 190px; border-radius: 50%; border: 1px solid var(--ph-3); background: radial-gradient(circle, rgba(31, 122, 61, .25), transparent 70%); }
.art-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, rgba(57, 255, 20, .35) 359deg, transparent 360deg); animation: spin 4s linear infinite; }
.art-radar__danger { position: absolute; left: 52%; top: 26%; width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--alert); background: rgba(255, 42, 42, .14); animation: pulse-o 1s ease-in-out infinite; }
.art-radar__me { position: absolute; left: 44%; top: 44%; }
.art-radar__red { position: absolute; left: calc(52% + 39px); top: calc(26% + 39px); width: 12px; height: 12px; border-radius: 50%; background: var(--alert); box-shadow: var(--alert-glow); }
.art-meter { position: absolute; left: 8px; bottom: 10px; width: 16px; height: 140px; display: flex; flex-direction: column-reverse; gap: 3px; }
.art-meter i { flex: 1; background: var(--ph-4); }
.art-meter i.on { background: var(--ph-2); }
.art-meter i.on.w { background: var(--caution); }
.art-meter i.on.d { background: var(--alert); }
.art-bang { position: absolute; right: 12px; top: 6px; font-family: var(--font-display); font-size: 64px; color: var(--alert); text-shadow: var(--alert-glow); animation: bang 1.6s var(--ease-snap) infinite; }
@keyframes bang { 0%, 55% { transform: scale(0); opacity: 0; } 62% { transform: scale(1.3); opacity: 1; } 70%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.art-zone { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 2px dashed var(--gold); background: rgba(255, 200, 61, .08); display: grid; place-items: center; font-family: var(--font-display); font-size: 54px; color: var(--gold); text-shadow: var(--gold-glow); animation: zone-pulse 1.6s ease-in-out infinite; }
@keyframes zone-pulse { 50% { transform: scale(1.06); } }
.art-outcomes { display: flex; gap: 22px; align-items: flex-end; }
.art-outcome { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.art-trophy { width: 64px; height: 64px; }
.art-blips { position: relative; width: 190px; height: 190px; border-radius: 50%; border: 1px solid var(--ph-3); }
.art-blips i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #d9ffe4; box-shadow: 0 0 8px rgba(217, 255, 228, .7); animation: pulse-o 1.8s ease-in-out infinite; }
.art-blips i:nth-child(1) { left: 22%; top: 30%; }
.art-blips i:nth-child(2) { left: 68%; top: 22%; animation-delay: .4s; }
.art-blips i:nth-child(3) { left: 60%; top: 68%; animation-delay: .8s; }
.art-blips i:nth-child(4) { left: 28%; top: 70%; animation-delay: 1.2s; }
.art-blips .crewmate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.art-radio { display: flex; align-items: center; gap: 18px; }
/* v1.1: illustrazioni del briefing (SPEC-1.1 §6) */
.art-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.art-row--sm { gap: 10px; }
.art-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.art-col--sm { gap: 10px; align-items: stretch; }
.art-map { width: 150px; height: 120px; }
.art-map__poly { animation: rpk-march-howto 1.4s linear infinite; }
@keyframes rpk-march-howto { to { stroke-dashoffset: -22; } }
.art-code { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; background: rgba(1, 10, 4, .9); box-shadow: inset 0 0 0 1px var(--ph-3); }
.art-code__lbl { font-size: 11px; letter-spacing: .24em; color: var(--ph-dim); }
.art-code__letters { display: flex; gap: 4px; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ph-1); text-shadow: var(--ph-glow); }
.art-code__qr { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; color: var(--ph-2); }
.art-teams { display: flex; align-items: flex-end; gap: 6px; }
.art-teams .crewmate { width: 46px; height: auto; }
.art-sensors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.art-sensor { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 11px; letter-spacing: .1em; color: var(--ph-1); background: rgba(57, 255, 20, .1); box-shadow: inset 0 0 0 1px var(--ph-2); }
.art-card { position: relative; width: 96px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.art-card--back { background: repeating-linear-gradient(135deg, #062312 0 8px, #03140a 8px 16px); box-shadow: inset 0 0 0 2px var(--ph-3); }
.art-card--front { background: linear-gradient(180deg, #2a0406, #120102); box-shadow: inset 0 0 0 2px var(--alert); }
.art-card__q { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--ph-2); text-shadow: var(--ph-glow); }
.art-card__hold { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ph-4); border-top-color: var(--ph-1); animation: spin 1.2s linear infinite; }
.art-card__cap { font-size: 9px; letter-spacing: .12em; color: var(--ph-2); }
.art-card__role { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; color: #ff5a5a; }
.art-card__shh { font-family: var(--font-display); font-size: 12px; color: #fff; background: var(--alert); padding: 1px 6px; transform: rotate(-6deg); }
.art-card .crewmate { width: 56px; height: auto; }
.art-arrow { font-family: var(--font-display); font-size: 34px; color: var(--ph-2); }
.art-compass { width: 108px; height: 108px; }
.art-compass__arrow { transform-origin: 50px 50px; transform: rotate(38deg); }
.art-dist { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.art-dist b { font-family: var(--font-pixel); font-weight: 400; font-size: 46px; line-height: .85; color: var(--ph-1); text-shadow: var(--ph-glow); }
.art-dist span { font-size: 11px; letter-spacing: .18em; color: var(--ph-2); }
.art-dist__spawn { display: flex; gap: 2px; padding: 6px 10px; border: 2px dashed var(--ph-2); border-radius: 50%; }
.art-dist__spawn .crewmate { width: 26px; height: auto; }
.art-zone--sm { width: 84px; height: 84px; font-size: 40px; }
.art-prox { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; color: var(--gold); }
.art-prox__bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.art-prox__bars i { width: 8px; background: currentColor; transform: skewX(-16deg); }
.art-prox__bars .n1 { height: 30%; } .art-prox__bars .n2 { height: 55%; } .art-prox__bars .n3 { height: 78%; } .art-prox__bars .n4 { height: 100%; }
.art-hearts { display: flex; gap: 3px; padding: 4px 6px; background: rgba(1, 10, 4, .86); }
.art-hearts .off .px-heart rect { fill: rgba(255, 90, 95, .22); }
.art-radar--pincer .art-radar__danger--a { left: 8%; top: 20%; width: 96px; height: 96px; }
.art-radar--pincer .art-radar__danger--b { left: 44%; top: 34%; width: 96px; height: 96px; animation-delay: .5s; }
.art-radar__seeker { position: absolute; left: 40%; top: 38%; }
.art-radar__c { position: absolute; }
.art-radar__c--a { left: 21%; top: 32%; }
.art-radar__c--b { left: 60%; top: 50%; }
.art-radar--pincer .crewmate { width: 28px; height: auto; }
.art-final { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; background: rgba(30, 0, 2, .9); box-shadow: inset 0 0 0 1.5px var(--alert); }
.art-final__lbl { font-size: 11px; letter-spacing: .22em; color: var(--alert); }
.art-final b { font-family: var(--font-pixel); font-weight: 400; font-size: 44px; line-height: .9; color: #ff5050; text-shadow: var(--alert-glow); animation: pulse-s 1.2s ease-in-out infinite; }
.art-shrink { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.art-shrink i { position: absolute; border-radius: 50%; border: 2px dashed var(--gold); }
.art-shrink__big { inset: 0; opacity: .45; }
.art-shrink__small { inset: 30px; box-shadow: 0 0 12px rgba(255, 200, 61, .5); animation: shrink-in 2.4s ease-in-out infinite; }
@keyframes shrink-in { 0% { transform: scale(2); opacity: .2; } 60%, 100% { transform: none; opacity: 1; } }
.art-shrink span { font-family: var(--font-display); font-size: 30px; color: var(--gold); text-shadow: var(--gold-glow); }
.art-ptt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.art-ptt__all { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; color: #1a1000; background: var(--caution); border-radius: 999px; box-shadow: var(--caution-glow); }
.art-ptt__swipe { font-size: 18px; line-height: 1; color: var(--caution); animation: ptt-up 1.2s ease-in-out infinite; }
@keyframes ptt-up { 0% { transform: translateY(6px); opacity: .2; } 60% { opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } }
.art-ptt .art-radio__btn { width: 72px; height: 72px; }
.art-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; color: var(--ph-2); box-shadow: inset 0 0 0 1.5px var(--ph-3); background: rgba(1, 10, 4, .9); }
.art-badge--pause { color: var(--caution); box-shadow: inset 0 0 0 1.5px var(--caution); }
.art-badge--sos { color: #fff; background: rgba(120, 0, 8, .95); box-shadow: inset 0 0 0 1.5px var(--alert), 0 0 12px rgba(255, 42, 42, .45); }
.art-badge--replay { color: var(--codec); box-shadow: inset 0 0 0 1.5px var(--codec); }
.art-radio__btn { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--codec); color: var(--codec); box-shadow: var(--codec-glow); position: relative; }
.art-radio__btn svg { width: 38px; height: 38px; }
.art-radio__btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--codec); opacity: 0; animation: ring-out 1.6s ease-out infinite; }
@keyframes ring-out { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.safety-list { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.safety-list li { display: flex; gap: 10px; }
.safety-list li::before { content: '▸'; color: var(--ph-1); }

/* ---------------------------------------------------------------- crea partita */
.screen.create { padding: 0; }
.create__map { position: relative; flex: 1; min-height: 180px; overflow: hidden; }
.create__map .radar, .create__map .area-fallback { position: absolute; inset: 0; }
.create__overlay-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; padding-top: var(--sat); background: linear-gradient(180deg, rgba(1, 10, 4, .92), rgba(1, 10, 4, 0)); }
.create__locate { position: absolute; z-index: 5; left: 50%; bottom: 96px; transform: translateX(-50%); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.create__locate.is-hidden { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.create__radius { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 10px; }
.create__radius .panel {
  padding: 6px 14px 2px;
  /* fondo opaco: sotto il cursore del raggio non traspaiono mappa né attribuzione */
  --fill:
    linear-gradient(var(--ph-2), var(--ph-2)) top right / 14px 2px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) top right / 2px 14px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--ph-2), var(--ph-2)) bottom left / 2px 14px no-repeat,
    rgba(1, 10, 4, .96);
}
/* attribuzione OSM (la "i" compatta) sopra il pannello dell'area, non dietro */
.create__map .radar { --radar-attrib-bottom: 86px; }
.create__radius .range { gap: 0; }
.create__radius .range__label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; }
.create__sheet {
  position: relative; z-index: 6; flex: none;
  max-height: 50dvh; display: flex; flex-direction: column;
  transition: max-height 280ms var(--ease-out);
}
/* sezioni più vicine e spazio sotto l'ultima (il piede con CREA MISSIONE resta fuori dallo scroll) */
.create__sheet .stack--lg { gap: 18px; }
.create__sheet .sheet__body { padding-bottom: 24px; }
.create__sheet .field__hint:empty { min-height: 0; }
.create__sheet .field { gap: 4px; }
/* con la mappa pronta il raggio si legge sul cerchio ("R 400 M"): niente doppione sullo slider */
.create.has-map-label .create__radius .range__value { display: none; }
.create__sheet.is-expanded { max-height: 86dvh; }
.create__sheet .sheet { position: relative; left: auto; right: auto; bottom: auto; z-index: auto; max-height: none; flex: 1; min-height: 0; animation: none; padding-bottom: 0; }
.create__sheet-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 26px; margin-top: -4px; color: var(--ph-dim); }
.create__sheet-toggle svg { transform: rotate(180deg); transition: transform var(--dur) var(--ease-out); }
.create__sheet.is-expanded .create__sheet-toggle svg { transform: none; }
.create__foot { padding: 10px 0 calc(12px + var(--sab)); }
/* v1.1: forma dell'area (CERCHIO / PERIMETRO) in alto, raggio o ANNULLA / RICOMINCIA in basso (create, lobby) */
.area-ctl .range[hidden], .area-poly[hidden], .area-seg[hidden] { display: none; }
.create__shape { display: flex; justify-content: center; padding: 0 12px 8px; }
.create__shape .area-seg { width: min(100%, 340px); }
/* la targa del picker (R + coordinate / punti e km²) scende sotto l'interruttore */
.create .radar--picker { --rpk-top: calc(var(--sat) + 118px); }
.area-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.area-seg__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ph-2); background: rgba(1, 10, 4, .92); box-shadow: inset 0 0 0 1px var(--ph-3);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer;
}
.area-seg__ico { display: inline-flex; }
.area-seg__btn.is-selected { color: var(--bg-0); background: var(--ph-2); box-shadow: 0 0 12px rgba(57, 255, 20, .35); text-shadow: none; }
.area-seg__btn:active:not(:disabled) { transform: scale(.97); }
.area-seg__btn:disabled { opacity: .4; cursor: default; }
.area-seg__btn:focus-visible { outline: 2px solid var(--codec); outline-offset: 2px; }
.area-seg__pip { width: 8px; height: 8px; margin-left: 2px; flex: none; transform: rotate(45deg); background: var(--caution); box-shadow: 0 0 6px var(--caution); }
.area-seg__pip[data-tone="ok"] { background: var(--ph-1); box-shadow: 0 0 6px var(--ph-1); }
.area-seg__pip[data-tone="bad"] { background: var(--alert); box-shadow: 0 0 6px var(--alert); }
.area-seg__btn.is-selected .area-seg__pip { box-shadow: 0 0 0 1.5px var(--bg-0); }
.area-seg[data-shape="circle"] .area-seg__pip { display: none; }
.create__radius .area-poly { padding: 8px 0; }
.area-poly .btn { min-height: 44px; padding: 0 8px; font-size: 15px; letter-spacing: .04em; gap: 6px; }
@media (max-width: 380px) {
  .area-poly .btn { font-size: 13px; letter-spacing: .02em; gap: 4px; }
  .area-poly .btn .btn__icon svg { width: 18px; height: 18px; }
  .area-seg__btn { font-size: 13px; letter-spacing: .06em; gap: 5px; }
}
/* lobby (host): foglio con la mappa per cambiare l'area */
.area-sheet__map { position: relative; height: min(50dvh, 420px); min-height: 240px; margin: 0 -16px; overflow: hidden; background: var(--bg-0); }
.area-sheet__map .radar, .area-sheet__map .area-fallback { position: absolute; inset: 0; }
.area-sheet .radar--picker { --rpk-top: 10px; --rpk-left: 10px; --radar-attrib-bottom: 8px; }
.area-sheet__why:empty { display: none; }
.area-fallback { display: grid; place-items: center; padding: 16px; background: var(--bg-0); }
.area-fallback .panel { width: min(100%, 420px); }
.coords { font-family: var(--font-pixel); font-size: 22px; line-height: 1.1; color: var(--ph-1); text-shadow: var(--ph-glow); }

/* selettore colore squadra: fila di omini */
.colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.color-pick {
  position: relative; display: grid; place-items: center; height: 64px; padding: 4px 0 0;
  border: 1.5px solid transparent; background: rgba(1, 10, 4, .5);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.color-pick .crewmate { width: 38px; height: auto; }
.color-pick.is-selected { border-color: var(--ph-1); background: rgba(57, 255, 20, .12); box-shadow: inset 0 0 12px rgba(57, 255, 20, .2); }
.color-pick.is-selected .crewmate { animation: cm-bob 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
.color-pick:active:not(:disabled) { transform: scale(.92); }
.color-pick:disabled { cursor: not-allowed; }
.color-pick:disabled .crewmate { opacity: .22; }
.color-pick:disabled::after { content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; background: var(--alert); transform: rotate(-35deg); opacity: .8; }

/* carte modalità */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card { min-height: 150px; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.mode-card__art { height: 58px; display: flex; align-items: flex-end; gap: 2px; }
.mode-card__art .crewmate { width: 42px; height: auto; }
.mode-card__title { font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; }
.mode-card__line { font-size: 13px; line-height: 1.3; color: var(--ph-2); opacity: .85; }

/* ---------------------------------------------------------------- entra */
.join__preview { animation: glitch-in 280ms steps(1) both; }
.join .screen__body { padding-bottom: 40px; }
/* lobby e join: l'ultima scheda sfuma sopra il piede invece di finire tagliata (e si può scorrerla in vista) */
.lobby .screen__body, .join .screen__body {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.lobby .screen__body { padding-bottom: 40px; }
.room-head { display: flex; align-items: center; gap: 10px; }
.room-head__code { font-family: var(--font-display); font-size: 34px; letter-spacing: .14em; color: var(--ph-1); text-shadow: var(--ph-glow); }
.room-head__chip { --frame-c: var(--ph-2); font-family: var(--font-display); font-size: 17px; letter-spacing: .16em; padding: 4px 10px; color: var(--ph-1); }
.room-head .btn--ghost { min-height: 44px; padding: 0 6px; font-size: 13px; letter-spacing: .14em; }
.join__facts { font-size: 14px; line-height: 1.4; color: var(--ph-2); }
.join__facts b { font-family: var(--font-pixel); font-weight: 400; font-size: 19px; color: var(--ph-1); }
.teams-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team-card { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 10px 12px; }
.team-card__crew { display: flex; align-items: flex-end; height: 36px; }
.team-card__crew .crewmate { width: 30px; height: auto; margin-right: -8px; }
.team-card__name { font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card__meta { font-size: 13px; color: var(--ph-dim); text-shadow: none; }
.team-card--new { align-items: center; justify-content: center; text-align: center; color: var(--ph-2); --fill: repeating-linear-gradient(-45deg, rgba(57, 255, 20, .05) 0 8px, rgba(3, 20, 10, .9) 8px 16px); }
.team-card--new svg { width: 30px; height: 30px; }
.team-card[style*='--team'] { --frame-c: color-mix(in srgb, var(--team) 60%, var(--ph-3)); }
.team-card.is-selected { --frame-c: var(--ph-1); }

/* ---------------------------------------------------------------- lobby */
.lobby__hero { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.lobby__code { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 12px 14px; cursor: pointer; }
.lobby__code-letters { display: flex; gap: 4px; }
.lobby__code-letters span {
  flex: 1; display: grid; place-items: center; height: 64px; max-width: 58px;
  font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--ph-1); text-shadow: var(--ph-glow);
  border-bottom: 3px solid var(--ph-2);
}
.lobby__share { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-2); white-space: nowrap; }
.lobby__code .t-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lobby__share svg { width: 16px; height: 16px; }
.qr {
  position: relative; align-self: center; width: 136px; height: 136px; padding: 0; cursor: pointer;
  background: var(--ph-2); box-shadow: var(--ph-glow);
}
/* moduli scuri su fondo chiaro, zona di rispetto di 4 moduli nel SVG: il fosforo sta sulla cornice */
.qr svg { width: 100%; height: 100%; image-rendering: pixelated; shape-rendering: crispEdges; }
.qr::before, .qr::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--ph-2); pointer-events: none; }
.qr::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.qr::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
/* linea di scansione tenue (moltiplica: non schiarisce mai i moduli scuri né abbaglia quelli chiari) */
.qr__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;
  background: linear-gradient(180deg, transparent calc(50% - 1px), var(--ph-1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: .3; mix-blend-mode: multiply;
  animation: qr-scan 2.4s ease-in-out infinite;
}
@keyframes qr-scan { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(50%); } }
.sensor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
/* sensori operativi: una riga di 4 chip (48 px) che si espande al tocco */
.lobby-sensors[data-form="row"] { padding: 4px 10px; }
.lobby-sensors[data-form="row"] > .sensors-row { margin: 0; }
.lobby-sensors[data-form="todo"] { gap: 10px; }
.lobby-sensors[data-form="todo"] .panel__head { margin-bottom: 0; }
.sensors-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; text-align: left; color: var(--ph-2); }
.sensors-row__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sensors-row__chev { display: inline-flex; color: var(--ph-dim); transition: transform var(--dur) var(--ease-out); }
.sensors-row__chev svg { width: 20px; height: 20px; }
.sensors-row[aria-expanded="true"] .sensors-row__chev { transform: rotate(180deg); }
.sensor-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sensor-chip::before { content: ''; width: 8px; height: 8px; flex: none; background: currentColor; transform: rotate(45deg); }
.sensor-chip--ok { color: var(--ph-1); }
.sensor-chip--ok::before { box-shadow: var(--ph-glow-soft); }
.sensor-chip--warn { color: var(--caution); }
.sensor-chip--danger { color: var(--alert); }
.sensor-chip--off { color: var(--ph-dim); }
.lobby-rules.is-shake, .is-shake { animation: shake 300ms var(--ease-out); }
.rules-list .check { padding: 8px 0; }
.sensor { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; }
.sensor svg { width: 20px; height: 20px; flex: none; }
.sensor__val { margin-left: auto; font-family: var(--font-pixel); font-size: 20px; line-height: 1; white-space: nowrap; }
.sensor--ok { color: var(--ph-1); }
.sensor--warn { color: var(--caution); }
.sensor--danger { color: var(--alert); }
.sensor--off { color: var(--ph-dim); }
.team-block { padding: 12px 14px; }
.team-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.team-block__swatch { width: 10px; align-self: stretch; min-height: 28px; background: var(--team, var(--ph-2)); box-shadow: 0 0 10px var(--team, var(--ph-2)); transform: skewX(-12deg); }
.team-block__name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 18px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-block__crew { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 4px; min-height: 52px; }
.team-block__crew .crewmate { width: 40px; height: auto; }
/* agente di un'altra squadra: omino (+ espelli accanto, per l'host), nome sotto */
.crew-chip { position: relative; display: grid; grid-template-columns: auto; justify-items: center; align-items: center; column-gap: 4px; row-gap: 2px; min-width: 64px; max-width: 112px; padding: 2px 4px 4px; }
.crew-chip .crewmate { width: 40px; height: auto; }
.crew-chip__name { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; min-width: 0; font-size: 13px; line-height: 1.15; letter-spacing: .04em; color: var(--ph-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-chip__crown { display: inline-flex; flex: none; color: var(--gold); }
.crew-chip.is-off .crew-chip__name { color: var(--ph-dim); }
/* espelli (host): distintivo "fantasma" da 24 px in alto a destra dell'omino, non un secondo giocatore
   accanto; l'area di tocco resta 44 px (::before trasparente, senza clip-path sul bottone) */
.btn.crew-chip__kick {
  position: absolute; top: -6px; right: -8px; z-index: 1;
  --cut: 5px; --bw: 1.5px;
  width: 24px; height: 24px; min-height: 24px; padding: 0;
  clip-path: none; color: var(--ph-dim); text-shadow: none;
}
.btn.crew-chip__kick::before { inset: -10px; background: transparent; clip-path: none; }
.btn.crew-chip__kick::after { inset: 0; background: var(--ph-3); clip-path: var(--ring); }
.btn.crew-chip__kick:active:not(:disabled) { color: var(--alert); transform: scale(.92); }
.btn.crew-chip__kick:active:not(:disabled)::after { background: var(--alert); }
.crew-chip__kick .btn__icon svg { width: 14px; height: 14px; }
.member { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0; border-top: 1px dashed var(--ph-4); }
.member .crewmate { width: 34px; height: auto; flex: none; }
.member__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.member__name small { font-size: 12px; color: var(--ph-dim); letter-spacing: .14em; margin-left: 6px; }
.member__name small svg { display: inline-block; vertical-align: -2px; color: var(--gold); }
.member__badges { display: flex; gap: 6px; align-items: center; }
.member.is-me .member__name { color: var(--ph-1); }
.readiness { display: flex; align-items: center; gap: 12px; }
.readiness .panel__title { font-size: 15px; }
.readiness__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ph-2); color: var(--bg-0); flex: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.readiness__icon svg { width: 26px; height: 26px; }
.lobby__why { font-size: 13px; text-align: center; color: var(--caution); text-shadow: none; margin-top: 8px; min-height: 1.2em; }
/* piede: CTA (≥ 56 px) + tasto radio (72 px) sulla stessa riga, fuori dal contenuto che scorre */
.lobby__footrow { display: flex; align-items: flex-end; gap: 12px; }
.lobby__footrow > .grow { min-width: 0; }
/* il CTA divide la riga con la radio: testo un po' più compatto perché «AVVIA MISSIONE» resti intero */
.lobby__footrow .btn--lg { font-size: clamp(15px, 4.8vw, 22px); padding: 0 10px; letter-spacing: .06em; }
/* il cursore ▶ resta l'unica icona di AVVIA MISSIONE (niente SVG): più piccolo e vicino al testo */
.lobby__footrow .btn--cta .btn__label::before { margin-right: .4em; font-size: .6em; }
.lobby__footrow .waiting-host { gap: 8px; font-size: 14px; letter-spacing: .1em; }
.lobby__radio { flex: none; }
.lobby__radio:empty { display: none; }
/* RADIO a destra del CTA (il bersaglio TUTTI compare sopra solo durante la pressione, fuori dal flusso) */
.lobby__comms { flex: none; }
.lobby__comms:not(:has(.rdo)) { display: none; }
.settings-summary { font-size: 14px; color: var(--ph-2); line-height: 1.4; text-wrap: balance; }
.lobby .t-label { text-wrap: balance; }
/* v1.1: area di gioco nel pannello dei parametri (tipo e superficie) + tasti Modifica / Area (host) */
.lobby-area { display: flex; align-items: center; gap: 8px; margin-top: -6px; font-size: 14px; line-height: 1.3; color: var(--ph-2); }
.lobby-area__ico { display: inline-flex; flex: none; color: var(--ph-1); filter: drop-shadow(0 0 4px rgba(57, 255, 20, .5)); }
.lobby-settings__btns .btn[hidden], .lobby-settings__btns:not(:has(.btn:not([hidden]))) { display: none; }
/* link testuale (≥ 44 px): "Leggi e accetta le regole ›" per chi aspetta l'host (R3-10) */
.link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px;
  font: inherit; font-size: 14px; letter-spacing: .06em; color: var(--caution);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link:active { transform: scale(.97); }
.link:focus-visible { outline: 2px solid var(--codec); outline-offset: 2px; }
.lobby__rules-link { display: flex; margin: 0 auto; }
.lobby__rules-link[hidden] { display: none; }
.waiting-host { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-2); }

/* ---------------------------------------------------------------- carta ruolo */
.role { background: #000; align-items: center; justify-content: center; }
.role::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(31, 122, 61, .18), transparent 70%); transition: opacity 400ms; pointer-events: none; }
.role.is-chaser.is-revealed::before { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(160, 0, 0, .35), transparent 70%); }
.role.is-seeker.is-revealed::before { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(31, 180, 70, .3), transparent 70%); }
.role__prompt { position: relative; z-index: 2; margin-bottom: 18px; font-size: 15px; letter-spacing: .26em; text-transform: uppercase; text-align: center; padding: 0 20px; text-wrap: balance; }
.role__prompt small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .22em; color: var(--ph-dim); text-shadow: none; }
.role__stage { position: relative; z-index: 2; perspective: 1100px; }
.rolecard {
  position: relative; width: min(78vw, 300px); aspect-ratio: 5 / 7.4; max-height: 60dvh;
  touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  outline: none;
}
.rolecard:focus-visible { outline: 2px solid var(--codec); outline-offset: 8px; }
.rolecard__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 560ms var(--ease-snap);
}
.rolecard.is-pressing .rolecard__inner { transform: scale(.97) rotateX(4deg); transition-duration: 200ms; }
.rolecard.is-revealed .rolecard__inner { transform: rotateY(180deg); }
.rolecard__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  overflow: hidden;
}
.rolecard__back {
  background:
    repeating-linear-gradient(45deg, rgba(57, 255, 20, .06) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(57, 255, 20, .06) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 42%, #0b3d1a, #020f07 70%);
  box-shadow: inset 0 0 0 2px var(--ph-2), inset 0 0 0 8px #020f07, inset 0 0 0 9px var(--ph-3);
}
.rolecard__emblem { width: 58%; aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.rolecard__emblem .deco-radar { position: absolute; inset: 0; width: 100%; transform: none; left: 0; top: 0; }
.rolecard__emblem-crew { position: absolute; inset: 0; display: grid; place-items: center; }
.rolecard__emblem-crew .crewmate { width: 46%; height: auto; }
.rolecard__brand { font-family: var(--font-display); font-size: 22px; letter-spacing: .12em; text-shadow: var(--ph-glow); text-align: center; line-height: 1; }
.rolecard__brand small { display: block; font-size: 13px; letter-spacing: .2em; margin-top: 6px; color: var(--ph-2); text-shadow: none; }
.rolecard__classified { position: absolute; top: 16px; left: 50%; transform: translateX(-50%) rotate(-4deg); padding: 3px 10px; border: 2px solid var(--alert); color: var(--alert); font-family: var(--font-display); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; text-shadow: none; opacity: .85; }
.rolecard__front { transform: rotateY(180deg); padding: 18px 16px; text-align: center; }
.rolecard__front--seeker {
  background: repeating-linear-gradient(0deg, rgba(57, 255, 20, .05) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 38%, #11602a, #03170a 72%);
  box-shadow: inset 0 0 0 2px var(--ph-1), inset 0 0 40px rgba(57, 255, 20, .25);
  color: var(--ph-1);
}
.rolecard__front--chaser {
  background: repeating-linear-gradient(0deg, rgba(255, 42, 42, .06) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 38%, #6a0710, #150003 72%);
  box-shadow: inset 0 0 0 2px var(--alert), inset 0 0 40px rgba(255, 42, 42, .3);
  color: #ff5a5a;
}
.rolecard__art { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.rolecard__art .crewmate { width: 58%; max-height: 100%; height: auto; }
.rolecard__shh {
  position: absolute; right: 2%; top: 4%; transform: rotate(-12deg);
  font-family: var(--font-display); font-size: 40px; color: #fff; text-shadow: 0 0 12px rgba(255, 42, 42, .9), 3px 3px 0 var(--alert);
  opacity: 0;
}
.rolecard.is-revealed .rolecard__shh { animation: shh-in 500ms 450ms var(--ease-snap) both; }
@keyframes shh-in { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.rolecard__role { font-family: var(--font-display); font-size: clamp(26px, 9vw, 34px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.rolecard__front--seeker .rolecard__role { text-shadow: var(--ph-glow); }
.rolecard__front--chaser .rolecard__role { text-shadow: var(--alert-glow); }
.rolecard__team { font-size: 13px; letter-spacing: .34em; text-transform: uppercase; opacity: .85; }
.rolecard__mission { font-size: 15px; line-height: 1.35; color: #eafff0; text-shadow: none; }
.rolecard__front--chaser .rolecard__mission { color: #ffe6e6; }
.holdring { position: absolute; inset: -14px; pointer-events: none; }
.holdring svg { width: 100%; height: 100%; overflow: visible; }
.holdring__track { fill: none; stroke: rgba(92, 255, 138, .12); stroke-width: 3; }
.holdring__bar { fill: none; stroke: var(--ph-1); stroke-width: 4; stroke-linecap: square; filter: drop-shadow(0 0 6px rgba(57, 255, 20, .8)); }
.rolecard.is-revealed + .holdring, .rolecard.is-revealed ~ .holdring { opacity: 0; }
.role__hint { position: relative; z-index: 2; margin-top: 18px; padding: 0 16px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; text-align: center; min-height: 1.3em; }
.role__foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 12px 20px calc(16px + var(--sab)); display: flex; justify-content: center; align-items: center; gap: 14px; }
/* RADIO compatta (56 px, .svc-dock) a destra di «Ho capito», stessa riga: il bottone si stringe */
.role__foot .btn { width: min(100%, 420px); min-width: 0; }
.role.is-seen .role__foot .btn, .role .role__foot .btn { animation: fade-in 300ms both; }

/* ---------------------------------------------------------------- stub schermate di gioco (sovrascritte da game.css) */
.phase-stub { display: grid; place-items: center; gap: 16px; text-align: center; padding: 24px; }

/* ---------------------------------------------------------------- utilità varie */
.spinner { width: 28px; height: 28px; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.spinner i { background: var(--ph-2); animation: spinner 900ms steps(1) infinite; }
.spinner i:nth-child(2) { animation-delay: 100ms; } .spinner i:nth-child(3) { animation-delay: 200ms; }
.spinner i:nth-child(6) { animation-delay: 300ms; } .spinner i:nth-child(9) { animation-delay: 400ms; }
.spinner i:nth-child(8) { animation-delay: 500ms; } .spinner i:nth-child(7) { animation-delay: 600ms; }
.spinner i:nth-child(4) { animation-delay: 700ms; } .spinner i:nth-child(5) { opacity: 0; animation: none; }
@keyframes spinner { 0% { opacity: 1; } 30%, 100% { opacity: .15; } }
.empty { display: grid; place-items: center; gap: 10px; padding: 24px 12px; text-align: center; color: var(--ph-dim); text-shadow: none; font-size: 15px; }
.empty svg { width: 36px; height: 36px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.kv > :first-child { color: var(--ph-dim); text-shadow: none; }
.kv > :last-child { font-family: var(--font-pixel); font-size: 20px; line-height: 1; }
.pulse { animation: pulse-s 1.4s ease-in-out infinite; }
@keyframes pulse-s { 50% { transform: scale(1.05); } }

/* ---------------------------------------------------------------- schermi larghi (tablet/desktop): cornice da "dispositivo" */
@media (min-width: 700px) {
  .screen__body { padding-left: 24px; padding-right: 24px; }
  .howto__art { height: 240px; }
}
@media (max-width: 350px) {
  .btn { font-size: 17px; padding: 0 16px; }
  .lobby__code-letters span { font-size: 38px; height: 54px; }
  .qr { width: 116px; height: 116px; }
  .colors { gap: 4px; }
  .color-pick .crewmate { width: 32px; }
  .howto__title { font-size: 22px; }
}
@media (max-height: 640px) {
  .logo__main { font-size: clamp(64px, 26vw, 100px); }
  .howto__art { height: 150px; }
}

/* ---------------------------------------------------------------- movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 80ms !important;
    scroll-behavior: auto !important;
  }
  .fx__flicker, .deco-radar__sweep, .art-radar__sweep, .hq-radar .hq-sweep, .qr__scan, .logo__peek,
  .blink, .cursor::after, .deco-radar__blip, .codec__bars i, .art-bang,
  .art-map__poly, .art-card__hold, .art-final b, .art-shrink__small, .art-ptt__swipe { animation: none !important; }
  .logo__peek { opacity: 0; }
  .art-bang { opacity: 1; }
  .deco-radar__blip { opacity: .7; }
  .screen--enter-crt, .screen--enter-glitch { animation: fade-in 120ms ease-out both !important; }
  .screen--exit-crt, .screen--exit-glitch { animation: fade-out 100ms ease-in both !important; }
  .codec, .codec.is-closing, .toast, .toast.is-out { animation-name: fade-in !important; }
  .codec.is-closing, .toast.is-out { animation-name: fade-out !important; }
}