:root{
  --bg1:#1a1040;--bg2:#0f0a2e;--bg3:#150d38;
  --surface:#ffffff0d;--surface2:#ffffff14;--surface3:#ffffff1e;
  --border:#ffffff18;--border2:#ffffff28;
  --coral:#ff5c5c;--coral2:#ff7b5c;--coral-shadow:#cc2a2a;
  --gold:#f5c842;--gold2:#ffd95a;
  --text:#fff;--text2:rgba(255,255,255,.55);--text3:rgba(255,255,255,.35);
  --blue-glow:#5b4fcf;--purple-glow:#7c3fbf;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Nunito',sans-serif;background:var(--bg2);touch-action:none;}

/* ── MATERIAL ICONS ── */
.mi{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;
  font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  pointer-events:none;
}
.mi.outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;overflow:hidden;}
.screen.active{display:flex;}

/* ── DARK PURPLE BG ── */
.night-bg{background:radial-gradient(ellipse at 50% 0%,#2d1b69 0%,#1a1040 40%,#0a0620 100%);}

/* ── STARFIELD ── */
.star-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.star{position:absolute;border-radius:50%;background:#fff;animation:starTwinkle ease-in-out infinite alternate;}
@keyframes starTwinkle{0%{opacity:.15;transform:scale(1);}100%{opacity:.85;transform:scale(1.3);}}

/* ── GLOW ORBS ── */
.glow-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.18;}

/* ── BG FLOATING BUBBLES ── */
.bg-bub{position:absolute;border-radius:50%;border:1px solid rgba(180,140,255,.2);
  background:radial-gradient(circle at 30% 30%,rgba(180,140,255,.1),transparent);
  animation:bgBubFloat linear infinite;}
@keyframes bgBubFloat{0%{transform:translateY(110vh);opacity:0;}10%{opacity:.4;}90%{opacity:.25;}100%{transform:translateY(-20vh);opacity:0;}}

/* ── BURST ── */
/* ── EDGE FLASH OVERLAY ── */
#edge-flash{
  position:fixed;inset:0;pointer-events:none;z-index:800;opacity:0;
}
/* Teal — combo x4+ */
#edge-flash.flash-normal{
  animation:edgeNormal .55s ease-out forwards;
}
@keyframes edgeNormal{
  0%  {opacity:1; box-shadow:inset 0 0 0 2px rgba(100,255,180,.45), inset 0 0 45px 14px rgba(100,255,180,.1);}
  100%{opacity:0; box-shadow:inset 0 0 0 1px rgba(100,255,180,.0), inset 0 0 30px 6px rgba(100,255,180,.0);}
}
/* Blue — combo x5+ */
#edge-flash.flash-rare{
  animation:edgeRare .58s ease-out forwards;
}
@keyframes edgeRare{
  0%  {opacity:1; box-shadow:inset 0 0 0 2px rgba(60,160,255,.5), inset 0 0 52px 18px rgba(60,140,255,.12);}
  100%{opacity:0; box-shadow:inset 0 0 0 1px rgba(60,160,255,.0), inset 0 0 34px 8px rgba(60,140,255,.0);}
}
/* Gold — combo x8+ */
#edge-flash.flash-epic{
  animation:edgeEpic .65s ease-out forwards;
}
@keyframes edgeEpic{
  0%  {opacity:1; box-shadow:inset 0 0 0 3px rgba(255,210,0,.55), inset 0 0 60px 22px rgba(255,160,0,.14);}
  30% {opacity:1; box-shadow:inset 0 0 0 2px rgba(255,210,0,.38), inset 0 0 50px 18px rgba(255,160,0,.1);}
  100%{opacity:0; box-shadow:inset 0 0 0 1px rgba(255,210,0,.0), inset 0 0 36px 8px rgba(255,160,0,.0);}
}
/* Legacy burst kept for combo x8+ */
#burst{position:fixed;inset:0;pointer-events:none;z-index:900;opacity:0;}
#burst.pop{animation:burstPop .32s ease-out forwards;}
@keyframes burstPop{0%{opacity:.6;background:radial-gradient(circle at 50% 18%,rgba(255,92,92,.4),transparent 60%);}100%{opacity:0;}}

/* ── COUNTDOWN ── */
#cd-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(10,6,32,.65);backdrop-filter:blur(8px);z-index:950;}
#cd-overlay.active{display:flex;}
#cd-num{font-family:'Fredoka One',cursive;font-size:120px;font-weight:400;color:#fff;
  text-shadow:0 0 60px rgba(255,92,92,.6);
  animation:cdAnim .85s ease-out forwards;}
@keyframes cdAnim{0%{transform:scale(2.2);opacity:0;}30%{opacity:1;}80%{transform:scale(1);}100%{transform:scale(.7);opacity:0;}}

/* ════════════════════════════════
   SHARED
════════════════════════════════ */
.page-header{
  width:100%;display:flex;align-items:center;
  padding:14px 18px 10px;position:relative;z-index:100;flex-shrink:0;
}
.back-btn{
  width:40px;height:40px;border-radius:14px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;transition:all .15s;flex-shrink:0;
  color:rgba(255,255,255,.8);
}
.back-btn:active{transform:scale(.88);background:var(--surface3);}
.back-btn .mi{font-size:22px;}
.page-title{flex:1;text-align:center;font-family:'Fredoka One',cursive;font-size:22px;color:#fff;letter-spacing:.5px;}
.ph-right{width:40px;flex-shrink:0;}

.scroll-area{flex:1;width:100%;overflow-y:auto;padding:16px 18px;-webkit-overflow-scrolling:touch;}
.scroll-area::-webkit-scrollbar{display:none;}

/* ── GLASS CARD ── */
.g-card{
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:22px;padding:18px;margin-bottom:14px;
  backdrop-filter:blur(12px);
}
.g-card-title{font-family:'Fredoka One',cursive;font-size:14px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text2);margin-bottom:14px;}

