:root {
  --ink: #111517;
  --ink-soft: #3d4547;
  --paper: #f4f0e6;
  --paper-deep: #e5dfd0;
  --night: #0b1014;
  --night-raised: #141b20;
  --screen: #132c19;
  --green: #a9ff68;
  --green-dark: #25663a;
  --orange: #ff6b35;
  --yellow: #f4d35e;
  --blue: #73c8ff;
  --line: rgba(17, 21, 23, .16);
  --shadow: 0 24px 70px rgba(0, 0, 0, .22);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.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;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: var(--night);
  background: var(--green);
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.site-header {
  min-height: 76px;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 240, 230, .92);
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  font-size: .82rem;
  line-height: 1.2;
  letter-spacing: .02em;
}

.brand strong { display: block; font-size: .95rem; }

.brand-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--green);
  background: var(--night);
  border-radius: 4px;
  font: 800 1rem var(--mono);
}

.site-header nav { display: flex; align-self: stretch; }

.site-header nav a {
  position: relative;
  min-width: 96px;
  padding: 0 1rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.site-header nav a:hover::after,
.site-header nav a.active::after { transform: scaleX(1); }

.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 8vw, 9rem) 8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -150px;
  top: -170px;
  border: 1px solid rgba(17, 21, 23, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(17, 21, 23, .025), 0 0 0 140px rgba(17, 21, 23, .02);
}

.hero-copy { position: relative; z-index: 1; }

.eyebrow {
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink-soft);
  font: 750 .72rem var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 2px;
  background: var(--orange);
}

