/* ══════════════════════════════════════════════════════════════════
   ASTRO TETRIS — style.css
   Palette: arancio #ff6b1a  |  cyan #1ab8ff  |  bianco #f5f0e8
   ══════════════════════════════════════════════════════════════════ */

/* ── VARIABILI GLOBALI ─────────────────────────────────────────── */
:root {
  --arancio   : #ff6b1a;
  --cyan      : #1ab8ff;
  --bianco    : #f5f0e8;
  --nero      : #000000;

  --pannello  : rgba(0, 0, 0, 0.72);
  --bordo-a   : rgba(255, 107, 26, 0.5);
  --bordo-c   : rgba(26, 184, 255, 0.4);
  --glow-a    : rgba(255, 107, 26, 0.7);
  --glow-c    : rgba(26, 184, 255, 0.7);

  /* Sfondo animato — modificate via JS */
  --bg-c1     : #000000;
  --bg-c2     : #0a0515;
  --bg-c3     : #1ab8ff;
  --bg-c4     : #ff6b1a;
  --bg-angle  : 135deg;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

/* ══════════════════════════════════════════════════════════════════
   BODY — sfondo gradiente animato
   ══════════════════════════════════════════════════════════════════ */
body {
  height      : 100vh;
  width       : 100vw;
  overflow    : hidden;
  color       : var(--bianco);
  font-family : 'Share Tech Mono', monospace;

  background  : linear-gradient(
    var(--bg-angle),
    var(--bg-c1),
    var(--bg-c2),
    var(--bg-c3),
    var(--bg-c4),
    var(--bg-c1)
  );
  background-size : 400% 400%;
  animation   : bgMove 3.5s ease infinite;
}

@keyframes bgMove {
  0%   { background-position: 0%   50%; }
  33%  { background-position: 100% 0%;  }
  66%  { background-position: 50%  100%;}
  100% { background-position: 0%   50%; }
}

/* ── GRAIN / NOISE ─────────────────────────────────────────────── */
body::before {
  content    : "";
  position   : fixed;
  inset      : 0;
  z-index    : 1;
  background : url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  opacity    : 0.25;
  pointer-events : none;
  animation  : noise 0.25s infinite;
}

@keyframes noise {
  0%   { transform: translate(0,   0)   scale(1.01); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(2px, -2px) scale(0.99); }
  60%  { transform: translate(-1px,-1px); }
  80%  { transform: translate(1px,  2px) scale(1.01); }
  100% { transform: translate(0,   0); }
}

/* ── SCANLINES ─────────────────────────────────────────────────── */
body::after {
  content    : "";
  position   : fixed;
  inset      : 0;
  z-index    : 2;
  background : repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 2px,
    transparent      2px,
    transparent      4px
  );
  pointer-events : none;
  transition : opacity 0.3s;
}

/* ── OVERLAY INTENSITÀ SFONDO ──────────────────────────────────── */
#overlayIntensita {
  position       : fixed;
  inset          : 0;
  z-index        : 3;
  background     : #000;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 0.3s;
}

/* ── FLICKER OVERLAY (level-up / drop) ─────────────────────────── */
#flickerOverlay {
  position       : fixed;
  inset          : 0;
  z-index        : 25;
  background     : transparent;
  opacity        : 0;
  pointer-events : none;
  mix-blend-mode : screen;
}

/* ══════════════════════════════════════════════════════════════════
   EFFETTO GLITCH — testo
   ══════════════════════════════════════════════════════════════════ */
.glitch-text {
  position : relative;
}
.glitch-text::before,
.glitch-text::after {
  content        : attr(data-text);
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  overflow       : hidden;
  pointer-events : none;
}
.glitch-text::before {
  animation  : glitch-clip-a 4s infinite;
  color      : #ff006e;
  left       : 3px;
  opacity    : 0.85;
}
.glitch-text::after {
  animation  : glitch-clip-b 4s infinite;
  color      : #1ab8ff;
  left       : -3px;
  opacity    : 0.85;
}

@keyframes glitch-clip-a {
  0%,92%,100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  5%  { clip-path: inset(15% 0 65% 0); transform: translate(-4px,0) skewX(-4deg); }
  8%  { clip-path: inset(55% 0 20% 0); transform: translate( 4px,0) skewX( 2deg); }
  11% { clip-path: inset(35% 0 45% 0); transform: translate(-2px,0); }
  14% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  41% { clip-path: inset(5%  0 80% 0); transform: translate( 5px,0) skewX(3deg); }
  42% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  71% { clip-path: inset(45% 0 30% 0); transform: translate(-3px,0) skewX(-2deg); }
  73% { clip-path: inset(70% 0 10% 0); transform: translate( 3px,0); }
  75% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
}

