@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --ink: #f1f1e9;
  --muted: #989b90;
  --paper: #11120f;
  --line: #33352e;
  --acid: #d8ff45;
  --shell: #c9c7bb;
  --shell-ink: #37383b;
  --berry: #8e164f;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    radial-gradient(circle at 72% 16%, rgba(216,255,69,0.07), transparent 26rem),
    var(--paper);
  background-size: 100% 24px, auto, auto;
}
button { font: inherit; }

.page-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.masthead {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
}
.wordmark { color: var(--ink); text-decoration: none; font-weight: 500; letter-spacing: -0.06em; font-size: 19px; }
.wordmark i { color: var(--acid); font-style: normal; margin: 0 4px; }
.milestone { color: var(--muted); font-size: 10px; letter-spacing: 0.1em; }
.milestone span, .power-light {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px rgba(216,255,69,0.7);
  margin-right: 9px;
}

.hero {
  min-height: 640px;
  padding: 80px 0 90px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: end;
}
.eyebrow { margin: 0 0 18px; color: var(--acid); font: 500 10px "DM Mono", monospace; letter-spacing: 0.14em; }
.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(72px, 9vw, 128px);
  line-height: 0.85;
  letter-spacing: -0.078em;
  font-weight: 500;
}
.hero-copy { padding-bottom: 7px; }
.hero-copy > p { margin: 0 0 35px; color: #c8cac0; font-size: 17px; line-height: 1.7; }
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; color: var(--muted); font: 400 10px "DM Mono", monospace; text-transform: uppercase; }
.pipeline b { color: var(--acid); font-weight: 400; }

