:root{
  --bg:#06080a; --panel:#0d1014; --panel2:#10141a; --ink:#e8ece6; --dim:#79827d;
  --acc:#9fb2b0; --acc2:#6fae9a; --good:#8fc7a6; --bad:#d6403a; --gold:#cdb27a; --pur:#9d8fc4; --energy:#6fc3d6;
  --line:#1e242a; --danger:#ff5a3d;   /* Bone & Ash cold palette; --danger reserves the old orange for blood/danger only */
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; background:var(--bg); overflow:hidden;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif; color:var(--ink); user-select:none;}
#game{display:block; position:absolute; inset:0; background:#050604; cursor:crosshair;}
.num{font-family:"Consolas",ui-monospace,monospace;}
.dev-only{display:none!important;}
body.dev-mode .dev-only{display:flex!important;}

.screen{position:absolute; inset:0; display:none; align-items:center; justify-content:safe center;
  flex-direction:column; z-index:10; padding:22px; overflow-y:auto;   /* safe center + scroll: short screens never clip the title/menu, they scroll */
  background:radial-gradient(1100px 640px at 50% 28%, rgba(16,27,29,.58), rgba(4,5,6,.94) 70%),
             radial-gradient(800px 500px at 18% 78%, rgba(111,174,154,.08), transparent 62%);}
.screen.active{display:flex;}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:8px; padding:24px 28px; max-width:1000px; width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);}
h1.title{font-size:62px; letter-spacing:8px; text-align:center; line-height:1; font-weight:900;
  color:#eef2ec; text-shadow:0 0 22px rgba(159,178,176,.5), 0 4px 0 #11161a; margin-bottom:2px;
  animation:titleGlow 3.2s ease-in-out infinite;}