@keyframes glitch-clip-b {
  0%,90%,100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  6%  { clip-path: inset(60% 0 15% 0); transform: translate( 5px,0) skewX( 3deg); }
  9%  { clip-path: inset(25% 0 55% 0); transform: translate(-4px,0); }
  12% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  44% { clip-path: inset(75% 0 5%  0); transform: translate(-5px,0) skewX(-4deg); }
  45% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  74% { clip-path: inset(20% 0 65% 0); transform: translate( 4px,0) skewX( 2deg); }
  76% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
}

/* ── GLITCH BANNER BURST ───────────────────────────────────────── */
@keyframes superGlitch {
  0%   { transform: translate(0) skewX(0); filter: none; }
  8%   { transform: translate(-6px,2px) skewX(-4deg); filter: hue-rotate(90deg)  brightness(1.6); }
  16%  { transform: translate( 6px,-2px) skewX(3deg);  filter: hue-rotate(-45deg) saturate(2); }
  24%  { transform: translate(-4px,0)   skewX(-2deg); filter: brightness(2.2)   saturate(3); }
  32%  { transform: translate(0) skewX(0); filter: none; }
  40%  { transform: translate(3px,1px);  filter: hue-rotate(180deg) brightness(1.3); }
  48%  { transform: translate(-2px,0) skewX(1deg); filter: none; }
  56%  { transform: translate(0) skewX(0); filter: brightness(1.5); }
  64%  { transform: translate(-5px,-1px) skewX(-3deg); filter: hue-rotate(270deg); }
  72%  { transform: translate(4px,0); filter: none; }
  80%,100% { transform: translate(0) skewX(0); filter: none; }
}
.banner-glitch {
  animation: superGlitch 0.55s ease forwards !important;
}

/* ── GLITCH GRANDE (intro ASTRO) ───────────────────────────────── */
.glitch-big {
  position  : relative;
  animation : glitch-big-idle 6s infinite;
}
.glitch-big::before,
.glitch-big::after {
  content        : attr(data-text);
  position       : absolute;
  top            : 0; left : 0; right : 0;
  pointer-events : none;
}
.glitch-big::before {
  animation : glitch-big-a 5s infinite;
  color     : #ff006e;
  left      : 6px;
  opacity   : 0.7;
}
.glitch-big::after {
  animation : glitch-big-b 5s infinite;
  color     : #00f5ff;
  left      : -6px;
  opacity   : 0.7;
}

@keyframes glitch-big-idle {
  0%,95%,100% { transform: translate(0) skewX(0); }
  96% { transform: translate(-4px,0) skewX(-2deg); }
  97% { transform: translate( 4px,0) skewX( 2deg); }
  98% { transform: translate(0); }
}
@keyframes glitch-big-a {
  0%,88%,100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  3%  { clip-path: inset(20% 0 60% 0); transform: translate(-8px,0) skewX(-5deg); }
  6%  { clip-path: inset(65% 0 15% 0); transform: translate( 8px,0); }
  9%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  51% { clip-path: inset(10% 0 75% 0); transform: translate(10px,0) skewX(6deg); }
  52% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  90% { clip-path: inset(40% 0 40% 0); transform: translate(-6px,0); }
  92% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
}
@keyframes glitch-big-b {
  0%,86%,100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  4%  { clip-path: inset(55% 0 25% 0); transform: translate( 9px,0) skewX(4deg); }
  7%  { clip-path: inset(25% 0 55% 0); transform: translate(-8px,0); }
  10% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  52% { clip-path: inset(80% 0 5%  0); transform: translate(-10px,0) skewX(-5deg); }
  53% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  91% { clip-path: inset(15% 0 70% 0); transform: translate( 7px,0) skewX(3deg); }
  93% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
}

/* ══════════════════════════════════════════════════════════════════
   SPLASH / LOADER
   ══════════════════════════════════════════════════════════════════ */
#splash {
  position   : fixed;
  inset      : 0;
  z-index    : 9999;
  display    : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  background : #000;
  transition : opacity 1.2s ease, visibility 1.2s ease;
}
#splash.hidden {
  opacity        : 0;
  visibility     : hidden;
  pointer-events : none;
}

.logo-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 24px;
  animation      : fadeUp 0.8s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flicker {
  0%,18%,22%,25%,53%,57%,100% { opacity: 1; }
  20%,24%,55%                 { opacity: 0.35; }
}

.logo-icon {
  width      : 200px;
  height     : 200px;
  display    : flex;
  align-items    : center;
  justify-content: center;
  animation  : logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0)    scale(1);    filter: drop-shadow(0 0 30px var(--glow-a)); }
  50%     { transform: translateY(-12px) scale(1.02); filter: drop-shadow(0 0 50px var(--glow-c)); }
}

.logo-icon img {
  width        : 100%;
  height       : 100%;
  object-fit   : contain;
  filter       : drop-shadow(0 0 20px var(--glow-a)) drop-shadow(0 0 40px var(--glow-c));
}

