:root{
  --accent:#38f2c8; --accent2:#ff3d81; --gold:#ffd23a; --bg:#0b0e14;
  --panel:rgba(14,18,28,.86); --text:#e8f1ff; --dim:#8ba0bb;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
#crosshair .t{position:absolute;background:var(--accent);box-shadow:0 0 6px rgba(56,242,200,.9)}
#crosshair .t.up{left:50%;top:calc(50% - var(--gap,10px) - 8px);width:2px;height:8px;transform:translateX(-50%)}
#crosshair .t.dn{left:50%;top:calc(50% + var(--gap,10px));width:2px;height:8px;transform:translateX(-50%)}
#crosshair .t.lf{top:50%;left:calc(50% - var(--gap,10px) - 8px);height:2px;width:8px;transform:translateY(-50%)}
#crosshair .t.rt{top:50%;left:calc(50% + var(--gap,10px));height:2px;width:8px;transform:translateY(-50%)}
#crosshair .dot{position:absolute;left:50%;top:50%;width:2px;height:2px;background:var(--accent);transform:translate(-50%,-50%);border-radius:50%}
#crosshair.hit .t{background:#fff}

#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:22px;height:22px;opacity:0}
#hitmarker::before,#hitmarker::after{content:"";position:absolute;background:#fff;box-shadow:0 0 6px #fff}
#hitmarker::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#hitmarker::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
#hitmarker.show{animation:hit .25s ease-out}
#hitmarker.kill::before,#hitmarker.kill::after{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
@keyframes hit{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.4)}}

#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.pill{background:var(--panel);border:1px solid rgba(56,242,200,.25);border-radius:999px;padding:5px 13px;
  font-size:13px;display:flex;gap:7px;align-items:center;backdrop-filter:blur(6px)}
.pill .lbl{color:var(--dim);font-size:10px;letter-spacing:.13em}
.pill .val{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.pill.gold .val{color:var(--gold)}
.pill.pts{background:rgba(255,210,58,.14);border-color:rgba(255,210,58,.5)}

#objective{position:absolute;top:78px;left:50%;transform:translateX(-50%);text-align:center;
  font-size:15px;letter-spacing:.06em;color:#cfe0ff;text-shadow:0 2px 10px #000;max-width:70vw}
#objective small{display:block;color:var(--dim);font-size:12px;letter-spacing:.12em}

#killfeed{position:absolute;top:112px;right:16px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.kf{background:rgba(10,14,22,.7);border-left:3px solid var(--accent2);padding:3px 9px;font-size:12px;
  border-radius:4px;animation:kfin .2s ease-out}
@keyframes kfin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

#notif{position:absolute;top:168px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center}
.nt{background:var(--panel);border:1px solid rgba(56,242,200,.35);border-radius:8px;padding:6px 14px;font-size:13px;
  animation:ntin .25s ease-out}
.nt.gold{border-color:rgba(255,210,58,.6)}
@keyframes ntin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

#minimap-wrap{position:absolute;top:12px;right:14px;width:172px;height:172px;border-radius:12px;
  background:rgba(8,12,20,.72);border:1px solid rgba(56,242,200,.28);overflow:hidden;backdrop-filter:blur(4px)}
#minimap{width:100%;height:100%;display:block}
#mm-label{position:absolute;bottom:4px;left:8px;font-size:10px;letter-spacing:.14em;color:var(--dim)}

