/* Palette e stili di interfaccia da _docs/design_handoff_frontline_grafica.
   Tema scuro unico: la pagina non segue la preferenza di sistema. */
:root {
  color-scheme: dark;

  --game-void: #05060c;
  --game-lane-center: #0b0f1c;
  --game-lane-side: #101627;
  --game-lane-line: #1c2740;
  --game-soldier: #4dfd8b;
  --game-soldier-core: #d9ffe8;
  --game-bullet: #aefff0;
  --game-enemy: #ff4d6d;
  --game-enemy-big: #c15cff;
  --game-enemy-fast: #ff2ec4;
  /* Nuovi nemici (_docs/enemies_bg_handoff): brute, swarm, torretta, titan e suo nucleo. */
  --game-enemy-brute: #ff7a45;
  --game-enemy-swarm: #b8ff3c;
  --game-enemy-turret: #5b8cff;
  --game-enemy-titan: #cfd8ee;
  --game-enemy-titan-core: #ff4d6d;
  --game-boss: #ff9a3c;
  --game-boss-empty: #2a1a12;
  --game-box: #ffd23f;
  --game-box-mul: #35d6ff;
  --game-turret: #7dffab;
  --game-turret-dark: #0f6b45;
  --game-grenade: #ffb03c;
  --game-rush: #ff2d55;
  --game-loss: #ff5252;
  --game-powerup: #35d6ff;
  --game-text: #f2f6ff;
  --game-outline: #05060c;
  /* Stage bonus, colori fissi: barra dell'HUD e ventaglio (power-up, cassa arma,
     alone dei colpi), che restano rosa qualunque sia la palette della forma. */
  --game-bonus-3: #ff84b1;
  --game-bonus-edge: #ffd6e8;
  --game-bonus-spark: #fff0f7;
  /* Forma dello stage bonus: una palette per stage (bonusPaletteIndex), in
     ordine di massimo stacco fra stage consecutivi. Fasce 1..4 dal tono scuro del
     bordo alto al chiaro del fondo, edge = filo del neon, spark = nucleo del filo e
     scintille, glow = alone e bagliore interno. Niente verdi (plotone)
     e punte mai vicine al bianco-azzurro dei colpi. */
  /* rosa */
  --game-bonus-p1-1: #d63a78; --game-bonus-p1-2: #ee5c93; --game-bonus-p1-3: #ff84b1; --game-bonus-p1-4: #ffadcb;
  --game-bonus-p1-edge: #ffd6e8; --game-bonus-p1-spark: #fff0f7; --game-bonus-p1-glow: #ff4f9a;
  /* cobalto */
  --game-bonus-p2-1: #2356c9; --game-bonus-p2-2: #3a73e8; --game-bonus-p2-3: #5f95ff; --game-bonus-p2-4: #8fb6ff;
  --game-bonus-p2-edge: #d2e2ff; --game-bonus-p2-spark: #f0f6ff; --game-bonus-p2-glow: #4a86ff;
  /* ambra */
  --game-bonus-p3-1: #c4570e; --game-bonus-p3-2: #e3741e; --game-bonus-p3-3: #ff9540; --game-bonus-p3-4: #ffb877;
  --game-bonus-p3-edge: #ffdfbd; --game-bonus-p3-spark: #fff4e6; --game-bonus-p3-glow: #ff8424;
  /* viola */
  --game-bonus-p4-1: #6b3cd0; --game-bonus-p4-2: #8559ea; --game-bonus-p4-3: #a37cff; --game-bonus-p4-4: #c4a7ff;
  --game-bonus-p4-edge: #e4d7ff; --game-bonus-p4-spark: #f6f1ff; --game-bonus-p4-glow: #9564ff;
  /* turchese */
  --game-bonus-p5-1: #0e8595; --game-bonus-p5-2: #16a3b3; --game-bonus-p5-3: #34c2cf; --game-bonus-p5-4: #6fdde3;
  --game-bonus-p5-edge: #c8f6f7; --game-bonus-p5-spark: #effdfd; --game-bonus-p5-glow: #22c7d6;
  /* cremisi */
  --game-bonus-p6-1: #b81d34; --game-bonus-p6-2: #d8364a; --game-bonus-p6-3: #f55a66; --game-bonus-p6-4: #ff8d93;
  --game-bonus-p6-edge: #ffd1d3; --game-bonus-p6-spark: #fff1f1; --game-bonus-p6-glow: #ff3d4f;
  /* argento */
  --game-bonus-p7-1: #5d6782; --game-bonus-p7-2: #7a85a2; --game-bonus-p7-3: #9aa5c2; --game-bonus-p7-4: #bec7df;
  --game-bonus-p7-edge: #e8edff; --game-bonus-p7-spark: #f7f9ff; --game-bonus-p7-glow: #a9b8ff;
  /* oro */
  --game-bonus-p8-1: #b98a0c; --game-bonus-p8-2: #d6a51c; --game-bonus-p8-3: #f0c238; --game-bonus-p8-4: #ffd873;
  --game-bonus-p8-edge: #fff0bf; --game-bonus-p8-spark: #fffbea; --game-bonus-p8-glow: #ffc21f;

  /* Navi del boss: otto palette da quattro toni (scafo, scafo scuro, luce,
     dettaglio). Nessuna ha il verde del plotone o il giallo delle casse come
     colore dominante. */
  /* rame */
  --game-boss-p1-hull: #c8743a; --game-boss-p1-dark: #5c2e16; --game-boss-p1-glow: #ffb35c; --game-boss-p1-detail: #ffe3bf;
  /* acciaio */
  --game-boss-p2-hull: #5d73a8; --game-boss-p2-dark: #242d4f; --game-boss-p2-glow: #7fd4ff; --game-boss-p2-detail: #dce8ff;
  /* cremisi */
  --game-boss-p3-hull: #a3354a; --game-boss-p3-dark: #461420; --game-boss-p3-glow: #ff6f86; --game-boss-p3-detail: #ffd3db;
  /* ametista */
  --game-boss-p4-hull: #7b4fc0; --game-boss-p4-dark: #311c57; --game-boss-p4-glow: #d692ff; --game-boss-p4-detail: #f1ddff;
  /* grafite e magenta */
  --game-boss-p5-hull: #57536a; --game-boss-p5-dark: #1f1d2a; --game-boss-p5-glow: #ff58d8; --game-boss-p5-detail: #ffcdf3;
  /* ottanio */
  --game-boss-p6-hull: #2e7d88; --game-boss-p6-dark: #0f3439; --game-boss-p6-glow: #62f0ea; --game-boss-p6-detail: #d3fffb;
  /* perla e rosa */
  --game-boss-p7-hull: #b7a6cb; --game-boss-p7-dark: #4d4260; --game-boss-p7-glow: #ff8fb6; --game-boss-p7-detail: #fff0f6;
  /* ossidiana e lava */
  --game-boss-p8-hull: #463841; --game-boss-p8-dark: #171015; --game-boss-p8-glow: #ff5e24; --game-boss-p8-detail: #ffb48f;

  /* Navi del boss del handoff (_docs/bosses_handoff): otto combinazioni da tre
     toni, shell (sagoma), plate (volume interno, sempre scuro) e core (oblò,
     motori, l'unico elemento chiaro), nell'ordine consigliato dal design. */
  /* ambra */
  --game-boss-s1-shell: #ff9a3c; --game-boss-s1-plate: #7a3a12; --game-boss-s1-core: #ffd23f;
  /* cremisi */
  --game-boss-s2-shell: #ff4d6d; --game-boss-s2-plate: #6b1026; --game-boss-s2-core: #ffb03c;
  /* vuoto */
  --game-boss-s3-shell: #c15cff; --game-boss-s3-plate: #3d1a66; --game-boss-s3-core: #35d6ff;
  /* magenta */
  --game-boss-s4-shell: #ff2ec4; --game-boss-s4-plate: #5c0a4a; --game-boss-s4-core: #ffd23f;
  /* glaciale */
  --game-boss-s5-shell: #35d6ff; --game-boss-s5-plate: #0e3a55; --game-boss-s5-core: #f2f6ff;
  /* acido */
  --game-boss-s6-shell: #b8ff3c; --game-boss-s6-plate: #2e4210; --game-boss-s6-core: #ff9a3c;
  /* spettro */
  --game-boss-s7-shell: #f2f6ff; --game-boss-s7-plate: #3a4260; --game-boss-s7-core: #ff4d6d;
  /* ruggine */
  --game-boss-s8-shell: #d9541f; --game-boss-s8-plate: #4a1c0a; --game-boss-s8-core: #ffd23f;

  --color-bg: #05060c;
  --color-surface: #0f1424;
  --color-border: #253150;
  --color-text: #eef2ff;
  --color-muted: #8a97b8;
  --color-accent: #4dfd8b;
  --color-danger: #ff4d6d;

  --radius-sm: 6px;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: fixed;
  inset: 0;
  /* dvh segue la barra degli strumenti mobile: con la sola inset:0 il fondo del
     canvas finisce sotto la barra e i comandi in basso diventano intoccabili. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 60px rgb(0 0 0 / 0.35);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* HUD */

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
}

