:root {
  color-scheme: dark;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #fff9f2;
  background: #0b0911;
  --text: #fff9f2;
  --muted: #b8acbb;
  --mint: #9cf1cc;
  --red: #fb394a;
  --line: rgba(255, 255, 255, 0.14);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: #0b0911;
  background-image: radial-gradient(circle at 10% 17%, #fff9f2 0 1px, transparent 1.5px),
    radial-gradient(circle at 85% 9%, #9cf1cc88 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 48%, #fff9f255 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 72%, #fff9f255 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 86% 16%, #34233a66, transparent 40%);
  background-attachment: fixed;
}
.section-shell {
  width: min(100% - 80px, 1400px);
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  z-index: 10;
  top: -100px;
  left: 16px;
  padding: 12px 16px;
  background: var(--mint);
  color: #0b0911;
  font-weight: 700;
}
.skip-link:focus {
  top: 12px;
}
.arcade-header {
  min-height: 105px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  width: 220px;
  height: 30px;
  overflow: hidden;
  position: relative;
  flex: none;
}
.brand-logo img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.arcade-header p {
  margin: 0;
  color: var(--muted);
  font:
    700 11px 'Space Grotesk',
    system-ui,
    sans-serif;
  letter-spacing: 0.13em;
  text-align: right;
}
.arcade-header p span {
  color: var(--red);
  padding-inline: 0.35em;
}
.arcade-main {
  padding-block: 70px 60px;
}
.mission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 960px;
  margin-bottom: 32px;
}
.arcade-intro {
  min-width: 0;
}
.kicker {
  color: var(--mint);
  font:
    700 11px 'Space Grotesk',
    system-ui,
    sans-serif;
  letter-spacing: 0.17em;
  line-height: 1.5;
  margin: 0;
}
h1,
h2,
h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
h1 {
  font-size: clamp(46px, 7.5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.065em;
  margin: 24px 0;
  text-wrap: balance;
}
.arcade-lead {
  color: #cbbdd1;
  font-size: 19px;
  line-height: 1.65;
  max-width: 650px;
  margin: 0;
}
.marvin-avatar {
  width: clamp(150px, 20vw, 210px);
  height: auto;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 15px 28px #fb394a22);
}
.game-stage {
  max-width: 960px;
  min-height: 340px;
  padding: 40px;
  background: linear-gradient(140deg, #201b2d, #17131f);
  border: 1px solid #53415f;
  border-radius: 16px;
}
.round-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.eyebrow {
  color: var(--red);
  font:
    700 11px 'Space Grotesk',
    system-ui,
    sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.progress-count {
  color: var(--mint);
  font:
    700 12px 'Space Grotesk',
    system-ui,
    sans-serif;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
progress {
  display: block;
  width: 100%;
  height: 6px;
  margin: 20px 0 28px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  accent-color: var(--mint);
  background: #493455;
}
progress::-webkit-progress-bar {
  background: #493455;
}
progress::-webkit-progress-value {
  background: var(--mint);
}
progress::-moz-progress-bar {
  background: var(--mint);
}
.game-stage h2 {
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.045em;
  margin: 0 0 20px;
}
.game-stage h3 {
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.game-stage p {
  line-height: 1.65;
}
.scenario-prompt {
  max-width: 680px;
  color: #e0d6e5;
  font-size: 17px;
  margin-bottom: 28px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 22px;
  border-radius: 7px;
  font:
    700 13px 'DM Sans',
    system-ui,
    sans-serif;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
button:hover {
  transform: translateY(-2px);
}
button:focus-visible,
h2:focus-visible,
h3:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}
button.primary {
  background: var(--red);
  color: #1c0a10;
  border: 1px solid var(--red);
  box-shadow: 0 10px 32px #fb394a2b;
}
button.primary:hover {
  background: #ff6472;
  box-shadow: 0 14px 35px #fb394a4d;
}
button.choice {
  background: #ffffff0a;
  color: var(--text);
  border: 1px solid #8f768f;
}
button.choice:hover {
  background: #ffffff1f;
}
.actions button {
  flex: 1 1 180px;
}
.result {
  border-top: 1px solid #7b6887;
  padding-top: 24px;
  margin: 28px 0;
}
.result h3 {
  color: var(--mint);
}
.result p {
  color: #e2d6e8;
}
.choice-label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid #8f768f;
  border-radius: 4px;
  color: #fff9f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.result .lesson {
  border-left: 2px solid var(--mint);
  padding-left: 18px;
  color: var(--text);
}
.score-note {
  max-width: 680px;
  color: #e0d6e5;
  margin-bottom: 28px;
}
.noscript-note {
  color: var(--mint);
}
.arcade-footer {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding-block: 30px 40px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 700px) {
  .section-shell {
    width: min(100% - 36px, 1400px);
  }
  .arcade-header {
    min-height: 90px;
  }
  .brand-logo {
    width: 170px;
    height: 25px;
  }
  .arcade-header p {
    max-width: 145px;
    font-size: 9px;
    line-height: 1.5;
  }
  .arcade-main {
    padding-block: 42px 48px;
  }
  .mission-heading {
    gap: 12px;
  }
  .marvin-avatar {
    width: clamp(90px, 23vw, 150px);
  }
  h1 {
    font-size: clamp(40px, 10vw, 64px);
    margin: 18px 0;
  }
  .arcade-lead {
    font-size: 16px;
  }
  .game-stage {
    padding: 24px;
  }
}
@media (max-width: 450px) {
  .section-shell {
    width: min(100% - 28px, 1400px);
  }
  .arcade-header {
    align-items: start;
    padding-block: 20px;
    min-height: 0;
  }
  .arcade-header p {
    max-width: 90px;
  }
  .mission-heading {
    align-items: end;
  }
  .marvin-avatar {
    width: 88px;
  }
  .kicker {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  h1 {
    font-size: clamp(38px, 11vw, 48px);
  }
  .game-stage {
    padding: 20px;
  }
  .actions button {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
  button:hover {
    transform: none;
  }
}

.arcade-header p a,
.policy-links a {
  color: var(--text);
  text-underline-offset: 4px;
}
.arcade-header p a:hover,
.policy-links a:hover {
  color: var(--mint);
}

.permission-page .game-stage h2:focus-visible,
.permission-page .game-stage h3:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}
.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.permission-page .mission-exit {
  flex-basis: 100%;
  color: var(--mint);
  text-underline-offset: 4px;
}
.permission-page .mission-exit:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}