/* ── CORAL BUTTON ── */
.coral-btn{
  font-family:'Fredoka One',cursive;font-size:24px;letter-spacing:2px;
  text-transform:uppercase;color:#fff;border:none;border-radius:50px;
  background:linear-gradient(135deg,var(--coral2),var(--coral));
  box-shadow:0 8px 0 var(--coral-shadow),0 12px 32px rgba(255,92,92,.38);
  cursor:pointer;transition:transform .12s,box-shadow .12s;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.coral-btn:active{transform:translateY(5px);box-shadow:0 3px 0 var(--coral-shadow),0 5px 14px rgba(255,92,92,.3);}

/* ── SECONDARY BTN ── */
.ghost-btn{
  font-family:'Fredoka One',cursive;font-size:18px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text);border:1.5px solid var(--border2);
  border-radius:50px;background:var(--surface2);
  cursor:pointer;transition:all .15s;padding:13px 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.ghost-btn:active{background:var(--surface3);}

/* ════════════════════════════════
   HOME SCREEN
════════════════════════════════ */
#home-screen{justify-content:flex-start;z-index:10;}
.home-topbar{width:100%;display:flex;justify-content:flex-end;padding:14px 18px 0;position:relative;z-index:50;gap:8px;}
.icon-btn{
  width:42px;height:42px;border-radius:14px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;transition:all .15s;
  color:rgba(255,255,255,.75);
}
.icon-btn:active{transform:scale(.88);background:var(--surface3);}
.icon-btn .mi{font-size:22px;}

.home-body{
  display:flex;flex-direction:column;align-items:center;
  padding:0 22px;flex:1;width:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.home-body::-webkit-scrollbar{display:none;}

/* Hero character */
.hero-char-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  margin:14px 0 6px;
}
.hero-char{
  width:110px;height:110px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:relative;
  filter:drop-shadow(0 0 28px rgba(160,100,255,.65)) drop-shadow(0 0 55px rgba(120,60,220,.35));
  animation:heroFloat 2.8s ease-in-out infinite alternate;
  overflow:visible;
  background:transparent;
}
@keyframes heroFloat{from{transform:translateY(0);}to{transform:translateY(-14px);}}
.hero-name-wrap{text-align:center;margin-bottom:6px;}
.hero-catch{font-family:'Fredoka One',cursive;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--text2);}
.hero-title{font-family:'Fredoka One',cursive;font-size:clamp(46px,11vw,60px);color:#fff;line-height:1.05;
  text-shadow:0 0 40px rgba(255,255,255,.2);}

/* Best score pill */
.best-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(245,200,66,.12);border:1.5px solid rgba(245,200,66,.35);
  border-radius:30px;padding:7px 18px;
  font-family:'Fredoka One',cursive;font-size:17px;color:var(--gold2);
  margin:10px 0 20px;letter-spacing:.5px;
}

/* Difficulty section */
.diff-label{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.diff-row{display:flex;gap:10px;width:100%;margin-bottom:22px;}
.diff-card{
  flex:1;padding:16px 8px 12px;border-radius:20px;
  background:var(--surface);border:1.5px solid var(--border);
  cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.diff-card:active{transform:scale(.94);}
.diff-card.selected{
  background:var(--surface3);
  border-color:rgba(100,160,255,.6);
  box-shadow:0 0 0 1px rgba(100,160,255,.3),0 8px 24px rgba(80,80,255,.2);
}
.diff-card.sel-hard.selected{
  border-color:rgba(255,92,92,.6);
  box-shadow:0 0 0 1px rgba(255,92,92,.3),0 8px 24px rgba(255,80,80,.2);
}
.diff-ic{font-size:26px;margin-bottom:2px;}
.diff-nm{font-family:'Fredoka One',cursive;font-size:16px;color:var(--text);letter-spacing:.3px;}
.diff-nm.hard-sel{color:var(--coral);}
.diff-nm.easy-sel{color:#6fcf97;}
.diff-nm.med-sel{color:#f2c94c;}
.diff-vibe{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.3px;}

/* Play button area */
.play-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:24px;}
.play-wrap .coral-btn{width:100%;padding:18px 0;font-size:26px;}
.play-hint{display:flex;align-items:center;gap:12px;margin-top:2px;}
.ph-item{font-size:12px;font-weight:700;color:var(--text3);display:flex;align-items:center;gap:4px;}
.ph-sep{color:var(--text3);font-size:10px;}

/* ════════════════════════════════
   NAME SCREEN
════════════════════════════════ */
#name-screen{z-index:20;justify-content:center;}
.name-wrap{display:flex;flex-direction:column;align-items:center;padding:30px 28px;width:100%;max-width:380px;}
.name-hero-char{font-size:70px;margin-bottom:12px;animation:heroFloat 2.5s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 20px rgba(160,100,255,.5));}
.name-title{font-family:'Fredoka One',cursive;font-size:30px;color:#fff;margin-bottom:6px;text-align:center;
  text-shadow:0 0 30px rgba(255,255,255,.2);}
.name-sub{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:28px;text-align:center;}
.name-input{
  width:100%;padding:16px 20px;border-radius:18px;
  border:1.5px solid var(--border2);
  background:var(--surface2);
  font-family:'Fredoka One',cursive;font-size:22px;color:#fff;
  outline:none;text-align:center;margin-bottom:16px;
  backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .2s;
}
.name-input::placeholder{color:var(--text3);}
.name-input:focus{border-color:rgba(100,160,255,.6);box-shadow:0 0 0 3px rgba(100,160,255,.12);}
.name-wrap .coral-btn{width:100%;padding:16px 0;font-size:20px;}

/* ════════════════════════════════
   GAME HUD
════════════════════════════════ */
#game-screen{justify-content:flex-start;z-index:10;}
#hud{
  width:100%;display:flex;align-items:center;
  padding:12px 18px 10px;
  background:rgba(10,6,30,.55);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  position:relative;z-index:100;flex-shrink:0;
}
.hud-seg{display:flex;flex-direction:column;}
.hud-seg.center{flex:1;align-items:center;}
.hud-seg.right{align-items:flex-end;}
.hud-lbl{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text3);line-height:1;margin-bottom:1px;}
.hud-val{font-family:'Fredoka One',cursive;font-size:30px;color:#fff;line-height:1;letter-spacing:.5px;}
#timer-val.urgent{color:var(--coral);animation:urgPulse .45s ease-in-out infinite;}
@keyframes urgPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.13);}}
#combo-mult{font-family:'Fredoka One',cursive;font-size:30px;line-height:1;color:#fff;transition:color .15s;}
#combo-word{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text2);min-height:13px;}