.logo-name {
  font-family  : 'Orbitron', sans-serif;
  font-weight  : 900;
  font-size    : clamp(52px, 10vw, 96px);
  letter-spacing: 0.22em;
  color        : var(--bianco);
  text-shadow  :
    3px 3px 0 var(--arancio),
    -3px -3px 0 var(--cyan),
    0 0 40px var(--glow-a),
    0 0 80px rgba(255,107,26,0.3);
  animation    : flicker 3s infinite;
  line-height  : 1;
}
.logo-prod {
  font-size      : 0.42em;
  color          : var(--arancio);
  letter-spacing : 0.35em;
  text-shadow    : 1px 1px 0 var(--cyan), 0 0 20px var(--glow-a);
  vertical-align : middle;
  opacity        : 0.9;
}
.logo-tagline {
  font-size      : 10px;
  letter-spacing : 0.45em;
  color          : rgba(245,240,232,0.38);
  text-transform : uppercase;
}

.progress-wrap {
  position    : absolute;
  bottom      : 10%;
  width       : 320px;
  text-align  : center;
}
.progress-bar {
  height       : 2px;
  background   : rgba(255,255,255,0.08);
  overflow     : hidden;
  border-radius: 2px;
}
.progress-fill {
  height     : 100%;
  width      : 0%;
  background : linear-gradient(90deg, var(--arancio), var(--cyan), var(--arancio));
  background-size : 200% 100%;
  animation  : shimmerBar 1.5s linear infinite;
  transition : width 0.15s linear;
  box-shadow : 0 0 14px var(--glow-a);
}
@keyframes shimmerBar {
  0%   { background-position: 0%   0%; }
  100% { background-position: 200% 0%; }
}
.progress-label {
  font-size      : 9px;
  margin-top     : 10px;
  letter-spacing : 0.35em;
  color          : rgba(245,240,232,0.36);
}

/* ══════════════════════════════════════════════════════════════════
   INTRO ASTRO PROD.
   ══════════════════════════════════════════════════════════════════ */
#introAstro {
  position   : fixed;
  inset      : 0;
  z-index    : 9998;
  display    : none;
  align-items    : center;
  justify-content: center;
  background : #000;
  opacity    : 0;
  transition : opacity 0.9s ease;
}
#introAstro.show { opacity: 1; }
#introAstro.hide { opacity: 0; }

.intro-noise {
  position   : absolute;
  inset      : 0;
  background : url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  opacity    : 0.18;
  animation  : noise 0.2s infinite;
  pointer-events : none;
}
.intro-scanlines {
  position   : absolute;
  inset      : 0;
  z-index    : 1;
  background : repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.22) 0px,
    rgba(0,0,0,0.22) 2px,
    transparent      2px,
    transparent      4px
  );
  pointer-events : none;
}
.intro-content {
  position       : relative;
  z-index        : 2;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 20px;
  text-align     : center;
  animation      : introFadeIn 0.7s ease forwards;
}
@keyframes introFadeIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.intro-vhs-tag {
  font-family    : 'Share Tech Mono', monospace;
  font-size      : 11px;
  letter-spacing : 0.5em;
  color          : rgba(255,107,26,0.55);
  border         : 1px solid rgba(255,107,26,0.2);
  padding        : 3px 14px;
  border-radius  : 2px;
  animation      : vhsBlink 2s infinite;
}
@keyframes vhsBlink {
  0%,100% { opacity: 1;   }
  45%,55% { opacity: 0.2; }
}

.intro-astro-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0;
}
.intro-astro {
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 900;
  font-size      : clamp(90px, 18vw, 200px);
  color          : var(--bianco);
  letter-spacing : 0.15em;
  line-height    : 1;
  text-shadow    :
    4px 4px 0 var(--arancio),
    -4px -4px 0 var(--cyan),
    0 0 60px rgba(255,107,26,0.6),
    0 0 120px rgba(26,184,255,0.3);
}
.intro-prod-line {
  font-family    : 'Share Tech Mono', monospace;
  font-size      : clamp(20px, 4vw, 48px);
  color          : var(--arancio);
  letter-spacing : 0.6em;
  text-shadow    : 0 0 20px var(--glow-a);
  margin-top     : -6px;
  margin-left    : 0.6em; /* compensa letter-spacing */
}
.intro-divider {
  width      : 280px;
  height     : 1px;
  background : linear-gradient(90deg, transparent, var(--arancio), var(--cyan), transparent);
  animation  : dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%,100% { opacity: 0.5; transform: scaleX(1); }
  50%     { opacity: 1;   transform: scaleX(1.05); }
}
.intro-subtitle {
  font-family    : 'Orbitron', sans-serif;
  font-size      : clamp(8px, 1.5vw, 13px);
  letter-spacing : 0.5em;
  color          : rgba(245,240,232,0.35);
  text-transform : uppercase;
}

