/* DEFUSE-DECK 3D — ui/styles.css
   Tutta la presentazione dell'HUD vive qui (index.html contiene solo struttura).

   Design: "KIT DA ARTIFICIERE" — equipaggiamento EOD da campo.
   Pannelli scuri caldi con bordi tan da cassa militare, etichette stencil
   (Staatliches), corpo DIN-like (Barlow Semi Condensed), giallo hazard per
   le azioni, verde oliva (tu) vs rosso ruggine (Warden). Niente glow neon:
   colori pieni, bordi netti, strisce diagonali di pericolo. */

:root {
  --c-player:   #a4c46a;   /* verde oliva chiaro */
  --c-player-d: #5f7c38;
  --c-enemy:    #d95b38;   /* rosso ruggine */
  --c-enemy-d:  #8f3520;
  --c-accent:   #e5ae32;   /* giallo hazard */
  --c-info:     #93aabb;   /* azzurro acciaio */
  --c-dim:      #98927f;   /* grigio caldo carta */
  --c-paper:    #d8cfb8;   /* testo principale: carta invecchiata */
  --panel-bg:   rgba(24, 22, 17, 0.88);
  --panel-line: rgba(216, 201, 163, 0.28);
  --font-ui:      'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-display: 'Staatliches', 'Arial Narrow', sans-serif;
  /* Striscia di pericolo giallo/nera riutilizzabile */
  --hazard: repeating-linear-gradient(
    -45deg, var(--c-accent) 0 8px, #151310 8px 16px
  );
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #000; overflow: hidden; font-family: var(--font-ui); }
canvas { display: block; }

button { font-family: var(--font-ui); }

/* ── Flash a schermo (impatto esplosione / vittoria) ─────────────────────── */
#flash {
  position: fixed; inset: 0; pointer-events: none;
  opacity: 0; z-index: 50; background: #fff;
  transition: opacity 0.5s ease-out;
}

/* ── Vignetta di pericolo (sovraccarico alto) ────────────────────────────── */
#danger-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  opacity: 0; transition: opacity 0.8s ease;
  box-shadow: inset 0 0 160px 40px rgba(217, 91, 56, 0.55);
}
#danger-vignette.critical { animation: dangerPulse 1.1s ease-in-out infinite; }
@keyframes dangerPulse {
  0%, 100% { box-shadow: inset 0 0 140px 30px rgba(217, 91, 56, 0.45); }
  50%      { box-shadow: inset 0 0 200px 60px rgba(217, 91, 56, 0.75); }
}

/* ── HUD overlay ─────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; color: var(--c-paper); z-index: 10; }

/* Pannello "cassa militare": bordo tan, angoli quasi vivi, targhetta stencil */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  padding: 12px 16px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.panel-label {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  font-weight: 400;
  padding-bottom: 3px; margin-bottom: 2px;
  border-bottom: 1px dashed var(--panel-line);
}
.meter-value {
  font-size: 24px; letter-spacing: 1px; margin: 3px 0 7px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bar-wrap {
  width: 250px; height: 13px; background: #12100c;
  border: 1px solid var(--panel-line); border-radius: 2px; overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%; width: 0%;
  transition: width 0.45s cubic-bezier(.2, .8, .2, 1);
  position: relative;
}
/* Tacche di misurazione da strumento analogico sopra il riempimento */
.bar-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    90deg, transparent 0 24px, rgba(0, 0, 0, 0.5) 24px 25px
  );
}

/* Pannello GIOCATORE (in alto a sinistra) */
#player-panel { position: absolute; top: 16px; left: 20px; border-left: 3px solid var(--c-player-d); }
#player-panel .panel-label { color: var(--c-player); }
#defuse-value { color: var(--c-player); }
#defuse-bar-fill { background: linear-gradient(180deg, var(--c-player), var(--c-player-d)); }

/* ── Joker attivo (sotto il pannello giocatore) ──────────────────────────── */
#joker-info {
  position: absolute; top: 128px; left: 20px;
  min-width: 200px; max-width: 250px;
  padding: 9px 13px; border: 1px solid var(--panel-line); border-radius: 3px;
  border-left: 3px solid var(--c-accent);
  background: var(--panel-bg);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#joker-info.visible { opacity: 1; transform: translateY(0); }
