:root {
  color-scheme: dark;
  --ink: #080906;
  --panel: #11130f;
  --panel-2: #191c16;
  --line: rgba(235, 238, 224, 0.18);
  --paper: #f1f2e9;
  --muted: #9da296;
  --buy: #d9fb1e;
  --buy-dark: #879d08;
  --fault: #ff5c45;
  --radius: 22px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(circle at 77% 8%, rgba(217, 251, 30, 0.08), transparent 28rem),
    var(--ink);
  color: var(--paper);
  min-width: 0;
}

button, a { font: inherit; }

a { color: inherit; }

.fallback-header { display: none; }

main { overflow: clip; }

.boot,
.library,
.submission,
.arcade-footer {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
}

.boot {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(540px, 1.18fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: calc(100svh - 112px);
  padding: 80px 0 96px;
}

.system-line,
.eyebrow,
.console-rail,
.console-footer,
.screen-copy span,
.cartridge-number,
.cartridge-rule,
.cartridge-meta,
.arcade-footer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.system-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 44px;
  color: var(--muted);
  font-size: 11px;
}

.system-line i { width: 1px; height: 12px; background: var(--line); }

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--buy);
  box-shadow: 0 0 16px rgba(217, 251, 30, 0.8);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--buy);
  font-size: 11px;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 28px;
  font-size: clamp(54px, 6.3vw, 108px);
  line-height: 0.82;
  letter-spacing: -0.075em;
  font-weight: 900;
}

h1 span { color: var(--buy); }

.hero-deck {
  margin-bottom: 36px;
  color: var(--muted);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.4;
}

.hero-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-stamp strong {
  padding: 10px 13px 9px;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1;
}

.hero-stamp strong:last-child { color: var(--ink); background: var(--buy); border-color: var(--buy); }

.console {
  position: relative;
  padding: 18px;
  border: 1px solid #33372f;
  border-radius: 38px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.065), transparent 20%),
    linear-gradient(155deg, #20231d, #0c0e0b 68%);
  box-shadow: 0 40px 90px rgba(0,0,0,0.44), inset 0 1px rgba(255,255,255,0.1);
}

.console::before,
.console::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 34%;
  height: 14px;
  z-index: -1;
  border-radius: 0 0 18px 18px;
  background: #050604;
}

.console::before { left: 8%; }
.console::after { right: 8%; }

.console-rail,
.console-footer {
  display: flex;
  justify-content: space-between;
  color: #aeb2a6;
  font-size: 9px;
}

.console-rail { padding: 6px 8px 18px; }

.console-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.88fr) minmax(200px, 1.12fr);
  min-height: 350px;
  overflow: hidden;
  border: 10px solid #050604;
  border-radius: 20px;
  background: #0c0e0a;
  box-shadow: inset 0 0 44px rgba(0,0,0,0.82), 0 1px rgba(255,255,255,0.07);
}

.screen-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.25;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,0.035) 4px);
  mix-blend-mode: screen;
}

.screen-art { position: relative; min-height: 330px; overflow: hidden; background: #161814; }

html[data-cartridge="buy-bounce"] .screen-art {
  background:
    linear-gradient(142deg, transparent 0 30%, rgba(217,251,30,0.18) 30.4% 31.2%, transparent 31.6% 48%, rgba(217,251,30,0.32) 48.4% 49.2%, transparent 49.6% 69%, rgba(217,251,30,0.12) 69.4% 70.2%, transparent 70.6%),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(217,251,30,0.06) 30px),
    #090b07;
}

.screen-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.13);
  transition: opacity 160ms ease, transform 260ms ease;
}

html[data-cartridge="buy-bounce"] .screen-art img {
  object-fit: contain;
  padding: 31% 11%;
  filter: saturate(0.92) contrast(1.08) drop-shadow(0 15px 26px rgba(0,0,0,0.5));
  transform: rotate(-5deg);
}

html[data-cartridge="buy-bounce"] .console.is-switching .screen-art img { transform: rotate(-5deg) scale(1.035); }

.console.is-switching .screen-art img { opacity: 0.28; transform: scale(1.035); }

