/* ============================================================
   Crystal Survivors — FF-style menu chrome & screens
   ============================================================ */
:root{
  --bg:#070b1e;
  --menu-hi:#2d44c8; --menu-mid:#16249a; --menu-lo:#0a1158;
  --border:#e8ecff; --border-dim:#8a94c8;
  --text:#eef1ff; --text-dim:#aab3e0;
  --gold:#ffd24a; --red:#ff5a6a; --green:#58e077; --blue:#4aa3ff;
  --purple:#b07bff; --orange:#ff9b2f;
  --c-common:#cfd6ea; --c-rare:#4aa3ff; --c-epic:#b07bff; --c-legendary:#ffd24a;
  --font-pixel:'VT323', 'Courier New', monospace;
  --font-logo:'Cinzel', 'Times New Roman', serif;
}
*{box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-user-select:none;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
body{font-family:var(--font-pixel); color:var(--text); font-size:22px; line-height:1.25;}

#game{position:fixed; inset:0; width:100vw; height:100vh; display:block; background:var(--bg); image-rendering:pixelated;}

/* ---------- overlays ---------- */
#vignette{position:fixed; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(2,4,16,.55) 100%);
  transition:box-shadow .25s;}
#vignette.hurt{box-shadow:inset 0 0 140px 50px rgba(255,30,50,.45);}
#vignette.lowhp{animation:lowhpPulse 1.1s ease-in-out infinite;}
@keyframes lowhpPulse{0%,100%{box-shadow:inset 0 0 110px 26px rgba(255,30,50,.22);} 50%{box-shadow:inset 0 0 150px 42px rgba(255,30,50,.4);}}
#flash{position:fixed; inset:0; pointer-events:none; z-index:6; background:#fff; opacity:0; }
#banner{position:fixed; left:0; right:0; top:26%; z-index:7; text-align:center; pointer-events:none;
  text-shadow:0 0 18px rgba(120,160,255,.8), 2px 2px 0 #000;}
#banner-text{font-size:64px; letter-spacing:8px; color:#fff; font-weight:bold;}
#banner-sub{font-size:26px; color:var(--gold); letter-spacing:3px; margin-top:4px;}
#banner.boss #banner-text{color:#ff6a6a; text-shadow:0 0 22px rgba(255,60,60,.9), 2px 2px 0 #000;}
#banner{opacity:0; transform:scale(1.15);}
#banner.show{animation:bannerIn 2.6s ease-out forwards;}
@keyframes bannerIn{
  0%{opacity:0; transform:scale(1.25); letter-spacing:18px;}
  12%{opacity:1; transform:scale(1);}
  78%{opacity:1;}
  100%{opacity:0; transform:scale(.98);}
}
#toasts{position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:7; pointer-events:none;
  display:flex; flex-direction:column; gap:6px; align-items:center;}
.toast{background:linear-gradient(180deg,var(--menu-hi),var(--menu-lo)); border:2px solid var(--border);
  border-radius:6px; padding:4px 18px; font-size:20px; box-shadow:0 4px 14px rgba(0,0,0,.5);
  animation:toastIn .25s ease-out, toastOut .4s ease-in forwards; animation-delay:0s, var(--life,2.4s);}
@keyframes toastIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px);}}

#fps{position:fixed; right:8px; bottom:6px; z-index:9; font-size:16px; color:#7f8; opacity:.8;}