.intro-timer-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 4px;
  margin-top     : 16px;
}
.intro-timer {
  font-family  : 'Orbitron', sans-serif;
  font-weight  : 900;
  font-size    : clamp(44px, 8vw, 80px);
  color        : var(--cyan);
  text-shadow  : 0 0 30px var(--glow-c), 0 0 60px rgba(26,184,255,0.3);
  animation    : timerPulse 1s ease-in-out infinite;
  line-height  : 1;
  min-width    : 1.2em;
  text-align   : center;
}
@keyframes timerPulse {
  0%,100% { transform: scale(1);    }
  50%     { transform: scale(1.08); }
}
.intro-timer-label {
  font-family    : 'Share Tech Mono', monospace;
  font-size      : 9px;
  letter-spacing : 0.4em;
  color          : rgba(245,240,232,0.28);
}

/* Angoli decorativi intro */
.intro-corner { position: absolute; width: 40px; height: 40px; pointer-events: none; }
.intro-corner--tl { top: 20px;  left:  20px; border-top:    2px solid var(--arancio); border-left:  2px solid var(--arancio); }
.intro-corner--tr { top: 20px;  right: 20px; border-top:    2px solid var(--arancio); border-right: 2px solid var(--arancio); }
.intro-corner--bl { bottom: 20px; left: 20px; border-bottom: 2px solid var(--cyan); border-left:  2px solid var(--cyan); }
.intro-corner--br { bottom: 20px; right:20px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

/* ══════════════════════════════════════════════════════════════════
   SCHERMI GENERALI
   ══════════════════════════════════════════════════════════════════ */
.schermo {
  position       : fixed;
  inset          : 0;
  z-index        : 10;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 16px;
}

/* ══════════════════════════════════════════════════════════════════
   SCHERMO INIZIO
   ══════════════════════════════════════════════════════════════════ */
.titolo {
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 900;
  font-size      : clamp(58px, 11vw, 108px);
  letter-spacing : 0.15em;
  color          : var(--bianco);
  text-shadow    :
    3px 3px 0 var(--arancio),
    -3px -3px 0 var(--cyan),
    0 0 40px var(--glow-a),
    0 0 80px rgba(255,107,26,0.25);
  animation      : flicker 2.5s infinite;
}
.sottotitolo {
  font-family    : 'Orbitron', sans-serif;
  font-size      : 12px;
  letter-spacing : 0.45em;
  color          : rgba(245,240,232,0.4);
  text-transform : uppercase;
  margin-top     : -12px;
}

/* ── INPUT / SELECT ────────────────────────────────────────────── */
input, select {
  background   : rgba(0,0,0,0.65);
  border       : 1px solid var(--bordo-a);
  color        : var(--bianco);
  font-family  : 'Share Tech Mono', monospace;
  font-size    : 16px;
  padding      : 12px 20px;
  border-radius: 2px;
  outline      : none;
  width        : 250px;
  text-align   : center;
  transition   : border-color 0.2s, box-shadow 0.2s;
}
input::placeholder { color: rgba(245,240,232,0.22); }
input:focus,
select:focus {
  border-color : var(--arancio);
  box-shadow   : 0 0 18px var(--glow-a);
}
select option { background: #080400; color: var(--bianco); }

/* ── PULSANTE PRINCIPALE ───────────────────────────────────────── */
.pulsante {
  background     : transparent;
  border         : 2px solid var(--arancio);
  color          : var(--bianco);
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 700;
  font-size      : 15px;
  letter-spacing : 0.22em;
  padding        : 14px 50px;
  border-radius  : 2px;
  cursor         : pointer;
  position       : relative;
  overflow       : hidden;
  transition     : color 0.2s, box-shadow 0.2s;
  text-shadow    : 1px 1px 0 var(--arancio);
}
.pulsante::before {
  content          : '';
  position         : absolute;
  inset            : 0;
  background       : linear-gradient(135deg, var(--arancio), var(--cyan));
  transform        : scaleX(0);
  transform-origin : left;
  transition       : transform 0.25s ease;
  z-index          : -1;
}
.pulsante:hover {
  color       : #000;
  box-shadow  : 0 0 28px var(--glow-a), 0 0 50px var(--glow-c);
  text-shadow : none;
}
.pulsante:hover::before { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════════
   CANVAS SFONDO (invisibile — usato solo per renderizzare in JS)
   ══════════════════════════════════════════════════════════════════ */
#sfondo {
  position : fixed;
  inset     : 0;
  z-index  : 0;
  width    : 100%;
  height   : 100%;
}

/* ══════════════════════════════════════════════════════════════════
   SCHERMO GIOCO
   ══════════════════════════════════════════════════════════════════ */
#schermoGioco {
  display         : none;
  flex-direction  : row;
  align-items     : flex-start;
  justify-content : center;
  gap             : 20px;
  padding-top     : 14px;
}

/* ── CANVAS TETRIS ─────────────────────────────────────────────── */
#gioco {
  background : rgba(0,0,0,0.82);
  border     : 1.5px solid var(--bordo-a);
  box-shadow :
    0 0 30px rgba(255,107,26,0.2),
    0 0 80px rgba(26,184,255,0.08),
    inset 0 0 50px rgba(0,0,0,0.9);
  display    : block;
  filter     : url(#vhs-distort);
}

/* ── ZOOM DROP ─────────────────────────────────────────────────── */
#layoutGioco {
  display          : flex;
  flex-direction   : row;
  align-items      : flex-start;
  gap              : 20px;
  padding-top      : 12px;
  transition       : transform 0.08s cubic-bezier(0.25,0.46,0.45,0.94);
  transform-origin : center center;
}
#layoutGioco.zoom-drop {
  animation: zoomDrop 0.22s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes zoomDrop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.045); }
  70%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* ── PANNELLI LATERALI ─────────────────────────────────────────── */