.hud[hidden] {
  display: none;
}

.hud__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hud__level {
  font: 700 0.75rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--game-text);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
  white-space: nowrap;
}

.hud__progress {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--game-lane-line);
  overflow: hidden;
}

.hud__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 0.2s linear;
}

/* Stage bonus: la barra dice la quota demolita, nel rosa fisso della forma. L'etichetta
   resta nel colore dell'HUD: passa sopra la forma e in rosa non si leggerebbe. */
.hud__progress-fill--bonus {
  background: var(--game-bonus-3);
}

.hud__pause {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  cursor: pointer;
  pointer-events: auto;
}

.hud__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 24px;
}

.hud__score {
  font: 600 0.75rem/1 var(--font-mono);
  color: var(--color-muted);
}

.hud__weapon {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--game-bullet);
  border-radius: var(--radius-sm);
  font: 700 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--game-bullet);
}

.hud__weapon--rush {
  border-color: var(--game-rush);
  color: var(--game-rush);
}

.hud__buffs {
  display: flex;
  gap: 0.375rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.hud__buff {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--game-powerup);
  border-radius: var(--radius-sm);
  font: 600 0.6875rem/1 var(--font-mono);
  color: var(--game-powerup);
}

/* Saldo per le torrette: compare solo dai livelli in cui sono sbloccate.
   I comandi d'acquisto stanno invece sul campo, disegnati sul canvas. */

