:root {
  --hud: #8dffb0;
  --hud-dim: rgba(141, 255, 176, 0.45);
  --hud-bg: rgba(8, 20, 12, 0.55);
  --warn: #ffb03a;
  --crit: #ff4a3a;
  --ui-bg: rgba(14, 12, 10, 0.88);
  --ui-fg: #f0e2c8;
  --ui-acc: #ffb03a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1510; color: var(--ui-fg); font-family: 'Consolas', 'DejaVu Sans Mono', monospace; -webkit-user-select: none; user-select: none; touch-action: none; }
#game, #game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; color: var(--hud); text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); z-index: 5; }
#h-frame { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55); border: 10px solid rgba(20, 18, 16, 0.55); border-radius: 18px; }
#hud.outside #h-frame { display: none; }
#h-dmg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 40, 20, 0) 40%, rgba(255, 40, 20, 0.7) 100%); opacity: 0; transition: opacity 0.25s; }

#h-compass { position: absolute; top: 10px; left: 50%; width: 380px; margin-left: -190px; height: 30px; overflow: hidden; background: var(--hud-bg); border: 1px solid var(--hud-dim); border-radius: 4px; }
#h-compass-strip { position: absolute; left: 50%; top: 0; height: 100%; }
.ct { position: absolute; top: 2px; width: 1px; height: 7px; background: var(--hud-dim); font-size: 11px; }
.ct.big { height: 10px; background: var(--hud); }
.ct.big::after { content: attr(data-l); }
.ct { text-indent: 4px; line-height: 30px; white-space: nowrap; }
#h-legs { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--warn); }
.h-caret { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background: var(--hud); }

#h-xhair { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#h-xhair .xh-c { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: var(--hud); border-radius: 50%; }
#h-xhair .xh { position: absolute; background: var(--hud); }
#h-xhair .h1, #h-xhair .h2 { width: 14px; height: 2px; top: -1px; }
#h-xhair .h1 { left: -24px; } #h-xhair .h2 { left: 10px; }
#h-xhair .v1, #h-xhair .v2 { width: 2px; height: 14px; left: -1px; }
#h-xhair .v1 { top: -24px; } #h-xhair .v2 { top: 10px; }
#h-xhair.on-enemy .xh, #h-xhair.on-enemy .xh-c { background: var(--crit); }

#h-tbox { position: absolute; left: 0; top: 0; display: none; }
.tb-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--warn); }
.tb-corner.a { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.tb-corner.b { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.tb-corner.c { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.tb-corner.d { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#h-tbox.locking .tb-corner { animation: blink 0.25s steps(2) infinite; }
#h-tbox.locked .tb-corner { border-color: var(--crit); width: 45%; height: 45%; }
#h-tlabel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 11px; color: var(--warn); white-space: nowrap; }
#h-tbox.locked #h-tlabel { color: var(--crit); }
@keyframes blink { 50% { opacity: 0.2; } }
#h-offscreen { position: absolute; left: 0; top: 0; display: none; width: 0; height: 0; margin: -10px 0 0 -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid var(--warn); }
.h-marker { position: absolute; left: -6px; top: -10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--crit); display: none; }

#h-throttle { position: absolute; left: 28px; top: 50%; margin-top: -110px; width: 22px; height: 200px; border: 1px solid var(--hud-dim); background: var(--hud-bg); }
#h-thr-zero { position: absolute; left: -6px; right: -6px; height: 1px; background: var(--hud); }
#h-thr-bar { position: absolute; left: 3px; right: 3px; background: #3fd06a; }
#h-thr-mark { position: absolute; left: -10px; right: -10px; height: 3px; margin-bottom: -1px; background: var(--warn); }
#h-speed { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 18px; }
.h-small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 28px; font-size: 10px; color: var(--hud-dim); }

#h-left { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 12px; align-items: flex-end; }
#h-radar { width: 180px; height: 180px; background: var(--hud-bg); border-radius: 50%; border: 1px solid var(--hud-dim); }
.h-panel { background: var(--hud-bg); border: 1px solid var(--hud-dim); padding: 6px 8px; border-radius: 4px; }
.h-title { font-size: 11px; color: var(--hud-dim); margin-bottom: 4px; text-align: center; }
.doll { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d-row { display: flex; gap: 2px; justify-content: center; }
.d { background: #3fd06a; border-radius: 2px; }
.d-head { width: 12px; height: 10px; }
.d-ct { width: 16px; height: 26px; }
.d-side { width: 12px; height: 24px; }
.d-arm { width: 8px; height: 28px; margin-top: 2px; }
.d-leg { width: 12px; height: 26px; margin: 0 2px; }

#h-right { position: absolute; right: 20px; bottom: 20px; width: 290px; }
#h-weapons { background: var(--hud-bg); border: 1px solid var(--hud-dim); border-radius: 4px; padding: 6px 8px; font-size: 12px; }
.w-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--hud-dim); position: relative; }
.w-row.ready { color: var(--hud); }
.w-row.dead { color: #6a4a40; text-decoration: line-through; }
.w-g { width: 16px; height: 16px; border: 1px solid currentColor; text-align: center; line-height: 14px; font-size: 11px; }
.w-name { flex: 1; }
.w-ammo { font-size: 11px; }
.w-bar { width: 60px; height: 6px; background: rgba(0, 0, 0, 0.4); }
.w-bar i { display: block; height: 100%; background: currentColor; }
.w-st { position: absolute; right: 0; font-size: 10px; color: var(--crit); text-decoration: none; background: rgba(0, 0, 0, 0.6); padding: 0 3px; }
#h-heat { margin-top: 8px; height: 22px; position: relative; background: var(--hud-bg); border: 1px solid var(--hud-dim); border-radius: 4px; overflow: hidden; }
#h-heat-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #d8c23a; width: 0; }
#h-heat-txt { position: absolute; inset: 0; text-align: center; line-height: 20px; font-size: 12px; color: #fff; }

#h-stats { position: absolute; top: 12px; left: 70px; font-size: 13px; color: var(--hud); }
#h-stats b { color: #fff; }
#h-target { position: absolute; top: 50px; right: 20px; background: var(--hud-bg); border: 1px solid var(--warn); border-radius: 4px; padding: 6px 10px; color: var(--warn); text-align: center; font-size: 12px; }
#h-target .d { background: #3fd06a; }
#h-tname { margin-bottom: 4px; }
#h-tdist { margin-top: 4px; }

#h-warn { position: absolute; top: 22%; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#h-warn span { font-size: 18px; letter-spacing: 0.15em; color: var(--warn); background: rgba(0, 0, 0, 0.35); padding: 2px 12px; }
#h-warn span.crit { color: var(--crit); animation: blink 0.5s steps(2) infinite; }
#h-warn span.info { color: var(--hud); animation: none; }
#h-msgs { position: absolute; bottom: 24%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.h-msg { font-size: 14px; letter-spacing: 0.08em; background: rgba(0, 0, 0, 0.4); padding: 2px 10px; transition: opacity 0.8s; }
.h-msg.good { color: #9dff7a; } .h-msg.crit { color: var(--crit); } .h-msg.warn { color: var(--warn); } .h-msg.info { color: var(--hud); }
.h-msg.fade { opacity: 0; }
#h-menu { position: absolute; top: 10px; left: 14px; pointer-events: auto; background: var(--hud-bg); color: var(--hud); border: 1px solid var(--hud-dim); border-radius: 4px; font: inherit; font-size: 14px; padding: 5px 10px; cursor: pointer; }

/* ---------------- touch ---------------- */
#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#touch > * { pointer-events: auto; }
#t-look { position: absolute; top: 60px; right: 0; bottom: 0; width: 62%; touch-action: none; }
#t-stick { position: absolute; left: 24px; bottom: 24px; width: 150px; height: 150px; border-radius: 50%; background: rgba(141, 255, 176, 0.08); border: 1px solid rgba(141, 255, 176, 0.4); touch-action: none; }
#t-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(141, 255, 176, 0.35); border: 1px solid rgba(141, 255, 176, 0.9); pointer-events: none; }
.t-lab { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; color: rgba(141, 255, 176, 0.6); pointer-events: none; }
.t-top { top: 6px; } .t-bot { bottom: 6px; }
.t-btn { position: absolute; touch-action: none; border-radius: 50%; border: 1px solid rgba(255, 176, 58, 0.7); background: rgba(255, 176, 58, 0.12); color: #ffd28a; font: inherit; font-size: 18px; font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.t-btn small { font-size: 8px; font-weight: normal; letter-spacing: 0.05em; }
.t-btn.on { background: rgba(255, 90, 50, 0.5); }
#t-f1 { right: 22px; bottom: 30px; width: 88px; height: 88px; font-size: 24px; }
#t-f2 { right: 122px; bottom: 22px; width: 64px; height: 64px; }
#t-f3 { right: 30px; bottom: 132px; width: 64px; height: 64px; }
#t-fa { right: 110px; bottom: 102px; width: 54px; height: 54px; font-size: 13px; }
.t-small { width: auto !important; height: 34px; border-radius: 6px; font-size: 11px; padding: 0 10px; }
#t-tgt { right: 20px; bottom: 212px; }
#t-ctr { right: 96px; bottom: 212px; }
#t-view { right: 172px; bottom: 212px; }
#t-stop { left: 64px; bottom: 184px; width: 70px; height: 30px; border-radius: 6px; font-size: 11px; }

/* touch layout for the HUD: phones in landscape are short, so keep the middle clear and
   keep panels out from under thumbs */
body.touch #h-left { left: auto; right: 12px; top: 44px; bottom: auto; }
body.touch #h-radar { width: 104px; height: 104px; }
body.touch .h-panel { display: none; }
body.touch #h-right { left: 12px; right: auto; top: 44px; bottom: auto; width: 200px; }
body.touch #h-weapons { font-size: 10px; padding: 2px 6px; }
body.touch .w-row { padding: 1px 0; }
body.touch .w-g { width: 13px; height: 13px; line-height: 11px; font-size: 9px; }
body.touch .w-bar { width: 34px; }
body.touch #h-heat { height: 16px; margin-top: 3px; }
body.touch #h-heat-txt { line-height: 14px; font-size: 10px; }
body.touch #h-throttle { left: 184px; top: auto; bottom: 44px; margin-top: 0; height: 110px; width: 14px; }
body.touch #h-speed { font-size: 12px; margin-top: 3px; }
body.touch .h-small { margin-top: 20px; }
body.touch #h-compass { width: 220px; margin-left: -110px; top: 6px; height: 24px; }
body.touch .ct { line-height: 24px; }
body.touch #h-stats { display: none; }
body.touch #h-target { top: 154px; right: 12px; padding: 2px 6px; font-size: 10px; }
body.touch #h-target .doll, body.touch #h-tdist { display: none; }
body.touch #h-tname { margin: 0; }
body.touch #h-warn { top: 18%; }
body.touch #h-warn span { font-size: 13px; }
body.touch #h-msgs { bottom: auto; top: 30%; }
body.touch .h-msg { font-size: 11px; }
body.touch #h-frame { border-width: 4px; }
body.touch #h-menu { top: 6px; left: 8px; padding: 3px 8px; }

/* ---------------- menus ---------------- */
#screens { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.35), rgba(10, 8, 6, 0.8)); overflow-y: auto; padding: 16px; }
.screen { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; width: 100%; background: var(--ui-bg); border: 1px solid rgba(255, 176, 58, 0.35); border-radius: 8px; padding: 22px 20px; margin: auto; }
.screen.title { background: rgba(14, 12, 10, 0.7); }
.screen.wide { max-width: 760px; }
.logo { font-size: 42px; font-weight: bold; letter-spacing: 0.18em; color: var(--ui-acc); text-shadow: 0 0 18px rgba(255, 140, 40, 0.5); text-align: center; }
.head { font-size: 24px; letter-spacing: 0.15em; color: var(--ui-acc); }
.head.red { color: var(--crit); }
.head2 { font-size: 13px; letter-spacing: 0.1em; color: var(--ui-acc); margin-top: 12px; align-self: flex-start; }
.sub { font-size: 13px; color: #c9b89a; text-align: center; }
.hint { font-size: 12px; color: #a8977c; text-align: center; line-height: 1.6; }
.screen button { font: inherit; font-size: 14px; letter-spacing: 0.1em; color: var(--ui-fg); background: rgba(255, 176, 58, 0.1); border: 1px solid rgba(255, 176, 58, 0.45); border-radius: 5px; padding: 10px 0; width: 240px; cursor: pointer; }
.screen button:hover { background: rgba(255, 176, 58, 0.25); }
.screen button.big { font-size: 18px; padding: 14px 0; background: rgba(255, 176, 58, 0.22); }
.screen button.sm { width: auto; padding: 4px 10px; font-size: 11px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tab.on { background: rgba(255, 176, 58, 0.4) !important; }
.tabpane { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
table.binds, table.keys { width: 100%; border-collapse: collapse; font-size: 12px; }
table.binds td, table.keys td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 176, 58, 0.12); }
table.binds td:nth-child(2) { color: #d8c8a8; }
table.binds td:last-child { white-space: nowrap; text-align: right; }
table.keys td:first-child { color: var(--ui-acc); white-space: nowrap; }
.dim { color: #7d6f5c; }
.capture { width: 100%; background: rgba(255, 90, 50, 0.2); border: 1px solid var(--crit); padding: 8px; font-size: 13px; text-align: center; animation: none; }
.pads { width: 100%; font-size: 11px; line-height: 1.7; }
.pad { border-top: 1px solid rgba(255, 176, 58, 0.15); padding: 4px 0; }
.ax, .bt { display: inline-block; min-width: 64px; color: #a8977c; }
.ax.hot, .bt.hot { color: #9dff7a; }
.sets { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 18px; }
label.set { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #d8c8a8; }
label.set b { color: var(--ui-acc); font-weight: normal; }
label.set.chk { flex-direction: row; align-items: center; gap: 8px; }
label.set select { font: inherit; font-size: 12px; background: #1f1a14; color: var(--ui-fg); border: 1px solid rgba(255, 176, 58, 0.45); padding: 4px; }
input[type=range] { width: 100%; accent-color: var(--ui-acc); }
.row { display: flex; gap: 8px; }

@media (max-width: 560px) {
  .logo { font-size: 30px; }
  table.binds td:first-child { font-size: 11px; }
}