@font-face { font-family: "Press Start 2P"; src: url("/assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("/assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-display: swap; }
:root {
  --night: #14082b; --panel: #22103f; --pink: #ff2e97; --cyan: #00e5ff;
  --coin: #ffd400; --text: #f4f0ff;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "VT323", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { background: #07030f; }
body {
  margin: 0; padding: 24px 12px 48px; background: var(--night); color: var(--text);
  font-family: var(--body); font-size: 24px; line-height: 1.25;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px);
}
main { max-width: 760px; margin: 0 auto; }
h1, h2 { font-family: var(--pixel); font-weight: 400; margin: 0; }
h1 { font-size: clamp(22px, 6vw, 40px); line-height: 1.4; color: var(--coin); text-shadow: 4px 4px 0 var(--pink); }
h2 { font-size: 14px; color: var(--cyan); margin-bottom: 16px; line-height: 1.6; }
.skip { position: absolute; left: -999px; background: var(--coin); color: #000; padding: 8px; font-family: var(--pixel); font-size: 10px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.hud { display: flex; justify-content: space-between; gap: 12px; font-family: var(--pixel); font-size: 10px; color: var(--pink); margin-bottom: 28px; }
.hero { text-align: center; padding: 24px 0 36px; }
.hero p { margin: 20px 0 0; }
.start { font-family: var(--pixel); font-size: 12px; color: var(--cyan); margin-top: 28px; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
section { background: var(--panel); border: 4px solid var(--cyan); box-shadow: 6px 6px 0 var(--pink); padding: 20px; margin-bottom: 32px; }
p { margin: 0 0 12px; }
ul { list-style: none; margin: 0; padding: 0; }
li { margin-bottom: 10px; }
li:last-child { margin-bottom: 0; }
li b { color: var(--coin); font-weight: 400; }
.stat { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.stat span { font-family: var(--pixel); font-size: 10px; }
.bar { height: 18px; border: 3px solid var(--text); background: #000; }
.bar i { display: block; height: 100%; width: calc(var(--lv) * 10%); background: repeating-linear-gradient(to right, var(--pink) 0 10px, transparent 10px 12px); }
.js .bar i { width: 0; transition: width .9s steps(10); }
.js .bar i.on { width: calc(var(--lv) * 10%); }
a { color: var(--coin); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn {
  display: inline-block; font-family: var(--pixel); font-size: 12px; line-height: 1.5; background: var(--coin); color: #000;
  padding: 12px 16px; box-shadow: 4px 4px 0 var(--pink); text-decoration: none;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pink); }
.hero .btn { margin-top: 28px; }
footer { text-align: center; font-family: var(--pixel); font-size: 10px; line-height: 2; color: var(--pink); }
footer a { color: var(--cyan); }
.legal h2 { margin-top: 24px; }
@media (max-width: 520px) { .stat { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .start { animation: none; } .js .bar i { transition: none; } }