/* ── GAME AREA ── */
#game-area{flex:1;width:100%;position:relative;overflow:hidden;}

/* ── BUBBLE ── */
.bubble-entity{
  position:absolute;border-radius:50%;cursor:pointer;will-change:left,top;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(160,120,255,.12) 55%,rgba(80,40,180,.05));
  border:1.5px solid rgba(200,180,255,.35);
  box-shadow:0 4px 20px rgba(80,40,180,.25),inset 2px 2px 6px rgba(255,255,255,.3),inset 0 -3px 8px rgba(80,40,200,.12);
  display:flex;align-items:center;justify-content:center;transition:opacity .18s;
  overflow:visible;
}
.bubble-entity::after{content:'';position:absolute;top:15%;left:18%;width:28%;height:12%;border-radius:50%;
  background:rgba(255,255,255,.55);transform:rotate(-30deg);pointer-events:none;}
.bubble-entity.rare{
  border-color:rgba(206,100,255,.5);
  box-shadow:0 0 18px rgba(171,50,220,.4),0 4px 20px rgba(140,50,200,.2),inset 2px 2px 6px rgba(255,255,255,.3);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(206,100,255,.15) 55%,rgba(140,50,200,.07));
}
.bubble-entity.epic{
  border-color:rgba(255,200,70,.55);
  box-shadow:0 0 22px rgba(255,180,0,.45),0 4px 20px rgba(255,150,0,.25),inset 2px 2px 6px rgba(255,255,255,.3);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,210,80,.2) 55%,rgba(200,120,0,.08));
}
.fly-inside{display:flex;align-items:center;justify-content:center;overflow:visible;}
@keyframes popBurst{0%{transform:scale(1);opacity:1;}40%{transform:scale(1.55);opacity:.7;}100%{transform:scale(2.2);opacity:0;}}
.bubble-entity.popping{animation:popBurst .22s ease-out forwards;pointer-events:none;}

/* ── FREE FLY ── */
.free-fly{position:absolute;pointer-events:none;z-index:500;animation:flyAway 1.1s ease-in forwards;}
@keyframes flyAway{0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1;}30%{transform:translate(-50%,-80%) scale(1.2) rotate(-15deg);}60%{transform:translate(-50%,-160%) scale(1) rotate(10deg);opacity:.8;}100%{transform:translate(-50%,-340%) scale(.5) rotate(-20deg);opacity:0;}}

/* ── EFFECTS ── */
.pop-ring{position:absolute;border-radius:50%;pointer-events:none;z-index:400;transform:translate(-50%,-50%) scale(0);animation:ringExp .4s ease-out forwards;}
@keyframes ringExp{0%{transform:translate(-50%,-50%) scale(.4);opacity:.9;}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;}}
.droplet{position:absolute;border-radius:50%;pointer-events:none;z-index:400;}
.ft{position:absolute;pointer-events:none;z-index:600;font-family:'Fredoka One',cursive;
  transform:translate(-50%,-50%);animation:ftRise .85s ease-out forwards;white-space:nowrap;}
