/* ============ PRISMFALL — style ============ */
:root{
  --bg0:#070912; --bg1:#0c0f1d; --bg2:#131729; --bg3:#1b2036;
  --line:rgba(140,160,255,.10); --line2:rgba(140,160,255,.18);
  --txt:#dfe6ff; --txt-dim:#8791b8; --txt-faint:#5a6288;
  --gold:#ffcf5c; --gold-deep:#c98f1f;
  --cyan:#7fd8ff; --red:#ff5b74; --green:#5aeaa0; --purple:#b48bff;
  --font-disp:"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-ui:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(120% 120% at 50% -10%, #141a33 0%, var(--bg0) 55%, #04050b 100%);
  color:var(--txt); font-family:var(--font-ui); overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
button{font-family:inherit; cursor:pointer}
kbd{
  background:var(--bg3); border:1px solid var(--line2); border-bottom-width:2px;
  border-radius:4px; padding:1px 6px; font-size:11px; color:var(--cyan);
  font-family:Consolas,monospace;
}

/* ---------- layout ---------- */
#app{display:flex; flex-direction:column; height:100vh; padding:10px 14px 12px; gap:8px}
#main{display:flex; gap:12px; flex:1; min-height:0}

/* ---------- top bar ---------- */
#topbar{
  display:flex; align-items:center; gap:22px;
  background:linear-gradient(180deg, rgba(30,36,66,.55), rgba(16,19,36,.55));
  border:1px solid var(--line); border-radius:12px; padding:8px 16px;
  backdrop-filter:blur(6px);
}
#brand{
  font-family:var(--font-disp); font-size:22px; letter-spacing:5px; font-weight:700;
  background:linear-gradient(180deg,#fff 10%, var(--cyan) 55%, #4f7dff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(127,216,255,.25);
}
#brand span{
  background:linear-gradient(180deg, #ffe9b0, var(--gold) 60%, #b1720e);
  -webkit-background-clip:text; background-clip:text;
}
#stats{display:flex; gap:26px; flex:1; justify-content:center}
.stat{display:flex; flex-direction:column; align-items:center; min-width:74px}
.stat .lbl{font-size:10px; letter-spacing:2.5px; color:var(--txt-faint); text-transform:uppercase}
.stat .val{
  font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15;
  text-shadow:0 0 14px rgba(127,216,255,.35);
}
.stat.gold .val{color:var(--gold); text-shadow:0 0 14px rgba(255,207,92,.4)}
.stat.lives .val{color:var(--cyan)}
.stat.lives .val.hurt{color:var(--red); text-shadow:0 0 16px rgba(255,91,116,.6)}
.stat.score .val{color:#fff}
#topBtns{display:flex; gap:6px}
.tbtn{
  width:38px; height:34px; border-radius:8px; border:1px solid var(--line2);
  background:var(--bg2); color:var(--txt-dim); font-size:13px; font-weight:700;
  transition:all .15s;
}
.tbtn:hover{background:var(--bg3); color:var(--txt); border-color:rgba(140,160,255,.4)}

/* ---------- chips (active global upgrades) ---------- */
#chipRow{display:flex; gap:6px; flex-wrap:wrap; min-height:0; padding:0 4px}
#chipRow:empty{display:none}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; padding:3px 9px; border-radius:20px;
  background:linear-gradient(180deg, rgba(80,95,170,.28), rgba(40,48,90,.28));
  border:1px solid var(--line2); color:var(--txt-dim); cursor:default;
  animation:chipIn .35s ease;
}
.chip b{color:var(--txt)}
.chip .n{color:var(--gold); font-weight:700}
@keyframes chipIn{from{transform:scale(.6); opacity:0}}

/* ---------- canvas ---------- */
#canvasWrap{
  position:relative; flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center;
}
#game{
  max-width:100%; max-height:100%; aspect-ratio:1200/680;
  border-radius:10px; border:1px solid rgba(120,150,255,.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 10px 50px rgba(0,0,0,.55), 0 0 90px rgba(70,110,255,.07) inset;
  background:#0a0d18; cursor:crosshair;
}
#toast{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(20,14,20,.92); border:1px solid rgba(255,91,116,.5); color:#ffb9c5;
  padding:7px 18px; border-radius:8px; font-size:13px; font-weight:600; pointer-events:none;
  box-shadow:0 4px 24px rgba(0,0,0,.5); transition:opacity .3s; z-index:5;
}
#toast.hidden{opacity:0}