.hud__row[hidden] {
  display: none;
}

.hud__credits {
  font: 600 0.75rem/1 var(--font-mono);
  color: var(--game-turret);
}

/* Schermate */

.screen__picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.screen__picker[hidden] {
  display: none;
}

.picker__step {
  min-width: 44px;
  height: 44px;
  padding: 0 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: 700 1.125rem/1 var(--font);
  cursor: pointer;
}

.picker__step:disabled {
  opacity: 0.35;
  cursor: default;
}

.picker__value {
  min-width: 6rem;
  font: 600 0.8125rem/1 var(--font-mono);
  color: var(--color-muted);
}

.picker__value b {
  font: 700 1.125rem/1 var(--font);
  color: var(--color-text);
}

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}

.screen[hidden] {
  display: none;
}

.screen__card {
  width: min(100%, 22rem);
  padding: 1.625rem 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: center;
}

.screen__eyebrow {
  margin: 0;
  font: 700 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.screen__eyebrow:empty {
  display: none;
}

.screen__title {
  margin: 0;
  font: 700 1.75rem/1.1 var(--font);
  color: var(--color-text);
}

.screen__text {
  margin: 0;
  font: 400 0.875rem/1.55 var(--font);
  color: var(--color-muted);
}

.screen__text:empty {
  display: none;
}

.screen__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin: 0;
}

.screen__stats:empty {
  display: none;
}