h1.title .o{color:var(--acc);}
@keyframes titleGlow{
  0%,100%{ text-shadow:0 0 18px rgba(159,178,176,.42), 0 4px 0 #11161a; }
  50%{ text-shadow:0 0 34px rgba(159,178,176,.8), 0 0 60px rgba(111,174,154,.3), 0 4px 0 #11161a; } }
.sub{text-align:center; color:var(--dim); letter-spacing:4px; margin-bottom:20px; font-size:12px; text-transform:uppercase;}
.row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.col{display:flex; flex-direction:column; gap:10px;}
button.btn{cursor:pointer; border:1px solid var(--line); background:#1b1f15; color:var(--ink);
  padding:13px 22px; border-radius:8px; font-size:16px; font-weight:700; letter-spacing:1px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .06s, background .15s, border-color .15s; min-width:190px;}
.ico{display:inline-block; vertical-align:middle; flex:none;}
button.btn .ico{width:17px; height:17px;}
button.btn:hover{background:#262b1c; border-color:var(--acc); transform:translateY(-2px);}
button.btn:active{transform:translateY(0);}
button.btn.primary{background:linear-gradient(180deg,#cfd6cf,#9aa6a0); color:#10141a; border-color:var(--acc2);
  box-shadow:0 0 18px rgba(111,174,154,.45), inset 0 1px 0 rgba(255,255,255,.25);}
button.btn.primary:hover{background:linear-gradient(180deg,#dde2dc,#aab4ae); box-shadow:0 0 26px rgba(159,178,176,.5), inset 0 1px 0 rgba(255,255,255,.3);}
button.btn:hover{box-shadow:0 0 14px rgba(159,178,176,.22);}
button.btn.ghost{background:transparent; min-width:0; padding:9px 15px; font-size:14px;}
button.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.small{font-size:13px; color:var(--dim);}
.hint{margin-top:16px; color:var(--dim); font-size:13px; text-align:center; line-height:1.8;}
.howcols{display:grid; grid-template-columns:1fr 1fr; gap:18px; font-size:14px; line-height:1.85;}
kbd{background:#0a0c07; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:1px 7px; font-family:Consolas,monospace; font-size:12px; color:var(--ink);}

.grid{display:grid; gap:10px; max-height:52vh; overflow:auto; padding:4px 2px;}
.card{background:#0c0e09; border:1px solid var(--line); border-radius:8px; padding:12px;}
.card h3{font-size:15px; margin-bottom:2px; display:flex; align-items:center; gap:7px;}
.card .meta{font-size:12px; color:var(--dim); min-height:30px; margin:4px 0 8px; line-height:1.5;}
.card .acts{display:flex; gap:6px;}
.tag{font-size:10px; padding:2px 7px; border-radius:14px; background:#0a0c07; border:1px solid var(--line); color:var(--dim); letter-spacing:1px;}
.tag.own{color:var(--good); border-color:#34491f;}
.sectionlabel{grid-column:1/-1; font-size:11px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-top:6px;}
.bigbtn{margin-top:14px; display:flex; justify-content:center; gap:10px;}
.shophead{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
.wallet{font-size:22px; font-weight:900; color:var(--gold); background:#0a0c07; border:1px solid #4a4127; border-radius:8px; padding:8px 16px;}

/* --- shop (overhauled) --- */
.shoptabs{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.shoptab{cursor:pointer; border:1px solid var(--line); background:#0c0e09; color:var(--dim); padding:8px 18px; border-radius:8px; font-size:13px; font-weight:700; letter-spacing:.5px; transition:border-color .12s, color .12s, background .12s;}
.shoptab:hover{ border-color:var(--acc); color:var(--ink); }
.shoptab.on{ background:#171c13; color:var(--ink); border-color:var(--acc2); box-shadow:inset 0 0 12px rgba(111,174,154,.2); }
/* primary action button sitting in the tab row, after Upgrades — fast "go next wave" between rounds */
.shoptab.shopstart{ background:linear-gradient(180deg,#cfd6cf,#9aa6a0); color:#10141a; border-color:var(--acc2); font-weight:800; box-shadow:0 0 0 1px rgba(111,174,154,.25);}
.shoptab.shopstart:hover{ background:linear-gradient(180deg,#dde2dc,#aab4ae); color:#0b0e13; border-color:var(--acc2); box-shadow:0 0 22px rgba(159,178,176,.5), inset 0 1px 0 rgba(255,255,255,.3);}
.shoptab.shopstart .mi-ico,.shoptab.shopstart svg{ color:#10141a; }
.shophint{ display:none; margin-top:6px; color:var(--gold); font-size:12px; letter-spacing:.8px; text-transform:uppercase; line-height:1.35; }

/* ---- DEV · Difficulty screen (dev-phase only) ---- */
.mbtn.dev b{ color:var(--gold); }
.diffbody{ max-height:50vh; overflow-y:auto; padding:2px 10px 2px 2px; margin:8px 0; text-align:left; }
.diffgroup{ margin-bottom:12px; }
.diffgrouptitle{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--acc2); margin:6px 0 8px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.diffrow{ margin-bottom:11px; }
.diffhead{ display:flex; justify-content:space-between; align-items:baseline; }
.difflabel{ font-size:13px; color:var(--ink); text-transform:capitalize; }
.diffval{ font-size:13px; font-weight:700; color:var(--dim); font-family:Consolas,monospace; }
.diffval.off{ color:var(--gold); }                       /* a value changed away from base 1.00× */
.diffhint{ font-size:11px; color:var(--dim); margin-top:2px; }
.diffrow input[type=range]{ width:100%; margin-top:5px; accent-color:var(--acc2); cursor:pointer; height:16px; }
.diffpresets{ text-align:left; margin-top:4px; border-top:1px solid var(--line); padding-top:6px; }
.presetsave{ display:flex; gap:8px; margin-bottom:10px; }
.presetname{ flex:1; background:#0a0c07; border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:7px 10px; font:13px system-ui; }
.presetname:focus{ outline:none; border-color:var(--acc2); }
.presetlist{ display:flex; flex-direction:column; gap:6px; }
.presetrow{ display:flex; gap:8px; align-items:center; background:#0c0e09; border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
.presetlabel{ flex:1; font-weight:700; color:var(--ink); }
.presetrow .btn{ padding:5px 14px; min-width:0; }
.presetempty{ color:var(--dim); font-size:12px; padding:6px 2px; }
.shopgrid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); max-height:56vh;}
.shopcard{display:flex; flex-direction:column; background:#0c0e09; border:1px solid var(--line); border-radius:8px; padding:12px 13px; transition:border-color .15s, box-shadow .15s;}
.shopcard:hover{ border-color:var(--acc); box-shadow:0 0 16px rgba(159,178,176,.15); }
.shopcard.owned{ border-color:#34491f; }
.sc-top{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;}
.sc-icon{font-size:26px; line-height:1;}
.sc-preview{ width:58px; height:48px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:radial-gradient(circle at 50% 35%, #151b22, #080a0d 72%); overflow:hidden; }
.sc-preview canvas{ width:58px; height:48px; display:block; image-rendering:pixelated; }
.sc-titles{flex:1; min-width:0;}
.sc-name{font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.sc-sub{font-size:11.5px; color:var(--dim); margin-top:2px; line-height:1.4;}
.sc-badge{font-size:9px; letter-spacing:1px; padding:2px 6px; border-radius:10px; border:1px solid var(--line); color:var(--dim);}
.sc-badge.own{ color:var(--good); border-color:#34491f; background:rgba(143,199,166,.09); }
.sc-badge.disc{ color:var(--gold); border-color:#4a4127; }
.sc-stats{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px;}
.sc-chip{font-size:10.5px; color:var(--dim); background:#0a0c07; border:1px solid var(--line); border-radius:6px; padding:2px 7px;}
.sc-chip b{color:var(--ink); font-family:Consolas,monospace; font-weight:700;}
.sc-ammo{display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:11px; color:var(--dim); font-family:Consolas,monospace;}
.sc-ammobar{flex:1; height:5px; background:#0a0c07; border:1px solid var(--line); border-radius:3px; overflow:hidden;}
.sc-ammobar i{display:block; height:100%; background:var(--acc2);}
.sc-ammo span.low{ color:var(--bad); }
.sc-pips{display:flex; align-items:center; gap:3px; margin-bottom:10px; flex-wrap:wrap;}
.sc-pips i{width:11px; height:6px; border-radius:2px; background:#0a0c07; border:1px solid var(--line);}
.sc-pips i.on{ background:var(--acc2); border-color:var(--acc2); }
.sc-lvl{font-size:10.5px; color:var(--dim); margin-left:auto; font-family:Consolas,monospace;}
.sc-foot{margin-top:auto;}
.sc-buy{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; border:1px solid var(--line); background:#14180f; color:var(--ink); padding:9px 12px; border-radius:8px; font-size:13px; font-weight:700; transition:background .12s, border-color .12s, box-shadow .12s;}
.sc-buy .sc-price{font-family:Consolas,monospace; color:var(--gold);}
.sc-buy.can{ border-color:var(--acc2); }
.sc-buy.can:hover{ background:#1c2317; box-shadow:0 0 14px rgba(111,174,154,.28); }
.sc-buy:disabled{ opacity:.42; cursor:not-allowed; }
.sc-buy.maxed{ justify-content:center; color:var(--good); }

.chargrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.charcard{cursor:pointer; text-align:center; transition:transform .08s, border-color .15s, background .15s;}
.charcard:hover{transform:translateY(-3px); border-color:var(--acc); background:#14170f;}
.charcard canvas{display:block; margin:0 auto 6px;}
.charname{font-weight:900; letter-spacing:2px; font-size:16px;}
.charstats{font-size:11px; color:var(--dim); margin-top:6px; line-height:1.5;}
.perk{font-size:11px; color:var(--acc2); margin-top:6px; min-height:28px;}
.power{font-size:11px; color:var(--energy); margin-top:3px;}

#toast{position:absolute; left:50%; top:112px; transform:translateX(-50%); z-index:30;   /* item 14: cleared the top score/wave/timer HUD so wave alerts no longer block the timer */
  background:#14170f; border:1px solid var(--line); padding:8px 18px; border-radius:8px;
  font-weight:800; letter-spacing:1px; opacity:0; transition:opacity .25s; pointer-events:none; text-transform:uppercase; font-size:14px;}
#toast.show{opacity:1;}
.credit{position:absolute; bottom:10px; width:100%; text-align:center; color:var(--dim); font-size:11px; z-index:9;}
.sndtog{position:absolute; top:12px; right:14px; z-index:20;}
body.in-game .sndtog,
body.in-shop .sndtog{display:none;}   /* during gameplay the canvas HUD owns the top-right corner, and the shop is its own focused screen; mute with [M] */

/* Controls / keybinds screen */
.bindlist{width:100%; max-height:52vh; overflow:auto; padding:4px 2px; text-align:left;}
.bindrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px; border-bottom:1px solid var(--line);}
.bindname{font-size:14px; color:var(--ink);}
.bindkeys{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.keychip{cursor:pointer; background:#0a0c07; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:3px 12px; font-family:Consolas,monospace; font-size:13px; color:var(--ink); min-width:52px; transition:border-color .12s,color .12s,background .12s;}
.keychip:hover{border-color:var(--acc); color:#fff;}
.keychip.listening{border-color:var(--energy); color:var(--energy); background:#0c1418;}

/* Leaderboard */
.lbfilters{display:flex; flex-direction:column; gap:6px; margin-bottom:10px; width:100%;}
.lbfilterrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.lblabel{font-size:11px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; min-width:68px;}
.lbchip{cursor:pointer; background:#0a0c07; border:1px solid var(--line); border-radius:14px; color:var(--dim);
  padding:3px 12px; font-size:12px; letter-spacing:1px; transition:border-color .12s,color .12s,background .12s;}
.lbchip:hover{border-color:var(--acc); color:var(--ink);}
.lbchip.on{background:var(--acc); color:#1a0c05; border-color:var(--acc); font-weight:700;}
.lblist{width:100%; max-height:46vh; overflow:auto; text-align:left; border:1px solid var(--line); border-radius:8px;}
.lbrow{display:grid; grid-template-columns:44px 1.4fr 1fr .7fr 1.1fr .8fr 1fr; align-items:center; gap:6px;
  padding:7px 12px; border-bottom:1px solid var(--line); font-size:13px;}
.lbrow:last-child{border-bottom:none;}
.lbhead{font-size:10px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; position:sticky; top:0; background:var(--panel2); z-index:1;}
.lbrow.top{background:rgba(255,207,90,.06);}
.lbrank{font-size:15px; text-align:center;}
.lbname{font-weight:700;}
.lbwin{font-size:9px; background:#1c3a1c; color:var(--good); padding:1px 5px; border-radius:8px; letter-spacing:1px;}
.lbcol{color:var(--ink);}
.lbempty{padding:30px; text-align:center; color:var(--dim); font-size:14px;}

/* --- visual-overhaul polish ------------------------------------------------ */
/* faint CRT scanlines over menu screens (never over gameplay; .screen hides while playing) */
.screen::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 2px, transparent 4px); }
.screen > *{ position:relative; z-index:2; }
/* accent sheen along the top of every panel */
.panel{ position:relative; overflow:hidden; }
.panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent); opacity:.7; }
/* weapon/character cards lift + glow on hover */
.card{ transition:transform .08s, border-color .15s, box-shadow .15s, background .15s; }
.card:hover{ border-color:var(--acc); box-shadow:0 0 16px rgba(255,106,61,.18); }
.charcard:hover{ box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 20px rgba(255,106,61,.22); }
.wallet{ text-shadow:0 0 14px rgba(255,207,90,.5); display:inline-flex; align-items:center; gap:8px; }
.wallet .ico{ width:20px; height:20px; color:var(--gold); }

/* ===== main menu — vertical, icon-driven (replaces the old single-row panel) ===== */
.menu-wrap{ width:100%; max-width:470px; display:flex; flex-direction:column; gap:13px; }
.brand{ text-align:center; display:flex; justify-content:center; margin-bottom:2px; }
/* ===== animated CUBEHEAD logo (replaces the old title text) ===== */
.logo-wrap{ position:relative; display:inline-block; cursor:grab; padding:8px; will-change:transform; -webkit-tap-highlight-color:transparent; touch-action:none; }
.logo-wrap:active{ cursor:grabbing; }
.logo-tilt{ transform-style:preserve-3d; will-change:transform; }
.logo-img{ display:block; width:165px; max-width:52vw; height:auto; pointer-events:none; user-select:none; will-change:filter;
  filter:drop-shadow(0 0 14px rgba(127,214,176,.55)) drop-shadow(0 0 30px rgba(111,174,154,.34)); }   /* JS (initMenuLogo) overwrites this filter every tick as a random "bulb losing power" sage flicker */
.logo-spark{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.logo-tilt.knock{ animation:logoKnock .52s cubic-bezier(.25,.9,.32,1); }
@keyframes logoFloat{   /* drift slowly around in BOTH axes (the knock recoil rides on top of this) */
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,-5px); }
  45%{ transform:translate(5px,-9px); }
  70%{ transform:translate(7px,-2px); }
  85%{ transform:translate(-3px,2px); } }
@keyframes logoFlicker{   /* still used by the brief loading-screen logo — sage-green neon flicker */
  0%,100%{ filter:drop-shadow(0 0 10px rgba(127,214,176,.45)) drop-shadow(0 0 22px rgba(111,174,154,.24)); }
  40%{ filter:drop-shadow(0 0 17px rgba(127,214,176,.72)) drop-shadow(0 0 34px rgba(111,174,154,.42)); }
  44%{ filter:drop-shadow(0 0 8px rgba(127,214,176,.34)); }
  47%{ filter:drop-shadow(0 0 15px rgba(127,214,176,.6)); }
  63%{ filter:drop-shadow(0 0 19px rgba(127,214,176,.78)) drop-shadow(0 0 40px rgba(111,174,154,.46)); }
  67%{ filter:drop-shadow(0 0 10px rgba(127,214,176,.46)); } }
@keyframes logoKnock{   /* recoil when you knock it — direction set by JS via --kdir */
  0%{ transform:rotate(0) scale(1); }
  16%{ transform:rotate(var(--kdir,7deg)) scale(.93) translateY(3px); }
  42%{ transform:rotate(calc(var(--kdir,7deg) * -0.45)) scale(1.025); }
  68%{ transform:rotate(calc(var(--kdir,7deg) * 0.18)) scale(.99); }
  100%{ transform:rotate(0) scale(1); } }
/* top-right icon-only sound toggle (sits beside the gems / account chips) */
.menu-acct .sndtog2{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
  background:#0c0e09; color:var(--acc); width:34px; height:34px; padding:0; border-radius:50%; transition:border-color .12s, box-shadow .12s, color .12s, transform .06s; }
.menu-acct .sndtog2:hover{ border-color:var(--acc2); color:var(--acc2); box-shadow:0 0 14px rgba(111,174,154,.28); transform:translateY(-1px); }
.menu-acct .sndtog2 .ico{ width:17px; height:17px; }
/* "testing feature" badges on menu buttons (Shop / Customize = Beta, Leaderboard = Coming Soon) */
.mbadge{ margin-left:auto; flex:none; align-self:center; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:#0c1410; background:var(--acc2); padding:3px 7px; border-radius:10px; line-height:1; white-space:nowrap; }
.mbadge.soon{ color:#ffe6c0; background:#4f3415; border:1px solid #835522; }
/* ===== loading screen ===== */
.loader{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:radial-gradient(900px 600px at 50% 42%, #0c1014, #050607 72%); transition:opacity .5s ease; }
.loader.hide{ opacity:0; }
.loader-logo{ width:200px; max-width:54vw; height:auto; filter:drop-shadow(0 0 16px rgba(111,174,154,.4)); animation:logoFlicker 4.6s ease-in-out infinite; }
.loader-bar{ width:268px; max-width:62vw; height:6px; background:#11161a; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.loader-fill{ width:0%; height:100%; background:linear-gradient(90deg,var(--acc2),var(--acc)); box-shadow:0 0 10px rgba(111,174,154,.5); transition:width .18s ease; }
.loader-txt{ color:var(--dim); letter-spacing:3px; font-size:11.5px; text-transform:uppercase; font-family:Consolas,monospace; }
@media (prefers-reduced-motion: reduce){ .logo-wrap,.logo-img,.loader-logo{ animation:none!important; } }
.menu-list{ display:flex; flex-direction:column; gap:11px; }
.mbtn{ display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-left:3px solid transparent; color:var(--ink);
  background:linear-gradient(180deg, rgba(19,23,17,.90), rgba(9,11,8,.90));
  padding:13px 17px; border-radius:8px; font-family:inherit;
  transition:transform .09s ease, border-color .15s, background .15s, box-shadow .15s; }
.mbtn:hover{ transform:translateX(4px); border-color:var(--acc); border-left-color:var(--acc2);
  background:linear-gradient(180deg, rgba(28,34,24,.95), rgba(13,16,11,.95));
  box-shadow:0 7px 22px rgba(0,0,0,.5), 0 0 16px rgba(111,174,154,.14); }
.mbtn:active{ transform:translateX(1px); }
.mbtn .ico{ width:27px; height:27px; flex:none; color:var(--acc); transition:color .15s; }
.mbtn:hover .ico{ color:var(--acc2); }
.mbtn-l{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mbtn-l b{ font-size:16px; font-weight:800; letter-spacing:1.2px; line-height:1.2; }
.mbtn-l i{ font-style:normal; font-size:11.5px; color:var(--dim); letter-spacing:.3px; }
.mbtn.primary{ border-color:var(--acc2); border-left-color:var(--good);
  background:linear-gradient(180deg, rgba(38,50,40,.95), rgba(16,24,18,.95));
  box-shadow:0 0 22px rgba(111,174,154,.20), inset 0 1px 0 rgba(255,255,255,.05); }
.mbtn.primary:hover{ box-shadow:0 7px 24px rgba(0,0,0,.5), 0 0 26px rgba(111,174,154,.3); }
.mbtn.primary .ico{ color:var(--good); }
.mbtn.primary .mbtn-l b{ color:#eef3ec; }
.menu-foot{ text-align:center; color:var(--dim); font-size:12px; line-height:1.9; }
.menu-foot kbd{ margin:0 1px; }

/* ===== shared icon sizing across UI chrome ===== */
.shoptab{ display:inline-flex; align-items:center; gap:7px; }
.shoptab .ico{ width:16px; height:16px; }
.sc-icon{ color:var(--acc); }
.sc-icon .ico{ width:27px; height:27px; }
.sndtog{ display:inline-flex; align-items:center; gap:7px; }
.sndtog .ico{ width:16px; height:16px; }
.lbrank{ font-weight:800; }
.lbrow.r1 .lbrank{ color:var(--gold); }
.lbrow.r2 .lbrank{ color:#cbd2d8; }
.lbrow.r3 .lbrank{ color:#cd8c52; }

/* ===== beta19: menu chrome (gems/account/mute), Settings, Customize, Account, cosmetics ===== */
.menu-acct{ position:absolute; top:16px; right:18px; display:flex; gap:8px; align-items:center; z-index:12; }
.gemchip,.acctchip{ cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#0c0e09; color:var(--ink); padding:7px 13px; border-radius:20px; font-size:14px; font-weight:800;
  font-family:Consolas,monospace; transition:border-color .12s, box-shadow .12s, transform .06s; }
.gemchip{ color:var(--acc2); border-color:#244a40; }
.gemchip:hover{ border-color:var(--acc2); box-shadow:0 0 16px rgba(111,174,154,.3); transform:translateY(-1px); }
.acctchip{ color:var(--dim); }
.acctchip:hover{ border-color:var(--acc); color:var(--ink); transform:translateY(-1px); }
.gemchip .ico,.acctchip .ico{ width:16px; height:16px; }
.gem-ico .ico{ color:var(--acc2); }
.sndtog2{ min-width:0; padding:8px 11px; border-radius:20px; }
.sndtog2 .ico{ width:17px; height:17px; }
.gemwallet{ color:var(--acc2)!important; border-color:#244a40!important; display:inline-flex; align-items:center; gap:8px; }
.gemwallet .ico{ width:20px; height:20px; }

/* Settings */
.settabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; justify-content:center; }
.setbody{ min-height:260px; max-height:58vh; overflow-y:auto; padding:2px; }
.setbody .bindlist{ max-height:none; }
.setgroup{ background:#0b0d08; border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:12px; }
.setgrouptitle{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--acc2); margin-bottom:10px; }
.setdesc{ font-size:13px; color:var(--dim); line-height:1.6; margin-bottom:14px; }
.setrow{ margin-bottom:14px; }
.sethead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.setlabel{ font-size:14px; font-weight:700; }
.setval{ font-family:Consolas,monospace; color:var(--gold); font-size:13px; }
.setrow input[type=range]{ width:100%; accent-color:var(--acc2); height:5px; }
.gfxrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gfxbtn{ cursor:pointer; border:1px solid var(--line); background:#0c0e09; color:var(--ink); border-radius:8px;
  padding:18px 10px; display:flex; flex-direction:column; gap:5px; align-items:center; transition:border-color .12s, box-shadow .12s, transform .06s; }
.gfxbtn b{ font-size:18px; letter-spacing:1px; }
.gfxbtn i{ font-size:12px; color:var(--dim); font-style:normal; }
.gfxbtn:hover{ border-color:var(--acc); transform:translateY(-2px); }
.gfxbtn.on{ border-color:var(--acc2); background:#141b14; box-shadow:inset 0 0 16px rgba(111,174,154,.22); }
.gfxbtn.on i{ color:var(--acc2); }

/* Customize */
.customwrap{ display:grid; grid-template-columns:280px 1fr; gap:18px; align-items:start; }
.custompreview{ width:260px; height:300px; background:#0a0d12; border:1px solid var(--line); border-radius:8px; justify-self:center; cursor:grab; touch-action:none; }
.custompreview:active{ cursor:grabbing; }
.customcols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-height:54vh; overflow-y:auto; }
.customcol{ background:#0b0d08; border:1px solid var(--line); border-radius:8px; padding:12px; }
.customlabel{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--acc2); margin-bottom:9px; }
.customlist{ display:flex; flex-direction:column; gap:6px; }
.customitem{ cursor:pointer; display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:#0c0e09;
  color:var(--ink); border-radius:8px; padding:7px 10px; font-size:13px; font-weight:600; text-align:left; transition:border-color .12s, background .12s; }
.customitem:hover{ border-color:var(--acc); }
.customitem.on{ border-color:var(--acc2); background:#141b14; box-shadow:inset 0 0 12px rgba(111,174,154,.2); }
.customitem.locked{ opacity:.6; }
.ci-sw{ width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.2); flex:none; }
.ci-name{ flex:1; }
.ci-lock{ font-family:Consolas,monospace; font-size:11px; color:var(--acc2); }

/* cosmetic shop card swatch */
.sc-swatch{ width:30px; height:30px; border-radius:7px; border:1px solid rgba(255,255,255,.18); flex:none; display:inline-block; }

/* Mobile gameplay controls */
.mobile-controls{ position:absolute; inset:0; z-index:8; pointer-events:none; display:none; -webkit-tap-highlight-color:transparent; }
body.touch-mode.in-game .mobile-controls{ display:block; }
.touch-stick{ position:absolute; width:118px; height:118px; border:1px solid rgba(159,178,176,.38); border-radius:50%; background:rgba(6,8,10,.38); box-shadow:0 12px 36px rgba(0,0,0,.38), inset 0 0 22px rgba(111,174,154,.10); pointer-events:auto; touch-action:none; }
.touch-stick span{ position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:linear-gradient(180deg,rgba(207,214,207,.78),rgba(122,136,130,.78)); border:1px solid rgba(255,255,255,.24); box-shadow:0 0 18px rgba(111,174,154,.26); transform:translate(0,0); }
.touch-move{ left:18px; bottom:22px; }
.touch-aim{ right:18px; bottom:22px; }
.touch-actions{ position:absolute; right:28px; bottom:154px; display:grid; grid-template-columns:50px 50px; gap:9px; pointer-events:none; }
.touch-btn{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(159,178,176,.42); border-radius:8px; background:rgba(10,12,7,.72); color:var(--ink); font-size:26px; font-weight:900; pointer-events:auto; touch-action:none; box-shadow:0 10px 24px rgba(0,0,0,.34); }
.touch-btn .ico{ width:22px; height:22px; }
.touch-btn:active,.touch-btn.held{ background:rgba(31,44,34,.86); border-color:var(--acc2); color:var(--acc2); transform:translateY(1px); }
.touch-dash{ color:var(--gold); }
.touch-pause{ color:var(--acc); }

/* Account */
.acctbody{ display:flex; flex-direction:column; gap:10px; }
.acctform{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.acctinput{ border:1px solid var(--line); background:#0a0c07; color:var(--ink); border-radius:8px; padding:11px 13px; font-size:15px; font-family:inherit; }
.acctinput:focus{ outline:none; border-color:var(--acc2); }
.acctinfo{ background:#0b0d08; border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-size:16px; line-height:1.5; }

/* item 11/12: keep the shop the SAME height across Weapons/Gear/Upgrades (Gear no longer collapses the panel); per-section scroll */
.shopgrid{ min-height:48vh; align-content:start; }
.tabkey{ display:inline-block; background:#0a0c07; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px;
  padding:0 5px; font-family:Consolas,monospace; font-size:11px; color:var(--acc2); margin-left:3px; vertical-align:middle; }

/* DEV cheats panel (dev-only) */
.cheatrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cheatbtn{ cursor:pointer; border:1px solid var(--line); background:#0c0e09; color:var(--ink); padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:700; letter-spacing:.5px; transition:border-color .12s, background .12s, box-shadow .12s; }
.cheatbtn:hover{ border-color:var(--acc); }
.cheatbtn.on{ border-color:var(--bad); background:#241011; color:#ffb0ac; box-shadow:inset 0 0 12px rgba(214,64,58,.25); }
.cheatbtn.act{ border-color:#3a4a2a; }
.cheatbtn.act:hover{ background:#1a2113; border-color:var(--acc2); box-shadow:0 0 12px rgba(111,174,154,.25); }

/* beta21: game version centered at the bottom of the menu (replaces the old credit line); small top-right sound icon */
.menu-version{ position:absolute; bottom:12px; left:0; width:100%; text-align:center; color:var(--dim); font-size:11px; letter-spacing:2px; font-family:Consolas,monospace; z-index:9; opacity:.55; pointer-events:none; }
.sndtog2{ min-width:0; padding:7px 9px; border-radius:50%; }

/* Responsive: keep every DOM screen + chrome usable at any window size (auto-adjust on resize) */
@media (max-width: 900px){
  .panel{ max-width:95vw !important; padding:18px 16px; }
  h1.title{ font-size:46px; letter-spacing:5px; }
  .menu-acct{ top:10px; right:10px; gap:6px; }
  .gemchip,.acctchip{ padding:6px 10px; font-size:13px; }
  .customwrap{ grid-template-columns:1fr; }
  .custompreview{ width:220px; height:250px; }
  .touch-stick{ width:108px; height:108px; }
  .touch-stick span{ width:40px; height:40px; margin:-20px 0 0 -20px; }
  .touch-actions{ right:24px; bottom:142px; grid-template-columns:46px 46px; gap:8px; }
  .touch-btn{ width:46px; height:46px; }
}
@media (max-width: 560px){
  h1.title{ font-size:36px; letter-spacing:3px; }
  .mbtn{ padding:10px 12px; }
  .howcols,.customcols{ grid-template-columns:1fr; }
  .touch-move{ left:14px; bottom:18px; }
  .touch-aim{ right:14px; bottom:18px; }
  .touch-actions{ right:18px; bottom:132px; }
}
@media (max-height: 620px){
  .brand{ margin-bottom:6px; }
  h1.title{ font-size:36px; }
  .sub{ margin-bottom:10px; }
  .menu-version{ bottom:6px; }
}
/* short windows / mobile: shrink the logo + tighten the menu so the 8 items + centered mute fit without colliding the version */
@media (max-height: 880px){
  .menu-wrap{ gap:9px; max-width:440px; }
  .logo-img{ width:150px; }
  .mbtn{ padding:9px 15px; }
  .menu-mute{ margin:1px 0 10px; }
}
@media (max-height: 700px){
  #menu{ justify-content:flex-start; padding-top:10px; padding-bottom:10px; }
  .brand{ margin-bottom:0; }
  .logo-img{ width:96px; }
  .mbtn-l i{ display:none; }   /* drop the per-item subtitles to claw back vertical space */
  .mbtn{ padding:6px 12px; gap:10px; }
  .mbtn-l b{ font-size:15px; }
  .menu-list{ gap:6px; }
  .menu-wrap{ gap:5px; }
  .menu-version{ display:none; }
}