@font-face {
  font-family: 'GameFont';
  src: url('fonts/FredokaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:#000008;
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}

/* Wrapper fisso 420×780 */
#scaleRoot {
  width:420px;
  height:780px;
  position:relative;
  transform-origin: top center;
  overflow:hidden;
  background:#06060f;
  font-family:'GameFont','Nunito',sans-serif;
}

/* scanline neon overlay */
#scaleRoot::after {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.04) 2px,
    rgba(0,0,0,.04) 4px
  );
  pointer-events:none; z-index:9999;
}

.screen {
  display:none; flex-direction:column; align-items:center;
  width:420px; height:780px;
  position:absolute; top:0; left:0;
}
.screen.active { display:flex; }

/* ====== HOME ====== */
#homeScreen {
  justify-content:center; gap:18px;
  background: radial-gradient(ellipse at 50% -10%, #0a1a3a 0%, #06060f 65%);
}

.logo-dynamic {
  width: 180px; height: 130px;
  position: relative; overflow: visible;
  margin-bottom: 4px;
}
.fall-piece {
  position: absolute;
  border-radius: 8px;
  animation: fallDown linear infinite;
  opacity: 0;
}
@keyframes fallDown {
  0%   { transform: translateY(-60px) rotate(0deg);  opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(140px) rotate(20deg); opacity: 0; }
}

.game-title {
  font-size:52px; font-weight:900; color:#00e5ff; letter-spacing:6px;
  text-shadow: 0 0 10px #00e5ff, 0 0 30px #00e5ff, 0 0 60px rgba(0,229,255,.5);
}
body.blue-theme .game-title {
  color:#ff00dd;
  text-shadow: 0 0 10px #ff00dd, 0 0 30px #ff00dd, 0 0 60px rgba(255,0,221,.5);
}

.game-sub {
  font-size:12px; color:#2a4a6a; font-weight:700;
  text-align:center; line-height:1.75; max-width:240px; letter-spacing:.5px;
}

