/* ============ BLOKKO — identità grafica: cabinato arcade al neon ============
   Ogni gioco del sito ha una grafica propria: qui niente pixel art (è di Boing)
   e niente palette laguna/sabbia (è di Wordio). Blokko è vettoriale e luminoso:
   fondo indaco profondo, griglia prospettica in movimento, blocchi disegnati
   come tubi al neon, pannelli in vetro scuro e scanline da monitor CRT. */
:root{
  --void: #06021A;
  --deep: #14043C;
  --indigo: #1E0A55;
  --panel: rgba(20, 6, 56, 0.82);
  --panel-line: rgba(177, 76, 255, 0.45);

  --magenta: #FF2E88;
  --cyan: #00E5FF;
  --violet: #B14CFF;
  --lime: #39FF6A;
  --spring: #00FFA3;
  --amber: #FF9F1C;
  --yellow: #FFE14D;
  --blue: #4D6BFF;
  --ice: #DCE3FF;

  --text: #EDE9FF;
  --text-dim: rgba(237, 233, 255, 0.62);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body{ height:100%; }
body{
  margin:0; padding:0; min-height:100%;
  font-family:'Rajdhani', sans-serif;
  background: var(--void);
  color: var(--text);
  overscroll-behavior: none;
}

/* ---------- sfondo neon ---------- */
#bgLayer{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 96%, #3A0A6B 0%, rgba(58,10,107,0) 60%),
    linear-gradient(180deg, var(--void) 0%, var(--deep) 55%, var(--indigo) 100%);
  pointer-events:none;
}
/* alone luminoso all'orizzonte, sotto la griglia */
.neon-sun{
  position:absolute; left:50%; bottom:26%;
  width:min(150vw, 620px); height:min(150vw, 620px);
  transform: translate(-50%, 50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,46,136,0.42) 0%, rgba(177,76,255,0.18) 42%, rgba(177,76,255,0) 68%);
  will-change: opacity;
  animation: sun-pulse 6s ease-in-out infinite;
}
@keyframes sun-pulse{
  0%, 100%{ opacity:0.75; }
  50%{ opacity:1; }
}
/* pavimento a griglia in prospettiva: scorre verso chi guarda */
.grid-floor{
  position:absolute; left:-50%; right:-50%; bottom:-10%;
  height:60%;
  background-image:
    repeating-linear-gradient(to right, rgba(0,229,255,0.35) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(255,46,136,0.4) 0 1px, transparent 1px 48px);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
  will-change: transform;
  animation: grid-scroll 3.2s linear infinite;
}
/* si muove la trasformazione, non la posizione dello sfondo: la prima la fa la
   scheda grafica, la seconda obbliga a ridipingere tutto lo schermo 60 volte
   al secondo mentre stai giocando */
@keyframes grid-scroll{
  from{ transform: perspective(320px) rotateX(72deg) translateY(0); }
  to{ transform: perspective(320px) rotateX(72deg) translateY(48px); }
}
/* righe orizzontali finissime, come su un monitor a tubo catodico */
/* Niente mix-blend-mode qui: obbligava il browser a ricomporre l'intera
   pagina a ogni fotogramma ed era il singolo pezzo più caro di tutta la
   grafica. Righe nere semitrasparenti danno lo stesso effetto a costo zero. */
#scanlines{
  position:fixed; inset:0; z-index:40;
  pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
}

#app{
  position:relative; z-index:1;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  max-width:480px;
  margin:0 auto;
  display:flex; flex-direction:column;
  overflow-x:hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- caricamento ---------- */
