:root{
  --bg:#0c0a08; --bg2:#161009; --panel:rgba(30,26,22,0.62); --line:rgba(210,190,170,0.16);
  --violet:#f7931a; --gold:#ffd84d; --teal:#37e0c8; --rose:#ff4d6d; --ink:#efe7dc; --dim:#c9b89e;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --glass:linear-gradient(180deg,rgba(52,44,36,.55),rgba(22,18,14,.62));
  --glass-line:1px solid rgba(200,180,160,.22);
  --glass-shadow:0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(220,200,180,.14);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 800px at 70% -10%,#221a10 0%,var(--bg) 55%),var(--bg);
  color:var(--ink);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;
}
b{color:#fff}
#wrap{height:100vh;display:flex;flex-direction:column}

/* top bar */
#bar{position:relative;z-index:10;display:flex;align-items:center;gap:22px;padding:8px 16px;border-bottom:var(--glass-line);
  background:linear-gradient(180deg,rgba(44,36,28,.6),rgba(18,14,10,.35));backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
/* desktop: the stats block is absolutely centred in the header */
@media(min-width:901px){ .stats{position:absolute;left:50%;transform:translateX(-50%);margin:0} }
.brand{font-size:19px;font-weight:700;letter-spacing:.5px}
.brand b{color:var(--gold);text-shadow:0 0 14px rgba(255,216,77,.5)}
.brand .mark,.title .mark{color:var(--violet);text-shadow:0 0 12px var(--violet)}
.stats{display:flex;gap:20px;margin-left:8px}
.stat{display:flex;flex-direction:column;line-height:1.05;position:relative}
/* income you didn't watch land on the board (interest/banking) floats up beside the gold counter */
.gold-float{position:absolute;left:50%;top:100%;transform:translateX(-50%);white-space:normal;max-width:150px;text-align:center;line-height:1.2;
  font-size:11px;font-weight:800;text-shadow:0 0 8px rgba(255,216,77,.5);pointer-events:none;z-index:30;
  animation:goldFloat 3.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes goldFloat{0%{opacity:0;transform:translate(-50%,-6px) scale(.9)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-50%,20px) scale(1)}}
.gold-bump{animation:goldBump .34s ease-out}
@keyframes goldBump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.stat .lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.stat .val{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(220,180,120,.28)}
.val.gold{color:var(--gold);text-shadow:0 0 12px rgba(255,216,77,.45)} .val.lives{color:var(--rose);text-shadow:0 0 12px rgba(255,77,109,.4)} .val.power{color:#ffcf8f}
.stat.weak .val{font-size:13px;display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;box-shadow:0 0 8px currentColor}
#speed{margin-left:auto}

/* stage */
#stage{flex:1;display:flex;gap:12px;padding:10px;min-height:0}
#boardwrap{position:relative;display:flex;flex:1;flex-direction:row;gap:12px;min-width:0;min-height:0}
/* controls live in a column to the LEFT of the board (frees vertical space → taller board) */
#controls{display:flex;flex-direction:column;gap:10px;width:150px;flex:none;align-self:stretch;justify-content:flex-start;min-height:0;overflow-y:auto}
#board{flex:1;min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* very wide screens: centre the whole cluster (controls · board · panels) and let
   the board size to the full height at its true aspect, so the menus hug the
   board instead of pinning to the far corners, and the big empty margins go away */
@media(min-width:1360px){
  #stage{justify-content:center}
  #boardwrap{flex:0 1 auto}
  #board{flex:none;height:100%;width:auto;aspect-ratio:22 / 16;max-width:100%}
}
@media(min-width:1760px){
  #controls{width:200px} #rightStack{width:280px}   /* reclaim the extra room */
  #stage{gap:22px} #boardwrap{gap:18px}
}
#game{display:block;background:#0c0a08;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  cursor:crosshair;touch-action:none}

/* field zoom cluster (left rail): −  ⤢  +  (the ⤢ reset only shows while zoomed in) */
.zoomctl{display:flex;gap:4px;align-items:stretch}
.zoombtn{flex:1;min-width:0;background:linear-gradient(180deg,rgba(70,58,44,.55),rgba(42,34,26,.55));
  color:var(--ink);border:var(--glass-line);box-shadow:inset 0 1px 0 rgba(220,200,180,.12);
  border-radius:9px;font:inherit;font-weight:700;font-size:18px;line-height:1;padding:7px 0;cursor:pointer;transition:.14s}
.zoombtn:hover{background:linear-gradient(180deg,rgba(98,80,58,.7),rgba(58,46,34,.7));transform:translateY(-1px)}
.zoombtn:active{transform:translateY(0)}
.zoombtn:disabled{opacity:.35;cursor:default;transform:none}
.zoombtn.zoomreset{font-size:14px}

/* bottom bar */
/* buttons stack vertically in the left controls column */
#bottom{display:flex;flex-direction:column;align-items:stretch;gap:8px}
#bottom .ctl{width:100%}
.instr{color:var(--dim);font-size:12px;line-height:1.4;margin-top:2px}

/* controls */
.ctl{background:linear-gradient(180deg,rgba(70,58,44,.55),rgba(42,34,26,.55));color:var(--ink);
  border:var(--glass-line);box-shadow:inset 0 1px 0 rgba(220,200,180,.12);
  padding:9px 14px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;transition:.14s}
.ctl:hover{background:linear-gradient(180deg,rgba(98,80,58,.7),rgba(58,46,34,.7));transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(230,210,190,.2)}
.ctl:active{transform:translateY(0)}
.ctl:disabled{opacity:.4;cursor:default;transform:none}
/* Odds + Bazaar carry a price → keep them to ONE line (shrink to fit, never wrap) */
#oddsBtn,#shopBtn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px}
.ctl.primary{background:linear-gradient(180deg,#ffb454,#b3610a);border-color:transparent;color:#fff;
  box-shadow:0 8px 22px rgba(179,97,10,.45),inset 0 1px 0 rgba(255,255,255,.28);text-shadow:0 1px 2px rgba(60,30,6,.5)}
.ctl.primary:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(179,97,10,.55),inset 0 1px 0 rgba(255,255,255,.32)}
.ctl.blink{color:var(--gold)}
/* build/select/fuse mode toolbar */
#modeBar{display:none;gap:2px;background:rgba(24,20,14,.55);border:1px solid var(--line);border-radius:9px;padding:2px}
.mbtn{flex:1;background:transparent;color:var(--dim);border:none;border-radius:7px;padding:8px 6px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s}
.mbtn:hover{color:var(--ink)}
.mbtn.active{background:linear-gradient(180deg,var(--violet),#b3610a);color:#fff}
/* a fuse is ready: make the Fuse button impossible to miss (pulsing gold) */
.mbtn.fuse-ready{color:#2c1c0c;background:linear-gradient(180deg,#ffe082,#ffc327);font-weight:800;
  box-shadow:0 0 0 1px rgba(255,216,77,.7);animation:fusePulse 1s ease-in-out infinite}
.mbtn.fuse-ready::after{content:" ✦"}
@keyframes fusePulse{0%,100%{box-shadow:0 0 4px 1px rgba(255,200,60,.55),0 0 0 1px rgba(255,216,77,.7);transform:scale(1)}
  50%{box-shadow:0 0 16px 4px rgba(255,200,60,.9),0 0 0 1px rgba(255,216,77,.9);transform:scale(1.05)}}
#autoToggle.on{background:linear-gradient(180deg,var(--violet),#b3610a);color:#fff;border-color:transparent}
#buildHint{display:none;font-weight:700;font-size:13px;color:var(--gold);align-self:flex-start;
  background:rgba(18,14,9,.9);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:var(--shadow);pointer-events:none}
#buildHint.show{display:block}
#buildHint .bh-main{display:block;color:var(--ink)}
#buildHint .bh-bonus{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,216,77,.3);
  color:var(--gold);font-weight:600;font-size:12px;line-height:1.35;max-width:330px;white-space:normal}
#buildHint .bh-bonus b{color:#ffe9a0}
#buildHint .bh-dim{color:var(--dim);font-weight:400}
.ctl.big{padding:12px 22px;font-size:16px}

/* speed slider */
.speedwrap{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--dim);font-size:12px}
.speedwrap .speedico{opacity:.7}
.speedbtn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,rgba(70,58,44,.55),rgba(42,34,26,.55));
  border:var(--glass-line);box-shadow:inset 0 1px 0 rgba(220,200,180,.12);color:var(--ink);
  padding:6px 12px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.14s}