/* PLAY BUTTON */
.btn-play {
  width:120px; height:120px;
  background: linear-gradient(135deg,#001828,#002a3a);
  border: 2px solid #00e5ff;
  border-radius:24px; cursor:pointer;
  box-shadow: 0 0 20px rgba(0,229,255,.5), 0 0 50px rgba(0,229,255,.15),
              inset 0 0 20px rgba(0,229,255,.05);
  display:flex; align-items:center; justify-content:center;
  transition: box-shadow .2s, transform .1s;
}
.btn-play:active { transform:scale(.95); box-shadow: 0 0 35px rgba(0,229,255,.9), 0 0 70px rgba(0,229,255,.3); }
.btn-play svg { width:50px; height:50px; fill:#00e5ff; margin-left:8px;
  filter: drop-shadow(0 0 8px #00e5ff); }
body.blue-theme .btn-play { border-color:#ff00dd; box-shadow:0 0 20px rgba(255,0,221,.5), 0 0 50px rgba(255,0,221,.15); }
body.blue-theme .btn-play svg { fill:#ff00dd; filter:drop-shadow(0 0 8px #ff00dd); }

/* HOME BUTTONS */
.home-btns { display:flex; gap:10px; }
.home-btn {
  width:52px; height:52px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .1s;
}
.home-btn:active { transform:scale(.88); }
.home-btn svg { width:26px; height:26px; fill:white; pointer-events:none; }

.best-score {
  font-size:28px; font-weight:900; color:#00e5ff; text-align:center;
  text-shadow: 0 0 12px rgba(0,229,255,.7);
}
.best-score small { font-size:11px; color:#1a3a5a; display:block; font-weight:700; letter-spacing:3px; }
body.blue-theme .best-score { color:#ff00dd; text-shadow:0 0 12px rgba(255,0,221,.7); }

.mapi-brand {
  font-size:11px; font-weight:900; color:#00e5ff; letter-spacing:4px; text-align:center;
  text-shadow:0 0 8px rgba(0,229,255,.5); opacity:.5;
}

/* ====== GAME HEADER ====== */
#gameScreen { justify-content:flex-start; background:#06060f; }
.game-header {
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 4px;
}
.hdr-group { display:flex; gap:8px; }
.hbtn {
  width:44px; height:44px; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .1s;
}
.hbtn:active { transform:scale(.9); }
.hbtn svg { width:22px; height:22px; fill:white; pointer-events:none; }

#btnSound { background:#081a04; border:1.5px solid #39ff14; box-shadow:0 0 10px rgba(57,255,20,.5); }
#btnStar  { background:#1a1200; border:1.5px solid #f0ff00; box-shadow:0 0 10px rgba(240,255,0,.4); }
#btnReset { background:#1a0008; border:1.5px solid #ff0055; box-shadow:0 0 10px rgba(255,0,85,.5); }
#btnHome  { background:#001018; border:1.5px solid #00e5ff; box-shadow:0 0 10px rgba(0,229,255,.5); }

.score-box { text-align:center; }
.score-num {
  font-size:40px; font-weight:900; color:#00e5ff; line-height:1;
  text-shadow: 0 0 10px #00e5ff, 0 0 25px rgba(0,229,255,.5);
}
.score-best {
  font-size:12px; font-weight:800; color:#39ff14;
  text-shadow: 0 0 8px rgba(57,255,20,.7);
}
.score-best::before,.score-best::after { content:"★"; font-size:10px; margin:0 2px; }
body.blue-theme .score-num { color:#ff00dd; text-shadow:0 0 10px #ff00dd, 0 0 25px rgba(255,0,221,.5); }
body.blue-theme .score-best { color:#ff00dd; text-shadow:0 0 8px rgba(255,0,221,.7); }

/* ====== GRID ====== */
.grid-wrap {
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; max-width:420px; padding:0 8px;
}
#grid {
  display:grid; grid-template-columns:repeat(11,1fr); gap:3px;
  background:#080818; border-radius:16px; padding:9px;
  box-shadow: 0 0 30px rgba(0,229,255,.15), 0 0 60px rgba(0,229,255,.05),
              inset 0 0 30px rgba(0,0,0,.5);
  border:1px solid rgba(0,229,255,.2);
  width:100%; max-width:400px; aspect-ratio:1/1;
}
body.blue-theme #grid {
  box-shadow: 0 0 30px rgba(255,0,221,.15), 0 0 60px rgba(255,0,221,.05), inset 0 0 30px rgba(0,0,0,.5);
  border-color:rgba(255,0,221,.2);
}
.cell {
  border-radius:5px;
  background:#0d0d28;
  border:1px solid #16163c;
  aspect-ratio:1/1;
}
@keyframes popOff {
  0%  { transform:scale(1);   opacity:1; }
  40% { transform:scale(1.35); opacity:.9; filter:brightness(2.5) saturate(2); }
  100%{ transform:scale(0);   opacity:0; }
}
.cell.popping { animation:popOff .32s ease forwards; }
.cell.hl-ok {
  background:rgba(0,229,255,.2) !important;
  border-color:#00e5ff !important;
  box-shadow:0 0 8px rgba(0,229,255,.7) !important;
}
.cell.hl-no {
  background:rgba(255,0,85,.2) !important;
  border-color:#ff0055 !important;
  box-shadow:0 0 8px rgba(255,0,85,.7) !important;
}

/* ====== DIVIDER ====== */
.divider {
  width:88%; height:1px; flex-shrink:0; margin:6px 0;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),transparent);
  box-shadow:0 0 8px rgba(0,229,255,.3);
}
body.blue-theme .divider {
  background:linear-gradient(90deg,transparent,rgba(255,0,221,.5),transparent);
  box-shadow:0 0 8px rgba(255,0,221,.3);
}

/* ====== TRAY ====== */
.tray {
  width:100%; max-width:420px;
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:2px 10px 14px; flex-shrink:0;
}
.piece-slot {
  display:flex; align-items:center; justify-content:center;
  width:30%; min-height:76px; cursor:grab;
}
.piece-slot.used    { opacity:.12; pointer-events:none; }
.piece-slot.dragging{ opacity:.3; }
.pg { display:inline-grid; gap:3px; pointer-events:none; }
.pc { border-radius:5px; pointer-events:none; }

/* ====== DRAG FLOAT ====== */
#dragFloat {
  position:fixed; pointer-events:none; display:none; z-index:999;
}
#dragFloat .pc { border-radius:7px; }

/* ====== LEADERBOARD ====== */
#lbScreen {
  background:radial-gradient(ellipse at 50% 0%,#0f0030,#06060f 70%);
  justify-content:center;
}
.lb-wrap { width:100%; padding:30px 28px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.lb-title {
  font-size:28px; font-weight:900; color:#00e5ff; letter-spacing:3px;
  text-shadow:0 0 15px #00e5ff, 0 0 30px rgba(0,229,255,.4);
}
.lb-subtitle {
  font-size:11px; font-weight:800; color:#39ff14; letter-spacing:4px;
  text-shadow:0 0 8px rgba(57,255,20,.7);
}
.lb-card {
  width:100%;
  background:linear-gradient(135deg,#001a3a,#002050);
  border:1px solid rgba(0,229,255,.5);
  border-radius:22px; padding:28px 24px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 0 30px rgba(0,229,255,.3), 0 0 60px rgba(0,229,255,.1);
  animation:lbPulse 2.5s ease-in-out infinite;
}
@keyframes lbPulse {
  0%,100%{ box-shadow:0 0 20px rgba(0,229,255,.3); }
  50%    { box-shadow:0 0 50px rgba(0,229,255,.7), 0 0 90px rgba(0,229,255,.2); }
}
.lb-rank { font-size:28px; }
.lb-name {
  font-size:20px; font-weight:900; color:#00e5ff; letter-spacing:2px;
  text-shadow:0 0 10px #00e5ff;
}
.lb-score {
  font-size:38px; font-weight:900; color:#fff;
  text-shadow:0 0 15px rgba(0,229,255,.9);
}
.lb-empty { font-size:14px; color:#1a3a5a; font-weight:700; text-align:center; display:none; }

/* ====== PARTICLE CANVAS ====== */
#particleCanvas {
  position:absolute; top:0; left:0;
  width:420px; height:780px;
  pointer-events:none; z-index:500;
}

/* ====== HOW TO PLAY ====== */
#howScreen {
  background:radial-gradient(ellipse at 50% 0%,#001030,#06060f 70%);
  justify-content:center;
}
.htp-wrap {
  width:100%; padding:20px 22px;
  display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; max-height:780px;
}
.htp-title {
  font-size:24px; font-weight:900; color:#00e5ff; text-align:center; letter-spacing:3px; margin-bottom:4px;
  text-shadow:0 0 15px #00e5ff;
}
.htp-card {
  background:rgba(0,229,255,.03); border-radius:14px; padding:12px 16px;
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid rgba(0,229,255,.1);
  box-shadow:0 0 10px rgba(0,229,255,.04);
}
.htp-icon { font-size:26px; flex-shrink:0; }
.htp-text { font-size:13px; color:#2a4a6a; font-weight:700; line-height:1.6; }
.htp-text b {
  color:#00e5ff; display:block; margin-bottom:3px; font-size:14px;
  text-shadow:0 0 8px rgba(0,229,255,.6);
}
.htp-back {
  margin-top:8px; align-self:center; display:flex; align-items:center; gap:8px;
  background:#001828; border:1.5px solid #00e5ff; border-radius:14px;
  color:#00e5ff; font-family:'GameFont','Nunito',sans-serif; font-size:16px; font-weight:800;
  padding:12px 28px; cursor:pointer;
  box-shadow:0 0 15px rgba(0,229,255,.35);
  text-shadow:0 0 8px rgba(0,229,255,.8);
  transition:transform .1s;
}
.htp-back:active { transform:scale(.95); }

/* ====== CONTINUE DIALOG ====== */
#continueOverlay {
  display:none; position:absolute; inset:0;
  background:rgba(0,0,6,.9); backdrop-filter:blur(10px);
  z-index:900; align-items:center; justify-content:center;
}
#continueOverlay.show { display:flex; }
.cont-box {
  background:#07072a; border:1px solid rgba(0,229,255,.4); border-radius:26px; padding:32px 28px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,229,255,.2), 0 20px 60px rgba(0,0,0,.7);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
  width:300px;
}
.cont-title {
  font-size:22px; font-weight:900; color:#00e5ff; margin-bottom:6px;
  text-shadow:0 0 10px #00e5ff;
}
.cont-score { font-size:14px; color:#1a3a5a; font-weight:700; margin-bottom:22px; }
.cont-score span {
  font-size:22px; font-weight:900; color:#39ff14; display:block; margin-top:4px;
  text-shadow:0 0 10px rgba(57,255,20,.9);
}
.cont-btns { display:flex; flex-direction:column; gap:10px; }
.cont-btn {
  padding:14px; border:none; border-radius:14px;
  font-family:'GameFont','Nunito',sans-serif; font-size:16px; font-weight:900; cursor:pointer;
  transition:transform .1s;
}
.cont-btn:active { transform:scale(.96); }
.cont-continue {
  background:#011a08; border:2px solid #39ff14; color:#39ff14; font-size:18px;
  box-shadow:0 0 20px rgba(57,255,20,.45);
  text-shadow:0 0 8px rgba(57,255,20,.9);
}
.cont-new {
  background:#0a0a28; border:1px solid #1a1a45; color:#2a3a5a; font-size:14px;
}

/* ====== PAUSE OVERLAY ====== */
#pauseOverlay {
  display:none; position:absolute; inset:0;
  background:rgba(0,0,6,.9); backdrop-filter:blur(10px);
  z-index:700; align-items:center; justify-content:center;
}
#pauseOverlay.show { display:flex; }
.pause-box {
  color:#00e5ff; font-size:32px; font-weight:900; text-align:center; line-height:1.6;
  text-shadow:0 0 20px #00e5ff, 0 0 50px rgba(0,229,255,.4);
}
.pause-box small { font-size:13px; color:#1a3a5a; font-weight:700; text-shadow:none; }

/* ====== GAME OVER ====== */
#goOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,6,.88); backdrop-filter:blur(8px);
  z-index:800; align-items:center; justify-content:center;
}
#goOverlay.show { display:flex; }
.go-box {
  background:#07071e; border:1px solid rgba(255,0,85,.5); border-radius:26px; padding:36px 32px;
  text-align:center;
  box-shadow:0 0 40px rgba(255,0,85,.25), 0 20px 60px rgba(0,0,0,.8);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.go-title {
  font-size:32px; font-weight:900; color:#ff0055; margin-bottom:8px;
  text-shadow:0 0 15px #ff0055, 0 0 35px rgba(255,0,85,.4);
}
.go-sc    { font-size:15px; color:#1a3a5a; font-weight:700; margin-bottom:4px; }
.go-best  {
  font-size:28px; font-weight:900; color:#00e5ff; margin-bottom:24px;
  text-shadow:0 0 10px #00e5ff;
}
.go-btns  { display:flex; gap:12px; }
.go-btn {
  padding:13px 22px; border:none; border-radius:14px;
  font-family:'GameFont','Nunito',sans-serif; font-size:15px; font-weight:800;
  cursor:pointer; transition:transform .1s;
}
.go-btn:active { transform:scale(.94); }
.go-btn-play {
  background:#011a08; border:2px solid #39ff14; color:#39ff14;
  box-shadow:0 0 20px rgba(57,255,20,.45);
  text-shadow:0 0 8px rgba(57,255,20,.9);
}
.go-btn-home {
  background:#001828; border:2px solid #00e5ff; color:#00e5ff;
  box-shadow:0 0 20px rgba(0,229,255,.45);
  text-shadow:0 0 8px rgba(0,229,255,.9);
}

/* ====== SHAKE & FLASH ====== */
@keyframes shakeGrid {
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  10%    { transform:translate(-4px,-2px) rotate(-1deg); }
  25%    { transform:translate(5px,2px)  rotate(1.5deg); }
  40%    { transform:translate(-5px,-1px) rotate(-1.5deg); }
  55%    { transform:translate(4px,2px) rotate(1deg); }
  70%    { transform:translate(-3px,-2px) rotate(-.5deg); }
  85%    { transform:translate(2px,1px) rotate(.5deg); }
}
@keyframes shakeMini {
  0%,100%{ transform:translate(0,0); }
  30%    { transform:translate(-2px,1px); }
  60%    { transform:translate(2px,-1px); }
}
@keyframes flashBright {
  0%,100%{ filter:brightness(1); }
  30%    { filter:brightness(2.2) saturate(2.5); }
  60%    { filter:brightness(1.4); }
}
#grid.shake-big  { animation:shakeGrid .42s cubic-bezier(.36,.07,.19,.97); }
#grid.shake-mini { animation:shakeMini .16s ease; }
#scaleRoot.flash { animation:flashBright .38s ease; }

/* ====== NEW BEST ====== */
@keyframes newBestIn {
  0%  { transform:scale(0) rotate(-15deg); opacity:0; }
  60% { transform:scale(1.2) rotate(4deg);  opacity:1; }
  80% { transform:scale(.95) rotate(-2deg); }
  100%{ transform:scale(1) rotate(0deg);    opacity:1; }
}
@keyframes newBestOut {
  0%  { transform:scale(1);   opacity:1; }
  100%{ transform:scale(1.3) translateY(-30px); opacity:0; }
}
#newBestBadge {
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  background:#011a08;
  border:2px solid #39ff14;
  color:#39ff14; font-size:13px; font-weight:900; letter-spacing:2px;
  padding:7px 18px; border-radius:30px;
  box-shadow:0 0 20px rgba(57,255,20,.6), 0 0 50px rgba(57,255,20,.2);
  text-shadow:0 0 10px rgba(57,255,20,.9);
  pointer-events:none; z-index:600; display:none;
  white-space:nowrap;
}
#newBestBadge.show { display:block; animation:newBestIn .5s cubic-bezier(.34,1.56,.64,1) forwards; }
#newBestBadge.hide { animation:newBestOut .4s ease forwards; }

/* ====== COMBO ====== */
@keyframes comboIn {
  0%  { transform:translateX(-50%) scale(.4); opacity:0; }
  60% { transform:translateX(-50%) scale(1.15); opacity:1; }
  100%{ transform:translateX(-50%) scale(1);   opacity:1; }
}
@keyframes comboPulse {
  0%,100%{ text-shadow:0 0 20px currentColor, 0 0 40px currentColor; }
  50%    { text-shadow:0 0 40px currentColor, 0 0 90px currentColor, 0 0 130px currentColor; }
}
@keyframes comboOut {
  to{ transform:translateX(-50%) translateY(-40px) scale(.7); opacity:0; }
}
#comboBanner {
  position:absolute; top:50%; left:50%;
  transform:translateX(-50%);
  pointer-events:none; z-index:610; display:none;
  text-align:center; line-height:1.1;
}
#comboBanner.show  { display:block; animation:comboIn .35s cubic-bezier(.34,1.56,.64,1) forwards; }
#comboBanner.pulse { animation:comboPulse .4s ease infinite; }
#comboBanner.hide  { animation:comboOut .4s ease forwards; }
.combo-label { font-size:12px; font-weight:900; color:#fff; letter-spacing:5px; opacity:.65; }
.combo-count { font-size:58px; font-weight:900; }

/* ====== INTRO SPLASH ====== */
#introSplash {
  position:fixed; inset:0; z-index:2000;
  background:#020210;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  font-family:'GameFont','Nunito',sans-serif;
}
#introSplash .sp-title {
  font-size:64px; font-weight:900; color:#00e5ff; letter-spacing:8px;
  text-shadow:0 0 20px #00e5ff, 0 0 50px #00e5ff, 0 0 100px rgba(0,229,255,.4);
  opacity:0; animation:spTitleIn .7s .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
#introSplash .sp-sub {
  font-size:12px; font-weight:700; color:#1a3a5a; letter-spacing:5px;
  opacity:0; animation:spSubIn .5s .8s ease forwards;
}
#introSplash .sp-bar {
  width:160px; height:2px; background:rgba(0,229,255,.1); border-radius:4px; overflow:hidden;
  opacity:0; animation:spSubIn .5s .9s ease forwards;
}
#introSplash .sp-bar-fill {
  height:100%; background:linear-gradient(90deg,#00e5ff,#39ff14);
  border-radius:4px; animation:spBarFill 1.4s 1s ease forwards;
  box-shadow:0 0 10px #00e5ff; width:0;
}
@keyframes spTitleIn {
  from{ opacity:0; transform:scale(.5) translateY(30px); }
  to  { opacity:1; transform:scale(1)  translateY(0); }
}
@keyframes spSubIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes spBarFill { from{width:0} to{width:100%} }
@keyframes spFadeOut { from{opacity:1} to{opacity:0;pointer-events:none} }

/* ====== SCORE POP ====== */
.spop {
  position:fixed; font-size:22px; font-weight:900; color:#39ff14;
  text-shadow:0 0 10px rgba(57,255,20,.9);
  pointer-events:none; z-index:1000;
  animation:spopAnim .9s ease forwards;
}
@keyframes spopAnim {
  from{ transform:translateY(0) scale(1); opacity:1; }
  to  { transform:translateY(-60px) scale(.6); opacity:0; }
}