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

:root {
  --sq: clamp(36px, calc(100vw / 9), 48px);
  --bg: #0e0c08;
  --panel: #1e1c19;
  --border: #3d3a35;
  --light-sq: #f0d9b5;
  --dark-sq:  #b58863;
  --light-sel: #cdd16f;
  --dark-sel:  #aaa23a;
  --text: #bababa;
  --dim: #666;
  --gold: #c9a84c;
  --red: #c53030;
  --green: #3a9b46;
  --acc: #759900;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Press Start 2P is wide — apply globally and let inherit handle children */
button, input, select, textarea{font-family:'Press Start 2P',monospace;}
/* Gem SVG icons — default size, can be overridden by inline style */
img[src="/assets/icons/gem.svg"]{width:1.4em;height:1.4em;}
body{background:var(--bg);color:var(--text);font-family:'Press Start 2P',monospace;font-size:11px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:center;}

/* TOP BAR */
#top{width:100%;max-width:440px;display:flex;align-items:center;justify-content:space-around;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);margin:0 auto;gap:8px;}
#top h1{font-size:15px;font-weight:700;color:var(--gold);letter-spacing:.05em;}
.hs{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0;}
.hl{font-size:10px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.06em;line-height:1;}
.hv{font-size:15px;font-weight:700;color:#e8e0cc;line-height:1;white-space:nowrap;}
#tb-w{width:100%;height:3px;background:#2a2a2a;}
#tb{height:3px;background:var(--acc);transition:width .1s linear;}

/* LAYOUT */
#layout{display:flex;flex-direction:column;gap:6px;padding:6px 8px;width:100%;max-width:440px;align-items:center;box-sizing:border-box;margin:0 auto;}
#board-col{display:flex;flex-direction:column;gap:6px;width:420px;align-items:center;}
#board-col .box{margin:0;width:100%;box-sizing:border-box;}

/* BOARD */
#bwrap{flex-shrink:0;}
#board{display:grid;grid-template-columns:repeat(8,var(--sq));grid-template-rows:repeat(12,var(--sq));border:2px solid #555;box-shadow:0 4px 24px #0009;position:relative;}

.sq{width:var(--sq);height:var(--sq);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;user-select:none;}
.sq.L{background:var(--light-sq);}
.sq.D{background:var(--dark-sq);}
.sq.sel.L{background:var(--light-sel);}
.sq.sel.D{background:var(--dark-sel);}
.sq.hint::after{display:none;} /* dot rendered as div in JS instead */
.sq-hint-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:30%;border-radius:50%;background:rgba(255,255,255,0.22);pointer-events:none;z-index:4;}
.sq.hcap::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px rgba(255,255,255,0.2);pointer-events:none;z-index:1;}
.sq.threatened::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.50);pointer-events:none;z-index:1;}
.sq.fork-range,.sq.tour-reach,.sq.fury-dest{background:rgba(255,220,0,0.10)!important;}
.sq.fork-range::after,.sq.tour-reach::after,.sq.fury-dest::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,200,0,0.35);pointer-events:none;z-index:1;box-shadow:inset 0 0 6px rgba(255,200,0,0.2);}
.sq.fork-range.hcap,.sq.tour-reach.hcap,.sq.fury-dest.hcap{background:rgba(255,200,0,0.20)!important;box-shadow:inset 0 0 0 2px rgba(255,200,0,0.7);}
.sq.fatk{animation:fatk .3s;}
.sq.fmv{animation:fmv .25s;}
@keyframes fatk{0%{filter:brightness(2) saturate(3) hue-rotate(-20deg)}100%{filter:none}}
@keyframes fmv{0%{opacity:1}100%{opacity:1}} /* no animation for normal moves */

.cr{position:absolute;bottom:1px;right:2px;font-size:9px;font-weight:700;pointer-events:none;z-index:4;}
.cf{position:absolute;top:1px;left:2px;font-size:9px;font-weight:700;pointer-events:none;z-index:4;}
.sq.L .cr,.sq.L .cf{color:var(--dark-sq);}
.sq.D .cr,.sq.D .cf{color:var(--light-sq);}

