/* ================================================================
   style.css — Gem Legends — Pixel Art Theme
   Horizontal layout on desktop, vertical on mobile
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Cinzel:wght@400;600;700&display=swap');

/* ── RESET & ROOT ── */
*{box-sizing:border-box;margin:0;padding:0;user-select:none;}
:root{
  --gold:#c8a84b;--gl:#f0d060;
  --pb:rgba(10,6,20,0.97);--pbd:rgba(200,168,75,0.3);
  --ft:'Press Start 2P',monospace;
  --fb:'Press Start 2P',monospace;
  --px-border:2px solid var(--gold);
  --red:#ef4444;--green:#22c55e;--blue:#60a5fa;--purple:#c084fc;
}
body{
  background:#0a0614;
  background-image:
    radial-gradient(ellipse at 50% 0%,#1a0a2e 0%,#06040f 60%);
  min-height:100vh;
  font-family:var(--ft);
  color:#e8d5a0;
  image-rendering:pixelated;
}

/* ── PIXEL PANEL ── */
.pan{
  background:var(--pb);
  border:2px solid var(--gold);
  image-rendering:pixelated;
  position:relative;
  padding:6px 8px;
}
.pan::before{
  content:'';position:absolute;
  inset:2px;
  border:1px solid rgba(200,168,75,.15);
  pointer-events:none;
}

/* pixel corner decoration */
.pan::after{
  content:'';position:absolute;
  inset:-2px;
  background:
    linear-gradient(45deg,var(--gold) 4px,transparent 4px) 0 0,
    linear-gradient(135deg,var(--gold) 4px,transparent 4px) 100% 0,
    linear-gradient(225deg,var(--gold) 4px,transparent 4px) 100% 100%,
    linear-gradient(315deg,var(--gold) 4px,transparent 4px) 0 100%;
  background-size:8px 8px;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════
   FULLSCREEN OVERLAY SCREENS (name, mode, level, class select)
════════════════════════════════════════════════════════════ */
.fullscreen{
  position:fixed;inset:0;
  background:rgba(4,2,12,.98);
  z-index:200;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:20px 20px max(20px, env(safe-area-inset-bottom)) 20px;
  overflow-y:auto;
}
.fullscreen.hidden{display:none!important;}

/* ── NAME ENTRY ── */
#name-title{
  font-family:var(--ft);font-size:16px;color:var(--gl);
  letter-spacing:2px;margin-bottom:8px;
  text-shadow:0 0 20px rgba(200,168,75,.6);
}
#name-sub{font-size:7px;color:rgba(232,213,160,.45);margin-bottom:28px;letter-spacing:1px;text-align:center;}
#name-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:300px;}
#name-input{
  width:100%;
  background:rgba(0,0,0,.6);
  border:2px solid rgba(200,168,75,.4);
  color:#e8d5a0;font-family:var(--ft);font-size:10px;
  padding:10px 14px;text-align:center;letter-spacing:2px;outline:none;
}
#name-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,168,75,.2);}
#name-input::placeholder{color:rgba(232,213,160,.25);}
#name-btn{
  font-family:var(--ft);font-size:8px;padding:10px 24px;
  border:2px solid var(--gold);background:rgba(200,168,75,.1);
  color:var(--gl);cursor:pointer;letter-spacing:1px;
  transition:background .1s;
}
#name-btn:hover{background:rgba(200,168,75,.25);}
#name-btn:disabled{opacity:.3;cursor:not-allowed;}
#name-error{font-size:7px;color:#f87171;min-height:12px;letter-spacing:1px;}
.thorn{color:var(--gold);font-size:8px;letter-spacing:4px;opacity:.65;margin-bottom:6px;}

/* ── MODE SELECT ── */
#mode-greeting{font-size:7px;color:rgba(232,213,160,.4);letter-spacing:1px;margin-bottom:4px;}
#mode-title{font-family:var(--ft);font-size:13px;color:var(--gl);letter-spacing:2px;margin-bottom:22px;text-shadow:0 0 16px rgba(200,168,75,.5);}
#mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:380px;width:100%;}
.mode-card{
  background:rgba(200,168,75,.05);
  border:2px solid rgba(200,168,75,.25);
  padding:20px 12px;text-align:center;cursor:pointer;
  transition:all .1s;
}
.mode-card:hover{background:rgba(200,168,75,.14);border-color:var(--gold);transform:translateY(-2px);}
.mode-icon{font-size:28px;margin-bottom:10px;}
.mode-name{font-family:var(--ft);font-size:9px;color:var(--gold);letter-spacing:1px;margin-bottom:8px;}
.mode-desc{font-size:6px;color:rgba(232,213,160,.45);line-height:1.8;}
#mode-logout{margin-top:16px;font-size:6px;color:rgba(232,213,160,.3);cursor:pointer;letter-spacing:1px;}
#mode-logout:hover{color:rgba(232,213,160,.6);}