#joker-info .jk-label { font-size: 10px; letter-spacing: 3px; color: var(--c-dim); text-transform: uppercase; }
#joker-info .jk-name  { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 2px; margin: 2px 0; }
#joker-info .jk-desc  { font-size: 12px; color: var(--c-dim); line-height: 1.4; }

/* ── Tooltip joker (fase di scelta): scheda tecnica che segue il cursore ── */
#joker-tooltip {
  position: fixed; z-index: 70; pointer-events: none;
  max-width: 240px;
  padding: 9px 13px; border: 1px solid var(--panel-line); border-radius: 3px;
  border-left: 3px solid var(--c-accent);
  background: var(--panel-bg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
#joker-tooltip.visible { opacity: 1; transform: translateY(0); }
#joker-tooltip .jt-label {
  font-size: 9px; letter-spacing: 3px; color: var(--c-dim); text-transform: uppercase;
}
#joker-tooltip .jt-name {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 2px; margin: 2px 0;
}
#joker-tooltip .jt-desc { font-size: 12px; color: var(--c-paper); line-height: 1.4; }
#joker-tooltip .jt-hint {
  margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--panel-line);
  font-size: 10px; letter-spacing: 1.5px; color: var(--c-dim); text-transform: uppercase;
}

/* Pannello WARDEN (in alto a destra) */
#warden-panel {
  position: absolute; top: 16px; right: 20px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  border-left: none; border-right: 3px solid var(--c-enemy-d);
}
#warden-panel .panel-label { color: var(--c-enemy); }
#overcharge-value { color: var(--c-enemy); }
#overcharge-bar-fill { background: linear-gradient(180deg, var(--c-enemy), var(--c-enemy-d)); }

#threat-value {
  margin-top: 7px; font-size: 12px; letter-spacing: 2px; color: var(--c-dim);
  transition: color 0.4s;
  font-variant-numeric: tabular-nums;
}
#threat-value.threat-hot { color: var(--c-enemy); font-weight: 700; }

#enemy-readout {
  margin-top: 10px; min-height: 58px; min-width: 190px;
  padding: 9px 12px; border: 1px solid rgba(217, 91, 56, 0.35); border-radius: 3px;
  background: rgba(38, 20, 14, 0.72); font-size: 13px; line-height: 1.5;
  text-align: right; opacity: 0.95;
}
#enemy-readout:empty { opacity: 0; border-color: transparent; background: transparent; }
#enemy-readout .er-label  { color: var(--c-enemy); font-size: 10px; letter-spacing: 2px; }
#enemy-readout .er-combo  { font-family: var(--font-display); font-weight: 400; letter-spacing: 2px; font-size: 15px; }
#enemy-readout .er-damage { color: var(--c-enemy); font-weight: 700; }

/* ── Indicatore di turno (centro alto): targa stencil su piastra ─────────── */
#turn-indicator {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 6px; font-weight: 400;
  color: var(--c-player);
  padding: 4px 22px 2px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line); border-radius: 3px;
  border-top: 3px solid currentColor;
}
#turn-indicator.banner-pulse { animation: bannerPulse 0.6s cubic-bezier(.2, .9, .3, 1); }
@keyframes bannerPulse {
  0%   { transform: translateX(-50%) scale(1.45); opacity: 0; }
  100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}

#status-label {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  font-size: 13px; letter-spacing: 1.5px; color: var(--c-dim); white-space: nowrap;
}

#top-buttons {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}

/* ── Zona azione (in basso al centro) ────────────────────────────────────── */
#bottom-center {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
#combo-name {
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 5px; color: var(--c-dim);
  min-height: 30px; font-weight: 400;
}
#selected-info { font-size: 14px; letter-spacing: 1px; color: var(--c-dim); min-height: 18px; }
#selected-info .chips { color: var(--c-info); font-weight: 600; }
#selected-info .mult  { color: var(--c-enemy); font-weight: 600; }

#meta-row {
  display: flex; gap: 20px; font-size: 12px; letter-spacing: 1.5px; color: var(--c-dim);
  font-variant-numeric: tabular-nums;
}
#discards-left { color: var(--c-info); }
#hints-left    { color: var(--c-accent); }
#deck-count    { color: var(--c-dim); }

#action-row { display: flex; gap: 12px; margin-top: 4px; }