.ft.pos{color:#6dffa0;text-shadow:0 0 14px rgba(100,255,150,.5);}
.ft.neg{color:var(--coral);text-shadow:0 0 14px rgba(255,92,92,.5);}
.ft.cbo{color:var(--gold2);text-shadow:0 0 14px rgba(245,200,66,.6);}
@keyframes ftRise{0%{opacity:1;transform:translate(-50%,-50%) scale(1);}35%{opacity:1;transform:translate(-50%,-80%) scale(1.2);}100%{opacity:0;transform:translate(-50%,-140%) scale(.8);}}
@keyframes shk{0%,100%{transform:translate(0,0);}15%{transform:translate(-4px,3px);}30%{transform:translate(4px,-3px);}45%{transform:translate(-3px,2px);}60%{transform:translate(3px,-2px);}75%{transform:translate(-2px,1px);}90%{transform:translate(2px,-1px);}}
.shaking{animation:shk .38s ease-out;}
.mult-bump{animation:mbump .22s ease-out;}
@keyframes mbump{0%{transform:scale(1);}50%{transform:scale(1.55);}100%{transform:scale(1);}}

/* ════════════════════════════════
   END SCREEN
════════════════════════════════ */
#end-screen{z-index:20;overflow-y:auto;}
#end-screen .scroll-area{display:flex;flex-direction:column;align-items:center;padding:24px 20px 36px;}
#star-cv{position:fixed;inset:0;pointer-events:none;z-index:0;}
.end-z{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;}
.end-char{font-size:72px;margin-bottom:6px;animation:heroFloat 1.5s ease-in-out infinite alternate;filter:drop-shadow(0 0 24px rgba(160,100,255,.5));}
.end-small-lbl{font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:4px;}
.end-score-big{font-family:'Fredoka One',cursive;font-size:clamp(72px,16vw,96px);color:#fff;line-height:1;
  text-shadow:0 0 60px rgba(255,255,255,.25);margin-bottom:4px;}
.end-grade{font-family:'Fredoka One',cursive;font-size:26px;color:var(--gold2);margin-bottom:8px;text-shadow:0 0 20px rgba(245,200,66,.4);}
.end-diff-pill{font-family:'Fredoka One',cursive;font-size:12px;letter-spacing:1px;
  padding:5px 16px;border-radius:30px;color:#fff;margin-bottom:20px;display:inline-block;}

.end-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px;margin-bottom:16px;}
.es-card{background:var(--surface2);border:1px solid var(--border2);border-radius:18px;padding:12px 14px;text-align:center;}
.es-n{font-family:'Fredoka One',cursive;font-size:26px;color:#fff;}
.es-l{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-top:1px;}

.ach-notif{background:rgba(245,200,66,.1);border:1.5px solid rgba(245,200,66,.3);
  border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  width:100%;max-width:340px;margin-bottom:10px;}
.an-icon{font-size:30px;}
.an-lbl{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
.an-name{font-family:'Fredoka One',cursive;font-size:16px;color:#fff;}

.end-btns{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;margin-top:10px;}
.end-btns .coral-btn{width:100%;padding:17px 0;margin-bottom:4px;}
.end-btns .ghost-btn{width:100%;font-size:17px;}

/* ════════════════════════════════
   SETTINGS
════════════════════════════════ */
#settings-screen{z-index:20;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;padding-bottom:0;}
.tgl-info{}
.tgl-lbl{font-size:15px;font-weight:800;color:var(--text);}
.tgl-sub{font-size:11px;font-weight:700;color:var(--text3);margin-top:1px;}
.toggle{position:relative;width:52px;height:29px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.tgl-sl{position:absolute;inset:0;border-radius:29px;background:rgba(255,255,255,.1);cursor:pointer;transition:.3s;}
.tgl-sl::before{content:'';position:absolute;width:23px;height:23px;left:3px;top:3px;
  border-radius:50%;background:rgba(255,255,255,.5);transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.4);}
input:checked+.tgl-sl{background:linear-gradient(135deg,var(--coral2),var(--coral));}
input:checked+.tgl-sl::before{transform:translateX(23px);background:#fff;}

.setting-name-row{display:flex;align-items:center;gap:10px;padding:10px 0;}
.sett-name-val{font-family:'Fredoka One',cursive;font-size:20px;color:#fff;flex:1;letter-spacing:.5px;}
.edit-btn{font-size:12px;font-weight:800;color:var(--coral2);padding:7px 14px;border-radius:20px;
  background:rgba(255,92,92,.12);border:1.5px solid rgba(255,92,92,.3);cursor:pointer;letter-spacing:.5px;}

.danger-btn{width:100%;padding:14px;border-radius:16px;
  border:1.5px solid rgba(255,92,92,.25);background:rgba(255,92,92,.07);
  font-family:'Fredoka One',cursive;font-size:15px;letter-spacing:.5px;
  color:rgba(255,150,150,.9);cursor:pointer;transition:all .15s;margin-bottom:8px;}
.danger-btn:active{background:rgba(255,92,92,.14);}
.danger-btn:last-child{margin-bottom:0;}

/* ════════════════════════════════
   LEADERBOARD
════════════════════════════════ */
#leaderboard-screen{z-index:20;}
.lb-tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--surface);border-radius:18px;padding:5px;}
.lb-tab{flex:1;padding:9px 4px;border-radius:14px;border:none;background:transparent;
  font-family:'Fredoka One',cursive;font-size:13px;letter-spacing:.5px;
  color:var(--text2);cursor:pointer;transition:all .18s;text-align:center;}
.lb-tab.active{background:var(--surface3);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.25);}
.lb-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:8px;}
.lb-row.me{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.3);}
.lb-rank{font-family:'Fredoka One',cursive;font-size:18px;min-width:32px;text-align:center;}
.lb-rank.gold{color:#f5c842;}.lb-rank.silver{color:#b0bec5;}.lb-rank.bronze{color:#a1887f;}.lb-rank.other{color:var(--text3);}
.lb-avatar{width:38px;height:38px;border-radius:14px;
  background:linear-gradient(135deg,var(--coral2),var(--coral));
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.lb-name{flex:1;font-family:'Fredoka One',cursive;font-size:16px;color:#fff;letter-spacing:.3px;}
.lb-meta{font-size:10px;font-weight:700;color:var(--text3);}
.lb-score{font-family:'Fredoka One',cursive;font-size:20px;color:var(--gold2);}
.lb-empty{text-align:center;padding:44px 20px;color:var(--text3);font-size:14px;font-weight:800;line-height:2.2;}

/* ════════════════════════════════
   STATS
════════════════════════════════ */
#stats-screen{z-index:20;}
.hero-stat{text-align:center;padding:20px;border-radius:24px;
  background:linear-gradient(135deg,rgba(255,92,92,.12),rgba(255,150,80,.08));
  border:1.5px solid rgba(255,92,92,.2);margin-bottom:14px;}
.hs-n{font-family:'Fredoka One',cursive;font-size:56px;color:#fff;line-height:1;
  text-shadow:0 0 40px rgba(255,92,92,.3);}
.hs-l{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);margin-top:2px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.sg{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:14px;text-align:center;}
.sg-n{font-family:'Fredoka One',cursive;font-size:26px;color:#fff;}
.sg-l{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-top:2px;}
.diff-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.dsr{border-radius:16px;padding:12px 8px;text-align:center;}
.dsr.e{background:rgba(111,207,151,.08);border:1px solid rgba(111,207,151,.2);}
.dsr.m{background:rgba(242,201,76,.08);border:1px solid rgba(242,201,76,.2);}
.dsr.h{background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.2);}
.dsr-n{font-family:'Fredoka One',cursive;font-size:22px;}
.dsr-n.e{color:#6fcf97;}.dsr-n.m{color:#f2c94c;}.dsr-n.h{color:var(--coral);}
.dsr-l{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);}

/* ── GOLD HUD PILL ── */
#gold-hud{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:none;
}

/* ── GOLD EARN FLOAT ── */
.gold-float{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Fredoka One',cursive;font-size:28px;color:var(--gold2);
  text-shadow:0 0 20px rgba(245,200,66,.7);
  pointer-events:none;z-index:1000;
  animation:goldFloat 1.6s ease-out forwards;
  white-space:nowrap;
}
@keyframes goldFloat{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.7);}
  20% {opacity:1;transform:translate(-50%,-65%) scale(1.15);}
  70% {opacity:1;transform:translate(-50%,-80%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-110%) scale(.85);}
}

/* ── HOME GOLD PILL ── */
.home-gold{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,200,66,.12);border:1.5px solid rgba(245,200,66,.3);
  border-radius:30px;padding:6px 16px;
  font-family:'Fredoka One',cursive;font-size:16px;color:var(--gold2);
  margin-bottom:10px;cursor:pointer;transition:all .15s;
}
.home-gold:active{background:rgba(245,200,66,.22);}
.home-gold .mi{font-size:18px;color:var(--gold2);}