.pannello-laterale {
  display        : flex;
  flex-direction : column;
  gap            : 14px;
  width          : 160px;
  padding-top    : 2px;
}

/* ── RIQUADRO ──────────────────────────────────────────────────── */
.riquadro {
  background     : rgba(0,0,0,0.70);
  border         : 1px solid var(--bordo-a);
  border-radius  : 2px;
  padding        : 13px 15px;
  position       : relative;
  backdrop-filter: blur(6px);
}
/* angolino bottom-right decorativo */
.riquadro::after {
  content       : '';
  position      : absolute;
  bottom        : 3px;
  right         : 4px;
  width         : 7px;
  height        : 7px;
  border-bottom : 1px solid var(--bordo-c);
  border-right  : 1px solid var(--bordo-c);
}
/* etichetta floating sopra il bordo */
.riquadro::before {
  content        : attr(data-etichetta);
  position       : absolute;
  top            : -9px;
  left           : 10px;
  font-size      : 9px;
  letter-spacing : 0.3em;
  color          : rgba(26,184,255,0.55);
  padding        : 0 6px;
  text-transform : uppercase;
  background     : transparent;
}

/* ── VALORI NUMERICI ───────────────────────────────────────────── */
.valore {
  font-family  : 'Orbitron', sans-serif;
  font-size    : 30px;
  font-weight  : 700;
  color        : var(--bianco);
  text-shadow  : 1px 1px 0 var(--arancio), 0 0 14px var(--glow-a);
}
.valore.nome {
  font-size   : 15px;
  color       : var(--bianco);
  text-shadow : none;
  word-break  : break-word;
}

/* ── BARRA PROGRESSO LIVELLO ───────────────────────────────────── */
.barra-sfondo {
  margin-top    : 8px;
  height        : 3px;
  background    : rgba(255,255,255,0.07);
  border-radius : 1px;
  overflow      : hidden;
}
.barra-riempimento {
  height        : 100%;
  background    : linear-gradient(90deg, var(--arancio), var(--cyan));
  border-radius : 1px;
  transition    : width 0.5s ease;
  width         : 0%;
  box-shadow    : 0 0 8px var(--glow-a);
}

/* ── TAG MODALITÀ ──────────────────────────────────────────────── */
.tag-modalita {
  display        : inline-block;
  margin-top     : 5px;
  font-size      : 9px;
  letter-spacing : 0.3em;
  padding        : 2px 9px;
  border-radius  : 2px;
  text-transform : uppercase;
  background     : rgba(255,107,26,0.08);
  border         : 1px solid var(--bordo-a);
  color          : rgba(245,240,232,0.55);
}

/* ── TESTI INFO PICCOLI ────────────────────────────────────────── */
.controlli {
  font-size   : 11px;
  color       : rgba(245,240,232,0.32);
  line-height : 2.0;
}
.controlli span { color: var(--arancio); }

/* ── CANVAS ANTEPRIMA / HOLD ───────────────────────────────────── */
#canvasNext, #canvasHold { display: block; margin: 6px auto 0; }

.info-piccolo {
  font-size      : 11px;
  color          : rgba(245,240,232,0.28);
  margin-top     : 4px;
  letter-spacing : 0.05em;
}
.info-piccolo span { color: var(--arancio); }

/* ── LOCK BAR ──────────────────────────────────────────────────── */
#lockBar {
  height        : 3px;
  background    : rgba(255,255,255,0.07);
  border-radius : 1px;
  overflow      : hidden;
  margin-top    : 6px;
}
#lockFill {
  height        : 100%;
  background    : linear-gradient(90deg, var(--arancio), var(--cyan));
  border-radius : 1px;
  width         : 0%;
}