/* ── LEVEL SELECT ── */
#level-back{
  position:absolute;top:14px;left:14px;
  font-size:7px;color:rgba(232,213,160,.45);cursor:pointer;
  border:1px solid rgba(200,168,75,.25);padding:5px 10px;
}
#level-back:hover{color:var(--gold);border-color:var(--gold);}
#level-player{font-size:7px;color:rgba(232,213,160,.4);letter-spacing:1px;margin-bottom:4px;}
#level-title{font-family:var(--ft);font-size:14px;color:var(--gl);letter-spacing:2px;margin-bottom:4px;}
#level-sub{font-size:6px;color:rgba(232,213,160,.4);margin-bottom:18px;letter-spacing:1px;}
#level-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;max-width:460px;width:100%;
  max-height:60vh;overflow-y:auto;padding:2px;
}
.level-card{
  background:rgba(200,168,75,.05);
  border:2px solid rgba(200,168,75,.2);
  padding:10px 6px;text-align:center;cursor:pointer;
  transition:all .1s;
}
.level-card:hover:not(.locked){background:rgba(200,168,75,.14);border-color:var(--gold);}
.level-card.locked{opacity:.35;cursor:not-allowed;filter:grayscale(.9);}
.level-card.completed{border-color:rgba(200,168,75,.55);}
.lc-num{font-family:var(--ft);font-size:12px;color:var(--gold);margin-bottom:4px;}
.lc-name{font-size:5px;color:rgba(232,213,160,.5);margin-bottom:6px;line-height:1.6;}
.lc-stars{font-size:11px;min-height:14px;}
.lc-lock{font-size:16px;margin:2px 0;}
.lc-moves{font-size:5px;color:rgba(232,213,160,.35);margin-top:3px;}

/* ── CLASS SELECT ── */
#cs-back{
  position:absolute;top:14px;left:14px;
  font-size:7px;color:rgba(232,213,160,.45);cursor:pointer;
  border:1px solid rgba(200,168,75,.25);padding:5px 10px;
}
#cs-back:hover{color:var(--gold);border-color:var(--gold);}
#cs-t{font-family:var(--ft);font-size:14px;color:var(--gl);letter-spacing:3px;margin-bottom:4px;text-shadow:0 0 16px rgba(200,168,75,.5);}
#cs-s{font-size:7px;color:rgba(232,213,160,.45);margin-bottom:16px;letter-spacing:1px;}
#cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:520px;width:100%;margin-bottom:14px;max-height:55vh;overflow-y:auto;}
.csc{
  background:rgba(200,168,75,.04);
  border:2px solid rgba(200,168,75,.18);
  padding:8px 5px;text-align:center;cursor:pointer;transition:all .12s;
}
.csc:hover,.csc.on{background:rgba(200,168,75,.13);border-color:var(--gold);}
.csc.on{box-shadow:0 0 0 2px rgba(200,168,75,.3);}
.csc-port{
  display:flex;justify-content:center;align-items:center;
  margin-bottom:6px;
  width:100%;
  aspect-ratio:1;
  max-height:120px;
}
.csc-port canvas{
  width:100% !important;
  height:100% !important;
  image-rendering:pixelated;
}
.csc-port svg{
  width:100% !important;
  height:auto !important;
}
.csc-name{font-family:var(--ft);font-size:7px;color:var(--gold);margin-bottom:2px;}
.csc-gem{font-size:8px;color:rgba(232,213,160,.4);margin-bottom:3px;}
.csc-stat{font-size:6px;color:rgba(232,213,160,.45);line-height:1.6;}
.csc-passive{font-size:5px;color:#c084fc;margin-top:3px;line-height:1.5;}
.csc-check{width:10px;height:10px;border:2px solid rgba(200,168,75,.35);margin:4px auto 0;}
.csc.on .csc-check{background:var(--gold);border-color:var(--gold);}
#cs-btn{
  font-family:var(--ft);font-size:8px;padding:9px 24px;
  border:2px solid var(--gold);background:rgba(200,168,75,.09);
  color:var(--gl);cursor:pointer;letter-spacing:1px;transition:all .1s;
}
#cs-btn:hover{background:rgba(200,168,75,.2);}
#cs-btn:disabled{opacity:.3;cursor:not-allowed;}
#cs-note{font-size:6px;color:rgba(232,213,160,.38);margin-top:6px;padding-bottom:env(safe-area-inset-bottom,0px);}
#cs-note{font-size:6px;color:rgba(232,213,160,.38);margin-top:6px;}