.screen-index {
  position: absolute;
  left: 18px;
  bottom: 15px;
  padding: 6px 8px;
  color: var(--ink);
  background: var(--buy);
  font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.screen-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 58px);
}

.screen-copy span { color: var(--buy); font-size: 9px; }

.screen-copy strong {
  display: block;
  margin: 16px 0 18px;
  font-size: clamp(32px, 4vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.screen-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.screen-credit {
  width: fit-content;
  margin-top: 22px;
  color: var(--paper);
  font: 800 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--buy);
}

.screen-credit:hover,
.screen-credit:focus-visible { color: var(--buy); }

.console-controls {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px 12px 18px;
}

.d-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.d-pad button {
  min-height: 46px;
  border: 1px solid #3b3f36;
  border-radius: 10px;
  color: var(--paper);
  background: #080a07;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 3px 0 #020302;
}

.d-pad button:hover, .d-pad button:focus-visible { border-color: var(--buy); color: var(--buy); }
.d-pad button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,0.04), 0 1px 0 #020302; }

.press-deck { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

.canonical-press {
  position: relative;
  width: min(260px, 58%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 15px 17px rgba(0,0,0,0.48));
  transition: transform 140ms ease, filter 160ms ease;
}

.canonical-press img { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.canonical-press:hover, .canonical-press:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 18px 24px rgba(217,251,30,0.17)); }
.canonical-press:active, .canonical-press.is-pressed { transform: translateY(5px) scale(0.985); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.5)); }

.press-glow {
  position: absolute;
  inset: 24% 11% 13%;
  border-radius: 999px;
  background: rgba(217,251,30,0.38);
  filter: blur(28px);
  opacity: 0;
  transition: opacity 160ms ease;
}

.canonical-press:hover .press-glow, .canonical-press:focus-visible .press-glow { opacity: 1; }

#launchHint { max-width: 126px; color: var(--muted); font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.11em; }
#launchHint b { color: var(--buy); }

.console-footer { padding: 14px 8px 2px; border-top: 1px solid #2e322a; }

.library { padding: 112px 0 132px; }

.section-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 430px);
  gap: 40px;
  align-items: end;
  margin-bottom: 46px;
}

.section-head h2,
.submission h2 {
  margin-bottom: 0;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.section-head > p { margin: 0; color: var(--muted); line-height: 1.55; }

.cartridge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.cartridge {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: #0e100d;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.cartridge:hover { transform: translateY(-4px); border-color: rgba(217,251,30,0.45); }
.cartridge.is-selected { border-color: var(--buy); background: #14170e; }

.cartridge::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15%;
  width: 70%;
  height: 11px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #0a0b08;
}

.cartridge-select {
  display: grid;
  grid-template-columns: minmax(150px, 0.64fr) minmax(180px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 14px 24px;
  width: 100%;
  padding: 10px;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.cartridge-number { grid-column: 2; align-self: end; color: var(--buy); font-size: 9px; }

.cartridge-cover { grid-row: 1 / span 3; overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: #1d2118; }
.cartridge-cover img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.05); transition: transform 300ms ease; }
.cartridge:hover .cartridge-cover img, .cartridge-select:focus-visible .cartridge-cover img { transform: scale(1.025); }

.cartridge-cover--bounce {
  background:
    linear-gradient(145deg, transparent 0 35%, rgba(217,251,30,0.22) 35.5% 37%, transparent 37.5% 53%, rgba(217,251,30,0.48) 53.5% 55%, transparent 55.5%),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(217,251,30,0.07) 21px),
    #090b07;
}

.cartridge-cover--bounce img {
  object-fit: contain;
  padding: 31% 9%;
  transform: rotate(-5deg);
  filter: saturate(0.92) contrast(1.08) drop-shadow(0 12px 20px rgba(0,0,0,0.56));
}

.cartridge:hover .cartridge-cover--bounce img,
.cartridge-select:focus-visible .cartridge-cover--bounce img { transform: rotate(-5deg) scale(1.035); }

.cartridge-title { align-self: end; font-size: clamp(32px, 4vw, 66px); line-height: 0.85; letter-spacing: -0.06em; font-weight: 900; }

.cartridge-rule { align-self: start; color: var(--muted); font-size: 8px; line-height: 1.7; }
.cartridge-rule i { display: inline-block; width: 3px; height: 3px; margin: 0 4px 2px; border-radius: 50%; background: var(--buy); }

.cartridge-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.cartridge-meta span,
.cartridge-meta a { padding: 6px 8px; border: 1px solid var(--line); }
.creator-credit { color: var(--paper); text-decoration: none; }
.creator-credit:hover, .creator-credit:focus-visible { color: var(--buy); border-color: var(--buy); }

.load-link,
.submit-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 14px;
  color: var(--ink);
  background: var(--buy);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.load-link:hover, .load-link:focus-visible, .submit-link:hover, .submit-link:focus-visible { background: var(--paper); }

.submission {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(32px, 7vw, 100px);
  align-items: center;
  margin-bottom: 112px;
  padding: clamp(36px, 6vw, 76px);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--buy);
}

.submission .eyebrow { color: rgba(8,9,6,0.58); }
.submission h2 { font-size: clamp(62px, 8vw, 118px); }
.submission-action { min-width: 0; }
.submission-action p { margin: 0 0 26px; font-size: clamp(18px, 1.8vw, 25px); line-height: 1.35; letter-spacing: -0.02em; }
.submission-action .submit-link { width: 100%; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); }
.submission-action .submit-link:hover, .submission-action .submit-link:focus-visible { color: var(--ink); background: transparent; }
.submission-action small { display: block; margin-top: 15px; color: rgba(8,9,6,0.65); font: 700 9px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.submission-action small a { font-weight: 900; }

.arcade-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 50px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}
.arcade-footer strong { color: var(--buy); }
.arcade-footer p { margin: 0; text-align: right; }