/* ── SPRINT ────────────────────────────────────────────────────── */
#barraObiettivo {
  margin-top    : 6px;
  height        : 5px;
  background    : rgba(255,255,255,0.07);
  border-radius : 2px;
  overflow      : hidden;
}
#riempimentoObiettivo {
  height        : 100%;
  background    : linear-gradient(90deg, var(--arancio), var(--cyan));
  border-radius : 2px;
  transition    : width 0.3s ease;
  width         : 0%;
}
#testoObiettivo {
  font-size : 11px;
  color     : rgba(255,255,255,0.32);
  margin-top: 3px;
}
#cronometro {
  font-family : 'Orbitron', sans-serif;
  font-size   : 24px;
  color       : var(--bianco);
  text-shadow : 1px 1px 0 var(--arancio);
}

/* ── HARDCORE ──────────────────────────────────────────────────── */
body.hardcore #gioco {
  border-color : var(--bordo-c);
  box-shadow   : 0 0 40px rgba(26,184,255,0.25), inset 0 0 40px rgba(0,0,0,0.8);
}
body.hardcore .valore {
  text-shadow : 1px 1px 0 var(--cyan), 0 0 14px var(--glow-c);
}
body.hardcore .riquadro          { border-color: var(--bordo-c); }
body.hardcore .riquadro::before  { color: rgba(255,107,26,0.6); }
body.hardcore .barra-riempimento { background: linear-gradient(90deg, var(--cyan), var(--bianco)); }

/* ══════════════════════════════════════════════════════════════════
   SCHERMO PAUSA
   ══════════════════════════════════════════════════════════════════ */
#schermoPausa {
  display         : none;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 22px;
  background      : rgba(0,0,0,0.90);
  backdrop-filter : blur(10px);
  z-index         : 12;
}
.pausa-titolo {
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 900;
  font-size      : clamp(36px,7vw,64px);
  letter-spacing : 0.22em;
  color          : var(--bianco);
  text-shadow    : 2px 2px 0 var(--arancio), -2px -2px 0 var(--cyan), 0 0 40px var(--glow-a);
  animation      : flicker 2s infinite;
}

/* ══════════════════════════════════════════════════════════════════
   SCHERMO COUNTDOWN
   ══════════════════════════════════════════════════════════════════ */
#schermoCountdown {
  display         : none;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  z-index         : 13;
  background      : rgba(0,0,0,0.72);
}
.cd-numero {
  font-family  : 'Orbitron', sans-serif;
  font-weight  : 900;
  font-size    : clamp(90px,20vw,180px);
  color        : var(--bianco);
  text-shadow  : 4px 4px 0 var(--arancio), -4px -4px 0 var(--cyan), 0 0 60px var(--glow-a);
  animation    : cdPop 0.9s ease-out forwards;
}
@keyframes cdPop {
  0%      { transform: scale(2.2) rotate(-5deg); opacity: 0; }
  35%,75% { transform: scale(1)   rotate(0deg);  opacity: 1; }
  100%    { transform: scale(0.4) rotate(5deg);  opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   SCHERMO GAME OVER / CLASSIFICA
   ══════════════════════════════════════════════════════════════════ */
#schermoGameOver {
  display         : none;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 22px;
  background      : rgba(0,0,0,0.94);
  backdrop-filter : blur(10px);
  z-index         : 15;
}
.titolo-fine {
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 900;
  font-size      : clamp(42px,9vw,76px);
  color          : var(--bianco);
  text-shadow    : 3px 3px 0 var(--arancio), -3px -3px 0 var(--cyan), 0 0 30px var(--glow-a);
  animation      : flicker 0.12s infinite;
}
.punteggio-finale {
  font-family    : 'Orbitron', sans-serif;
  font-size      : 20px;
  color          : rgba(245,240,232,0.38);
  letter-spacing : 0.12em;
  text-align     : center;
}
.punteggio-finale span {
  display     : block;
  font-size   : 50px;
  color       : var(--bianco);
  text-shadow : 2px 2px 0 var(--arancio), 0 0 30px var(--glow-a);
  margin-top  : 6px;
}

/* ── CLASSIFICA ────────────────────────────────────────────────── */
#schermoClassifica {
  display         : none;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 16px;
  background      : rgba(0,0,0,0.95);
  backdrop-filter : blur(12px);
  z-index         : 15;
  overflow-y      : auto;
  padding         : 22px 0;
}
.classifica-box {
  background    : rgba(0,0,0,0.74);
  border        : 1px solid var(--bordo-a);
  border-radius : 3px;
  padding       : 20px 26px;
  width         : min(420px, 92vw);
}
.classifica-titolo {
  font-family    : 'Orbitron', sans-serif;
  font-size      : 12px;
  letter-spacing : 0.4em;
  color          : rgba(26,184,255,0.55);
  text-transform : uppercase;
  margin-bottom  : 14px;
  text-align     : center;
}
.classifica-riga {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 7px 0;
  border-bottom : 1px solid rgba(255,255,255,0.05);
  font-size     : 14px;
}
.classifica-riga:last-child { border-bottom: none; }

