:root {
  --cream: #f4f0e6;
  --night: #0b1014;
  --green: #a9ff68;
  --orange: #ff6b35;
  --blue: #73c8ff;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--cream); background: var(--night); font-family: var(--sans); }
button { font: inherit; }

.game-shell { position: relative; min-height: 100svh; overflow: hidden; background: #111a20; }
#game-canvas { position: absolute; inset: 0; touch-action: none; }
#game-canvas canvas { display: block; width: 100%; height: 100%; }

#aim-reticle {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(244, 240, 230, .88);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: border-color .15s ease, transform .08s linear;
}

#aim-reticle::before, #aim-reticle::after, #aim-reticle i::before, #aim-reticle i::after { content: ""; position: absolute; background: var(--green); }
#aim-reticle::before, #aim-reticle::after { top: 50%; width: 7px; height: 1px; }
#aim-reticle::before { right: calc(100% + 4px); }
#aim-reticle::after { left: calc(100% + 4px); }
#aim-reticle i::before, #aim-reticle i::after { left: 50%; width: 1px; height: 7px; }
#aim-reticle i::before { bottom: calc(100% + 4px); }
#aim-reticle i::after { top: calc(100% + 4px); }
#aim-reticle.is-drawing { border-color: var(--orange); transform: translate(-50%, -50%) scale(1.22); }

.game-header {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  padding: 1.35rem clamp(1.25rem, 4vw, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(244, 240, 230, .14);
  background: linear-gradient(#0b1014aa, transparent);
}

.game-brand { display: flex; align-items: center; gap: .65rem; color: var(--cream); font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-decoration: none; }
.game-brand span { padding: .3rem .4rem; color: var(--green); background: var(--night); font: 800 .85rem var(--mono); }
.game-mode, .hud-label, .game-kicker { margin: 0; font: 750 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.game-mode { color: #c5cdcf; }
.game-mode b { color: var(--orange); }

.game-hud {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  min-width: 210px;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--green);
  background: rgba(11, 16, 20, .78);
  backdrop-filter: blur(8px);
}

.hud-label { display: block; margin-bottom: .3rem; color: #b9c2c5; }
.game-hud strong { color: var(--cream); font-size: .9rem; }
.power-label { display: block; margin-top: .8rem; color: #b9c2c5; font: .6rem var(--mono); letter-spacing: .1em; }
.power-meter { display: block; width: 100%; height: 5px; margin-top: .4rem; background: rgba(244, 240, 230, .18); }
.power-meter i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--green), var(--orange)); transition: width .08s linear; }
.game-help { position: absolute; z-index: 2; bottom: 1.2rem; left: clamp(1.25rem, 4vw, 4rem); margin: 0; color: rgba(244, 240, 230, .72); font: .68rem var(--mono); letter-spacing: .06em; }

@media (max-width: 640px) {
  .game-header { align-items: flex-start; flex-direction: column; }
  .game-mode { font-size: .59rem; }
  .game-hud { bottom: 3.7rem; left: 1.25rem; right: auto; }
}