.eyebrow.light { color: #aab7b5; }
.eyebrow.light > span { background: var(--green); }

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

h1 {
  max-width: 850px;
  margin-bottom: 1.5rem;
  font-size: clamp(3.15rem, 7.3vw, 7rem);
  line-height: .91;
  letter-spacing: -.07em;
}

h1 em,
.story-title-row h2 em {
  color: var(--orange);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.hero-lead {
  margin-bottom: .3rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 780;
}

.hero-description {
  max-width: 620px;
  margin-bottom: 2rem;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.primary-link,
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 52px;
  padding: .85rem 1.25rem;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.primary-link:hover,
.action-button:hover { background: var(--orange); transform: translateY(-2px); }
.action-button:disabled { color: #667176; background: #293236; cursor: not-allowed; transform: none; }

.hero-art { position: relative; z-index: 1; }

.photo-frame {
  position: relative;
  max-width: 500px;
  margin: auto;
  padding: 1rem 1rem 3.6rem;
  background: #fff;
  border: 1px solid rgba(17, 21, 23, .11);
  box-shadow: 0 30px 70px rgba(41, 35, 22, .22);
  transform: rotate(2.5deg);
}

.photo-frame::before {
  content: "";
  position: absolute;
  width: 105px;
  height: 28px;
  left: 50%;
  top: -18px;
  background: rgba(244, 211, 94, .68);
  transform: translateX(-50%) rotate(-3deg);
}

.photo-frame img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  filter: sepia(.18) contrast(1.04);
}

.photo-label {
  position: absolute;
  z-index: 1;
  left: 1.6rem;
  top: 1.6rem;
  padding: .35rem .55rem;
  color: #fff;
  background: var(--night);
  font: 700 .63rem var(--mono);
  letter-spacing: .12em;
}

.photo-year {
  position: absolute;
  right: 1.3rem;
  bottom: .55rem;
  color: var(--orange);
  font: 900 2rem var(--mono);
  letter-spacing: -.08em;
}

.hand-note {
  position: absolute;
  right: 0;
  bottom: -4.2rem;
  font: italic 1.25rem Georgia, serif;
  transform: rotate(-4deg);
}

.era-track {
  position: absolute;
  left: clamp(1.25rem, 8vw, 9rem);
  right: clamp(1.25rem, 8vw, 9rem);
  bottom: 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr repeat(8, auto);
  align-items: center;
  gap: clamp(.65rem, 2vw, 2.2rem);
  font-family: var(--mono);
}

.era { position: relative; display: flex; flex-direction: column; }
.era b { font-size: .75rem; }
.era i { color: #747b7c; font-size: .58rem; font-style: normal; }
.era.active b { color: var(--orange); }
.era.completed b { color: var(--green-dark); }

.track-line { height: 1px; background: #beb9ae; }
.track-line i { display: block; width: 7%; height: 3px; margin-top: -1px; background: var(--orange); }

.game-section {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 7rem);
  color: #eef2ed;
  background: var(--night);
  overflow: hidden;
}

.game-section::before {
  content: "01";
  position: absolute;
  right: -2rem;
  top: -8rem;
  color: rgba(255, 255, 255, .025);
  font: 900 clamp(18rem, 40vw, 36rem)/1 var(--mono);
  letter-spacing: -.15em;
  pointer-events: none;
}

.section-heading {
  position: relative;
  max-width: 1240px;
  margin: 0 auto 2.8rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.section-heading h2 em { color: var(--green); font-family: Georgia, serif; font-weight: 400; }

.mission-stats { display: flex; border: 1px solid #354047; }
.mission-stats span { min-width: 90px; padding: .65rem .9rem; border-right: 1px solid #354047; }
.mission-stats span:last-child { border-right: 0; }
.mission-stats small { display: block; color: #748189; font: 700 .57rem var(--mono); letter-spacing: .14em; }
.mission-stats strong { color: var(--green); font: 800 .93rem var(--mono); }

.game-console {
  --era-accent: var(--green);
  position: relative;
  max-width: 1240px;
  min-height: 650px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr);
  border: 1px solid #344047;
  background: #0f1519;
  box-shadow: var(--shadow);
}

.computer {
  padding: clamp(1.2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .04), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px),
    #222a2d;
  border-right: 1px solid #344047;
}

.computer-top {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: 0 .5rem 1.1rem;
  font-family: var(--mono);
}

.computer-top > span { font-size: 1.65rem; font-weight: 900; letter-spacing: -.12em; }
.computer-top > span span { color: var(--green); }
.computer-top small { color: #7e898c; font-size: .55rem; letter-spacing: .12em; }

.monitor-bezel {
  flex: 1;
  padding: clamp(.7rem, 2vw, 1.2rem);
  background: #070a0c;
  border: 1px solid #394043;
  border-radius: 16px;
  box-shadow: inset 0 0 0 6px #151a1c, inset 0 0 30px #000, 0 12px 30px rgba(0,0,0,.3);
}

.monitor {
  position: relative;
  min-height: 390px;
  height: 100%;
  padding: clamp(1.4rem, 4vw, 3rem);
  color: var(--green);
  background: var(--screen);
  border-radius: 28px / 18px;
  overflow: hidden;
  font: 700 clamp(.82rem, 1.6vw, 1.05rem)/1.65 var(--mono);
  text-shadow: 0 0 8px rgba(169, 255, 104, .45);
  box-shadow: inset 0 0 80px rgba(0,0,0,.75), inset 0 0 12px rgba(169,255,104,.13);
}

.scanlines {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
  pointer-events: none;
}

.screen-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(169,255,104,.09), transparent 70%);
  pointer-events: none;
}

.screen-view { position: relative; z-index: 2; }
.screen-view p { margin-bottom: .65rem; }

.screen-off {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #43644a;
  text-align: center;
  text-shadow: none;
}

.screen-off p { margin: .9rem 0 .2rem; font-size: .78rem; letter-spacing: .14em; }
.screen-off small { font-size: .65rem; font-weight: 400; }

.off-dot {
  width: 10px;
  height: 10px;
  background: #3a4940;
  border-radius: 50%;
}

.game-console[data-state="booting"] .monitor,
.game-console[data-state="running"] .monitor { animation: screen-flicker .16s 2; }

.resume-card {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto 1.2rem;
  padding: 1.15rem 1.3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: #dfe7e5;
  background: linear-gradient(105deg, rgba(169,255,104,.1), rgba(115,200,255,.06));
  border: 1px solid rgba(169,255,104,.38);
}

.resume-card[hidden] { display: none; }
.resume-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--night); background: var(--green); border-radius: 50%; font: 900 1.25rem var(--mono); }
.resume-card .panel-label { margin-bottom: .25rem; }
.resume-card h3 { margin: 0 0 .2rem; color: #fff; font-size: 1.15rem; }
.resume-card p:last-child { margin: 0; color: #8f9ca0; font-size: .72rem; }
.resume-actions { display: flex; align-items: center; gap: .7rem; }
.resume-actions .action-button { width: auto; margin: 0; white-space: nowrap; }
.resume-actions > button:last-child { padding: .5rem; color: #89969a; background: transparent; border: 0; text-decoration: underline; cursor: pointer; }

.boot-log p { margin: 0 0 .2rem; }
.boot-log .muted { color: #66956e; }
.boot-log .ready { margin-top: 1rem; color: #fff; }

.cursor {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-left: .3rem;
  vertical-align: -.15em;
  background: currentColor;
  animation: blink .8s steps(1) infinite;
}

.screen-kicker { color: #fff; font-size: .7rem; letter-spacing: .08em; }

.mission-screen pre {
  margin: 1.2rem 0 1.6rem;
  padding: 1rem;
  color: var(--green);
  background: rgba(0,0,0,.28);
  border-left: 3px solid var(--green);
  font: inherit;
  white-space: pre-wrap;
}

.mission-screen mark { padding: .1em .25em; color: var(--night); background: var(--yellow); }
.screen-prompt { color: #fff; }
.run-result { min-height: 3rem; color: #fff; font-size: 2.7rem; }

.success-screen { padding-top: 1rem; text-align: center; }
.success-code { margin: 0 !important; color: #fff; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; }
.success-screen > strong { display: block; color: #fff; font-size: clamp(1.2rem, 3vw, 2rem); }
.success-screen > span { display: inline-block; margin-top: 1.5rem; padding: .35rem .65rem; color: var(--night); background: var(--green); text-shadow: none; }

.cassette-screen { text-align: center; }

.cassette-deck {
  max-width: 360px;
  margin: 1.1rem auto;
  padding: 1rem 1.3rem;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 1rem;
  color: var(--night);
  background: #9daf92;
  border: 5px solid #26332a;
  border-radius: 8px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.12);
  text-shadow: none;
}

.cassette-deck i { font: 800 .55rem var(--mono); font-style: normal; }

.cassette-reel {
  width: 50px;
  height: 50px;
  display: block;
  background: repeating-conic-gradient(#18221c 0 10deg, #7e9279 10deg 20deg);
  border: 8px solid #e1e8d9;
  border-radius: 50%;
  animation: reel-spin 1.25s linear infinite;
}

.cassette-command { margin: 1rem 0; color: #fff; font-size: 1.15rem; }

.signal-meter {
  position: relative;
  height: 38px;
  margin: 1.2rem 0;
  background: repeating-linear-gradient(90deg, #27452d 0 1px, transparent 1px 10%);
  border: 1px solid #598361;
}

.signal-meter::before,
.signal-meter::after {
  position: absolute;
  top: -1.25rem;
  color: #67866b;
  font-size: .55rem;
}

.signal-meter::before { content: "BAJA"; left: 0; }
.signal-meter::after { content: "ALTA"; right: 0; }

.signal-zone { position: absolute; inset: 0 auto 0 42%; width: 16%; background: rgba(169,255,104,.25); border-inline: 1px solid var(--green); }

.signal-needle {
  position: absolute;
  z-index: 2;
  top: -7px;
  bottom: -7px;
  left: 4%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 9px #fff;
  transform: translateX(-50%);
}

.signal-meter.hit { animation: meter-hit .32s ease; }
.signal-meter.miss { animation: shake .25s ease; }

.cassette-hits { display: flex; justify-content: center; gap: .5rem; }
.cassette-hits span { padding: .25rem .5rem; color: #48634d; border: 1px solid #3b6243; font-size: .54rem; }
.cassette-hits span.captured { color: var(--night); background: var(--green); border-color: var(--green); text-shadow: none; }

.cassette-success-screen,
.pascal-success-screen { padding-top: 2rem; text-align: center; }
.cassette-success-screen > strong,
.pascal-success-screen > strong { display: block; color: #fff; font-size: clamp(1.3rem, 3vw, 2rem); }
.cassette-success-screen > span,
.pascal-success-screen > span { display: inline-block; margin-top: 1rem; padding: .3rem .6rem; color: var(--night); background: var(--green); text-shadow: none; }

.loaded-block { margin: 0 auto 1.3rem; display: flex; justify-content: center; gap: .3rem; }
.loaded-block span { width: 26px; height: 60px; background: var(--green); animation: data-loaded .45s ease both; }
.loaded-block span:nth-child(2) { animation-delay: .08s; }
.loaded-block span:nth-child(3) { animation-delay: .16s; }
.loaded-block span:nth-child(4) { animation-delay: .24s; }
.loaded-block span:nth-child(5) { animation-delay: .32s; }

.travel-screen { padding-top: 1.5rem; text-align: center; }
.year-jump { margin: 2rem 0; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 3rem); }
.year-jump span { color: #719079; font-size: clamp(1.8rem, 5vw, 3.2rem); }
.year-jump i { color: #fff; font-size: 1.8rem; font-style: normal; animation: jump-arrow .8s ease-in-out infinite; }
.year-jump strong { color: var(--green); font-size: clamp(2.8rem, 8vw, 5.5rem); }

.travel-tunnel { height: 50px; margin: 1rem auto 2rem; display: flex; justify-content: center; gap: 1.4rem; overflow: hidden; }
.travel-tunnel span { width: 3px; height: 45px; background: var(--green); transform: skewX(-28deg); animation: tunnel-line .8s linear infinite; }
.travel-tunnel span:nth-child(2) { animation-delay: .2s; }
.travel-tunnel span:nth-child(3) { animation-delay: .4s; }

.pascal-screen { color: var(--blue); text-shadow: 0 0 8px rgba(115,200,255,.45); }
.pascal-program { margin: .8rem 0 1.2rem; padding: 1rem; color: var(--blue); background: rgba(0,0,0,.3); border-left: 3px solid var(--blue); font: inherit; text-align: left; white-space: pre-wrap; }
.pascal-program span { color: #fff; }
.pascal-badge { width: 80px; height: 80px; margin: .7rem auto 1.2rem; display: grid; place-items: center; color: #102a36; background: var(--blue); border-radius: 50%; font: 900 2.5rem var(--mono); text-shadow: none; }
.pascal-success-screen > span { background: var(--blue); }

.game-console.era-msx { --era-accent: var(--blue); }
.game-console.era-msx .monitor {
  color: var(--blue);
  background: #102a36;
  text-shadow: 0 0 8px rgba(115,200,255,.45);
  box-shadow: inset 0 0 80px rgba(0,0,0,.75), inset 0 0 12px rgba(115,200,255,.16);
}

.game-console.era-msx .screen-glow { background: radial-gradient(circle at center, rgba(115,200,255,.1), transparent 70%); }
.game-console.era-msx .computer-top > span span { color: var(--blue); }
.game-console.era-msx .computer-top > span { color: var(--blue); letter-spacing: -.06em; }

.era-challenge-screen { min-height: 300px; }

.challenge-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.challenge-screen-header .screen-kicker { margin: 0; }
.challenge-screen-header > span { color: #76907c; font-size: .56rem; }

.era-screen-visual {
  position: relative;
  min-height: 175px;
  margin: 1rem 0;
  padding: 1.2rem;
  background: rgba(0,0,0,.3);
  border: 1px solid currentColor;
  text-align: left;
}

.era-screen-visual > small { display: block; margin-bottom: .7rem; color: #fff; font-size: .58rem; letter-spacing: .08em; }
.era-screen-visual > pre { margin: 0; color: inherit; font: inherit; white-space: pre-wrap; }

.era-screen-visual[data-type="window"] {
  padding-top: 2.8rem;
  color: #102638;
  background: #c5c9c9;
  border: 3px outset #e8ebeb;
  text-shadow: none;
}

.era-screen-visual[data-type="window"]::before {
  content: "Programa — Windows 3.1";
  position: absolute;
  top: .25rem;
  left: .25rem;
  right: .25rem;
  padding: .25rem .5rem;
  color: #fff;
  background: #143e78;
  font: 700 .55rem var(--sans);
}

.era-screen-visual[data-type="window"] > small { color: #102638; }

.era-screen-visual[data-type="code"] {
  color: #d4c5ff;
  background: #171225;
  border-left: 4px solid #aa83ff;
}

.era-screen-visual[data-type="browser"] {
  padding-top: 2.7rem;
  color: #19252a;
  background: #f2f0e7;
  border: 4px ridge #ccd1d1;
  text-shadow: none;
}

.era-screen-visual[data-type="browser"]::before {
  content: "Tutoriales Programación Ya — Editor";
  position: absolute;
  inset: .25rem .25rem auto;
  padding: .25rem .5rem;
  color: #fff;
  background: #1a5680;
  font: 700 .55rem var(--sans);
}

.era-screen-visual[data-type="browser"] > small { color: #1a5680; }

.era-screen-visual[data-type="device"] {
  width: min(230px, 90%);
  min-height: 205px;
  margin-inline: auto;
  padding: 2.5rem .9rem 1rem;
  color: #153329;
  background: #e8f2ed;
  border: 8px solid #17251f;
  border-radius: 20px;
  text-shadow: none;
}

.era-screen-visual[data-type="device"]::before {
  content: "●  3G                 100%";
  position: absolute;
  inset: .5rem .7rem auto;
  color: #61736b;
  font: 700 .45rem var(--mono);
  white-space: pre;
}

.era-screen-visual[data-type="device"] > small { color: #15754f; }
.era-screen-visual[data-type="device"] > pre { font-size: .58rem; }

.era-screen-visual[data-type="ai-code"] {
  color: #cbbcff;
  background: #141024;
  border: 1px solid #7a65c7;
  box-shadow: inset 3px 0 0 #9f88ff;
}

.era-screen-visual[data-type="ai-code"]::after {
  content: "IA";
  position: absolute;
  right: .8rem;
  top: .7rem;
  padding: .15rem .35rem;
  color: #161126;
  background: #bfaeff;
  font: 900 .48rem var(--mono);
  text-shadow: none;
}

.era-screen-visual[data-type="ai-claim"] {
  padding: 1.3rem 1.3rem 1.3rem 3.4rem;
  color: #d7cdfc;
  background: linear-gradient(135deg, #1c1630, #101b2d);
  border: 1px solid #7464a8;
  border-radius: 12px;
}

.era-screen-visual[data-type="ai-claim"]::before {
  content: "AI";
  position: absolute;
  left: .8rem;
  top: 1.1rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #171224;
  background: #bfaeff;
  border-radius: 50%;
  font: 900 .55rem var(--mono);
  text-shadow: none;
}

.round-indicators { display: flex; gap: .45rem; }
.round-indicators span { width: 38px; padding: .2rem 0; color: #607068; border: 1px solid #405148; font-size: .5rem; text-align: center; }
.round-indicators span.active { color: #fff; border-color: currentColor; }
.round-indicators span.completed { color: var(--night); background: var(--era-accent); border-color: var(--era-accent); text-shadow: none; }

.era-success-screen { padding-top: 1rem; text-align: center; }
.era-success-mark { width: 92px; height: 92px; margin: .6rem auto 1rem; display: grid; place-items: center; color: var(--night); background: var(--era-accent); border-radius: 50%; font: 900 1.35rem var(--mono); text-shadow: none; }
.era-success-screen > strong { display: block; color: #fff; font-size: clamp(1.3rem, 3vw, 2rem); }
.era-success-screen > p:not(.screen-kicker) { color: var(--era-accent); font-size: .72rem; }
.era-success-screen > span { display: inline-block; margin-top: .75rem; padding: .3rem .6rem; color: var(--night); background: var(--era-accent); text-shadow: none; }

.game-console.era-pcxt { --era-accent: #f5c86a; }
.game-console.era-pcxt .monitor { color: #f5c86a; background: #30230d; text-shadow: 0 0 8px rgba(245,200,106,.42); }
.game-console.era-pcxt .screen-glow { background: radial-gradient(circle at center, rgba(245,200,106,.1), transparent 70%); }
.game-console.era-pcxt .computer-top > span { color: #f5c86a; letter-spacing: -.06em; }

.game-console.era-386 { --era-accent: #76d7ff; }
.game-console.era-386 .monitor { color: #76d7ff; background: #102638; text-shadow: 0 0 8px rgba(118,215,255,.4); }
.game-console.era-386 .screen-glow { background: radial-gradient(circle at center, rgba(118,215,255,.1), transparent 70%); }
.game-console.era-386 .computer-top > span { color: #76d7ff; letter-spacing: -.06em; }

.game-console.era-486 { --era-accent: #c5a8ff; }
.game-console.era-486 .monitor { color: #c5a8ff; background: #211633; text-shadow: 0 0 8px rgba(197,168,255,.42); }
.game-console.era-486 .screen-glow { background: radial-gradient(circle at center, rgba(197,168,255,.11), transparent 70%); }
.game-console.era-486 .computer-top > span { color: #c5a8ff; letter-spacing: -.06em; }

.game-console.era-web { --era-accent: #58e6ff; }
.game-console.era-web .monitor { color: #58e6ff; background: #082630; text-shadow: 0 0 8px rgba(88,230,255,.42); }
.game-console.era-web .screen-glow { background: radial-gradient(circle at center, rgba(88,230,255,.1), transparent 70%); }
.game-console.era-web .computer-top > span { color: #58e6ff; letter-spacing: -.06em; }

.game-console.era-cursos { --era-accent: #ffd45e; }
.game-console.era-cursos .monitor { color: #ffd45e; background: #2d240a; text-shadow: 0 0 8px rgba(255,212,94,.4); }
.game-console.era-cursos .screen-glow { background: radial-gradient(circle at center, rgba(255,212,94,.1), transparent 70%); }
.game-console.era-cursos .computer-top > span { color: #ffd45e; letter-spacing: -.06em; }

.game-console.era-mobile { --era-accent: #7df2b0; }
.game-console.era-mobile .monitor { color: #7df2b0; background: #0b2b20; text-shadow: 0 0 8px rgba(125,242,176,.4); }
.game-console.era-mobile .screen-glow { background: radial-gradient(circle at center, rgba(125,242,176,.11), transparent 70%); }
.game-console.era-mobile .computer-top > span { color: #7df2b0; letter-spacing: -.06em; }

.game-console.era-ai { --era-accent: #bfaeff; }
.game-console.era-ai .monitor { color: #bfaeff; background: #161126; text-shadow: 0 0 9px rgba(191,174,255,.45); }
.game-console.era-ai .screen-glow { background: radial-gradient(circle at center, rgba(191,174,255,.13), transparent 70%); }
.game-console.era-ai .computer-top > span { color: #bfaeff; letter-spacing: -.06em; }

.web-stack-screen { min-height: 310px; }

.web-browser-bar {
  margin: -1rem -1rem 1rem;
  padding: .35rem .5rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  color: #152329;
  background: #d9dddd;
  text-shadow: none;
}

.web-browser-bar > span { width: 8px; height: 8px; background: #788486; border-radius: 50%; }
.web-browser-bar > p { flex: 1; margin: 0 0 0 .4rem; padding: .15rem .45rem; background: #fff; font: .53rem var(--sans); }

.web-screen-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.web-screen-header .screen-kicker { margin-bottom: .15rem; }
.web-screen-header strong { color: #fff; font-size: .58rem; }
.web-screen-header > span { padding: .2rem .45rem; color: #ff8e73; border: 1px solid currentColor; font-size: .5rem; }
.web-screen-header > span.online { color: var(--green); }

.web-stack-slots { margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.web-stack-slots article { min-width: 0; padding: .55rem; display: flex; align-items: center; gap: .55rem; color: #57747b; background: rgba(0,0,0,.23); border: 1px dashed #3b6570; }
.web-stack-slots article.active { color: #fff; border-style: solid; border-color: var(--era-accent); }
.web-stack-slots article.completed { color: var(--night); background: var(--era-accent); border-color: var(--era-accent); border-style: solid; text-shadow: none; }
.web-stack-slots article > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; font-size: .55rem; }
.web-stack-slots small,
.web-stack-slots strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-stack-slots small { font-size: .46rem; }
.web-stack-slots strong { color: inherit; font-size: .65rem; }

.data-packet-track { position: relative; height: 3px; margin: .4rem 0 1rem; background: #254852; overflow: hidden; }
.data-packet-track i { position: absolute; width: 34px; height: 100%; background: var(--era-accent); animation: data-packet 1.2s linear infinite; }

.web-tech-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.web-tech-options button {
  min-width: 0;
  padding: .6rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #d9e3e5;
  background: #0d1316;
  border: 1px solid #354147;
  text-align: left;
  cursor: pointer;
}

.web-tech-options button:hover:not(:disabled) { border-color: var(--era-accent); transform: translateY(-2px); }
.web-tech-options button > span { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: var(--night); background: var(--era-accent); font: 900 .55rem var(--mono); }
.web-tech-options strong,
.web-tech-options small { display: block; }
.web-tech-options strong { color: #fff; font-size: .68rem; }
.web-tech-options small { color: #748187; font-size: .55rem; }
.web-tech-options button:disabled { opacity: .3; }
.web-tech-options button.wrong { border-color: var(--orange); animation: shake .25s ease; }
.web-tech-options button.correct { color: var(--night); background: var(--era-accent); border-color: var(--era-accent); opacity: 1; }
.web-tech-options button.correct > span { color: var(--era-accent); background: var(--night); }
.web-tech-options button.correct strong { color: var(--night); }
.web-tech-options button.correct small { color: #37545a; }

.touch-game-screen { min-height: 330px; }
.mobile-screen-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mobile-screen-header .screen-kicker { margin: 0; }
.mobile-screen-header > span { color: #719b83; font-size: .5rem; }

.smartphone {
  position: relative;
  width: min(210px, 78%);
  margin: .8rem auto;
  padding: 1.5rem .65rem 1.4rem;
  color: #13221a;
  background: #111815;
  border: 2px solid #526058;
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  text-shadow: none;
}

.phone-speaker { position: absolute; top: .65rem; left: 50%; width: 44px; height: 4px; background: #3c4741; border-radius: 3px; transform: translateX(-50%); }
.phone-home { position: absolute; bottom: .45rem; left: 50%; width: 15px; height: 15px; border: 1px solid #536058; border-radius: 50%; transform: translateX(-50%); }
.phone-display { min-height: 215px; padding: .65rem; background: linear-gradient(145deg, #edf8f1, #cdebd8); overflow: hidden; }
.phone-display > small { display: block; margin-bottom: .5rem; color: #25724a; font-size: .45rem; }

.gesture-surface {
  position: relative;
  min-height: 168px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #153525;
  background: #fff;
  border: 1px solid #a7c9b3;
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(26,83,51,.14);
  text-align: center;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}

.gesture-surface:focus-visible { outline-color: #185d3c; }
.gesture-surface.touching { transform: scale(.98); }
.gesture-surface[data-gesture="swipe-left"] .gesture-icon { animation: swipe-hint 1.5s ease-in-out infinite; }
.gesture-surface[data-gesture="longpress"] .gesture-icon { animation: press-hint 1.5s ease-in-out infinite; }
.gesture-surface.gesture-error { animation: shake .28s ease; border-color: var(--orange); }
.gesture-surface.gesture-success { color: #fff; background: #218653; border-color: #218653; }
.gesture-icon { width: 48px; height: 48px; margin-bottom: .65rem; display: grid; place-items: center; color: #fff; background: #238f59; border-radius: 50%; font: 900 1.2rem var(--mono); }
.gesture-surface > strong { max-width: 150px; font: 800 .62rem var(--mono); }
.gesture-surface > small { margin-top: .3rem; color: #668072; font-size: .42rem; }
.gesture-surface.gesture-success > small { color: #d5f3e1; }

.gesture-progress { display: flex; justify-content: center; gap: .5rem; }
.gesture-progress span { width: 26px; height: 26px; display: grid; place-items: center; color: #557364; border: 1px solid #436653; border-radius: 50%; font-size: .53rem; }
.gesture-progress span.active { color: #fff; border-color: var(--era-accent); }
.gesture-progress span.completed { color: var(--night); background: var(--era-accent); border-color: var(--era-accent); text-shadow: none; }

.gesture-alternatives { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.gesture-alternatives button { min-width: 0; padding: .65rem .3rem; display: grid; place-items: center; gap: .25rem; color: #aeb9bb; background: #0d1316; border: 1px solid #354147; cursor: pointer; }
.gesture-alternatives button:hover:not(:disabled) { color: var(--era-accent); border-color: var(--era-accent); transform: translateY(-2px); }
.gesture-alternatives button:disabled { opacity: .35; }
.gesture-alternatives button span { font: 900 1rem var(--mono); }
.gesture-alternatives button strong { overflow: hidden; max-width: 100%; font-size: .56rem; text-overflow: ellipsis; }
.gesture-help { margin: .65rem 0; color: #6f7d82; font-size: .62rem; line-height: 1.45; }

.ai-prompt-screen { min-height: 320px; }
.ai-chat-header { display: flex; align-items: center; gap: .65rem; }
.ai-chat-header > div:nth-child(2) { flex: 1; }
.ai-chat-header strong,
.ai-chat-header small { display: block; }
.ai-chat-header strong { color: #fff; font-size: .62rem; }
.ai-chat-header small { color: #756b96; font-size: .46rem; }
.ai-chat-header > span { padding: .2rem .4rem; color: #8f7bc7; border: 1px solid #564879; font-size: .48rem; }
.ai-chat-header > span.online { color: var(--green); border-color: var(--green-dark); }

.ai-orb { position: relative; width: 38px; height: 38px; display: grid; place-items: center; background: conic-gradient(from 0deg, #a68cff, #58e6ff, #ff88ca, #a68cff); border-radius: 50%; animation: ai-orbit 4s linear infinite; }
.ai-orb span { width: 24px; height: 24px; background: #19132a; border-radius: 50%; }

.ai-chat-bubble { margin: 1rem 0; padding: .9rem; background: rgba(191,174,255,.08); border: 1px solid #594b7d; border-radius: 4px 14px 14px 14px; }
.ai-chat-bubble > small { display: block; margin-bottom: .55rem; color: #fff; font-size: .5rem; }

.ai-prompt-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ai-prompt-slots article { min-width: 0; padding: .45rem; display: flex; gap: .5rem; align-items: center; color: #6d628e; background: rgba(0,0,0,.2); border: 1px dashed #4d426b; }
.ai-prompt-slots article.active { color: #fff; border-color: var(--era-accent); border-style: solid; }
.ai-prompt-slots article.completed { color: #171224; background: var(--era-accent); border-color: var(--era-accent); border-style: solid; text-shadow: none; }
.ai-prompt-slots article > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; font-size: .5rem; }
.ai-prompt-slots small,
.ai-prompt-slots strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-prompt-slots small { font-size: .43rem; }
.ai-prompt-slots strong { color: inherit; font-size: .54rem; }

.ai-thinking { display: flex; align-items: center; gap: .3rem; color: #71668d; font-size: .46rem; }
.ai-thinking i { width: 5px; height: 5px; background: var(--era-accent); border-radius: 50%; animation: ai-thinking 1.1s ease-in-out infinite; }
.ai-thinking i:nth-child(2) { animation-delay: .15s; }
.ai-thinking i:nth-child(3) { animation-delay: .3s; }
.ai-thinking span { margin-left: .35rem; }

.ai-prompt-options { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ai-prompt-options button { min-width: 0; padding: .55rem; display: flex; align-items: center; gap: .5rem; color: #ddd7ef; background: #0d1316; border: 1px solid #3d3850; text-align: left; cursor: pointer; }
.ai-prompt-options button:hover:not(:disabled) { border-color: var(--era-accent); transform: translateY(-2px); }
.ai-prompt-options button > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #171224; background: var(--era-accent); font: 900 .48rem var(--mono); }
.ai-prompt-options strong,
.ai-prompt-options small { display: block; }
.ai-prompt-options strong { color: #fff; font-size: .62rem; }
.ai-prompt-options small { color: #776f8b; font-size: .5rem; }
.ai-prompt-options button:disabled { opacity: .3; }
.ai-prompt-options button.wrong { border-color: var(--orange); animation: shake .25s ease; }
.ai-prompt-options button.correct { color: #171224; background: var(--era-accent); border-color: var(--era-accent); opacity: 1; }
.ai-prompt-options button.correct > span { color: var(--era-accent); background: #171224; }
.ai-prompt-options button.correct strong { color: #171224; }
.ai-prompt-options button.correct small { color: #4d4565; }

.computer-controls {
  padding: 1.3rem .5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.fake-keys { display: flex; gap: .55rem; flex-wrap: wrap; max-width: 260px; }
.fake-keys span { width: 37px; height: 16px; background: #0c1012; border: 1px solid #3b4447; border-radius: 2px; box-shadow: 0 3px 0 #07090a; }

.power-button {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  color: #a9b2b5;
  background: #101517;
  border: 1px solid #414a4d;
  border-radius: 4px;
  font: 700 .62rem var(--mono);
  letter-spacing: .09em;
  cursor: pointer;
  box-shadow: 0 4px 0 #07090a;
}

.power-button i { width: 9px; height: 9px; background: #543629; border-radius: 50%; }
.power-button:hover i,
.game-console:not([data-state="off"]) .power-button i { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.power-button:disabled { cursor: default; opacity: .8; }

.mission-panel {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--night-raised);
}

.panel-step {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: .25rem;
  font-family: var(--mono);
}

.panel-step span { color: var(--green); font-size: 1.25rem; font-weight: 800; }
.panel-step small { color: #667177; font-size: .58rem; }
.panel-label { margin-bottom: .9rem; color: var(--green); font: 750 .67rem var(--mono); letter-spacing: .13em; }

.panel-content h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.panel-content > p:not(.panel-label):not(.feedback) { color: #aab4b7; font-size: .94rem; }

.objective {
  margin-top: 2rem;
  padding: 1rem;
  display: flex;
  gap: .85rem;
  background: rgba(169,255,104,.05);
  border: 1px solid rgba(169,255,104,.2);
}

.objective > span { color: var(--green); font-size: 1.25rem; }
.objective p { margin: 0; color: #bec7c9; font-size: .81rem; line-height: 1.45; }
.objective strong { display: block; color: #fff; }

.loading-bar { height: 5px; margin-top: 2rem; background: #293236; overflow: hidden; }
.loading-bar span { display: block; width: 100%; height: 100%; background: var(--green); transform-origin: left; animation: loading 2.7s ease-out both; }

.action-button { width: 100%; margin-top: 1.4rem; color: var(--night); background: var(--green); }
.action-button:hover { color: #fff; }

.command-options { display: grid; gap: .7rem; }
.command-options button {
  padding: .75rem .9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d6dddf;
  background: #0d1316;
  border: 1px solid #354147;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.command-options button:hover { border-color: var(--green); transform: translateX(4px); }
.command-options button.wrong { border-color: var(--orange); animation: shake .25s ease; }
.command-options button.correct { color: var(--night); background: var(--green); border-color: var(--green); }
.command-options code { color: inherit; font: 800 .92rem var(--mono); }
.command-options span { color: #778388; font-size: .7rem; }
.command-options button.correct span { color: var(--green-dark); }

.feedback { min-height: 3.5em; margin: 1rem 0 0; color: #859195; font-size: .75rem; }
.feedback.error { color: #ff9b77; }

.unlock-icon {
  width: 46px;
  height: 46px;
  margin-right: .4rem;
  display: inline-grid;
  place-items: center;
  color: var(--night);
  background: var(--green);
  border-radius: 50%;
  font: 900 1.2rem var(--mono);
  vertical-align: .2em;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  color: #b9c4c6;
  border-left: 2px solid var(--green);
  font: italic .92rem/1.6 Georgia, serif;
}

.success-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.success-actions .action-button { width: auto; margin: 0; }
.success-actions #replay-button { color: #aab4b7; background: transparent; border: 1px solid #465158; }
.success-actions #replay-button:hover { color: #fff; border-color: var(--orange); }
.success-actions a { color: #aab4b7; font-size: .78rem; font-weight: 700; }
.success-actions a:hover { color: var(--green); }

.memory-choice {
  margin: 1.4rem 0;
  padding-top: 1.2rem;
  border-top: 1px solid #354147;
}

.memory-choice > p:first-child {
  margin-bottom: .7rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
}

#memory-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

#memory-options button {
  min-width: 0;
  padding: .55rem .35rem;
  display: grid;
  justify-items: center;
  gap: .25rem;
  color: #aeb8bb;
  background: #0d1316;
  border: 1px solid #354147;
  border-radius: 2px;
  cursor: pointer;
}

#memory-options button:hover:not(:disabled) { color: var(--green); border-color: var(--green); }
#memory-options button.selected { color: var(--night); background: var(--green); border-color: var(--green); }
#memory-options button:disabled:not(.selected) { opacity: .35; }
#memory-options button span { font: 900 1rem var(--mono); }
#memory-options button strong { overflow: hidden; max-width: 100%; font-size: .65rem; text-overflow: ellipsis; }

.chosen-memory {
  margin: .75rem 0 0;
  color: var(--green);
  font: .68rem/1.5 var(--mono);
}

.cassette-objective {
  margin: 1.2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #354147;
}

.cassette-objective span { padding: .7rem; color: #829095; font: .62rem var(--mono); text-align: center; }
.cassette-objective span + span { border-left: 1px solid #354147; }
.cassette-objective b { color: #fff; font-size: .9rem; }
.sync-button { justify-content: space-between; }
.sync-button kbd { padding: .25rem .4rem; color: #50743b; background: rgba(11,16,20,.12); border: 1px solid rgba(11,16,20,.25); font: 700 .5rem var(--mono); }
.feedback.success { color: var(--green); }

.travel-loading span { animation-duration: 2.4s; }

.pascal-blocks { display: grid; gap: .55rem; }
.pascal-blocks button {
  min-width: 0;
  padding: .65rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #dce4e6;
  background: #0d1316;
  border: 1px solid #354147;
  text-align: left;
  cursor: pointer;
}

.pascal-blocks button:hover:not(:disabled) { border-color: var(--blue); transform: translateX(3px); }
.pascal-blocks button:disabled { opacity: .36; }
.pascal-blocks button > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--night); background: var(--blue); font: 900 .7rem var(--mono); }
.pascal-blocks button code { display: block; color: inherit; font: 700 .68rem var(--mono); white-space: normal; }
.pascal-blocks button small { display: block; color: #748187; font-size: .58rem; }
.pascal-blocks.wrong-order { animation: shake .3s ease; }

.pascal-controls { margin-top: .7rem; display: flex; gap: .5rem; }
.pascal-controls button { padding: .4rem .6rem; color: #8d999d; background: transparent; border: 1px solid #3d484d; font-size: .65rem; cursor: pointer; }
.pascal-controls button:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
.pascal-controls button:disabled { opacity: .35; }

.era-answer-options { display: grid; gap: .55rem; }
.era-answer-options button {
  min-width: 0;
  padding: .7rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #dce4e6;
  background: #0d1316;
  border: 1px solid #354147;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.era-answer-options button:hover:not(:disabled) { border-color: var(--era-accent); transform: translateX(4px); }
.era-answer-options button > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; color: var(--era-accent); border: 1px solid #465158; font: 800 .7rem var(--mono); }
.era-answer-options button strong { display: block; color: #fff; font-size: .74rem; }
.era-answer-options button small { display: block; color: #768288; font-size: .59rem; }
.era-answer-options button.wrong { border-color: var(--orange); opacity: .4; animation: shake .25s ease; }
.era-answer-options button.correct { color: var(--night); background: var(--era-accent); border-color: var(--era-accent); }
.era-answer-options button.correct > span { color: var(--night); border-color: var(--night); }
.era-answer-options button.correct small { color: #3f6031; }

.era-unlocks { margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.era-unlock-chip { padding: .45rem .6rem; display: flex; align-items: center; gap: .45rem; color: #c6d0d2; background: #0d1316; border: 1px solid #3a474c; }
.era-unlock-chip b { width: 27px; height: 27px; display: grid; place-items: center; color: var(--night); background: var(--era-accent); border-radius: 50%; font: 800 .52rem var(--mono); }
.era-unlock-chip small { font-size: .61rem; font-weight: 750; }

.secondary-action,
#replay-pascal-button { color: #aab4b7; background: transparent; border: 1px solid #465158; }
.secondary-action:hover,
#replay-pascal-button:hover { color: #fff; border-color: var(--orange); }

.next-era-card { margin: 1.4rem 0; padding: 1rem; background: rgba(115,200,255,.05); border: 1px solid rgba(115,200,255,.25); }
.next-era-card small,
.next-era-card span { display: block; color: #738087; font: .56rem var(--mono); }
.next-era-card strong { display: block; margin: .2rem 0; color: var(--blue); font: 800 .85rem var(--mono); }

.journey-log {
  position: relative;
  max-width: 1240px;
  margin: 3rem auto 0;
  padding: clamp(1.3rem, 3vw, 2.5rem);
  background: #11181c;
  border: 1px solid #344047;
}

.journey-log-header {
  padding-bottom: 2rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid #344047;
}

.journey-log-header .eyebrow { margin-bottom: .75rem; }
.journey-log-header h3 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; }

.journey-progress-copy { width: min(310px, 40%); }
.journey-progress-copy strong { display: block; margin-bottom: .65rem; color: #c2cbcd; font: 700 .68rem var(--mono); text-align: right; }

.local-save-status { margin-top: .55rem; display: flex; align-items: center; justify-content: flex-end; gap: .35rem; color: #657278; font: .5rem var(--mono); }
.local-save-status i { width: 6px; height: 6px; background: #63716a; border-radius: 50%; }
.local-save-status.saved-now { color: var(--green); animation: saved-flash .8s ease; }
.local-save-status.saved-now i { background: var(--green); box-shadow: 0 0 8px var(--green); }

.journey-progress-bar {
  height: 5px;
  display: block;
  background: #2b353a;
  overflow: hidden;
}

.journey-progress-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
  transition: width .6s ease;
}

.journey-map {
  position: relative;
  padding: 2.2rem 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(9, minmax(82px, 1fr));
  overflow-x: auto;
}

.journey-map::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 3.05rem;
  height: 1px;
  background: #354147;
}

.journey-node {
  position: relative;
  z-index: 1;
  min-width: 82px;
  text-align: center;
}

.journey-node-marker {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto .75rem;
  display: grid;
  place-items: center;
  color: #657176;
  background: #11181c;
  border: 1px solid #465158;
  border-radius: 50%;
  font: 800 .7rem var(--mono);
}

.journey-node.active .journey-node-marker {
  color: var(--night);
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,107,53,.12);
}

.journey-node.completed .journey-node-marker {
  color: var(--night);
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 5px rgba(169,255,104,.1);
}

.journey-node.next .journey-node-marker {
  color: var(--green);
  border-color: var(--green);
  animation: next-pulse 1.8s ease-in-out infinite;
}

.journey-node-copy { display: flex; flex-direction: column; line-height: 1.35; }
.journey-node-copy time { color: #849096; font: 700 .6rem var(--mono); }
.journey-node-copy strong { color: #c8d0d2; font-size: .68rem; }
.journey-node-copy small { margin-top: .2rem; color: #536066; font: 700 .48rem var(--mono); letter-spacing: .06em; }
.journey-node.completed .journey-node-copy time,
.journey-node.completed .journey-node-copy small { color: var(--green); }
.journey-node.next .journey-node-copy time,
.journey-node.next .journey-node-copy small { color: #a9e17f; }
.journey-node.locked { opacity: .55; }

.journey-summary {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border: 1px solid #344047;
}

.journey-card {
  min-width: 0;
  padding: 1.25rem;
  border-right: 1px solid #344047;
}

.journey-card:last-child { border-right: 0; }
.journey-card-label { margin-bottom: .8rem; color: #69767c; font: 700 .57rem var(--mono); letter-spacing: .1em; }

#current-coordinate,
.technology-chip,
.trait-value {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.coordinate-year,
.technology-chip > span,
.trait-value > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--night);
  background: var(--green);
  font: 900 .72rem var(--mono);
}

#current-coordinate strong,
.technology-chip strong,
.trait-value strong { display: block; color: #fff; font-size: .82rem; }

#current-coordinate small,
.technology-chip small,
.trait-value small { display: block; color: #829095; font-size: .64rem; line-height: 1.4; }

.technology-list { display: flex; flex-wrap: wrap; gap: .65rem; }
.technology-chip { min-width: 125px; }
.technology-chip > span { border-radius: 50%; font-size: 1rem; }
.trait-value > span { color: var(--green); background: rgba(169,255,104,.08); border: 1px solid rgba(169,255,104,.3); font-size: 1.1rem; }

.empty-slot {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #66747a;
  font-size: .68rem;
  line-height: 1.4;
}

.empty-slot span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px dashed #465158;
}

.progress-center {
  margin-top: 1.4rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: #0c1215;
  border: 1px solid #344047;
}

.progress-center > header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #344047; }
.progress-center > header .journey-card-label { margin-bottom: .35rem; }
.progress-center h4 { margin: 0; color: #fff; font-size: clamp(1.4rem, 3vw, 2.2rem); }
.progress-center > header > p { max-width: 310px; margin: 0; color: #69767c; font-size: .65rem; text-align: right; }

.persistent-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #344047; border-top: 0; }
.persistent-stat { padding: 1rem; border-right: 1px solid #344047; }
.persistent-stat:last-child { border-right: 0; }
.persistent-stat strong { display: block; color: var(--green); font: 800 1.35rem var(--mono); }
.persistent-stat small { color: #69767c; font: .52rem var(--mono); }

.achievement-section,
.mission-archive-section { padding-top: 1.8rem; }
.subsection-heading { margin-bottom: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.subsection-heading h5 { margin: 0; color: #fff; font-size: 1rem; }
.subsection-heading span { color: #67747a; font: .55rem var(--mono); }

.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.achievement-card { min-width: 0; padding: .75rem; display: flex; align-items: center; gap: .65rem; background: #11191c; border: 1px solid #303c41; }
.achievement-symbol { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: #5a676c; background: #0a0f11; border: 1px dashed #3b474c; border-radius: 50%; font: 800 .56rem var(--mono); }
.achievement-card strong { display: block; color: #7c898d; font-size: .68rem; }
.achievement-card p { margin: .15rem 0 0; color: #536066; font-size: .55rem; line-height: 1.35; }
.achievement-card.unlocked { background: rgba(169,255,104,.055); border-color: rgba(169,255,104,.3); }
.achievement-card.unlocked .achievement-symbol { color: var(--night); background: var(--green); border-color: var(--green); border-style: solid; box-shadow: 0 0 14px rgba(169,255,104,.14); }
.achievement-card.unlocked strong { color: #fff; }
.achievement-card.unlocked p { color: #82908c; }
.achievement-card.locked { filter: saturate(.2); }

.mission-archive { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mission-replay-card { min-width: 0; padding: .7rem; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .7rem; color: #dfe6e5; background: #11191c; border: 1px solid #303c41; text-align: left; cursor: pointer; }
.mission-replay-card:hover { border-color: var(--green); transform: translateY(-2px); }
.mission-replay-card > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--green); border: 1px solid #415049; font: 700 .57rem var(--mono); }
.mission-replay-card small,
.mission-replay-card strong,
.mission-replay-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-replay-card small { color: #657278; font: .48rem var(--mono); }
.mission-replay-card strong { color: #dfe6e5; font-size: .68rem; }
.mission-replay-card em { color: #75827e; font: normal .5rem var(--mono); }
.mission-replay-card > i { color: #65736d; font-style: normal; font-size: 1rem; }
.archive-empty { grid-column: 1 / -1; margin: 0; padding: 1rem; color: #68757a; border: 1px dashed #344047; font-size: .68rem; text-align: center; }

.local-data-controls { margin-top: 1.5rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #303c41; }
.local-data-controls p { margin: 0; color: #5e6b70; font-size: .58rem; }
.local-data-controls p strong { color: #879398; }
.local-data-controls button { padding: .45rem .65rem; flex: 0 0 auto; color: #b98270; background: transparent; border: 1px solid #69463b; font-size: .59rem; cursor: pointer; }
.local-data-controls button:hover { color: #fff; background: #8d3f29; border-color: #8d3f29; }

.achievement-toast {
  position: fixed;
  z-index: 90;
  right: 1.2rem;
  bottom: 5.8rem;
  min-width: 280px;
  padding: .8rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  background: #11191c;
  border: 1px solid var(--green);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .25s ease, transform .25s ease;
}

.achievement-toast[hidden] { display: none; }
.achievement-toast.visible { opacity: 1; transform: translateY(0); }
.achievement-toast > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--night); background: var(--green); border-radius: 50%; font: 900 .58rem var(--mono); }
.achievement-toast small,
.achievement-toast strong { display: block; }
.achievement-toast small { color: var(--green); font: .48rem var(--mono); letter-spacing: .08em; }
.achievement-toast strong { font-size: .8rem; }

.experience-tools {
  position: fixed;
  z-index: 85;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: .45rem;
}

.experience-tool {
  min-width: 72px;
  min-height: 52px;
  padding: .45rem .6rem;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: .4rem;
  color: #d6dedd;
  background: rgba(11,16,20,.94);
  border: 1px solid #415056;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  cursor: pointer;
}

.experience-tool > span { color: var(--green); font: 850 .6rem var(--mono); }
.experience-tool > strong { font: 800 .52rem var(--mono); letter-spacing: .06em; }
.experience-tool:hover { color: #fff; border-color: var(--green); transform: translateY(-2px); }
.experience-tool[aria-pressed="true"] { color: var(--night); background: var(--green); border-color: var(--green); }
.experience-tool[aria-pressed="true"] > span { color: var(--night); }
.experience-tool:disabled { color: #657176; background: #20272a; border-color: #354146; cursor: not-allowed; }

.help-dialog {
  width: min(720px, calc(100% - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
  padding: 0;
  overflow: auto;
  color: #d8dedd;
  background: #11191c;
  border: 1px solid #53636a;
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}

.help-dialog::backdrop { background: rgba(5,8,10,.78); backdrop-filter: blur(4px); }
.help-dialog:not([open]) { display: none; }
.help-dialog-head { padding: 1.4rem 1.5rem 1.1rem; display: flex; align-items: start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #344147; }
.help-dialog-head small { color: var(--green); font: 700 .56rem var(--mono); letter-spacing: .13em; }
.help-dialog-head h2 { margin: .2rem 0 0; color: #fff; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; letter-spacing: -.04em; }
.dialog-close { width: 42px; height: 42px; flex: 0 0 auto; color: #dce3e4; background: #202b2f; border: 1px solid #4b5a60; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.dialog-close:hover { color: var(--night); background: var(--green); border-color: var(--green); }

.shortcut-grid { padding: 1.3rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.shortcut-grid p { min-width: 0; margin: 0; padding: .8rem; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: .7rem; background: #0c1215; border: 1px solid #2f3b40; }
.shortcut-grid kbd { padding: .36rem .4rem; color: var(--green); background: #182226; border: 1px solid #536168; border-bottom-width: 3px; border-radius: 3px; font: 800 .58rem var(--mono); text-align: center; }
.shortcut-grid span,
.shortcut-grid strong { display: block; }
.shortcut-grid strong { color: #fff; font-size: .68rem; }
.shortcut-grid span { color: #7f8c90; font-size: .56rem; line-height: 1.4; }
.secret-hint { margin: 0 1.5rem 1.3rem; padding: .85rem 1rem; display: flex; align-items: center; gap: .7rem; color: #a6b0b2; background: rgba(244,211,94,.06); border: 1px dashed rgba(244,211,94,.4); font-size: .65rem; }
.secret-hint > span { color: var(--yellow); font-size: 1.25rem; }
.secret-hint strong { color: var(--yellow); }
.help-dialog form { margin: 0; padding: 0 1.5rem 1.5rem; }
.help-dialog form .action-button { width: 100%; }

.secret-terminal {
  position: fixed;
  z-index: 115;
  left: 50%;
  top: 50%;
  width: min(460px, calc(100% - 2rem));
  padding: 1.35rem;
  display: grid;
  gap: .2rem;
  color: #ffd36f;
  background: #241b08;
  border: 2px solid #f0b84f;
  box-shadow: 0 0 0 9999px rgba(5,7,8,.68), 0 0 60px rgba(240,184,79,.28);
  font-family: var(--mono);
  transform: translate(-50%, -50%);
  animation: secret-appear .42s steps(4, end);
}

.secret-terminal[hidden] { display: none; }
.secret-terminal small { color: #b78a37; font-size: .56rem; letter-spacing: .12em; }
.secret-terminal strong { font-size: clamp(1.2rem, 5vw, 2rem); }
.secret-terminal span { color: #d7ae5f; font-size: .66rem; }
body.secret-amber .game-console .monitor { color: #ffd36f !important; background: #291e08 !important; text-shadow: 0 0 9px rgba(255,211,111,.5) !important; }
body.secret-amber .game-console { --era-accent: #ffd36f; }

.effect-layer { position: fixed; z-index: 110; inset: 0; overflow: hidden; pointer-events: none; }
.fx-particle {
  position: absolute;
  left: var(--fx-left);
  top: var(--fx-top);
  width: var(--fx-size);
  height: var(--fx-size);
  background: var(--fx-color);
  border-radius: var(--fx-radius);
  box-shadow: 0 0 12px var(--fx-color);
  animation: particle-burst var(--fx-duration) cubic-bezier(.12,.8,.25,1) forwards;
}

body.fx-era-shift .game-console { animation: era-arrival .75s ease both; }

.noscript-message { max-width: 1240px; margin: 1rem auto 0; padding: 1rem; color: var(--night); background: var(--yellow); }

.story-intro { padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 8vw, 9rem); }
.story-intro > .eyebrow { max-width: 1180px; margin-left: auto; margin-right: auto; }

.story-title-row {
  max-width: 1180px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr .7fr;
  align-items: end;
  gap: clamp(2rem, 8vw, 8rem);
}

.story-title-row h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .92;
  letter-spacing: -.07em;
}

.story-title-row > p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

.story-archive { max-width: 1180px; margin: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.story-archive summary { padding: 1.3rem .2rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; cursor: pointer; list-style: none; }
.story-archive summary::-webkit-details-marker { display: none; }
.story-archive summary span { font-weight: 800; }
.story-archive summary small { color: #747b7c; font: 700 .65rem var(--mono); letter-spacing: .08em; }
.story-archive summary i { font-size: 1.7rem; font-style: normal; transition: transform .2s ease; }
.story-archive[open] summary i { transform: rotate(45deg); }
.story-archive[open] summary { border-bottom: 1px solid var(--line); }

.archive-body { padding: clamp(2rem, 5vw, 4rem) 0; }
.archive-introduction { max-width: 800px; margin: 0 0 4rem auto; font-size: 1.05rem; }
.archive-introduction p:first-child { font-size: 1.4rem; font-weight: 750; }

.history-entry {
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 700px);
  gap: 2rem;
  border-top: 1px solid var(--line);
}

.history-entry time { color: var(--orange); font: 900 1.5rem var(--mono); }
.history-entry h3 { margin-bottom: .9rem; font-size: 1.5rem; letter-spacing: -.025em; }
.history-entry p { color: var(--ink-soft); }
.history-entry a { text-decoration-color: var(--orange); text-underline-offset: 3px; }
.history-entry a:hover { color: var(--orange); }
.featured-entry img { max-width: 430px; margin: .5rem 0 1.5rem; border-radius: 4px; }

.learning-notes { margin-top: 3rem; padding: clamp(2rem, 5vw, 4rem); color: #e8edeb; background: var(--night); }
.learning-notes h3 { max-width: 700px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; }
.learning-notes > p { max-width: 760px; color: #adb7ba; }
.learning-notes ol { margin: 2.5rem 0; padding: 0; list-style: none; counter-reset: lessons; }
.learning-notes li { position: relative; padding: 1.1rem 0 1.1rem 42px; color: #aeb8bb; border-top: 1px solid #333d42; counter-increment: lessons; }
.learning-notes li::before { content: "0" counter(lessons); position: absolute; left: 0; top: 1.35rem; color: var(--green); font: 700 .75rem var(--mono); }
.learning-notes li strong { color: #fff; }
.learning-notes .closing-quote { max-width: none; margin: 3rem 0 0; color: #fff; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.closing-quote em { color: var(--green); font-family: Georgia, serif; }

.site-footer {
  padding: 2rem clamp(1.25rem, 8vw, 9rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: #dce2e0;
  background: #070a0c;
}

.site-footer > div { display: flex; align-items: center; gap: 1rem; }
.site-footer p { margin: 0; color: #7e898c; font-size: .75rem; line-height: 1.45; }
.site-footer p strong { color: #fff; }
.site-footer > a { color: #aab3b6; font-size: .75rem; font-weight: 750; }
.site-footer > a:hover { color: var(--green); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes screen-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes loading { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes next-pulse { 50% { box-shadow: 0 0 0 7px rgba(169,255,104,.08); } }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@keyframes meter-hit { 50% { box-shadow: 0 0 18px rgba(169,255,104,.5); } }
@keyframes data-loaded { from { opacity: 0; transform: scaleY(.1); } }
@keyframes jump-arrow { 50% { transform: translateX(8px); } }
@keyframes tunnel-line { from { transform: translateX(-90px) skewX(-28deg); opacity: 0; } 50% { opacity: 1; } to { transform: translateX(90px) skewX(-28deg); opacity: 0; } }
@keyframes data-packet { from { left: -34px; } to { left: 100%; } }
@keyframes swipe-hint { 50% { transform: translateX(-16px); } }
@keyframes press-hint { 50% { transform: scale(.76); box-shadow: 0 0 0 9px rgba(35,143,89,.16); } }
@keyframes ai-orbit { to { transform: rotate(360deg); } }
@keyframes ai-thinking { 50% { transform: translateY(-4px); opacity: .45; } }
@keyframes saved-flash { 50% { opacity: .55; } }
@keyframes particle-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx-x)), calc(-50% + var(--fx-y))) scale(.7) rotate(var(--fx-rotate)); }
}
@keyframes era-arrival { 0% { filter: brightness(1.7) saturate(.35); transform: scale(.992); } 100% { filter: none; transform: none; } }
@keyframes secret-appear { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 5rem; }
  .hero-copy { max-width: 760px; }
  .hero-art { width: min(80%, 480px); margin: 0 auto 3rem; }
  .era-track { grid-template-columns: repeat(9, 1fr); }
  .track-line { position: absolute; z-index: -1; left: 2%; right: 2%; top: 12px; }
  .era { padding-top: 1.4rem; }
  .era::before { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; background: #b3afa4; border-radius: 50%; }
  .era.active::before { background: var(--orange); }
  .game-console { grid-template-columns: 1fr; }
  .computer { border-right: 0; border-bottom: 1px solid #344047; }
  .mission-panel { min-height: 430px; }
  .story-title-row { grid-template-columns: 1fr; align-items: start; }
  .journey-summary { grid-template-columns: 1fr 1fr; }
  .journey-card { border-bottom: 1px solid #344047; }
  .journey-card:nth-child(2) { border-right: 0; }
  .journey-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .resume-card { grid-template-columns: auto 1fr; }
  .resume-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .achievement-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
  .site-header { padding: .8rem 1rem; align-items: flex-start; }
  .brand > span:last-child { display: none; }
  .site-header nav { gap: .2rem; }
  .site-header nav a { min-width: auto; padding: .75rem .55rem; font-size: .64rem; }
  .site-header nav a::after { left: .55rem; right: .55rem; }
  .hero { min-height: auto; padding-bottom: 9rem; }
  h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hand-note { right: .5rem; bottom: -4.5rem; }
  .era-track { overflow-x: auto; grid-template-columns: repeat(9, 68px); justify-content: space-between; }
  .track-line { min-width: 620px; }
  .section-heading { align-items: start; flex-direction: column; }
  .mission-stats { width: 100%; }
  .mission-stats span { min-width: 0; flex: 1; }
  .game-section { padding-left: .75rem; padding-right: .75rem; }
  .game-console { border-left: 0; border-right: 0; }
  .computer { padding: 1rem .7rem; }
  .monitor { min-height: 330px; padding: 1.25rem; font-size: .78rem; border-radius: 18px / 12px; }
  .computer-controls { padding-left: .2rem; padding-right: .2rem; }
  .fake-keys { max-width: 180px; gap: .35rem; }
  .fake-keys span { width: 28px; height: 13px; }
  .mission-panel { min-height: 460px; padding: 4rem 1.4rem 2rem; }
  .era-screen-visual { min-height: 155px; padding: 1rem; }
  .era-screen-visual > pre { font-size: .68rem; }
  .web-stack-slots,
  .web-tech-options { grid-template-columns: 1fr; }
  .smartphone { width: min(205px, 88%); }
  .ai-prompt-slots,
  .ai-prompt-options { grid-template-columns: 1fr; }
  #memory-options { grid-template-columns: 1fr; }
  #memory-options button { grid-template-columns: 28px 1fr; justify-items: start; text-align: left; }
  .journey-log { padding: 1rem; }
  .journey-log-header { align-items: start; flex-direction: column; }
  .journey-progress-copy { width: 100%; }
  .journey-progress-copy strong { text-align: left; }
  .journey-map { grid-template-columns: repeat(9, 96px); }
  .journey-summary { grid-template-columns: 1fr; }
  .journey-card,
  .journey-card:nth-child(2) { border-right: 0; border-bottom: 1px solid #344047; }
  .journey-card:last-child { grid-column: auto; border-bottom: 0; }
  .progress-center > header { align-items: start; flex-direction: column; }
  .progress-center > header > p { text-align: left; }
  .persistent-stats { grid-template-columns: 1fr 1fr; }
  .persistent-stat:nth-child(2) { border-right: 0; }
  .persistent-stat:nth-child(-n+2) { border-bottom: 1px solid #344047; }
  .achievement-grid,
  .mission-archive { grid-template-columns: 1fr; }
  .local-data-controls { align-items: flex-start; flex-direction: column; }
  .achievement-toast { left: .75rem; right: .75rem; bottom: .75rem; min-width: 0; }
  .achievement-toast { bottom: 5.1rem; }
  .experience-tools { right: .75rem; bottom: .75rem; }
  .experience-tool { min-width: 64px; min-height: 46px; }
  .shortcut-grid { grid-template-columns: 1fr; padding: 1rem; }
  .shortcut-grid p { grid-template-columns: 68px 1fr; }
  .help-dialog-head { padding: 1.1rem 1rem .9rem; }
  .secret-hint { margin: 0 1rem 1rem; }
  .help-dialog form { padding: 0 1rem 1rem; }
  .resume-card { grid-template-columns: 1fr; }
  .resume-icon { display: none; }
  .resume-actions { grid-column: auto; align-items: stretch; flex-direction: column; }
  .resume-actions .action-button { width: 100%; }
  .story-archive summary { grid-template-columns: 1fr auto; gap: 1rem; }
  .story-archive summary small { display: none; }
  .history-entry { grid-template-columns: 1fr; gap: .7rem; }
  .site-footer { align-items: flex-start; }
  .site-footer > a { text-align: right; }
}

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