.screen__stats > div {
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--game-lane-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.screen__stats dt {
  font: 600 0.625rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.screen__stats dd {
  margin: 0;
  font: 700 1.625rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.screen__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.375rem;
}

.btn {
  min-height: 48px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-md);
  font: 700 0.9375rem/1 var(--font);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--ghost {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.btn[hidden] {
  display: none;
}

.screen__hint {
  margin: 0;
  font: 400 0.6875rem/1.4 var(--font-mono);
  color: var(--color-muted);
}

.screen__hint:empty {
  display: none;
}

/* ============================================================
   MENU PRINCIPALE A PAGINA INTERA
   Logo animato in alto, schede Gioca | Store sotto. Le altre schermate
   (pausa, fine livello, fine stage) restano la card dentro al riquadro.
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  /* Come .stage: dvh segue la barra degli strumenti mobile, così il fondo del menu
     non finisce sotto la barra del browser. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* html e body bloccano ogni gesto per il gioco; qui serve lo scorrimento verticale,
     e il menu è il proprio contenitore di scorrimento. */
  touch-action: pan-y;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--color-bg);
}

.menu[hidden] {
  display: none;
}

.menu__inner {
  width: min(100%, 64rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* Il palco del logo si dimensiona sulla larghezza reale di questa colonna. */
  container-type: inline-size;
}

.menu__logo {
  display: flex;
  justify-content: center;
  width: 100%;
}

.menu__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.menu__tab {
  /* Tre schede: su un telefono da 390 px 7,5rem ciascuna uscirebbero dalla colonna,
     quindi si stringono sulla sua larghezza (.menu__inner è il contenitore). */
  min-width: min(7.5rem, 29cqw);
  min-height: 44px;
  padding: 0 min(1rem, 2.5cqw);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font: 700 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu__tab[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-bg);
}

.menu__tab:focus-visible,
.menu .btn:focus-visible,
.menu .picker__step:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.menu__panel {
  width: min(100%, 24rem);
  padding: 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: center;
}

.menu__panel[hidden] {
  display: none;
}

/* Le statistiche del menu possono essere tre (livello, record, saldo Store):
   colonne uguali per qualunque numero invece della griglia a due della card. */
.menu__stats {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.menu__version {
  margin: 0;
  font: 400 0.6875rem/1.4 var(--font-mono);
  color: var(--color-muted);
}

/* ============================================================
   STORE
   ============================================================ */

.menu__panel--store {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.store__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.store__balance,
.store__cap {
  margin: 0;
  font: 600 0.6875rem/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.store__balance b {
  margin-left: 0.375rem;
  font: 700 1.625rem/1 var(--font);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.store__note {
  margin: 0;
  font: 400 0.8125rem/1.5 var(--font);
  color: var(--color-muted);
}

/* Titolo della seconda sezione della scheda (le evoluzioni delle unità fisse):
   stacca le due liste senza pesare quanto un titolo di pannello. */
.store__section {
  margin: 0.5rem 0 0;
  font: 600 0.6875rem/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.store__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.store-item .item-icon {
  width: 2.5rem;
  align-self: start;
}

.store-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.store-item__name {
  margin: 0;
  font: 700 0.9375rem/1.2 var(--font);
  color: var(--color-text);
}

.store-item__desc {
  margin: 0;
  font: 400 0.8125rem/1.4 var(--font);
  color: var(--color-muted);
}

.store-item__meta {
  margin: 0;
  font: 600 0.6875rem/1.3 var(--font-mono);
  color: var(--color-accent);
}

.store-item__buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  text-align: center;
}

.store-item__price {
  font: 700 1rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.store-item__btn {
  min-height: 44px;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
}

.store-item__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Bloccato: resta visibile perché si veda cosa arriva, ma spento. */
.store-item--locked .item-icon {
  --item-color: var(--color-muted);
}

.store-item--locked .store-item__name,
.store-item--locked .store-item__price {
  color: var(--color-muted);
}

.store-item--locked .store-item__meta {
  color: var(--color-muted);
}

/* Icone degli articoli: il rombo pixel-art dei power-up (griglia 11x11 come le
   forme di shapes.js) più un glifo per tipo, come maschere SVG colorate dalle
   --game-* del power-up in gioco, quindi seguono il tema. */
.item-icon {
  --item-rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5 0h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM3 2h1v1h-1zM7 2h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM9 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM5 10h1v1h-1z'/%3E%3C/svg%3E");
  display: block;
  aspect-ratio: 1;
  background: var(--item-color, var(--game-powerup));
  -webkit-mask: var(--item-glyph) center / contain no-repeat, var(--item-rombo) center / contain no-repeat;
  mask: var(--item-glyph) center / contain no-repeat, var(--item-rombo) center / contain no-repeat;
}

.item-icon--rapid {
  --item-color: var(--game-powerup);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5 4h1v1h-1zM4 5h3v1h-3zM4 6h1v1h-1zM6 6h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--shield {
  --item-color: var(--game-powerup);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M3 4h5v1h-5zM3 5h5v1h-5zM4 6h3v1h-3zM5 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--boost {
  --item-color: var(--game-powerup);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5 4h1v1h-1zM3 5h5v1h-5zM5 6h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--weapon {
  --item-color: var(--game-bullet);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5 3h1v1h-1zM4 4h3v1h-3zM4 5h3v1h-3zM4 6h3v1h-3zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--ventaglio {
  --item-color: var(--game-bonus-edge);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM4 5h3v1h-3zM4 6h3v1h-3zM5 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--missili {
  --item-color: var(--game-turret);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M4 3h1v1h-1zM6 3h1v1h-1zM3 4h5v1h-5zM4 5h1v1h-1zM6 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--flank {
  --item-color: var(--game-box-mul);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM4 5h3v1h-3zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1z'/%3E%3C/svg%3E");
}

.item-icon--rush {
  --item-color: var(--game-rush);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M6 3h1v1h-1zM5 4h2v1h-2zM4 5h3v1h-3zM4 6h2v1h-2zM4 7h1v1h-1z'/%3E%3C/svg%3E");
}

/* Le due linee di evoluzione: stesso rombo degli articoli, glifo della postazione
   (canne sopra una piazzola per il bunker, granata in volo per il lanciagranate) e
   i colori con cui le due unità sono disegnate sul campo. */
.item-icon--bunker {
  --item-color: var(--game-turret);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M4 3h1v1h-1zM6 3h1v1h-1zM3 4h5v1h-5zM3 5h5v1h-5zM3 6h5v1h-5z'/%3E%3C/svg%3E");
}

.item-icon--grenade {
  --item-color: var(--game-grenade);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M7 2h1v1h-1zM6 3h1v1h-1zM5 4h1v1h-1zM3 5h2v1h-2zM3 6h4v1h-4z'/%3E%3C/svg%3E");
}

.item-icon--emp {
  --item-color: var(--game-box);
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M4 3h3v1h-3zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM3 6h1v1h-1zM7 6h1v1h-1zM4 7h3v1h-3z'/%3E%3C/svg%3E");
}

/* ============================================================
   CHEATS
   ============================================================ */

.cheats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.cheats__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cheats__label {
  font: 600 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cheats__input {
  min-height: 48px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  /* 16px: sotto questa misura i browser dei telefoni ingrandiscono la pagina al fuoco. */
  font: 600 1rem/1 var(--font);
  /* html e body tolgono la selezione per il gioco, e Safari su iOS con la selezione
     ereditata a none non lascia scrivere nei campi. */
  -webkit-user-select: text;
  user-select: text;
}

.cheats__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cheats .btn {
  margin-top: 0.25rem;
}

.cheats__msg {
  margin: 0;
  font: 600 0.875rem/1.4 var(--font);
  color: var(--color-danger);
}

.cheats__msg--ok {
  color: var(--color-accent);
}

.cheats__msg:empty {
  display: none;
}


/* ============================================================
   LOGO ANIMATO — da _docs/titlescreen_handoff (versione C3, ciclo 24 s)
   Solo transform e opacity, nessun JS. Due regole del handoff da non violare:
   ogni elemento porta UNA sola animazione di transform (è l'annidamento a
   comporle) e l'opacity animata va sul figlio, mai sul wrapper.
   Adattamento allo schermo: il handoff riduceva il palco con
   transform: scale(min(1, calc(100vw / 860))), ma una transform non restringe
   l'ingombro nel layout (il palco occupava sempre 820x340 e sforava sul
   telefono) e il rapporto lunghezza/numero dà una lunghezza, non valida per
   scale() nei browser senza aritmetica tipizzata. Qui tutte le misure del palco
   sono in em, con 1em = 100 px del palco di riferimento 820x340, e la scala è il
   font-size: il layout segue la misura reale. L'unità grande tiene il font-size
   sempre sopra la dimensione minima dei caratteri che alcuni browser impongono.
   Nascosto il menu (display:none) le animazioni si fermano.
   ============================================================ */

.ts-stage {
  --ts-scanline: rgb(0 0 0 / 0.45);
  --ts-sweep: rgb(255 255 255 / 0.17);
  /* Larghezza della colonna del menu, ma non oltre il 36% dell'altezza (sul
     desktop basso restano visibili le schede) e fra 0,35x e 1,2x. */
  font-size: clamp(35px, calc((100vw - 2rem) / 8.2), 100px);
  font-size: clamp(35px, min(100cqw / 8.2, 36dvh / 3.4), 120px);
  position: relative;
  flex: none;
  width: 8.2em;
  height: 3.4em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--game-void);
}

/* bande di fondo, le stesse della corsia di gioco */
.ts-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--game-lane-line) 0.03em, transparent 0.03em);
  background-size: 100% 0.46em;
  opacity: 0.8;
}

/* il titolo: cinque livelli annidati, una transform per livello */
.ts-enter { position: relative; animation: tEnter24 24s cubic-bezier(.2, .9, .3, 1) infinite; }
.ts-flick { animation: tFlick 4s steps(1, end) infinite; }
.ts-hit { position: relative; animation: tHit24 24s steps(1, end) infinite; }
.ts-glitch { position: relative; width: 4.8em; animation: tGlMain 5s steps(1, end) infinite; }

.ts-glitch > img { display: block; width: 100%; }
.ts-glitch > img:not(.ts-front) { position: absolute; inset: 0; }
.ts-depth { animation: tSway 6s ease-in-out infinite; }
.ts-front { position: relative; animation: tSwayF 6s ease-in-out infinite; }
.ts-slice-a { opacity: 0; clip-path: inset(0 0 58% 0); animation: tGlA 5s steps(1, end) infinite; }
.ts-slice-b { opacity: 0; clip-path: inset(62% 0 0 0); animation: tGlB 5s steps(1, end) infinite; }

/* colore d'impatto: tre copie colorate che lampeggiano sui colpi */
.ts-col1 { opacity: 0; animation: tCol1 24s steps(1, end) infinite; }
.ts-col2 { opacity: 0; animation: tCol2 24s steps(1, end) infinite; }
.ts-col3 { opacity: 0; animation: tCol3 24s steps(1, end) infinite; }

/* distruzione: tre fasce che ruotano via */
.ts-piece { position: absolute; width: 4.8em; }
.ts-piece > div {
  width: 4.8em;
  opacity: 0;
  animation-duration: 24s;
  animation-timing-function: cubic-bezier(.15, .7, .4, 1);
  animation-iteration-count: infinite;
}
.ts-piece img { display: block; width: 100%; }
.ts-piece-a > div { clip-path: inset(0 0 66% 0); animation-name: tSlA; }
.ts-piece-b > div { clip-path: inset(34% 0 34% 0); animation-name: tSlB; }
.ts-piece-c > div { clip-path: inset(66% 0 0 0); animation-name: tSlC; }

/* anelli d'urto e lampo */
.ts-ring { position: absolute; }
.ts-ring > div { opacity: 0; animation: tBoom 24s steps(5, end) infinite; }
.ts-ring-1, .ts-ring-1 > div { width: 1.2em; height: 1.2em; }
.ts-ring-2, .ts-ring-2 > div { width: 1.9em; height: 1.9em; }
.ts-ring-3, .ts-ring-3 > div { width: 2.7em; height: 2.7em; }
.ts-ring-1 > div { border: 0.1em solid var(--game-text); }
.ts-ring-2 > div { border: 0.08em solid var(--game-box); animation-delay: .16s; }
.ts-ring-3 > div { border: 0.06em solid var(--game-enemy); animation-delay: .34s; }

.ts-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--game-text);
  animation: tFlash 24s steps(1, end) infinite;
}

/* detriti: misura, colore e traiettoria erano stili inline nel handoff */
.ts-deb { position: absolute; }
.ts-deb > div {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation-duration: 24s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ts-deb--a { width: 0.26em; height: 0.26em; }
.ts-deb--b { width: 0.22em; height: 0.22em; }
.ts-deb--c { width: 0.3em; height: 0.3em; }
.ts-deb--d { width: 0.2em; height: 0.2em; }
.ts-deb--e { width: 0.24em; height: 0.24em; }
.ts-deb--f { width: 0.18em; height: 0.18em; }
.ts-deb--g { width: 0.16em; height: 0.16em; }
.ts-deb--h { width: 0.14em; height: 0.14em; }
.ts-deb--i { width: 0.12em; height: 0.12em; }
.ts-deb--j { width: 0.15em; height: 0.15em; }
.ts-deb--k { width: 0.13em; height: 0.13em; }
.ts-deb--l { width: 0.17em; height: 0.17em; }
.ts-deb--a > div { background: var(--game-text); animation-name: dbA; }
.ts-deb--b > div { background: var(--game-box-mul); animation-name: dbB; }
.ts-deb--c > div { background: var(--game-text); animation-name: dbC; }
.ts-deb--d > div { background: var(--game-enemy); animation-name: dbD; }
.ts-deb--e > div { background: var(--game-box-mul); animation-name: dbE; }
.ts-deb--f > div { background: var(--game-enemy); animation-name: dbF; }
.ts-deb--g > div { background: var(--game-box); animation-name: dbG; }
.ts-deb--h > div { background: var(--game-box); animation-name: dbH; }
.ts-deb--i > div { background: var(--game-text); animation-name: dbI; }
.ts-deb--j > div { background: var(--game-box-mul); animation-name: dbJ; }
.ts-deb--k > div { background: var(--game-boss); animation-name: dbK; }
.ts-deb--l > div { background: var(--game-boss); animation-name: dbL; }

/* navi e colpi */
.ts-ship, .ts-bolt { position: absolute; top: 0; left: 0; display: block; }
.ts-ship--l { width: 0.44em; animation: shipL24 24s linear infinite; }
.ts-ship--r { width: 0.38em; animation: shipR24 24s linear infinite; }
.ts-ship--d { width: 0.52em; animation: shipD24 24s ease-in-out infinite; }
.ts-bolt {
  width: 0.09em;
  height: 0.28em;
  opacity: 0;
  animation-duration: 24s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ts-bolt--a { background: var(--game-bullet); animation-name: boltA24; }
.ts-bolt--b { background: var(--game-box); animation-name: boltB24; }
.ts-bolt--c { background: var(--game-bullet); animation-name: boltC24; }

/* tubo catodico, sempre acceso: le righe restano in pixel reali anche col palco
   ridotto, altrimenti sotto il pixel diventerebbero un velo grigio */
.ts-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, var(--ts-scanline) 2px 4px);
}
.ts-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.3em;
  pointer-events: none;
  background: linear-gradient(transparent, var(--ts-sweep), transparent);
  animation: tScan 4s linear infinite;
}

/* rispetta chi ha chiesto meno movimento: titolo statico, niente navi né lampi */
@media (prefers-reduced-motion: reduce) {
  .ts-stage *, .ts-stage { animation: none !important; }
  .ts-flash, .ts-sweep, .ts-piece, .ts-deb, .ts-ring, .ts-ship, .ts-bolt,
  .ts-col1, .ts-col2, .ts-col3, .ts-slice-a, .ts-slice-b { display: none; }
}

/* keyframes del handoff, con le misure convertite in em (px / 100) */
/* ingresso e distruzione del titolo */
@keyframes tEnter24{0%,2%{transform:scale(2.1);opacity:0}6%{transform:scale(.88);opacity:1}8%{transform:scale(1.08)}10%{transform:scale(.97)}12%,89%{transform:scale(1);opacity:1}90%{transform:scale(1.1);opacity:1}91%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}

/* respiro prospettico: faccia ed estrusione in opposizione */
@keyframes tSway{0%,100%{transform:translate(0,0)}25%{transform:translate(-.09em,.04em)}50%{transform:translate(0,.07em)}75%{transform:translate(.09em,.04em)}}
@keyframes tSwayF{0%,100%{transform:translate(0,0)}25%{transform:translate(.03em,-.01em)}50%{transform:translate(0,-.02em)}75%{transform:translate(-.03em,-.01em)}}

/* tubo catodico */
@keyframes tFlick{0%,92%,100%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
@keyframes tScan{0%{transform:translateY(-120%)}100%{transform:translateY(520%)}}

/* interferenza */
@keyframes tGlMain{0%,72%,100%{transform:translate(0,0)}75%{transform:translate(.03em,-.02em)}79%{transform:translate(-.02em,.02em)}83%{transform:translate(0,0)}}
@keyframes tGlA{0%,72%,100%{transform:translate(0,0);opacity:0}73%{transform:translate(-.11em,-.03em);opacity:1}77%{transform:translate(.08em,.02em);opacity:1}81%{transform:translate(-.05em,0);opacity:1}84%{opacity:0}}
@keyframes tGlB{0%,72%,100%{transform:translate(0,0);opacity:0}74%{transform:translate(.1em,.03em);opacity:1}78%{transform:translate(-.07em,-.02em);opacity:1}82%{transform:translate(.04em,0);opacity:1}84%{opacity:0}}

/* navi: due passaggi, il riposizionamento dura 0.01% = istantaneo */
@keyframes shipL24{0%,24%{transform:translate(-1.4em,.18em)}34%{transform:translate(3em,.04em)}44%{transform:translate(9.6em,.3em)}44.01%,72%{transform:translate(-1.4em,.26em)}82%{transform:translate(3.2em,.1em)}92%,100%{transform:translate(9.6em,.34em)}}
@keyframes shipR24{0%,26%{transform:translate(9.6em,.72em)}36%{transform:translate(5.2em,.52em)}46%{transform:translate(-1.4em,.84em)}46.01%,74%{transform:translate(9.6em,.66em)}84%{transform:translate(4.8em,.58em)}94%,100%{transform:translate(-1.4em,.88em)}}
@keyframes shipD24{0%,28%{transform:translate(4em,-1.1em)}38%{transform:translate(4.1em,.3em)}44%{transform:translate(4em,-.14em)}46%,76%{transform:translate(4em,-1.1em)}86%{transform:translate(4.12em,.34em)}91%{transform:translate(4em,-.18em)}96%,100%{transform:translate(4.3em,-1.2em)}}

/* colpi: 3 per passaggio, l'ultimo del secondo passaggio uccide */
@keyframes boltA24{0%,30%{opacity:0;transform:translate(2.5em,.56em)}31%{opacity:1;transform:translate(2.5em,.72em)}34%{opacity:1;transform:translate(2.5em,1.78em)}35%{opacity:0;transform:translate(2.5em,1.78em)}36%,78%{opacity:0;transform:translate(2.5em,.56em)}79%{opacity:1;transform:translate(2.5em,.72em)}82%{opacity:1;transform:translate(2.5em,1.78em)}83%,100%{opacity:0;transform:translate(2.5em,1.78em)}}
@keyframes boltB24{0%,34%{opacity:0;transform:translate(5.66em,.78em)}35%{opacity:1;transform:translate(5.66em,.92em)}38%{opacity:1;transform:translate(5.66em,1.86em)}39%,82%{opacity:0;transform:translate(5.66em,.78em)}83%{opacity:1;transform:translate(5.66em,.92em)}86%{opacity:1;transform:translate(5.66em,1.86em)}87%,100%{opacity:0;transform:translate(5.66em,1.86em)}}
@keyframes boltC24{0%,38%{opacity:0;transform:translate(4.16em,.44em)}39%{opacity:1;transform:translate(4.16em,.6em)}42%{opacity:1;transform:translate(4.16em,1.66em)}43%,86%{opacity:0;transform:translate(4.16em,.44em)}87%{opacity:1;transform:translate(4.16em,.6em)}90%{opacity:1;transform:translate(4.16em,1.66em)}91%,100%{opacity:0;transform:translate(4.16em,1.66em)}}

/* sussulto a ogni colpo incassato */
@keyframes tHit24{0%,34%{transform:translate(0,0)}35%{transform:translate(-.07em,.04em)}37%{transform:translate(.06em,-.03em)}38%{transform:translate(0,0)}39%{transform:translate(.06em,-.03em)}41%{transform:translate(-.05em,.02em)}42%{transform:translate(0,0)}43%{transform:translate(-.06em,.04em)}45%{transform:translate(.04em,-.02em)}46%,82%{transform:translate(0,0)}83%{transform:translate(-.09em,.05em)}85%{transform:translate(.08em,-.04em)}86%{transform:translate(0,0)}87%{transform:translate(.08em,-.05em)}89%{transform:translate(-.07em,.03em)}90%,100%{transform:translate(0,0)}}

/* colore d'impatto: cremisi, ambra, bianco incandescente */
@keyframes tCol1{0%,34.9%{opacity:0}35%{opacity:1}37.9%{opacity:1}38%,82.9%{opacity:0}83%{opacity:1}85.9%{opacity:1}86%,100%{opacity:0}}
@keyframes tCol2{0%,38.9%{opacity:0}39%{opacity:1}41.9%{opacity:1}42%,86.9%{opacity:0}87%{opacity:1}88.9%{opacity:1}89%,100%{opacity:0}}
@keyframes tCol3{0%,42.9%{opacity:0}43%{opacity:1}45.9%{opacity:1}46%,88.9%{opacity:0}89%{opacity:1}90.4%{opacity:1}90.5%,100%{opacity:0}}

/* distruzione a 90% */
@keyframes tSlA{0%,90%{opacity:0;transform:translate(0,0) rotate(0deg)}90.5%{opacity:1;transform:translate(-.26em,-.14em) rotate(-3deg)}98%,100%{opacity:0;transform:translate(-4.6em,-1.5em) rotate(-26deg)}}
@keyframes tSlB{0%,90%{opacity:0;transform:translate(0,0) rotate(0deg)}90.5%{opacity:1;transform:translate(.24em,.06em) rotate(2deg)}98%,100%{opacity:0;transform:translate(5.2em,.7em) rotate(21deg)}}
@keyframes tSlC{0%,90%{opacity:0;transform:translate(0,0) rotate(0deg)}90.5%{opacity:1;transform:translate(-.1em,.22em) rotate(4deg)}98%,100%{opacity:0;transform:translate(-.9em,3.4em) rotate(31deg)}}
@keyframes tBoom{0%,89%{opacity:0;transform:scale(.15)}90%{opacity:1;transform:scale(.5)}93%{opacity:.9;transform:scale(1.1)}97%{opacity:0;transform:scale(1.8)}100%{opacity:0;transform:scale(1.8)}}
@keyframes tFlash{0%,89%{opacity:0}90%{opacity:.95}92%{opacity:.4}95%,100%{opacity:0}}

@keyframes dbA{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(-.4em,-.18em) scale(1)}97%,100%{opacity:0;transform:translate(-3em,-1.4em) scale(.35)}}
@keyframes dbB{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(.42em,-.22em) scale(1)}97%,100%{opacity:0;transform:translate(3.2em,-1.5em) scale(.35)}}
@keyframes dbC{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(-.46em,.2em) scale(1)}98%,100%{opacity:0;transform:translate(-3.4em,1.6em) scale(.3)}}
@keyframes dbD{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(.44em,.24em) scale(1)}98%,100%{opacity:0;transform:translate(3.3em,1.75em) scale(.3)}}
@keyframes dbE{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(0,-.44em) scale(1)}97%,100%{opacity:0;transform:translate(.3em,-2.3em) scale(.4)}}
@keyframes dbF{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(-.08em,.46em) scale(1)}97%,100%{opacity:0;transform:translate(-.5em,2.4em) scale(.4)}}
@keyframes dbG{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(-.64em,-.06em) scale(1)}97%,100%{opacity:0;transform:translate(-4.2em,-.4em) scale(.3)}}
@keyframes dbH{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(.66em,.04em) scale(1)}97%,100%{opacity:0;transform:translate(4.4em,-.3em) scale(.3)}}
@keyframes dbI{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90.5%{opacity:1;transform:translate(-.3em,-.4em) scale(1)}97%,100%{opacity:0;transform:translate(-1.9em,-2.5em) scale(.35)}}
@keyframes dbJ{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90.5%{opacity:1;transform:translate(.34em,-.38em) scale(1)}97%,100%{opacity:0;transform:translate(2.2em,-2.4em) scale(.35)}}
@keyframes dbK{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90.5%{opacity:1;transform:translate(-.36em,.4em) scale(1)}98%,100%{opacity:0;transform:translate(-2.4em,2.7em) scale(.3)}}
@keyframes dbL{0%,89%{opacity:0;transform:translate(0,0) scale(1)}90.5%{opacity:1;transform:translate(.38em,.42em) scale(1)}98%,100%{opacity:0;transform:translate(2.5em,2.85em) scale(.3)}}

/* ============================================================
   INVENTARIO NELL'HUD
   In alto, sotto le righe dell'HUD: il plotone e i comandi delle torrette stanno
   nella parte bassa del campo, dove scorre anche il dito che guida il plotone.
   ============================================================ */

.hud__inv {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hud__inv:empty {
  display: none;
}

.inv-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  cursor: pointer;
  /* L'HUD lascia passare i tocchi al canvas; gli slot no. */
  pointer-events: auto;
}

.inv-slot .item-icon {
  width: 24px;
}

.inv-slot__qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font: 700 0.6875rem/1 var(--font-mono);
  color: var(--color-text);
}

.inv-slot__key {
  position: absolute;
  left: 4px;
  top: 3px;
  font: 600 0.5625rem/1 var(--font-mono);
  color: var(--color-muted);
}

.inv-slot:disabled {
  opacity: 0.4;
  cursor: default;
}