:root {
  --ink: #e8dcc0;
  --gold: #c8a24a;
  --blood: #9b2f2f;
  --panel: rgba(14, 12, 10, 0.92);
  --green: #6ca35a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: auto; min-height: 100%; background: #07070b; overflow-x: hidden; overflow-y: auto; }
body { font-family: "Courier New", "Lucida Console", monospace; color: var(--ink); -webkit-font-smoothing: none; }

#stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; transform: translateZ(0); background: #07070b; }
#gl { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }

/* permanent atmospheric vignette + faint scanlines over the whole viewport */
#stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 2px, transparent 3px);
  mix-blend-mode: multiply;
}

/* ---------- overlays ---------- */
#vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(140, 12, 12, 0.72) 100%);
  transition: opacity 0.12s linear;
}
#reticle {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; z-index: 6;
  background:
    linear-gradient(var(--gold), var(--gold)) center/2px 22px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/22px 2px no-repeat;
  opacity: 0.9; mix-blend-mode: screen;
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud.hidden { display: none; }

#pop-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; display: none; transform: translate(-50%, -50%);
  font-weight: bold; font-size: 17px; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,0.9); letter-spacing: 0.04em; will-change: top, opacity;
}
.pop.crit { color: #ff6a4a; font-size: 21px; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,90,60,0.7); }

#topbar { position: absolute; top: 14px; left: 18px; display: flex; gap: 20px; }
.stat { background: linear-gradient(180deg, rgba(10,8,6,0.42), rgba(10,8,6,0.18)); padding: 6px 12px 7px; border-left: 2px solid rgba(200,162,74,0.5); border-radius: 0 5px 5px 0; }
.stat .lbl { font-size: 10px; letter-spacing: 0.28em; color: var(--gold); opacity: 0.85; }
.stat .val { font-size: 30px; font-weight: bold; line-height: 1; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,0.8); transition: transform 0.06s ease-out, color 0.1s; transform-origin: left center; display: inline-block; }
.stat.round { border-left-color: rgba(155,47,47,0.7); }
.stat.round .val { color: var(--blood); }

#perks { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.perk {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 0 6px rgba(255,255,255,0.18);
  position: relative; overflow: hidden; animation: perk-in 0.4s cubic-bezier(0.2,0.9,0.3,1.3) both;
}
.perk::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -7px 8px rgba(0,0,0,0.45), inset 0 4px 6px rgba(255,255,255,0.25); }
@keyframes perk-in { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

#ammobox { position: absolute; right: 20px; bottom: 18px; text-align: right; text-shadow: 0 2px 0 #000; padding: 8px 14px 8px 28px; background: linear-gradient(270deg, rgba(10,8,6,0.45), transparent); border-right: 2px solid rgba(200,162,74,0.4); border-radius: 6px 0 0 6px; }
#weapon-name { font-size: 15px; letter-spacing: 0.14em; color: var(--gold); }
.ammo { font-size: 36px; font-weight: bold; line-height: 1; }
.ammo.low #ammo-mag { color: #e0533a; animation: ammo-low 0.6s steps(2) infinite; }
@keyframes ammo-low { 50% { opacity: 0.4; } }
.ammo .sep { opacity: 0.4; margin: 0 4px; }
.ammo #ammo-res { font-size: 22px; opacity: 0.7; }
.nades { font-size: 14px; color: var(--ink); opacity: 0.85; margin-top: 2px; }

/* ---------- reload indicator (radial, anchored above player) ---------- */
#reload-ring {
  position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  display: none; z-index: 6; pointer-events: none;
}
#reload-ring.on { display: block; animation: rr-pulse 0.7s ease-in-out infinite; }
#reload-ring .rr-prog {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 360deg), rgba(8, 6, 5, 0.7) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 56%, #000 59%);
          mask: radial-gradient(farthest-side, transparent 56%, #000 59%);
  filter: drop-shadow(0 0 5px rgba(200, 162, 74, 0.55));
}
#reload-ring .rr-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--gold);
  text-shadow: 0 1px 2px #000; text-transform: uppercase;
}
@keyframes rr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

#prompt {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%) translateY(6px);
  font-size: 17px; letter-spacing: 0.1em; color: var(--ink);
  background: linear-gradient(180deg, rgba(22,16,10,0.82), rgba(8,6,4,0.82));
  padding: 8px 18px; border: 1px solid var(--gold); border-radius: 4px; opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), inset 0 0 12px rgba(200,162,74,0.08);
  text-shadow: 0 1px 2px #000; white-space: nowrap;
}
#prompt.on { opacity: 1; transform: translateX(-50%) translateY(0); }

#toast {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%) scale(0.9);
  font-size: 24px; font-weight: bold; letter-spacing: 0.1em; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(200,162,74,0.5); opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
#toast.on { opacity: 1; transform: translateX(-50%) scale(1); }