/* ════════════════════════════════════════════════════════════
   GAME LAYOUT — HORIZONTAL (desktop) / VERTICAL (mobile)
════════════════════════════════════════════════════════════ */
#g{position:relative;}
#g.hidden-game{display:none!important;}

/* ── GAME HEADER (top bar) ── */
#game-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 8px;
  border-bottom:2px solid rgba(200,168,75,.2);
  margin-bottom:6px;background:rgba(0,0,0,.4);
}
#game-title{font-family:var(--ft);font-size:9px;color:var(--gl);letter-spacing:2px;}
#header-right{display:flex;align-items:center;gap:10px;}
#gold-el{font-size:7px;color:#fbbf24;}
#score-el{font-size:7px;color:rgba(232,213,160,.5);}
#turn-el{font-size:7px;color:rgba(232,213,160,.5);}
#wave-banner{font-size:7px;color:rgba(200,168,75,.7);letter-spacing:2px;}

/* ── STAGE HUD ── */
#stage-hud{
  display:none;
  background:rgba(139,0,0,.15);
  border:1px solid rgba(239,68,68,.3);
  padding:4px 8px;margin-bottom:4px;
  flex-direction:column;gap:2px;
}
#stage-hud.show{display:flex;}
#stage-hud-top{display:flex;justify-content:space-between;align-items:center;}
#stage-level-name{font-size:6px;color:var(--gold);}
#stage-moves-left{font-size:8px;color:#fbbf24;}
#stage-moves-left.danger{color:#f87171;animation:moveDanger .5s infinite alternate;}
@keyframes moveDanger{0%{opacity:1}100%{opacity:.4}}
#stage-prog{display:flex;gap:4px;align-items:center;}
#stage-prog-label{font-size:5px;color:rgba(232,213,160,.4);}
.stage-dot{width:8px;height:8px;border:2px solid rgba(200,168,75,.3);background:rgba(0,0,0,.4);}
.stage-dot.done{background:var(--gold);border-color:var(--gl);}
.stage-dot.active{background:rgba(200,168,75,.4);border-color:var(--gold);animation:stagePulse .8s infinite alternate;}
@keyframes stagePulse{0%{box-shadow:0 0 0 0 rgba(200,168,75,.5)}100%{box-shadow:0 0 0 3px rgba(200,168,75,0)}}

/* ══════════════════════════════════════════════════════════
   BATTLE LAYOUT — PuzzleDragons style
   Top: monsters big | heroes small row below
   Bottom: board fills rest
══════════════════════════════════════════════════════════ */
#g{
  padding:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  max-width:560px;
  margin:0 auto;
  background:#0a0614;
}

/* ── HEADER (compact) ── */
#game-header{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 8px;
  background:rgba(0,0,0,.6);
  border-bottom:1px solid rgba(200,168,75,.15);
}

/* ── STAGE HUD ── */
#stage-hud{flex-shrink:0;padding:2px 8px;}
#bless-bar{flex-shrink:0;min-height:0;padding:1px 4px;}

/* ══════════════════════════════════════
   COMBATANTS — monsters top, heroes row
══════════════════════════════════════ */
#combatants-row{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:4px 6px 0;
}

