:root {
  --bg: #05080f; --ink: #eaf2fc; --dim: #9fb0c6; --ice: #7dd3fc; --amber: #ffb454; --violet: #b794f6; --mint: #6ee7b7; --rose: #fb7185;
  --glass: rgba(10, 16, 28, 0.55); --line: rgba(160, 200, 255, 0.2);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --display: 'Unbounded', 'IBM Plex Sans', system-ui, sans-serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app { position: absolute; inset: 0; overflow: hidden; }
#view { position: absolute; inset: 0; }
#view canvas { display: block; width: 100%; height: 100%; outline: none; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; font-family: var(--sans); }
#hud.on { opacity: 1; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 12px; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
#objective { position: absolute; left: calc(18px + var(--sal)); top: calc(16px + var(--sat)); max-width: min(340px, 44vw); padding: 10px 14px 11px; }
#objective .act { font: 600 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--ice); text-transform: uppercase; }
#objective .text { margin-top: 6px; font: 500 14px/1.3 var(--sans); text-wrap: balance; }
#objective .dist { margin-top: 5px; font: 500 11px/1 var(--mono); color: var(--dim); }
#objective.urgent { border-color: rgba(251, 113, 133, 0.7); }
#objective.urgent .act { color: var(--rose); }
#top { position: absolute; left: 50%; top: calc(14px + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(380px, 46vw); }
#compass { width: 100%; height: 30px; display: block; border-radius: 9px; }
.bar { width: 100%; padding: 7px 10px 8px; display: none; }
.bar.on { display: block; }
.bar .lbl { display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.bar .lbl b { color: var(--ink); font-weight: 600; }
.bar .track { margin-top: 6px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; position: relative; }
.bar .fill { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--ice), var(--mint)); }
#bossbar .fill { background: linear-gradient(90deg, var(--rose), var(--amber)); }
#progress.stalled .fill { background: repeating-linear-gradient(135deg, var(--rose) 0 6px, #7a2b3a 6px 12px); }
#progress.stalled .lbl b { color: var(--rose); }
#escape { text-align: center; }
#escape .big { font: 700 26px/1 var(--mono); color: var(--amber); margin-top: 5px; }
#vitals { position: absolute; left: calc(18px + var(--sal)); bottom: calc(18px + var(--sab)); width: min(250px, 40vw); padding: 11px 13px; }
.vrow { display: grid; grid-template-columns: 30px 1fr 34px; align-items: center; gap: 8px; font: 600 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.vrow + .vrow { margin-top: 8px; }
.vrow .track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vrow .fill { height: 100%; border-radius: 4px; }
#hp .fill { background: var(--mint); } #hp.low .fill { background: var(--rose); } #ar .fill { background: var(--ice); }
.vrow .num { text-align: right; font: 600 15px/1 var(--mono); color: var(--ink); }
#dash { margin-top: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#dash i { display: block; height: 100%; width: 100%; background: var(--violet); }
#ammo { position: absolute; right: calc(18px + var(--sar)); bottom: calc(18px + var(--sab)); padding: 10px 14px 11px; text-align: right; min-width: 168px; }
#ammo .name { font: 600 10px/1 var(--mono); letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; white-space: nowrap; }
#ammo .count { margin-top: 6px; font: 700 30px/1 var(--mono); white-space: nowrap; }
#ammo .count small { font-size: 15px; font-weight: 500; color: var(--dim); }
#ammo.low .count { color: var(--amber); } #ammo.empty .count { color: var(--rose); }
#slots { margin-top: 8px; display: flex; justify-content: flex-end; gap: 5px; }
#slots span { width: 26px; height: 20px; border-radius: 5px; border: 1px solid var(--line); font: 600 10px/18px var(--mono); text-align: center; color: rgba(159, 176, 198, 0.4); }
#slots span.own { color: var(--dim); } #slots span.cur { color: #06101a; background: var(--ice); border-color: var(--ice); }
#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; }
#cross i { position: absolute; background: rgba(234, 242, 252, 0.92); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
#cross .l, #cross .r { width: 9px; height: 2px; top: -1px; } #cross .u, #cross .d { width: 2px; height: 9px; left: -1px; }
#cross .l { right: var(--gap); } #cross .r { left: var(--gap); } #cross .u { bottom: var(--gap); } #cross .d { top: var(--gap); }
#cross .dot { width: 2px; height: 2px; left: -1px; top: -1px; }
#cross.target i { background: var(--rose); }
#hit { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; }
#hit::before, #hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 2.5px; margin: -1.25px 0 0 -17px; background: linear-gradient(90deg, #fff 0 32%, transparent 32% 68%, #fff 68%); box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); transform: rotate(45deg); }
#hit::after { transform: rotate(-45deg); }
#hit.weak::before, #hit.weak::after { height: 4px; margin-top: -2px; background: linear-gradient(90deg, var(--amber) 0 38%, transparent 38% 62%, var(--amber) 62%); }
#kill { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2.5px solid #fff; border-radius: 50%; opacity: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); }
#chargering { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; opacity: 0; background: conic-gradient(var(--violet) calc(var(--k, 0) * 1turn), rgba(255, 255, 255, 0.14) 0); -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
#prompt { position: absolute; left: 50%; top: calc(50% + 58px); transform: translateX(-50%); padding: 8px 13px; font: 500 13px/1.2 var(--sans); white-space: nowrap; display: none; }
#prompt.on { display: block; }
#prompt kbd { display: inline-block; min-width: 22px; padding: 3px 6px; margin-right: 7px; border-radius: 5px; background: var(--ice); color: #06101a; font: 700 12px/1 var(--mono); text-align: center; }
#status { position: absolute; left: 50%; top: calc(50% + 100px); transform: translateX(-50%); font: 600 11px/1 var(--mono); letter-spacing: 0.16em; color: var(--amber); text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 3px #000; }
#banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; opacity: 0; transition: opacity 0.6s; padding: 0 16px; }
#banner.on { opacity: 1; }
#banner .k { font: 600 12px/1 var(--mono); letter-spacing: 0.4em; color: var(--ice); text-transform: uppercase; }
#banner .t { margin-top: 10px; font: 800 clamp(30px, 7vw, 64px)/1 var(--display); letter-spacing: 0.04em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
#banner .s { margin-top: 10px; font: 400 15px/1.4 var(--sans); color: var(--dim); text-shadow: 0 1px 6px #000; text-wrap: balance; }
#toasts { position: absolute; left: calc(18px + var(--sal)); bottom: calc(118px + var(--sab)); display: flex; flex-direction: column-reverse; gap: 6px; }
.toast { padding: 6px 11px; font: 500 12px/1.2 var(--mono); border-left: 3px solid var(--ice); background: rgba(10, 16, 28, 0.6); border-radius: 0 7px 7px 0; white-space: nowrap; animation: toast 2.6s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateX(-10px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(251, 60, 90, 0.5) 100%); }
#lowhp { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(251, 60, 90, 0.45); }
#dirs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#dirs i { position: absolute; left: -45px; top: -120px; width: 90px; height: 18px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 5px solid var(--rose); opacity: 0; transform-origin: 45px 120px; filter: drop-shadow(0 0 4px rgba(251, 60, 90, 0.8)); }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.5s; }

/* ---------- touch ---------- */
#touch { position: absolute; inset: 0; display: none; }
.touch #touch.on { display: block; }
#tmove, #tlook { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
#tmove { left: 0; width: 45%; } #tlook { left: 45%; right: 0; }
#stick { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1.5px solid rgba(160, 200, 255, 0.35); background: rgba(10, 16, 28, 0.3); left: calc(84px + var(--sal)); top: calc(100% - 110px - var(--sab)); }
#stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(125, 211, 252, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.5); }
.tb { position: absolute; pointer-events: auto; border-radius: 50%; border: 1.5px solid rgba(160, 200, 255, 0.4); background: rgba(10, 16, 28, 0.5); color: var(--ink); font: 700 10px/1 var(--mono); letter-spacing: 0.06em; display: grid; place-items: center; padding: 0; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tb.down { background: rgba(125, 211, 252, 0.4); border-color: #fff; }
#tfire { width: 78px; height: 78px; right: calc(20px + var(--sar)); bottom: calc(84px + var(--sab)); border-color: rgba(251, 113, 133, 0.8); background: rgba(251, 113, 133, 0.22); font-size: 12px; }
#tjump { width: 58px; height: 58px; right: calc(112px + var(--sar)); bottom: calc(52px + var(--sab)); }
#tdash { width: 54px; height: 54px; right: calc(22px + var(--sar)); bottom: calc(176px + var(--sab)); border-color: rgba(183, 148, 246, 0.8); }
#treload { width: 50px; height: 50px; right: calc(116px + var(--sar)); bottom: calc(124px + var(--sab)); }
#tswap { width: 50px; height: 50px; right: calc(92px + var(--sar)); bottom: calc(188px + var(--sab)); }
#tuse { width: 64px; height: 64px; right: calc(18px + var(--sar)); bottom: calc(246px + var(--sab)); border-color: var(--ice); background: rgba(125, 211, 252, 0.3); display: none; }
#tuse.on { display: grid; }
#tpause { width: 46px; height: 46px; right: calc(12px + var(--sar)); top: calc(12px + var(--sat)); border-radius: 12px; font-size: 14px; }
.touch #objective { max-width: min(250px, 52vw); padding: 8px 10px; top: calc(98px + var(--sat)); left: calc(10px + var(--sal)); }
.touch #objective .text { font-size: 12px; }
.touch #objective { max-width: 44vw; }
.touch #ammo { max-width: 48vw; } .touch #ammo .name { overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.08em; }
.touch #top { top: calc(12px + var(--sat)); width: min(250px, calc(100vw - 150px)); }
.touch #vitals { top: calc(190px + var(--sat)); bottom: auto; left: calc(10px + var(--sal)); width: 150px; padding: 8px 9px; }
.touch #ammo { top: calc(98px + var(--sat)); bottom: auto; right: calc(10px + var(--sar)); min-width: 0; padding: 7px 10px 8px; }
.touch #ammo .count { font-size: 22px; } .touch #ammo .count small { font-size: 12px; }
.touch #toasts { bottom: auto; top: calc(268px + var(--sat)); left: calc(10px + var(--sal)); }
.touch #prompt kbd { display: none; }
.touch #prompt { top: calc(50% + 46px); }
@media (orientation: landscape) and (max-height: 500px) {
  .touch #objective { top: calc(10px + var(--sat)); max-width: 28vw; }
  .touch #top { width: min(230px, 28vw); }
  .touch #vitals { top: calc(96px + var(--sat)); width: 140px; }
  .touch #ammo { top: calc(10px + var(--sat)); right: calc(68px + var(--sar)); }
  .touch #toasts { top: calc(170px + var(--sat)); }
  #tfire { bottom: calc(64px + var(--sab)); } #tjump { bottom: calc(22px + var(--sab)); } #tdash { bottom: calc(152px + var(--sab)); } #treload { bottom: calc(92px + var(--sab)); } #tswap { bottom: calc(150px + var(--sab)); } #tuse { bottom: calc(40px + var(--sab)); right: calc(190px + var(--sar)); }
  #stick { top: calc(100% - 86px - var(--sab)); }
  #banner { top: 30%; } #banner .t { font-size: 28px; margin-top: 6px; } #banner .s { font-size: 13px; margin-top: 6px; } #banner .k { font-size: 10px; }
}

/* ---------- menus ---------- */
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); background: radial-gradient(ellipse at 50% 40%, rgba(5, 8, 15, 0.35), rgba(5, 8, 15, 0.86)); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; pointer-events: auto; }
.screen.on { display: flex; }
.card { width: min(620px, 100%); margin: auto; padding: clamp(18px, 4vw, 34px); border-radius: 20px; background: rgba(8, 13, 24, 0.78); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.eyebrow { font: 600 11px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice); }
h1.logo { margin: 12px 0 0; font: 900 clamp(38px, 11vw, 76px)/0.95 var(--display); letter-spacing: 0.01em; }
h1.logo span { color: var(--ice); text-shadow: 0 0 30px rgba(125, 211, 252, 0.6); }
h2.title { margin: 12px 0 0; font: 800 clamp(26px, 6.4vw, 44px)/1.05 var(--display); text-wrap: balance; }
.lede { margin: 14px 0 0; font: 400 15px/1.55 var(--sans); color: #c9d6e6; max-width: 56ch; text-wrap: pretty; }
.field { margin-top: 20px; }
.field > .lbl, fieldset legend { display: block; padding: 0; font: 600 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
fieldset { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg button, .tog { min-height: 46px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; font: 600 13px/1.15 var(--sans); white-space: nowrap; }
.seg button small { display: block; margin-top: 4px; font: 400 10.5px/1.1 var(--mono); color: var(--dim); white-space: nowrap; }
.seg button[aria-checked='true'], .tog[aria-pressed='true'] { background: rgba(125, 211, 252, 0.16); border-color: var(--ice); color: #fff; }
.seg button[aria-checked='true'] small { color: var(--ice); }
.keys { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font: 400 12.5px/1.3 var(--sans); color: #c9d6e6; }
.keys div { display: flex; gap: 8px; align-items: baseline; }
.keys kbd { flex: none; min-width: 58px; font: 600 11px/1.3 var(--mono); color: var(--ice); white-space: nowrap; }
.actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { min-height: 50px; padding: 12px 26px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); cursor: pointer; font: 700 14px/1 var(--display); letter-spacing: 0.06em; white-space: nowrap; }
.btn.primary { background: var(--ice); border-color: var(--ice); color: #04121d; box-shadow: 0 0 34px rgba(125, 211, 252, 0.35); }
.btn:hover { filter: brightness(1.12); }
.best { font: 500 12px/1.3 var(--mono); color: var(--dim); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.set { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 12px; margin-top: 12px; font: 500 13px/1.2 var(--sans); }
.set output { font: 500 12px/1 var(--mono); color: var(--dim); text-align: right; }
.set input[type='range'] { width: 100%; height: 30px; accent-color: var(--ice); touch-action: pan-x; }
.togs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stats { margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stats div { padding: 11px 8px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); text-align: center; }
.stats dt { font: 600 9.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; white-space: nowrap; }
.stats dd { margin: 7px 0 0; font: 700 19px/1 var(--mono); white-space: nowrap; }
.rank { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.rank b { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 18px; background: rgba(125, 211, 252, 0.14); border: 1.5px solid var(--ice); font: 900 40px/1 var(--display); color: var(--ice); }
.rank span { font: 600 18px/1.2 var(--display); } .rank small { display: block; margin-top: 6px; font: 400 12px/1.3 var(--mono); color: var(--dim); }
.nogl { color: var(--amber); }
@media (max-width: 520px) { .keys { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .set { grid-template-columns: 92px 1fr 40px; } .seg button { padding: 8px 4px; font-size: 12.5px; } .lede { font-size: 14px; } }
@media (max-height: 520px) { .card { padding: 16px 20px; } h1.logo { font-size: 40px; } .lede { font-size: 13px; margin-top: 8px; } .field, fieldset { margin-top: 12px; } .actions { margin-top: 14px; } .keys.long { display: none; } }
@media (prefers-reduced-motion: reduce) { #banner, #hud, #fade { transition: none; } .toast { animation: none; } }