#bottomleft{position:absolute;left:20px;bottom:18px;display:flex;flex-direction:column;gap:7px}
.bar{width:230px;height:13px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:100%;transition:width .16s ease}
.bar.hp i{background:linear-gradient(90deg,var(--accent),#8affd8)}
.bar.ar i{background:linear-gradient(90deg,#4aa8ff,#a8d8ff)}
.bar.st i{background:linear-gradient(90deg,#ffb03a,#ffd98a)}
.bar span{position:absolute;right:8px;top:-1px;font-size:10px;color:#0b0e14;font-weight:700;line-height:13px}

#bottomright{position:absolute;right:22px;bottom:16px;text-align:right}
#weaponname{font-size:12px;letter-spacing:.16em;color:var(--dim)}
.ammo{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ammo #ammo{color:var(--text)} .ammo .slash{color:#5b6b80;margin:0 4px;font-size:24px} .ammo #reserve{color:var(--dim);font-size:20px}
#reloading{font-size:12px;letter-spacing:.2em;color:var(--accent2);margin-top:2px}

#xpwrap{position:absolute;left:50%;bottom:98px;transform:translateX(-50%);width:min(420px,60vw);text-align:center}
#xptop{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:var(--dim);margin-bottom:3px}
#xpbar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
#xpfill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#fff0a8);transition:width .2s}

#damageflash{position:absolute;inset:0;background:radial-gradient(circle,transparent 42%,rgba(255,40,80,.6));opacity:0;transition:opacity .25s}
#lowhealth{position:absolute;inset:0;box-shadow:inset 0 0 140px rgba(255,20,60,.75);opacity:0;transition:opacity .4s}
#usehint{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:var(--panel);
  border:1px solid rgba(255,210,58,.5);border-radius:8px;padding:7px 16px;font-size:13px;letter-spacing:.08em}

/* ---------- boss bar ---------- */
#bossbar{position:absolute;top:116px;left:50%;transform:translateX(-50%);width:min(460px,72vw);text-align:center}
#bossname{font-size:13px;letter-spacing:.28em;color:#ff8fa8;text-shadow:0 2px 10px #000;margin-bottom:5px}
.bbar{height:11px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,45,85,.6);overflow:hidden}
#bossfill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2d55,#ff8fa8);transition:width .2s}

/* ---------- full map ---------- */
#bigmap{position:fixed;inset:0;z-index:22;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,12,.82);backdrop-filter:blur(4px);padding:16px}
.map-inner{position:relative;background:rgba(10,15,24,.96);border:1px solid rgba(56,242,200,.3);
  border-radius:16px;padding:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);max-width:96vw;max-height:94vh}
#bigcanvas{display:block;width:100%;height:auto;border-radius:10px;background:#0a0f18}
.map-title{position:absolute;top:22px;left:26px;font-size:13px;letter-spacing:.22em;color:var(--accent);font-weight:700}
.map-title span{display:block;font-size:10px;letter-spacing:.14em;color:var(--dim);font-weight:400;margin-top:3px}
.map-legend{position:absolute;bottom:24px;left:26px;display:flex;flex-wrap:wrap;gap:6px 14px;max-width:70%}
.map-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:#c3d2e6}
.map-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---------- shop ---------- */
#shop{position:fixed;inset:0;z-index:26;display:flex;align-items:center;justify-content:center;background:rgba(4,7,12,.72)}
#shop .shop-panel{width:min(560px,92%);max-height:80vh;overflow:auto;background:var(--panel);
  border:1px solid rgba(255,210,58,.45);border-radius:16px;padding:20px}
.shop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-size:18px;letter-spacing:.1em;color:var(--gold)}
.shop-head #shop-coins{font-size:15px;color:var(--gold)}
.sh-sub{font-size:12px;color:var(--dim);margin:-8px 0 12px}
#safehouse{position:fixed;inset:0;z-index:26;display:flex;align-items:center;justify-content:center;background:rgba(4,7,12,.72)}
#safehouse .shop-panel{width:min(560px,92%);max-height:82vh;overflow:auto;background:var(--panel);
  border:1px solid rgba(56,242,200,.5);border-radius:16px;padding:20px}
#safehouse .shop-head{color:var(--accent)}
.shop-items{display:flex;flex-direction:column;gap:8px}
.shop-row{display:flex;justify-content:space-between;align-items:center;background:#121826;
  border:1px solid #26324a;border-radius:10px;padding:10px 12px}
.shop-row.dim{opacity:.45}
.shop-info b{font-size:14px} .shop-info span{display:block;font-size:11px;color:var(--dim)}
.shop-buy{pointer-events:auto;cursor:pointer;background:rgba(255,210,58,.15);border:1px solid rgba(255,210,58,.6);
  color:var(--gold);border-radius:8px;padding:7px 14px;font-weight:700;font-variant-numeric:tabular-nums}
.shop-buy:hover{background:rgba(255,210,58,.28)}
.shop-foot{margin-top:14px;text-align:center}
#shop-close{pointer-events:auto;cursor:pointer;background:#1b2536;border:1px solid #33435c;color:var(--text);
  border-radius:8px;padding:9px 20px;letter-spacing:.1em}

/* ---------- touch ---------- */
#touch{position:fixed;inset:0;z-index:15;pointer-events:none}
#stick{position:absolute;left:24px;bottom:26px;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);pointer-events:auto}
#stickknob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(56,242,200,.35);border:1px solid rgba(56,242,200,.7)}
#lookpad{position:absolute;right:0;top:0;width:52%;height:100%;pointer-events:auto}
.tbtn{position:absolute;border-radius:50%;pointer-events:auto;font-weight:800;letter-spacing:.08em;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
#tb-fire{right:26px;bottom:30px;width:96px;height:96px;font-size:15px;
  border-color:rgba(255,61,129,.65);background:rgba(255,61,129,.24);color:#ffd9e6}
#tb-aim{right:132px;bottom:52px;width:68px;height:68px;font-size:12px;border-color:rgba(56,242,200,.6);background:rgba(56,242,200,.16)}
#tb-jump{right:38px;bottom:138px;width:64px;height:64px;font-size:12px}
#tcol{position:absolute;right:14px;top:196px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.tsm{pointer-events:auto;width:52px;height:52px;border-radius:14px;font-size:12px;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.09)}
#tb-use{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);pointer-events:auto;
  padding:14px 30px;border-radius:999px;font-weight:800;letter-spacing:.1em;color:#04120e;
  background:linear-gradient(90deg,var(--gold),#fff0a8);border:none}

/* ---------- overlays ---------- */
#overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#16203a,#070a12 70%);padding:20px;text-align:center}
#overlay .panel{max-width:620px;padding:36px 32px;border-radius:20px;background:var(--panel);
  border:1px solid rgba(56,242,200,.22);box-shadow:0 30px 80px rgba(0,0,0,.6)}
#overlay h1{font-size:clamp(30px,6vw,52px);letter-spacing:.12em;font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
#overlay .sub{color:var(--dim);margin:10px 0 20px;font-size:14px;line-height:1.55}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:0 auto 22px;max-width:460px;font-size:12.5px;color:#c3d2e6;text-align:left}
kbd{background:#1b2536;border:1px solid #33435c;border-bottom-width:2px;border-radius:6px;padding:2px 7px;font-size:11px;font-family:inherit;color:#dbe7f7}
.btn{pointer-events:auto;cursor:pointer;border:none;border-radius:999px;padding:15px 42px;font-size:16px;font-weight:800;
  letter-spacing:.12em;color:#04120e;background:linear-gradient(90deg,var(--accent),#8affd8);box-shadow:0 10px 30px rgba(56,242,200,.35)}
.btn:active{transform:scale(.97)}
.hint{color:#63748c;font-size:12px;margin-top:16px;line-height:1.5}
a.back{color:var(--accent);text-decoration:none;font-size:13px;display:inline-block;margin-top:14px}

/* ---------- compass ---------- */
#compass{position:absolute;top:42px;left:50%;transform:translateX(-50%);pointer-events:none;opacity:.95}
#compassc{display:block;width:320px;height:26px}

/* ---------- damage direction ---------- */
#hitdir{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .15s;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:14px solid #ff4d6a;
  filter:drop-shadow(0 0 6px rgba(255,77,106,.9))}

/* ---------- XP floaters + banner ---------- */
#xpfloats{position:absolute;left:50%;top:44%;width:0;height:0}
.xpf{position:absolute;left:0;transform:translateX(-50%);font-size:14px;font-weight:700;color:var(--accent);
  text-shadow:0 2px 8px #000;animation:xpf .95s ease-out forwards;white-space:nowrap}
.xpf.gold{color:var(--gold)}
@keyframes xpf{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}
  25%{opacity:1;transform:translate(calc(-50% + var(--dx)),-6px) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-46px) scale(1)}}
#banner{position:absolute;top:30%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:40px;font-weight:800;letter-spacing:.16em;color:var(--gold);text-shadow:0 4px 24px rgba(0,0,0,.8)}
#banner small{display:block;font-size:14px;letter-spacing:.2em;color:#e8f1ff;margin-top:6px;font-weight:600}
#banner.pop{animation:bannerpop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerpop{0%{opacity:0;transform:translateX(-50%) scale(.7)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* ---------- debug ---------- */
#debug{position:absolute;left:12px;top:12px;font:11px/1.5 ui-monospace,Menlo,Consolas,monospace;
  color:#9fe8d4;background:rgba(6,10,16,.72);padding:8px 10px;border-radius:8px;
  border:1px solid rgba(56,242,200,.25);white-space:pre;pointer-events:none;max-width:60vw}

/* ---------- menus ---------- */
.menu-btns{display:flex;flex-direction:column;gap:9px;align-items:center;margin-top:6px}
.btn.sm{padding:11px 30px;font-size:13px;letter-spacing:.12em}
.btn.ghost{background:transparent;border:1px solid rgba(56,242,200,.45);color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:rgba(56,242,200,.12)}
#settingsmodal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,12,.8);backdrop-filter:blur(4px)}
.set-panel{width:min(560px,92%);max-height:86vh;overflow:auto;background:var(--panel);
  border:1px solid rgba(56,242,200,.4);border-radius:16px;padding:22px}
.set-panel h3{font-size:16px;letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.set-body{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.set-row{display:grid;grid-template-columns:1fr 130px 42px;gap:10px;align-items:center;
  background:#121826;border:1px solid #26324a;border-radius:10px;padding:9px 12px;font-size:13px}
.set-row input[type=range]{width:100%;accent-color:#38f2c8}
.set-val{text-align:right;color:var(--accent);font-variant-numeric:tabular-nums}
.set-toggle{pointer-events:auto;cursor:pointer;background:#1b2536;border:1px solid #33435c;color:#8ba0bb;
  border-radius:8px;padding:6px 12px;font-weight:700;font-size:12px}
.set-toggle.on{background:rgba(56,242,200,.18);border-color:rgba(56,242,200,.6);color:var(--accent)}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:#070a12;color:var(--dim);font-size:12px;letter-spacing:.28em;transition:opacity .4s}
#loading.done{opacity:0;pointer-events:none}
#loading .load-bar{width:220px;height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
#loading .load-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  animation:loadslide 1.1s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ---------- combo / level flash / credit ---------- */
#combo{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-size:24px;font-weight:800;
  letter-spacing:.18em;color:var(--gold);text-shadow:0 3px 18px rgba(0,0,0,.8);pointer-events:none}
#combo.pop{animation:combopop .28s cubic-bezier(.2,1.5,.4,1)}
@keyframes combopop{0%{opacity:0;transform:translateX(-50%) scale(.6)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
#levelflash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 60%,transparent 30%,rgba(255,210,58,.34))}
#levelflash.on{animation:lvlflash .7s ease-out}
@keyframes lvlflash{0%{opacity:1}100%{opacity:0}}
#credit{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;
  color:#54637a;pointer-events:none;white-space:nowrap}
.author{font-size:11px;letter-spacing:.16em;color:var(--accent);margin-top:2px}

/* ================= UI polish pass ================= */
.pill{background:linear-gradient(180deg,rgba(22,29,44,.9),rgba(12,17,27,.9));
  border:1px solid rgba(120,160,200,.18);box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.pill .lbl{opacity:.85}
.pill.gold{border-color:rgba(255,210,58,.35)}
.pill.pts{border-color:rgba(255,210,58,.55);box-shadow:0 0 18px rgba(255,210,58,.18)}
#objective{font-weight:600;letter-spacing:.07em}
#objective small{font-weight:400;opacity:.85;margin-top:3px}
.bar{box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.bar i{box-shadow:0 0 10px rgba(255,255,255,.18)}
#minimap-wrap{box-shadow:0 8px 26px rgba(0,0,0,.45),inset 0 0 24px rgba(0,0,0,.4)}
.ammo{letter-spacing:-.01em}
#weaponname{font-weight:700;letter-spacing:.14em}
.shop-row{transition:border-color .14s,transform .14s,background .14s}
.shop-row:not(.dim):hover{border-color:rgba(56,242,200,.45);background:#162030;transform:translateX(2px)}
.shop-info b{letter-spacing:.02em}
.shop-buy{transition:background .14s,transform .1s}
.shop-buy:active{transform:scale(.96)}
.btn{background:linear-gradient(180deg,#4bfbd4,#2ad3ab);box-shadow:0 10px 30px rgba(56,242,200,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:hover{filter:brightness(1.06)}
#overlay .panel{background:linear-gradient(180deg,rgba(18,24,38,.94),rgba(10,14,22,.94))}
.kf{border-left-width:3px;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.nt{box-shadow:0 6px 20px rgba(0,0,0,.4)}
.set-row:hover{border-color:#33435c}
#topbar .pill .val{font-size:14px}
.shop-max{font-size:11px;letter-spacing:.14em;color:#5f7f9a;font-weight:700;padding-right:6px}
.bar.bt i{background:linear-gradient(90deg,#7c5cff,#c9a8ff)}
#bullettime{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;
  background:radial-gradient(circle at 50% 50%,transparent 35%,rgba(124,92,255,.30));
  box-shadow:inset 0 0 180px rgba(124,92,255,.35)}

/* ---------- achievements, run summary, progress panel ---------- */
#achtoast{position:absolute;right:18px;top:190px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.achtoast{background:linear-gradient(180deg,rgba(24,32,48,.96),rgba(14,20,32,.96));
  border:1px solid rgba(255,210,58,.55);border-left:4px solid var(--gold);border-radius:10px;
  padding:9px 14px;min-width:210px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:achin .35s ease-out}
.achtoast em{display:block;font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--gold);opacity:.9}
.achtoast b{display:block;font-size:14px;color:#fff;margin:2px 0 1px}
.achtoast span{font-size:11px;color:var(--dim)}
@keyframes achin{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:none}}

#runsummary{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rs-panel{background:linear-gradient(180deg,rgba(18,24,38,.96),rgba(10,14,22,.96));
  border:1px solid rgba(56,242,200,.4);border-radius:16px;padding:22px 26px;min-width:320px;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.rs-panel h3{font-size:13px;letter-spacing:.22em;color:var(--accent);margin-bottom:14px}
.rs-row{display:flex;justify-content:space-between;gap:30px;font-size:13px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rs-row b{color:var(--gold);font-variant-numeric:tabular-nums}
.rs-best{margin-top:12px;font-size:11px;color:var(--dim);letter-spacing:.08em}
.rs-ach{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.rs-ach span{font-size:10px;letter-spacing:.1em;color:var(--gold);border:1px solid rgba(255,210,58,.4);
  border-radius:999px;padding:3px 10px}

#metamodal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,12,.82);backdrop-filter:blur(4px)}
#metamodal.hidden{display:none}
.meta-body{display:flex;flex-direction:column;gap:16px;margin-bottom:16px;max-height:66vh;overflow:auto}
.meta-sec h4{font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:8px;display:flex;justify-content:space-between}
.meta-sec h4 small{color:var(--dim);letter-spacing:.1em}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px}
.ach{background:#121826;border:1px solid #26324a;border-radius:9px;padding:8px 10px;opacity:.5}
.ach.on{opacity:1;border-color:rgba(255,210,58,.45);background:#1a1d24}
.ach b{display:block;font-size:12px;color:#e8f1ff}
.ach.on b{color:var(--gold)}
.ach span{font-size:10px;color:var(--dim)}
.ach i{font-style:normal;font-size:10px;color:var(--accent);float:right}
.set-sec{margin-top:14px;border-top:1px solid #26324a;padding-top:12px}
.set-sec h4{font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:9px}
#dmgwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dmg{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:800;color:#eaf2ff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);animation:dmgpop .78s ease-out forwards;pointer-events:none}
.dmg.crit{color:#ffd23a;font-size:19px}
@keyframes dmgpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-42px) scale(1)}}
#scope{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 26%,rgba(0,0,0,.92) 30%)}
#scope::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:2px;background:#0f0;
  box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%)}
#throwable{position:absolute;right:22px;bottom:96px;display:flex;align-items:center;gap:7px;pointer-events:none;
  background:rgba(10,15,24,.6);border:1px solid rgba(120,160,200,.2);border-radius:8px;padding:4px 10px}
#throwable.dim{opacity:.45}
#throwable b{font-size:15px;color:var(--gold)}
#throwable span{font-size:10px;letter-spacing:.12em;color:var(--dim)}
#wheel{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(6,10,18,.55),rgba(6,10,18,.85))}
#wheel.hidden{display:none}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;
  letter-spacing:.24em;color:var(--dim)}
.wseg{position:absolute;transform:translate(-50%,-50%);min-width:118px;text-align:center;
  background:rgba(14,20,32,.9);border:1px solid #2a3648;border-radius:10px;padding:7px 10px}
.wseg b{display:block;font-size:10px;color:var(--dim);letter-spacing:.1em}
.wseg span{font-size:12px;color:#cfdcec;white-space:nowrap}
.wseg.cur{border-color:rgba(56,242,200,.45)}
.wseg.on{background:rgba(56,242,200,.18);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.1)}
.wseg.on span{color:#fff}

/* ---------- colour-blind palettes ---------- */
#hud.cb-deuter{--accent:#4aa8ff;--accent2:#a8d4ff;--gold:#ffd24d}
#hud.cb-protan{--accent:#59c8ff;--accent2:#bfe8ff;--gold:#ffe14d}
#hud.cb-tritan{--accent:#ff8ad4;--accent2:#ffc2e8;--gold:#ffb03a}
#hud.cb-deuter .bar.hp i{background:linear-gradient(90deg,#4aa8ff,#a8d4ff)}
#hud.cb-protan .bar.hp i{background:linear-gradient(90deg,#59c8ff,#bfe8ff)}
#hud.cb-tritan .bar.hp i{background:linear-gradient(90deg,#ff8ad4,#ffc2e8)}
#framegraph{position:absolute;left:12px;top:112px;border-radius:8px;border:1px solid rgba(56,242,200,.25)}
#framegraph.hidden{display:none}
#bloodhit{position:absolute;inset:0;pointer-events:none;opacity:0}
#bloodhit.on{animation:bloodhit 1.1s ease-out}
@keyframes bloodhit{0%{opacity:1}100%{opacity:0}}
body.photo #hud{display:none}
#heatwrap{height:4px;width:120px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:5px}
#heatwrap.hidden{display:none}
#heatwrap i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb03a,#ff6a2a)}
#elitebars{position:absolute;inset:0;pointer-events:none}
.ebar{position:absolute;transform:translate(-50%,-100%);width:78px;text-align:center}
.ebar i{display:block;height:4px;background:linear-gradient(90deg,#ff4d4d,#ff8a3a);border-radius:2px;
  box-shadow:0 0 6px rgba(0,0,0,.8);transition:width .12s}
.ebar b{display:block;font-size:9px;letter-spacing:.1em;color:#ffd7d7;text-shadow:0 1px 3px #000;margin-top:2px}
#hud.immersive #topbar,#hud.immersive #objective,#hud.immersive #minimap-wrap,
#hud.immersive #compass,#hud.immersive #killfeed,#hud.immersive #credit,
#hud.immersive #bottomleft,#hud.immersive #bottomright,#hud.immersive #xpwrap{opacity:0;transition:opacity .25s}
html.no-flash #damageflash,html.no-flash #levelflash,html.no-flash #bloodhit{display:none}
#wanted{position:absolute;left:50%;top:112px;transform:translateX(-50%);font-size:16px;letter-spacing:.18em;
  color:#ffd23a;text-shadow:0 2px 10px rgba(0,0,0,.9);pointer-events:none}
#wanted span{font-size:9px;letter-spacing:.26em;color:#ff9ecb;display:block;text-align:center;margin-bottom:1px}
#wanted.hidden{display:none}
#ally{position:absolute;left:20px;bottom:118px;width:170px;pointer-events:none}
#ally.hidden{display:none}
#ally b{font-size:10px;letter-spacing:.16em;color:var(--accent);text-shadow:0 1px 4px #000}
#ally i{display:block;height:3px;background:linear-gradient(90deg,#38f2c8,#8affd8);border-radius:2px;margin-top:2px}
#ally span{font-size:9px;letter-spacing:.2em;color:#ff6a6a}
#ally.down b,#ally.down i{opacity:.4}
.btn.xs{padding:2px 7px;font-size:9px;letter-spacing:.1em}
.meta-sec .btn.xs{margin-left:6px}
.btn[disabled]{opacity:.4;cursor:default}
#waypoint{position:absolute;left:50%;top:150px;transform:translateX(-50%);font-size:13px;color:#ffd23a;
  text-shadow:0 2px 8px #000;pointer-events:none;display:flex;gap:6px;align-items:center}
#waypoint.hidden{display:none}
#waypoint span{display:inline-block;color:#ffd23a}
#prompt{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;
  color:#e8f1ff;background:rgba(8,12,20,.7);border:1px solid rgba(56,242,200,.3);border-radius:6px;
  padding:5px 12px;pointer-events:none}
#prompt.hidden{display:none}
.leg-toggle{cursor:pointer;user-select:none}
.leg-toggle.off{opacity:.35;text-decoration:line-through}
.leg-hint{opacity:.55;font-style:italic}
#evidence{position:absolute;left:50%;top:186px;transform:translateX(-50%);font-size:10px;letter-spacing:.22em;
  color:#8ab4ff;text-shadow:0 1px 6px #000;pointer-events:none}
#evidence.hidden{display:none}
/* one-handed layout: pull the touch controls to the right and enlarge them */
body.one-handed .touch-left{left:auto;right:20px;transform:scale(1.15)}
body.one-handed .touch-right{right:20px;bottom:190px;transform:scale(1.15)}
body.one-handed #bottomleft{left:auto;right:20px}
body.one-handed #prompt{bottom:210px}

/* boot failure — shown instead of an endless loading bar */
.load-fail{max-width:520px;margin:0 auto;padding:24px 26px;text-align:left;
  background:rgba(20,10,16,.92);border:1px solid rgba(255,90,122,.45);border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.load-fail h2{margin:0 0 10px;font-size:16px;letter-spacing:.1em;color:#ff8ab4}
.load-fail p{margin:0;font-size:13px;line-height:1.6;color:#e8f1ff}
.load-fail code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;
  font-family:ui-monospace,monospace;font-size:12px;color:#38f2c8}
#loading:has(.load-fail){align-items:center;justify-content:center;background:rgba(6,10,18,.94)}
.set-head{margin:14px 0 6px;font-size:11px;letter-spacing:.2em;color:var(--accent);
  border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.set-head small{letter-spacing:.05em;color:#8ba0bb;text-transform:none}
.set-warn{color:#ff8ab4;margin-left:6px}
.set-subhead{margin:8px 0 2px;font-size:10px;letter-spacing:.16em;color:#8ba0bb;opacity:.8}
.keybind{min-width:96px;font-family:ui-monospace,monospace;letter-spacing:.06em}
.keybind.listening{background:var(--accent);color:#062018;border-color:var(--accent)}
.keybind.unbound{color:#ff8ab4;border-color:rgba(255,138,180,.5)}
.set-label{flex:1;text-align:left}
.set-row{display:flex;align-items:center;gap:10px}
.controls .hint{margin-top:10px;font-size:11px;letter-spacing:.08em;color:var(--accent);opacity:.85}
#safezone{position:absolute;left:50%;top:214px;transform:translateX(-50%);font-size:10px;letter-spacing:.16em;
  color:#38f2c8;background:rgba(8,20,18,.72);border:1px solid rgba(56,242,200,.4);border-radius:999px;
  padding:4px 12px;pointer-events:none;white-space:nowrap}
#safezone.hidden{display:none}

/* ---- centre readouts: ONE flowing column each, so nothing can overlap ----
   These used to be individually absolutely positioned at fixed offsets, which
   meant the objective, boss bar, waypoint, evidence, safe-zone notice and
   notifications could all land on top of each other. */
#centertop{position:absolute;left:50%;top:74px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  pointer-events:none;max-width:min(560px,86vw);z-index:6}
#centertop > *{position:static;top:auto;left:auto;right:auto;bottom:auto;transform:none;
  margin:0;max-width:100%}

#centerbottom{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;z-index:6}
#centerbottom > *{position:static;top:auto;left:auto;right:auto;bottom:auto;transform:none;margin:0}

/* the boss bar keeps its own width inside the column */
#centertop #bossbar{width:min(460px,72vw)}
#centertop #notif{width:100%}
#centertop #objective{text-align:center}

/* short viewports: tighten the centre column so it cannot reach the bottom line */
@media (max-height:600px){
  #centertop{top:60px;gap:4px}
  #centerbottom{bottom:104px;gap:5px}
  #centertop .nt{font-size:11px;padding:3px 9px}
  #objective{font-size:11px}
}
.wp-lbl{color:#ffd23a;letter-spacing:.14em;font-size:10px;opacity:.9}
.shop-row.sel, .shop-row:hover{background:rgba(56,242,200,.13);outline:1px solid rgba(56,242,200,.5)}
#shop:focus{outline:none}
.shop-hint{margin-top:8px;font-size:11px;letter-spacing:.06em;color:#8ba0bb;text-align:center}