.pi{width:88%;height:88%;position:absolute;top:6%;left:6%;z-index:2;pointer-events:none;}
.dmg-preview{position:absolute;bottom:2px;left:24px;font-size:9px;font-weight:700;color:#ccc;z-index:6;line-height:1;pointer-events:none;background:rgba(60,60,60,0.65);padding:1px 4px;border-radius:3px;white-space:nowrap;}
.dmg-preview-multi{position:absolute;bottom:2px;left:24px;font-size:9px;font-weight:700;color:#66aaff;z-index:6;line-height:1;pointer-events:none;background:rgba(20,50,100,0.7);padding:1px 4px;border-radius:3px;white-space:nowrap;animation:multiBluePulse 0.8s ease-in-out infinite alternate;}

@keyframes upgFail{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-3px);}80%{transform:translateX(2px);}}
@keyframes multiBluePulse{0%{opacity:0.7;transform:scale(1);}100%{opacity:1;transform:scale(1.15);}}
.dmg-aoe{position:absolute;top:3px;right:4px;font-size:12px;font-weight:700;color:#44ff88;z-index:8;line-height:1;pointer-events:none;text-shadow:0 0 8px #00ff44;animation:aoeFloat 0.8s ease-out forwards;}
@keyframes aoeFloat{0%{transform:translateY(0) scale(1.3);opacity:1;}100%{transform:translateY(-18px) scale(0.9);opacity:0;}}
.charge-streak{position:fixed;pointer-events:none;z-index:200;border-radius:2px;background:linear-gradient(90deg,transparent,#ffe066,#fff8a0);height:3px;transform-origin:left center;animation:streakFade 0.3s ease-out forwards;}
@keyframes streakFade{0%{opacity:1;scaleX(1);}100%{opacity:0;}}
.dmg-hit{position:absolute;top:3px;right:4px;font-size:10px;font-weight:700;color:#ff3030;z-index:6;line-height:1;pointer-events:none;text-shadow:0 0 6px #ff0000;animation:dmgShake 1.5s ease-out forwards;}
@keyframes dmgShake{0%{transform:translate(0,0) scale(1.4);opacity:1;}10%{transform:translate(-3px,-3px) scale(1.3);}20%{transform:translate(3px,-7px) scale(1.2);}35%{transform:translate(-2px,-12px) scale(1.1);opacity:0.95;}60%{transform:translate(1px,-18px) scale(1.0);opacity:0.7;}100%{transform:translate(0,-28px) scale(0.85);opacity:0;}}
/* Red damage pop — stays in place, shakes, fades */
.dmg-pop{
  position:fixed;transform:translateX(-50%);
  font-size:10px;font-weight:700;color:#ff3030;z-index:200;line-height:1;
  pointer-events:none;white-space:nowrap;
  text-shadow:0 0 4px #ff0000,0 1px 2px #000;
  background:rgba(80,10,10,0.6);padding:1px 4px;border-radius:3px;
  animation:dmgPopShake 1.2s ease-out forwards;
  --shake:2px;
}
@keyframes dmgPopShake{
  0%{opacity:1;transform:translateX(-50%) scale(1.2);}
  8%{transform:translateX(calc(-50% + var(--shake))) scale(1);}
  16%{transform:translateX(calc(-50% - var(--shake)));}
  24%{transform:translateX(calc(-50% + var(--shake) * 0.7));}
  32%{transform:translateX(calc(-50% - var(--shake) * 0.7));}
  40%{transform:translateX(calc(-50% + var(--shake) * 0.4));}
  48%{transform:translateX(calc(-50% - var(--shake) * 0.4));}
  56%{transform:translateX(-50%);}
  75%{opacity:1;transform:translateX(-50%);}
  100%{opacity:0;transform:translateX(-50%);}
}
.dmg-dissolve{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:#ffcc44;z-index:9;line-height:1;pointer-events:none;text-shadow:0 0 8px #ff8800;animation:dmgDissolve 1.2s ease-out forwards;white-space:nowrap;}
@keyframes dmgDissolve{0%{opacity:1;transform:translateX(-50%) scale(1.3);}40%{opacity:1;transform:translateX(-50%) scale(1.05);}100%{opacity:0;transform:translateX(-50%) scale(0.8);}}
.pi img{width:100%;height:100%;display:block;filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.5));}
.pi.boss img{filter:drop-shadow(0 0 5px #e05050) drop-shadow(0 0 10px #a02020);}
.pi.champion img{animation:champGlow 1.2s ease-in-out infinite;}
@keyframes champGlow{
  0%,100%{filter:drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 8px #ff8c00);}
  50%{filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 20px #ffaa00);}
}
/* Frozen pieces: ice-blue tint + crack overlay */
.pi.frozen img{filter:hue-rotate(160deg) saturate(0.6) brightness(1.2) drop-shadow(0 0 6px #80dfff) drop-shadow(0 0 2px #40a8e0);}
.pi.burning img{animation:burningPulse 0.5s ease-in-out infinite alternate;}
@keyframes nextMoverBob{0%{transform:translateY(0) scale(1);}100%{transform:translateY(-5px) scale(1.08);}}
@keyframes burningPulse{0%{filter:drop-shadow(0 0 4px #ff4400) drop-shadow(0 0 8px #ff2200) brightness(1.1);}100%{filter:drop-shadow(0 0 10px #ff6600) drop-shadow(0 0 20px #ff4400) brightness(1.3) saturate(1.4);}}
.pi.frozen::after{
  content:'❄';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:22px;z-index:6;opacity:0.75;pointer-events:none;
  animation:icePulse 1s ease-in-out infinite;
}
@keyframes icePulse{0%,100%{opacity:0.6;transform:translateX(-50%) scale(1)}50%{opacity:0.9;transform:translate(-50%,-50%) scale(1.15)}}

.hpb{position:absolute;bottom:2px;left:2px;font-size:10px;font-weight:700;line-height:1;z-index:3;pointer-events:none;background:rgba(160,20,20,0.55);color:#fff;padding:1px 4px;border-radius:3px;white-space:nowrap;max-width:36px;overflow:hidden;transition:transform .1s,background .1s;}
@keyframes hpHit{0%{transform:scale(1.5);background:rgba(255,60,60,0.9);}60%{transform:scale(0.9);}100%{transform:scale(1);background:rgba(160,20,20,0.55);}}
@keyframes hpShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-3px);}40%{transform:translateX(3px);}60%{transform:translateX(-2px);}80%{transform:translateX(2px);}}
@keyframes hpPop{0%{transform:scale(1.8);background:rgba(255,80,80,0.95);opacity:1;}100%{transform:scale(3);background:rgba(255,0,0,0);opacity:0;}}
.bonus-tick{animation:bonusTick 0.3s ease-out;}
@keyframes bonusTick{0%{transform:scale(1.3);color:#fff;}100%{transform:scale(1);}}
.atk-val{position:absolute;top:2px;left:2px;font-size:10px;font-weight:700;line-height:1;z-index:3;pointer-events:none;background:rgba(130,90,0,0.55);color:#ffe066;padding:1px 4px;border-radius:3px;}
.hpf{display:none;}

/* SIDE */
#side{flex:1;display:flex;flex-direction:column;gap:8px;min-width:175px;max-width:210px;}
.box{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:8px 10px;}
.btl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border);}

#pi-wrap{display:flex;gap:8px;align-items:center;}
#pi-ico{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
#pi-ico svg{width:36px;height:36px;}
#pi-stat{flex:1;}
#pi-ht{font-size:12px;margin-bottom:3px;}
#pi-hbg{height:6px;background:#333;border-radius:3px;overflow:hidden;}
#pi-hfg{height:100%;border-radius:3px;transition:width .3s,background .3s;}
.armor-pip{width:10px;height:10px;border-radius:2px;background:#4488cc;border:1px solid #66aaee;flex-shrink:0;transition:background .2s;}
.armor-pip.empty{background:#222;border-color:#444;}

#ul{display:flex;flex-wrap:wrap;gap:4px;}
.uc{background:#2a2820;border:1px solid #4a4530;border-radius:3px;padding:2px 6px;font-size:11px;color:var(--gold);}
#el{display:flex;flex-wrap:wrap;gap:4px;}
.ec{background:#2a1a1a;border:1px solid #5a2a2a;border-radius:3px;padding:2px 6px;font-size:11px;color:#e08080;}
#log{max-height:130px;overflow-y:auto;font-size:11px;line-height:1.6;}
#log::-webkit-scrollbar{width:3px;}
#log::-webkit-scrollbar-thumb{background:#444;}
.le{border-bottom:1px solid #222;padding:1px 0;}
.le.kill{color:#e05050;}.le.gold{color:var(--gold);}.le.wave{color:#9b7bc9;}.le.upg{color:var(--green);}.le.warn{color:#e07030;}

#wm{font-size:11px;color:var(--acc);text-align:center;height:16px;margin-bottom:2px;}
#bw{
  background:linear-gradient(135deg,#400000,#700000,#400000);
  border:2px solid #cc0000;border-radius:4px;
  padding:6px 12px;color:#ff4444;
  font-size:15px;font-weight:900;text-align:center;
  display:none;margin-bottom:6px;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 18px rgba(200,0,0,.6),inset 0 0 10px rgba(0,0,0,.5);
  animation:bossFlicker 1.2s ease-in-out infinite;
}
@keyframes bossFlicker{
  0%,100%{box-shadow:0 0 14px rgba(200,0,0,.5),inset 0 0 8px rgba(0,0,0,.5);}
  50%{box-shadow:0 0 30px rgba(255,0,0,.9),inset 0 0 14px rgba(0,0,0,.6);color:#ff6666;}
}

/* OVERLAYS */
/* Full-screen overlays. The overlay itself is the scroll container so
   it behaves like normal page scroll (no nested scrollbar inside a
   panel). Content is horizontally centered via flex and vertically
   centered via margin:auto when it fits; once the content is taller
   than the viewport the auto margins collapse and scrolling kicks in
   with the content anchored to the top. */
.ov{position:fixed;inset:0;background:#000b;display:flex;align-items:flex-start;justify-content:center;z-index:100;overflow-y:auto;padding:20px 0;}
.ob{background:#2a2520;border:1px solid #5a4a30;border-radius:6px;padding:22px 26px;max-width:520px;width:92%;box-shadow:0 8px 40px #000c;text-align:center;margin:auto 0;}
.ob h2{font-size:20px;color:var(--gold);margin-bottom:10px;letter-spacing:.05em;}

/* Lock background scroll while a full-screen overlay (defeat / victory /
   upgrade / wave-summary) is visible, so the page underneath can't be
   scrolled to reveal hidden full-screen pages like piece-select. */
html:has(body.overlay-open), body.overlay-open{overflow:hidden;height:100vh;}
/* Force-hide the body-level fullscreen pages (piece-select, welcome,
   codex) while an overlay is up, regardless of their inline state.
   Belt-and-suspenders against any path that leaves them display:flex. */
body.overlay-open #os,
body.overlay-open #welcome-page,
body.overlay-open #codex-menu{display:none !important;}

/* PIECE SELECT */
.psg{display:flex;flex-direction:column;gap:10px;margin:0;}
.tut-section{margin-bottom:10px;}
.tut-heading{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;border-bottom:1px solid #2a2820;padding-bottom:2px;}
.tut-section p{margin:3px 0 0;}
.tut-badge{display:flex;align-items:center;gap:7px;padding:3px 7px;border-radius:4px;border:1px solid;font-size:9px;}
.tut-skill-pill{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;border:1px solid;font-size:9px;background:rgba(255,255,255,0.03);}
/* Piece selection cards — styled as pressable buttons */
.pso{border-radius:10px;border:2px solid #3a3020;background:linear-gradient(170deg,#2a2218,#1a1610);
  cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s,background .2s;
  overflow:hidden;margin-bottom:10px;position:relative;
  box-shadow:0 2px 6px #0006,inset 0 1px 0 rgba(255,255,255,0.04);}
.pso:hover{border-color:#5a4a2a;transform:translateY(-1px);
  box-shadow:0 4px 16px #0008,inset 0 1px 0 rgba(255,255,255,0.06);}
.pso:active{transform:translateY(1px) scale(0.99);box-shadow:0 1px 4px #0004;}
.pso.locked{opacity:0.3;cursor:not-allowed;filter:grayscale(1);}
.pso.collapsed .pso-detail{display:none;}
.pso.expanded{border-color:var(--accent-color,#c9a84c)!important;
  box-shadow:0 4px 20px var(--accent-color,#c9a84c)33,0 0 30px var(--accent-color,#c9a84c)22;
  background:linear-gradient(170deg,#302818,#1e1a0e);}
.pso-header{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.pso-piece{width:52px;height:52px;flex-shrink:0;filter:drop-shadow(0 2px 4px #0008);}
.pso-glow{position:absolute;inset:0;opacity:0.15;z-index:0;}
.pso-head-info{flex:1;}
.pso-name{font-size:16px;font-weight:900;margin-bottom:2px;letter-spacing:.02em;}
.pso-tagline{font-size:9px;color:var(--dim);font-style:italic;line-height:1.3;}
.pso-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.pso-hp-badge{font-size:12px;font-weight:900;color:#ff8080;}
.pso-el-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;}
.pso-detail{padding:0 12px 12px;border-top:1px solid #222;}
.pso-playstyle{font-size:10px;color:var(--dim);margin:8px 0 10px;line-height:1.5;}
.pso-skills-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.pso-skill-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 9px;border-radius:5px;min-width:52px;}
.pso-skill-pill.ultimate{border:1px solid #8a6a00;background:#1a1200;}
.pso-skill-pill.passive{border:1px solid #4488aa55;background:#0a1220;}
.pso-skill-pill .sp-icon{font-size:14px;line-height:1;}
.pso-skill-pill .sp-name{font-size:7px;font-weight:700;text-align:center;white-space:nowrap;}
.pso-skill-pill .sp-tag{font-size:6px;text-transform:uppercase;letter-spacing:.06em;opacity:.7;}
.pso-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.pso-stat{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--dim);}
.pso-stat-bar{display:flex;gap:1px;}
.pso-stat-pip{width:7px;height:7px;border-radius:1px;background:#333;}
.pso-stat-pip.on{background:currentColor;}
.pso-select-btn{width:100%;margin-top:12px;padding:12px;border-radius:6px;border:2px solid;
  font-size:14px;font-weight:900;cursor:pointer;letter-spacing:.06em;
  text-transform:uppercase;transition:transform .1s,box-shadow .15s;
  box-shadow:0 2px 8px #0006;}
.pso-select-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #0008;}
.pso-select-btn:active{transform:translateY(1px);box-shadow:0 1px 4px #0004;}
.pso-skill-detail{display:none;background:#0a0e1a;border:1px solid #334;border-radius:6px;padding:10px;margin-top:8px;gap:12px;align-items:flex-start;}
.pso-skill-detail.open{display:flex;}
.pso-skill-detail canvas{border-radius:4px;flex-shrink:0;}
.pso-skill-desc-text{font-size:10px;color:var(--dim);line-height:1.6;flex:1;}
.pso-skill-pill{cursor:pointer;transition:box-shadow .15s;}
.pso-skill-pill:hover{box-shadow:0 0 8px currentColor;}
.pso-skill-pill.active-detail{outline:2px solid currentColor;outline-offset:2px;}
.psi{width:52px;height:52px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ccc;overflow:hidden;}
.psi img{width:48px;height:48px;display:block;}
.psn{font-size:12px;font-weight:700;color:var(--text);}
.psd{font-size:10px;color:var(--dim);}

/* UPGRADE GRAPH — tile grid */
.skill-row{display:flex;align-items:stretch;gap:8px;margin-bottom:8px;}
.skill-card{flex:1;border-radius:6px;padding:10px 12px;border:1.5px solid var(--border);background:var(--panel);cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;position:relative;}
/* Locked: not yet available — grey out */
.skill-card.locked{opacity:0.3;cursor:not-allowed;filter:grayscale(1);}
/* Available but not purchased — light green tint */
.skill-card.available{border-color:#4caf5088;background:rgba(20,50,20,0.5);box-shadow:0 0 8px rgba(76,175,80,0.2);}
.skill-card.available:hover{border-color:#4caf50cc;box-shadow:0 0 14px rgba(76,175,80,0.45);}
/* Can't afford but available — dim green */
.skill-card.unafford{opacity:0.55;cursor:not-allowed;border-color:#3a6b3a66;background:rgba(15,35,15,0.4);}
/* Purchased / levelled up — orange glow */
.skill-card.purchased{border-color:#ff8c00aa;background:rgba(40,20,0,0.6);box-shadow:0 0 12px rgba(255,140,0,0.35),inset 0 0 20px rgba(255,100,0,0.05);}
.skill-card.purchased:hover{border-color:#ff8c00ee;box-shadow:0 0 20px rgba(255,140,0,0.6);}
/* Maxed */
.skill-card.maxed{border-color:#3a9b4670;background:rgba(10,30,10,0.5);}
.skill-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.skill-card-icon{font-size:22px;flex-shrink:0;}
.skill-card-title{font-size:12px;font-weight:700;color:var(--text);}
.skill-card-tag{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
.skill-card-desc{font-size:10px;color:var(--dim);line-height:1.4;margin-bottom:8px;}
.skill-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.skill-pips{display:flex;gap:3px;align-items:center;}
.skill-pip{width:12px;height:12px;border-radius:2px;border:1px solid currentColor;opacity:.3;}
.skill-pip.filled{opacity:1;}
.skill-cost{font-size:10px;font-weight:700;color:var(--gold);}
.skill-card.maxed .skill-cost{color:#3a9b46;}
.skill-section-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #222;}
/* Passive skill card: subtle cool-toned border, no glow */
.skill-card.passive-card{border-color:#334455;background:rgba(10,15,25,0.6);}
.skill-card.passive-card.available{border-color:#3a7a5088;background:rgba(10,30,20,0.5);}
.skill-card.passive-card.purchased{border-color:#4488aa88;background:rgba(10,20,35,0.7);box-shadow:0 0 8px rgba(60,140,200,0.2);}
.skill-card.passive-card.purchased:hover{border-color:#4488aacc;box-shadow:0 0 14px rgba(60,140,200,0.4);}
/* Ultimate card: gold shimmer border */
.skill-card.ultimate-card.available{border-color:#aa770088;background:rgba(30,20,0,0.5);}
.skill-card.ultimate-card.purchased{border-color:#ff8c00cc;box-shadow:0 0 14px rgba(255,140,0,0.4),inset 0 0 20px rgba(255,100,0,0.06);}
.skill-card.ultimate-card.purchased:hover{box-shadow:0 0 24px rgba(255,160,0,0.65);}
.upg-tab{font-size:10px;font-weight:700;padding:4px 10px;border-radius:3px;cursor:pointer;transition:opacity .15s;letter-spacing:.03em;flex:1;}
.upg-tab:not(.active){opacity:0.5;background:var(--panel)!important;border-color:var(--border)!important;color:var(--dim)!important;}
.upg-tab.active{opacity:1;box-shadow:0 2px 0 currentColor;}
/* Ultimate node glow */
.unode.ultimate{position:relative;}
.unode.ultimate::before{content:'';position:absolute;inset:-3px;border-radius:7px;z-index:-1;animation:ultimateGlow 1.5s ease-in-out infinite;}
@keyframes ultimateGlow{0%,100%{box-shadow:0 0 8px 2px rgba(255,215,0,0.4),0 0 20px 4px rgba(255,140,0,0.2);}50%{box-shadow:0 0 16px 4px rgba(255,215,0,0.8),0 0 40px 8px rgba(255,100,0,0.4);}}
.unode.ultimate .unode-name{color:#ffd700;font-size:10px;}
#upg-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}
#ugrid{display:grid;gap:6px;position:relative;z-index:1;}
.unode{
  width:72px;height:72px;border-radius:4px;border:1.5px solid var(--border);
  background:var(--panel);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:4px 3px;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
  text-align:center;position:relative;box-sizing:border-box;flex-shrink:0;
  z-index:2;
}
.unode:hover:not(.locked):not(.maxed):not(.unafford){border-color:var(--gold);background:#2c2820;box-shadow:0 0 8px rgba(201,168,76,.35);}
.unode-active{border-style:solid;border-width:2px;}
.unode-tag{font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;margin-bottom:1px;}
.unode.locked{opacity:.22;cursor:not-allowed;filter:grayscale(.9);}
.unode.maxed{border-color:#3a9b4670;background:#161e16;}
.unode.unafford{opacity:.55;cursor:not-allowed;}
.unode-tag{font-size:6px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.unode-icon{font-size:16px;line-height:1;}
.unode-name{font-size:8px;font-weight:700;color:var(--text);letter-spacing:.01em;line-height:1.1;max-width:66px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.unode-lv{font-size:8px;color:var(--gold);font-weight:700;}
.unode-cost{font-size:8px;color:var(--dim);}
.unode.maxed .unode-lv{color:#3a9b46;}
.unode-desc{display:none;}
.unode:hover .unode-desc{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 4px);width:160px;background:#1a1a1a;border:1px solid #444;border-radius:4px;padding:5px;font-size:9px;color:var(--dim);line-height:1.4;z-index:100;text-align:left;white-space:normal;}
.unode-bar{width:calc(100% - 8px);height:3px;background:#2a2a2a;border-radius:2px;overflow:hidden;margin-top:2px;}
.unode-bar-fill{height:100%;border-radius:2px;background:var(--gold);transition:width .3s;}
.unode.maxed .unode-bar-fill{background:#3a9b46;}
.tier-row-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);grid-column:1/-1;padding:2px 0 0;border-top:1px solid #2a2820;}

/* ── GHOST EFFECT ── */
@keyframes ghostSqFlash{
  0%  {background:rgba(60,180,255,0.9)!important;box-shadow:inset 0 0 18px rgba(120,220,255,1);}
  40% {background:rgba(40,140,220,0.7)!important;box-shadow:inset 0 0 30px rgba(80,200,255,0.8);}
  100%{background:inherit;box-shadow:none;}
}
.sq.ghost-flash{animation:ghostSqFlash 0.55s ease forwards;z-index:6;}
/* Ghost on-cooldown indicator */
.skill-btn.ghost-cd{border-color:#2060a0!important;background:rgba(20,60,120,0.5)!important;}
.skill-btn.ghost-rdy{border-color:#40b8ff!important;background:rgba(20,80,160,0.25)!important;box-shadow:0 0 10px rgba(60,180,255,0.6)!important;animation:skillPulse-ghost .9s ease-in-out infinite;}
@keyframes skillPulse-ghost{0%,100%{box-shadow:0 0 6px rgba(60,180,255,0.5)}50%{box-shadow:0 0 18px rgba(80,200,255,0.9),0 0 32px rgba(40,140,220,0.5)}}

/* ── EXPLOSION EFFECT ── */
@keyframes explodeSqFlash{
  0%  {background:rgba(255,80,0,1)!important;box-shadow:inset 0 0 24px rgba(255,200,0,1);transform:scale(1.15);}
  30% {background:rgba(255,140,20,0.85)!important;box-shadow:inset 0 0 40px rgba(255,120,0,0.9);transform:scale(1.08);}
  70% {background:rgba(200,50,0,0.5)!important;}
  100%{background:inherit;transform:scale(1);box-shadow:none;}
}
.sq.explode-flash{animation:explodeSqFlash 0.65s ease forwards;z-index:6;}
.sq.explode-center{animation:explodeSqFlash 0.65s ease forwards;z-index:6;}
.skill-btn.explode-cd{border-color:#802000!important;background:rgba(80,20,0,0.5)!important;}
.skill-btn.explode-rdy{border-color:#ff6010!important;background:rgba(100,30,0,0.25)!important;box-shadow:0 0 10px rgba(255,80,0,0.6)!important;animation:skillPulse-explode .9s ease-in-out infinite;}
@keyframes skillPulse-explode{0%,100%{box-shadow:0 0 6px rgba(255,80,0,0.5)}50%{box-shadow:0 0 20px rgba(255,120,0,0.95),0 0 40px rgba(200,50,0,0.6)}}

/* ── FURY EFFECT ── */
@keyframes furySqFlash{
  0%  {background:rgba(200,0,255,0.9)!important;box-shadow:inset 0 0 22px rgba(255,100,255,1);transform:scale(1.12);}
  35% {background:rgba(160,0,220,0.7)!important;box-shadow:inset 0 0 35px rgba(200,60,255,0.8);transform:scale(1.06);}
  100%{background:inherit;transform:scale(1);box-shadow:none;}
}
.sq.fury-flash{animation:furySqFlash 0.6s ease forwards;z-index:6;}
.skill-btn.fury-cd{border-color:#600080!important;background:rgba(40,0,60,0.5)!important;}
.skill-btn.fury-rdy{border-color:#cc44ff!important;background:rgba(60,0,90,0.25)!important;box-shadow:0 0 10px rgba(180,0,255,0.6)!important;animation:skillPulse-fury .9s ease-in-out infinite;}
@keyframes skillPulse-fury{0%,100%{box-shadow:0 0 6px rgba(160,0,255,0.5)}50%{box-shadow:0 0 18px rgba(200,60,255,0.95),0 0 36px rgba(140,0,220,0.6)}}

/* ── SCREENSHAKE ── */
@keyframes shake-sm{0%,100%{transform:translate(0)}15%{transform:translate(-3px,2px)}30%{transform:translate(3px,-2px)}50%{transform:translate(-2px,3px)}70%{transform:translate(2px,-1px)}85%{transform:translate(-1px,2px)}}
@keyframes tremor{0%,100%{transform:translate(0)}20%{transform:translate(-0.6px,0.4px)}40%{transform:translate(0.6px,-0.5px)}60%{transform:translate(-0.5px,0.6px)}80%{transform:translate(0.4px,-0.4px)}}
@keyframes bossRumble1{0%,100%{transform:translate(0)}25%{transform:translate(-1.5px,1px)}75%{transform:translate(1.5px,-1px)}}
@keyframes bossRumble2{0%,100%{transform:translate(0)}20%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}80%{transform:translate(-2px,2px)}}
@keyframes bossRumble3{0%,100%{transform:translate(0)}15%{transform:translate(-5px,3px)}35%{transform:translate(5px,-4px)}55%{transform:translate(-4px,5px)}75%{transform:translate(4px,-3px)}}
#bwrap.tremor{animation:tremor 1.8s ease-in-out infinite;}
#bwrap.boss-rumble-1{animation:bossRumble1 0.6s ease-in-out infinite;}
#bwrap.boss-rumble-2{animation:bossRumble2 0.4s ease-in-out infinite;}
#bwrap.boss-rumble-3{animation:bossRumble3 0.25s ease-in-out infinite;}

@keyframes shake-lg{0%,100%{transform:translate(0)}10%{transform:translate(-7px,4px)}25%{transform:translate(7px,-5px)}40%{transform:translate(-5px,6px)}55%{transform:translate(6px,-4px)}70%{transform:translate(-4px,5px)}85%{transform:translate(3px,-3px)}}
@keyframes shake-xl{0%,100%{transform:translate(0)}8%{transform:translate(-12px,7px)}20%{transform:translate(12px,-9px)}33%{transform:translate(-9px,11px)}47%{transform:translate(10px,-8px)}60%{transform:translate(-8px,9px)}75%{transform:translate(7px,-6px)}88%{transform:translate(-5px,5px)}}
#bwrap.shake-sm{animation:shake-sm 0.4s ease;}
#bwrap.shake-lg{animation:shake-lg 0.55s ease;}
#bwrap.shake-xl{animation:shake-xl 0.7s ease;}

/* ── COMBO GLOW ── */
@keyframes comboGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(255,200,50,0.85)) drop-shadow(0 0 12px rgba(255,150,0,0.65)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}50%{filter:drop-shadow(0 0 10px rgba(255,220,80,1)) drop-shadow(0 0 22px rgba(255,180,0,0.85)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}}
@keyframes agilityGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(100,220,255,0.9)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}50%{filter:drop-shadow(0 0 14px rgba(100,220,255,1)) drop-shadow(0 0 28px rgba(60,180,255,0.6)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}}
@keyframes magicGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(180,100,255,0.9)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}50%{filter:drop-shadow(0 0 14px rgba(200,120,255,1)) drop-shadow(0 0 28px rgba(160,80,255,0.6)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5))}}
.pi.agility-glow{position:relative;}
.pi.agility-glow::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(100,220,255,0.18) 0px,rgba(100,220,255,0.18) 3px,transparent 3px,transparent 8px);
  animation:stripeScroll 1.0s linear infinite;}
@keyframes stripeScroll{0%{background-position:0 0}100%{background-position:16px 16px}}
.pi.agility-glow img{filter:drop-shadow(0 0 5px rgba(100,220,255,0.8)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5));}
.pi.magic-glow img{animation:magicGlow 1.0s ease-in-out infinite;}
.pi.agility-glow.magic-glow img{filter:drop-shadow(0 0 5px rgba(100,220,255,0.8)) drop-shadow(0 0 8px rgba(200,120,255,0.7)) drop-shadow(1px 2px 3px rgba(0,0,0,0.5));animation:magicGlow 1.2s ease-in-out infinite;}
.pi.combo-glow img{animation:comboGlow 0.75s ease-in-out infinite;}

/* ── SKILL ACTIVE GLOWS — glow on the .pi container ── */
@keyframes skillGlowGhost{
  0%,100%{box-shadow:0 0 8px 3px rgba(64,184,255,0.8),0 0 20px 6px rgba(64,184,255,0.4);}
  50%{box-shadow:0 0 14px 5px rgba(128,220,255,1),0 0 30px 10px rgba(64,184,255,0.6);}
}
@keyframes skillGlowExplode{
  0%,100%{box-shadow:0 0 8px 3px rgba(255,96,16,0.8),0 0 20px 6px rgba(255,96,16,0.4);}
  50%{box-shadow:0 0 14px 5px rgba(255,160,60,1),0 0 30px 10px rgba(255,80,0,0.6);}
}
@keyframes skillGlowFury{
  0%,100%{box-shadow:0 0 8px 3px rgba(204,68,255,0.8),0 0 20px 6px rgba(204,68,255,0.4);}
  50%{box-shadow:0 0 14px 5px rgba(220,120,255,1),0 0 30px 10px rgba(180,0,255,0.6);}
}
@keyframes skillGlowFire{
  0%,100%{box-shadow:0 0 8px 3px rgba(255,100,0,0.8),0 0 20px 6px rgba(255,60,0,0.4);}
  50%{box-shadow:0 0 14px 5px rgba(255,160,0,1),0 0 30px 10px rgba(255,80,0,0.6);}
}
.pi.skill-active-ghost  {animation:skillGlowGhost   0.7s ease-in-out infinite;border-radius:4px;}
.pi.skill-active-explode{animation:skillGlowExplode 0.7s ease-in-out infinite;border-radius:4px;}
.pi.skill-active-fury   {animation:skillGlowFury    0.7s ease-in-out infinite;border-radius:4px;}
.pi.skill-active-fire   {animation:skillGlowFire    0.7s ease-in-out infinite;border-radius:4px;}

/* ── BISHOP — ACTIVE UNIT GLOW (primary or shadow currently selected) ── */
@keyframes activeUnitGlow{
  0%,100%{box-shadow:0 0 6px 2px rgba(170,102,255,0.7),0 0 16px 4px rgba(170,102,255,0.35);}
  50%   {box-shadow:0 0 12px 4px rgba(220,180,255,0.95),0 0 24px 8px rgba(170,102,255,0.55);}
}
.pi.unit-active{animation:activeUnitGlow 0.85s ease-in-out infinite;border-radius:4px;}

/* ── GHOST SHIMMER (available) ── */
@keyframes ghostShimmer{
  0%  {filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.5));}
  20% {filter:drop-shadow(0 0 8px rgba(180,230,255,0.9)) drop-shadow(0 0 18px rgba(100,200,255,0.7)) brightness(1.25);}
  40% {filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(120,200,255,0.3));}
  65% {filter:drop-shadow(0 0 12px rgba(200,240,255,1)) drop-shadow(0 0 24px rgba(80,180,255,0.8)) brightness(1.35);}
  80% {filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.5));}
  100%{filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.5));}
}
.pi.ghost-shimmer img{animation:ghostShimmer 1.4s ease-in-out infinite;}
.pi.ghost-shimmer.combo-glow img{animation:ghostShimmer 1.4s ease-in-out infinite, comboGlow 0.75s ease-in-out infinite;}

/* ── SKILL BUTTONS ── */
#skill-bar{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px;}
.skill-btn{
  display:flex;align-items:center;
  width:100%;min-height:52px;height:auto;border-radius:5px;border:2px solid var(--border);
  background:var(--panel);cursor:pointer;position:relative;user-select:none;
  transition:border-color .15s,box-shadow .15s;padding:6px 8px;box-sizing:border-box;
}
/* Pill-style ultimate slots */
.sk-pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:5px 6px;border-radius:6px;cursor:pointer;user-select:none;
  border:1px solid #333;background:#111;transition:border-color .2s,box-shadow .2s;
  flex:1;min-width:0;
}
.sk-pill.no-skill{opacity:0.25;cursor:default;}
.sk-pill:not(.no-skill){border-color:#8a6a00;background:#1a1200;}
.sk-pill:not(.no-skill):not(.selected){box-shadow:0 0 8px rgba(201,168,76,0.25);}
.sk-pill.selected{border-color:#ffe066;background:#2a1e00;box-shadow:0 0 14px rgba(255,220,60,0.7),0 0 28px rgba(255,180,0,0.3);}
.sk-pill .sk-icon{font-size:16px;line-height:1;}
.sk-pill .sk-name{font-size:7px;font-weight:700;color:var(--gold);line-height:1;text-align:center;white-space:nowrap;}
.skill-btn .sk-icon{font-size:16px;line-height:1;flex-shrink:0;}
.sk-pips{display:flex;gap:2px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:1px;}
.sk-pip{width:8px;height:8px;border-radius:1px;flex-shrink:0;}
.sk-pip.filled{opacity:1;}
.sk-pip.empty{opacity:0.25;}
.skill-btn .sk-name{font-size:10px;font-weight:700;color:var(--text);line-height:1.2;}
.skill-btn .sk-cd{font-size:9px;color:var(--dim);font-weight:700;flex-shrink:0;min-width:34px;text-align:right;}
.skill-btn .sk-bar{width:100%;height:3px;background:#333;border-radius:2px;overflow:hidden;margin-top:2px;}
.skill-btn .sk-bar-fill{height:100%;border-radius:2px;background:var(--dim);transition:width .3s;}
.skill-btn.ghost-rdy .sk-bar-fill{background:#40b8ff;}
.skill-btn.explode-rdy .sk-bar-fill{background:#ff6010;}
.skill-btn.fury-rdy .sk-bar-fill{background:#cc44ff;}
.skill-btn.fire-rdy .sk-bar-fill{background:#ff6020;}
/* Selected skill: bright ring + scale */
.skill-btn.selected{
  outline:3px solid #fff;
  outline-offset:2px;
  transform:scale(1.12);
  z-index:2;
}
.skill-btn.selected.ghost-rdy{outline-color:#40b8ff;}
.skill-btn.selected.explode-rdy{outline-color:#ff6010;}
.skill-btn.selected.fury-rdy{outline-color:#cc44ff;}
.skill-btn.selected.fire-rdy{outline-color:#ff6020;}
.skill-btn.fire-cd{border-color:#801000!important;background:rgba(60,10,0,0.5)!important;}
.skill-btn.fire-rdy{border-color:#ff4400!important;background:rgba(90,20,0,0.25)!important;box-shadow:0 0 10px rgba(255,60,0,0.6)!important;animation:skillPulse-explode .9s ease-in-out infinite;}
.skill-btn.fire-rdy .sk-bar-fill{background:#ff6020;}
.skill-btn.no-skill{opacity:.2;cursor:default;}

.btn{font-family:inherit;font-size:13px;font-weight:700;padding:7px 18px;border:1px solid var(--acc);background:#2a2e1a;color:var(--acc);border-radius:3px;cursor:pointer;transition:background .15s;}
.btn:hover{background:#3a4020;}
.btn.r{border-color:var(--red);background:#2a1515;color:#e08080;}
.btn.r:hover{background:#3a1a1a;}
.sl{font-size:13px;color:var(--text);margin:3px 0;}
.sl span{color:var(--gold);font-weight:700;}

.sum-row{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:#1e1c19;border-radius:4px;font-size:12px;}
.sum-row .sum-label{color:var(--dim);}
.sum-row .sum-val{font-weight:700;color:var(--text);}
.sum-bonus{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:4px;font-size:12px;background:#1a2010;}
.sum-bonus .sum-bonus-lbl{color:#8bc34a;}
.sum-bonus .sum-bonus-val{font-weight:700;color:#aee060;}

/* Summary animations */
@keyframes sumRowIn{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:none}}
@keyframes sumBonusIn{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
@keyframes goldCountGlow{0%,100%{color:var(--gold)}50%{color:#fff;text-shadow:0 0 12px #ffd700}}
.sum-row.animate-in{animation:sumRowIn .35s ease forwards;}
.sum-bonus.animate-in{animation:sumBonusIn .4s cubic-bezier(.2,1.4,.4,1) forwards;}
#sum-total-row.counting{box-shadow:0 0 22px rgba(255,200,0,0.9),0 0 44px rgba(255,140,0,0.5);border-color:#ffe066;}
#sum-total.counting{animation:goldCountGlow .4s ease-in-out infinite;}

/* Overlay shake — applies to the #osum card, not the board */
@keyframes sumShakeSm{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,3px)}80%{transform:translate(2px,-1px)}}
@keyframes sumShakeLg{0%,100%{transform:translate(0)}10%{transform:translate(-8px,4px)}25%{transform:translate(8px,-5px)}40%{transform:translate(-5px,6px)}60%{transform:translate(5px,-4px)}80%{transform:translate(-3px,3px)}}
#osum .ob.sum-shake-sm{animation:sumShakeSm 0.4s ease;}
#osum .ob.sum-shake-lg{animation:sumShakeLg 0.5s ease;}

/* Bonus glow — increases intensity per bonus index */
.sum-bonus{transition:box-shadow .3s;}
.sum-bonus.glow-1,.sum-row.glow-1{box-shadow:0 0 8px rgba(201,168,76,.5);border-left:2px solid #c9a84c;}
.sum-bonus.glow-2,.sum-row.glow-2{box-shadow:0 0 14px rgba(255,140,0,.7),0 0 28px rgba(200,100,0,.4);border-left:2px solid #ff8c00;}
.sum-bonus.glow-3,.sum-row.glow-3{box-shadow:0 0 20px rgba(255,60,0,.9),0 0 40px rgba(200,0,0,.5);border-left:2px solid #ff3300;}
.sum-bonus.glow-4,.sum-row.glow-4{box-shadow:0 0 26px rgba(200,0,255,.9),0 0 50px rgba(150,0,200,.5);border-left:2px solid #dd00ff;animation:bonusVibe .15s ease-in-out infinite alternate;}
@keyframes bonusVibe{0%{transform:translateX(-2px)}100%{transform:translateX(2px)}}

/* Combo streak glow on best-combo row */
.sum-row.combo-glow{background:#2a1e08;box-shadow:0 0 10px rgba(255,160,0,.5);}
.sum-row.combo-glow .sum-val{color:#ffcc44;animation:goldCountGlow .6s ease-in-out infinite;}
.fn{position:fixed;pointer-events:none;z-index:200;font-size:10px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.8);white-space:nowrap;display:flex;gap:2px;align-items:baseline;}
.fn.fn-simple{animation:fnup 2s ease forwards;}
.fn.fn-combo{animation:fnup-combo 3s ease forwards;}
/* Simple float-up-fade */
@keyframes fnup{0%{opacity:1;transform:translateY(0)}65%{opacity:1;transform:translateY(-28px)}100%{opacity:0;transform:translateY(-52px)}}
@keyframes fndown{0%{opacity:1;transform:translateY(0)}65%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(40px)}}
.fn.fn-down{animation:fndown 1.8s ease forwards;}
/* Combo: hold in place while smash plays, then float */
@keyframes fnup-combo{0%{opacity:1;transform:translateY(0)}55%{opacity:1;transform:translateY(0)}75%{opacity:1;transform:translateY(-22px)}100%{opacity:0;transform:translateY(-48px)}}
/* Smash parts: base slides right, mult slides left, both hide, result appears */
@keyframes smashLeft{0%{opacity:1;transform:translateX(0)}30%{opacity:1;transform:translateX(18px)}45%{opacity:0;transform:translateX(6px)}100%{opacity:0;}}
@keyframes smashRight{0%{opacity:1;transform:translateX(0)}30%{opacity:1;transform:translateX(-18px)}45%{opacity:0;transform:translateX(-6px)}100%{opacity:0;}}
@keyframes resultAppear{0%,40%{opacity:0;transform:scale(0.4)}52%{opacity:1;transform:scale(1.35)}60%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.fn-part-base{display:inline-block;animation:smashLeft 0.55s ease forwards;}
.fn-part-mult{display:inline-block;animation:smashRight 0.55s ease forwards;}
.fn-part-result{display:inline-block;animation:resultAppear 0.65s ease forwards;position:absolute;left:50%;transform:translateX(-50%);}

/* DRAG */
.pi{cursor:grab;}
.pi:active{cursor:grabbing;}
#drag-ghost{position:fixed;width:52px;height:52px;pointer-events:none;z-index:300;opacity:.85;transform:translate(-50%,-50%);}
#drag-ghost img{width:100%;height:100%;display:block;}
.sq.drag-over.hint{background:rgba(120,160,50,0.55)!important;}
.sq.drag-over.hcap{outline-color:rgba(200,80,80,0.8)!important;}

/* PRE-MOVE */
.sq.premove{outline:3px solid rgba(255,160,0,0.7);outline-offset:-3px;}
.sq.premove-target{background:rgba(255,140,0,0.3)!important;}

/* COMBO BANNER — Quake-style escalating */
#combo-banner{
  position:fixed;bottom:calc(var(--sq)*0 + 80px);left:50%;transform:translateX(-50%);
  background:rgba(10,8,4,0.55);border:2px solid var(--gold);
  border-radius:8px;padding:10px 22px;text-align:center;
  pointer-events:none;z-index:150;display:none;
  transition:border-color .15s,box-shadow .15s;
}
#combo-banner .cb-n{font-family:'Press Start 2P',monospace;font-size:22px;font-weight:400;letter-spacing:.04em;}
#combo-banner .cb-s{font-size:11px;color:#aaa;margin-top:3px;}
@keyframes comboPop{0%{opacity:0;transform:translateX(-50%) scale(.55)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* Glow tiers matching bonus glow in summary */
#combo-banner.tier-1{border-color:#c9a84c;box-shadow:0 0 12px rgba(201,168,76,.6);}
#combo-banner.tier-1 .cb-n{color:#c9a84c;}
#combo-banner.tier-2{border-color:#ff8c00;box-shadow:0 0 18px rgba(255,140,0,.75),0 0 35px rgba(255,80,0,.4);}
#combo-banner.tier-2 .cb-n{color:#ff9820;text-shadow:0 0 12px rgba(255,140,0,.8);}
#combo-banner.tier-3{border-color:#ff3300;box-shadow:0 0 22px rgba(255,60,0,.9),0 0 50px rgba(200,0,0,.5);}
#combo-banner.tier-3 .cb-n{color:#ff4422;text-shadow:0 0 16px rgba(255,60,0,1);}
@keyframes ultraVibe{0%,100%{transform:translateX(-50%) scale(1)}25%{transform:translateX(-52%) scale(1.04)}75%{transform:translateX(-48%) scale(1.04)}}
@keyframes bannerShake1{0%,100%{transform:translateX(-50%)}30%{transform:translateX(calc(-50% - 3px))}70%{transform:translateX(calc(-50% + 3px))}}
@keyframes bannerShake2{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 7px))}50%{transform:translateX(calc(-50% + 7px))}80%{transform:translateX(calc(-50% - 4px))}}
@keyframes bannerShake3{0%,100%{transform:translateX(-50%)}10%{transform:translateX(calc(-50% - 14px))}30%{transform:translateX(calc(-50% + 12px))}50%{transform:translateX(calc(-50% - 10px))}70%{transform:translateX(calc(-50% + 11px))}90%{transform:translateX(calc(-50% - 8px))}}
#combo-banner.tier-4{border-color:#dd00ff;box-shadow:0 0 28px rgba(200,0,255,1),0 0 60px rgba(150,0,200,.7);animation:comboPop .3s cubic-bezier(.2,1.4,.4,1) forwards, ultraVibe .12s ease-in-out infinite;}
#combo-banner.tier-4 .cb-n{color:#ee44ff;text-shadow:0 0 20px rgba(220,0,255,1),0 0 40px rgba(180,0,220,.8);}

/* ── FIRE TRAIL ── */
/* Enclosed area preview during queue input */
@keyframes orbPulse{
  0%{transform:scale(0.88);box-shadow:0 0 6px #ff5500,0 0 12px #ff440066;}
  100%{transform:scale(1.12);box-shadow:0 0 12px #ff6600,0 0 24px #ff550099,0 0 40px #ff440033;}
}
.sq.enc-preview{box-shadow:inset 0 0 5px rgba(220,30,0,0.35),0 0 2px rgba(255,60,0,0.2);}
/* enc-buildup and enc-pop handled entirely by JS overlays */
.sq.trail-0{background:rgba(255,60,0,0.55)!important;}
.sq.trail-1{background:rgba(255,120,0,0.42)!important;}
.sq.trail-2{background:rgba(255,180,0,0.30)!important;}
/* pixel ember overlay on trail squares */
.sq.trail-0::before,.sq.trail-1::before,.sq.trail-2::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,220,0,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,140,0,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 75%, rgba(255,80,0,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,200,0,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,100,0,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 45%, rgba(255,160,0,0.4) 0%, transparent 100%);
  animation: emberFlicker 0.25s steps(1) infinite;
}
.sq.trail-1::before{opacity:.7;}
.sq.trail-2::before{opacity:.45;}
@keyframes emberFlicker{
  0%  {background-position:0 0,0 0,0 0,0 0,0 0,0 0;}
  25% {background-position:3px -2px,  -2px 3px,  4px 1px,  -1px -3px, 2px 2px, -3px 1px;}
  50% {background-position:-2px 3px,  4px -1px, -3px 2px,  2px  4px,-4px-1px,  2px-3px;}
  75% {background-position:1px 4px,  -3px 2px,  2px-3px, -4px  1px, 3px-2px, -1px 4px;}
}
@keyframes deathFade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes deathPieceFall{0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);filter:drop-shadow(0 0 8px #fff) brightness(1);}30%{transform:translate(-50%,-50%) scale(1.6) rotate(-8deg);filter:drop-shadow(0 0 40px #ff4444) drop-shadow(0 0 80px #ff2200) brightness(2.5);}70%{transform:translate(-50%,-50%) scale(1.2) rotate(12deg);filter:drop-shadow(0 0 20px #ff2200) brightness(1.5);opacity:1;}100%{transform:translate(-50%,-55%) scale(0.4) rotate(25deg);filter:drop-shadow(0 0 4px #440000) brightness(0.3);opacity:0;}}
@keyframes deathVignette{0%{opacity:0;}30%{opacity:1;}100%{opacity:0.6;}}
@keyframes deathShockwave{0%{transform:scale(0);opacity:0.9;}100%{transform:scale(3.5);opacity:0;}}
#death-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;}
#death-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.95) 100%);animation:deathVignette 2.8s ease-out forwards;}
#death-piece{position:absolute;top:50%;left:50%;width:96px;height:96px;animation:deathPieceFall 2.4s ease-in-out forwards;}
#death-shockwave{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border:3px solid rgba(255,80,80,0.8);border-radius:50%;animation:deathShockwave 0.5s ease-out 0.3s forwards;opacity:0;}


/* ─── GEM SLOTS BAR ───────────────────────────────────────── */
#gem-bar{display:flex;align-items:center;gap:6px;width:calc(var(--sq)*8);
  box-sizing:border-box;padding:5px 2px;border-top:1px solid #2a2000;}
.gem-slot{width:36px;height:36px;border-radius:6px;border:1.5px solid #443300;
  background:#0d0a00;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;position:relative;transition:border-color .2s,box-shadow .2s;
  flex-shrink:0;}
.gem-slot:hover{border-color:#887744;box-shadow:0 0 8px #88440044;}
.gem-slot.filled{border-color:#7a5a10;background:#1a1200;}
.gem-slot.filled:hover{border-color:#ccaa44;box-shadow:0 0 10px #88660066;}
.gem-slot-label{font-size:7px;color:#554422;position:absolute;bottom:2px;left:0;right:0;
  text-align:center;line-height:1;pointer-events:none;}
#gem-inv-btn{margin-left:auto;background:#0d0a00;border:1.5px solid #443300;color:#887744;
  font-size:10px;font-weight:700;padding:0;border-radius:6px;cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1px;white-space:nowrap;transition:border-color .2s,box-shadow .2s;}
#gem-inv-btn:hover{border-color:#887744;color:#cc9944;}

/* ─── INVENTORY ───────────────────────────────────────────── */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0;}
.inv-item{border:1.5px solid #443300;border-radius:6px;background:#0d0a00;
  padding:8px 6px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  position:relative;}
.inv-item:hover{border-color:#ccaa44;background:#1a1200;}
.inv-item.equipped{border-color:#ffe066;background:#1a1200;}
.inv-item .inv-icon{font-size:24px;display:block;margin-bottom:2px;}
.inv-item .inv-name{font-size:8px;font-weight:700;color:#cc9944;line-height:1.2;}
.inv-item .inv-badge{position:absolute;top:2px;right:3px;font-size:7px;
  color:#66cc66;font-weight:900;}
.inv-empty{color:#443300;font-size:11px;text-align:center;padding:20px;grid-column:1/-1;}

/* ─── FORGE ───────────────────────────────────────────────── */
.forge-ov{background:rgba(0,0,0,0.85);backdrop-filter:blur(4px);}
.forge-panel{max-width:400px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(160deg,#120800,#0a0500);
  border:2px solid #8a4800;box-shadow:0 0 60px rgba(255,100,0,0.15);}
.forge-circle{position:relative;width:200px;height:200px;margin:16px auto;}
.forge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-20%);
  width:100px;display:flex;flex-direction:column;align-items:center;
  pointer-events:none;}
.forge-result-slot{
  width:36px;height:36px;border-radius:6px;
  border:2px dashed #664400;background:#0d0800;
  z-index:3;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  box-shadow:0 0 12px rgba(255,100,0,0.1);
}
.forge-anvil{
  width:100px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 8px rgba(255,100,0,0.15));
  margin-top:-2px;z-index:0;position:relative;
}
/* Position 5 slots in a circle (72deg apart) around center */
.forge-circle .forge-slot{position:absolute;
  transform:translate(-50%,-50%);z-index:1;}
.forge-circle .forge-slot:nth-child(2){top:8%;left:50%;}
.forge-circle .forge-slot:nth-child(3){top:35%;left:95%;}
.forge-circle .forge-slot:nth-child(4){top:85%;left:79%;}
.forge-circle .forge-slot:nth-child(5){top:85%;left:21%;}
.forge-circle .forge-slot:nth-child(6){top:35%;left:5%;}
.forge-slot{width:48px;height:48px;border-radius:8px;border:2px dashed #443322;
  background:#0d0800;display:flex;align-items:center;justify-content:center;
  font-size:26px;cursor:pointer;transition:all .2s;position:relative;z-index:1;}
.forge-slot.filled{border-style:solid;border-color:#8a5500;background:#1a0e00;}
.forge-slot.filled:hover{border-color:#ff9944;}
.forge-slot:not(.filled):hover{border-color:#665533;background:#110900;}
@keyframes forgeSmash{
  0%{transform:translate(var(--sx),var(--sy)) scale(1);}
  60%{transform:translate(0,0) scale(1.3);}
  75%{transform:translate(0,0) scale(0.85);}
  85%{transform:translate(0,0) scale(1.1);}
  100%{transform:translate(0,0) scale(1);opacity:0;}
}
@keyframes forgeShake{
  0%,100%{transform:translateX(0);}
  10%{transform:translateX(-6px);}
  20%{transform:translateX(6px);}
  30%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  50%{transform:translateX(-4px);}
  60%{transform:translateX(4px);}
  70%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
  90%{transform:translateX(-2px);}
}
@keyframes forgeSpark{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0);}
}
@keyframes forgeColorPop{
  0%{transform:scale(0);opacity:0;}
  40%{transform:scale(1.4);opacity:1;}
  70%{transform:scale(0.9);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes forgeCardSlide{
  0%{transform:perspective(800px) rotateY(-90deg) translateX(-30px);opacity:0;filter:blur(6px);}
  50%{transform:perspective(800px) rotateY(6deg) translateX(3px);opacity:1;filter:blur(0);}
  70%{transform:perspective(800px) rotateY(-3deg) translateX(-1px);}
  85%{transform:perspective(800px) rotateY(1deg);}
  100%{transform:perspective(800px) rotateY(0) translateX(0);opacity:1;}
}
@keyframes forgeGlowPulse{
  0%,100%{box-shadow:0 0 20px var(--rg),0 0 40px var(--rg)66;}
  50%{box-shadow:0 0 50px var(--rg),0 0 100px var(--rg)88;}
}
@keyframes floatUp{
  from{transform:translateY(10px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
  background:#0d0800;padding:12px;margin:10px 0;text-align:center;}
.forge-gem-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;margin:8px 0;}
.forge-gem-pick{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;
  border:1px solid #332200;cursor:pointer;transition:background .15s;}
.forge-gem-pick:hover{background:#1a1000;border-color:#665533;}

/* ─── MENU SYSTEM ─────────────────────────────────────────── */
/* Menu button is pinned to the top-right corner of the board. It
   lives inside the board's relative wrapper so it tracks with the
   board at any viewport size without needing media queries. */
#menu-btn{position:absolute;top:4px;right:4px;z-index:8000;
  background:rgba(20,15,5,0.85);
  border:1.5px solid #5a4010;border-radius:6px;padding:4px 8px;cursor:pointer;
  font-size:18px;color:var(--gold);line-height:1;box-shadow:0 2px 8px #0008;
  transition:background .15s,transform .1s;}
#menu-btn:hover{background:rgba(80,50,5,0.9);transform:scale(1.08);}
#menu-btn:active{transform:scale(0.96);}
.menu-ov{position:fixed;inset:0;z-index:8500;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(3px);}
.menu-panel{background:linear-gradient(160deg,#1a1200,#0d0a00);border:2px solid #7a5a10;
  border-radius:10px;padding:20px 24px;min-width:220px;max-width:320px;width:90%;
  box-shadow:0 8px 40px #000c,0 0 40px rgba(180,120,0,0.12);}
.menu-title{font-size:18px;font-weight:900;color:var(--gold);text-align:center;
  letter-spacing:.05em;margin-bottom:16px;text-shadow:0 0 12px #aa6600;}
.menu-opt{width:100%;padding:11px 16px;margin-bottom:8px;border-radius:6px;border:1.5px solid;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.04em;
  transition:background .15s,transform .1s,box-shadow .15s;}
.menu-opt:last-child{margin-bottom:0;}
/* ─── Welcome page (full-screen, standalone) ─────────────────── */
#welcome-page{
  position:fixed;inset:0;z-index:200;
  background:#0e0c08;
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 20px;
}
.welcome-content{
  max-width:420px;width:100%;text-align:center;
  margin:auto 0;position:relative;z-index:1;
}
.welcome-icon{
  font-size:64px;margin-bottom:12px;
  filter:drop-shadow(0 0 20px rgba(200,160,60,0.3));
}
.welcome-title{
  font-size:36px;font-weight:900;
  letter-spacing:.08em;margin:0 0 24px;line-height:1.1;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.title-line{
  display:block;position:relative;
  background:linear-gradient(180deg,#fff8cc 0%,#ffdd44 20%,#cc9922 50%,#886611 75%,#553300 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 0 #331a00) drop-shadow(0 0 16px rgba(255,200,60,0.35));
  /* Static chromatic aberration — always visible */
  text-shadow:
    -1px 0 rgba(255,30,0,0.18),
    1px 0 rgba(0,255,30,0.15),
    -2px 0 rgba(255,0,0,0.06),
    2px 0 rgba(0,200,0,0.05);
  /* Rare glitch burst */
  animation:titleGlitch 12s steps(1) infinite;
}
.title-line:last-child{
  animation-delay:1s;
  /* Slightly different static offset for the second line */
  text-shadow:
    1px 0 rgba(255,30,0,0.16),
    -1px 0 rgba(0,255,30,0.13),
    2px 0 rgba(255,0,0,0.05),
    -2px 0 rgba(0,200,0,0.04);
}
/* Rare glitch burst — fires briefly every ~12s */
@keyframes titleGlitch{
  0%,100%{transform:none;opacity:1;}
  83%{transform:none;opacity:1;}
  83.5%{transform:translate(-4px,0) skewX(-3deg);opacity:0.9;}
  84%{transform:translate(3px,1px) skewX(2deg);opacity:0.95;}
  84.5%{transform:none;opacity:1;}
  84.8%{clip-path:inset(25% 0 55% 0);transform:translate(5px,0);}
  85%{clip-path:inset(55% 0 25% 0);transform:translate(-4px,0);}
  85.3%{clip-path:none;transform:none;opacity:1;}
}
.welcome-desc{
  font-size:13px;color:#b0a080;line-height:1.8;margin:0 0 36px;
}
.welcome-actions{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.welcome-btn{
  width:100%;padding:16px 20px;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:900;
  cursor:pointer;letter-spacing:.05em;
  transition:transform .12s,box-shadow .2s;
}
.welcome-btn:hover{transform:translateY(-1px);}
.welcome-btn:active{transform:translateY(1px) scale(0.98);}
.welcome-btn-primary{
  background:linear-gradient(160deg,#2a2008,#1a1606);
  border:2px solid #c9a84c;color:#ffe28a;
  box-shadow:0 0 20px rgba(200,160,60,0.2),0 4px 16px #0008;
  margin-bottom:8px;
}
.welcome-btn-primary:hover{
  box-shadow:0 0 30px rgba(200,160,60,0.35),0 4px 20px #000a;
}
.welcome-hint{
  font-size:11px;color:#888;margin-bottom:28px;
}
.welcome-btn-secondary{
  background:linear-gradient(160deg,#1a1608,#100e04);border:1.5px solid #4a4030;color:#c8b080;
  margin-bottom:10px;font-size:13px;padding:13px 20px;
}
.welcome-btn-secondary:hover{
  background:linear-gradient(160deg,#241e0c,#181408);
  border-color:#7a6a40;color:#ffe28a;
  box-shadow:0 0 12px rgba(200,160,60,0.1);
}
.welcome-login-note{
  font-size:10px;color:#777;line-height:1.6;max-width:320px;
}
.welcome-login-note b{color:#c9a84c;}
@media (max-width:480px){
  .welcome-title{font-size:24px;}
  .welcome-icon{font-size:48px;}
  .welcome-desc{font-size:12px;margin-bottom:28px;}
  .welcome-btn{font-size:14px;padding:14px 16px;}
}
.menu-opt:hover{transform:scale(1.02);box-shadow:0 0 12px currentColor33;}
.menu-opt.primary{background:#1e1608;border-color:#aa7a00;color:#ffd060;}
.menu-opt.danger{background:#1e0c08;border-color:#aa3000;color:#ff7040;}
.menu-opt.secondary{background:#0e1420;border-color:#2a4a6a;color:#88bbdd;}
.menu-opt.close-opt{background:#1a1a1a;border-color:#444;color:#888;}
/* Piece select — full-screen page (matches welcome page) */
#os{
  position:fixed;inset:0;z-index:100;
  background:#0e0c08;
  display:flex;flex-direction:column;
}
#os-scroll{
  flex:1;overflow-y:auto;padding:20px 20px 40px;
  -ms-overflow-style:none;scrollbar-width:none;
  position:relative;z-index:1;
}
#os-scroll::-webkit-scrollbar{display:none;}

/* Codex — full-screen scrollable page */
#codex-menu{
  position:fixed;inset:0;z-index:8600;
  background:#0d0a00;
  display:flex;flex-direction:column;
}
#codex-header{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 16px 10px;
  background:linear-gradient(180deg,#1a1200,#0d0a00);
  border-bottom:1px solid #3a2a00;
  flex-shrink:0;
  position:sticky;top:0;z-index:1;
}
.codex-title{
  font-size:18px;font-weight:900;color:var(--gold);
  letter-spacing:.05em;text-shadow:0 0 10px #aa6600;
}
#codex-close-btn{
  background:rgba(40,40,40,0.5);border:1px solid #555;color:#aaa;
  font-family:inherit;font-size:12px;font-weight:600;
  padding:6px 18px;border-radius:5px;cursor:pointer;
}
#codex-close-btn:hover{color:#fff;border-color:#888;}
#codex-scroll{
  flex:1;overflow-y:auto;padding:12px 16px 40px;
  -ms-overflow-style:none;scrollbar-width:none;
}
#codex-scroll::-webkit-scrollbar{display:none;}
#codex-content{max-width:420px;margin:0 auto;}
.gem-entry{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid #2a2000;}
.gem-entry:last-child{border-bottom:none;}
.gem-icon{font-size:26px;flex-shrink:0;width:36px;text-align:center;line-height:1.2;}
.gem-info{flex:1;}
.gem-name{font-size:13px;font-weight:900;margin-bottom:2px;}
.gem-piece{font-size:10px;color:var(--dim);margin-bottom:4px;}
.gem-recipe{font-size:10px;color:#998855;line-height:1.5;}
.gem-locked{opacity:0.4;}

/* ─── Piece-select screen: higher contrast overrides ───────────
   Scoped to #os so dim greys elsewhere in the HUD aren't affected. */
#os{ color:#e8e8e8; }
#os .pso-name{ color:#ffffff; text-shadow:0 1px 2px #000a; }
#os .pso-tagline{ color:#d8c8a8; }
#os .pso-playstyle{ color:#e0e0e0; }
#os .pso-stat{ color:#d0d0d0; }
#os .pso-skill-desc-text{ color:#e4e4e4; }
#os .pso-skill-pill .sp-name{ color:#f0f0f0; }
#os .pso-skill-pill .sp-tag{ color:#ffd080; opacity:0.95; }
#os .pso-hp-badge{ color:#ff8080; }
#os .psd{ color:#d0d0d0; }
#os .skill-card-desc{ color:#e0e0e0; }
#os .tut-heading{ color:#ffd780; }
#os .tut-section p{ color:#d8d8d8; }
#os .tut-badge{ color:#e8e8e8; }
#os #tutorial-body{ color:#d8d8d8 !important; }
#os #tutorial-toggle span{ color:#ffd780; }
#os #trophy-section > div:first-child{ color:#ffd780 !important; }
#os .pso-el-badge{ text-shadow:0 1px 2px #000c; }
#os .ob h2{ color:#ffe28a; }
/* Difficulty info box text brightens to stay legible on both themes */
#os #diff-info{ color:#e8e8e8 !important; }
#os #diff-info-body div{ color:inherit; }

/* ─── Responsive: mobile (narrow) ────────────────────────────── */
@media (max-width: 640px){
  .ov{ padding:12px 0; }
  .ob{ width:96%; padding:16px 14px; }
  /* Tighter piece card on mobile */
  .pso-header{ padding:10px 12px; gap:8px; }
  .pso-piece{ width:44px; height:44px; }
  .pso-name{ font-size:14px; }
  .pso-select-btn{ padding:10px; font-size:12px; }
  .pso-detail{ padding:0 10px 10px; }
  .pso-skill-pill{ min-width:46px; padding:4px 7px; }
  .pso-skill-pill .sp-icon{ font-size:12px; }
  /* Trophy cards wrap to 2 columns on very narrow screens */
  @media (max-width: 380px){
    #trophy-cards{ grid-template-columns:repeat(2,1fr); }
  }
}

/* ─── Responsive: desktop (wide) ────────────────────────────── */
@media (min-width: 900px){
  /* Wider piece-select panel on desktop with more breathing room */
  /* Slightly larger piece card preview */
  .pso-piece{ width:60px; height:60px; }
  .pso-name{ font-size:17px; }
  .pso-tagline{ font-size:10px; }
  .pso-playstyle{ font-size:11px; }
}
@media (min-width: 1200px){
}

/* ─── Tutorial tooltip overlay ─────────────────────────────────── */
/* Mobile: tooltip anchored below the board. */
/* Desktop (>=900px): tooltip sits to the right of the board. */
#tut-tooltip-ov{
  position:fixed;z-index:9500;display:none;
  pointer-events:none;
  /* Anchor below the top HUD bar */
  left:0;right:0;top:40px;bottom:auto;
  justify-content:center;align-items:flex-start;
  padding:8px;
  background:none;
}
.tut-box{
  pointer-events:auto;
  background:linear-gradient(170deg,#1e1a10,#121008);
  border:2px solid #7a6a30;border-radius:12px;
  padding:18px 22px 14px;max-width:420px;width:92%;
  box-shadow:0 6px 30px #000c,0 0 40px rgba(180,140,40,0.1);
  font-size:12px;line-height:1.65;color:#e8e8e8;
  animation:tutSlideIn .3s ease-out;
}
@keyframes tutSlideIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
/* On mobile, all positions just anchor at the bottom */
.tut-pos-center,.tut-pos-top,.tut-pos-bottom{ margin:0 auto; }
.tut-box b{color:#ffe28a;}
#tut-tooltip-body{margin-bottom:12px;}
#tut-tooltip-btns{display:flex;gap:8px;justify-content:center;}

/* Desktop: tooltip to the right of the board, top-aligned with HUD */
@media (min-width: 900px){
  #tut-tooltip-ov{
    left:calc(50% + 228px);
    right:auto;bottom:auto;
    top:8px;
    width:340px;
    align-items:flex-start;justify-content:flex-start;
    padding:0 16px;
  }
  .tut-box{
    max-width:320px;width:100%;
    animation:tutSlideRight .3s ease-out;
  }
  @keyframes tutSlideRight{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
  .tut-pos-center,.tut-pos-top,.tut-pos-bottom{ margin:0; }
}
.tut-btn{
  padding:10px 20px;border-radius:6px;font-family:inherit;font-weight:700;
  cursor:pointer;font-size:12px;letter-spacing:.04em;transition:transform .1s;
}
.tut-btn:active{transform:scale(0.96);}
.tut-btn-primary{
  background:linear-gradient(160deg,#3a2a08,#2a1e06);border:2px solid #c9a84c;
  color:#ffe28a;box-shadow:0 0 12px #c9a84c44;
}
.tut-btn-primary:hover{box-shadow:0 0 20px #c9a84c66;}
.tut-btn-back{
  background:#1a1810;border:1px solid #555;color:#999;font-size:11px;padding:8px 14px;
}
.tut-btn-back:hover{color:#ddd;border-color:#888;background:#222018;}
.tut-btn-skip{
  background:#141210;border:1px solid #444;color:#888;font-size:10px;padding:8px 14px;
}
.tut-btn-skip:hover{color:#bbb;border-color:#666;background:#1c1a14;}

/* Tutorial Part 1: hide non-board chrome via body class.
   Part 2 removes the class to show the standard game view. */
body.tutorial-part1 #top,
body.tutorial-part1 #skill-bar-row,
body.tutorial-part1 #gem-bar{ display:none !important; }
/* Hide burger menu during entire tutorial */
body.tutorial-active #menu-btn{ display:none !important; }

/* Tutorial: highlight referenced HUD elements */
.tut-highlight{
  position:relative;z-index:9501;
  outline:2px solid #ffe28a !important;
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 16px rgba(255,226,138,0.5) !important;
  animation:tutHighlightPulse 1.2s ease-in-out infinite;
}
@keyframes tutHighlightPulse{
  0%,100%{outline-color:rgba(255,226,138,0.8);}
  50%{outline-color:rgba(255,226,138,0.3);}
}

/* Tutorial: trail path guide overlay */
#tut-path-overlay{
  position:absolute;top:2px;left:2px;
  width:calc(var(--sq)*8);height:calc(var(--sq)*12);
  pointer-events:none;z-index:50;
}
.tut-path-marker{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,136,68,0.85);border:2px solid #ffe28a;
  color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px rgba(255,136,68,0.6);
  animation:tutMarkerPulse 1.4s ease-in-out infinite alternate;
}
@keyframes tutMarkerPulse{
  0%{box-shadow:0 0 6px rgba(255,136,68,0.4);opacity:0.8;}
  100%{box-shadow:0 0 14px rgba(255,136,68,0.8);opacity:1;}
}

/* Tutorial: persistent skip button below board */
#tut-skip-btn{
  display:block;margin:8px 0 0 auto;
  background:#141210;border:1px solid #444;color:#888;
  font-family:inherit;font-size:10px;font-weight:400;
  padding:6px 14px;border-radius:4px;cursor:pointer;
  transition:color .15s,border-color .15s;
}
#tut-skip-btn:hover{color:#bbb;border-color:#666;}

/* Tutorial mode: make move hints much more obvious */
body.tutorial-active .sq-hint-dot{
  width:36%;height:36%;
  background:rgba(255,255,255,0.55);
  box-shadow:0 0 10px rgba(255,255,255,0.5),0 0 20px rgba(200,180,100,0.3);
  animation:tutHintPulse 1s ease-in-out infinite;
}
body.tutorial-active .sq.hcap::before{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,0.5);
  animation:tutCapPulse 1s ease-in-out infinite;
}
/* Hint dot uses top:50%/left:50% so translate(-50%,-50%) is needed */
@keyframes tutHintPulse{
  0%,100%{opacity:0.7;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
}
/* Capture ring uses inset:0 so NO translate — just scale from center */
@keyframes tutCapPulse{
  0%,100%{opacity:0.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.05);}
}

/* ─── Press Start 2P — size tuning overrides ─────────────────────
   Press Start 2P glyphs are ~2x wider than a normal sans-serif.
   Scale down font sizes so UI elements don't overflow their boxes. */

/* Top HUD bar — sizes already set in main rules */
#top h1{font-size:11px;}

/* Skill bar pills */
.sk-pill{padding:4px 2px;gap:2px;}
.sk-pill .sk-icon{font-size:14px;}
.sk-pill .sk-name{font-size:5px;letter-spacing:0;}
.sk-pill .sk-pips{font-size:6px;}
.skill-btn .sk-name{font-size:8px;}
.skill-btn .sk-cd{font-size:7px;}

/* Enemy counts panel */
.ec{font-size:8px;}

/* Combo banner — keep large */
#combo-banner .cb-n{font-size:16px;}
#combo-banner .cb-s{font-size:7px;}

/* Buttons */
.btn{font-size:9px;padding:7px 12px;}

/* Overlays (game over, victory, summary, upgrade) */
.ob h2{font-size:13px;}
.ob p,.ob div,.ob span{font-size:9px;}
.ob button{font-size:9px;}
.sl{font-size:10px;}
.sl span{font-size:12px;}

/* Upgrade/skill tree */
#upg-title{font-size:9px;}
#usub{font-size:7px;}
#ugld,#ubdiam,#uorbs{font-size:9px;}
.skill-card-icon{font-size:16px;}
.skill-card-title{font-size:8px;}
.skill-card-tag{font-size:6px;}
.skill-card-desc{font-size:7px;line-height:1.5;}
.skill-cost{font-size:8px;}
.skill-pip{width:8px;height:8px;}
.skill-pips{gap:2px;}
.skill-card{padding:6px 8px;}
.skill-card-header{gap:5px;margin-bottom:4px;}
.skill-section-label{font-size:6px;}
.upg-tab{font-size:7px;padding:3px 6px;}
/* Bank box compact */
#ou .ob{padding:10px;}
#ou [style*="Bank"]{font-size:7px;}
#upg-piece-icon{width:48px!important;height:48px!important;}

/* Menu screens (welcome + piece select) */
.welcome-title{font-size:28px;}
.welcome-desc{font-size:9px;line-height:1.8;}
.welcome-btn{font-size:10px;padding:14px 16px;letter-spacing:.03em;}
.welcome-btn-secondary{font-size:9px;padding:12px 16px;}
.welcome-hint,.welcome-login-note{font-size:7px;line-height:1.6;}
.menu-title{font-size:13px;}
.menu-opt{font-size:10px;padding:10px 14px;}

/* Tutorial tooltip */
.tut-box{font-size:9px;line-height:1.6;}
.tut-btn{font-size:9px;padding:10px 16px;}
.tut-btn-skip,.tut-btn-back{font-size:8px;}

/* Codex (Book of Gems) */
.codex-title{font-size:13px;}
#codex-close-btn{font-size:9px;}
.gem-name{font-size:10px;}

/* Forge */
.forge-gem-pick{font-size:8px;}

/* Gem bar */
.gem-slot-label{font-size:6px;}

/* Trophy cards on piece select */
#trophy-cards{font-size:8px;}

/* Piece cards (inside piece-menu overlay) */
.pso-name{font-size:11px;}
.pso-tagline{font-size:7px;line-height:1.6;}
.pso-playstyle{font-size:8px;line-height:1.6;}
.pso-hp-badge{font-size:9px;}
.pso-el-badge{font-size:7px;}
.pso-select-btn{font-size:9px;padding:10px;letter-spacing:.03em;}
.pso-skill-pill{font-size:7px;}
.pso-stat{font-size:7px;}

/* Mobile adjustments */
@media (max-width:480px){
  body{font-size:10px;}
  #top h1{font-size:10px;}
  .hl{font-size:8px;}
  .hv{font-size:12px;}
  .sk-pill .sk-icon{font-size:13px;}
  .sk-pill .sk-name{font-size:4px;}
  .welcome-title{font-size:20px;}
  .welcome-btn{font-size:9px;padding:12px 14px;}
  .menu-title{font-size:11px;}
  .menu-opt{font-size:9px;}
}