/* ── Pulsanti: interruttori da centralina, riempimento pieno all'hover ───── */
.btn {
  pointer-events: all; padding: 11px 26px; background: var(--panel-bg);
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn.small { padding: 7px 16px; font-size: 11px; }

#btn-play {
  border: 1px solid var(--c-accent); color: #171410; font-weight: 700;
  background: var(--c-accent);
  position: relative;
}
/* Striscia hazard sul bordo superiore del pulsante principale */
#btn-play::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px;
  background: var(--hazard);
}
#btn-play:hover:not(:disabled) { background: #f3c14f; }
#btn-play:disabled { background: var(--panel-bg); }
#btn-discard { border: 1px solid var(--c-info); color: var(--c-info); }
#btn-discard:hover:not(:disabled) { background: var(--c-info); color: #171410; }
#btn-sort { border: 1px solid #6a6455; color: var(--c-dim); }
#btn-sort:hover:not(:disabled) { background: #6a6455; color: #171410; }
#btn-hint { border: 1px solid var(--c-accent); color: var(--c-accent); }
#btn-hint:hover:not(:disabled) { background: var(--c-accent); color: #171410; }
#btn-view, #btn-mute { border: 1px solid var(--c-info); color: var(--c-info); }
#btn-view:hover, #btn-mute:hover { background: var(--c-info); color: #171410; }
.btn:disabled { border-color: #3a362d; color: #55503f; cursor: default; box-shadow: none; background: transparent; }

/* ── Legenda combo (in basso a sinistra): tabella da manuale ─────────────── */
#combo-legend {
  position: absolute; bottom: 16px; left: 20px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; letter-spacing: 1px; color: var(--c-dim); line-height: 1.4;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line); border-radius: 3px;
  padding: 8px 10px;
}
#combo-legend .title {
  font-family: var(--font-display);
  color: var(--c-paper); font-size: 11px; letter-spacing: 3px;
  margin-bottom: 5px; text-transform: uppercase;
  border-bottom: 1px dashed var(--panel-line); padding-bottom: 4px;
}
#combo-legend .row {
  display: flex; gap: 8px; justify-content: space-between; min-width: 180px;
  padding: 1px 6px; border-radius: 2px; border: 1px solid transparent;
  transition: background 0.2s, color 0.2s;
  font-variant-numeric: tabular-nums;
}
#combo-legend .mult { color: var(--c-accent); }
#combo-legend .row.active {
  background: var(--c-accent);
  color: #171410; font-weight: 700;
}
#combo-legend .row.active .mult { color: #171410; }

#phase-label {
  position: absolute; bottom: 14px; right: 20px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 3px; color: #5a5545; text-transform: uppercase;
}

/* ── Reveal del punteggio (stile Balatro) ────────────────────────────────── */
#score-reveal {
  position: fixed; top: 30%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 55; pointer-events: none; text-align: center;
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.2, .9, .3, 1.4);
}
#score-reveal.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#score-reveal .sr-combo {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 400; letter-spacing: 8px; margin-bottom: 6px;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7);
}
#score-reveal .sr-math {
  display: flex; gap: 12px; justify-content: center; align-items: baseline;
  font-size: 26px; font-weight: 700; letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}
