@font-face {
  font-family: "Press Start 2P";
  src: url(/fonts/press-start-2p-latin-ext.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Press Start 2P";
  src: url(/fonts/press-start-2p-latin.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VT323";
  src: url(/fonts/vt323-latin-ext.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "VT323";
  src: url(/fonts/vt323-latin.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #07070f;
  --panel: rgba(9, 11, 24, 0.9);
  --track: #1b1f33;
  --text: #d8ffe0;
  --muted: #8fb79a;
  --green: #39ff14;
  --cyan: #22d3ee;
  --magenta: #ff3df0;
  --yellow: #ffd23f;
  --orange: #ff7a1a;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --mono: "VT323", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 22px/1.35 var(--mono);
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

a { color: var(--cyan); }

:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }

h1, h2, h3, .btn, .hud, .score, .status, .stats dt, footer, .toast {
  font-family: var(--pixel);
  text-transform: uppercase;
  font-weight: normal;
}

/* Background layers */
#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
}
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
.hud, main, footer { position: relative; z-index: 1; }

/* Pixel border: four hard shadows leave the corners notched */
.pix, .card, .terminal, .btn {
  box-shadow:
    0 -4px 0 0 var(--edge, var(--green)),
    0 4px 0 0 var(--edge, var(--green)),
    -4px 0 0 0 var(--edge, var(--green)),
    4px 0 0 0 var(--edge, var(--green));
}

/* Header */
.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 4px solid var(--track);
  font-size: 11px;
}
.hud a { color: var(--text); text-decoration: none; }
.hud nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hud nav a:hover, .hud nav a:focus-visible { color: var(--yellow); }
.hud nav a:hover::before { content: "▶"; margin-right: 6px; color: var(--yellow); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--green) !important; }
.logo-bar {
  width: 22px;
  height: 14px;
  border-top: 4px solid var(--text);
  border-left: 4px solid var(--muted);
  border-right: 4px solid var(--muted);
}

/* Hero */
.hero {
  min-height: calc(100svh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 16px 64px;
  text-align: center;
}
.score {
  display: flex;
  gap: 32px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.score b { color: var(--text); font-weight: normal; }
.sprite {
  width: 168px;
  height: 182px;
  image-rendering: pixelated;
}
h1 {
  margin: 0;
  font-size: clamp(26px, 8vw, 68px);
  line-height: 1.15;
  color: var(--text);
  text-shadow: 4px 4px 0 var(--magenta), -3px -3px 0 var(--cyan);
}
h1 span {
  display: block;
  margin-top: 14px;
  font-size: 0.32em;
  letter-spacing: 0.9em;
  margin-right: -0.9em;
  color: var(--green);
  text-shadow: none;
}
.tagline { margin: 0; font-size: clamp(22px, 4vw, 30px); color: var(--muted); }

.btn {
  --edge: #a07a00;
  display: inline-block;
  padding: 16px 22px;
  background: var(--yellow);
  color: #120d00;
  font-size: 14px;
  text-decoration: none;
  transition: transform 80ms steps(2);
}
.btn:hover, .btn:focus-visible { transform: translate(2px, 2px); background: #ffe27a; }
.blink-arrow::before { content: "▶ "; animation: blink 1s steps(1) infinite; }

/* Sections */
section[id] { scroll-margin-top: 100px; }
.panel {
  max-width: 1040px;
  margin: 0 auto 72px;
  padding: 40px 28px;
  background: var(--panel);
  border-top: 4px solid var(--track);
  border-bottom: 4px solid var(--track);
}
@media (min-width: 1100px) {
  .panel { border: 4px solid var(--track); }
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(18px, 3.4vw, 26px);
  color: var(--green);
  text-shadow: 3px 3px 0 #0b3d0b;
}
h2::before { content: "> "; color: var(--muted); }
.lead { margin: 0 0 32px; max-width: 46ch; color: var(--text); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
  padding: 4px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: #0d1022;
  transition: transform 120ms steps(3);
}
.card:nth-child(1) { --edge: var(--magenta); }
.card:nth-child(2) { --edge: var(--orange); }
.card:nth-child(3) { --edge: var(--cyan); }
.card:hover { transform: translateY(-6px); }
.card h3 { margin: 0; font-size: 13px; line-height: 1.5; color: var(--edge); }
.card p { margin: 0; color: var(--muted); }
.card .status { margin-top: auto; font-size: 9px; color: var(--yellow); }
.icon { width: 64px; height: 64px; image-rendering: pixelated; }

.progress, .meter {
  position: relative;
  display: block;
  height: 12px;
  background: var(--track);
}
.progress::after, .meter::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: repeating-linear-gradient(90deg, var(--fill, var(--green)) 0 10px, transparent 10px 14px);
}
.p20 { --w: 20%; } .p40 { --w: 40%; } .p60 { --w: 60%; }
.m2 { --w: 20%; --fill: var(--magenta); } .m8 { --w: 80%; --fill: var(--orange); }
.m9 { --w: 90%; --fill: var(--cyan); } .m10 { --w: 100%; }

.terminal {
  --edge: #1f5f1f;
  margin: 4px;
  padding: 20px 22px;
  background: #020602;
  color: var(--green);
  font: 24px/1.3 var(--mono);
  white-space: pre;
  overflow-x: auto;
  min-height: 9.5em;
}
.terminal.typing::after { content: "█"; animation: blink 0.8s steps(1) infinite; }

.stats { display: grid; gap: 16px; max-width: 560px; margin: 0; }
.stats div { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 16px; }
.stats dt { font-size: 10px; color: var(--muted); }
.stats dd { display: contents; }

.contact { text-align: center; }
.contact .lead { margin-inline: auto; }
.contact h2::before { content: none; }
.contact h2 { color: var(--yellow); text-shadow: 3px 3px 0 #5a4300; }
.contact .btn { font-size: clamp(10px, 3vw, 14px); word-break: break-all; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 40px;
  font-size: 9px;
  color: var(--muted);
}
footer p { margin: 0; }
.hint { font: 18px var(--mono); opacity: 0.35; letter-spacing: 0.2em; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  margin: 0;
  padding: 14px 18px;
  max-width: calc(100% - 32px);
  background: var(--magenta);
  color: #1a0018;
  font-size: 11px;
  visibility: hidden;
  transform: translate(-50%, 200%);
  transition: transform 200ms steps(4), visibility 200ms;
}
.toast.show { visibility: visible; transform: translate(-50%, 0); }

/* Konami god mode */
.god h1 { animation: hue 1.2s linear infinite; }

.blink { animation: blink 1.2s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes hue { to { filter: hue-rotate(360deg); } }

@media (max-width: 600px) {
  body { font-size: 20px; }
  .panel { padding: 32px 16px; margin-bottom: 48px; }
  .score { gap: 20px; font-size: 9px; }
  .stats div { grid-template-columns: 72px 1fr 24px; gap: 10px; }
  .terminal { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}