/* ---------- sidebar ---------- */
#sidebar{
  width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; min-height:0;
}
#buildBar{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.card{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  background:linear-gradient(180deg, rgba(34,40,72,.6), rgba(19,23,41,.7));
  border:1px solid var(--line); border-radius:10px; color:var(--txt);
  text-align:left; position:relative; transition:all .13s;
}
.card:hover{border-color:var(--card-c, var(--cyan)); transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--card-c, #7fd8ff) 22%, transparent)}
.card.sel{border-color:var(--card-c, var(--cyan));
  background:linear-gradient(180deg, rgba(52,60,104,.75), rgba(28,33,60,.8));
  box-shadow:0 0 0 1px var(--card-c), 0 0 22px color-mix(in srgb, var(--card-c) 30%, transparent)}
.card.broke{opacity:.45; filter:saturate(.4)}
.card canvas{width:34px; height:34px; flex-shrink:0}
.card .cInfo{flex:1; min-width:0}
.card .cName{font-size:12px; font-weight:700; letter-spacing:.4px; white-space:nowrap}
.card .cCost{font-size:11.5px; color:var(--gold); font-weight:600}
.card kbd{position:absolute; top:4px; right:5px; font-size:9px; padding:0 4px; opacity:.7}
.card .cCount{
  position:absolute; bottom:4px; right:6px; font-size:11px; font-weight:800;
  color:var(--gold); text-shadow:0 0 8px rgba(255,207,92,.4);
}
.card .bTag{font-size:10px; opacity:.85}
.card.fuseHi{
  border-color:var(--cyan); animation:fusePulse 1s ease-in-out infinite;
}
@keyframes fusePulse{
  0%,100%{box-shadow:0 0 6px rgba(127,216,255,.25)}
  50%{box-shadow:0 0 18px rgba(127,216,255,.6)}
}
.trayTip{
  grid-column:1/-1; font-size:11px; color:var(--txt-faint); text-align:center;
  padding:8px; border:1px dashed var(--line2); border-radius:9px;
}

/* ---------- grant bar ---------- */
#grantBar{
  display:none; align-items:center; gap:7px; padding:6px 10px;
  background:linear-gradient(90deg, rgba(255,207,92,.14), rgba(30,36,66,.4));
  border:1px solid rgba(255,207,92,.35); border-radius:10px;
  animation:chipIn .35s ease;
}
#grantBar.show{display:flex}
#grantBar .gLabel{font-size:9px; letter-spacing:2px; color:var(--gold); font-weight:700}
#grantBar .gChip{
  display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700;
  color:var(--gc, var(--txt));
}
#grantBar .gChip canvas{vertical-align:middle}

/* ---------- forge button ---------- */
#btnForge{
  width:100%; padding:8px; border-radius:10px; font-size:12.5px; font-weight:800; letter-spacing:1.5px;
  background:linear-gradient(180deg, rgba(70,52,110,.55), rgba(38,28,64,.6));
  border:1px solid rgba(180,91,255,.4); color:#dcc8ff; transition:all .15s;
}
#btnForge:hover{border-color:var(--purple); box-shadow:0 0 16px rgba(180,91,255,.2)}
#btnForge kbd{font-size:9px; opacity:.8}

