:root { --ui: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", sans-serif; --amber: #f2a51d; --ink: #14181a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0e0f; font-family: var(--ui); color: #fff; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

#cross { position: absolute; left: 50%; top: 50%; --gap: 8px; }
#cross i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
#cross i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: calc(-9px - var(--gap)); }
#cross i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: var(--gap); }
#cross i:nth-child(3) { width: 9px; height: 2px; top: -1px; left: calc(-9px - var(--gap)); }
#cross i:nth-child(4) { width: 9px; height: 2px; top: -1px; left: var(--gap); }
#cross b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: #fff; }
#cross.ads { opacity: 0; }

#hit { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
#hit.kill { background:
    linear-gradient(45deg, transparent 44%, var(--amber) 44%, var(--amber) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--amber) 44%, var(--amber) 56%, transparent 56%); }

#scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 34vh, rgba(0,0,0,.9) 34.6vh, #000 36vh); }
#scope::before, #scope::after { content: ""; position: absolute; background: #000; }
#scope::before { left: 50%; top: calc(50% - 34vh); width: 1px; height: 68vh; }
#scope::after { top: 50%; left: calc(50% - 34vh); height: 1px; width: 68vh; }
#scope .glass { position: absolute; left: 50%; top: 50%; width: 68vh; height: 68vh; margin: -34vh; border-radius: 50%;
  box-shadow: inset 0 0 9vh 2vh rgba(0,0,0,.55); }

#ammo { position: absolute; right: 34px; bottom: 30px; text-align: right; }
#gunname { display: block; font-size: 17px; opacity: .85; }
#count { font-size: 46px; font-weight: 700; line-height: 1; }
#count small { font-size: 22px; font-weight: 400; opacity: .7; margin-left: 6px; }
#count.low { color: #ff6a4d; }

#guns { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
#guns li { padding: 6px 8px; font-size: 12px; background: rgba(12,14,15,.55); border-bottom: 3px solid transparent; white-space: nowrap; }
#guns li b { margin-right: 7px; opacity: .6; }
#guns li.on { background: rgba(12,14,15,.85); border-bottom-color: var(--amber); }

#tally { position: absolute; left: 30px; top: 24px; font-size: 20px; }
#tally span { font-size: 30px; font-weight: 700; color: var(--amber); margin-right: 6px; }
#tally small { display: block; font-size: 13px; opacity: .7; margin-top: 2px; }

#note { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 17px; opacity: 0; transition: opacity .25s; }
#note.show { opacity: 1; }

#menu { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8,10,11,.62); backdrop-filter: blur(3px); z-index: 10; }
.card { width: min(640px, 92vw); padding: 30px 34px 28px; background: #e9e6df; color: var(--ink); border-top: 8px solid var(--amber); box-shadow: 0 16px 60px rgba(0,0,0,.6); }
.card h1 { margin: 0 0 10px; font-size: 44px; line-height: 1; font-weight: 700; text-transform: uppercase; }
.card p { margin: 0 0 18px; font-family: Georgia, serif; font-size: 18px; line-height: 1.5; }
.card table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 15px; }
.card th { text-align: left; padding: 5px 10px 5px 0; font-weight: 700; white-space: nowrap; width: 1%; }
.card td { padding: 5px 22px 5px 0; color: #40484b; }
.card button { font: inherit; font-size: 20px; font-weight: 700; padding: 13px 28px; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.card button:hover { background: #000; }
.card button[disabled] { opacity: .4; cursor: default; }
#loading { display: inline-block; margin-left: 16px; font-size: 15px; color: #5a6366; }