.play-area {
  padding: 100px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  align-items: center;
}
.play-copy { align-self: start; padding-top: 80px; }
.play-copy h2, .section-heading h2, .boundary h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.06em;
  font-weight: 500;
}
.play-copy > p:not(.eyebrow) { max-width: 410px; margin: 30px 0 45px; color: #b9bbb2; font-size: 15px; line-height: 1.75; }
.runtime-facts { margin: 0; border-top: 1px solid var(--line); }
.runtime-facts div { display: grid; grid-template-columns: 110px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.runtime-facts dt { color: var(--muted); font: 500 9px "DM Mono", monospace; letter-spacing: 0.1em; }
.runtime-facts dd { margin: 0; font: 500 10px "DM Mono", monospace; letter-spacing: 0.08em; }
#rom-status { color: #e0a564; }
#rom-status.ready { color: var(--acid); }
#rom-status.error { color: #ff8066; }

.gameboy {
  position: relative;
  width: min(100%, 570px);
  min-height: 850px;
  justify-self: end;
  padding: 48px 44px 55px;
  border-radius: 24px 24px 95px 24px;
  color: var(--shell-ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.52), transparent 25%),
    var(--shell);
  box-shadow: 0 42px 100px rgba(0,0,0,0.38), inset 0 1px #fff, inset 0 -2px rgba(0,0,0,0.13);
}
.gameboy::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 15px;
  height: 5px;
  border-top: 1px solid rgba(0,0,0,0.17);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.power-row { position: absolute; left: 17px; top: 164px; width: 50px; color: #6d6c70; font: 500 7px "DM Mono", monospace; text-align: center; }
.power-light { display: block; margin: 0 auto 6px; width: 6px; height: 6px; background: #d94045; box-shadow: 0 0 8px rgba(217,64,69,0.8); }

.screen-bezel {
  padding: 32px 49px 36px;
  border-radius: 14px 14px 48px 14px;
  background: #4a4850;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), 0 1px rgba(255,255,255,0.4);
}
#game { width: 100%; aspect-ratio: 160/144; background: #8e9c5b; box-shadow: inset 0 0 22px rgba(0,0,0,0.28), 0 0 0 3px #2d2c30; }
#game canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.screen-brand { margin: 10px 48px 0; color: #626169; font: 500 7px "DM Mono", monospace; letter-spacing: 0.07em; }

.controller { display: grid !important; grid-template-columns: 1fr 1fr; position: relative; margin-top: 74px; min-height: 190px; touch-action: none; user-select: none; }
.dpad {
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  filter: drop-shadow(0 5px 2px rgba(0,0,0,0.2));
  transform: rotate(-1deg);
}
.dpad button, .dpad span { border: 0; margin: 0; padding: 0; background: #292a2b; color: #555; font-size: 9px; cursor: pointer; }
#controller_up { grid-column: 2; grid-row: 1; border-radius: 5px 5px 0 0; }
#controller_left { grid-column: 1; grid-row: 2; border-radius: 5px 0 0 5px; }
.dpad span { grid-column: 2; grid-row: 2; }
#controller_right { grid-column: 3; grid-row: 2; border-radius: 0 5px 5px 0; }
#controller_down { grid-column: 2; grid-row: 3; border-radius: 0 0 5px 5px; }
.dpad button:active, .dpad .btnPressed { background: #1e1f20; transform: translateY(2px); }

.action-buttons { display: flex; justify-content: flex-end; gap: 18px; padding-top: 34px; transform: rotate(-12deg); }
.roundBtn {
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #b22a69, var(--berry) 70%);
  color: #d8b9c9;
  font: 600 17px "DM Mono", monospace;
  box-shadow: 0 6px 3px rgba(0,0,0,0.24), inset 0 1px rgba(255,255,255,0.28);
}
.roundBtn:active, .roundBtn.btnPressed { transform: translateY(3px); box-shadow: 0 2px 2px rgba(0,0,0,0.25); }
.system-buttons { position: absolute; bottom: 3px; left: 50%; display: flex; gap: 12px; transform: translateX(-50%) rotate(-4deg); }
.capsuleBtn { width: 64px; height: 20px; border: 0; border-radius: 20px; background: #6d6c68; color: #53524f; font: 600 7px "DM Mono", monospace; box-shadow: 0 3px 2px rgba(0,0,0,0.24); }
.speaker { position: absolute; right: 38px; bottom: 37px; display: flex; gap: 7px; transform: rotate(-25deg); }
.speaker i { display: block; width: 6px; height: 62px; border-radius: 5px; background: rgba(73,73,70,0.32); box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25); }

.evidence { padding: 115px 0 105px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.section-heading > p { margin: 0 0 5px; color: #b7b9b0; font-size: 15px; line-height: 1.7; }
.metrics { display: grid; grid-template-columns: 1fr 1fr 1.2fr 2.4fr; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics div { min-width: 0; padding: 24px 20px; border-right: 1px solid var(--line); }
.metrics div:first-child { padding-left: 0; }
.metrics div:last-child { border-right: 0; }
.metrics dt { color: var(--muted); font: 500 9px "DM Mono", monospace; letter-spacing: 0.11em; }
.metrics dd { margin: 12px 0 0; font: 400 18px "DM Mono", monospace; }
.metrics .hash dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #c9cbc0; }
.artifact-links { display: flex; gap: 30px; margin-top: 24px; }
.artifact-links a, .boundary article a { color: var(--ink); font: 400 11px "DM Mono", monospace; text-underline-offset: 5px; }

.boundary { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 90px; padding: 100px 0; border-top: 1px solid var(--line); }
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.boundary article { padding: 26px; border: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.badge { display: inline-block; padding: 5px 7px; font: 500 8px "DM Mono", monospace; letter-spacing: 0.1em; }
.badge.ours { background: var(--acid); color: #161713; }
.badge.host { border: 1px solid #5a5c53; color: #b4b6ad; }
.boundary h3 { margin: 30px 0 14px; font-size: 18px; }
.boundary article p { color: #aaaca3; font-size: 13px; line-height: 1.65; }
.boundary article code { font-family: "DM Mono", monospace; color: var(--ink); }

.next-step { display: grid; grid-template-columns: 180px 1fr; gap: 25px; padding: 35px 0; border-top: 1px solid var(--line); }
.next-step span { color: var(--acid); font: 500 9px "DM Mono", monospace; letter-spacing: 0.12em; }
.next-step p { margin: 0; font-size: 20px; letter-spacing: -0.025em; }
footer { min-height: 100px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 400 9px "DM Mono", monospace; letter-spacing: 0.1em; }

@media (max-width: 880px) {
  .hero, .play-area, .section-heading, .boundary { grid-template-columns: 1fr; }
  .hero { gap: 45px; min-height: auto; }
  .play-area { gap: 65px; }
  .play-copy { padding-top: 0; }
  .gameboy { justify-self: center; }
  .section-heading, .boundary { gap: 50px; }
}

@media (max-width: 600px) {
  .page-shell { width: min(100% - 24px, 480px); }
  .masthead { height: 70px; }
  .milestone { font-size: 7px; }
  .hero { padding: 62px 0 68px; }
  .hero h1 { font-size: clamp(63px, 20vw, 90px); }
  .hero-copy > p { font-size: 15px; }
  .play-area { padding: 70px 0; }
  .gameboy { width: 100%; min-height: 685px; padding: 34px 22px 42px; border-radius: 18px 18px 65px 18px; }
  .screen-bezel { padding: 22px 34px 28px; }
  .power-row { left: 6px; top: 118px; transform: scale(0.8); }
  .screen-brand { margin-left: 34px; }
  .controller { margin-top: 47px; min-height: 165px; }
  .dpad { width: 117px; height: 117px; grid-template-columns: repeat(3, 39px); grid-template-rows: repeat(3, 39px); }
  .roundBtn { width: 54px; height: 54px; }
  .action-buttons { gap: 10px; }
  .system-buttons { bottom: 8px; }
  .speaker { right: 25px; bottom: 24px; gap: 5px; }
  .speaker i { width: 4px; height: 45px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics div { border-bottom: 1px solid var(--line); }
  .metrics div:nth-child(2) { border-right: 0; }
  .metrics .hash { grid-column: 1 / -1; border-bottom: 0; }
  .artifact-links { flex-direction: column; gap: 15px; }
  .boundary-grid { grid-template-columns: 1fr; }
  .next-step { grid-template-columns: 1fr; }
  footer { align-items: flex-start; justify-content: center; flex-direction: column; gap: 8px; }
}

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