* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070a; }
body { font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif; color: #dfe9f2; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#objective { position: absolute; top: 18px; left: 20px; }
#obj-name { font-size: 11px; letter-spacing: 3px; color: #8fa8bd; }
#obj-desc { font-size: 17px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px #000; }
#obj-prog { font-size: 13px; color: #ffd27a; letter-spacing: 1px; margin-top: 2px; }
#compass { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
#killfeed { position: absolute; top: 64px; right: 20px; text-align: right; font-size: 13px; }
#killfeed div { margin-bottom: 3px; padding: 2px 8px; background: rgba(6,10,14,.55);
  border-right: 2px solid var(--acc, #7cffb2); color: #e8f2fa; opacity: 1; transition: opacity .6s; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 8px; --acc: #dfe9f2; }
#crosshair .ch { position: absolute; background: var(--acc); box-shadow: 0 0 3px rgba(0,0,0,.9); }
#c-t, #c-b { width: 2px; height: 9px; left: -1px; }
#c-l, #c-r { width: 9px; height: 2px; top: -1px; }
#c-t { bottom: var(--gap); } #c-b { top: var(--gap); }
#c-l { right: var(--gap); } #c-r { left: var(--gap); }
#c-dot { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: var(--acc); }
#c-ring { position: absolute; width: 44px; height: 44px; left: -22px; top: -22px;
  border: 1px solid var(--acc); border-radius: 50%; opacity: 0; }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i { position: absolute; width: 2px; height: 9px; background: #fff; box-shadow: 0 0 4px #000; }
#hitmarker.kill i { background: #ff5e3a; height: 12px; }
#hitmarker i:nth-child(1) { transform: translate(-8px, -13px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(6px, -13px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-8px, 4px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(6px, 4px) rotate(45deg); }

#ammo { position: absolute; right: 26px; bottom: 22px; text-align: right; }
#w-name { font-size: 12px; letter-spacing: 3px; color: #8fa8bd; }
#ammo-mag { font-size: 40px; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 2px 8px #000; display: inline-block; }
#ammo-mag.low { color: #ff5e3a; }
#ammo-res { font-size: 15px; color: #9db3c6; display: inline-block; margin-left: 4px; }

#health-wrap { position: absolute; left: 26px; bottom: 22px; width: 190px; }
#health-bar { height: 5px; background: rgba(255,255,255,.12); }
#health-fill { height: 100%; width: 100%; background: var(--acc, #7cffb2); }
#health-num { font-size: 15px; color: #cfe0ee; margin-top: 3px; }

#subtitle { position: absolute; bottom: 92px; width: 100%; text-align: center; font-size: 17px;
  text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity .3s; }
#sub-who { color: var(--acc, #7cffb2); font-weight: 700; letter-spacing: 2px; margin-right: 10px; }
#toast { position: absolute; top: 110px; width: 100%; text-align: center; font-size: 15px;
  letter-spacing: 2px; color: #ffd27a; text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity .4s; }
#scan-hint { position: absolute; top: 132px; width: 100%; text-align: center; font-size: 13px;
  letter-spacing: 2px; color: #7cffb2; text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity .3s; }

#dmg { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(255,30,20,.55) 100%); }
#lowhp { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(160,0,0,.5) 100%);
  animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- overlays ---------- */
#f3 { position: fixed; top: 10px; left: 10px; z-index: 40; font-family: monospace; font-size: 12px;
  line-height: 1.5; color: #9fe8b0; background: rgba(0,0,0,.6); padding: 8px 12px; white-space: pre; }
#titlecard { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .5s; }
#tc-ch { font-size: 14px; letter-spacing: 8px; color: var(--acc, #7cffb2); }
#tc-name { font-size: 54px; font-weight: 700; letter-spacing: 12px; color: #fff; text-shadow: 0 4px 30px #000; }
#fade { position: fixed; inset: 0; background: #000; z-index: 60; pointer-events: none; opacity: 1;
  transition: opacity .7s; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(4,7,10,.88); backdrop-filter: blur(3px); }
.screen h1 { font-size: 74px; letter-spacing: 14px; color: #fff; }
.screen h1 span { color: var(--acc, #7cffb2); }
.screen h2 { font-size: 34px; letter-spacing: 8px; margin-bottom: 24px; color: #fff; }
.screen h2.red { color: #ff5e3a; }
.tag { font-size: 12px; letter-spacing: 5px; color: #7d93a6; margin: 6px 0 26px; }
.btnrow { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; align-items: center; }
button { pointer-events: auto; font-family: inherit; font-size: 14px; letter-spacing: 3px;
  color: #dfe9f2; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.22);
  padding: 10px 34px; cursor: pointer; min-width: 260px; transition: all .15s; }
button:hover { background: rgba(255,255,255,.14); border-color: var(--acc, #7cffb2); color: #fff; }
button.big { font-size: 17px; padding: 13px 44px; }
.hint { margin-top: 28px; font-size: 11px; letter-spacing: 2px; color: #64798c; }
#chapters { display: grid; grid-template-columns: repeat(6, 108px); gap: 8px; }
#chapters button { min-width: 0; padding: 12px 4px; font-size: 12px; }
#chapters button .cn { font-size: 16px; display: block; color: var(--acc, #7cffb2); }
#chapters button.locked { opacity: .35; pointer-events: none; }
#chapters button.sel { border-color: var(--acc, #7cffb2); background: rgba(255,255,255,.1); }

#cp-stats { font-size: 14px; color: #9db3c6; letter-spacing: 1px; line-height: 1.9; text-align: center; }
#cp-journal, #pause-journal, #journal-body { max-width: 560px; margin-top: 14px; font-size: 13px;
  color: #b8cad8; line-height: 1.6; }
#cp-journal .jt, #journal-body .jt { color: #ffd27a; letter-spacing: 2px; margin-top: 10px; }
#pause-journal .jt { color: #ffd27a; letter-spacing: 2px; margin-top: 10px; }

/* options */
#opt-body { display: flex; flex-direction: column; gap: 12px; min-width: 420px; }
.opt-row { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 1px; }
.opt-row input[type=range] { pointer-events: auto; width: 100%; accent-color: #7cffb2; }
.opt-row select { pointer-events: auto; background: #10161d; color: #dfe9f2; border: 1px solid #33424f;
  padding: 4px 8px; font-family: inherit; }
.opt-row .val { color: #7cffb2; text-align: right; }
#errbox { position: fixed; inset: auto 10px 10px 10px; z-index: 99; background: #2a0d10;
  border: 1px solid #ff5e3a; color: #ffb3a0; padding: 12px; font: 12px/1.5 monospace; white-space: pre-wrap; }