:root{
  --bg:#04060f;--bg2:#070c1a;--panel:#0b1225;--panel2:#0e1830;
  --accent:#00d4ff;--hot:#ff2255;--warn:#ffbb00;--good:#00ff88;
  --purple:#aa44ff;--orange:#ff7700;--dim:#0f1e38;
  --text:#c8d8f0;--text2:#7899c0;--border:rgba(0,212,255,.12);
  --glow-a:0 0 20px rgba(0,212,255,.5),0 0 60px rgba(0,212,255,.2);
  --glow-h:0 0 20px rgba(255,34,85,.5),0 0 60px rgba(255,34,85,.2);
  --glow-g:0 0 20px rgba(0,255,136,.5);--glow-w:0 0 20px rgba(255,187,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:var(--bg);
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
body{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  /* no flex — app is absolutely positioned by JS scaleToFit */
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,80,140,.22) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(80,0,140,.14) 0%,transparent 50%),
    linear-gradient(180deg,#030510 0%,#04060f 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,212,255,.016) 3px,rgba(0,212,255,.016) 4px);
}

/* APP — absolutely positioned; JS scaleToFit() sets left/top/transform */
#app{
  position:absolute;
  width:500px;height:600px;
  transform-origin:top left;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;font-weight:600;
}

/* LOADING */
#loading-screen{
  position:absolute;inset:0;background:var(--bg);z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .6s;
}
#loading-screen.hidden{opacity:0;pointer-events:none;}
.loading-logo{
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(2rem,8vw,3rem);
  background:linear-gradient(135deg,#00d4ff,#aa44ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.08em;text-align:center;filter:drop-shadow(0 0 18px rgba(0,212,255,.4));
}
.loading-sub{font-size:.58rem;letter-spacing:.42em;color:var(--text2);text-transform:uppercase;}
.loading-bar-wrap{width:230px;height:3px;background:rgba(0,212,255,.09);border-radius:2px;overflow:hidden;}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,#00d4ff,#aa44ff);border-radius:2px;transition:width .3s;}
.loading-status{font-size:.52rem;letter-spacing:.28em;color:rgba(0,212,255,.3);text-transform:uppercase;}

/* SCREENS */
.screen{
  position:absolute;inset:0;background:rgba(4,6,15,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;z-index:100;transition:opacity .3s;padding:8px 12px 6px;overflow-y:auto;
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none;}
.screen.hidden{opacity:0;pointer-events:none;}
.screen-title{
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1.4rem,5vw,1.9rem);
  background:linear-gradient(135deg,#00d4ff,#aa44ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.06em;text-align:center;line-height:1;
  filter:drop-shadow(0 0 14px rgba(0,212,255,.3));
}
.screen-sub{font-size:.52rem;letter-spacing:.32em;color:var(--text2);text-transform:uppercase;text-align:center;}
.section-label{font-size:.48rem;letter-spacing:.28em;color:rgba(0,212,255,.38);text-transform:uppercase;text-align:center;}
.divider{width:100%;max-width:420px;border:none;border-top:1px solid rgba(0,212,255,.07);margin:1px 0;}

/* OPTION CARDS */
.option-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;width:100%;max-width:490px;}
.opt-card{
  flex:1;min-width:78px;max-width:118px;
  background:linear-gradient(160deg,#0d1a30,#080e1e);
  border:1px solid rgba(0,212,255,.09);border-radius:9px;padding:7px 5px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .14s,box-shadow .2s,border-color .2s;position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
}
.opt-card::before{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(155deg,rgba(0,212,255,.04),transparent 55%);pointer-events:none;}
.opt-card:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(0,212,255,.22);}
.opt-card.selected{border-color:var(--accent);background:linear-gradient(160deg,#0d2035,#081428);box-shadow:0 0 0 1px rgba(0,212,255,.28),0 6px 22px rgba(0,212,255,.18),inset 0 1px 0 rgba(0,212,255,.08);}
.opt-card.selected::after{content:'✓';position:absolute;top:4px;right:6px;font-size:.52rem;color:var(--accent);}
.opt-icon{font-size:1.1rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.opt-name{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.54rem;letter-spacing:.08em;color:var(--accent);text-align:center;}
.opt-desc{font-size:.43rem;color:var(--text2);text-align:center;line-height:1.3;}
.opt-card.diff-easy.selected{border-color:var(--good);box-shadow:0 0 0 1px rgba(0,255,136,.25),0 6px 20px rgba(0,255,136,.12);}
.opt-card.diff-easy.selected::after{color:var(--good);}
.opt-card.diff-easy .opt-name{color:var(--good);}
.opt-card.diff-hard.selected{border-color:var(--hot);box-shadow:0 0 0 1px rgba(255,34,85,.25),0 6px 20px rgba(255,34,85,.12);}
.opt-card.diff-hard.selected::after{color:var(--hot);}
.opt-card.diff-hard .opt-name{color:var(--hot);}
.opt-card.mode-blitz.selected{border-color:var(--warn);box-shadow:0 0 0 1px rgba(255,187,0,.25),0 6px 20px rgba(255,187,0,.12);}
.opt-card.mode-blitz.selected::after,.opt-card.mode-blitz .opt-name{color:var(--warn);}
.opt-card.mode-ghost.selected{border-color:var(--purple);box-shadow:0 0 0 1px rgba(170,68,255,.25),0 6px 20px rgba(170,68,255,.12);}
.opt-card.mode-ghost.selected::after,.opt-card.mode-ghost .opt-name{color:var(--purple);}
.opt-card.mode-bomb.selected{border-color:var(--orange);box-shadow:0 0 0 1px rgba(255,119,0,.25),0 6px 20px rgba(255,119,0,.12);}
.opt-card.mode-bomb.selected::after,.opt-card.mode-bomb .opt-name{color:var(--orange);}

#mode-info-box{max-width:420px;width:100%;background:linear-gradient(135deg,rgba(0,212,255,.05),rgba(170,68,255,.03));border:1px solid rgba(0,212,255,.09);border-radius:8px;padding:8px 12px;font-size:.6rem;line-height:1.7;color:rgba(200,220,255,.5);text-align:center;min-height:42px;}
#azerty-warn{max-width:420px;width:100%;background:rgba(255,187,0,.04);border:1px solid rgba(255,187,0,.18);border-radius:7px;padding:7px 12px;font-size:.56rem;color:rgba(255,187,0,.65);text-align:center;display:none;}

/* BUTTONS */
.btn{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;
  color:#fff;border:none;border-radius:8px;padding:11px 24px;cursor:pointer;
  text-transform:uppercase;transition:transform .1s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.11),transparent 55%);border-radius:8px;pointer-events:none;}
.btn.primary{background:linear-gradient(135deg,#0099cc,#00d4ff);box-shadow:0 4px 16px rgba(0,180,220,.38),0 -2px 0 rgba(0,0,0,.25) inset;}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,180,220,.52),var(--glow-a);}
.btn.primary:active{transform:translateY(1px);}
.btn.hot{background:linear-gradient(135deg,#cc0033,#ff2255);box-shadow:0 4px 16px rgba(200,0,55,.35),0 -2px 0 rgba(0,0,0,.25) inset;}
.btn.hot:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(200,0,55,.52),var(--glow-h);}
.btn.hot:active{transform:translateY(1px);}
.btn.secondary{background:transparent;border:1px solid rgba(0,212,255,.18);color:rgba(0,212,255,.65);box-shadow:0 2px 8px rgba(0,0,0,.3);}
.btn.secondary:hover{border-color:rgba(0,212,255,.38);color:var(--accent);}
.start-action-row{display:flex;gap:8px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:420px;}
#shield-btn{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;
  color:#fff;border:none;border-radius:8px;padding:11px 14px;cursor:pointer;text-transform:uppercase;
  background:linear-gradient(135deg,#005566,#00aabb);
  box-shadow:0 4px 14px rgba(0,155,185,.32),0 -2px 0 rgba(0,0,0,.25) inset;
  transition:transform .1s,box-shadow .2s;position:relative;overflow:hidden;
}
#shield-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 55%);border-radius:8px;pointer-events:none;}
#shield-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,170,200,.48);}
#shield-btn:active{transform:translateY(1px);}
#shield-btn.hidden{display:none;}
.kb-hint{font-size:.5rem;letter-spacing:.2em;color:rgba(0,212,255,.22);text-align:center;text-transform:uppercase;}
.kb-key{display:inline-block;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.16);border-radius:4px;padding:1px 5px;font-size:.48rem;color:rgba(0,212,255,.42);margin:0 2px;}

#mute-btn{position:absolute;top:11px;right:11px;z-index:200;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.16);border-radius:7px;padding:5px 9px;cursor:pointer;font-size:.62rem;color:rgba(0,212,255,.5);letter-spacing:.07em;transition:all .2s;font-family:'Rajdhani',sans-serif;font-weight:600;}
#mute-btn:hover{background:rgba(0,212,255,.12);color:var(--accent);}

/* PAUSE */
#pause-overlay{position:absolute;inset:0;background:rgba(4,6,15,.92);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:150;transition:opacity .25s;}
#pause-overlay.hidden{opacity:0;pointer-events:none;}
.pause-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:2.6rem;background:linear-gradient(135deg,#00d4ff,#aa44ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.12em;}

/* GAME OVER */
#gameover-screen{gap:0;padding:8px 12px 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.go-top-row{display:flex;align-items:center;gap:8px;width:100%;max-width:400px;justify-content:space-between;padding:0 2px;}
.go-crown{font-size:1.4rem;animation:crown-bounce .6s ease-out;margin-bottom:0;}
@keyframes crown-bounce{0%{transform:scale(0) rotate(-15deg);}70%{transform:scale(1.12) rotate(3deg);}100%{transform:scale(1) rotate(0);}}
.go-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1rem,3.5vw,1.3rem);text-align:center;letter-spacing:.08em;margin-bottom:2px;}
.go-title.win{background:linear-gradient(135deg,var(--good),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(0,255,136,.25));}
.go-title.lose{background:linear-gradient(135deg,var(--hot),#ff6688);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(255,34,85,.25));}
.go-score-card{display:flex;flex-direction:column;align-items:center;}
.go-score-label{font-size:.5rem;letter-spacing:.32em;color:var(--text2);text-transform:uppercase;}
#new-best-banner{font-family:'Exo 2',sans-serif;font-weight:900;font-size:.82rem;color:var(--warn);letter-spacing:.1em;text-shadow:var(--glow-w);animation:best-pulse .5s ease-in-out infinite alternate;display:none;}
@keyframes best-pulse{from{opacity:.6;transform:scale(.97);}to{opacity:1;transform:scale(1.03);}}
.go-score-num{font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1.6rem,6vw,2.2rem);line-height:1;background:linear-gradient(135deg,#ffdd00,#ffaa00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(255,200,0,.3));animation:score-pop .4s cubic-bezier(.17,.67,.35,1.4) both;}
@keyframes score-pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.go-best-row{display:flex;align-items:center;gap:8px;margin:2px 0;}
.go-best-badge{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;padding:2px 9px;border-radius:20px;border:1px solid rgba(255,187,0,.28);color:rgba(255,187,0,.6);background:rgba(255,187,0,.04);}
.go-best-badge.new-record{color:var(--warn);border-color:var(--warn);background:rgba(255,187,0,.09);animation:pulse-record .5s infinite alternate;}
@keyframes pulse-record{from{box-shadow:none;}to{box-shadow:0 0 10px rgba(255,187,0,.35);}}
.go-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;width:100%;max-width:400px;margin:4px 0;}
/* 8-stat 4-column grid for game over */
.go-stats-full{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:100%;max-width:400px;margin:3px 0;}
.go-stat{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:6px;padding:3px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.03);}
.go-stat-icon{font-size:.7rem;}
.go-stat-val{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.75rem;color:var(--accent);line-height:1;}
.go-stat-label{font-size:.34rem;letter-spacing:.12em;color:var(--text2);text-transform:uppercase;}
.go-perf-wrap{width:100%;max-width:400px;margin:2px 0 0;}
.go-perf-label{font-size:.42rem;letter-spacing:.22em;color:var(--text2);text-transform:uppercase;margin-bottom:2px;text-align:center;}
.go-perf-bar-bg{height:3px;background:rgba(0,212,255,.07);border-radius:3px;overflow:hidden;}
.go-perf-bar{height:100%;border-radius:3px;transition:width 1.1s cubic-bezier(.25,1,.5,1);}
.go-rating{font-family:'Exo 2',sans-serif;font-weight:900;font-size:.82rem;letter-spacing:.1em;text-align:center;margin:2px 0;animation:rating-in .32s ease-out .22s both;}
@keyframes rating-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.go-mode-chip{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:20px;border:1px solid;margin-bottom:3px;}
.go-btn-row{display:flex;gap:5px;width:100%;max-width:400px;margin-top:3px;flex-shrink:0;}
.go-ad-row{display:flex;gap:5px;width:100%;max-width:400px;margin-top:3px;flex-shrink:0;}
#revive-btn,#double-score-btn{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:.58rem;letter-spacing:.07em;
  color:#fff;border:none;border-radius:8px;padding:10px 5px;cursor:pointer;
  text-transform:uppercase;flex:1;min-width:0;text-align:center;
  position:relative;overflow:hidden;transition:transform .1s,box-shadow .2s;
}
#revive-btn::before,#double-score-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 55%);pointer-events:none;}
#revive-btn{background:linear-gradient(135deg,#5500aa,#9900ee);box-shadow:0 4px 14px rgba(140,0,220,.32),0 -1px 0 rgba(0,0,0,.25) inset;}
#revive-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(140,0,220,.52);}
#revive-btn:active{transform:translateY(1px);}
#revive-btn.hidden{display:none;}
#double-score-btn{background:linear-gradient(135deg,#886600,#ddaa00);box-shadow:0 4px 14px rgba(200,160,0,.28),0 -1px 0 rgba(0,0,0,.25) inset;}
#double-score-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(200,160,0,.48);}
#double-score-btn:active{transform:translateY(1px);}
#double-score-btn.hidden{display:none;}

/* GAME WRAPPER */
#game-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;height:600px;max-height:600px;overflow:hidden;padding:9px 12px 8px;box-sizing:border-box;}
#game-header{display:flex;flex-direction:column;align-items:center;gap:2px;}
h1{font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1.2rem,3.5vw,1.65rem);letter-spacing:.1em;background:linear-gradient(135deg,#00d4ff,#aa44ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;filter:drop-shadow(0 0 8px rgba(0,212,255,.28));}
#tagline{font-size:.5rem;letter-spacing:.32em;color:var(--text2);text-transform:uppercase;}
#shield-indicator{font-size:.48rem;letter-spacing:.2em;color:#00e8ff;text-transform:uppercase;text-align:center;display:none;animation:s-pulse 1s ease-in-out infinite alternate;}
#shield-indicator.active{display:block;}
@keyframes s-pulse{from{opacity:.4;}to{opacity:1;text-shadow:0 0 10px #00e8ff,0 0 20px rgba(0,232,255,.25);}}
#mode-badge{font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;padding:2px 9px;border-radius:20px;border:1px solid;font-family:'Rajdhani',sans-serif;}
#mode-badge.classic{color:var(--accent);border-color:rgba(0,212,255,.28);background:rgba(0,212,255,.05);}
#mode-badge.blitz{color:var(--warn);border-color:rgba(255,187,0,.28);background:rgba(255,187,0,.05);}
#mode-badge.ghost{color:var(--purple);border-color:rgba(170,68,255,.28);background:rgba(170,68,255,.05);}
#mode-badge.bomb{color:var(--orange);border-color:rgba(255,119,0,.28);background:rgba(255,119,0,.05);}

/* HUD */
#hud{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.hud-box{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:8px;padding:5px 7px;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -2px 4px rgba(0,0,0,.3);position:relative;overflow:hidden;}
.hud-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.18),transparent);}
.hud-label{font-size:.44rem;letter-spacing:.26em;color:var(--text2);text-transform:uppercase;}
.hud-val{font-family:'Exo 2',sans-serif;font-size:1.1rem;font-weight:900;color:var(--accent);line-height:1;text-shadow:0 0 10px rgba(0,212,255,.35);}
#lives-val{color:var(--hot);text-shadow:0 0 10px rgba(255,34,85,.35);font-size:.8rem;}

/* TIMER */
#timer-bar-wrap{width:100%;height:4px;background:rgba(0,212,255,.07);border-radius:2px;overflow:hidden;}
#timer-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:2px;box-shadow:0 0 6px var(--accent);}

/* COMBO */
#combo-display{font-family:'Exo 2',sans-serif;font-size:.65rem;letter-spacing:.13em;height:16px;text-align:center;opacity:0;transition:opacity .2s;}
#combo-display.show{opacity:1;}
#combo-display.c3{color:#ffdd55;}#combo-display.c5{color:#ffaa00;}#combo-display.c7{color:#ff7700;}
#combo-display.c10{color:#ff3300;animation:cshake .28s ease-in-out;}
#combo-display.c15{color:#ff00ff;animation:cshake .2s ease-in-out infinite alternate;}
#combo-display.c20{color:#fff;animation:cflash .22s ease-in-out infinite alternate;}
@keyframes cshake{0%,100%{transform:translateX(0);}33%{transform:translateX(-3px);}66%{transform:translateX(3px);}}
@keyframes cflash{from{text-shadow:0 0 8px #fff;}to{text-shadow:0 0 18px #fff,0 0 36px #ff00ff;}}

/* ═══════════════════════════
   3D GRID
   ═══════════════════════════ */
#grid-container{position:relative;width:100%;flex:1 1 0;min-height:0;perspective:500px;}
#grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:5px;width:100%;height:100%;}

.cell{
  border-radius:8px;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:transform .08s,filter .1s;
  /* Inactive tile: lighter base so it reads as a real button */
  background:linear-gradient(155deg,#162540 0%,#0c1628 100%);
  border:1px solid rgba(0,212,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(0,212,255,.14),
    inset 0 -2px 5px rgba(0,0,0,.45),
    3px 3px 0 #020814,
    4px 4px 0 rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.5);
}
.cell::before{content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(148deg,rgba(0,212,255,.08),transparent 55%);pointer-events:none;}
.cell:hover:not(.locked){transform:translateY(-1px) translateX(-1px) scale(.97);border-color:rgba(0,212,255,.35);}
.cell.locked{cursor:default;}
.cell .key-label{position:absolute;bottom:2px;right:3px;font-size:.36rem;color:rgba(0,212,255,.25);font-family:'Rajdhani',sans-serif;pointer-events:none;}
.cell.active .key-label,.cell.active-danger .key-label{color:rgba(0,0,0,.35);}

/* ── ACTIVE TILE — high brightness, max visibility ── */
.cell.active{
  background:linear-gradient(140deg,#22ffff 0%,#00bbdd 45%,#007799 100%);
  border:2px solid rgba(0,255,255,.9);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.2),
    3px 3px 0 #001a22,
    0 0 20px rgba(0,230,255,.9),
    0 0 50px rgba(0,200,255,.5),
    0 0 80px rgba(0,180,255,.2);
  animation:t-pulse .5s ease-in-out infinite alternate;
}
@keyframes t-pulse{
  from{
    box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.2),3px 3px 0 #001a22,0 0 14px rgba(0,230,255,.75),0 0 35px rgba(0,200,255,.35);
  }
  to{
    box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.2),3px 3px 0 #001a22,0 0 28px rgba(0,240,255,1),0 0 60px rgba(0,210,255,.65),0 0 100px rgba(0,180,255,.3);
  }
}

/* ── DANGER TILE — urgent yellow-orange, impossible to miss ── */
.cell.active-danger{
  background:linear-gradient(140deg,#ffff44 0%,#ffaa00 50%,#cc6600 100%);
  border:2px solid rgba(255,240,0,.95);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.25),
    3px 3px 0 #221a00,
    0 0 22px rgba(255,220,0,.95),
    0 0 55px rgba(255,180,0,.6),
    0 0 90px rgba(255,140,0,.25);
  animation:d-pulse .25s ease-in-out infinite alternate;
}
@keyframes d-pulse{
  from{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #221a00,0 0 16px rgba(255,220,0,.8),0 0 40px rgba(255,180,0,.4);}
  to{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),3px 3px 0 #221a00,0 0 30px rgba(255,230,0,1),0 0 70px rgba(255,190,0,.7),0 0 110px rgba(255,150,0,.3);}
}

/* ── GHOST TILE ── */
.cell.active.ghost-tile{
  background:linear-gradient(140deg,#dd99ff,#8833dd 50%,#550099 100%);
  border:2px solid rgba(220,120,255,.85);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #0d0020,0 0 20px rgba(200,80,255,.85),0 0 50px rgba(170,50,255,.4);
}

/* ── BOMB TILE ── */
.cell.active.bomb-tile{
  background:linear-gradient(140deg,#ff9900 0%,#ee4400 50%,#aa2200 100%);
  border:2px solid rgba(255,140,0,.9);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),3px 3px 0 #220800,0 0 22px rgba(255,130,0,.9),0 0 55px rgba(255,100,0,.4);
  animation:b-pulse .38s ease-in-out infinite alternate;
}
@keyframes b-pulse{
  from{box-shadow:inset 0 2px 0 rgba(255,255,255,.28),3px 3px 0 #220800,0 0 14px rgba(255,130,0,.7);}
  to{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),3px 3px 0 #220800,0 0 28px rgba(255,140,0,1),0 0 65px rgba(255,110,0,.5);}
}

/* ── HIT / MISS FLASH ── */
.cell.hit{
  background:linear-gradient(140deg,#44ffaa,#00ee77);
  border:2px solid #00ff99;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #002211,0 0 24px rgba(0,255,136,.9);
  animation:f-hit .28s forwards;
}
.cell.miss{
  background:linear-gradient(140deg,#ff3366,#dd0033);
  border:2px solid #ff3366;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),3px 3px 0 #220008,0 0 22px rgba(255,50,100,.9);
  animation:f-miss .3s forwards;
}
@keyframes f-hit{
  0%{transform:scale(1.1) translateY(-2px);}
  100%{transform:scale(1);background:linear-gradient(155deg,#162540,#0c1628);border:1px solid rgba(0,212,255,.18);box-shadow:3px 3px 0 #020814,0 4px 12px rgba(0,0,0,.5);}
}
@keyframes f-miss{
  0%{transform:scale(.86);}
  100%{transform:scale(1);background:linear-gradient(155deg,#162540,#0c1628);border:1px solid rgba(0,212,255,.18);box-shadow:3px 3px 0 #020814,0 4px 12px rgba(0,0,0,.5);}
}
.cell.kb-highlight{outline:2px solid rgba(0,255,255,.7);outline-offset:2px;}

#level-indicator{font-size:.48rem;letter-spacing:.22em;color:var(--text2);text-transform:uppercase;text-align:center;}
#ingame-kb{font-size:.44rem;letter-spacing:.17em;color:rgba(0,212,255,.18);text-align:center;text-transform:uppercase;}

/* MISC */
#levelup-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1.3rem,4.5vw,2rem);color:#fff;letter-spacing:.1em;text-align:center;pointer-events:none;z-index:200;opacity:0;text-shadow:0 0 18px rgba(0,212,255,.55);}
#levelup-banner.show{animation:b-pop 1.3s ease-out forwards;}
@keyframes b-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}20%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}55%{opacity:1;transform:translate(-50%,-50%) scale(1);}80%{opacity:.85;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08);}}
.score-pop{position:absolute;pointer-events:none;font-family:'Exo 2',sans-serif;font-weight:700;font-size:.85rem;color:var(--good);text-shadow:var(--glow-g);z-index:10;animation:pop-up .62s forwards;white-space:nowrap;}
.score-pop.neg{color:var(--hot);text-shadow:var(--glow-h);}
.score-pop.big{font-size:1.1rem;color:var(--warn);text-shadow:var(--glow-w);}
.score-pop.mega{font-size:1.35rem;color:#ff00ff;text-shadow:0 0 14px #ff00ff;}
@keyframes pop-up{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-48px) scale(1.28);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.shake{animation:shake .35s ease-in-out;}
#go-flash{position:absolute;inset:0;background:#fff;z-index:200;opacity:0;pointer-events:none;transition:opacity .12s;}
#go-flash.pop{opacity:.14;}

/* TUTORIAL */
#tutorial-overlay{position:absolute;inset:0;background:rgba(4,6,15,.97);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:20px;transition:opacity .3s;}
#tutorial-overlay.hidden{opacity:0;pointer-events:none;}
.tut-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(1.3rem,4.5vw,1.8rem);background:linear-gradient(135deg,#00d4ff,#aa44ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.08em;text-align:center;}
.tut-steps{display:flex;flex-direction:column;gap:9px;width:100%;max-width:355px;}
.tut-step{display:flex;align-items:center;gap:11px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:10px;padding:10px 13px;box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03);}
.tut-step-icon{font-size:1.7rem;flex-shrink:0;}
.tut-step-text{font-size:.62rem;line-height:1.6;color:rgba(200,220,255,.72);}
.tut-step-text strong{color:var(--accent);font-family:'Exo 2',sans-serif;font-size:.58rem;}
.tut-cell{width:28px;height:28px;border-radius:5px;background:var(--dim);border:1px solid rgba(0,212,255,.09);display:inline-flex;align-items:center;justify-content:center;margin:0 2px;vertical-align:middle;box-shadow:2px 2px 0 rgba(0,0,0,.5);}
.tut-cell.lit{background:linear-gradient(140deg,#00eeff,#009fcc);border-color:var(--accent);box-shadow:2px 2px 0 #001a22,0 0 9px rgba(0,235,255,.48);animation:tut-p .7s infinite alternate;}
.tut-cell.danger{background:linear-gradient(140deg,#ffee00,#cc8800);border-color:var(--warn);box-shadow:2px 2px 0 #221a00,0 0 9px rgba(255,210,0,.48);animation:tut-p .4s infinite alternate;}
.tut-cell.bomb{background:linear-gradient(140deg,#ff8800,#cc4400);border-color:var(--orange);box-shadow:2px 2px 0 #220800,0 0 9px rgba(255,120,0,.48);}
@keyframes tut-p{from{opacity:.5;}to{opacity:1;}}

/* BOMB TOAST */
#bomb-toast{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:rgba(255,119,0,.1);border:1px solid rgba(255,119,0,.38);border-radius:8px;padding:7px 16px;font-size:.62rem;letter-spacing:.1em;color:var(--orange);z-index:250;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s;}
#bomb-toast.show{opacity:1;}

/* AD OVERLAY */
#revive-overlay{position:absolute;inset:0;background:rgba(4,6,15,.93);backdrop-filter:blur(6px);z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;opacity:0;pointer-events:none;transition:opacity .28s;}
#revive-overlay.show{opacity:1;pointer-events:all;}
.revive-card{background:linear-gradient(160deg,#0e1a35,#080e22);border:1px solid rgba(170,68,255,.28);border-radius:14px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:11px;box-shadow:0 0 0 1px rgba(170,68,255,.09),0 20px 50px rgba(0,0,0,.6),0 0 28px rgba(100,0,200,.14),inset 0 1px 0 rgba(255,255,255,.04);max-width:310px;width:100%;text-align:center;}
.revive-icon{font-size:2.4rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.revive-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:.95rem;color:var(--purple);letter-spacing:.1em;text-shadow:0 0 12px rgba(170,68,255,.38);}
.revive-desc{font-size:.6rem;line-height:1.7;color:rgba(200,180,255,.6);}
.revive-timer{font-family:'Exo 2',sans-serif;font-weight:900;font-size:2.2rem;color:var(--warn);text-shadow:var(--glow-w);line-height:1;}
.revive-timer-label{font-size:.48rem;letter-spacing:.28em;color:rgba(255,187,0,.42);text-transform:uppercase;}
.revive-bar-wrap{width:100%;height:4px;background:rgba(170,68,255,.1);border-radius:2px;overflow:hidden;}
.revive-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--purple),var(--accent));border-radius:2px;box-shadow:0 0 7px var(--purple);}
#revive-retry-btn{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.11em;color:var(--accent);background:transparent;border:1px solid rgba(0,212,255,.22);border-radius:7px;padding:8px 18px;cursor:pointer;text-transform:uppercase;transition:all .2s;display:none;margin-top:2px;}
#revive-retry-btn:hover{border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.05);}

/* RESPONSIVE */
@media (max-height:520px){#game-wrapper{gap:2px;padding:2px 7px;}h1{font-size:clamp(.78rem,2.5vw,.98rem);}#tagline,#mode-badge,#ingame-kb,#level-indicator{display:none;}.hud-box{padding:2px 3px;}.hud-val{font-size:.78rem;}.hud-label{font-size:.36rem;}#combo-display{height:9px;font-size:.48rem;}#grid{gap:3px;}.cell{border-radius:4px;}#timer-bar-wrap{height:3px;}}
@media (pointer:coarse){.cell{border-radius:9px;-webkit-tap-highlight-color:transparent;}#grid{gap:6px;}#ingame-kb{display:none;}.kb-hint{display:none;}.opt-card{min-width:74px;padding:10px 5px;}#game-wrapper{padding:9px 9px 14px;}.btn{padding:12px 26px;}#mute-btn{top:8px;right:8px;}}
/* Touch & tap improvements */
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
/* Safe area for notched phones */
#app{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}

/* ═══ COLOUR THEMES ═══ */
#app.theme-purple{--accent:#cc44ff;--border:rgba(170,68,255,.15);}
#app.theme-purple .cell.active{background:linear-gradient(140deg,#ee88ff,#bb22ee,#770099);border:2px solid rgba(240,120,255,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #1a0030,0 0 22px rgba(220,80,255,.9),0 0 55px rgba(190,50,255,.45);}
#app.theme-purple .cell.active-danger{background:linear-gradient(140deg,#ff88ff,#dd00bb,#880077);border:2px solid rgba(255,100,255,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #1a0020,0 0 22px rgba(255,80,220,.9),0 0 55px rgba(220,0,180,.45);}
#app.theme-green .cell.active{background:linear-gradient(140deg,#66ffbb,#00ee77,#007744);border:2px solid rgba(0,255,150,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #002211,0 0 22px rgba(0,255,130,.9),0 0 55px rgba(0,220,90,.45);}
#app.theme-green .cell.active-danger{background:linear-gradient(140deg,#ffff55,#eeaa00,#996600);border:2px solid rgba(255,240,0,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #221a00,0 0 22px rgba(255,230,0,.9),0 0 55px rgba(255,180,0,.45);}
#app.theme-red .cell.active{background:linear-gradient(140deg,#ff8899,#ee1133,#990022);border:2px solid rgba(255,90,100,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #220008,0 0 22px rgba(255,70,90,.9),0 0 55px rgba(220,20,50,.45);}
#app.theme-red .cell.active-danger{background:linear-gradient(140deg,#ffaa44,#ff6600,#cc3300);border:2px solid rgba(255,140,0,.9);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),3px 3px 0 #220800,0 0 22px rgba(255,140,0,.9),0 0 55px rgba(255,100,0,.45);}
/* ═══ THEME SELECTOR ═══ */
.theme-row{display:flex;align-items:center;gap:7px;justify-content:center;}
.theme-label{font-size:.46rem;letter-spacing:.22em;color:rgba(0,212,255,.35);text-transform:uppercase;}
.theme-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .2s;box-shadow:0 2px 7px rgba(0,0,0,.5);}
.theme-dot:hover{transform:scale(1.2);}
.theme-dot.selected{border-color:#fff;transform:scale(1.18);box-shadow:0 0 0 2px rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.5);}
.theme-dot.t-c{background:radial-gradient(circle at 35% 35%,#44eeff,#0088aa);}
.theme-dot.t-p{background:radial-gradient(circle at 35% 35%,#cc66ff,#6600cc);}
.theme-dot.t-g{background:radial-gradient(circle at 35% 35%,#44ff99,#008844);}
.theme-dot.t-r{background:radial-gradient(circle at 35% 35%,#ff5577,#aa0022);}

/* ═══ SPECIAL TILES ═══ */
.cell.active.freeze-tile{
  background:linear-gradient(140deg,#ccf8ff,#44ccee,#0077aa);
  border:2px solid rgba(150,240,255,.95);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),3px 3px 0 #001825,0 0 26px rgba(100,230,255,.95),0 0 60px rgba(0,210,255,.55),0 0 90px rgba(0,180,255,.25);
  animation:freeze-pulse .45s ease-in-out infinite alternate;
}
@keyframes freeze-pulse{
  from{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),3px 3px 0 #001825,0 0 18px rgba(100,230,255,.75),0 0 40px rgba(0,210,255,.35);}
  to{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),3px 3px 0 #001825,0 0 32px rgba(100,240,255,1),0 0 70px rgba(0,220,255,.65),0 0 110px rgba(0,190,255,.3);}
}
.cell.active.boost-tile{
  background:linear-gradient(140deg,#ffff55,#ffbb00,#dd7700);
  border:2px solid rgba(255,240,0,.95);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),3px 3px 0 #221800,0 0 26px rgba(255,220,0,.95),0 0 60px rgba(255,160,0,.55),0 0 90px rgba(255,120,0,.25);
  animation:boost-pulse .18s ease-in-out infinite alternate;
}
@keyframes boost-pulse{
  from{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),3px 3px 0 #221800,0 0 18px rgba(255,220,0,.8),0 0 40px rgba(255,160,0,.4);}
  to{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),3px 3px 0 #221800,0 0 32px rgba(255,240,0,1),0 0 72px rgba(255,170,0,.65),0 0 110px rgba(255,130,0,.3);}
}

/* Frozen overlay label */
#grid-container.frozen::after{
  content:'❄️ FROZEN!';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:.1em;
  color:#aaeeff;text-shadow:0 0 18px #00eeff,0 0 40px rgba(0,220,255,.5);
  pointer-events:none;z-index:50;animation:fz-label .22s ease-out;
}
@keyframes fz-label{from{opacity:0;transform:translate(-50%,-50%) scale(.7);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}

/* ═══ TAP PARTICLES ═══ */
.particle{position:absolute;pointer-events:none;border-radius:50%;z-index:300;animation:pfly var(--dur,.55s) ease-out forwards;}
@keyframes pfly{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--tx,0px),var(--ty,-50px)) scale(0);opacity:0;}}

/* ═══ STREAK BANNER ═══ */
#streak-banner{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:1rem;letter-spacing:.1em;
  color:#fff;text-align:center;pointer-events:none;z-index:201;
  opacity:0;text-shadow:0 0 20px #ffdd00,0 0 40px rgba(255,200,0,.5);
}
#streak-banner.show{animation:streak-pop 1.5s ease-out forwards;}
@keyframes streak-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-4deg);}18%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(2deg);}45%{opacity:1;transform:translate(-50%,-50%) scale(1);}75%{opacity:.9;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05);}}

/* ═══ POWER-UP BUTTONS ═══ */
.powerup-row{display:flex;gap:5px;width:100%;max-width:420px;}
.powerup-btn{
  flex:1;font-family:'Exo 2',sans-serif;font-weight:700;font-size:.52rem;letter-spacing:.06em;
  color:#fff;border:none;border-radius:8px;padding:7px 5px;cursor:pointer;text-transform:uppercase;
  position:relative;overflow:hidden;transition:transform .1s,box-shadow .2s;text-align:center;line-height:1.4;
}
.powerup-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%);pointer-events:none;border-radius:8px;}
#freeze-unlock-btn{background:linear-gradient(135deg,#003d5c,#0099cc);box-shadow:0 4px 14px rgba(0,130,180,.35),0 -1px 0 rgba(0,0,0,.3) inset;}
#freeze-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,130,180,.55);}
#boost-unlock-btn{background:linear-gradient(135deg,#664400,#cc9900);box-shadow:0 4px 14px rgba(180,140,0,.35),0 -1px 0 rgba(0,0,0,.3) inset;}
#boost-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(180,140,0,.55);}
#mult-unlock-btn{background:linear-gradient(135deg,#5c0044,#cc0099);box-shadow:0 4px 14px rgba(180,0,130,.35),0 -1px 0 rgba(0,0,0,.3) inset;color:#fff;}
#mult-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(180,0,130,.55);}
.powerup-btn.unlocked{border:1px solid rgba(0,255,136,.45);box-shadow:0 0 0 1px rgba(0,255,136,.15),0 4px 14px rgba(0,200,100,.28);}
.pup-sub{font-size:.40rem;opacity:.7;font-weight:400;display:block;margin-top:1px;}

/* ═══ RECORDS PANEL ═══ */
#records-panel{
  position:absolute;inset:0;background:rgba(4,6,15,.97);z-index:350;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:16px 14px 10px;gap:9px;overflow-y:auto;transition:opacity .3s;
}
#records-panel.hidden{opacity:0;pointer-events:none;}
.rec-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.45rem;
  background:linear-gradient(135deg,#ffdd00,#ff8800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.08em;text-align:center;filter:drop-shadow(0 0 12px rgba(255,200,0,.28));}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;max-width:430px;}
.rec-card{background:linear-gradient(160deg,#0d1a30,#080e1e);border:1px solid rgba(0,212,255,.09);border-radius:9px;padding:9px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 12px rgba(0,0,0,.5);}
.rec-mode{font-size:.48rem;letter-spacing:.18em;color:var(--text2);text-transform:uppercase;}
.rec-score{font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.3rem;color:var(--warn);line-height:1;text-shadow:0 0 8px rgba(255,200,0,.28);}
.rec-score.empty{color:rgba(120,153,192,.28);font-size:.88rem;}
.rec-diff{font-size:.42rem;letter-spacing:.14em;color:rgba(0,212,255,.28);text-transform:uppercase;}
#records-btn{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.54rem;letter-spacing:.1em;color:rgba(255,200,0,.6);background:transparent;border:1px solid rgba(255,200,0,.2);border-radius:7px;padding:6px 12px;cursor:pointer;text-transform:uppercase;transition:all .2s;}
#records-btn:hover{border-color:rgba(255,200,0,.45);color:var(--warn);}

/* ═══ SHARE BUTTON ═══ */
#share-btn{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:.56rem;letter-spacing:.08em;
  color:#fff;border:none;border-radius:8px;padding:10px 5px;cursor:pointer;text-transform:uppercase;
  flex:1;min-width:0;text-align:center;position:relative;overflow:hidden;transition:transform .1s,box-shadow .2s;
  background:linear-gradient(135deg,#1a5c00,#33aa00);box-shadow:0 4px 14px rgba(30,160,0,.28),0 -1px 0 rgba(0,0,0,.25) inset;
}
#share-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 55%);pointer-events:none;}
#share-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(30,160,0,.5);}

/* ═══ EXTENDED STATS ROW ═══ */
.go-ext-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;max-width:400px;margin:3px 0 0;}

/* ═══ MULTIPLIER TILE ═══ */
.cell.active.mult-tile{
  background:linear-gradient(140deg,#ff44cc,#cc0099,#880066);
  border-color:rgba(255,100,220,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 5px rgba(0,0,0,.3),3px 3px 0 #1a0012,4px 4px 0 rgba(0,0,0,.5),0 0 24px rgba(255,60,200,.85),0 0 50px rgba(220,0,160,.35);
  animation:mult-pulse .35s ease-in-out infinite alternate;
}
@keyframes mult-pulse{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),3px 3px 0 #1a0012,0 0 14px rgba(255,60,200,.6);}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),3px 3px 0 #1a0012,0 0 30px rgba(255,60,200,1),0 0 60px rgba(220,0,160,.45);}}

/* ═══ TILE POINT LABELS ═══ */
.cell .pts-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Exo 2',sans-serif;font-weight:900;font-size:.7rem;color:rgba(0,0,0,.35);pointer-events:none;z-index:2;letter-spacing:-.02em;}
.cell.active .pts-label,.cell.active-danger .pts-label{color:rgba(0,0,0,.28);}
.cell.active.mult-tile .pts-label{color:rgba(255,255,255,.6);font-size:.65rem;}

/* ═══ MULTIPLIER HUD ═══ */
#mult-indicator{font-size:.48rem;letter-spacing:.18em;color:#ff44cc;text-transform:uppercase;text-align:center;display:none;animation:mult-ind-pulse .5s ease-in-out infinite alternate;}
#mult-indicator.active{display:block;}
@keyframes mult-ind-pulse{from{opacity:.5;}to{opacity:1;text-shadow:0 0 10px #ff44cc,0 0 22px rgba(255,60,200,.3);}}

/* ═══ ACHIEVEMENTS ═══ */
#achievements-panel{
  position:absolute;inset:0;background:rgba(4,6,15,.97);z-index:350;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:16px 14px 10px;gap:8px;overflow-y:auto;transition:opacity .3s;
}
#achievements-panel.hidden{opacity:0;pointer-events:none;}
.ach-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.4rem;
  background:linear-gradient(135deg,#aa44ff,#ff44cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.08em;text-align:center;filter:drop-shadow(0 0 12px rgba(170,68,255,.28));}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;max-width:430px;}
.ach-card{background:linear-gradient(160deg,#0d1a30,#080e1e);border:1px solid rgba(170,68,255,.12);border-radius:9px;padding:9px 8px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:border-color .2s;}
.ach-card.unlocked{border-color:rgba(170,68,255,.45);box-shadow:0 0 0 1px rgba(170,68,255,.15),0 4px 12px rgba(0,0,0,.5);}
.ach-icon{font-size:1.5rem;flex-shrink:0;filter:grayscale(1) opacity(.25);transition:filter .3s;}
.ach-card.unlocked .ach-icon{filter:none;}
.ach-info{display:flex;flex-direction:column;gap:1px;}
.ach-name{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.56rem;color:rgba(170,100,255,.5);letter-spacing:.06em;text-transform:uppercase;}
.ach-card.unlocked .ach-name{color:var(--purple);}
.ach-desc{font-size:.42rem;color:rgba(120,153,192,.45);line-height:1.4;}
.ach-card.unlocked .ach-desc{color:var(--text2);}
#ach-btn{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.54rem;letter-spacing:.1em;color:rgba(170,68,255,.6);background:transparent;border:1px solid rgba(170,68,255,.2);border-radius:7px;padding:6px 12px;cursor:pointer;text-transform:uppercase;transition:all .2s;}
#ach-btn:hover{border-color:rgba(170,68,255,.45);color:var(--purple);}
#ach-toast{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(14,10,30,.96),rgba(22,8,40,.96));border:1px solid rgba(170,68,255,.5);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;z-index:500;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s;box-shadow:0 0 0 1px rgba(170,68,255,.15),0 8px 24px rgba(0,0,0,.6);}
#ach-toast.show{opacity:1;}
.ach-toast-icon{font-size:1.4rem;}
.ach-toast-text{display:flex;flex-direction:column;gap:1px;}
.ach-toast-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:.62rem;color:var(--purple);letter-spacing:.06em;}
.ach-toast-sub{font-size:.48rem;color:rgba(200,180,255,.55);}

/* ═══ DAILY CHALLENGE ═══ */
#daily-badge{width:100%;max-width:420px;background:linear-gradient(135deg,rgba(0,80,30,.25),rgba(0,50,20,.15));border:1px solid rgba(0,200,80,.22);border-radius:10px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border-color .2s,box-shadow .2s;box-shadow:0 3px 12px rgba(0,0,0,.4);}
#daily-badge:hover{border-color:rgba(0,255,100,.4);box-shadow:0 0 0 1px rgba(0,200,80,.15),0 4px 16px rgba(0,150,60,.2);}
.daily-left{display:flex;flex-direction:column;gap:2px;}
.daily-title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:.64rem;color:var(--good);letter-spacing:.08em;}
.daily-sub{font-size:.46rem;color:rgba(0,200,80,.5);letter-spacing:.14em;}
.daily-pill{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.54rem;letter-spacing:.08em;padding:4px 10px;border-radius:20px;border:1px solid rgba(0,200,80,.35);color:var(--good);background:rgba(0,200,80,.08);}
.daily-pill.done{color:var(--warn);border-color:rgba(255,200,0,.35);background:rgba(255,200,0,.06);}

/* ═══ GRID SKINS ═══ */
#app.skin-retro .cell{border-radius:3px;}
#app.skin-retro .cell.active{background:#00ff00;border:2px solid #00ff00;box-shadow:inset 0 0 0 2px #003300,0 0 18px #00ff00,0 0 40px rgba(0,255,0,.4),4px 4px 0 #001100;animation:none;}
#app.skin-retro .cell.active-danger{background:#ffff00;border:2px solid #ffff00;box-shadow:inset 0 0 0 2px #333300,0 0 18px #ffff00,0 0 40px rgba(255,255,0,.4),4px 4px 0 #111100;animation:none;}
#app.skin-retro #grid{background:#000;border:2px solid #003300;border-radius:4px;padding:3px;}
#app.skin-retro .hud-box{border-radius:2px;background:#001100;border-color:#003300;}
#app.skin-retro .hud-val{font-family:'Courier New',monospace;color:#00ff00;text-shadow:0 0 6px #00ff00;}
#app.skin-minimal .cell{border-radius:4px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);box-shadow:none;}
#app.skin-minimal .cell.active{background:var(--accent);border:2px solid var(--accent);box-shadow:0 0 16px var(--accent),0 0 40px var(--accent);animation:none;}
#app.skin-minimal .cell.active-danger{background:var(--warn);border:2px solid var(--warn);box-shadow:0 0 16px var(--warn),0 0 40px var(--warn);animation:none;}
#app.skin-minimal .hud-box{background:transparent;border-color:rgba(255,255,255,.06);box-shadow:none;}
#app.skin-minimal #grid{gap:4px;}
.skin-row{display:flex;align-items:center;gap:6px;justify-content:center;}
.skin-label{font-size:.46rem;letter-spacing:.22em;color:rgba(0,212,255,.35);text-transform:uppercase;}
.skin-btn{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.46rem;letter-spacing:.07em;color:var(--text2);background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.1);border-radius:6px;padding:4px 9px;cursor:pointer;text-transform:uppercase;transition:all .15s;}
.skin-btn:hover{border-color:rgba(0,212,255,.28);color:var(--accent);}
.skin-btn.selected{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.08);}

/* ═══ MISS LIVES FLASH ═══ */
@keyframes lives-flash{0%{transform:scale(1);}20%{transform:scale(1.4);filter:brightness(2);}60%{transform:scale(1.1);}100%{transform:scale(1);}}
.lives-flash{animation:lives-flash .38s ease-out;}

/* ═══ LANDSCAPE WARNING ═══ */
#landscape-warn{display:none;position:fixed;inset:0;background:rgba(4,6,15,.97);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
#landscape-warn.show{display:flex;}
.lw-icon{font-size:3rem;animation:lw-spin 2s ease-in-out infinite;}
@keyframes lw-spin{0%,100%{transform:rotate(0deg);}50%{transform:rotate(90deg);}}
.lw-text{font-family:'Exo 2',sans-serif;font-weight:900;font-size:1rem;color:var(--accent);letter-spacing:.1em;text-align:center;}
.lw-sub{font-size:.55rem;color:var(--text2);letter-spacing:.2em;text-transform:uppercase;text-align:center;}

/* ═══ OFFLINE BADGE ═══ */
#offline-badge{position:absolute;top:8px;left:8px;z-index:200;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.44rem;letter-spacing:.14em;color:rgba(255,187,0,.6);background:rgba(255,187,0,.06);border:1px solid rgba(255,187,0,.2);border-radius:5px;padding:3px 7px;text-transform:uppercase;display:none;}
#offline-badge.show{display:block;}

/* ═══ TIME ATTACK / SURVIVAL MODE CARDS ═══ */
.opt-card.mode-time{} /* uses warn colour */
.opt-card.mode-time.selected{border-color:var(--warn);box-shadow:0 0 0 1px rgba(255,187,0,.25),0 6px 20px rgba(255,187,0,.12);}
.opt-card.mode-time.selected::after{color:var(--warn);}
.opt-card.mode-time .opt-name{color:var(--warn);}
.opt-card.mode-survival{} /* uses hot colour */
.opt-card.mode-survival.selected{border-color:var(--hot);box-shadow:0 0 0 1px rgba(255,34,85,.25),0 6px 20px rgba(255,34,85,.12);}
.opt-card.mode-survival.selected::after{color:var(--hot);}
.opt-card.mode-survival .opt-name{color:var(--hot);}

/* ═══ TIME ATTACK COUNTDOWN ═══ */
#time-attack-hud{
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.4rem;
  color:var(--warn);text-shadow:0 0 12px rgba(255,187,0,.5);
  text-align:center;letter-spacing:.06em;display:none;
  animation:ta-pulse .5s ease-in-out infinite alternate;
}
#time-attack-hud.active{display:block;}
#time-attack-hud.urgent{color:var(--hot);text-shadow:0 0 16px rgba(255,34,85,.7);animation:ta-urgent .25s ease-in-out infinite alternate;}
@keyframes ta-pulse{from{opacity:.7;}to{opacity:1;}}
@keyframes ta-urgent{from{transform:scale(1);}to{transform:scale(1.06);}}

/* ═══ LUCKY STAR TILE ═══ */
.cell.active.lucky-tile{
  background:linear-gradient(140deg,#ffffaa,#ffdd00,#cc8800);
  border-color:rgba(255,240,0,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 5px rgba(0,0,0,.25),3px 3px 0 #221a00,4px 4px 0 rgba(0,0,0,.5),0 0 28px rgba(255,230,0,1),0 0 55px rgba(255,180,0,.5);
  animation:lucky-pulse .28s ease-in-out infinite alternate;
}
@keyframes lucky-pulse{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),3px 3px 0 #221a00,0 0 18px rgba(255,220,0,.75);}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),3px 3px 0 #221a00,0 0 35px rgba(255,220,0,1),0 0 65px rgba(255,180,0,.55);}}

/* ═══ CHAIN REACTION BONUS ═══ */
.chain-pop{
  position:absolute;pointer-events:none;font-family:'Exo 2',sans-serif;font-weight:900;
  font-size:.7rem;color:#00ffff;text-shadow:0 0 10px #00ffff;z-index:310;
  animation:chain-fly .65s ease-out forwards;white-space:nowrap;
}
@keyframes chain-fly{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-44px) scale(1.25);}}

/* ═══ CONFETTI ═══ */
.confetti-piece{
  position:absolute;pointer-events:none;border-radius:2px;z-index:400;
  animation:confetti-fall var(--cf-dur,1.2s) ease-in var(--cf-delay,0s) forwards;
}
@keyframes confetti-fall{
  0%{transform:translate(var(--cf-x,0px),-20px) rotate(0deg);opacity:1;}
  100%{transform:translate(calc(var(--cf-x,0px) + var(--cf-drift,0px)),620px) rotate(var(--cf-rot,720deg));opacity:0;}
}

/* ═══ LEVEL UP SCREEN FLASH ═══ */
#lvl-flash{position:absolute;inset:0;pointer-events:none;z-index:199;opacity:0;border-radius:inherit;}
#lvl-flash.pop{animation:lvl-flash-anim .4s ease-out forwards;}
@keyframes lvl-flash-anim{0%{opacity:.22;}40%{opacity:.1;}100%{opacity:0;}}

/* ═══ WIN STREAK ═══ */
#win-streak-display{
  font-size:.48rem;letter-spacing:.2em;color:rgba(255,187,0,.55);text-transform:uppercase;
  text-align:center;margin-top:2px;display:none;
}
#win-streak-display.show{display:block;}

/* ═══ HEATMAP ═══ */
#heatmap-wrap{width:100%;max-width:400px;margin:2px 0;}
.heatmap-label{font-size:.38rem;letter-spacing:.18em;color:var(--text2);text-transform:uppercase;text-align:center;margin-bottom:2px;}
#heatmap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;width:100%;max-width:150px;margin:0 auto;}
.hm-cell{aspect-ratio:1;border-radius:3px;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.06);transition:background .3s;}

/* ═══ CAREER STATS in Records ═══ */
.career-section{width:100%;max-width:430px;}
.career-title{font-size:.5rem;letter-spacing:.26em;color:var(--text2);text-transform:uppercase;text-align:center;margin:6px 0 4px;}
.career-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.career-stat{background:linear-gradient(160deg,#0d1a30,#080e1e);border:1px solid rgba(0,212,255,.09);border-radius:8px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.career-val{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.9rem;color:var(--accent);line-height:1;}
.career-lbl{font-size:.4rem;letter-spacing:.16em;color:var(--text2);text-transform:uppercase;}

/* ═══ IMPROVED PAUSE OVERLAY ═══ */
.pause-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;width:100%;max-width:260px;}
.pause-stat{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);border-radius:6px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;}
.pause-stat-val{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.9rem;color:var(--accent);}
.pause-stat-lbl{font-size:.4rem;letter-spacing:.16em;color:var(--text2);text-transform:uppercase;}

/* ═══ RETRO AUDIO MODE ═══ */
#audio-mode-btn{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:.46rem;letter-spacing:.1em;
  color:rgba(0,212,255,.45);background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);
  border-radius:6px;padding:4px 8px;cursor:pointer;text-transform:uppercase;transition:all .18s;
}
#audio-mode-btn:hover{border-color:rgba(0,212,255,.3);color:var(--accent);}
#audio-mode-btn.retro-on{color:var(--warn);border-color:rgba(255,187,0,.35);background:rgba(255,187,0,.05);}