/* ---------- screens ---------- */
.hidden{display:none !important;}
.screen{position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;}
.screen.hud{pointer-events:none; z-index:8; display:block;}
.screen.modal{background:rgba(4,6,20,.72); backdrop-filter:blur(3px);}
.modal-inner{display:flex; flex-direction:column; align-items:center; gap:14px; max-width:880px; width:92%;}
.modal-inner.wide{max-width:1060px;}
.screen-title{font-family:var(--font-logo); font-size:40px; letter-spacing:4px; color:#fff;
  text-shadow:0 0 16px rgba(110,150,255,.7), 2px 2px 0 #000;}
.screen-title.gold{color:var(--gold); text-shadow:0 0 18px rgba(255,210,74,.55), 2px 2px 0 #000;}
.screen-title.red{color:var(--red); text-shadow:0 0 18px rgba(255,60,80,.6), 2px 2px 0 #000;}
.gold{color:var(--gold);} .red{color:var(--red);} .green{color:var(--green);}
.blink{animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:.15;}}

/* ---------- the classic FF window ---------- */
.ff-window{
  background:linear-gradient(168deg, var(--menu-hi) 0%, var(--menu-mid) 45%, var(--menu-lo) 100%);
  border:2px solid var(--border); border-radius:8px;
  box-shadow:0 0 0 2px #1a2040, 0 6px 22px rgba(0,0,0,.55), inset 0 0 26px rgba(10,16,70,.6);
  padding:12px 16px; position:relative;
}
.ff-window::after{content:""; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.22); border-radius:5px; pointer-events:none;}

/* ---------- buttons ---------- */
button{font-family:var(--font-pixel); color:var(--text); cursor:pointer; background:none; border:none; font-size:22px;}
.menu-item{display:block; width:100%; text-align:left; padding:7px 14px 7px 34px; font-size:28px; position:relative; border-radius:4px;}
.menu-item:hover, .menu-item.sel{background:rgba(255,255,255,.12);}
.menu-item:hover::before, .menu-item.sel::before{content:"\25B8"; position:absolute; left:10px; color:var(--gold);}
.big-btn{background:linear-gradient(180deg,#3550e0,#16249a); border:2px solid var(--border); border-radius:8px;
  font-size:30px; padding:10px 38px; letter-spacing:3px; box-shadow:0 4px 16px rgba(20,40,160,.5);
  transition:transform .08s, box-shadow .08s;}
.big-btn.slim{font-size:22px; padding:6px 22px;}
.big-btn:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 22px rgba(60,100,255,.6); background:linear-gradient(180deg,#4a66ff,#2336c0);}
.big-btn:disabled{opacity:.4; cursor:default;}
.small-btn{background:linear-gradient(180deg,#2a3cb0,#101a70); border:2px solid var(--border-dim); border-radius:6px;
  font-size:20px; padding:5px 16px;}
.small-btn:hover:not(:disabled){border-color:var(--border); background:linear-gradient(180deg,#3850d8,#1a2690);}
.small-btn:disabled{opacity:.4; cursor:default;}
.small-btn.danger{border-color:#a05060;} .small-btn.danger:hover{background:linear-gradient(180deg,#b04050,#701a2a); border-color:#ff8090;}

/* ---------- boot ---------- */
#s-boot{background:radial-gradient(ellipse at 50% 40%, #101b4a 0%, var(--bg) 70%);}
.boot-center{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;}
.boot-crystal{width:54px; height:78px; background:linear-gradient(160deg,#bfeaff,#4aa3ff 45%,#1a3cb0);
  clip-path:polygon(50% 0%, 100% 30%, 78% 100%, 22% 100%, 0% 30%);
  animation:crystalFloat 2.6s ease-in-out infinite; box-shadow:0 0 50px 12px rgba(90,160,255,.5);}
@keyframes crystalFloat{0%,100%{transform:translateY(0) ;} 50%{transform:translateY(-12px);}}
.boot-title{font-family:var(--font-logo); font-size:34px; letter-spacing:6px; color:#cfe0ff;}
.boot-hint{font-size:26px; color:var(--gold); letter-spacing:2px;}
.boot-foot{font-size:18px; color:var(--text-dim);}

/* ---------- title ---------- */
#s-title{flex-direction:column;}
.title-wrap{display:flex; flex-direction:column; align-items:center; gap:26px;}
.title-logo{text-align:center;}
.title-final{font-family:var(--font-logo); font-weight:800; font-size:30px; letter-spacing:14px; color:#9fb4ff;
  text-shadow:0 0 14px rgba(110,150,255,.6);}
.title-main{font-family:var(--font-logo); font-weight:800; font-size:74px; letter-spacing:6px;
  background:linear-gradient(180deg, #ffffff 18%, #ffd24a 48%, #b86f1f 62%, #ffe9a0 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 #2a1a05) drop-shadow(0 0 26px rgba(255,200,80,.35));}
.title-tag{margin-top:10px; font-size:22px; color:var(--text-dim); letter-spacing:2px;}
.title-menu{min-width:320px; padding:14px 10px;}
.title-foot{font-size:16px; color:#6a74a8; text-align:center; max-width:640px;}

/* ---------- job select ---------- */
#s-jobs{flex-direction:column;}
.jobs-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; width:min(1100px,94vw); max-height:98vh; overflow-y:auto; padding:8px 4px;}
.jobs-wrap .screen-title{font-size:32px;}
#job-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%;}
.job-card{background:linear-gradient(168deg,#1c2a86,#0a1158); border:2px solid var(--border-dim); border-radius:8px;
  padding:8px 8px 6px; text-align:center; cursor:pointer; transition:transform .1s, border-color .1s, box-shadow .1s; position:relative;}
.job-card:hover{transform:translateY(-3px); border-color:var(--border);}
.job-card.sel{border-color:var(--gold); box-shadow:0 0 18px rgba(255,210,74,.45); transform:translateY(-3px);}
.job-card canvas{width:54px; height:72px; image-rendering:pixelated;}
.job-name{font-size:22px; color:#fff;}
.job-blurb{font-size:16px; color:var(--text-dim);}
.job-best{font-size:14px; color:var(--gold); min-height:16px;}
.job-detail{width:100%; min-height:84px; font-size:19px; padding:8px 14px;}
#job-detail-body{display:flex; gap:26px; align-items:center;}
#job-detail-body .jd-col{flex:1;}
.jd-name{font-size:28px; color:var(--gold);}
.jd-limit{color:var(--orange);}
.jd-stats span{display:inline-block; margin-right:14px;}
.stat-up{color:var(--green);} .stat-down{color:var(--red);}
.jobs-bottom{display:flex; gap:18px; align-items:center;}
.diff-box{display:flex; gap:12px; align-items:center; padding:8px 14px;}
.diff-label{color:var(--text-dim);}
.diff-btn{border:2px solid var(--border-dim); border-radius:6px; padding:3px 14px; font-size:20px;}
.diff-btn.sel{border-color:var(--gold); color:var(--gold); background:rgba(255,210,74,.1);}

/* ---------- scanlines (retro CRT, toggleable) ---------- */
#scanlines{position:fixed; inset:0; pointer-events:none; z-index:6; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,10,.15) 0px, rgba(0,0,10,.15) 1px, transparent 1px, transparent 3px);}

/* ---------- HUD ---------- */
.hud-topleft{position:absolute; left:16px; top:14px; display:grid; grid-template-columns:62px 1fr; grid-template-rows:auto auto; gap:4px 8px; width:330px; align-items:start;}
.portrait-box{grid-row:1; width:62px; height:62px; background:linear-gradient(168deg,var(--menu-hi),var(--menu-lo));
  border:2px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #1a2040, inset 0 0 14px rgba(10,16,70,.6);}
#portrait{width:56px; height:56px; image-rendering:pixelated;}
.hud-bars{grid-row:1; display:flex; flex-direction:column; gap:5px;}
#buff-row{grid-column:1 / -1;}
.bar{position:relative; height:24px; background:rgba(5,8,30,.75); border:2px solid var(--border); border-radius:5px; overflow:hidden;}
.bar-fill{position:absolute; inset:0; width:100%; transform-origin:left; transition:transform .12s linear; border-radius:2px;}
.hp-bar .bar-fill{background:linear-gradient(180deg,#8effa8,#2fae57);}
.hp-bar.low .bar-fill{background:linear-gradient(180deg,#ff9a8a,#c83a2f); animation:hpPulse .6s infinite;}
@keyframes hpPulse{50%{filter:brightness(1.5);}}
.limit-bar{height:18px;}
.limit-bar .bar-fill{background:linear-gradient(180deg,#ffd28a,#ff7b1f);}
.limit-bar.full{border-color:var(--gold); animation:limitGlow .7s infinite;}
.limit-bar.full .bar-text{color:#fff; text-shadow:0 0 8px #ff9b2f;}
@keyframes limitGlow{50%{box-shadow:0 0 16px rgba(255,155,47,.9);}}
.xp-bar{height:14px;}
.xp-bar .bar-fill{background:linear-gradient(180deg,#9fd0ff,#2a6ad8);}
.bar-text{position:absolute; inset:0; text-align:center; font-size:17px; line-height:20px; color:#fff; text-shadow:1px 1px 0 #000; letter-spacing:1px;}
.xp-bar .bar-text{line-height:11px; font-size:14px;}
.limit-bar .bar-text{line-height:15px; font-size:14px;}
#buff-row{display:flex; gap:6px; margin-top:2px;}
.buff-chip{font-size:15px; padding:1px 8px; border-radius:4px; border:1px solid var(--border-dim); background:rgba(10,16,60,.8); color:var(--gold);}
.hud-topcenter{position:absolute; left:50%; top:10px; transform:translateX(-50%); text-align:center;}
#wave-num{font-size:26px; letter-spacing:4px; color:#cfe0ff; text-shadow:2px 2px 0 #000;}
#wave-timer{font-size:44px; color:#fff; text-shadow:0 0 12px rgba(120,160,255,.7), 2px 2px 0 #000; line-height:.9;}
#wave-timer.final{color:var(--red); animation:blink .5s steps(2) infinite;}
.hud-topright{position:absolute; right:16px; top:14px; text-align:right; display:flex; flex-direction:column; gap:4px;}
.hud-stat{font-size:26px; text-shadow:2px 2px 0 #000; display:flex; gap:8px; justify-content:flex-end; align-items:center;}
.gil-ico{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff0a0, #ffd24a 50%, #a06a10); display:inline-block; box-shadow:0 0 6px rgba(255,210,74,.8);}
.skull-ico{width:14px; height:14px; display:inline-block; background:#dfe6ff; clip-path:polygon(20% 0,80% 0,100% 45%,85% 60%,85% 100%,60% 80%,40% 100%,15% 100%,15% 60%,0 45%); opacity:.9;}
.hud-bottomleft{position:absolute; left:16px; bottom:14px; display:flex; gap:8px;}
.weap-slot{width:52px; height:52px; background:rgba(6,10,36,.8); border:2px solid var(--border-dim); border-radius:7px; position:relative; display:flex; align-items:center; justify-content:center;}
.weap-slot canvas{width:40px; height:40px; image-rendering:pixelated;}
.weap-slot .tier{position:absolute; right:2px; bottom:0px; font-size:15px; color:var(--gold); text-shadow:1px 1px 0 #000;}
.weap-slot.cd::after{content:""; position:absolute; inset:0; background:rgba(0,0,30,.55); transform-origin:bottom; transform:scaleY(var(--cd,0)); border-radius:4px;}
.weap-slot.t2{border-color:#4aa3ff;} .weap-slot.t3{border-color:#b07bff;} .weap-slot.t4{border-color:var(--gold); box-shadow:0 0 10px rgba(255,210,74,.4);}
.hud-bossbar{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:min(620px,70vw); text-align:center;}
#boss-name{font-size:24px; letter-spacing:5px; color:#ff8a8a; text-shadow:2px 2px 0 #000;}
.boss-hp{height:18px; border-color:#ff8a8a;}
.boss-hp .bar-fill{background:linear-gradient(180deg,#ff8a7a,#b01a2a);}

/* ---------- cards (levelup/chest/shop) ---------- */
.card-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.lv-sub{color:var(--text-dim); font-size:22px;}
.pick-card{width:190px; min-height:225px; background:linear-gradient(168deg,#222f96,#0a1158); border:2px solid var(--c-common);
  border-radius:10px; padding:10px 9px; text-align:center; cursor:pointer; position:relative;
  transition:transform .1s, box-shadow .1s; display:flex; flex-direction:column; align-items:center; gap:5px;}
.pick-card:hover{transform:translateY(-5px) scale(1.02);}
.pick-card .rarity{font-size:15px; letter-spacing:2px; text-transform:uppercase;}
.pick-card.r-common{border-color:var(--c-common);} .pick-card.r-common .rarity{color:var(--c-common);}
.pick-card.r-rare{border-color:var(--c-rare); box-shadow:0 0 14px rgba(74,163,255,.3);} .pick-card.r-rare .rarity{color:var(--c-rare);}
.pick-card.r-epic{border-color:var(--c-epic); box-shadow:0 0 16px rgba(176,123,255,.4);} .pick-card.r-epic .rarity{color:var(--c-epic);}
.pick-card.r-legendary{border-color:var(--c-legendary); box-shadow:0 0 20px rgba(255,210,74,.5);} .pick-card.r-legendary .rarity{color:var(--c-legendary);}
.pick-card:hover.r-legendary{box-shadow:0 0 30px rgba(255,210,74,.8);}
.pick-card .card-icon{width:64px; height:64px; display:flex; align-items:center; justify-content:center;}
.pick-card .card-icon canvas{width:56px; height:56px; image-rendering:pixelated;}
.pick-card .card-name{font-size:23px; color:#fff; line-height:1.05;}
.pick-card .card-desc{font-size:17px; color:var(--text-dim); flex:1;}
.pick-card .card-price{font-size:22px; color:var(--gold); display:flex; align-items:center; gap:6px; justify-content:center;}
.pick-card.owned-flash{animation:buyFlash .4s;}
@keyframes buyFlash{0%{filter:brightness(2.2);} 100%{filter:none;}}
.pick-card.sold{opacity:.35; pointer-events:none;}
.pick-card .lock-btn{position:absolute; top:4px; right:6px; font-size:18px; opacity:.55;}
.pick-card .lock-btn:hover{opacity:1;}
.pick-card.locked .lock-btn{opacity:1; color:var(--gold);}
.pick-card .tag{font-size:14px; color:#9fb0e8;}
.pick-card.cant{filter:saturate(.4) brightness(.75);}
.pick-card.cant .card-price{color:var(--red);}

/* ---------- shop layout ---------- */
#s-shop{background:rgba(4,6,20,.82); backdrop-filter:blur(4px);}
.shop-wrap{width:min(1150px,96vw); display:flex; flex-direction:column; gap:12px; max-height:96vh;}
.shop-head{display:flex; align-items:center; gap:18px;}
.shop-title{font-family:var(--font-logo); font-size:34px; color:var(--gold); letter-spacing:3px; text-shadow:2px 2px 0 #000;}
.kupo{font-size:20px; color:#ffaad4; font-family:var(--font-pixel); letter-spacing:1px;}
.shop-wave{color:var(--text-dim); font-size:22px; flex:1;}
.shop-gil{display:flex; align-items:center; gap:8px; font-size:26px; padding:6px 16px;}
.shop-main{display:flex; gap:14px; min-height:0;}
.shop-left{flex:1.25; display:flex; flex-direction:column; gap:8px;}
.shop-stock{align-content:flex-start; gap:10px;}
.shop-hint{font-size:16px; color:var(--text-dim); text-align:center;}
.shop-right{flex:1; display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:62vh; padding-right:2px;}
.shop-panel{padding:8px 12px;}
.panel-title{color:var(--gold); font-size:21px; letter-spacing:1px; margin-bottom:4px; display:flex; justify-content:space-between;}
.panel-hint{font-size:15px; color:var(--text-dim); margin-top:4px;}
.inv-row{display:flex; align-items:center; gap:8px; padding:2px 4px; font-size:19px; border-radius:4px;}
.inv-row:hover{background:rgba(255,255,255,.07);}
.inv-row canvas{width:26px; height:26px; image-rendering:pixelated;}
.inv-row .iname{flex:1;}
.inv-row .icount{color:var(--text-dim);}
.inv-row .combine-btn{font-size:15px; border:1px solid var(--gold); color:var(--gold); border-radius:4px; padding:0 8px;}
.inv-row .combine-btn:hover{background:rgba(255,210,74,.15);}
.inv-row .tier-pips{color:var(--gold); font-size:14px; letter-spacing:2px;}
#shop-next{align-self:center;}

/* ---------- stats grid ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px 22px; font-size:20px;}
.stats-grid.small{font-size:17px;}
.stat-row{display:flex; justify-content:space-between; gap:10px; padding:1px 2px;}
.stat-row .sname{color:var(--text-dim);}
.stat-row .sval{color:#fff;}
.stat-row .sval.pos{color:var(--green);} .stat-row .sval.neg{color:var(--red);}

/* ---------- pause ---------- */
.tab-row{display:flex; gap:8px;}
.tab-btn{border:2px solid var(--border-dim); border-radius:6px 6px 0 0; padding:4px 22px; font-size:21px; background:rgba(10,16,60,.6);}
.tab-btn.sel{border-color:var(--gold); color:var(--gold); background:rgba(255,210,74,.08);}
.tab-page{width:100%;}
.pause-cols{display:flex; gap:12px; width:100%;}
.pause-panel{flex:1; min-height:240px; max-height:52vh; overflow-y:auto;}
.pause-actions{display:flex; gap:16px; align-items:center;}

/* ---------- results / records / help ---------- */
.over-quote{color:var(--text-dim); font-size:24px; font-style:italic;}
.result-panel{min-width:520px;}
.end-actions{display:flex; gap:16px; align-items:center;}
.records-panel{width:100%; max-height:60vh; overflow-y:auto;}
.records-table{width:100%; border-collapse:collapse; font-size:20px;}
.records-table th{color:var(--gold); text-align:left; padding:4px 10px; border-bottom:1px solid var(--border-dim); letter-spacing:1px;}
.records-table td{padding:3px 10px; border-bottom:1px solid rgba(138,148,200,.25);}
.records-total{margin-top:10px; color:var(--text-dim); font-size:19px;}
.help-panel{width:100%;}
.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; font-size:20px; padding:6px;}

/* ---------- settings ---------- */
.set-row{display:flex; align-items:center; gap:14px; padding:6px 4px; font-size:21px;}
.set-row label{width:190px; color:var(--text-dim);}
.set-row input[type=range]{flex:1; accent-color:var(--gold); height:6px;}
.set-row .set-val{width:54px; text-align:right;}
.chk{display:inline-block; width:22px; height:22px; border:2px solid var(--border-dim); border-radius:4px; position:relative; cursor:pointer; background:rgba(5,8,30,.6);}
.chk.on{border-color:var(--gold);}
.chk.on::after{content:"\2713"; position:absolute; inset:-3px 0 0 3px; color:var(--gold); font-size:22px;}

/* ---------- music room ---------- */
.musicroom{width:100%;}
.mr-sub{font-size:20px; color:var(--text-dim); letter-spacing:1px; font-family:var(--font-pixel);}
.mr-row{display:flex; gap:10px; align-items:center; margin:6px 0; flex-wrap:wrap;}
.mr-row label{color:var(--text-dim);}
#mr-track{font-family:var(--font-pixel); font-size:20px; background:#0a1158; color:var(--text); border:2px solid var(--border-dim); border-radius:6px; padding:3px 8px;}
#mr-code{width:100%; height:max(160px, calc(52vh - 200px)); background:#05081f; color:#9fe8c0; border:2px solid var(--border-dim); border-radius:8px;
  font-family:'Consolas','Courier New',monospace; font-size:15px; line-height:1.45; padding:10px; resize:vertical; user-select:text; -webkit-user-select:text; white-space:pre; tab-size:2;}
#mr-code:focus{outline:none; border-color:var(--gold);}
.mr-status{font-size:18px; color:var(--text-dim);}
.mr-status.ok{color:var(--green);} .mr-status.err{color:var(--red);}
.mr-hint{font-size:16px; color:var(--text-dim); margin-top:4px;}
.mr-hint a{color:var(--blue);}

/* ---------- touch controls ---------- */
#game{touch-action:none;}
.touch-only{display:none !important;}
body.touch .touch-only{display:flex !important;}
.touch-btn{position:absolute; pointer-events:auto; align-items:center; justify-content:center;
  border-radius:50%; border:3px solid var(--border-dim); background:rgba(10,16,60,.65);
  color:var(--text-dim); font-size:20px; letter-spacing:1px; z-index:9;
  -webkit-tap-highlight-color:transparent;}
#touch-limit{right:18px; bottom:84px; width:92px; height:92px;}
#touch-limit.ready{border-color:var(--orange); color:#fff; background:rgba(255,123,31,.35);
  box-shadow:0 0 22px rgba(255,155,47,.8); animation:limitGlow .7s infinite;}
#touch-pause{right:18px; top:84px; width:48px; height:48px; font-size:16px;}
#stick-base, #stick-knob{position:fixed; z-index:9; pointer-events:none; display:none;
  transform:translate(-50%,-50%); border-radius:50%;}
#stick-base.on, #stick-knob.on{display:block;}
#stick-base{width:112px; height:112px; border:3px solid rgba(232,236,255,.35); background:rgba(10,16,60,.25);}
#stick-knob{width:46px; height:46px; background:rgba(232,236,255,.5); box-shadow:0 0 12px rgba(120,160,255,.6);}

/* ---------- small screens ---------- */
@media (max-width:760px){
  body{font-size:19px;}
  .hud-topleft{width:180px; gap:4px;}
  .bar{height:18px;} .limit-bar{height:14px;} .xp-bar{height:10px;}
  .bar-text{font-size:13px; line-height:15px;}
  .limit-bar .bar-text, .xp-bar .bar-text{font-size:11px; line-height:11px;}
  #wave-num{font-size:18px; letter-spacing:2px;}
  #wave-timer{font-size:30px;}
  .hud-stat{font-size:19px;}
  .weap-slot{width:38px; height:38px;} .weap-slot canvas{width:30px; height:30px;}
  .title-main{font-size:38px;} .title-final{font-size:18px; letter-spacing:8px;}
  .screen-title{font-size:26px;}
  #job-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .pick-card{width:150px; min-height:195px;}
  .pick-card .card-name{font-size:19px;} .pick-card .card-desc{font-size:14px;}
  .pause-cols{flex-direction:column;}
  .stats-grid{grid-template-columns:1fr;}
  .modal-inner{gap:8px;}
  .result-panel{min-width:0; width:100%;}
  #banner-text{font-size:36px; letter-spacing:4px;}
  #banner-sub{font-size:18px;}
  .hud-bossbar{width:80vw;}
}

/* ---------- misc ---------- */
.hiddenv{visibility:hidden;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#0a1040;}
::-webkit-scrollbar-thumb{background:#2a3cb0; border-radius:5px; border:2px solid #0a1040;}
@media (max-width:980px){
  #job-grid{grid-template-columns:repeat(2,1fr);}
  .help-grid{grid-template-columns:1fr;}
  .shop-main{flex-direction:column;}
  .title-main{font-size:52px;}
}