/* MONSTERS ROW — big, centered at top */
#monsters-col{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
  padding-bottom:6px;
}
.mc{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  background:transparent;
  border:none;
  cursor:pointer;
  position:relative;
  width:28vw;
  max-width:140px;
}
.mc.dead{opacity:.15;filter:grayscale(1);}
.mc.tgt .char-sprite canvas,.mc.tgt .char-sprite svg{
  filter:drop-shadow(0 0 8px #ef4444);
}
.mc.enraged .char-sprite{animation:mEnraged .4s infinite alternate;}
@keyframes mEnraged{0%{filter:none}100%{filter:drop-shadow(0 0 8px #ef4444)}}
.mc.frozen-anim .char-sprite canvas{filter:drop-shadow(0 0 5px #93c5fd);}

/* HEROES STRIP — small icons below monsters */
#heroes-col{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:4px 0;
  border-top:1px solid rgba(200,168,75,.15);
  border-bottom:1px solid rgba(200,168,75,.15);
  background:rgba(0,0,0,.3);
}
.hc{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  background:rgba(200,168,75,.05);
  border:1px solid rgba(200,168,75,.2);
  padding:2px;
  cursor:default;
  position:relative;
  width:28vw;
  max-width:140px;
  box-sizing:border-box;
}
.hc.dead{opacity:.2;filter:grayscale(1);}
.hc.shielded{border-color:#fbbf24;box-shadow:0 0 5px rgba(251,191,36,.4);}
.hc.attacking{animation:hAtk .3s;}
@keyframes hAtk{0%,100%{transform:translateX(0)}40%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* ── SHARED SPRITE ── */
.char-sprite{
  width:100%;
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  flex-shrink:0;
}
.char-sprite canvas{
  width:100% !important;
  height:100% !important;
  image-rendering:pixelated;
  display:block;
}
.char-sprite svg{
  width:100% !important;
  height:auto !important;
  display:block;
}
/* monsters face left */
.mc .char-sprite{transform:scaleX(-1);}
.shield-ic{position:absolute;bottom:1px;right:1px;font-size:7px;}

/* name */
.char-name{
  font-size:5px;color:var(--gold);
  text-align:center;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.4;
}

/* HP bars */
.char-hpbar{
  width:95%;height:5px;
  background:rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.char-hpfill{height:100%;transition:width .3s;}
.char-enbar{width:95%;height:3px;background:rgba(0,0,0,.7);flex-shrink:0;}
.char-enfill{height:100%;transition:width .3s;}
.char-status{font-size:4px;color:#c084fc;text-align:center;flex-shrink:0;}

/* ult button — heroes only */
.ub{
  font-family:var(--ft);font-size:4px;padding:1px 2px;width:95%;
  border:1px solid rgba(200,168,75,.2);background:transparent;
  color:rgba(232,213,160,.3);cursor:pointer;text-align:center;
  white-space:nowrap;overflow:hidden;
}
.ub:disabled{opacity:.15;cursor:not-allowed;}
.ub.rdy{
  border-color:var(--gold);color:var(--gl);
  animation:ubp 1.2s infinite;background:rgba(200,168,75,.08);
}
@keyframes ubp{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(200,168,75,0)}}

/* hide old conflicting names */
.hc-sprite,.mc-sprite,.hc-info,.mc-info,.hname,.mname,.hbw,.hbf,
.energy-bar-wrap,.energy-bar-fill,.mstatus,.mstat,.hhp,.ptag,.pips{display:none !important;}

/* ══════════════════════════════════════
   BOARD SECTION — fills all remaining space
══════════════════════════════════════ */
#board-section{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:3px 6px 3px;
  gap:3px;
  box-sizing:border-box;
}
#controls-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;flex-shrink:0;
}
#center-status{flex:1;text-align:center;padding:0 4px;font-size:5px;}
#log-banner{font-size:5px;color:rgba(232,213,160,.55);}
#combo-bar{font-family:var(--ft);font-size:7px;}
#phase-banner{font-size:5px;color:#fbbf24;}
#curse-el{font-size:5px;color:#c084fc;}
#moves-wrap{display:flex;align-items:center;gap:3px;flex-shrink:0;}
#moves-label{font-size:6px;color:rgba(232,213,160,.5);}
#move-pips{display:flex;gap:3px;}
.mpip{width:10px;height:10px;border:2px solid rgba(200,168,75,.35);background:rgba(0,0,0,.5);transition:all .15s;}
.mpip.used{background:rgba(200,168,75,.1);border-color:rgba(200,168,75,.15);}
.mpip.active{background:var(--gold);border-color:var(--gl);box-shadow:0 0 4px rgba(200,168,75,.7);}
#power-wrap{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0;}
#power-label{font-size:5px;color:rgba(200,168,75,.5);}
#power-ring-wrap{position:relative;width:32px;height:32px;cursor:pointer;}
#power-ring-wrap.ready{animation:pRingPulse 1s infinite;}
@keyframes pRingPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(168,85,247,.4))}50%{filter:drop-shadow(0 0 7px rgba(168,85,247,.9))}}
#power-svg{position:absolute;inset:0;}
#power-count{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:5px;color:var(--gold);line-height:1.1;}
#power-uses{font-size:4px;color:rgba(200,168,75,.45);}

/* board — square, fills remaining flex space */
#bwrap{
  flex:1;
  min-height:0;
  background:rgba(4,2,12,.92);
  border:2px solid var(--pbd);
  padding:3px;
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  /* keep it square */
  max-width:100%;
  aspect-ratio:1;
  align-self:center;
  width:100%;
}
#board{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(7,1fr);
  gap:2px;
  width:100%;height:100%;
}
.cell{
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid transparent;
  transition:transform .08s;overflow:hidden;
  position:relative;image-rendering:pixelated;
  min-width:0;min-height:0;
}
.cell:hover{transform:scale(1.06);}
.cell.sel{transform:scale(1.1);border-color:rgba(200,168,75,.9)!important;}
.cell.matched{animation:mpop .28s forwards;}
.cell.fall{animation:mfall .18s ease-in;}
.cell.hint{animation:hpulse .6s ease-in-out 2;}
.cell.cursed{filter:grayscale(1) brightness(.3);}
@keyframes mpop{0%{transform:scale(1)}50%{transform:scale(1.4);filter:brightness(2.2)}100%{transform:scale(0);opacity:0}}
@keyframes mfall{0%{transform:translateY(-28px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes hpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

#board-footer{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;font-size:6px;color:rgba(200,168,75,.4);
  flex-shrink:0;padding:1px 0;
}
#board-footer span{cursor:pointer;}
#board-footer span:hover{color:var(--gold);}
#boss-wrap{display:none;width:100%;padding:2px 4px;background:rgba(139,0,0,.2);border:1px solid rgba(239,68,68,.3);flex-shrink:0;}
#boss-wrap.show{display:block;}
#boss-label{font-size:5px;color:#fca5a5;text-align:center;}
#boss-bg{background:rgba(0,0,0,.5);height:3px;}
#boss-fill{height:100%;background:linear-gradient(90deg,#ef4444,#b91c1c);transition:width .4s;}

/* ══════════════════════════════════════════════════════════
   OVERLAYS — blessing, shop, end screen, stage result
══════════════════════════════════════════════════════════ */
.ov{
  display:none;position:fixed;inset:0;
  background:rgba(4,2,12,.92);
  align-items:center;justify-content:center;
  z-index:150;
}
.ov.show{display:flex;}
.obox{
  background:#0a0614;
  border:2px solid var(--gold);
  padding:22px 24px;
  text-align:center;
  max-width:340px;width:92%;
  position:relative;
}
.otitle{font-family:var(--ft);font-size:11px;color:var(--gl);margin-bottom:6px;letter-spacing:1px;}
.osub{font-size:6px;color:rgba(232,213,160,.5);margin-bottom:14px;line-height:1.8;}
.obtn{
  font-family:var(--ft);font-size:7px;padding:9px 20px;
  border:2px solid var(--gold);background:rgba(200,168,75,.09);
  color:var(--gl);cursor:pointer;letter-spacing:1px;transition:all .1s;
  display:inline-block;
}
.obtn:hover{background:rgba(200,168,75,.2);}

/* Blessing cards */
#bl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.blc{
  background:rgba(200,168,75,.05);border:2px solid rgba(200,168,75,.2);
  padding:10px 5px;cursor:pointer;transition:all .1s;
}
.blc:hover{background:rgba(200,168,75,.14);border-color:rgba(200,168,75,.5);}
.bi{font-size:18px;margin-bottom:4px;}
.bn{font-size:6px;color:var(--gold);margin-bottom:3px;}
.bd{font-size:5px;color:rgba(232,213,160,.45);line-height:1.6;}

/* Shop */
#sh-items{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px;}
.shi{
  background:rgba(251,191,36,.05);border:2px solid rgba(251,191,36,.15);
  padding:8px 5px;cursor:pointer;transition:all .1s;text-align:center;
}
.shi:hover:not(.sold){background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.45);}
.shi.sold{opacity:.25;cursor:not-allowed;}
.sn{font-size:6px;color:#fbbf24;margin-bottom:2px;}
.sd{font-size:5px;color:rgba(232,213,160,.45);margin-bottom:3px;line-height:1.5;}
.sc{font-size:6px;color:#fbbf24;}
.skip{
  font-family:var(--ft);font-size:7px;padding:6px 16px;
  border:1px solid rgba(200,168,75,.25);background:transparent;
  color:rgba(232,213,160,.4);cursor:pointer;display:block;margin:0 auto;
}
.skip:hover{border-color:var(--gold);color:var(--gold);}

/* Stage result */
#ov-stage{
  display:none;position:fixed;inset:0;
  background:rgba(4,2,12,.93);
  align-items:center;justify-content:center;
  z-index:160;
}
#ov-stage.show{display:flex;}
#stage-result-box{
  background:#0a0614;border:2px solid var(--gold);
  padding:28px 30px;text-align:center;max-width:300px;width:92%;
}
#stage-result-title{font-family:var(--ft);font-size:13px;color:var(--gl);margin-bottom:6px;}
#stage-result-sub{font-size:6px;color:rgba(232,213,160,.5);margin-bottom:14px;line-height:1.8;}
#stage-stars-display{font-size:30px;letter-spacing:6px;margin-bottom:16px;}
#stage-result-btns{display:flex;gap:8px;justify-content:center;}
.sr-btn{font-family:var(--ft);font-size:7px;padding:8px 16px;cursor:pointer;transition:all .1s;}
.sr-btn-gold{border:2px solid var(--gold);background:rgba(200,168,75,.1);color:var(--gl);}
.sr-btn-gold:hover{background:rgba(200,168,75,.22);}
.sr-btn-dim{border:2px solid rgba(200,168,75,.2);background:transparent;color:rgba(232,213,160,.4);}
.sr-btn-dim:hover{border-color:var(--gold);color:var(--gold);}

/* Floats */
.float{position:absolute;pointer-events:none;font-family:var(--ft);font-size:9px;font-weight:700;animation:fup .85s forwards;z-index:99;text-shadow:0 1px 2px rgba(0,0,0,.9);white-space:nowrap;}
@keyframes fup{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}
.particle{position:absolute;pointer-events:none;animation:pburst .45s forwards;z-index:10;}
@keyframes pburst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shaking{animation:shake .3s;}
@keyframes surgeFlash{0%{background:rgba(168,85,247,0)}50%{background:rgba(168,85,247,.18)}100%{background:rgba(168,85,247,0)}}
.surge-flash{animation:surgeFlash .45s;}

/* Bless bar */
#bless-bar{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:12px;padding:2px 4px;margin-bottom:4px;}
.btag{font-size:5px;padding:2px 5px;border:1px solid rgba(200,168,75,.3);color:var(--gold);background:rgba(200,168,75,.07);}

/* ── RESPONSIVE ── */
@media(min-width:560px){
  #g{max-width:560px;}
  .mc{width:120px;max-width:120px;}
  .hc{width:80px;max-width:80px;}
}
@media(max-width:480px){
  #cs-grid{grid-template-columns:repeat(2,1fr);max-height:55vh;}
  #mode-cards{grid-template-columns:1fr;}
  #level-grid{grid-template-columns:repeat(3,1fr);}
}

/* ── SPECIAL BLOCKS ── */
.cell-stone{cursor:not-allowed;}
.cell-stone:hover{transform:none!important;}
.cell-frozen{position:relative;}
.frozen-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:.9em;color:rgba(147,197,253,.9);
  pointer-events:none;
  text-shadow:0 0 6px rgba(147,197,253,.8);
}
.cell-shield{cursor:not-allowed;position:relative;}
.cell-shield:hover{transform:none!important;}
.cell-web{position:relative;}
.web-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.85em;opacity:.75;pointer-events:none;
}
.cell-bomb-trap{position:relative;cursor:not-allowed;}
.cell-bomb-trap:hover{transform:none!important;}
@keyframes bombPulse{0%{background:rgba(239,68,68,.2)}100%{background:rgba(239,68,68,.5)}}
.block-hp{
  font-family:var(--ft);font-size:6px;
  background:rgba(0,0,0,.6);
  padding:1px 3px;border-radius:2px;
  display:block;text-align:center;margin-top:1px;
}