* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050607; color: #e8e2d4;
  font-family: "Segoe UI", Roboto, Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,24,22,.55), rgba(0,0,0,.92)); z-index: 10; padding: 16px; }
.panel { width: min(420px, 100%); text-align: center; }
h1 { font-size: clamp(40px, 9vw, 72px); line-height: .9; margin: 0 0 12px; letter-spacing: 4px; color: #d8d0bc;
  text-shadow: 0 0 24px rgba(160,20,10,.6); }
h1 span { color: #b3261e; font-size: .62em; letter-spacing: 10px; }
h2 { letter-spacing: 6px; color: #d8d0bc; }
.tag { color: #9a958a; margin: 0 0 28px; }
button { display: block; width: 100%; margin: 10px 0; padding: 14px; font: 700 18px inherit; letter-spacing: 4px;
  color: #f2eadb; background: #7d1a14; border: 1px solid #b3261e; cursor: pointer; font-family: inherit; }
button:hover { background: #9c2018; }
button.ghost { background: transparent; border-color: #5c5850; }
button.ghost:hover { background: rgba(255,255,255,.06); }
.small { font-size: 13px; color: #8d887e; }
.keys { margin-top: 24px; }
label { display: block; text-align: left; margin: 18px 0 6px; color: #b8b1a2; font-size: 14px; letter-spacing: 1px; }
label.row { display: flex; gap: 8px; align-items: center; }
input[type=range] { width: 100%; }
.seg { display: flex; gap: 4px; }
.seg button { margin: 0; padding: 10px 4px; font-size: 14px; letter-spacing: 1px; background: transparent; border-color: #5c5850; }
.seg button.on { background: #7d1a14; border-color: #b3261e; }
.seg button.soon { opacity: .45; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#cross::before, #cross::after { content: ""; position: absolute; background: rgba(240,235,220,.8); }
#cross::before { left: 10px; top: 0; width: 2px; height: 22px; clip-path: polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%); }
#cross::after { top: 10px; left: 0; height: 2px; width: 22px; clip-path: polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%); }
#hit { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  border: 2px solid #fff; transform: rotate(45deg) scale(.6); transition: opacity .12s; }
#hit.on { opacity: .9; }
#hit.head { border-color: #ff4a3a; }
#round { position: absolute; left: 24px; bottom: 18px; font: 900 64px Georgia, serif; color: #a3140c;
  text-shadow: 0 0 12px rgba(0,0,0,.9); }
#points { position: absolute; right: 24px; bottom: 120px; font: 700 28px inherit; color: #f0e6c8; text-shadow: 0 2px 4px #000; }
#pointPops { position: absolute; right: 24px; bottom: 156px; text-align: right; }
#pointPops div { font: 700 18px inherit; color: #ffd66b; animation: pop 0.9s forwards; text-shadow: 0 1px 3px #000; }
@keyframes pop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
#ammo { position: absolute; right: 24px; bottom: 30px; font: 700 40px inherit; text-align: right; text-shadow: 0 2px 4px #000; }
#ammo small { font-size: 22px; color: #b8b1a2; }
#gunName { font-size: 14px; letter-spacing: 3px; color: #9a958a; }
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 18px; text-shadow: 0 2px 4px #000; }
#hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(150,0,0,.85)); }
#fps { position: absolute; left: 8px; top: 8px; font: 12px monospace; color: #8f8; }
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 900 54px Georgia, serif; color: #b3261e;
  opacity: 0; text-shadow: 0 0 20px #000; transition: opacity .6s; }
#banner.on { opacity: 1; }

#touch { position: fixed; inset: 0; z-index: 6; }
.stick { position: absolute; left: 24px; bottom: 24px; width: 140px; height: 140px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); }
.stick div { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.3); }
#lookPad { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }
#tFire, #tReload { position: absolute; width: 90px; height: 90px; border-radius: 50%; padding: 0; letter-spacing: 1px; font-size: 16px; }
#tFire { right: 24px; bottom: 120px; }
#tReload { right: 130px; bottom: 40px; width: 64px; height: 64px; background: rgba(60,60,60,.6); border-color: #777; }
@media (max-width: 700px) { #round { font-size: 40px; left: 16px; top: 8px; bottom: auto; } #ammo { font-size: 30px; bottom: 236px; } #points { bottom: 300px; } #pointPops { bottom: 336px; } }

.screen.clear { background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 45%); align-items: flex-end; }
.pickBar { width: min(460px, 100%); text-align: center; padding-bottom: 12px; }
.pickBar h2 { margin: 0 0 10px; font-size: 18px; }
.pickRow { display: flex; align-items: center; gap: 10px; }
.pickRow .arrow { width: 56px; margin: 0; padding: 6px 0; font-size: 30px; letter-spacing: 0; }
#pickName { flex: 1; font: 700 26px Georgia, serif; letter-spacing: 2px; color: #f0e6c8; }
#pickDots { margin: 8px 0 4px; letter-spacing: 6px; color: #5c5850; }
#pickDots b { color: #b3261e; }