:root {
  color-scheme: dark;
  --ink: #080910;
  --panel: rgba(13, 14, 20, .9);
  --paper: #f2eee3;
  --muted: #a3a4aa;
  --accent: #c9ff4d;
  --accent-2: #4b6fff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-shell { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.game-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
canvas {
  display: block;
  width: min(100%, 177.7778vh);
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  outline: none;
  touch-action: none;
}
canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

canvas:not(.pixel-fx-layer) { filter: saturate(1.12) contrast(1.045); }
.pixel-fx-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: block;
  width: min(100%, 177.7778vh);
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  image-rendering: auto;
}

.hud { position: absolute; inset: 10px 12px auto; z-index: 5; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; color: var(--paper); font: 800 clamp(9px, 1.5vw, 12px)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 2px 2px #000; }
.hud > span { padding: 7px 9px 6px; border: 1px solid rgba(255,255,255,.15); background: linear-gradient(135deg,rgba(4,6,12,.78),rgba(4,6,12,.42)); box-shadow: inset 0 1px rgba(255,255,255,.08), 3px 3px 0 rgba(0,0,0,.24); }
.hud b { color: var(--accent); }

.overlay { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(18px, 5vw, 44px); text-align: center; background: linear-gradient(rgba(8, 9, 16, .68), rgba(8, 9, 16, .94)); }
.overlay[hidden] { display: none; }
.overlay::before { content:""; position:absolute; inset:12px; pointer-events:none; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:inset 0 0 0 5px rgba(0,0,0,.16),inset 0 0 45px rgba(0,0,0,.42); }
.overlay::after { content:"CLG / VISUAL SYSTEM 05X"; position:absolute; right:20px; bottom:18px; color:color-mix(in srgb,var(--accent) 70%,white); font:700 7px/1 var(--mono); letter-spacing:.16em; opacity:.7; }
.eyebrow { margin: 0; color: var(--accent); font: 800 clamp(7px, 1.4vw, 10px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.overlay h1 { margin: clamp(8px, 2vw, 16px) 0 10px; font: 900 clamp(42px, 11vw, 96px)/.8 var(--display); letter-spacing: -.035em; text-transform: uppercase; text-shadow:3px 3px 0 var(--accent-2),7px 7px 0 rgba(0,0,0,.42); }
.overlay-copy { max-width: 570px; margin: 0; color: var(--muted); font-size: clamp(12px, 2vw, 15px); line-height: 1.5; }

.game-button { margin-top: clamp(14px, 3vw, 24px); min-width: 145px; padding: 14px 18px; border: 1px solid var(--accent); color: var(--ink); background: var(--accent); box-shadow: 7px 7px 0 var(--accent-2); cursor: pointer; font: 900 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .15s, box-shadow .15s; }
.game-button:hover, .game-button:focus-visible { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--accent-2); outline: none; }
.game-button.secondary { color: var(--paper); background: transparent; box-shadow: none; }
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.panel { position: absolute; z-index: 4; padding: 14px; border: 1px solid rgba(255,255,255,.18); background: var(--panel); box-shadow: 8px 8px 0 rgba(0,0,0,.3); }

@media (max-height: 330px) {
  .overlay h1 { font-size: 44px; }
  .overlay-copy { font-size: 11px; }
  .game-button { margin-top: 12px; padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) { .game-button { transition: none; } }