:root {
  --bg: #14121f;
  --panel: #1f1b30;
  --panel-2: #2a2541;
  --line: #3d3660;
  --text: #f4ecd8;
  --muted: #9c93b8;
  --gold: #ffcd4a;
  --red: #e0533d;
  --green: #6fcf5f;
  --pix: "Press Start 2P", monospace;
  --mono: "VT323", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 22px/1.25 var(--mono);
  min-height: 100vh; display: flex; flex-direction: column;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  background-color: var(--bg);
}
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 0, transparent, var(--bg) 70%); pointer-events: none; z-index: -1; }
a { color: var(--gold); text-decoration: none; }
main { width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 16px; flex: 1; }

/* Шапка */
.top { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--panel); border-bottom: 4px solid var(--line); position: sticky; top: 0; z-index: 5; }
.logo { display: flex; align-items: center; gap: 10px; font: 13px var(--pix); color: var(--text); flex: 1; }
.logo img { image-rendering: pixelated; }
nav { display: flex; gap: 6px; }
nav a { font: 10px var(--pix); color: var(--muted); padding: 10px 12px; border: 3px solid transparent; }
nav a.on, nav a:hover { color: var(--text); border-color: var(--line); background: var(--panel-2); }
.burger { display: none; background: none; border: 3px solid var(--line); color: var(--text); font-size: 20px; padding: 2px 10px; cursor: pointer; }

/* Главная */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; margin-bottom: 24px; }
.badge { font: 9px var(--pix); background: var(--red); color: var(--text); padding: 6px 8px; display: inline-block; box-shadow: 3px 3px 0 #000; }
h1 { font: 26px/1.4 var(--pix); margin: 16px 0; text-shadow: 3px 3px 0 #000; }
h2 { font: 16px var(--pix); margin: 0 0 20px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
h3 { font: 11px/1.6 var(--pix); margin: 0 0 10px; }
p { margin: 0 0 10px; color: var(--muted); }
.stats { display: grid; gap: 10px; }
.stats div { background: var(--panel); border: 3px solid var(--line); padding: 10px 14px; box-shadow: 4px 4px 0 #000; }
.stats b { font: 14px var(--pix); color: var(--gold); display: block; margin-bottom: 4px; }
.stats small { color: var(--muted); font-size: 18px; }

.frame { background: var(--panel); border: 4px solid var(--line); box-shadow: 6px 6px 0 #000; padding: 10px; margin-bottom: 24px; }
canvas { display: block; width: 100%; aspect-ratio: 8 / 3; image-rendering: pixelated; background: #2b4a6b; cursor: pointer; touch-action: manipulation; }
.hud { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding-top: 10px; color: var(--muted); font-size: 18px; }

.pix { font: 9px var(--pix); background: var(--panel-2); color: var(--text); border: 3px solid var(--line); padding: 8px 10px; cursor: pointer; box-shadow: 3px 3px 0 #000; }
.pix:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.pix.on { background: var(--gold); color: #1a1426; border-color: #000; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--panel); border: 3px solid var(--line); padding: 16px; box-shadow: 4px 4px 0 #000; }

/* Новости */
.post { background: var(--panel); border: 3px solid var(--line); padding: 16px 18px; margin-bottom: 16px; box-shadow: 4px 4px 0 #000; }
.post time { font: 9px var(--pix); color: var(--red); }
.post h3 { margin-top: 10px; }
.post ul { margin: 0; padding-left: 20px; color: var(--muted); }
.post li::marker { content: "> "; color: var(--gold); }

/* Рекорды */
.tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.board { width: 100%; border-collapse: collapse; background: var(--panel); border: 3px solid var(--line); box-shadow: 4px 4px 0 #000; margin-bottom: 14px; }
.board th { font: 9px var(--pix); color: var(--muted); text-align: left; padding: 12px; border-bottom: 3px solid var(--line); }
.board td { padding: 8px 12px; border-bottom: 1px dashed var(--line); }
.board tr:nth-child(1) td:first-child { color: var(--gold); }
.board tr:nth-child(2) td:first-child { color: #d8d8e8; }
.board tr:nth-child(3) td:first-child { color: #d08a4a; }
.board tr.me td { background: var(--panel-2); color: var(--gold); }
.muted { color: var(--muted); }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 18px 16px; color: var(--muted); font-size: 18px; border-top: 4px solid var(--line); background: var(--panel); }

@media (max-width: 720px) {
  body { font-size: 20px; }
  .burger { display: block; }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--panel); border-bottom: 4px solid var(--line); padding: 8px; }
  nav.open { display: flex; }
  .hero, .cards { grid-template-columns: 1fr; }
  h1 { font-size: 18px; }
}