:root{
  --bg-deep:#050814;
  --bg-mid:#0b1230;
  --neon-cyan:#3ce7ff;
  --neon-magenta:#ff3ce0;
  --neon-amber:#ffb23c;
  --text:#eaf6ff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 15%, rgba(60,231,255,.12), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(255,60,224,.12), transparent 40%),
    linear-gradient(180deg,var(--bg-deep),var(--bg-mid));
  color:var(--text);
}
.arcade-header{
  text-align:center;
  padding:48px 20px 24px;
  position:relative; z-index:1;
}
#starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.arcade-grid{ position:relative; z-index:1; }
.arcade-footer{ position:relative; z-index:1; }
.arcade-header h1{
  font-size:2.6rem;
  margin:0;
  letter-spacing:2px;
  text-shadow:0 0 18px var(--neon-cyan), 0 0 40px rgba(60,231,255,.4);
  animation:titlePulse 4s ease-in-out infinite;
}
@keyframes titlePulse{
  0%,100%{ text-shadow:0 0 18px var(--neon-cyan), 0 0 40px rgba(60,231,255,.4); }
  50%{ text-shadow:0 0 28px var(--neon-magenta), 0 0 60px rgba(255,60,224,.5); }
}
.arcade-header p{color:#9fb4d6;}
.arcade-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
  max-width:1100px;
  margin:0 auto;
  padding:20px 24px 60px;
}
.arcade-card{
  position:relative;
  border-radius:16px;
  padding:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(60,231,255,.25);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  text-decoration:none;
  color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
  will-change:transform;
}
.arcade-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 55%);
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.arcade-card:hover::before{ opacity:1; }
.arcade-card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:var(--neon-magenta);
  box-shadow:0 14px 40px rgba(255,60,224,.25);
}
.arcade-card .icon{
  font-size:2.4rem;display:block;margin-bottom:10px;
  filter:drop-shadow(0 0 8px rgba(60,231,255,.5));
  transition:transform .2s ease;
}
.arcade-card:hover .icon{ transform:scale(1.15) rotate(-4deg); }
.arcade-card h2{margin:0 0 6px;font-size:1.25rem;}
.arcade-card p{margin:0;color:#9fb4d6;font-size:.92rem;}
.arcade-card .badge{
  position:absolute;top:14px;right:14px;
  font-size:.7rem;padding:3px 9px;border-radius:99px;
  background:rgba(60,231,255,.15);border:1px solid var(--neon-cyan);color:var(--neon-cyan);
}
.arcade-card.soon{opacity:.55;pointer-events:none;}
.arcade-footer{text-align:center;color:#5c7396;padding-bottom:40px;font-size:.85rem;}

/* ===== Livello professionale: canvas responsive, transizioni fluide, feedback d'impatto ===== */
/* max-height evita che un canvas molto alto (platform, picchiaduro, puzzle) superi
   lo schermo disponibile su telefono/finestre basse; touch-controls.js restringe
   ulteriormente e con precisione quando la barra dei controlli touch è attiva. */
canvas{ max-width:100%; max-height:80vh; height:auto; display:block; touch-action:none; }

.overlay{
  transition: opacity .3s ease, backdrop-filter .3s ease;
  opacity:0;
  backdrop-filter: blur(0px);
}
.overlay.show{
  opacity:1;
  backdrop-filter: blur(3px);
}
.overlay .modal{
  transform: scale(.9) translateY(10px);
  filter: brightness(1.8) saturate(1.4);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
  position:relative;
  overflow:hidden;
}
.overlay.show .modal{
  transform: scale(1) translateY(0);
  filter: brightness(1) saturate(1);
}
/* Rifinitura "2030": una sottile scia luminosa attraversa il modale
   all'apertura, sopra ai contenuti — puro effetto CSS, nessun JS. */
.overlay .modal::after{
  content:'';
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
  animation:none;
}
.overlay.show .modal::after{
  animation: modalSweep .7s ease .05s 1;
}
@keyframes modalSweep{
  from{ left:-60%; }
  to{ left:120%; }
}

/* Scanline sottilissima sul fondo pagina: dà una texture "schermo" 2030
   senza appesantire nulla, applicata globalmente da un solo file CSS. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

@keyframes arcadeShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  40%{ transform:translate(5px,-4px); }
  60%{ transform:translate(-4px,-2px); }
  80%{ transform:translate(4px,3px); }
}
.arcade-shake{ animation:arcadeShake .35s ease; }

@keyframes arcadeFlash{
  0%{ filter:brightness(1); }
  30%{ filter:brightness(1.6) saturate(1.3); }
  100%{ filter:brightness(1); }
}
.arcade-flash{ animation:arcadeFlash .2s ease; }