/* Ventesima sessione: temi della HUD (cosmetici, li vede solo chi li sceglie: nessun effetto sulla partita).
   `data-hud` sull'elemento radice. Ogni tema ridefinisce le variabili di style.css (colori, raggi, ombre, font) e aggiunge
   qualche tocco ai pannelli. I temi scuri cambiano anche --surface (fondo di pulsanti, campi, schede) e --cream (al passaggio
   del mouse). Il tema di serie ("War table") è style.css senza `data-hud`. I disegni nascono dal prototipo (prototipi/cosmetici.html). */

/* ---------------------------------------------------------------- NIGHT OPS: notte, vetro blu, filo luminoso */
:root[data-hud="night"] {
  --ink: #9db6ff; --ink-2: #c3d2ff; --paper: #111a3a; --paper-2: #1a2450; --paper-3: #0c1330; --line: rgba(138, 180, 255, 0.22);
  --text: #e3e9ff; --muted: #93a1cf; --faint: #6c7aa8; --gold: #ffd98a; --gold-d: #b98f3a; --red: #6d7cff; --red-d: #3c47b8; --purple: #7f6bff;
  --surface: #17214a; --cream: #232f66; --radius: 16px; --logo-ink: #060b22; --display: "Rajdhani", "Lilita One", sans-serif; --font: "Rubik", sans-serif;
  --hard: 0 0 0 1px rgba(138, 180, 255, 0.25), 0 0 16px rgba(120, 160, 255, 0.28); --soft: 0 14px 30px rgba(0, 0, 14, 0.6);
  --paper-tex: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 30px 30px, linear-gradient(180deg, rgba(138, 180, 255, 0.14), transparent 60px);
}
:root[data-hud="night"] .glass { border-width: 1.5px; border-color: rgba(138, 180, 255, 0.5); }
:root[data-hud="night"] .btn-quick, :root[data-hud="night"] .btn.primary { color: #08102e; }
:root[data-hud="night"] .panel h3 { text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 12px rgba(120, 140, 255, 0.5); border-color: rgba(200, 215, 255, 0.6); }

/* ---------------------------------------------------------------- NEON: synthwave, tubi rosa e ciano */
:root[data-hud="neon"] {
  --ink: #ff5df3; --ink-2: #ff9af7; --paper: #14052e; --paper-2: #220a48; --paper-3: #0b0220; --line: rgba(255, 93, 243, 0.3);
  --text: #f6ecff; --muted: #b69be0; --faint: #7f66ab; --gold: #22f3ff; --gold-d: #0aa9b3; --red: #ff3df2; --red-d: #a10a97; --purple: #8b3fe0; --blue: #22a8ff;
  --surface: #1c0846; --cream: #2c0f66; --radius: 12px; --logo-ink: #ff3df2; --display: "Tilt Neon", "Lilita One", sans-serif; --font: "Rubik", sans-serif;
  --hard: 0 0 6px #ff3df2, 0 0 22px rgba(255, 61, 242, 0.4), inset 0 0 18px rgba(255, 61, 242, 0.18); --soft: 0 0 0 transparent;
  --paper-tex: linear-gradient(180deg, rgba(60, 14, 110, 0.55), rgba(16, 4, 38, 0.4));
}
:root[data-hud="neon"] .glass { border-width: 2px; }
:root[data-hud="neon"] #right .glass, :root[data-hud="neon"] #res.glass { border-color: #22f3ff; box-shadow: 0 0 6px #22f3ff, 0 0 20px rgba(34, 243, 255, 0.38), inset 0 0 16px rgba(34, 243, 255, 0.16); }
:root[data-hud="neon"] .btn-quick, :root[data-hud="neon"] .btn.primary { color: #07001a; }
:root[data-hud="neon"] .logo { color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #ff3df2, 0 0 40px #ff3df2; -webkit-text-stroke-width: 0; }
:root[data-hud="neon"] .panel h3 { text-shadow: 0 0 8px currentColor; }

/* ---------------------------------------------------------------- SAKURA KAWAII: rosa, bordi tratteggiati cuciti, tondissimo */
:root[data-hud="kawaii"] {
  --ink: #d9468f; --ink-2: #e46aa8; --paper: #fffafd; --paper-2: #ffe6f2; --paper-3: #ffd3e8; --line: rgba(217, 70, 143, 0.2);
  --text: #6a3455; --muted: #b0789a; --faint: #cfa0bb; --gold: #ff8cbe; --gold-d: #d9468f; --red: #ff6fa9; --red-d: #d9468f; --purple: #b48cff; --blue: #79c9f5;
  --surface: #ffffff; --cream: #ffe3f1; --radius: 26px; --logo-ink: #d9468f; --display: "Fredoka", "Lilita One", sans-serif; --font: "Nunito", "Rubik", sans-serif;
  --hard: 0 5px 0 #ffc0dd; --soft: 0 12px 24px rgba(217, 70, 143, 0.2);
  --paper-tex: radial-gradient(circle at 16% 18%, rgba(255, 190, 220, 0.5), transparent 40%), radial-gradient(circle at 88% 88%, rgba(190, 220, 255, 0.4), transparent 45%);
}
:root[data-hud="kawaii"] .glass { border-width: 3px; border-color: #ffb3d6; outline: 2px dashed #ffc6e0; outline-offset: -9px; }
:root[data-hud="kawaii"] .btn, :root[data-hud="kawaii"] .seg button { border-radius: 999px; border-color: #ffb3d6; box-shadow: 0 3px 0 #ffb3d6; }
:root[data-hud="kawaii"] .panel h3 { border-radius: 999px; border-color: #d9468f; }
:root[data-hud="kawaii"] .logo { -webkit-text-stroke-width: 6px; }

/* ---------------------------------------------------------------- RETRO 8-BIT: pixel, scalini, colori da console */
:root[data-hud="retro"] {
  --ink: #ffe14d; --ink-2: #fff2a0; --paper: #2a1a5e; --paper-2: #3b2a80; --paper-3: #1b1035; --line: rgba(255, 225, 77, 0.25);
  --text: #ffffff; --muted: #b9a8ff; --faint: #8570d6; --gold: #ff4d8d; --gold-d: #b81f5d; --red: #ff4d8d; --red-d: #b81f5d; --purple: #8b6bff; --blue: #2ec4ff; --green: #3ddc84;
  --surface: #402c92; --cream: #5a40b8; --radius: 0px; --logo-ink: #000; --display: "Press Start 2P", monospace; --font: "Press Start 2P", monospace;
  --hard: 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000; --soft: 8px 8px 0 rgba(0, 0, 0, 0.55);
  --paper-tex: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
:root[data-hud="retro"] body, :root[data-hud="retro"] button, :root[data-hud="retro"] input { font-size: 9px; letter-spacing: -0.02em; }
:root[data-hud="retro"] .glass { border-width: 4px; border-radius: 0; }
:root[data-hud="retro"] .btn, :root[data-hud="retro"] .seg button, :root[data-hud="retro"] .tile, :root[data-hud="retro"] .srv { border-radius: 0; }
:root[data-hud="retro"] .btn-quick, :root[data-hud="retro"] .btn.primary { color: #000; }
:root[data-hud="retro"] .q-title { font-size: 18px; }
:root[data-hud="retro"] .tile small, :root[data-hud="retro"] .srv-main small, :root[data-hud="retro"] .q-sub { font-size: 7px; line-height: 1.5; }
:root[data-hud="retro"] .btn { font-size: 10px; }
:root[data-hud="retro"] .logo { font-size: 42px; }
:root[data-hud="retro"] .me-text b, :root[data-hud="retro"] .stat b { font-size: 12px; }

/* ---------------------------------------------------------------- IMPERIAL: pergamena, ceralacca, doppio filo d'oro */
:root[data-hud="imperial"] {
  --ink: #5a1020; --ink-2: #7d1a30; --paper: #f5e9cb; --paper-2: #ead6ad; --paper-3: #dcc48f; --line: rgba(90, 16, 32, 0.2);
  --text: #3a1a14; --muted: #7d5a4e; --faint: #a58a70; --gold: #d1a233; --gold-d: #8a6212; --red: #8a1c34; --red-d: #560e1e; --purple: #5a3a7a; --blue: #2d5a8a;
  --surface: #fff8e4; --cream: #f7e7b8; --radius: 6px; --logo-ink: #2a0810; --display: "Cinzel", "Lilita One", serif; --font: "Cormorant Garamond", Georgia, serif;
  --hard: 0 0 0 3px #b8891f, 0 5px 0 3px #5a1020; --soft: 0 14px 24px rgba(40, 6, 14, 0.5);
  --paper-tex: radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 20, 0.2) 100%), radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.5), transparent 60%);
}
:root[data-hud="imperial"] .glass { border-style: double; border-width: 5px; border-color: #b8891f; }
:root[data-hud="imperial"] body, :root[data-hud="imperial"] button, :root[data-hud="imperial"] input { font-size: 15px; font-weight: 600; }
:root[data-hud="imperial"] .btn { background: linear-gradient(180deg, #7a1a2c, #55101f); color: #f3dc9c; border-color: #c99a2e; border-radius: 4px; }
:root[data-hud="imperial"] .btn.primary, :root[data-hud="imperial"] .btn-quick { background: linear-gradient(180deg, #f3d77a, #c99a2e); color: #3a0a12; }
:root[data-hud="imperial"] .logo { color: #f0c95a; }

/* ---------------------------------------------------------------- WINDOWS 95: finestre grigie con bordo in rilievo */
:root[data-hud="win95"] {
  --ink: #000000; --ink-2: #404040; --paper: #c0c0c0; --paper-2: #c0c0c0; --paper-3: #a8a8a8; --line: rgba(0, 0, 0, 0.25);
  --text: #000000; --muted: #3a3a3a; --faint: #6e6e6e; --gold: #000080; --gold-d: #000050; --red: #000080; --red-d: #000050; --purple: #800080; --blue: #000080;
  --surface: #ffffff; --cream: #dcdcdc; --radius: 0px; --logo-ink: #000000; --display: Tahoma, Verdana, "Segoe UI", sans-serif; --font: Tahoma, Verdana, "Segoe UI", sans-serif;
  --hard: inset -1px -1px #808080, inset 1px 1px #dfdfdf; --soft: none; --paper-tex: none;
}
:root[data-hud="win95"] .glass { border: 2px solid; border-color: #ffffff #0a0a0a #0a0a0a #ffffff; border-radius: 0; box-shadow: var(--hard); }
:root[data-hud="win95"] .btn, :root[data-hud="win95"] .seg button, :root[data-hud="win95"] .tile, :root[data-hud="win95"] .srv, :root[data-hud="win95"] .abtn {
  border: 2px solid; border-color: #ffffff #0a0a0a #0a0a0a #ffffff; border-radius: 0; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf; background: #c0c0c0; color: #000; }
:root[data-hud="win95"] .btn:active, :root[data-hud="win95"] .seg button.on { border-color: #0a0a0a #ffffff #ffffff #0a0a0a; box-shadow: inset 1px 1px #808080; }
:root[data-hud="win95"] .panel h3 { border-radius: 0; background: linear-gradient(90deg, #000080, #1084d0); border: 0; box-shadow: none; transform: none; margin: -6px -6px 8px; padding: 3px 8px; display: flex; }
:root[data-hud="win95"] .btn-quick { background: #c0c0c0; color: #000; border-radius: 0; }
:root[data-hud="win95"] .logo { -webkit-text-stroke-width: 0; text-shadow: 2px 2px 0 #000; }

/* ---------------------------------------------------------------- FRUTIGER AERO: vetro lucido, cielo, bolle */
:root[data-hud="aero"] {
  --ink: #0a4f8a; --ink-2: #1f7fbf; --paper: rgba(255, 255, 255, 0.72); --paper-2: rgba(226, 244, 255, 0.72); --paper-3: rgba(190, 230, 255, 0.8); --line: rgba(10, 79, 138, 0.18);
  --text: #0d2b45; --muted: #3f6784; --faint: #6d94ad; --gold: #7bd7ff; --gold-d: #2b8fd0; --red: #2b9fe8; --red-d: #17669e; --purple: #7c6bff; --green: #62c72f;
  --surface: rgba(255, 255, 255, 0.85); --cream: rgba(214, 240, 255, 0.95); --radius: 22px; --logo-ink: #0a4f8a; --display: "Segoe UI", "Lilita One", sans-serif; --font: "Segoe UI", "Rubik", sans-serif;
  --hard: 0 3px 8px rgba(0, 80, 150, 0.3), inset 0 1px 0 #fff, inset 0 -8px 18px rgba(120, 200, 255, 0.25); --soft: 0 12px 28px rgba(0, 70, 140, 0.28);
  --paper-tex: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 47%, rgba(220, 244, 255, 0.3) 50%, rgba(255, 255, 255, 0.5) 100%);
}
:root[data-hud="aero"] .glass { border-width: 1.5px; border-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
:root[data-hud="aero"] .btn, :root[data-hud="aero"] .seg button { border-radius: 999px; border-color: #2b8fd0; color: #063a60;
  background: linear-gradient(180deg, #f2fbff 0%, #a9e4ff 48%, #52c1f5 52%, #9fe6ff 100%); box-shadow: 0 2px 6px rgba(0, 80, 160, 0.35), inset 0 1px 0 #fff; }
:root[data-hud="aero"] .btn.primary, :root[data-hud="aero"] .btn-quick { background: linear-gradient(180deg, #f4ffe9 0%, #c6f29a 48%, #78cc3a 52%, #b7ef7e 100%); color: #1b4a0a; }

/* ---------------------------------------------------------------- CYBERPUNK: angoli tagliati, ciano/giallo/rosa */
:root[data-hud="cyber"] {
  --ink: #00f0ff; --ink-2: #7ff6ff; --paper: #0c0e18; --paper-2: #151a2c; --paper-3: #07080f; --line: rgba(0, 240, 255, 0.25);
  --text: #dff7ff; --muted: #7f97ab; --faint: #55708a; --gold: #fcee0a; --gold-d: #a89f00; --red: #ff2a6d; --red-d: #9a0a3c; --purple: #a259ff; --blue: #00b8ff;
  --surface: #131829; --cream: #1e2640; --radius: 0px; --logo-ink: #ff2a6d; --display: "Orbitron", "Rajdhani", sans-serif; --font: "Rajdhani", "Rubik", sans-serif;
  --hard: 0 0 0 1px rgba(255, 42, 109, 0.5), 0 0 14px rgba(0, 240, 255, 0.28); --soft: none;
  --paper-tex: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(252, 238, 10, 0.06), transparent 80px);
}
:root[data-hud="cyber"] .glass { border-width: 1.5px; border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
:root[data-hud="cyber"] .btn, :root[data-hud="cyber"] .seg button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; }
:root[data-hud="cyber"] .btn-quick, :root[data-hud="cyber"] .btn.primary { color: #0b0c12; }
:root[data-hud="cyber"] .panel h3 { border-radius: 0; text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
:root[data-hud="cyber"] .logo { text-shadow: 2px 0 #ff2a6d, -2px 0 #00f0ff; -webkit-text-stroke-width: 0; color: #fcee0a; }

/* ---------------------------------------------------------------- HACKER: terminale verde su nero */
:root[data-hud="hacker"] {
  --ink: #39ff6a; --ink-2: #8dffaa; --paper: #001404; --paper-2: #02220a; --paper-3: #000000; --line: rgba(57, 255, 106, 0.25);
  --text: #b8ffca; --muted: #4fb86a; --faint: #2e7a44; --gold: #39ff6a; --gold-d: #1fbf4a; --red: #1fbf4a; --red-d: #0b6a25; --purple: #1fbf4a; --blue: #1fbf4a; --green: #39ff6a;
  --surface: #021a08; --cream: #06300f; --radius: 0px; --logo-ink: #000; --display: "VT323", monospace; --font: "VT323", monospace;
  --hard: 0 0 12px rgba(57, 255, 106, 0.3), inset 0 0 30px rgba(57, 255, 106, 0.07); --soft: none; --paper-tex: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
}
:root[data-hud="hacker"] body, :root[data-hud="hacker"] button, :root[data-hud="hacker"] input { font-size: 17px; text-shadow: 0 0 5px rgba(57, 255, 106, 0.55); }
:root[data-hud="hacker"] .glass { border-width: 1px; border-radius: 0; }
:root[data-hud="hacker"] .btn, :root[data-hud="hacker"] .seg button, :root[data-hud="hacker"] .tile, :root[data-hud="hacker"] .srv { border-radius: 0; border-style: dashed; }
:root[data-hud="hacker"] .btn-quick, :root[data-hud="hacker"] .btn.primary { color: #001a05; text-shadow: none; }
:root[data-hud="hacker"] .panel h3 { border-radius: 0; text-shadow: none; }
:root[data-hud="hacker"] .panel h3::before { content: "> "; }
:root[data-hud="hacker"] .logo { color: #39ff6a; -webkit-text-stroke-width: 0; text-shadow: 0 0 12px #39ff6a; font-size: 52px; }

/* ---------------------------------------------------------------- COMIC: fumetto, bordi neri spessi, ombre piene */
:root[data-hud="comic"] {
  --ink: #1b1b1b; --ink-2: #333; --paper: #fffdf3; --paper-2: #ffe9a0; --paper-3: #ffd76a; --line: rgba(0, 0, 0, 0.2);
  --text: #1b1b1b; --muted: #555; --faint: #888; --gold: #ffd23f; --gold-d: #b98a00; --red: #ff6fa5; --red-d: #b8336f; --purple: #8b6bff; --blue: #2fa6ff; --green: #33c46b;
  --surface: #ffffff; --cream: #fff3b0; --radius: 20px; --logo-ink: #1b1b1b; --display: "Bangers", "Comic Neue", cursive; --font: "Comic Neue", "Comic Sans MS", cursive;
  --hard: 6px 6px 0 #1b1b1b; --soft: none;
  --paper-tex: radial-gradient(circle, rgba(255, 111, 165, 0.32) 1.6px, transparent 2.2px) 0 0 / 10px 10px;
}
:root[data-hud="comic"] .glass { border-width: 4px; }
:root[data-hud="comic"] body, :root[data-hud="comic"] button, :root[data-hud="comic"] input { font-weight: 700; }
:root[data-hud="comic"] .btn, :root[data-hud="comic"] .seg button { border-width: 3px; border-radius: 999px; box-shadow: 3px 3px 0 #1b1b1b; letter-spacing: 0.04em; font-size: 17px; }
:root[data-hud="comic"] .panel h3 { border-radius: 10px; font-size: 18px; letter-spacing: 0.05em; background: #ffd23f; color: #1b1b1b; text-shadow: none; }
:root[data-hud="comic"] .logo { -webkit-text-stroke-width: 4px; text-shadow: 5px 5px 0 #1b1b1b; }

/* ---------------------------------------------------------------- MILITARY: verde oliva, stencil, righe di pericolo */
:root[data-hud="military"] {
  --ink: #e6dfbe; --ink-2: #f3edd0; --paper: #4a5432; --paper-2: #3c4528; --paper-3: #2b311c; --line: rgba(230, 223, 190, 0.25);
  --text: #f1ecd2; --muted: #c2bb94; --faint: #928c68; --gold: #d4a72c; --gold-d: #8a6a10; --red: #a8402a; --red-d: #6a2416; --purple: #6a5a3a; --blue: #4f7a8a; --green: #6aa04a;
  --surface: #58633c; --cream: #6b7849; --radius: 4px; --logo-ink: #1c2110; --display: "Black Ops One", "Rajdhani", sans-serif; --font: "Rajdhani", "Rubik", sans-serif;
  --hard: 0 0 0 2px #1c2110, 0 5px 0 2px #1c2110; --soft: 0 12px 24px rgba(0, 0, 0, 0.5);
  --paper-tex: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.045) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(212, 167, 44, 0.06), transparent 60px);
}
:root[data-hud="military"] .glass { border-width: 3px; border-color: #1c2110; }
:root[data-hud="military"] body, :root[data-hud="military"] button, :root[data-hud="military"] input { font-weight: 700; letter-spacing: 0.02em; }
:root[data-hud="military"] .btn-quick, :root[data-hud="military"] .btn.primary { color: #1c2110; }
:root[data-hud="military"] .panel h3 { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; background: repeating-linear-gradient(-45deg, #d4a72c 0 8px, #1c2110 8px 16px); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
:root[data-hud="military"] .logo { color: #e6dfbe; }

/* ---------------------------------------------------------------- INFERNO: fucina, ossidiana, magma */
:root[data-hud="inferno"] {
  --ink: #ff8a1f; --ink-2: #ffb35a; --paper: #1a0b08; --paper-2: #2a110b; --paper-3: #0e0504; --line: rgba(255, 138, 31, 0.25);
  --text: #ffe3c8; --muted: #c99373; --faint: #8f5f45; --gold: #ff5a12; --gold-d: #a82e00; --red: #d92b0a; --red-d: #7a1400; --purple: #a2301a; --blue: #c2571a; --green: #c28a1a;
  --surface: #2a140c; --cream: #45200f; --radius: 4px; --logo-ink: #2a0a00; --display: "Cinzel Decorative", "Cinzel", serif; --font: "Rubik", sans-serif;
  --hard: 0 0 18px rgba(255, 80, 0, 0.32), 0 6px 0 rgba(0, 0, 0, 0.6); --soft: none;
  --paper-tex: linear-gradient(180deg, transparent 60%, rgba(255, 70, 0, 0.22) 100%), radial-gradient(ellipse at 15% 0, rgba(255, 140, 40, 0.12), transparent 55%);
}
:root[data-hud="inferno"] .glass { border-width: 2px; border-color: #ff8a1f; border-bottom: 3px solid #ff4a00; }
:root[data-hud="inferno"] .btn-quick, :root[data-hud="inferno"] .btn.primary { color: #fff2dc; }
:root[data-hud="inferno"] .panel h3 { border-radius: 2px; text-transform: uppercase; }
:root[data-hud="inferno"] .logo { background: linear-gradient(0deg, #ff3d00 5%, #ffb300 55%, #fff3b0 95%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke-width: 0; filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.7)); }

/* WarCapitals (1 ottobre 2026): sul telefono il logo, più lungo del vecchio, deve stare nella scheda in ogni tema */
@media (max-width: 760px) {
  :root[data-hud] .logo { font-size: 40px; }
  :root[data-hud="retro"] .logo, :root[data-hud="hacker"] .logo { font-size: 36px; }
}