.cl-pos       { font-family:'Orbitron',sans-serif; font-size:11px; color:rgba(255,255,255,.28); width:24px; text-align:right; flex-shrink:0; }
.cl-pos.oro   { color: #ffcc00; }
.cl-pos.arg   { color: #c0c0cc; }
.cl-pos.bron  { color: #cd7f32; }
.cl-nome      { flex:1; color:var(--bianco); letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-punt      { font-family:'Orbitron',sans-serif; font-size:15px; color:var(--bianco); text-shadow:1px 1px 0 var(--arancio); }
.cl-new       { font-size:9px; letter-spacing:.2em; color:var(--arancio); background:rgba(255,107,26,0.1); border:1px solid var(--bordo-a); border-radius:2px; padding:1px 5px; flex-shrink:0; }
.cl-vuoto     { color:rgba(255,255,255,.2); font-size:13px; text-align:center; padding:12px 0; }

/* ── PULSANTI GAME OVER ────────────────────────────────────────── */
.pulsanti-go {
  display     : flex;
  gap         : 12px;
  flex-wrap   : wrap;
  justify-content: center;
}
.pulsante-small {
  background     : transparent;
  border         : 1px solid var(--bordo-a);
  color          : rgba(245,240,232,0.7);
  font-family    : 'Orbitron', sans-serif;
  font-size      : 12px;
  letter-spacing : 0.15em;
  padding        : 9px 20px;
  border-radius  : 2px;
  cursor         : pointer;
  transition     : all 0.2s;
}
.pulsante-small:hover {
  background : rgba(255,107,26,0.1);
  color      : var(--bianco);
  box-shadow : 0 0 14px var(--glow-a);
}
.pulsante-condividi { border-color: var(--bordo-c); }
.pulsante-condividi:hover {
  background : rgba(26,184,255,0.1);
  box-shadow : 0 0 14px var(--glow-c);
}

/* ══════════════════════════════════════════════════════════════════
   BANNER LIVELLO / COMBO
   ══════════════════════════════════════════════════════════════════ */
#bannerLivello {
  position    : fixed;
  top         : 50%;
  left        : 50%;
  transform   : translate(-50%,-50%) scale(0);
  z-index     : 9999;
  font-family : 'Orbitron', sans-serif;
  font-weight : 900;
  font-size   : clamp(30px,7vw,62px);
  letter-spacing : 0.2em;
  text-align  : center;
  pointer-events : none;
  transition  : transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
  opacity     : 0;
}
#bannerLivello.mostra  { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
#bannerLivello.nascondi{ transform: translate(-50%,-50%) scale(1.5); opacity: 0; }

#bannerCombo {
  position    : fixed;
  top         : 38%;
  left        : 50%;
  transform   : translate(-50%,-50%) scale(0);
  z-index     : 99999;
  font-family : 'Orbitron', sans-serif;
  font-weight : 900;
  font-size   : clamp(22px,5vw,44px);
  letter-spacing : 0.15em;
  text-align  : center;
  pointer-events : none;
  white-space : nowrap;
  transition  : transform 0.25s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
  opacity     : 0;
}
#bannerCombo.mostra  { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
#bannerCombo.nascondi{ transform: translate(-50%,-50%) scale(1.5); opacity: 0; }

/* ══════════════════════════════════════════════════════════════════
   IMPOSTAZIONI
   ══════════════════════════════════════════════════════════════════ */
#btnImpostazioni {
  position       : fixed;
  bottom         : 20px;
  left           : 20px;
  z-index        : 50;
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  background     : rgba(0,0,0,0.78);
  border         : 1.5px solid var(--bordo-a);
  color          : rgba(245,240,232,0.7);
  font-size      : 22px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.4s;
  backdrop-filter: blur(6px);
}
#btnImpostazioni:hover {
  border-color : var(--arancio);
  color        : var(--arancio);
  box-shadow   : 0 0 20px var(--glow-a);
}
#btnImpostazioni.aperto { transform: rotate(90deg); }

#schermoImpostazioni {
  position        : fixed;
  inset           : 0;
  z-index         : 40;
  display         : none;
  align-items     : center;
  justify-content : center;
  background      : rgba(0,0,0,0.87);
  backdrop-filter : blur(12px);
}

#pannelloImpostazioni {
  background    : rgba(0,0,0,0.95);
  border        : 1px solid var(--bordo-a);
  border-radius : 3px;
  padding       : 32px 34px;
  width         : min(500px, 94vw);
  max-height    : 90vh;
  overflow-y    : auto;
  position      : relative;
}