/* ══════════════════════════════════
   STORE SCREEN
══════════════════════════════════ */
#store-screen{z-index:20;}
.store-gold-bar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 0 4px;
}
.store-gold-bar .mi{font-size:22px;color:var(--gold2);}
.store-gold-bar-val{font-family:'Fredoka One',cursive;font-size:22px;color:var(--gold2);}
.store-gold-bar-lbl{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;}

.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.bg-card{
  border-radius:20px;overflow:hidden;position:relative;
  border:2px solid var(--border2);cursor:pointer;
  transition:all .2s;aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.bg-card:active{transform:scale(.96);}
.bg-card.owned{border-color:rgba(100,255,180,.5);}
.bg-card.active-bg{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 8px 24px rgba(245,200,66,.3);}
.bg-card.locked{filter:brightness(.65);}
.bg-preview{position:absolute;inset:0;background-size:cover;}
.bg-card-info{
  position:relative;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);
  padding:10px 10px 12px;
}
.bg-card-name{font-family:'Fredoka One',cursive;font-size:14px;color:#fff;letter-spacing:.3px;}
.bg-card-price{display:flex;align-items:center;gap:4px;margin-top:3px;}
.bg-card-price .mi{font-size:13px;color:var(--gold2);}
.bg-card-price span{font-family:'Fredoka One',cursive;font-size:13px;color:var(--gold2);}
.bg-card-badge{
  position:absolute;top:8px;right:8px;z-index:3;
  font-family:'Fredoka One',cursive;font-size:10px;letter-spacing:.5px;
  padding:3px 8px;border-radius:20px;
}
.badge-free{background:rgba(100,255,180,.25);color:#6fffb0;border:1px solid rgba(100,255,180,.4);}
.badge-owned{background:rgba(100,255,180,.2);color:#6fffb0;border:1px solid rgba(100,255,180,.4);}
.badge-active{background:rgba(245,200,66,.25);color:var(--gold2);border:1px solid rgba(245,200,66,.5);}
.badge-locked{background:rgba(255,255,255,.08);color:var(--text3);border:1px solid var(--border);}
.badge-premium{background:linear-gradient(135deg,rgba(255,180,0,.3),rgba(255,120,0,.2));color:#FFB74D;border:1px solid rgba(255,160,0,.5);}

/* BUY MODAL */
#buy-modal{
  position:fixed;inset:0;z-index:980;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
}
#buy-modal.open{display:flex;}
.buy-sheet{
  width:100%;max-width:460px;
  background:linear-gradient(160deg,#1e1355,#120b38);
  border:1px solid var(--border2);border-radius:28px 28px 0 0;
  padding:24px 24px 40px;
  animation:slideUp .28s ease-out;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.buy-sheet-preview{
  width:100%;height:140px;border-radius:18px;margin-bottom:16px;
  overflow:hidden;position:relative;
}
.buy-sheet-name{font-family:'Fredoka One',cursive;font-size:24px;color:#fff;margin-bottom:4px;}
.buy-sheet-desc{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:20px;}
.buy-sheet-row{display:flex;gap:10px;}
.buy-confirm{
  flex:1;font-family:'Fredoka One',cursive;font-size:18px;letter-spacing:1px;
  color:#fff;border:none;border-radius:18px;padding:15px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 6px 0 #a07a00,0 8px 20px rgba(245,200,66,.3);
  transition:transform .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.buy-confirm:active{transform:translateY(4px);box-shadow:0 2px 0 #a07a00;}
.buy-confirm .mi{font-size:20px;}
.buy-cancel{
  font-family:'Fredoka One',cursive;font-size:16px;color:var(--text2);
  background:var(--surface2);border:1px solid var(--border2);border-radius:18px;
  padding:15px 22px;cursor:pointer;
}

/* ── BACKGROUND THEMES (CSS gradients) ── */
.bg-theme-space   {background:radial-gradient(ellipse at 50% 0%,#2d1b69 0%,#1a1040 40%,#0a0620 100%);}
.bg-theme-nebula  {background:radial-gradient(ellipse at 30% 20%,#1a0533 0%,#0d1a4a 40%,#050d1e 70%,#0a0620 100%);}
.bg-theme-aurora  {background:linear-gradient(160deg,#001a12 0%,#003322 30%,#001833 60%,#0a0030 100%);}
.bg-theme-forest  {background:linear-gradient(180deg,#0a1f0a 0%,#0d2e12 35%,#1a3d10 65%,#0f280d 100%);}
.bg-theme-ocean   {background:linear-gradient(180deg,#000d1a 0%,#001f3f 30%,#003366 60%,#001a33 100%);}
.bg-theme-sunset  {background:linear-gradient(160deg,#1a0a00 0%,#3d1200 25%,#6b2000 45%,#1a0820 100%);}
.bg-theme-city    {background:linear-gradient(180deg,#050510 0%,#0a0a20 30%,#100818 60%,#050510 100%);}
.bg-theme-neon    {background:linear-gradient(135deg,#000510 0%,#050020 30%,#0a0015 60%,#000510 100%);}
.bg-theme-candy   {background:linear-gradient(160deg,#1a0020 0%,#200030 35%,#0d0028 65%,#150015 100%);}

/* Game area gets bg theme applied directly */
#game-area.bg-nebula  {background:radial-gradient(ellipse at 30% 20%,#1a0533,#0d1a4a 40%,#050d1e 70%,#0a0620);}
#game-area.bg-aurora  {background:linear-gradient(160deg,#001a12,#003322 30%,#001833 60%,#0a0030);}
#game-area.bg-forest  {background:linear-gradient(180deg,#0a1f0a,#0d2e12 35%,#1a3d10 65%,#0f280d);}
#game-area.bg-ocean   {background:linear-gradient(180deg,#000d1a,#001f3f 30%,#003366 60%,#001a33);}
#game-area.bg-sunset  {background:linear-gradient(160deg,#1a0a00,#3d1200 25%,#6b2000 45%,#1a0820);}
#game-area.bg-city    {background:linear-gradient(180deg,#050510,#0a0a20 30%,#100818 60%,#050510);}
#game-area.bg-neon    {background:linear-gradient(135deg,#000510,#050020 30%,#0a0015 60%,#000510);}
#game-area.bg-candy   {background:linear-gradient(160deg,#1a0020,#200030 35%,#0d0028 65%,#150015);}

/* ══ PREMIUM NATURE BACKGROUNDS ══ */

/* 1. Enchanted Forest — animated layered greens */
.bg-theme-enchanted{background:radial-gradient(ellipse at 20% 80%,#0a2e0a 0%,#061a06 40%,#020d02 100%);}
#game-area.bg-enchanted{
  background:radial-gradient(ellipse at 20% 80%,#0a2e0a,#061a06 40%,#020d02);
  position:relative;overflow:hidden;
}
#game-area.bg-enchanted::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 10% 90%,rgba(34,139,34,.35) 0%,transparent 45%),
    radial-gradient(ellipse at 85% 85%,rgba(0,100,0,.3) 0%,transparent 40%),
    radial-gradient(ellipse at 50% 70%,rgba(50,205,50,.12) 0%,transparent 55%);
  animation:forestBreath 6s ease-in-out infinite alternate;
}
#game-area.bg-enchanted::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 60%,rgba(144,238,144,.08) 0%,transparent 30%),
    radial-gradient(circle at 70% 40%,rgba(0,128,0,.1) 0%,transparent 25%);
  animation:forestGlow 4s ease-in-out infinite alternate-reverse;
}
@keyframes forestBreath{from{opacity:.7;}to{opacity:1;}}
@keyframes forestGlow{from{transform:scale(1);}to{transform:scale(1.06);}}

/* 2. Midnight Jungle — deep tropical with firefly glow */
.bg-theme-jungle{background:radial-gradient(ellipse at 50% 100%,#001a00 0%,#000d00 50%,#010501 100%);}
#game-area.bg-jungle{
  background:radial-gradient(ellipse at 50% 100%,#001a00,#000d00 50%,#010501);
  position:relative;overflow:hidden;
}
#game-area.bg-jungle::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 95%,rgba(0,255,70,.18) 0%,transparent 35%),
    radial-gradient(ellipse at 80% 90%,rgba(0,200,50,.14) 0%,transparent 30%),
    radial-gradient(ellipse at 50% 85%,rgba(100,255,100,.06) 0%,transparent 50%);
  animation:junglePulse 5s ease-in-out infinite alternate;
}
#game-area.bg-jungle::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 25% 30%,rgba(50,255,100,.07) 0%,transparent 15%),
    radial-gradient(circle at 75% 55%,rgba(100,255,50,.06) 0%,transparent 12%),
    radial-gradient(circle at 55% 20%,rgba(0,255,80,.09) 0%,transparent 10%);
  animation:fireflyFloat 7s ease-in-out infinite alternate;
}
@keyframes junglePulse{from{opacity:.5;}to{opacity:1;}}
@keyframes fireflyFloat{0%{transform:translate(0,0);}50%{transform:translate(8px,-12px);}100%{transform:translate(-6px,8px);}}

/* 3. Bioluminescent Ocean — deep sea with glowing plankton */
.bg-theme-biolumi{background:radial-gradient(ellipse at 50% 0%,#000a1a 0%,#000510 50%,#000208 100%);}
#game-area.bg-biolumi{
  background:radial-gradient(ellipse at 50% 0%,#000a1a,#000510 50%,#000208);
  position:relative;overflow:hidden;
}
#game-area.bg-biolumi::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 60%,rgba(0,200,255,.2) 0%,transparent 40%),
    radial-gradient(ellipse at 70% 80%,rgba(0,150,200,.15) 0%,transparent 35%),
    radial-gradient(ellipse at 50% 40%,rgba(100,220,255,.08) 0%,transparent 50%);
  animation:oceanWave 5s ease-in-out infinite alternate;
}
#game-area.bg-biolumi::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 70%,rgba(0,255,220,.12) 0%,transparent 18%),
    radial-gradient(circle at 80% 50%,rgba(0,180,255,.1) 0%,transparent 14%),
    radial-gradient(circle at 55% 85%,rgba(100,255,255,.09) 0%,transparent 12%),
    radial-gradient(circle at 35% 25%,rgba(0,200,255,.08) 0%,transparent 10%);
  animation:planktonDrift 8s ease-in-out infinite alternate;
}
@keyframes oceanWave{from{transform:scaleX(1);}to{transform:scaleX(1.04);}}
@keyframes planktonDrift{0%{transform:translate(0,0);}33%{transform:translate(-10px,8px);}66%{transform:translate(8px,-6px);}100%{transform:translate(-4px,10px);}}

/* 4. Coral Reef Sunset — warm underwater amber & teal */
.bg-theme-coral{background:radial-gradient(ellipse at 50% 0%,#1a0800 0%,#0d0f00 35%,#001510 70%,#000a08 100%);}
#game-area.bg-coral{
  background:radial-gradient(ellipse at 50% 0%,#1a0800,#0d0f00 35%,#001510 70%,#000a08);
  position:relative;overflow:hidden;
}
#game-area.bg-coral::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(255,140,0,.18) 0%,transparent 40%),
    radial-gradient(ellipse at 75% 30%,rgba(255,100,0,.12) 0%,transparent 35%),
    radial-gradient(ellipse at 50% 80%,rgba(0,180,160,.2) 0%,transparent 50%),
    radial-gradient(ellipse at 10% 75%,rgba(0,200,150,.12) 0%,transparent 30%);
  animation:coralShimmer 6s ease-in-out infinite alternate;
}
#game-area.bg-coral::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 85%,rgba(0,255,180,.1) 0%,transparent 25%),
    radial-gradient(ellipse at 30% 90%,rgba(255,160,0,.08) 0%,transparent 20%);
  animation:coralSway 4s ease-in-out infinite alternate-reverse;
}
@keyframes coralShimmer{from{opacity:.75;}to{opacity:1;}}
@keyframes coralSway{from{transform:rotate(-.5deg);}to{transform:rotate(.5deg);}}

/* 5. Arctic Tundra — frozen northern lights over ice */
.bg-theme-arctic{background:radial-gradient(ellipse at 50% 0%,#001a2e 0%,#000d18 40%,#000508 100%);}
#game-area.bg-arctic{
  background:radial-gradient(ellipse at 50% 0%,#001a2e,#000d18 40%,#000508);
  position:relative;overflow:hidden;
}
#game-area.bg-arctic::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 30%,rgba(0,255,200,.22) 0%,transparent 50%),
    radial-gradient(ellipse at 100% 20%,rgba(100,255,220,.15) 0%,transparent 45%),
    radial-gradient(ellipse at 50% 10%,rgba(200,255,240,.1) 0%,transparent 40%);
  animation:auroraShift 7s ease-in-out infinite alternate;
}
#game-area.bg-arctic::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,255,200,.06) 0%,transparent 40%),
    radial-gradient(ellipse at 30% 5%,rgba(150,255,230,.12) 0%,transparent 30%),
    radial-gradient(ellipse at 70% 8%,rgba(0,200,255,.1) 0%,transparent 25%);
  animation:auroraRipple 5s ease-in-out infinite alternate-reverse;
}
@keyframes auroraShift{0%{transform:translateX(-5%);opacity:.6;}100%{transform:translateX(5%);opacity:1;}}
@keyframes auroraRipple{from{transform:scaleY(1);}to{transform:scaleY(1.08);}}
#ach-screen{z-index:20;}
.ach-progress-bar{height:6px;border-radius:6px;background:var(--surface2);margin-bottom:20px;overflow:hidden;}
.ach-prog-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--coral2),var(--coral));}
.ach-count-txt{font-family:'Fredoka One',cursive;font-size:16px;color:var(--text2);margin-bottom:10px;}
.ach-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:10px;transition:all .2s;}
.ach-card.unlocked{background:rgba(245,200,66,.07);border-color:rgba(245,200,66,.3);}
.ach-card.locked{opacity:.4;}
.ach-icon-wrap{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:var(--surface2);flex-shrink:0;}
.ach-card.unlocked .ach-icon-wrap{background:rgba(245,200,66,.15);}
.ach-info{flex:1;}
.ach-nm{font-family:'Fredoka One',cursive;font-size:16px;color:#fff;letter-spacing:.3px;}
.ach-desc{font-size:11px;font-weight:700;color:var(--text3);margin-top:2px;}
.ach-badge{font-size:10px;font-weight:800;letter-spacing:.8px;padding:4px 10px;border-radius:20px;flex-shrink:0;}
.ach-badge.done{background:rgba(245,200,66,.15);color:var(--gold);}
.ach-badge.lock{background:var(--surface2);color:var(--text3);}

/* ════════════════════════════════
   GAME MODES
════════════════════════════════ */
.mode-row{display:flex;gap:10px;width:100%;margin-bottom:14px;}
.mode-card{
  flex:1;padding:14px 8px 12px;border-radius:20px;
  background:var(--surface);border:1.5px solid var(--border);
  cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.mode-card:active{transform:scale(.94);}
.mode-card.selected{background:var(--surface3);border-color:rgba(100,160,255,.6);box-shadow:0 0 0 1px rgba(100,160,255,.3);}
.mode-ic{font-size:28px;}
.mode-nm{font-family:'Fredoka One',cursive;font-size:14px;color:var(--text);letter-spacing:.3px;}
.mode-vibe{font-size:10px;font-weight:700;color:var(--text3);}

/* ════════════════════════════════
   POWER-UPS
════════════════════════════════ */
.powerup-entity{
  position:absolute;border-radius:50%;cursor:pointer;will-change:left,top;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 0 18px rgba(255,255,255,.25);
  animation:puPulse 1s ease-in-out infinite alternate;
  font-size:26px;
  z-index:50;
}
@keyframes puPulse{from{box-shadow:0 0 12px rgba(255,255,255,.2);transform:scale(1);}to{box-shadow:0 0 24px rgba(255,255,255,.45);transform:scale(1.07);}}

/* Power-up active indicators */
#pu-bar{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:200;pointer-events:none;
}
.pu-active{
  font-family:'Fredoka One',cursive;font-size:13px;
  padding:5px 12px;border-radius:20px;
  display:flex;align-items:center;gap:5px;
  animation:puBarAnim .3s ease-out;
}
@keyframes puBarAnim{from{transform:scale(0);}to{transform:scale(1);}}
.pu-active.pu-time  {background:rgba(41,182,246,.3);border:1.5px solid rgba(41,182,246,.5);color:#29B6F6;}
.pu-active.pu-shield{background:rgba(76,175,80,.3); border:1.5px solid rgba(76,175,80,.5); color:#81C784;}
.pu-active.pu-slow  {background:rgba(156,39,176,.3);border:1.5px solid rgba(156,39,176,.5);color:#CE93D8;}
.pu-active.pu-2x    {background:rgba(255,152,0,.3); border:1.5px solid rgba(255,152,0,.5); color:#FFB74D;}

/* Endless lives */
/* Lives bar — inside game area, bottom-left corner */
#lives-bar{
  position:absolute;bottom:14px;left:14px;
  display:flex;gap:5px;align-items:center;
  z-index:200;pointer-events:none;
}
.life-heart{font-size:22px;transition:all .3s;}
.life-heart.lost{opacity:.2;filter:grayscale(1);transform:scale(.85);}

/* ════════════════════════════════
   PAUSE OVERLAY
════════════════════════════════ */
#pause-overlay{
  position:fixed;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;
  background:rgba(5,2,20,.78);backdrop-filter:blur(10px);
  z-index:850;gap:14px;
}
#pause-overlay.active{display:flex;}
.pause-title{font-family:'Fredoka One',cursive;font-size:42px;color:#fff;margin-bottom:6px;
  text-shadow:0 0 30px rgba(255,255,255,.2);}
.pause-btn{
  width:260px;font-family:'Fredoka One',cursive;font-size:20px;letter-spacing:1px;
  color:#fff;border:1.5px solid var(--border2);border-radius:50px;
  background:var(--surface2);padding:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .15s;
}
.pause-btn:active{background:var(--surface3);}
.pause-btn.resume{
  background:linear-gradient(135deg,var(--coral2),var(--coral));
  border-color:transparent;
  box-shadow:0 6px 0 var(--coral-shadow),0 8px 24px rgba(255,92,92,.3);
}
.pause-btn.resume:active{transform:translateY(4px);box-shadow:0 2px 0 var(--coral-shadow);}

/* ════════════════════════════════
   PAUSE BUTTON (in game HUD)
════════════════════════════════ */
#pause-btn-hud{
  width:36px;height:36px;border-radius:12px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:200;color:rgba(255,255,255,.7);
  margin-left:12px;flex-shrink:0;
}
#pause-btn-hud .mi{font-size:20px;}