.noscript { padding: 14px; text-align: center; color: var(--ink); background: var(--buy); }

button:focus-visible, a:focus-visible { outline: 2px solid var(--buy); outline-offset: 4px; }

@media (max-width: 1050px) {
  .boot { grid-template-columns: 1fr; padding-top: 64px; }
  .boot-copy { max-width: 820px; }
  .console { width: 100%; max-width: 860px; justify-self: center; }
  .submission { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .boot, .library, .submission, .arcade-footer { width: min(100% - 28px, 1440px); }
  .boot { padding: 46px 0 72px; gap: 44px; }
  .system-line { margin-bottom: 30px; }
  h1 { font-size: clamp(46px, 15.6vw, 76px); }
  .console { padding: 10px; border-radius: 24px; }
  .console-screen { grid-template-columns: 1fr; min-height: 0; border-width: 7px; }
  .screen-art { aspect-ratio: 16 / 9; min-height: 0; }
  .screen-copy { padding: 26px; }
  .console-controls { grid-template-columns: 76px 1fr; padding-inline: 6px; }
  .press-deck { gap: 8px; }
  #launchHint { font-size: 7px; }
  .library { padding: 84px 0 96px; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .cartridge-grid { grid-template-columns: 1fr; gap: 32px; }
  .submission { margin-bottom: 88px; padding: 34px 26px; }
  .submission h2 { font-size: clamp(58px, 18vw, 88px); }
  .arcade-footer { flex-direction: column; }
  .arcade-footer p { text-align: left; }
}

@media (max-width: 460px) {
  .cartridge-select { grid-template-columns: 112px 1fr; gap: 11px 16px; }
  .cartridge-title { font-size: 35px; }
  .cartridge-rule { font-size: 7px; }
  .console-controls { grid-template-columns: 1fr; }
  .d-pad { width: 110px; }
  .press-deck { justify-content: space-between; }
  .canonical-press { width: 68%; }
}

@media (max-width: 360px) {
  .boot, .library, .submission, .arcade-footer { width: calc(100% - 20px); }
  .cartridge { min-width: 0; padding: 11px; }
  .cartridge-select { grid-template-columns: 92px minmax(0, 1fr); padding: 5px; }
  .cartridge-title { min-width: 0; font-size: 30px; overflow-wrap: anywhere; }
  .cartridge-rule { font-size: 7px; }
  .submission { padding: 28px 20px; }
  .submission h2 { font-size: 52px; }
}

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