:root {
  color-scheme: dark;
  --ink: #0b111b;
  --paper: #fff3d2;
  --amber: #f4c555;
  --muted: #b0b5bd;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: var(--ink);
  color: var(--paper);
}
* { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 42%, #30281c55 0, #0b111b00 56%),
    linear-gradient(#ffffff02 1px, transparent 1px),
    linear-gradient(90deg, #ffffff02 1px, transparent 1px),
    var(--ink);
  background-size: auto, 24px 24px, 24px 24px, auto;
}
.ceiling { height: 4px; background: #1c2533; }
.ceiling span { display: block; width: 40px; height: 4px; margin: auto; background: #626575; }
main { position: relative; isolation: isolate; flex: 1; width: 100%; padding: 0 24px 48px; }
.lamp { position: relative; z-index: 1; width: 240px; height: 240px; margin: 0 auto; }
.lamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fixture { transform-origin: 120px 0; animation: settle 2.6s ease-out both; }
.halo { animation: warm-up 1.5s ease-out both; }
.spotlight {
  position: absolute;
  z-index: -1;
  top: 180px;
  left: 50%;
  width: min(920px, 100%);
  height: 440px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(#f4c5550d, #f4c55504 70%, transparent);
  pointer-events: none;
}
.intro { position: relative; text-align: center; max-width: 760px; margin: 6px auto 0; }
p { margin: 0; }
.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; }
/* Exact game glyphs, drawn as static SVG so no external font is required. */
.pixel-line { display: block; max-width: 100%; height: auto; margin: 0 auto; shape-rendering: crispEdges; }
.description .pixel-line + .pixel-line { margin-top: 12px; }
.status .pixel-line { margin: 0; }
.eyebrow { color: var(--muted); font-size: 11px; line-height: 1.8; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 30px auto 18px; line-height: 1; }
h1 img { display: block; width: min(560px, 100%); height: auto; margin: auto; filter: drop-shadow(0 5px 16px #f4c55512); }
.tagline { font-size: clamp(16px, 2.5vw, 22px); line-height: 1.55; letter-spacing: -.02em; color: var(--paper); }
.launch { margin-top: 48px; }
.status { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--amber); font-size: 17px; line-height: 1.6; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status .status-light { flex: 0 0 6px; width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 12px #f4c55566; }
.date { margin-top: 9px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.description { margin-top: 36px; color: var(--muted); font-size: 12px; line-height: 1.9; }
footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 24px 28px; color: #a0a7b2; font-size: 10px; line-height: 1.7; letter-spacing: .12em; }
footer > span { width: 32px; height: 1px; background: #3c424b; }
@keyframes settle { 0% { transform: rotate(-3deg); } 30% { transform: rotate(1.7deg); } 58% { transform: rotate(-.7deg); } 80% { transform: rotate(.25deg); } 100% { transform: rotate(0); } }
@keyframes warm-up { from { opacity: .15; } to { opacity: 1; } }
@media (max-width: 480px) {
  main { padding: 0 20px 30px; }
  .lamp { width: 200px; height: 200px; }
  .spotlight { top: 150px; height: 360px; }
  .intro { margin-top: 12px; }
  .eyebrow { font-size: 9px; letter-spacing: .1em; }
  h1 { margin-top: 24px; margin-bottom: 19px; }
  .launch { margin-top: 40px; }
  .description { margin-top: 29px; }
  footer { padding-bottom: 24px; }
}
@media (max-height: 700px) and (min-width: 481px) {
  .lamp { width: 185px; height: 185px; }
  .spotlight { top: 140px; }
  h1 { margin-top: 20px; }
  .launch { margin-top: 28px; }
  .description { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fixture, .halo { animation: none; }
}
@media (forced-colors: active) {
  .lamp, .spotlight, .ceiling { display: none; }
  .intro { margin-top: 60px; }
  .status .status-light, footer > span { background: CanvasText; box-shadow: none; }
}