/* ---------- forge modal ---------- */
#forgeModal{width:680px}
#forgeList{display:flex; flex-direction:column; gap:6px; text-align:left; max-height:46vh; overflow-y:auto; padding-right:4px}
#forgeList::-webkit-scrollbar{width:8px}
#forgeList::-webkit-scrollbar-thumb{background:var(--bg3); border-radius:4px}
.fRow{
  display:flex; align-items:center; gap:12px; padding:7px 10px;
  background:rgba(20,24,45,.55); border:1px solid var(--line); border-radius:10px;
}
.fIcons{display:flex; align-items:center; gap:4px; flex-shrink:0; min-width:158px}
.fIcons canvas{vertical-align:middle}
.fPlus{color:var(--txt-faint); font-size:12px; margin:0 1px}
.fIng.missing{opacity:.3; filter:grayscale(.8)}
.fOut{filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.fInfo{flex:1; min-width:0; line-height:1.25}
.fInfo b{font-size:13px}
.fInfo small{display:block; color:var(--txt-faint); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fGo{
  padding:6px 16px; border-radius:8px; font-size:12px; font-weight:700;
  background:linear-gradient(180deg,#2b3564,#1b2246); color:#dff2ff;
  border:1px solid rgba(127,216,255,.4); transition:all .13s;
}
.fGo:hover:not(:disabled){box-shadow:0 0 12px rgba(127,216,255,.25)}
.fGo:disabled{opacity:.35; cursor:default}
.fGo.wide{width:100%; margin-top:4px}
#forgeMerges{display:flex; flex-direction:column; gap:4px}

/* ---------- fusion panel bits ---------- */
.fuseHead{
  font-size:9.5px; letter-spacing:2.5px; color:var(--purple); margin-top:10px;
  border-top:1px solid var(--line); padding-top:8px; font-weight:700;
}
.fuseBtn{
  display:block; width:100%; text-align:left; margin-top:5px; padding:6px 10px;
  background:linear-gradient(180deg, rgba(56,42,88,.5), rgba(30,24,52,.6));
  border:1px solid rgba(180,91,255,.3); border-radius:8px; color:var(--txt); transition:all .13s;
  font-size:12px;
}
.fuseBtn:hover:not(:disabled){border-color:var(--purple); box-shadow:0 0 12px rgba(180,91,255,.18)}
.fuseBtn:disabled{opacity:.4; cursor:default}
.fuseBtn .uName{font-weight:600}
.fuseBtn .uCost{float:right; font-weight:700}
.needChip{
  display:inline-block; padding:2px 9px; border-radius:12px; font-size:11px; font-weight:700;
  color:var(--gc); border:1px solid color-mix(in srgb, var(--gc) 55%, transparent);
  background:color-mix(in srgb, var(--gc) 12%, transparent); margin:2px 2px 0 0;
}

/* ---------- torrent mode ---------- */
.bigBtn.torrent{border-color:rgba(180,91,255,.5)}
.bigBtn.torrent b{text-shadow:0 0 14px rgba(180,91,255,.55)}
.bigBtn.torrent:hover{border-color:var(--purple); box-shadow:0 8px 30px rgba(150,80,255,.2)}

#pendingTray{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:9px; z-index:4;
}
.pendBtn{
  width:58px; height:58px; border-radius:14px; font-size:22px; line-height:1.05;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, rgba(60,72,140,.92), rgba(20,24,48,.94));
  border:1px solid rgba(127,216,255,.55); color:#dff2ff;
  box-shadow:0 6px 20px rgba(0,0,0,.5); transition:transform .15s;
  animation:pendIn .35s cubic-bezier(.2,.9,.3,1.3), pendGlow 1.6s ease-in-out infinite;
}
.pendBtn small{font-size:7px; letter-spacing:1.2px; font-weight:800; margin-top:2px; opacity:.85}
.pendBtn:hover{transform:scale(1.1)}
.pendBtn.hybrid{border-color:rgba(255,207,92,.6); color:#ffe9b0}
@keyframes pendIn{from{transform:translateX(-70px) scale(.5); opacity:0}}
@keyframes pendGlow{
  0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 10px rgba(127,216,255,.25)}
  50%{box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 26px rgba(127,216,255,.55)}
}
.pendBtn.hybrid{animation-name:pendIn, pendGlowGold}
@keyframes pendGlowGold{
  0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 10px rgba(255,207,92,.25)}
  50%{box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 26px rgba(255,207,92,.55)}
}

