@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:#1a1a2e; /* colore esterno quando letterboxed */
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}

/* Wrapper fisso 420×780 — tutto il gioco vive qui dentro */
#scaleRoot {
  width:420px;
  height:780px;
  position:relative;
  transform-origin: top center;
  overflow:hidden;
  background:#f0f4ff;
  font-family:'GameFont','Nunito',sans-serif;
}

body.blue-theme #scaleRoot { background:#1a2a4a; }
.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:22px;
  background:linear-gradient(135deg,#e8f0ff,#f5f0ff);
}
.logo-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.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:44px; font-weight:900; color:#3a4a7a; letter-spacing:-1px; }
.game-sub { font-size:13px; color:#8898c0; font-weight:700; text-align:center; line-height:1.7; max-width:240px; }

.btn-play {
  width:128px; height:128px; background:#ff6b7a; border:none; border-radius:26px;
  cursor:pointer; box-shadow:0 8px 24px rgba(255,107,122,.4);
  display:flex; align-items:center; justify-content:center;
}
.btn-play svg { width:54px; height:54px; fill:white; margin-left:8px; }

.home-btns { display:flex; gap:10px; }
.home-btn {
  width:52px; height:52px; border:none; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.home-btn svg { width:26px; height:26px; fill:white; pointer-events:none; }

.best-score { font-size:24px; font-weight:900; color:#5b8cff; text-align:center; }
.best-score small { font-size:12px; color:#8898c0; display:block; font-weight:700; }
.mapi-brand { font-size:13px; font-weight:900; color:#ff3b3b; letter-spacing:2px; text-align:center; }
body.blue-theme .mapi-brand { color:#ff6b6b; }

/* ====== GAME HEADER ====== */
#gameScreen { justify-content:flex-start; }
.game-header {
  width:100%; max-width:420px;
  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:none; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.hbtn svg { width:22px; height:22px; fill:white; pointer-events:none; }

/* colori base pulsanti — sovrascrivibili da JS con style.background */
#btnSound { background:#81d933; }
#btnStar  { background:#ff9800; }
#btnReset { background:#ff6b7a; }
#btnHome  { background:#4fc3f7; }

.score-box { text-align:center; }
.score-num  { font-size:36px; font-weight:900; color:#3a4a7a; line-height:1; }
.score-best { font-size:13px; font-weight:800; color:#5b8cff; }
.score-best::before,.score-best::after { content:"★"; font-size:10px; margin:0 2px; }

/* ====== 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:white; border-radius:16px; padding:9px;
  box-shadow:0 6px 24px rgba(100,120,200,.15);
  width:100%; max-width:400px; aspect-ratio:1/1;
}
.cell {
  border-radius:6px;
  background:#e8eef8;
  border:1.5px solid #d0daee;
  aspect-ratio:1/1;
}
@keyframes popOff {
  0%  { transform:scale(1);   opacity:1; }
  50% { transform:scale(1.2); opacity:.7; }
  100%{ transform:scale(0);   opacity:0; }
}
.cell.popping { animation:popOff .3s ease forwards; }
.cell.hl-ok   { background:rgba(80,200,90,.4)  !important; border-color:#4caf50 !important; }
.cell.hl-no   { background:rgba(255,80,80,.35) !important; border-color:#f44336 !important; }

/* ====== DIVIDER ====== */
.divider {
  width:88%; height:2px; flex-shrink:0; margin:6px 0;
  background:repeating-linear-gradient(90deg,#c5d0e8 0,#c5d0e8 8px,transparent 8px,transparent 14px);
}

/* ====== 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:.22; 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; }

/* ====== GAME OVER ====== */
/* ── LEADERBOARD ── */
#lbScreen { background:linear-gradient(160deg,#1a0a3a,#2d1060); 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:#fff; letter-spacing:2px; }
.lb-subtitle { font-size:12px; font-weight:800; color:#bb86fc; letter-spacing:3px; }
.lb-card {
  width:100%; background:linear-gradient(135deg,#7b2ff7,#e040fb);
  border-radius:22px; padding:28px 24px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 32px rgba(123,47,247,.5);
  animation:lbPulse 2.5s ease-in-out infinite;
}
@keyframes lbPulse {
  0%,100%{ box-shadow:0 8px 32px rgba(123,47,247,.5); }
  50%    { box-shadow:0 12px 48px rgba(224,64,251,.7); }
}
.lb-rank { font-size:28px; }
.lb-name { font-size:20px; font-weight:900; color:#fff; letter-spacing:2px; }
.lb-score{ font-size:38px; font-weight:900; color:#fff; }
.lb-empty{ font-size:14px; color:#bb86fc; 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:linear-gradient(160deg,#1a2a5a,#0d1b3e); justify-content:center; }
body.blue-theme #howScreen { background:linear-gradient(160deg,#0d1b3e,#091226); }
.htp-wrap { width:100%; padding:20px 22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:780px; }
.htp-title { font-size:26px; font-weight:900; color:#fff; text-align:center; letter-spacing:2px; margin-bottom:4px; }
.htp-card { background:rgba(255,255,255,.08); border-radius:16px; padding:14px 16px; display:flex; align-items:flex-start; gap:14px; border:1px solid rgba(255,255,255,.12); }
.htp-icon { font-size:26px; flex-shrink:0; line-height:1; }
.htp-text { font-size:14px; color:#c8d8ff; line-height:1.55; }
.htp-text b { color:#fff; display:block; margin-bottom:3px; font-size:15px; }
.htp-back { margin-top:8px; align-self:center; display:flex; align-items:center; gap:8px; background:#5b8cff; border:none; border-radius:14px; color:white; font-family:'GameFont','Nunito',sans-serif; font-size:16px; font-weight:800; padding:13px 28px; cursor:pointer; box-shadow:0 4px 16px rgba(91,140,255,.4); }

/* ── CONTINUE DIALOG ── */
#continueOverlay {
  display:none; position:absolute; inset:0;
  background:rgba(10,15,40,.85); backdrop-filter:blur(5px);
  z-index:900; align-items:center; justify-content:center;
}
#continueOverlay.show { display:flex; }
.cont-box {
  background:white; border-radius:26px; padding:32px 28px;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
  width:300px;
}
.cont-title { font-size:22px; font-weight:900; color:#3a4a7a; margin-bottom:6px; }
.cont-score { font-size:14px; color:#8898c0; font-weight:700; margin-bottom:22px; }
.cont-score span { font-size:22px; font-weight:900; color:#5b8cff; display:block; margin-top:4px; }
.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;
  box-shadow:0 4px 14px rgba(0,0,0,.12); transition:transform .1s;
}
.cont-btn:active { transform:scale(.96); }
.cont-continue { background:#81d933; color:white; font-size:18px; }
.cont-new      { background:#f0f4ff; color:#8898c0; font-size:14px; }
body.blue-theme .cont-box { background:#1e3060; }
body.blue-theme .cont-title { color:#e0eaff; }
body.blue-theme .cont-new { background:#2a4080; color:#8898c0; }

#pauseOverlay { display:none; position:absolute; inset:0; background:rgba(10,15,40,.82); backdrop-filter:blur(6px); z-index:700; align-items:center; justify-content:center; }
#pauseOverlay.show { display:flex; }
.pause-box { color:white; font-size:28px; font-weight:900; text-align:center; line-height:1.6; }
.pause-box small { font-size:14px; color:#8898c0; font-weight:700; }

#goOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(20,30,70,.72); backdrop-filter:blur(4px);
  z-index:800; align-items:center; justify-content:center;
}
#goOverlay.show { display:flex; }
.go-box {
  background:white; border-radius:26px; padding:36px 32px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  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:#ff6b7a; margin-bottom:8px; }
.go-sc    { font-size:16px; color:#8898c0; font-weight:700; margin-bottom:4px; }
.go-best  { font-size:26px; font-weight:900; color:#5b8cff; margin-bottom:24px; }
.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; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.go-btn-play{ background:#81d933; color:white; }
.go-btn-home{ background:#4fc3f7; color:white; }

/* ── TEMA BLU ── */
body.blue-theme { background:#1a2a4a; }
body.blue-theme #scaleRoot  { background:#1a2a4a; }
body.blue-theme #homeScreen { background:linear-gradient(135deg,#1a2a4a,#1e3560); }
body.blue-theme #gameScreen { background:#1a2a4a; }
body.blue-theme .score-num  { color:#e0eaff; }
body.blue-theme .game-title { color:#e0eaff; }
body.blue-theme .game-sub   { color:#6a8abf; }
body.blue-theme .best-score { color:#90c4ff; }
body.blue-theme .best-score small { color:#6a8abf; }
body.blue-theme #grid { background:#243656; box-shadow:0 6px 24px rgba(0,0,50,.4); }
body.blue-theme .cell { background:#1e3060; border-color:#2a4080; }
body.blue-theme .divider { background:repeating-linear-gradient(90deg,#2a4070 0,#2a4070 8px,transparent 8px,transparent 14px); }
body.blue-theme .logo-tile { box-shadow:0 6px 16px rgba(0,0,0,.4); }
body.blue-theme .go-box { background:#1e3060; }
body.blue-theme .go-sc  { color:#6a8abf; }
body.blue-theme .score-best { color:#90c4ff; }

/* ── 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(-0.5deg); }
  85%    { transform:translate(2px,1px) rotate(0.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(1.9) saturate(0.4); }
  60%    { filter:brightness(1.3); }
}
#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(0.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:linear-gradient(135deg,#ff9800,#ff3d00);
  color:white; font-size:13px; font-weight:900; letter-spacing:2px;
  padding:7px 18px; border-radius:30px;
  box-shadow:0 4px 20px rgba(255,100,0,.55);
  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(0.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; }
  50%    { text-shadow:0 0 40px currentColor, 0 0 60px currentColor; }
}
@keyframes comboOut {
  to{ transform:translateX(-50%) translateY(-40px) scale(0.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:13px; font-weight:900; color:#fff; letter-spacing:3px; opacity:.85; }
.combo-count { font-size:52px; font-weight:900; }

/* ── INTRO SPLASH ── */
#introSplash {
  position:fixed; inset:0; z-index:2000;
  background:#0d1b3e;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  font-family:'GameFont','Nunito',sans-serif;
}
#introSplash .sp-title {
  font-size:58px; font-weight:900; color:#fff; letter-spacing:-2px;
  font-family:'GameFont','Nunito',sans-serif;
  opacity:0; animation:spTitleIn .7s .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
#introSplash .sp-sub {
  font-size:14px; font-weight:700; color:#6a8abf; letter-spacing:3px;
  font-family:'GameFont','Nunito',sans-serif;
  opacity:0; animation:spSubIn .5s .8s ease forwards;
}
#introSplash .sp-bar {
  width:160px; height:4px; background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden;
  opacity:0; animation:spSubIn .5s .9s ease forwards;
}
#introSplash .sp-bar-fill {
  height:100%; background:linear-gradient(90deg,#4fc3f7,#81d933);
  border-radius:4px; animation:spBarFill 1.4s 1s ease forwards;
  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; }
}

.spop {
  position:fixed; font-size:20px; font-weight:900; color:#5b8cff;
  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; }
}