.speedbtn:hover{background:linear-gradient(180deg,rgba(98,80,58,.7),rgba(58,46,34,.7))}
.speedbtn:active{transform:translateY(1px)}
#speedVal{min-width:26px;color:var(--gold);font-weight:800;text-align:right}

/* high-score lists (start/game-over menu + the Hall of Fame card) */
.lb{list-style:none;margin:0;padding:0;overflow:auto}
.lb li{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:13px}
.lb li .rk{width:18px;color:var(--dim);font-size:11px;text-align:right}
.lb li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb li .sc{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.lb li.me{background:rgba(247,147,26,.18);outline:1px solid rgba(247,147,26,.4)}
.lb li.me .nm{color:var(--violet);font-weight:700}
.lb li.empty{color:var(--dim);justify-content:center;font-style:italic}

/* tower panel */
#towerPanel{position:fixed;z-index:20;background:rgba(24,20,14,.95);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;min-width:170px;box-shadow:var(--shadow);display:none;pointer-events:auto}
#towerPanel.show{display:block}
.tp-title{font-weight:700;margin-bottom:4px}
.tp-lvl{color:var(--gold);font-size:11px}
.tp-stat{font-size:12px;color:var(--dim);margin-bottom:3px}
.tp-btns{display:flex;gap:6px;margin-top:8px}
.tp-btns button{flex:1;background:rgba(58,48,36,.6);color:var(--ink);border:1px solid var(--line);
  padding:6px;border-radius:7px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tp-btns button:hover{background:rgba(84,68,48,.7)}
.tp-target{width:100%;margin-top:7px;background:rgba(58,48,36,.6);color:var(--ink);border:1px solid var(--line);padding:7px;border-radius:7px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tp-target:hover{background:rgba(84,68,48,.7)}
/* gem shop panel: colour swatches + quality picker */
/* a gem thumbnail (real sprite at its tier's cut) reused across the Bazaar */
.gem-thumb{width:26px;height:26px;object-fit:contain;display:block;filter:drop-shadow(0 0 4px var(--gem,#fff))}
.gem-thumb.big{width:40px;height:40px;filter:drop-shadow(0 0 7px var(--gem,#fff))}
.shop-sws{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.shop-sw{width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:2px;
  border-radius:8px;border:2px solid transparent;background:rgba(255,255,255,.04);cursor:pointer}
.shop-sw.on{border-color:#fff;background:rgba(255,255,255,.14);box-shadow:0 0 10px rgba(255,255,255,.4)}
.shop-qs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.shop-q{flex:1;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(58,48,36,.6);color:var(--dim);border:1px solid var(--line);border-radius:7px;padding:6px 4px;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.shop-q .gem-thumb{width:22px;height:22px}
.shop-q.on{background:linear-gradient(180deg,var(--violet),#b3610a);color:#fff;border-color:transparent}
.shop-pick{display:flex;align-items:center;gap:9px;margin:8px 0 4px;font-size:13px}
/* ✦ Gem Bazaar, the bigger menu: recommendations, held gems, effects */
#towerPanel.shop-menu{width:340px;max-width:calc(100vw - 28px);max-height:82vh;overflow-y:auto}
.shop-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin:11px 0 6px;font-weight:700}
.shop-rec{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin:5px 0;padding:7px 9px;
  background:linear-gradient(180deg,rgba(84,68,48,.30),rgba(58,48,36,.30));border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .12s,background .12s}
.shop-rec:hover{border-color:#c9a878;background:linear-gradient(180deg,rgba(112,90,58,.4),rgba(78,62,42,.4))}
.shop-rec.broke{opacity:.5}
.shop-rec-gem{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.shop-rec-gem .sw{width:12px;height:12px;border-radius:3px;box-shadow:0 0 6px currentColor}
.shop-rec-arrow{color:var(--dim);font-size:12px;flex:0 0 auto}
.shop-rec-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.shop-rec-body b{font-size:12px;line-height:1.1}
.shop-rec-effs{display:flex;flex-wrap:wrap;gap:3px}
.shop-eff{font-size:9px;color:var(--dim);background:rgba(255,255,255,.08);border-radius:6px;padding:1px 5px;white-space:nowrap}
.shop-rec-cost{margin-left:auto;color:var(--gold);font-weight:800;font-size:12px;flex:0 0 auto;align-self:center}
.shop-held{display:flex;flex-direction:column;gap:5px}
.shop-hrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 8px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px}
.shop-hrow.on{border-color:#fff;background:rgba(255,255,255,.13);box-shadow:0 0 8px rgba(255,255,255,.28)}
.shop-hname{font-size:11px;font-weight:700;min-width:64px}
.shop-htier{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.shop-htier .gem-thumb{width:22px;height:22px}
.shop-htier-lbl{font-size:9px;color:var(--dim);white-space:nowrap}
/* on-hover focus rows: combos the hovered field gem feeds + the buy that finishes it */
.shop-frec{margin:6px 0;padding:7px 9px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px}
.shop-frec .gi-name{font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.shop-frec .gi-prog{font-size:10px;color:var(--dim);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:7px;margin-left:auto}
.shop-frec .gi-prog.done{color:#1a1408;background:#5affb4;font-weight:800}
.shop-frec .gi-ings{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.shop-frec .gi-ing{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.shop-frec .gi-ing.have{color:#8affc0;background:rgba(90,255,180,.15);border-color:rgba(90,255,180,.55);font-weight:600}
.shop-frec .gi-ing .sw{width:9px;height:9px;border-radius:2px}
.shop-frec .gi-eff{font-size:10.5px;color:var(--dim);margin:2px 0 6px;line-height:1.4}
.shop-fbuy{width:100%;background:linear-gradient(180deg,var(--violet),#b3610a);color:#fff;border:none;border-radius:7px;padding:7px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.shop-fbuy:hover{filter:brightness(1.1)}
.shop-fbuy.broke{opacity:.5;background:rgba(58,48,36,.6);cursor:not-allowed}
.shop-fnote{font-size:10.5px;color:var(--dim);text-align:center;padding:4px}
.shop-fnote.ready{color:#8affc0}

/* menu overlay */
#menu{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 600px at 50% 20%,rgba(58,44,26,.55),rgba(10,8,4,.9))}
#menu.show{display:flex}
.card{width:min(460px,94vw);max-height:94vh;overflow:auto;
  background:linear-gradient(180deg,rgba(54,44,32,.96),rgba(22,18,12,.97));
  border:var(--glass-line);border-radius:22px;padding:26px 28px;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(220,200,180,.18),0 0 0 1px rgba(120,90,50,.12);
  }
.mascot{display:flex;justify-content:center;margin-bottom:2px}
.title{margin:0;font-size:36px;font-weight:900;letter-spacing:.5px;text-shadow:0 0 24px rgba(247,147,26,.4)}
.title b{color:var(--gold);text-shadow:0 0 20px rgba(255,216,77,.5)}
.tag{color:var(--dim);margin:6px 0 14px}
.best{color:var(--gold);font-weight:700;margin:0 0 12px;min-height:0}
.join{display:flex;gap:10px;justify-content:center}
.mode{display:flex;gap:8px;justify-content:center;margin:10px 0 0}
.mode .ctl.on{border-color:var(--gold);color:var(--gold)}
.modecard{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;font:inherit}
.modecard b{font-size:14px}.modecard span{font-size:11px;color:var(--dim);font-weight:400;line-height:1.3}.modecard i{font-style:normal;font-size:10px;color:var(--gold);font-weight:700}
.dayline{color:var(--dim);font-size:12px;margin:10px 0 0}
/* S1: game over is a result card, not a footnote */
#menu.over .tag,#menu.over .join,#menu.over .mode,#menu.over .dayline,#menu.over .how,#menu.over #best{display:none}
#menu.over .mascot canvas{width:150px!important}
.result{margin:2px 0 16px}
.res-k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#ff6b7a;font-weight:800}
.res-wave span{display:block;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);text-shadow:none}
.res-wave{font-size:46px;font-weight:900;color:var(--gold);line-height:1.05;letter-spacing:-.5px;text-shadow:0 0 30px rgba(255,216,77,.35)}
.res-sub{color:var(--dim);font-size:13px;margin:6px 0 14px}
.res-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.res-btns .ctl{text-decoration:none}
/* T1: tower card */
.ins-stats{display:flex;gap:6px;margin:8px 0 2px}
.ins-stats span{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:6px 2px;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.ins-stats b{font-size:16px;color:var(--ink);letter-spacing:0;text-transform:none}
.ins-more{margin-top:8px;font-size:12px;color:var(--dim)}.ins-more summary{cursor:pointer;color:var(--ink);font-weight:700;font-size:12px;list-style:none}.ins-more summary::before{content:'▸ ';color:var(--gold)}.ins-more[open] summary::before{content:'▾ '}
.ins-more>div,.ins-more>button{margin-top:6px}.ins-last{font-size:11px;color:var(--dim);margin-top:8px}
.how-row{text-align:left;margin:5px 0;line-height:1.45}
/* C1: guided first wave */
#tut{position:fixed;inset:0;z-index:50;pointer-events:none}#tut[hidden]{display:none}
.tut-ring{position:absolute;border:3px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(255,216,77,.22),0 0 34px rgba(255,216,77,.7);animation:tutPulse 1.2s ease-in-out infinite}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,216,77,.15),0 0 20px rgba(255,216,77,.4)}50%{box-shadow:0 0 0 10px rgba(255,216,77,.3),0 0 44px rgba(255,216,77,.9)}}
.tut-card{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:min(460px,92vw);background:rgba(24,20,14,.97);border:1px solid rgba(255,216,77,.55);border-radius:14px;padding:14px 16px;pointer-events:auto;font-size:14.5px;line-height:1.45;color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.tut-btns{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
#tut.tut-top .tut-card{bottom:auto;top:44px}
.lb .ez{font-style:normal;font-size:11px;color:var(--dim);margin-left:6px}
#name{flex:1;max-width:220px;background:rgba(12,9,5,.7);border:1px solid var(--line);border-radius:10px;
  color:#fff;padding:12px 14px;font:inherit;font-size:16px;text-align:center}
#name:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(247,147,26,.2)}
.menu-lb{margin:20px 0 6px;text-align:left}
.menu-lb h3{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);margin:0 0 6px}
.menu-lb .lb{max-height:160px}
.how{margin-top:16px;padding:14px;background:rgba(12,9,5,.5);border:1px solid var(--line);border-radius:12px;
  font-size:12.5px;color:var(--dim);text-align:left;line-height:1.6}
.how b{color:var(--ink)}
.disc{margin:14px 0 0;font-size:10.5px;color:#8a7d63;line-height:1.6}
.disc a{color:#b0a078;text-decoration:none}
.disc a:hover{text-decoration:underline}

/* toast */
#toast{position:fixed;bottom:74px;left:50%;transform:translateX(-50%) translateY(20px);z-index:50;
  background:rgba(24,20,14,.96);border:1px solid var(--line);color:var(--ink);padding:10px 18px;border-radius:10px;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* combine bar (choose phase) */
/* keep/confirm bar: sits in the left controls column */
#combineBar{display:none;flex-direction:column;align-items:stretch;gap:8px;padding:22px 12px 10px;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(180deg,rgba(66,54,40,.92),rgba(30,26,20,.94));box-shadow:var(--shadow)}
/* on short viewports the controls column scrolls; keep the keep/confirm action pinned in view */
#combineBar.show{display:flex;position:sticky;bottom:0}
#combineText{font-weight:600;color:var(--ink);font-size:12px}
#combineSub{font-size:11px;font-weight:700;color:var(--dim);display:none;flex-direction:column;gap:3px;flex-basis:100%}
#combineSub .cb-last{color:var(--gold)}
#combineSub .cb-dup{color:var(--teal)}
#combineSub .cb-feeds{color:#e0c79a}
#combineSub .cb-support{color:#6cc6ff}
/* rich "combos you've started" breakdown: tower art + name + effect + what's left */
#combineSub .cb-feeds-head{color:#e0c79a;font-weight:800}
#combineSub .cb-combo{display:flex;gap:10px;align-items:center;padding:7px 9px;margin-top:4px;
  border:1px solid;border-radius:9px;background:rgba(20,17,12,.5)}
#combineSub .cb-combo-art{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
#combineSub .cb-combo-ic{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 1px 5px rgba(0,0,0,.65))}
#combineSub .cb-combo-body{display:flex;flex-direction:column;gap:2px;min-width:0}
#combineSub .cb-combo-name{font-weight:800;font-size:12px}
#combineSub .cb-combo-prog{color:var(--dim);font-weight:700;font-size:10px}
#combineSub .cb-combo-stats{color:#ffe0a8;font-weight:700;font-size:10.5px;letter-spacing:.02em}
#combineSub .cb-combo-stats b{color:#fff}
#combineSub .cb-combo-eff{color:var(--teal);font-weight:600;font-size:10px;line-height:1.35}
#combineSub .cb-combo-need{color:#c9b48a;font-weight:700;font-size:10px;line-height:1.3}
#combineSub .cb-combo-ready{color:#7ee0a0;font-weight:800;font-size:10px}
.cb-x{position:absolute;top:6px;right:8px;width:22px;height:22px;padding:0;line-height:20px;text-align:center;
  background:rgba(24,20,14,.6);border:1px solid var(--line);border-radius:7px;color:var(--dim);
  font-size:12px;font-weight:800;cursor:pointer;transition:.12s}
.cb-x:hover{color:var(--ink);background:rgba(44,36,24,.85)}
#combineBtn:disabled{opacity:.4;cursor:default}
#info{font-weight:800}

/* help overlay */
#help{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,8,4,.82)}
#help.show{display:flex}

/* high-scores modal (Hall of Fame): opened from the 🏆 header button */
#scores{position:fixed;inset:0;z-index:46;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,8,4,.82)}
#scores.show{display:flex}
.scores-card{position:relative;width:min(420px,95vw);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,rgba(52,44,34,.96),rgba(20,16,10,.97));
  border:var(--glass-line);border-radius:20px;padding:24px 26px;box-shadow:var(--shadow)}
#scoresClose{position:absolute;top:14px;right:14px;padding:6px 11px}
.scores-card .title{margin:0 0 6px;font-size:21px}
.scores-card .sc-sub{margin:16px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim)}
.scores-card .lb li{font-size:14px}
/* on desktop the scout stays open in the left column → its toggle button is redundant */
@media(min-width:901px){ #scout{display:none} }
.help-card{position:relative;width:min(560px,95vw);max-height:90vh;overflow:auto;
  background:linear-gradient(180deg,rgba(52,44,34,.96),rgba(20,16,10,.97));
  border:var(--glass-line);border-radius:20px;padding:24px 26px;
  box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(220,200,180,.16)}
.help-card h2{margin:0 0 8px;font-size:24px;font-weight:800}
.help-card h4{margin:18px 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#e0b877;
  padding-bottom:5px;border-bottom:1px solid rgba(224,184,119,.18)}
.help-card p{margin:0 0 8px;color:var(--ink);font-size:13.5px;line-height:1.55}
#helpClose{position:absolute;top:14px;right:14px;padding:6px 11px}
.hrow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;color:var(--ink)}
.hrow .sw{flex:none}
/* Codex overview: prettified tutorial */
.hlead{margin:2px 0 4px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.hnote{margin:5px 0 8px;font-size:12px;line-height:1.5;color:var(--dim)}
.hnote b{color:#e0c79a}
.hrow.tier{align-items:baseline;gap:10px;padding:7px 11px;margin:5px 0;font-size:13px;
  background:rgba(255,184,77,.06);border:1px solid rgba(255,184,77,.15);border-radius:9px}
.hrow .hk{flex:none;min-width:104px;font-weight:800;color:#ffd08a}
.hmine{margin:6px 0 4px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,184,77,.09),rgba(255,184,77,.03));border:1px solid rgba(255,184,77,.2)}
.hmine .hrow{align-items:baseline;padding:5px 0;line-height:1.5}
.hmine .hrow+.hrow{border-top:1px solid rgba(255,184,77,.12)}
.hmine .hk{color:#ffd158}
.help-tabs{display:flex;gap:6px;margin:10px 0 6px;flex-wrap:wrap}
.htab{background:rgba(58,48,36,.4);color:var(--dim);border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.htab:hover{color:var(--ink)}
.htab.active{background:linear-gradient(180deg,var(--violet),#b3610a);color:#fff;border-color:transparent}
#helpBody{max-height:56vh;overflow:auto;padding-right:4px}
.help-note{color:var(--dim);font-size:12px;margin:0 0 8px;line-height:1.5}
.combo-row{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;padding:7px 0;
  border-bottom:1px solid rgba(210,190,170,.08)}
.cr-icon{grid-column:1;grid-row:1/3;align-self:center;width:44px;height:44px;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.cr-name{grid-column:2;grid-row:1;font-weight:700;font-size:13px}
.cr-eff{grid-column:3;grid-row:1;align-self:center;text-align:right;font-size:11px;color:var(--gold);max-width:130px}
.cr-tree{grid-column:2/4;grid-row:2;margin-top:4px}
/* --- Combination upgrade tree (nested <details>) --- */
.ct-controls{display:flex;justify-content:flex-end;margin:2px 0 4px}
/* AG: one accordion row per recipe */
.combo-acc{border-bottom:1px solid var(--line)}
.combo-sum{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 6px;cursor:pointer;border-radius:8px}
.combo-sum::-webkit-details-marker{display:none}.combo-sum::before{content:'▸';color:var(--gold);font-size:11px;width:10px}.combo-acc[open] .combo-sum::before{content:'▾'}
.combo-sum:hover{background:rgba(255,216,77,.05)}.combo-sum .cr-icon{width:34px;height:34px;object-fit:contain;flex:none}
.combo-sum .cr-name{font-weight:800;font-size:14px}.combo-sum .cr-eff{margin-left:auto;font-size:11px;color:var(--dim);text-align:right}
.combo-acc .cr-tree{padding:2px 8px 10px 26px}
.ct-btn{background:rgba(58,48,36,.4);color:var(--dim);border:1px solid var(--line);border-radius:7px;
  padding:4px 10px;font-size:11px;cursor:pointer}
.ct-btn:hover{color:var(--ink)}
.ct-list{list-style:none;margin:0;padding:0}
.ct-list .ct-list{margin:3px 0 1px 8px;padding-left:9px;border-left:1px solid var(--line)}
.ct-item{padding:2px 0}
.ct-leaf{display:inline-flex;align-items:center;gap:4px;font-size:11px}
.ct-leaf img.gem-ic{width:17px;height:17px;object-fit:contain}
.ct-leaf .sw{width:10px;height:10px;border-radius:3px}
.ct-leaf .ct-q{color:var(--ink)}
.ct-leaf .ct-cn{color:var(--dim);opacity:.7}
.ct-sum{list-style:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:11px;
  padding:2px 7px;border-radius:6px;background:rgba(58,48,36,.35);border:1px solid var(--line);border-left:2px solid var(--c)}
.ct-sum::-webkit-details-marker{display:none}
.ct-sum::before{content:'▸';color:var(--dim);font-size:9px;display:inline-block;transition:transform .15s}
.ct-node[open]>.ct-sum::before{transform:rotate(90deg)}
.ct-sum:hover{background:rgba(58,48,36,.65)}
.ct-sp-ic{width:18px;height:18px;object-fit:contain}
.ct-nm{font-weight:700;color:var(--c)}
.ct-tier{color:var(--gold);font-size:9px;font-weight:700}
.ct-eff{color:var(--dim);font-size:10px}

/* gem combo-preview panel: in the right column, fills its width */
#gemInfo{width:auto;max-width:100%;max-height:62vh;overflow:auto;
  display:none;background:var(--glass);border:var(--glass-line);border-radius:13px;padding:11px 13px;
  backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);font-size:12px;pointer-events:auto}
#gemInfo.show{display:block}
#gemInfo .gi-head{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin:9px 0 5px}
#gemInfo .gi-head:first-child{margin-top:0}
#gemInfo .gi-gem{display:flex;align-items:center;gap:6px;margin-bottom:3px;color:#fff}
#gemInfo .gi-gem .sw{width:11px;height:11px;border-radius:3px}
#gemInfo .gi-rec{margin:7px 0}
#gemInfo .gi-name{font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:4px}
#gemInfo .gi-prog{font-size:10px;color:var(--dim);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:7px;margin-left:auto}
#gemInfo .gi-prog.done{color:#1a1408;background:#5affb4;font-weight:800}
#gemInfo .gi-ings{display:flex;flex-wrap:wrap;gap:4px}
#gemInfo .gi-ing{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;padding:2px 6px;opacity:.6}
#gemInfo .gi-ing.have{color:#8affc0;background:rgba(90,255,180,.15);border-color:rgba(90,255,180,.55);opacity:1;font-weight:600}
#gemInfo .gi-ing.need{opacity:.9;border-color:rgba(255,138,156,.32)}
/* "recommended next" nudge banner at the top of the gem panel */
#gemInfo .gi-rec-now{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  margin:0 0 8px;padding:10px 9px;border-radius:11px;
  background:rgba(255,216,77,.1);border:1px solid rgba(255,216,77,.4);box-shadow:0 0 12px rgba(255,216,77,.12)}
#gemInfo .gi-rec-now-ic{width:104px;max-width:70%;height:auto;object-fit:contain;border-radius:12px;margin-bottom:2px}
#gemInfo .gi-rec-now b{display:block;font-size:12.5px}
#gemInfo .gi-rec-now-eff{font-size:11px;color:#ece0cd;line-height:1.4}
#gemInfo .gi-rec-now span{font-size:11px;color:var(--dim);line-height:1.35}
#gemInfo .gi-yes{font-size:9px;font-weight:800;color:#8affc0;white-space:nowrap}
#gemInfo .gi-no{font-size:9px;font-weight:700;color:#ff8a9c;white-space:nowrap}
#gemInfo .gi-ing .sw{width:9px;height:9px;border-radius:2px}
#gemInfo .gi-note{color:var(--dim);font-size:11px;line-height:1.5;margin-top:4px}
#gemInfo .gi-eff{font-size:10.5px;color:var(--dim);margin-top:3px;line-height:1.4}
#gemInfo .gi-rec.ready{background:rgba(255,216,77,.1);border:1px solid rgba(255,216,77,.45);border-radius:8px;padding:5px 7px;margin:6px -5px;box-shadow:0 0 12px rgba(255,216,77,.15)}
#gemInfo .gi-ing.sp{cursor:help}
/* recursive build-tree popup: hovering a special in the Combines-toward panel */
#reqTree{position:fixed;z-index:60;display:none;width:290px;max-height:82vh;overflow:auto;
  background:linear-gradient(180deg,rgba(40,32,24,.97),rgba(16,12,8,.98));
  border:var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;
  font-size:12px;color:var(--ink);pointer-events:none;backdrop-filter:blur(10px)}
#reqTree .rt-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#reqTree .rt-ic-lg{width:44px;height:44px;object-fit:contain;flex:none}
#reqTree .rt-title{font-weight:800;font-size:14px;line-height:1.2}
#reqTree .rt-sub{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
#reqTree .rt-kids{margin-left:11px;padding-left:9px;border-left:1px solid rgba(200,180,160,.28);
  display:flex;flex-direction:column;gap:4px;margin-top:4px}
#reqTree .rt-root{margin-left:0;padding-left:0;border-left:none;gap:6px}
#reqTree .rt-row{display:flex;align-items:center;gap:6px}
#reqTree .rt-ic{width:26px;height:26px;object-fit:contain;flex:none}
#reqTree .rt-node .sw{width:14px;height:14px;border-radius:3px;flex:none;box-shadow:0 0 6px currentColor}
#reqTree .rt-nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reqTree .rt-special>.rt-row .rt-nm{font-weight:700}
#reqTree .rt-have{color:#8affc0;font-weight:700;font-size:11px}
#reqTree .rt-tier{color:var(--dim);font-size:10px}
#reqTree .rt-node.held>.rt-row{opacity:.6}
#reqTree .rt-gem.held .rt-nm{color:#8affc0}
/* result-of-combine preview row (choose phase, 2+ gems picked) */
#gemInfo .gi-gem.gi-result{color:#fff;font-size:13px;margin:2px 0 4px;text-shadow:0 0 10px rgba(247,147,26,.5)}
#gemInfo .gi-gem.gi-result .sw{width:13px;height:13px;box-shadow:0 0 8px currentColor}
/* "completes a recipe" flag beside the New note (choose phase, one gem picked) */
#gemInfo .gi-complete{color:#1a1408;background:linear-gradient(180deg,#ffe06a,#ffb84d);font-weight:800;
  font-size:11px;line-height:1.45;margin-top:5px;padding:4px 8px;border-radius:8px;
  box-shadow:0 0 14px rgba(255,200,80,.4)}

/* Branded scrollbars: replace the native OS scrollbar in the themed glass panels
   (orange→teal thumb on a transparent track) so the scroll matches the UI. */
#gemInfo, #controls, #towerPanel, #helpBody, .card, .lb, .rboard{
  scrollbar-width:thin; scrollbar-color:rgba(247,147,26,.55) transparent}
#gemInfo::-webkit-scrollbar, #controls::-webkit-scrollbar, #towerPanel::-webkit-scrollbar,
#helpBody::-webkit-scrollbar, .card::-webkit-scrollbar,
.lb::-webkit-scrollbar, .rboard::-webkit-scrollbar{width:9px;height:9px}
#gemInfo::-webkit-scrollbar-track, #controls::-webkit-scrollbar-track, #towerPanel::-webkit-scrollbar-track,
#helpBody::-webkit-scrollbar-track, .card::-webkit-scrollbar-track,
.lb::-webkit-scrollbar-track, .rboard::-webkit-scrollbar-track{background:transparent}
#gemInfo::-webkit-scrollbar-thumb, #controls::-webkit-scrollbar-thumb, #towerPanel::-webkit-scrollbar-thumb,
#helpBody::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb,
.lb::-webkit-scrollbar-thumb, .rboard::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(247,147,26,.6),rgba(55,224,200,.5));
  border-radius:8px;border:2px solid transparent;background-clip:padding-box}
#gemInfo::-webkit-scrollbar-thumb:hover, #controls::-webkit-scrollbar-thumb:hover, #towerPanel::-webkit-scrollbar-thumb:hover,
#helpBody::-webkit-scrollbar-thumb:hover, .card::-webkit-scrollbar-thumb:hover,
.lb::-webkit-scrollbar-thumb:hover, .rboard::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(247,147,26,.9),rgba(55,224,200,.8));background-clip:padding-box}

/* right column beside the board (where the leaderboard used to be): panels here
   never overlay the board */
#rightStack{width:240px;flex:none;align-self:stretch;display:flex;flex-direction:column;
  gap:10px;overflow:auto;pointer-events:none}
/* wave-scout panel: lives at the BOTTOM of the LEFT controls column (margin-top:auto
   pins it there), in a fixed reserved slot so toggling/repopulating it never shifts
   the buttons above it. */
#nextWave{width:auto;margin-top:auto;min-height:118px;
  background:var(--glass);border:var(--glass-line);border-radius:13px;padding:11px 13px;
  backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);font-size:12px;pointer-events:none}
#nextWave:empty{display:none}   /* on desktop the scout stays open; hidden only until it has a wave */
/* right-rail inspector: big art preview + info + actions for the selected tower /
   wall / obstacle. pointer-events:auto so its action buttons are clickable (it never
   overlays the board, so this can't steal board clicks). */
#inspect{background:var(--glass);border:var(--glass-line);border-radius:13px;padding:11px;
  backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);pointer-events:auto}
#inspect[hidden]{display:none}
/* Bitcoin Mine menu = a CENTERED popout (higher specificity than the rail/mobile
   #inspect rules, so it re-anchors to screen centre on every viewport). */
#inspect.mine-popout{position:fixed;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);width:min(340px,90vw);max-width:none;max-height:84vh;
  overflow:auto;z-index:60;pointer-events:auto;box-shadow:0 24px 70px rgba(0,0,0,.65)}
#inspect .ins-art{display:flex;justify-content:center;align-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(255,206,120,0.14),rgba(0,0,0,0) 68%);border-radius:10px;margin-bottom:8px}
#inspect .ins-art canvas{width:132px;height:132px;display:block}
#inspect .ins-title{font-weight:800;font-size:15px;text-align:center;margin-bottom:6px;line-height:1.2}
#inspect .ins-info{font-size:12px;line-height:1.5;color:var(--ink)}
#inspect .ins-info b{color:#fff}
/* Bitcoin Mine popout: scannable stat layout instead of a wall of sentences */
.mine-hero{display:flex;flex-direction:column;align-items:center;gap:1px;margin-bottom:9px}
.mine-hero .mine-big{font-size:30px;font-weight:900;color:#ffd158;line-height:1;text-shadow:0 0 18px rgba(255,184,77,.5)}
.mine-hero .mine-big-sub{font-size:11px;color:var(--dim);font-weight:600}
.mine-rows{display:flex;flex-direction:column;gap:5px}
.mine-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 9px;border-radius:8px;background:rgba(255,184,77,.07);border:1px solid rgba(255,184,77,.14)}
.mine-row .mine-k{font-size:11px;font-weight:700;color:var(--dim);white-space:nowrap}
.mine-row .mine-v{font-size:12px;color:var(--ink);text-align:right}
.mine-row .mine-v b{color:#fff}
.mine-row .mine-up{color:#7ee0a0;font-weight:800;font-size:11px}
.mine-tip{margin-top:9px;font-size:11px;line-height:1.45;color:var(--dim)}
.mine-tip b{color:#ffd08a}
/* tower-stats helpers (used in the inspector AND the mobile popover) */
.buffnote{color:var(--teal);font-weight:600}
.buffnote b{color:var(--teal)}
.dim{color:var(--dim);font-weight:400}
/* tower action buttons living in the rail (shared markup with the mobile popover) */
#inspect .ins-actions{margin-top:10px;display:flex;flex-direction:column;gap:8px}
#inspect .ins-actions .ins-note{font-size:12px;line-height:1.4;color:var(--dim)}
#inspect .ins-actions .ins-note b{color:#fff}
#inspect .ins-actions .tp-target,#inspect .ins-actions .tp-btns{margin:0}
#inspect .ins-actions > .tp-target{width:100%}
#inspect .ins-actions .tp-btns{display:flex;gap:8px}   /* Upgrade · Sell stay side by side (buttons flex:1) */
#nextWave .nw-head{font-weight:700;color:var(--gold);margin-bottom:5px;font-size:13px}
#nextWave .nw-row{color:var(--ink);margin:2px 0;display:flex;align-items:center;gap:5px}
#nextWave .nw-row .sw{width:11px;height:11px;border-radius:3px}
#nextWave .nw-boss{color:var(--rose);font-weight:700}
#nextWave .nw-cap{color:var(--gold);font-weight:700}

#fps{font-variant-numeric:tabular-nums}

/* rotate hint (portrait phones) */
#rotateHint{display:none}

/* ---- MOBILE / narrow: board stays dominant, controls compact beneath it,
   and the scout + placed-this-round panels OVERLAY the board (absolute) so they
   never crush it, especially in the choose phase after placing a tower. ---- */
@media(max-width:900px) and (orientation:portrait){
  .stats{gap:12px} .stat.weak{display:none}
  #stage{flex-direction:column;position:relative}
  #boardwrap{flex-direction:column;flex:1;min-height:0}
  #board{order:1;flex:1;min-height:46vh}
  #controls{order:2;width:auto;flex-direction:column;gap:8px;margin-top:8px}
  #bottom{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
  #bottom .ctl{width:auto}
  #modeBar{flex:0 0 auto}
  .instr{flex-basis:100%;text-align:center;margin-top:0}
  #combineBar{flex-direction:row;flex-wrap:wrap;align-items:center;align-self:stretch}
  #combineText{flex-basis:100%}
  #combineBtn{flex:1}
  /* panels float over the top-right of the board, capped + scrollable */
  #rightStack{position:absolute;top:8px;right:8px;left:auto;width:auto;max-width:60%;
    align-self:auto;flex-direction:column;align-items:flex-end;gap:8px;
    max-height:calc(100% - 16px);overflow:visible;pointer-events:none;z-index:9}
  #gemInfo{max-width:100%;max-height:52vh;pointer-events:auto}
  /* re-enable taps on the floating inspector (rail is pointer-events:none) + cap it
     so its action buttons stay on-screen and scrollable */
  #inspect{max-width:100%;max-height:70vh;overflow:auto;pointer-events:auto}
  #inspect .ins-art canvas{width:96px;height:96px}
  #nextWave{display:none;max-width:100%}
  #nextWave.show{display:block}
  #buildHint{align-self:flex-end}
}
@media(max-width:720px) and (orientation:portrait){
  #bar{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .brand{font-size:15px}
  .stats{gap:14px;margin-left:0;order:3;width:100%}
  .stat .val{font-size:16px}
  .speedwrap{margin-left:auto;order:2}
  .speedbtn{padding:6px 10px;font-size:12px}
  #mute,#info{margin-left:0;padding:8px 11px}
  #stage{padding:8px;gap:8px}
  .ctl{padding:10px 15px}          /* bigger tap targets */
  #rightStack{max-width:66%}
  #gemInfo{font-size:11px}
  #startWave{flex:1}
  /* tower panel becomes a bottom sheet so it never lands off-screen */
  #towerPanel{left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;min-width:0;width:auto}
  .tp-btns button{padding:10px}
}
@media(max-width:720px) and (orientation:portrait){
  #rotateHint{display:block;text-align:center;font-size:11px;color:var(--dim);
    padding:4px;background:rgba(247,147,26,.12);border:1px solid var(--line);border-radius:8px}
}

/* ---- Landscape gate: this maze wants a wide board. On a portrait phone we
   cover the screen and ask for a turn; the sim pauses behind it (G.gated). ---- */
#rotateGate{display:none}
@media(max-width:600px) and (orientation:portrait){
  #wrap{display:none}
  #rotateGate{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%,#2a2214,#100c06 72%);padding:24px}
}
#rotateGate .rg-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
#rotateGate .rg-phone{font-size:60px;line-height:1;animation:rgturn 2.6s ease-in-out infinite;transform-origin:50% 50%;
  filter:drop-shadow(0 0 18px rgba(247,147,26,.5))}
#rotateGate .rg-logo{font-size:26px;font-weight:800;letter-spacing:.5px;color:#f4ead2}
#rotateGate .rg-logo .mark{color:var(--gold);text-shadow:0 0 12px rgba(255,216,77,.5)}
#rotateGate .rg-logo b{color:var(--violet);text-shadow:0 0 12px var(--violet)}
#rotateGate .rg-txt{font-size:17px;font-weight:700;color:var(--ink)}
#rotateGate .rg-sub{font-size:12px;color:var(--dim)}
@keyframes rgturn{0%,28%{transform:rotate(0)}58%,100%{transform:rotate(-90deg)}}

/* ---- Compact landscape (phones held sideways): reuse the desktop board+rail
   row layout, just tighter. The gate above guarantees we only land here in
   landscape, so #towerPanel keeps its default anchored-popover position. Keyed
   on short viewport HEIGHT so it hits phones-in-landscape but spares tablets. ---- */
@media(orientation:landscape) and (max-height:520px){
  #bar{gap:10px;padding:4px 12px}
  .brand{font-size:15px}
  .stats{gap:12px} .stats .stat:nth-child(n+5){display:none} /* keep Bitcoin·Liberty·Session·Entropy; hide Score·Momentum */
  .stat .val{font-size:15px} .stat .lbl{font-size:9px}
  .speedwrap{gap:4px} .speedbtn{padding:5px 9px;font-size:11px}
  #mute,#scout,#info{padding:6px 9px}
  #stage{padding:6px;gap:6px}
  #boardwrap{gap:8px}
  #controls{width:126px;gap:6px}
  .ctl{padding:7px 9px}
  #bottom{gap:6px}
  .mbtn{font-size:11px;padding:7px 4px}
  #rightStack{width:158px}
  #gemInfo{font-size:11px;max-height:none}
  #rotateHint{display:none}
  /* Short landscape viewport: the full 132px art preview shoved the inspector's
     action buttons (Grow/Remove, Upgrade/Sell, Sacrifice…) below the fold, so they
     read as "missing" on phones. Shrink the art + tighten type so the actions sit
     on-screen, and let #inspect scroll on its own as a backstop. */
  #inspect{padding:8px;max-height:100%;overflow:auto}
  #inspect .ins-art{margin-bottom:4px}
  #inspect .ins-art canvas{width:70px;height:70px}
  #inspect .ins-title{font-size:13px;margin-bottom:3px}
  #inspect .ins-info{font-size:11px;line-height:1.4}
  #inspect .ins-actions{margin-top:7px;gap:6px}
}

/* ---- The Lattice: Codex "Research" tab ------------------------------- */
.research{--insight:#c9a227}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.rtitle{font-size:19px;font-weight:800;color:var(--ink)}
.rinsight{font-size:14px;color:var(--insight);font-weight:700}
.rinsight b{color:var(--gold)}
.rinsight .rsub{color:var(--dim);font-weight:500;font-size:11px}
.rhint{color:var(--dim);font-size:12px;line-height:1.5;margin:0 0 10px}
.rboard{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.rcol{flex:none;width:150px;display:flex;flex-direction:column;gap:0}
.rcol-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim);
  text-align:center;padding:5px 0;margin-bottom:2px}
.rn-link{width:2px;height:12px;margin:0 auto;background:var(--line)}
.rn{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
  background:rgba(58,48,36,.32);border:1px solid var(--line);border-radius:10px;padding:8px 9px;
  color:var(--ink);font:inherit;cursor:pointer;transition:.12s}
.rn-tier{position:absolute;top:6px;right:8px;font-size:9px;color:var(--dim);letter-spacing:.5px}
.rn-cost{position:absolute;top:22px;right:8px;font-size:10px;font-weight:700;color:var(--insight)}
.rn-cost.cant{color:var(--rose)}
.rn-cost.owned{color:var(--teal)}
.rn-name{font-size:12.5px;font-weight:700;padding-right:30px}
.rn-desc{font-size:10.5px;color:var(--dim);line-height:1.35}
.rn-eff{font-size:10px;color:var(--violet);font-weight:600;margin-top:1px}
.rn[data-state="available"]{border-color:var(--violet);box-shadow:0 0 0 1px rgba(247,147,26,.35),0 0 14px rgba(247,147,26,.18);animation:rbreathe 2.4s ease-in-out infinite}
.rn[data-state="available"]:hover{transform:translateY(-1px);background:rgba(76,62,44,.5)}
.rn[data-state="costly"]{opacity:.72}
.rn[data-state="locked"]{opacity:.4;cursor:not-allowed}
.rn[data-state="locked"] .rn-name::after{content:" 🔒";font-size:9px}
.rn[data-state="purchased"]{background:linear-gradient(160deg,rgba(247,147,26,.4),rgba(201,162,39,.28));border-color:var(--gold)}
@keyframes rbreathe{0%,100%{box-shadow:0 0 0 1px rgba(247,147,26,.3),0 0 10px rgba(247,147,26,.14)}50%{box-shadow:0 0 0 1px rgba(247,147,26,.5),0 0 18px rgba(247,147,26,.28)}}
.rn.shake{animation:rshake .3s}
@keyframes rshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#help.wide .help-card{width:min(880px,96vw)}

/* initial loader: covers first paint until the sprite set has decoded (or times out) */
#loader{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#2a2214,#140e06 72%);transition:opacity .5s ease;opacity:1}
#loader.gone{opacity:0;pointer-events:none}
#loader .ld-box{display:flex;flex-direction:column;align-items:center;gap:15px}
#loader .ld-logo{font-size:30px;font-weight:800;letter-spacing:.5px;color:#f4ead2}
#loader .ld-logo-img{width:210px;max-width:72vw;height:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
#loader .ld-logo .mark{color:#ffc95a}
#loader .ld-logo b{color:#ffc95a}
#loader .ld-bar{width:220px;height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,206,128,.25)}
#loader .ld-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#ffc95a,#ff9a4d);transition:width .3s ease}
#loader .ld-txt{font-size:12px;color:#d8c7a8;letter-spacing:.4px}
/* small transient load screen for New map (covers the re-bake so it reads as intentional) */
#mapLoader{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(22,17,9,.55);backdrop-filter:blur(2px);transition:opacity .25s ease;opacity:1}
#mapLoader[hidden]{display:none}
#mapLoader.fade{opacity:0}
#mapLoader .ml-box{display:flex;flex-direction:column;align-items:center;gap:10px}
#mapLoader .ml-spin{font-size:34px;color:#ffc95a;animation:mlspin 1s linear infinite;text-shadow:0 0 12px rgba(255,201,90,.6)}
#mapLoader .ml-txt{font-size:12px;color:#ede0c7;letter-spacing:.5px}
@keyframes mlspin{to{transform:rotate(360deg)}}

/* ── Hackathon Bounty: market button, invoice modal, the reveal ── */
.shop-bounty{width:100%;text-align:left;background:linear-gradient(180deg,rgba(255,180,84,.22),rgba(179,97,10,.22));border:1px solid rgba(255,216,77,.45);border-radius:10px;color:var(--gold);font:inherit;font-weight:800;padding:9px 11px;cursor:pointer;margin-bottom:4px}
.shop-bounty span{display:block;font-weight:400;font-size:11px;color:var(--dim);margin-top:2px}
.shop-bounty:hover{filter:brightness(1.12)}
#bounty{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(6,4,2,.78);}
#bounty.show{display:flex}
.bo-box{width:min(440px,94vw);max-height:92vh;overflow:auto;background:rgba(24,20,14,.98);border:1px solid rgba(255,216,77,.35);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center}
.bo-h{font-size:18px;font-weight:800;color:var(--gold)}
.bo-sub{color:var(--dim);font-size:13px;margin:6px 0 12px}
.bo-qr{display:flex;justify-content:center;margin:8px 0}.bo-qr canvas{border-radius:10px;background:#fff;image-rendering:pixelated;width:264px;height:264px}
.bo-inv{max-height:56px;overflow:auto;background:rgba(0,0,0,.35);border-radius:8px;padding:6px 8px;margin:8px 0}
.bo-inv code{font-size:10px;word-break:break-all;color:var(--dim)}
.bo-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.bo-btns .ctl{text-decoration:none;font-size:13px;padding:8px 12px}
.bo-wait{color:var(--dim);font-size:12px;margin:6px 0}
.bo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:boPulse 1.2s infinite;vertical-align:middle;margin-right:4px}
@keyframes boPulse{0%,100%{opacity:.25}50%{opacity:1}}
.bo-odds{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:11px;margin:8px 0 4px}
.bo-fine{font-size:10.5px;color:var(--dim);margin-top:8px;line-height:1.4}.bo-fine code{color:var(--ink)}
.bo-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--gold);word-break:break-all;margin:6px 0 12px;opacity:.9;min-height:2.6em}
.bo-card{perspective:900px;margin:0 auto 6px;padding:16px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3);opacity:.15;transform:rotateY(90deg) scale(.9);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}
.bo-card.flip{opacity:1;transform:none}
/* AA1: the card takes the tier's colour, so a common drop looks common and a rare one rare */
.bo-reveal[data-tier="0"] .bo-card.flip{border-color:rgba(179,188,218,.28);background:rgba(16,16,20,.45)}
.bo-reveal[data-tier="1"] .bo-card.flip{border-color:rgba(127,201,255,.5);box-shadow:0 0 22px rgba(127,201,255,.18)}
.bo-reveal[data-tier="2"] .bo-card.flip{border-color:rgba(123,232,138,.55);box-shadow:0 0 28px rgba(123,232,138,.24)}
.bo-reveal[data-tier="3"] .bo-card.flip{border-color:rgba(201,156,255,.7);box-shadow:0 0 44px rgba(201,156,255,.38)}
.bo-again{border-color:rgba(255,216,77,.5);color:var(--gold)}
.bo-card.legend{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,216,77,.5),0 0 60px rgba(255,216,77,.35);animation:boLegend 1.6s ease-in-out infinite alternate}
@keyframes boLegend{from{box-shadow:0 0 0 1px rgba(255,216,77,.5),0 0 30px rgba(255,216,77,.25)}to{box-shadow:0 0 0 1px rgba(255,216,77,.9),0 0 90px rgba(255,216,77,.55)}}
.bo-gem img.gem-thumb.big{width:96px;height:96px}
.bo-tier{font-size:26px;font-weight:900;letter-spacing:.5px;margin-top:4px}
.bo-name{font-size:17px;font-weight:700}
.bo-odd{font-size:12px;font-weight:700;margin:2px 0 6px}
.bo-blurb{font-size:12px;color:var(--dim)}