/* ---------- grant preview strip ---------- */
#grantPreview{display:flex; align-items:center; gap:8px; margin-bottom:9px}
#grantPreview .gpLabel{font-size:9px; letter-spacing:1.8px; color:var(--txt-faint); flex-shrink:0}
#gpSlots{display:flex; gap:5px; flex:1; min-width:0}
.gpSlot{
  flex:1; display:flex; align-items:center; justify-content:center; gap:1px;
  min-height:24px; padding:2px 3px; border-radius:7px;
  background:rgba(14,17,32,.7); border:1px solid var(--line); cursor:default;
}
.gpSlot.next{
  border-color:rgba(255,207,92,.45);
  background:linear-gradient(180deg, rgba(255,207,92,.10), rgba(14,17,32,.7));
}
.gpSlot canvas{flex-shrink:0}

/* ---------- info panel ---------- */
#infoPanel{
  flex:1; min-height:120px; overflow-y:auto;
  background:linear-gradient(180deg, rgba(24,29,54,.55), rgba(14,17,32,.6));
  border:1px solid var(--line); border-radius:12px; padding:12px 13px;
}
#infoPanel::-webkit-scrollbar{width:8px}
#infoPanel::-webkit-scrollbar-thumb{background:var(--bg3); border-radius:4px}
.ipTitle{font-family:var(--font-disp); font-size:17px; letter-spacing:1px; margin-bottom:2px}
.ipSub{font-size:11px; color:var(--txt-faint); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px}
.ipDesc{font-size:12.5px; color:var(--txt-dim); line-height:1.45; margin-bottom:9px}
.ipStats{display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; margin-bottom:10px}
.ipStats div{font-size:12px; color:var(--txt-dim); display:flex; justify-content:space-between}
.ipStats b{color:var(--txt); font-variant-numeric:tabular-nums}
.ipHint{font-size:11.5px; color:var(--txt-faint); line-height:1.55}
.ipHint kbd{margin:0 1px}
.upBtn{
  display:block; width:100%; text-align:left; margin-top:7px; padding:8px 11px;
  background:linear-gradient(180deg, rgba(46,54,96,.7), rgba(26,31,56,.8));
  border:1px solid var(--line2); border-radius:9px; color:var(--txt); transition:all .13s;
}
.upBtn:hover:not(:disabled){border-color:var(--gold); box-shadow:0 0 14px rgba(255,207,92,.15)}
.upBtn:disabled{opacity:.45; cursor:default}
.upBtn .uName{font-size:12.5px; font-weight:700}
.upBtn .uName .glyph{margin-right:5px}
.upBtn .uCost{float:right; color:var(--gold); font-weight:700; font-size:12.5px}
.upBtn .uDesc{font-size:11px; color:var(--txt-dim); margin-top:2px; line-height:1.35}
.upBtn .uDesc b{color:var(--txt)}
.mileTag{color:var(--gold); font-weight:700; letter-spacing:.3px}
.upBtn.branch{border-left:3px solid var(--branch-c, var(--purple))}
.sellBtn{
  margin-top:9px; width:100%; padding:6px; border-radius:8px; font-size:12px; font-weight:600;
  background:rgba(90,30,40,.35); border:1px solid rgba(255,91,116,.35); color:#ff9fae;
  transition:all .13s;
}
.sellBtn:hover{background:rgba(120,35,50,.5); border-color:var(--red)}
.maxBadge{
  margin-top:8px; text-align:center; font-size:11px; letter-spacing:3px; color:var(--gold);
  border:1px dashed rgba(255,207,92,.35); padding:5px; border-radius:8px;
}

/* ---------- wave panel ---------- */
#wavePanel{
  background:linear-gradient(180deg, rgba(24,29,54,.55), rgba(14,17,32,.6));
  border:1px solid var(--line); border-radius:12px; padding:11px 13px;
}
#waveNextLabel{font-size:10px; letter-spacing:2.5px; color:var(--txt-faint)}
#wavePreview{font-size:12.5px; margin:4px 0 8px; color:var(--txt-dim); line-height:1.4; min-height:18px}
#wavePreview b{color:var(--txt)}
#wavePreview .boss{color:var(--red); font-weight:800; letter-spacing:1px}
#countWrap{height:5px; background:var(--bg2); border-radius:3px; overflow:hidden; margin-bottom:9px}
#countdownBar{height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--cyan), #4f7dff); transition:width .2s linear}
#btnSend{
  width:100%; padding:10px; border-radius:10px; font-size:14px; font-weight:800; letter-spacing:1px;
  background:linear-gradient(180deg, #2b3564, #1b2246);
  border:1px solid rgba(127,216,255,.4); color:#dff2ff; transition:all .15s;
  text-shadow:0 0 12px rgba(127,216,255,.5);
}
#btnSend:hover:not(:disabled){box-shadow:0 0 22px rgba(127,216,255,.25); transform:translateY(-1px)}
#btnSend:disabled{opacity:.4; cursor:default}
#sendBonus{color:var(--gold); font-size:12px}