.imp-titolo {
  font-family    : 'Orbitron', sans-serif;
  font-weight    : 900;
  font-size      : 20px;
  letter-spacing : 0.3em;
  color          : var(--bianco);
  text-shadow    : 1px 1px 0 var(--arancio), -1px -1px 0 var(--cyan);
  margin-bottom  : 26px;
  text-align     : center;
}
.imp-sezione {
  font-family    : 'Orbitron', sans-serif;
  font-size      : 9px;
  letter-spacing : 0.4em;
  color          : rgba(26,184,255,0.42);
  text-transform : uppercase;
  margin         : 22px 0 12px;
  padding-bottom : 6px;
  border-bottom  : 1px solid rgba(255,107,26,0.12);
}
.imp-riga {
  display       : flex;
  align-items   : center;
  gap           : 12px;
  padding       : 9px 0;
  border-bottom : 1px solid rgba(255,255,255,0.04);
}
.imp-riga:last-child { border-bottom: none; }
.imp-icona { font-size: 17px; width: 24px; text-align: center; flex-shrink: 0; }
.imp-label { flex:1; font-size:13px; color:rgba(245,240,232,0.58); letter-spacing:0.05em; }
.imp-valore { font-family:'Orbitron',sans-serif; font-size:12px; color:var(--arancio); min-width:36px; text-align:right; flex-shrink:0; }

/* ── SLIDER ────────────────────────────────────────────────────── */
.imp-slider {
  -webkit-appearance : none;
  appearance         : none;
  flex               : 1;
  height             : 2px;
  border-radius      : 1px;
  background         : rgba(255,255,255,0.1);
  outline            : none;
  cursor             : pointer;
  min-width          : 80px;
}
.imp-slider::-webkit-slider-thumb {
  -webkit-appearance : none;
  width              : 14px;
  height             : 14px;
  border-radius      : 50%;
  background         : var(--arancio);
  box-shadow         : 0 0 8px var(--glow-a);
  cursor             : pointer;
}
.imp-slider::-moz-range-thumb {
  width         : 14px;
  height        : 14px;
  border-radius : 50%;
  background    : var(--arancio);
  border        : none;
  box-shadow    : 0 0 8px var(--glow-a);
}

/* ── TOGGLE ────────────────────────────────────────────────────── */
.imp-toggle {
  position  : relative;
  width     : 42px;
  height    : 23px;
  flex-shrink: 0;
}
.imp-toggle input {
  opacity  : 0;
  width    : 0;
  height   : 0;
  position : absolute;
}
.imp-toggle-track {
  position      : absolute;
  inset         : 0;
  border-radius : 12px;
  background    : rgba(255,255,255,0.08);
  border        : 1px solid rgba(255,255,255,0.14);
  cursor        : pointer;
  transition    : background 0.2s, border-color 0.2s;
}
.imp-toggle input:checked + .imp-toggle-track {
  background   : rgba(255,107,26,0.28);
  border-color : var(--bordo-a);
}
.imp-toggle-track::after {
  content       : '';
  position      : absolute;
  top           : 3px;
  left          : 3px;
  width         : 15px;
  height        : 15px;
  border-radius : 50%;
  background    : rgba(255,255,255,0.35);
  transition    : transform 0.2s, background 0.2s;
}
.imp-toggle input:checked + .imp-toggle-track::after {
  transform  : translateX(19px);
  background : var(--arancio);
  box-shadow : 0 0 8px var(--glow-a);
}

/* ── CHIUDI IMPOSTAZIONI ───────────────────────────────────────── */
#chiudiImpostazioni {
  position   : absolute;
  top        : 14px;
  right      : 16px;
  background : transparent;
  border     : none;
  color      : rgba(255,255,255,0.3);
  font-size  : 22px;
  cursor     : pointer;
  line-height: 1;
  transition : color 0.2s;
  padding    : 4px;
}
#chiudiImpostazioni:hover { color: white; }

/* ── PULSANTE RESET CLASSIFICA ─────────────────────────────────── */
.btn-reset {
  background     : transparent;
  border         : 1px solid rgba(26,184,255,0.25);
  color          : rgba(26,184,255,0.5);
  font-family    : 'Share Tech Mono', monospace;
  font-size      : 12px;
  padding        : 7px 16px;
  border-radius  : 2px;
  cursor         : pointer;
  transition     : all 0.2s;
  width          : 100%;
  margin-top     : 20px;
  letter-spacing : 0.1em;
}
.btn-reset:hover {
  background   : rgba(26,184,255,0.08);
  border-color : var(--bordo-c);
  color        : var(--cyan);
}

/* ── CANVAS CARD (offscreen, usato solo per salvaCard()) ─────────── */
#canvasCard { display: none; }