:root {
  --ink: #2c3138;
  --muted: #6c727a;
  --panel: rgba(250, 248, 242, 0.88);
  --line: #d9d3c4;
  --you: #2f6fd6;
  --bot: #e0662f;
  --gold: #c99a1a;
  --good: #2f8a55;
  --bad: #c8463c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #e4e2db; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; border: 1px solid #c9c2b2; border-bottom-width: 2px;
  border-radius: 4px; background: #fffdf7; font: 600 12px/1.4 ui-monospace, Consolas, monospace; text-align: center; color: var(--ink); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#topbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 6px; }
#topbar .side { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; font-weight: 800; font-size: 26px; min-width: 104px; justify-content: center; }
#topbar .side .lbl { font-size: 12px; letter-spacing: 2px; color: var(--muted); }
#topbar .you { color: var(--you); border-bottom: 3px solid var(--you); }
#topbar .bot { color: var(--bot); border-bottom: 3px solid var(--bot); }
#clock { padding: 4px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-align: center; min-width: 96px; }
#timer { font: 800 22px/1.1 ui-monospace, Consolas, monospace; }
#timer.low { color: var(--bad); }
#roundNo { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
#botInfo { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--muted);
  background: var(--panel); padding: 2px 10px; border-radius: 10px; }

#feed { position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#feed div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
#feed .y { color: var(--you); } #feed .b { color: var(--bot); } #feed .hs { color: var(--gold); }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #12a37a; box-shadow: 0 0 0 1px rgba(255,255,255,.75); }
#crosshair i.t, #crosshair i.b { width: 2px; height: 9px; left: -1px; }
#crosshair i.l, #crosshair i.r { height: 2px; width: 9px; top: -1px; }
#crosshair b { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; background: #12a37a; }
#crosshair.off { display: none; }

#hitmark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; transition: opacity .15s; }
#hitmark::before, #hitmark::after { content: ""; position: absolute; left: 12px; top: 0; width: 2px; height: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: rotate(45deg); }
#hitmark::after { transform: rotate(-45deg); }
#hitmark.show { opacity: 1; transition: none; }
#hitmark.head::before, #hitmark.head::after { background: var(--gold); }

#dmgdir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#dmgdir .arc { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  border: 6px solid transparent; border-top-color: rgba(200, 50, 40, .85); transition: opacity .9s; }

#hpBox, #wepBox { position: absolute; bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
#hpBox { left: 16px; width: 200px; }
#hpBox .lbl { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
#hpNum { font: 800 34px/1 ui-monospace, Consolas, monospace; }
#hpNum.low { color: var(--bad); }
#hpBar { height: 6px; background: #e5dfd2; border-radius: 3px; margin-top: 6px; overflow: hidden; }
#hpFill { height: 100%; width: 100%; background: var(--good); transition: width .2s; }
#hpFill.low { background: var(--bad); }

#wepBox { right: 16px; min-width: 250px; text-align: right; }
#wepName { font-size: 13px; color: var(--muted); font-weight: 600; }
#ammo { font: 800 34px/1 ui-monospace, Consolas, monospace; }
#ammo #res { font-size: 16px; color: var(--muted); margin-left: 6px; }
#ammo.empty #mag { color: var(--bad); }
#reloadBar { height: 4px; background: transparent; margin: 4px 0; border-radius: 2px; overflow: hidden; }
#reloadFill { height: 100%; width: 0; background: var(--gold); }
#slots { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.slot { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.slot em { font-style: normal; font-weight: 600; }
.slot sup { font-weight: 800; color: var(--ink); }
.slot.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.slot.none { opacity: .35; }

#center { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); text-align: center; font-weight: 800;
  font-size: 40px; color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.7); }
#center small { display: block; font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 6px; }
#center .you { color: var(--you); } #center .bot { color: var(--bot); }

#scope { position: fixed; inset: 0; pointer-events: none; }
#scope .lens { position: absolute; left: 50%; top: 50%; width: 92vmin; height: 92vmin; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 200vmax rgba(52, 58, 64, 0.94), inset 0 0 40px rgba(52, 58, 64, .6); }
#scope .lens::before, #scope .lens::after { content: ""; position: absolute; background: rgba(30, 34, 38, .85); }
#scope .lens::before { left: 0; right: 0; top: 50%; height: 1px; }
#scope .lens::after { top: 0; bottom: 0; left: 50%; width: 1px; }

#veil { position: fixed; inset: 0; background: #cfcfca; opacity: 0; pointer-events: none; }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 50, 40, .45) 100%); }
#hurt.on { opacity: 1; transition: none; }

#replayTag { position: fixed; top: 16px; left: 16px; background: var(--bot); color: #fff; font-weight: 800; letter-spacing: 2px;
  padding: 6px 12px; border-radius: 6px; }
#replayTag small { font-weight: 500; letter-spacing: 0; opacity: .85; margin-left: 8px; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(228, 226, 219, 0.72); overflow-y: auto; }
.card { background: #fbfaf5; border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; max-width: 760px; width: 100%;
  box-shadow: 0 12px 40px rgba(60, 50, 30, .15); max-height: calc(100vh - 32px); overflow-y: auto; }
.card.small { max-width: 400px; text-align: center; }
h1 { margin: 0; font-size: 44px; letter-spacing: 6px; }
h2 { margin: 0 0 10px; }
h3 { margin: 16px 0 8px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.sub { margin: 4px 0 0; color: var(--muted); }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick button { text-align: left; padding: 10px 12px; border: 2px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer;
  font: inherit; color: var(--ink); }
.pick button b { display: block; font-size: 15px; }
.pick button span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.pick button.on { border-color: var(--you); background: #eef4ff; }
#pickBot button.on { border-color: var(--bot); background: #fff2ea; }
.row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 7px 14px; font: inherit; cursor: pointer; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: #fff; }
#sens { vertical-align: middle; width: 130px; }
#sensVal { font-size: 13px; color: var(--muted); margin-left: 6px; }
.note { font-size: 13px; color: var(--muted); margin: 16px 0 12px; }
button.go, button.ghost { display: block; width: 100%; padding: 12px; border-radius: 10px; font: 700 16px/1 inherit; font-family: inherit;
  cursor: pointer; margin-top: 8px; }
button.go { background: var(--you); color: #fff; border: 0; }
button.go:hover { filter: brightness(1.08); }
button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.keys { margin-top: 14px; font-size: 13px; }
.keys summary { cursor: pointer; color: var(--muted); }
.keys .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 8px; }
.big { font-size: 34px; font-weight: 800; margin: 4px 0 8px; }
.big .you { color: var(--you); } .big .bot { color: var(--bot); }
#endStats { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }

@media (max-width: 640px) {
  .pick { grid-template-columns: 1fr; }
  .keys .grid { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
}

/* layers: world < scope/smoke veil < hurt vignette < HUD < replay tag < screens */
#scope, #veil { z-index: 1; }
#hurt { z-index: 2; }
#hud { z-index: 3; }
#replayTag { z-index: 4; }
.screen { z-index: 10; }