/* ---------- overlay & modals ---------- */
#overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(4,5,12,.72); backdrop-filter:blur(7px);
}
#overlay.hidden,.modal.hidden,.hidden{display:none !important}
.modal{
  width:520px; max-width:94vw; max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg, #171c33 0%, #0e1122 100%);
  border:1px solid rgba(140,170,255,.22); border-radius:18px; padding:30px 34px;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 120px rgba(80,120,255,.08) inset;
  text-align:center; animation:modalIn .3s cubic-bezier(.2,.9,.3,1.2);
}
.modal.wide{width:640px}
@keyframes modalIn{from{transform:scale(.92) translateY(12px); opacity:0}}
.modal h2{font-family:var(--font-disp); font-size:24px; letter-spacing:2px; margin-bottom:14px}
.gameTitle{
  font-family:var(--font-disp); font-size:52px; letter-spacing:10px; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#fff 5%, var(--cyan) 50%, #3f6dff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(127,216,255,.35)); margin:6px 0 4px;
}
.gameTitle span{background:linear-gradient(180deg,#ffe9b0, var(--gold) 55%, #a56a09);
  -webkit-background-clip:text; background-clip:text}
.tagline{color:var(--txt-dim); font-size:13.5px; margin-bottom:22px; letter-spacing:.4px}
.menuGem canvas{filter:drop-shadow(0 6px 30px rgba(127,216,255,.35)); animation:gemFloat 4s ease-in-out infinite}
@keyframes gemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.menuBtns{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.bigBtn{
  padding:14px 18px; border-radius:12px; text-align:center;
  background:linear-gradient(180deg, #2a3363, #191f42);
  border:1px solid rgba(127,216,255,.45); color:var(--txt); transition:all .16s;
}
.bigBtn b{display:block; font-size:16px; letter-spacing:3px; text-shadow:0 0 14px rgba(127,216,255,.5)}
.bigBtn small{display:block; margin-top:3px; color:var(--txt-dim); font-size:11.5px}
.bigBtn:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(60,110,255,.25); border-color:var(--cyan)}
.bigBtn.rush{border-color:rgba(255,207,92,.5)}
.bigBtn.rush b{text-shadow:0 0 14px rgba(255,207,92,.5)}
.bigBtn.rush:hover{border-color:var(--gold); box-shadow:0 8px 30px rgba(255,180,60,.18)}
.bigBtn.slim{padding:10px 22px; display:inline-block}
.bigBtn.slim b{font-size:13px}
.menuRow{display:flex; gap:10px; justify-content:center; margin-top:6px}
.ghostBtn{
  padding:9px 16px; border-radius:10px; background:transparent;
  border:1px solid var(--line2); color:var(--txt-dim); font-size:13px; transition:all .15s;
}
.ghostBtn:hover{color:var(--txt); border-color:rgba(140,160,255,.45); background:rgba(60,70,120,.15)}

/* how-to */
.howBody{text-align:left; font-size:13.5px; line-height:1.6; color:var(--txt-dim); margin-bottom:16px}
.howBody p{margin-bottom:10px}
.howBody b{color:var(--txt)}
.hl-red{color:var(--red) !important}.hl-cyan{color:var(--cyan) !important}
.hl-gold{color:var(--gold) !important}.hl-stone{color:#aeb6c9 !important}
.keys{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:12px;
  background:rgba(10,12,24,.5); border:1px solid var(--line); border-radius:10px; padding:10px 12px}

/* leaderboard */
#lbTabs{display:flex; gap:8px; justify-content:center; margin-bottom:12px}
.lbTab{
  padding:6px 18px; border-radius:20px; background:transparent; font-size:12.5px; font-weight:600;
  border:1px solid var(--line2); color:var(--txt-dim); transition:all .15s;
}
.lbTab.active{color:#0b0e1a; background:linear-gradient(180deg,#ffe4a0,var(--gold)); border-color:var(--gold)}
#lbList,#overBoard{text-align:left; margin-bottom:12px}
.lbRow{
  display:flex; align-items:center; gap:10px; padding:6px 12px; border-radius:8px; font-size:13px;
  border-bottom:1px solid rgba(140,160,255,.07);
}
.lbRow .rank{width:26px; color:var(--txt-faint); font-weight:700; font-variant-numeric:tabular-nums}
.lbRow:nth-child(1) .rank{color:var(--gold)}
.lbRow:nth-child(2) .rank{color:#cfd8ea}
.lbRow:nth-child(3) .rank{color:#d29a6a}
.lbRow .name{flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbRow .sc{font-variant-numeric:tabular-nums; font-weight:700; color:var(--txt)}
.lbRow .wv{width:64px; text-align:right; color:var(--txt-faint); font-size:11.5px}
.lbRow.you{background:linear-gradient(90deg, rgba(255,207,92,.12), transparent); border-radius:8px}
.lbRow.you .name{color:var(--gold)}
.lbEmpty{color:var(--txt-faint); font-size:13px; text-align:center; padding:18px}
.finePrint{font-size:11px; color:var(--txt-faint); margin-bottom:14px}

/* resonance choice */
.resonance{
  background:linear-gradient(180deg,#fff, var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(127,216,255,.4));
}
.subhead{color:var(--txt-dim); font-size:13px; margin:-6px 0 18px}
#choiceCards{display:flex; gap:12px; margin-bottom:16px}
.chCard{
  flex:1; padding:18px 14px 16px; border-radius:14px; text-align:center; color:var(--txt);
  background:linear-gradient(180deg, rgba(44,52,96,.6), rgba(22,26,50,.85));
  border:1px solid var(--line2); transition:all .16s; animation:chIn .4s backwards;
}
.chCard:nth-child(2){animation-delay:.08s}
.chCard:nth-child(3){animation-delay:.16s}
@keyframes chIn{from{transform:translateY(16px) scale(.95); opacity:0}}
.chCard:hover{
  transform:translateY(-4px); border-color:var(--cyan);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 26px rgba(127,216,255,.18);
}
.chCard .icon{font-size:30px; line-height:1; margin-bottom:9px; display:block;
  filter:drop-shadow(0 0 10px rgba(127,216,255,.5))}
.chCard .nm{font-family:var(--font-disp); font-size:15.5px; letter-spacing:1px; margin-bottom:6px}
.chCard .ds{font-size:11.5px; color:var(--txt-dim); line-height:1.45}
.chCard .stk{margin-top:8px; font-size:10px; letter-spacing:1.5px; color:var(--gold)}

/* game over */
#overScore{
  font-size:46px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:1px;
  background:linear-gradient(180deg,#fff,#ffd67e 60%,#c98f1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,207,92,.35)); margin-bottom:8px;
}
#overStats{display:flex; justify-content:center; gap:22px; margin-bottom:18px; flex-wrap:wrap}
#overStats div{font-size:12px; color:var(--txt-faint)}
#overStats b{display:block; font-size:17px; color:var(--txt); font-variant-numeric:tabular-nums}
#saveRow{display:flex; gap:8px; justify-content:center; margin-bottom:14px}
#nameInput{
  background:var(--bg1); border:1px solid var(--line2); color:var(--txt); border-radius:10px;
  padding:9px 14px; font-size:14px; width:200px; outline:none; text-align:center;
}
#nameInput:focus{border-color:var(--cyan)}
#overModal.victory h2{color:var(--gold)}

/* ============================================================
   MOBILE / TOUCH  — additive only. Every rule above (the desktop
   experience) is untouched; these blocks activate only on small
   touch-sized viewports. Landscape-first: portrait phones get a
   rotate hint, landscape phones get a slim rail + big canvas.
   ============================================================ */

/* Canvas taps are game input, not scroll/zoom/long-press-callout.
   No effect on a desktop mouse. */
#game{touch-action:none; -webkit-touch-callout:none}

/* Dynamic viewport height: tracks the mobile browser's collapsing address
   bar so the board isn't clipped in-browser. On desktop dvh == vh (no
   dynamic UI), so the layout is identical. */
@supports (height:100dvh){ #app{height:100dvh} }

/* Rotate hint is hidden everywhere except portrait phones (below). */
#rotateHint{display:none}

/* ---- Portrait phone: ask the player to rotate ---- */
@media (orientation:portrait) and (max-width:680px){
  #app{display:none}
  #overlay{display:none !important}
  #rotateHint{
    display:flex; position:fixed; inset:0; z-index:200;
    flex-direction:column; align-items:center; justify-content:center; gap:16px;
    padding:34px; text-align:center;
    background:radial-gradient(120% 120% at 50% -10%, #141a33 0%, var(--bg0) 55%, #04050b 100%);
  }
  #rotateHint .rIcon{
    font-size:58px; line-height:1;
    filter:drop-shadow(0 0 22px rgba(127,216,255,.4));
    animation:rotateNudge 2.6s ease-in-out infinite;
  }
  #rotateHint h2{
    font-family:var(--font-disp); font-size:24px; letter-spacing:2px;
    background:linear-gradient(180deg,#fff 10%,var(--cyan) 60%,#4f7dff 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #rotateHint p{color:var(--txt-dim); font-size:14px; line-height:1.55; max-width:290px}
}
@keyframes rotateNudge{0%,55%,100%{transform:rotate(0)}28%{transform:rotate(-90deg)}}

/* ---- Landscape phone (short viewport): slim control rail, big board ---- */
@media (orientation:landscape) and (max-height:600px){
  #app{padding:5px 8px 7px; gap:5px}

  #topbar{gap:10px; padding:5px 10px; border-radius:9px}
  #brand{font-size:15px; letter-spacing:2.5px}
  #stats{gap:12px}
  .stat{min-width:0}
  .stat .lbl{font-size:8px; letter-spacing:1.5px}
  .stat .val{font-size:15px}
  #topBtns{gap:4px}
  .tbtn{width:32px; height:30px; font-size:12px}

  #main{gap:8px}
  #sidebar{width:196px; gap:6px}
  #buildBar{gap:5px}
  .card{padding:4px 6px; gap:5px}
  .card canvas{width:26px; height:26px}
  .card .cName{font-size:10.5px}
  .card .cCost{font-size:10px}
  .card kbd{display:none}
  #btnForge{padding:6px; font-size:10.5px; letter-spacing:1px}
  #btnForge kbd{display:none}
  #infoPanel{padding:8px 9px; min-height:0}
  .ipTitle{font-size:14px}
  .ipSub{margin-bottom:5px}
  .ipDesc{font-size:11px; line-height:1.4; margin-bottom:6px}
  #wavePanel{padding:7px 9px}
  #waveNextLabel{font-size:9px}
  #wavePreview{font-size:11px; margin:3px 0 6px; min-height:0}
  #grantPreview{flex-direction:column; align-items:stretch; gap:3px; margin-bottom:6px}
  #grantPreview .gpLabel{align-self:flex-start}
  #gpSlots{width:100%}
  .gpSlot{min-width:0}
  #btnSend{padding:7px; font-size:12px}

  /* Modals: fit a short viewport */
  .modal{padding:16px 22px; max-height:94vh}
  .modal h2{margin-bottom:10px; font-size:20px}
  .menuGem canvas{width:80px; height:80px}
  .gameTitle{font-size:32px; letter-spacing:5px; margin:2px 0}
  .tagline{margin-bottom:12px; font-size:12px}
  .menuBtns{gap:7px; margin-bottom:10px}
  .bigBtn{padding:9px 14px}
  .bigBtn b{font-size:13px; letter-spacing:2px}
  .bigBtn small{font-size:10.5px; margin-top:1px}
  .howBody{font-size:12px; line-height:1.5; margin-bottom:12px}
  #choiceCards{gap:9px}
  .chCard{padding:12px 10px}
}