#score-reveal .sr-chips { color: var(--c-info); }
#score-reveal .sr-mult  { color: var(--c-enemy); }
#score-reveal .sr-x, #score-reveal .sr-eq { color: var(--c-dim); font-size: 20px; }
#score-reveal .sr-total { font-size: 34px; min-width: 150px; text-align: left; }
#score-reveal .sr-jokers {
  margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 2px;
}
#score-reveal .sr-total.slam { animation: totalSlam 0.4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes totalSlam {
  0%   { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Numerini "+X" che salgono dalle barre ───────────────────────────────── */
.gain-fx {
  position: fixed; transform: translate(-50%, 0);
  font-family: var(--font-ui); font-size: 22px; font-weight: 700;
  pointer-events: none; z-index: 60;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
  animation: floatUp 1.1s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* ── Overlay di fine partita ─────────────────────────────────────────────── */
#end-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(16, 14, 10, 0.85), rgba(0, 0, 0, 0.95));
  opacity: 0; pointer-events: none; transition: opacity 0.7s ease;
}
#end-overlay.visible { opacity: 1; pointer-events: all; }

.end-card {
  width: min(480px, 92vw); border-radius: 3px; text-align: center;
  padding: 34px 38px; background: #171410;
  border: 1px solid var(--panel-line);
  box-shadow: 0 0 60px #000;
  transform: translateY(14px); transition: transform 0.7s cubic-bezier(.2, .9, .3, 1);
}
#end-overlay.visible .end-card { transform: translateY(0); }

.end-card h1 {
  font-family: var(--font-display);
  font-size: 34px; letter-spacing: 6px; margin-bottom: 8px; font-weight: 400;
}
.end-card.won  h1 { color: var(--c-player); }
.end-card.lost h1 { color: var(--c-enemy); }
.end-card .end-sub { font-size: 13px; color: var(--c-dim); margin-bottom: 22px; }

.end-stats {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px;
  text-align: left;
}
.end-stats .stat {
  display: flex; justify-content: space-between;
  font-size: 13px; letter-spacing: 1px;
  padding: 7px 12px; border-radius: 2px; background: rgba(216, 201, 163, 0.06);
  border-left: 2px solid var(--panel-line);
  font-variant-numeric: tabular-nums;
}
.end-stats .stat-label { color: var(--c-dim); }
.end-stats .stat-value { color: var(--c-paper); font-weight: 700; }

#btn-restart { border: 1px solid var(--c-player); color: var(--c-player); }
#btn-restart:hover { background: var(--c-player); color: #171410; }

/* ── Overlay tutorial: scheda operativa da manuale EOD ───────────────────── */
#tutorial {
  position: fixed; inset: 0; z-index: 100; pointer-events: all;
  background: radial-gradient(circle at 50% 35%, rgba(24, 21, 15, 0.94), rgba(0, 0, 0, 0.97));
  display: flex; align-items: center; justify-content: center;
  color: var(--c-paper);
}
#tutorial.hidden { display: none; }

#tutorial .card {
  width: min(580px, 92vw); border: 1px solid var(--panel-line); border-radius: 3px;
  background: #171410; padding: 30px 34px;
  box-shadow: 0 0 50px #000;
  position: relative;
}
/* Striscia hazard in testa alla scheda */
#tutorial .card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--hazard);
}
/* Selettore lingua in alto a destra della scheda tutorial */
#lang-row { position: absolute; top: 14px; right: 16px; }
.lang-btn {
  padding: 5px 12px; background: transparent; cursor: pointer;
  border: 1px solid #55503f; border-radius: 2px; color: var(--c-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-btn:hover { border-color: var(--c-accent); color: var(--c-paper); }
#tutorial h1 {
  font-family: var(--font-display);
  font-size: 38px; letter-spacing: 7px; color: var(--c-accent); font-weight: 400;
  text-align: center; margin-top: 6px;
}
#tutorial .sub {
  text-align: center; font-size: 12px; letter-spacing: 3px; color: var(--c-enemy);
  margin: 4px 0 20px; text-transform: uppercase; font-weight: 600;
}
#tutorial ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
#tutorial li { display: flex; gap: 12px; }
#tutorial li .ic { font-size: 17px; min-width: 24px; text-align: center; }
#tutorial b { color: var(--c-player); }
#tutorial .warn b { color: var(--c-enemy); }
#tutorial .accent { color: var(--c-accent); font-weight: 600; }
#tutorial .keys {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--panel-line);
  font-size: 11px; letter-spacing: 1px; color: var(--c-dim); text-align: center; line-height: 1.7;
}
#difficulty-row {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--panel-line);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
#difficulty-row .diff-label {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 3px; color: var(--c-dim); text-transform: uppercase;
}
.diff-buttons { display: flex; gap: 8px; }
.diff-btn {
  padding: 7px 16px; background: transparent; cursor: pointer;
  border: 1px solid #55503f; border-radius: 2px; color: var(--c-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.diff-btn:hover { border-color: var(--c-dim); color: var(--c-paper); }
.diff-btn.active {
  border-color: var(--c-accent); color: #171410;
  background: var(--c-accent); font-weight: 700;
}

#tutorial kbd {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  border: 1px solid #55503f; border-bottom-width: 2px;
  background: #221f18; color: var(--c-paper);
  font-family: var(--font-ui); font-size: 11px;
}
#btn-start {
  display: block; margin: 22px auto 0; pointer-events: all;
  padding: 13px 44px; background: var(--c-accent); border: 1px solid var(--c-accent);
  color: #171410; font-size: 15px; font-weight: 700; border-radius: 2px;
  letter-spacing: 4px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  transition: background 0.15s, transform 0.1s;
}
#btn-start:hover { background: #f3c14f; }
#btn-start:active { transform: translateY(2px); box-shadow: none; }