#announce {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(1.1);
  font-size: 64px; font-weight: bold; letter-spacing: 0.12em; color: var(--blood);
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(155,47,47,0.7); opacity: 0; transition: opacity 0.3s;
}
#announce.on { opacity: 1; animation: announce-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
#announce .dog { color: var(--gold); animation: dog-pulse 0.5s ease-in-out infinite alternate; display: inline-block; }
@keyframes announce-in {
  0% { transform: translate(-50%, -50%) scale(0.4); filter: blur(8px); opacity: 0; letter-spacing: 0.4em; }
  60% { transform: translate(-50%, -50%) scale(1.18); filter: blur(0); opacity: 1; letter-spacing: 0.12em; }
  100% { transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes dog-pulse { from { text-shadow: 0 4px 0 #000, 0 0 18px rgba(200,162,74,0.5); } to { text-shadow: 0 4px 0 #000, 0 0 40px rgba(255,90,40,0.9); transform: scale(1.04); } }

#downbar { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); width: 240px; height: 10px; border: 1px solid var(--blood); display: none; }
#downbar.on { display: block; }
#down-fill { height: 100%; background: var(--blood); width: 100%; }

/* ---------- panels ---------- */
.panel {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(10,8,6,0.55) 0%, rgba(5,4,3,0.92) 100%);
}
.panel.hidden { display: none; }

.logo { line-height: 0.95; }
.logo-top { font-size: 34px; letter-spacing: 0.3em; color: var(--ink); text-shadow: 0 2px 0 #000; }
.logo-bottom {
  font-size: 88px; font-weight: bold; letter-spacing: 0.14em; color: var(--blood);
  text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6);
  animation: logo-flicker 5s infinite;
}
@keyframes logo-flicker {
  0%, 100% { text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6); }
  47% { text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6); }
  48% { text-shadow: 0 5px 0 #000, 0 0 8px rgba(155,47,47,0.25); color: #6e2424; }
  49% { text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6); color: var(--blood); }
  72% { text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6); }
  73% { text-shadow: 0 5px 0 #000, 0 0 6px rgba(155,47,47,0.2); color: #5e1f1f; }
  74% { text-shadow: 0 5px 0 #000, 0 0 40px rgba(155,47,47,0.6); color: var(--blood); }
}
.tag { font-size: 14px; letter-spacing: 0.32em; color: var(--gold); text-shadow: 0 0 12px rgba(200,162,74,0.3); }
.press { margin-top: 26px; font-size: 16px; letter-spacing: 0.24em; color: var(--ink); animation: blink 1.1s steps(2) infinite; }
.foot { position: absolute; bottom: 18px; font-size: 11px; opacity: 0.4; letter-spacing: 0.06em; }
@keyframes blink { 50% { opacity: 0.25; } }

.cs-title, .p-title, .go-title { font-size: 30px; letter-spacing: 0.2em; color: var(--gold); }
.go-title { color: var(--blood); font-size: 56px; text-shadow: 0 4px 0 #000; }
.go-stats { font-size: 18px; letter-spacing: 0.08em; line-height: 1.6; }
.go-stats b { color: var(--gold); }
.cs-hint { font-size: 13px; letter-spacing: 0.1em; opacity: 0.6; }

#char-grid { display: flex; gap: 18px; }
.char-card {
  width: 150px; padding: 14px; border: 2px solid #2a241c; background: rgba(20,16,12,0.7);
  cursor: pointer; transition: border-color 0.12s, transform 0.12s;
}
.char-card:hover, .char-card.sel { border-color: var(--gold); transform: translateY(-4px); }
.char-portrait { width: 100%; height: 110px; border: 1px solid #000; image-rendering: pixelated; }
.char-name { margin-top: 10px; font-size: 13px; letter-spacing: 0.06em; }

button {
  font-family: inherit; font-size: 15px; letter-spacing: 0.14em; color: var(--ink);
  background: #1a140e; border: 2px solid var(--gold); padding: 11px 26px; cursor: pointer; min-width: 240px;
  transition: background 0.12s, color 0.12s;
}
button:hover { background: var(--gold); color: #1a140e; }

/* ---------- controls legend / fps ---------- */
#controls-legend {
  width: 100%; padding: 26px 16px; background: #0a0908; border-top: 1px solid rgba(200,162,74,0.2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cl-title { font-size: 13px; letter-spacing: 0.26em; color: var(--gold); }
.cl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; max-width: 920px; }
.cl-row { display: flex; align-items: center; gap: 8px; }
kbd {
  display: inline-block; min-width: 16px; text-align: center; padding: 3px 8px; font-size: 12px; font-family: inherit;
  color: var(--ink); background: rgba(40,32,22,0.8); border: 1px solid rgba(200,162,74,0.4); border-bottom-width: 2px; border-radius: 4px;
}
.cl-act { font-size: 12px; letter-spacing: 0.06em; color: rgba(232,220,192,0.6); }

#fps { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--green); z-index: 20; }
#fps.hidden { display: none; }

/* ---------- studio footer ---------- */
#site-footer {
  width: 100%; box-sizing: border-box; padding: 38px 16px 56px;
  background: linear-gradient(180deg, #0a0908 0%, #120e0b 100%);
  border-top: 1px solid rgba(200, 162, 74, 0.2);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
#site-footer .scroll-hint { font-size: 12px; letter-spacing: 0.22em; color: rgba(232, 220, 192, 0.4); text-transform: uppercase; }
#site-footer img.studio {
  width: min(440px, 78vw); height: auto; display: block; border-radius: 10px; image-rendering: auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.6);
}
#site-footer .links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
#site-footer .links a {
  color: var(--gold); text-decoration: none; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.15s, color 0.15s;
}
#site-footer .links a:hover { color: #fff; border-color: var(--gold); }
#site-footer .copy { font-size: 11px; letter-spacing: 0.06em; color: rgba(232, 220, 192, 0.32); text-align: center; max-width: 640px; }