#loadingScreen{
  position:fixed; inset:0; z-index:60;
  background: var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition: opacity 0.3s ease;
}
#loadingScreen.hidden{ display:none; }
.loading-title{
  font-family:'Orbitron', sans-serif;
  font-weight:900; font-size:30px; letter-spacing:6px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan), 0 0 28px rgba(0,229,255,0.6);
}
.spinner{
  width:34px; height:34px;
  border:3px solid rgba(255,46,136,0.25);
  border-top-color: var(--magenta);
  border-radius:50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- topbar ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 2px;
}
.icon-group{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.icon-btn{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(177,76,255,0.14);
  border: 1.5px solid rgba(177,76,255,0.5);
  box-shadow: 0 0 10px rgba(177,76,255,0.28), inset 0 0 8px rgba(177,76,255,0.14);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  text-decoration:none;
  flex:0 0 auto;
}
.icon-btn:active{ transform: scale(0.96); }
/* La freccia per tornare in home ha gia' il suo cerchio disegnato dentro
   all'icona: il fondino del pulsante ci faceva un secondo cerchio intorno.
   Via il fondino, e l'icona si prende tutta la misura che aveva il tondo.
   Il bersaglio da toccare resta largo uguale. */
a.icon-btn{ background:none; border:none; box-shadow:none; font-size:34px; line-height:0; }
/* Il livello sta nello spazio fra le icone e il contatore delle righe, non
   centrato di forza sullo schermo: con la quarta icona (il ↻) il centro esatto
   cade DENTRO al gruppo di icone, e su un telefono stretto la scritta ci
   finiva sotto. Misurato: a 320px le icone arrivavano a 176 e la scritta
   partiva da 130. */
.level-display{
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:13px; letter-spacing:1.5px;
  display:flex; align-items:center; gap:4px;
  white-space:nowrap;
  color: var(--violet);
  text-shadow: 0 0 8px rgba(177,76,255,0.8);
}
.lv-label{ opacity:0.8; }
.lines-display{
  flex:0 0 auto;
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:13px; letter-spacing:1px;
  display:flex; align-items:center; gap:5px;
  color: var(--spring);
  text-shadow: 0 0 8px rgba(0,255,163,0.7);
}
/* le righe fatte: tre barrette disegnate, non un carattere. Il simbolo di
   prima su qualche telefono non c'era e usciva il quadratino vuoto. */
.lines-icon{
  display:inline-flex; flex-direction:column; justify-content:center; gap:2px;
  width:14px; height:12px;
}
.lines-icon i{
  display:block; height:2px; border-radius:1px;
  background: currentColor;
}
.lines-icon i:nth-child(2){ width:80%; }
.lines-icon i:nth-child(3){ width:60%; }

/* ---------- hud: punti + prossimi pezzi ---------- */
/* I punti stanno in mezzo allo SCHERMO. Prima la riga la dividevano in due con
   la casella dei prossimi pezzi e finivano schiacciati a sinistra; poi ho
   provato con tre colonne, ma la colonna dei pezzi si allarga più della sua
   parte e li spingeva di lato lo stesso. Così invece il centro è il centro:
   i punti sono staccati dal flusso e messi a metà, i pezzi restano a destra.
   Perché non si sovrappongano su un telefono stretto, le caselle dei prossimi
   pezzi rimpiccioliscono sotto i 400px (vedi in fondo). */
.hud-row{
  position:relative;
  display:flex; align-items:flex-end; justify-content:flex-end;
  min-height:44px;
  padding: 6px 16px 0;
}
.score-block{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  text-align:center;
}
.hud-label{
  font-family:'Orbitron', sans-serif;
  font-weight:600; font-size:9px; letter-spacing:2.5px;
  color: var(--text-dim);
  margin-bottom:2px;
}
#scoreValue{
  font-family:'Orbitron', sans-serif;
  /* Il punteggio è centrato sullo schermo e a sei cifre diventa largo: la
     misura segue la larghezza dello schermo, così non arriva mai a toccare le
     caselle dei prossimi pezzi. I limiti sono misurati, non a occhio: provato
     con 987.654 punti e tre pezzi in anteprima (il caso peggiore) a 320, 360,
     390, 412 e 768px. */
  font-weight:900; font-size: clamp(18px, 6vw, 26px); line-height:1;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255,225,77,0.75), 0 0 26px rgba(255,159,28,0.45);
  font-variant-numeric: tabular-nums;
}
.next-block{ text-align:right; }
.next-slots{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.next-slot{
  width:38px; height:26px;
  border:1px solid rgba(0,229,255,0.32);
  border-radius:6px;
  background: rgba(0,229,255,0.06);
  box-shadow: inset 0 0 10px rgba(0,229,255,0.12);
}
/* Le caselle si stringono sui telefoni stretti, così in facile (tre pezzi in
   anteprima) non arrivano a toccare i punti centrati. Va DOPO la regola qui
   sopra, o non vince. Il conto da rispettare, sul telefono più stretto: metà
   schermo meno metà del punteggio a sei cifre deve restare a sinistra delle
   caselle. */
@media (max-width: 460px){
  .next-slot{ width:32px; height:23px; }
}
@media (max-width: 340px){
  .next-slot{ width:28px; height:20px; }
}

.title-wrap{ text-align:center; padding: 8px 0 2px; }
.title-wrap h1{
  font-family:'Orbitron', sans-serif;
  font-weight:900; font-size:22px; letter-spacing:8px;
  margin:0; padding-left:8px; /* compensa lo spazio finale della spaziatura */
  color: #fff;
  text-shadow:
    0 0 6px var(--magenta),
    0 0 16px var(--magenta),
    0 0 34px rgba(255,46,136,0.7);
}

/* ---------- area di gioco ---------- */
.game-zone{
  position:relative;
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding: 8px 16px max(14px, env(safe-area-inset-bottom));
  min-height:0;
  touch-action: none; /* i gesti sono nostri: niente scroll/zoom della pagina */
}
.board-frame{
  position:relative;
  border-radius:8px;
  border:2px solid rgba(0,229,255,0.55);
  box-shadow:
    0 0 14px rgba(0,229,255,0.45),
    0 0 40px rgba(0,229,255,0.18),
    inset 0 0 30px rgba(30,10,85,0.9);
  background: rgba(6,2,26,0.72);
  overflow:hidden;
  line-height:0;
}
#gameCanvas{ display:block; }

/* messaggio grande al centro (BLOKKO!, livello su, ...) */
.center-toast{
  position:absolute; left:50%; top:38%;
  transform: translate(-50%,-50%);
  font-family:'Orbitron', sans-serif;
  font-weight:900; font-size:22px; letter-spacing:3px;
  color:#fff;
  text-shadow: 0 0 8px var(--magenta), 0 0 22px var(--magenta);
  pointer-events:none;
  white-space:nowrap;
  animation: toast-pop 0.3s ease-out;
}
.center-toast.hidden{ display:none; }

/* "Tocca per continuare": copre tutta la zona di gioco quando si rientra su una
   partita salvata. Prende lei il primo tocco, così quel tocco non fa anche
   ruotare il pezzo. Il campo sotto si vede: si guarda com'era prima di ripartire. */
.resume-hint{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: rgba(6,2,26,0.55);
  cursor:pointer;
}
.resume-hint.hidden{ display:none; }
.resume-hint-text{
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:17px; letter-spacing:2px;
  text-align:center; line-height:1.5;
  color:#fff;
  text-shadow: 0 0 8px var(--cyan), 0 0 22px rgba(0,229,255,0.7);
  animation: resume-pulse 1.6s ease-in-out infinite;
}
@keyframes resume-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.45; }
}
/* chi ha chiesto meno animazioni si tiene la scritta ferma */
@media (prefers-reduced-motion: reduce){
  .resume-hint-text{ animation:none; }
}
@keyframes toast-pop{
  from{ opacity:0; transform: translate(-50%,-50%) scale(0.7); }
  to{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* ---------- overlay e pannelli ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background: rgba(6,2,26,0.78);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition: opacity 0.2s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.card{
  position:relative;
  width:100%; max-width:340px;
  max-height:88vh; overflow-y:auto;
  background: var(--panel);
  border:1.5px solid var(--panel-line);
  border-radius:14px;
  padding:24px 20px 20px;
  text-align:center;
  box-shadow: 0 0 20px rgba(177,76,255,0.35), 0 0 60px rgba(255,46,136,0.15), inset 0 0 40px rgba(30,10,85,0.6);
}
.card h2{
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:17px; letter-spacing:2px;
  margin:0 0 8px;
  color:#fff;
  text-shadow: 0 0 8px var(--cyan), 0 0 20px rgba(0,229,255,0.5);
}
.card p{
  font-size:15px; font-weight:600; line-height:1.45;
  color: var(--text-dim);
  margin:0 0 16px;
}
.big-icon{ font-size:34px; line-height:1; margin-bottom:6px; }
/* punteggio finale e record su due righe */
#gameOverSub{ white-space: pre-line; }

.primary-btn, .secondary-btn, .menu-row, .difficulty-option, .language-option, .lb-tab{
  font-family:'Orbitron', sans-serif;
  font-weight:700; letter-spacing:1.5px;
  cursor:pointer;
  border-radius:10px;
}
.primary-btn{
  display:block; width:100%;
  font-size:14px;
  padding:13px 16px;
  margin-bottom:10px;
  color:#0B0022;
  background: linear-gradient(180deg, #FF6BB0, var(--magenta));
  border:none;
  box-shadow: 0 0 16px rgba(255,46,136,0.6);
}
.primary-btn:active{ transform: translateY(2px); box-shadow: 0 0 8px rgba(255,46,136,0.5); }
.secondary-btn{
  display:block; width:100%;
  font-size:13px;
  padding:11px 16px;
  margin-top:6px;
  color: var(--text);
  background: rgba(177,76,255,0.12);
  border:1.5px solid rgba(177,76,255,0.45);
}
.secondary-btn:active{ transform: translateY(2px); }
.home-link{
  display:inline-block; margin-top:12px;
  font-family:'Rajdhani', sans-serif;
  font-weight:700; font-size:14px;
  color: var(--cyan);
  text-decoration:none;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
}

.menu-section-label{
  font-family:'Orbitron', sans-serif;
  font-size:9px !important; letter-spacing:2.5px;
  color: var(--text-dim) !important;
  margin:16px 0 8px !important;
}
.menu-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.menu-row{
  display:flex; align-items:center; gap:10px;
  width:100%;
  font-size:13px;
  padding:12px 14px;
  color: var(--text);
  background: rgba(0,229,255,0.08);
  border:1.5px solid rgba(0,229,255,0.32);
  text-align:left;
}
.menu-row:active{ transform: translateY(2px); }

.difficulty-list{ display:flex; flex-direction:column; gap:8px; }
.difficulty-option{
  width:100%;
  font-size:13px;
  padding:12px 14px;
  color: var(--text);
  background: rgba(177,76,255,0.12);
  border:1.5px solid rgba(177,76,255,0.4);
}
.difficulty-option:active{ transform: translateY(2px); }
.difficulty-option[data-difficulty="easy"]{ border-color: rgba(0,255,163,0.5); background: rgba(0,255,163,0.1); }
.difficulty-option[data-difficulty="medium"]{ border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.1); }
.difficulty-option[data-difficulty="hard"]{ border-color: rgba(255,46,136,0.55); background: rgba(255,46,136,0.12); }
/* La difficoltà su cui si sta giocando, accesa. Ognuna tiene il colore suo
   (verde, ciano, magenta), quindi il segno di "questa" è un contorno bianco e
   un alone: si riconosce senza dover leggere e senza litigare con le tre tinte.
   Va DOPO le regole qui sopra, che scrivono anche loro il bordo. */
.difficulty-option.active{
  color:#fff;
  outline:2px solid rgba(255,255,255,0.65);
  outline-offset:-2px;
  box-shadow: 0 0 14px rgba(255,255,255,0.22);
}

.tutorial-card{ max-width:360px; }
.tutorial-row{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left;
  margin-bottom:12px;
}
.tutorial-icon{ font-size:20px; line-height:1.2; flex:0 0 26px; text-align:center; }
.tutorial-row p{ margin:0; font-size:14px; }
/* riga senza icona a sinistra: il testo parte dal bordo come le altre */
.tutorial-row-plain{ padding-left:38px; }

/* i tasti del computer, uno per riga: il tastino disegnato e poi cosa fa */
.key-list{
  display:flex; flex-direction:column; gap:7px;
  margin: 2px 0 12px 38px;
  text-align:left;
}
.key-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.key-caps{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.key-caps .ffr-ico, .key-word{
  font-size:15px;
  border:1.5px solid var(--panel-line);
  border-radius:5px;
  background: rgba(255,255,255,0.05);
  box-sizing: content-box;
  padding:3px;
}
.key-word{
  font-family:'Rajdhani', sans-serif; font-weight:700;
  font-size:12px; line-height:1; letter-spacing:0.5px;
  padding:5px 8px;
}

/* lingua */
.language-list{ display:flex; flex-direction:column; gap:8px; }
.language-option{
  display:flex; align-items:center; gap:12px;
  width:100%;
  font-size:13px;
  padding:11px 14px;
  color: var(--text);
  background: rgba(0,229,255,0.08);
  border:1.5px solid rgba(0,229,255,0.3);
  text-align:left;
}
.language-option:active{ transform: translateY(2px); }
.language-option.active{ border-color: var(--spring); box-shadow: 0 0 12px rgba(0,255,163,0.4); }
.language-flag{ font-size:19px; }

/* classifica */
.lb-tabs{ display:flex; gap:6px; margin-bottom:12px; }
.lb-tab{
  flex:1 1 0;
  font-size:11px;
  padding:9px 4px;
  color: var(--text-dim);
  background: rgba(177,76,255,0.08);
  border:1.5px solid rgba(177,76,255,0.28);
}
.lb-tab.active{
  color:#fff;
  border-color: var(--violet);
  box-shadow: 0 0 12px rgba(177,76,255,0.45);
}
.leaderboard-list{
  max-height: 260px; /* ~6 righe: standard del sito */
  overflow-y:auto;
  display:flex; flex-direction:column; gap:5px;
  margin-bottom:6px;
}
.leaderboard-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px;
  border-radius:8px;
  background: rgba(0,229,255,0.06);
  border:1px solid rgba(0,229,255,0.16);
  font-family:'Rajdhani', sans-serif;
  font-weight:700; font-size:14px;
}
.leaderboard-row.is-me{
  background: rgba(255,46,136,0.14);
  border-color: rgba(255,46,136,0.55);
  box-shadow: 0 0 12px rgba(255,46,136,0.3);
}
.leaderboard-rank{
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:11px;
  color: var(--violet);
  flex:0 0 46px; text-align:left;
}
.leaderboard-name{ flex:1 1 auto; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-score{
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:12px;
  color: var(--yellow);
  flex:0 0 auto;
  font-variant-numeric: tabular-nums;
}
.leaderboard-empty{
  font-size:14px; font-weight:600;
  color: var(--text-dim);
  padding:18px 6px;
  line-height:1.4;
}

/* schermi bassi: recupero spazio per il campo di gioco */
@media (max-height: 640px){
  .title-wrap{ display:none; }
  #scoreValue{ font-size:22px; }
}
/* tablet e desktop */
@media (min-width: 700px){
  #app{ max-width: 560px; }
  .title-wrap h1{ font-size:28px; }
  #scoreValue{ font-size:32px; }
  .next-slot{ width:46px; height:32px; }
}