/* Takeoff. The interface changes with each era of AI:
   1 teletype greenbar paper · 2 a beige 1990s desktop · 3 a clean modern app
   4 a dark AGI console · 5 deep space. Colours and shapes come from body[data-era]. */
:root { --mono: "IBM Plex Mono", ui-monospace, monospace; --sans: "IBM Plex Sans", system-ui, sans-serif; }
body { margin: 0; font: 400 1rem/1.45 var(--sans); background: var(--bg); color: var(--ink); min-height: 100dvh; transition: background 0.8s, color 0.8s; }
* { box-sizing: border-box; }
button { font: inherit; }

/* era 1: greenbar continuous paper from a line printer */
body[data-era="1"] { --bg: #fbfcf7; --band: #e3eedc; --card: transparent; --ink: #1f231d; --muted: #5c6658; --line: #b9c7b1; --accent: #a8291f; --on-accent: #fff; --btn: #f6f8f1; --bar: #a8291f; --r: 0; --font: var(--mono);
  background-image: repeating-linear-gradient(to bottom, var(--band) 0 3.6em, transparent 3.6em 7.2em); }
@media (prefers-color-scheme: dark) { body[data-era="1"] { --bg: #141713; --band: #1b221a; --ink: #d7e2cf; --muted: #93a28c; --line: #34402f; --accent: #ff7b6b; --on-accent: #141713; --btn: #1c221b; } }
/* era 2: beige plastic, bevels, teal desktop */
body[data-era="2"] { --bg: #cfc8b8; --card: #e9e4d8; --ink: #141414; --muted: #575348; --line: #8f897b; --accent: #00807f; --on-accent: #fff; --btn: #e9e4d8; --bar: #00807f; --r: 2px; --font: var(--sans); }
@media (prefers-color-scheme: dark) { body[data-era="2"] { --bg: #2b2a26; --card: #3a3832; --ink: #ecebe5; --muted: #b2ad9f; --line: #5f5b50; --accent: #3fc2c0; --on-accent: #10201f; --btn: #46433c; } }
/* era 3: clean modern app */
body[data-era="3"] { --bg: #f4f6f9; --card: #fff; --ink: #11141b; --muted: #5a6273; --line: #dde2ea; --accent: #2f5bff; --on-accent: #fff; --btn: #fff; --bar: #2f5bff; --r: 14px; --font: var(--sans); }
@media (prefers-color-scheme: dark) { body[data-era="3"] { --bg: #0f1218; --card: #171b23; --ink: #e9edf5; --muted: #98a2b6; --line: #262c38; --accent: #7a96ff; --on-accent: #0f1218; --btn: #1d222c; } }
/* era 4: the AGI console */
body[data-era="4"] { --bg: #0d0e12; --card: #16171d; --ink: #eceaf2; --muted: #9a97aa; --line: #2a2933; --accent: #b9a8ff; --on-accent: #120f1f; --btn: #1d1d25; --bar: #b9a8ff; --r: 6px; --font: var(--sans); color-scheme: dark; }
/* era 5: deep space */
body[data-era="5"] { --bg: #05030c; --card: rgb(255 255 255 / 0.04); --ink: #f4efe6; --muted: #b3a998; --line: rgb(255 255 255 / 0.12); --accent: #ffc861; --on-accent: #1a1203; --btn: rgb(255 255 255 / 0.06); --bar: #ffc861; --r: 20px; --font: var(--sans); color-scheme: dark;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 72%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #fff5 50%, transparent 51%), radial-gradient(120% 70% at 50% 120%, #3b1d0c 0%, #05030c 60%); background-attachment: fixed; }

body { font-family: var(--font); }
.top { display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; max-width: 760px; margin: 0 auto; }
.brand { display: flex; flex-direction: column; flex: 1; line-height: 1.1; }
.brand b { font: 700 1.1rem/1 var(--sans); letter-spacing: 0.01em; }
.brand .era { color: var(--muted); font-size: 0.8125rem; }
.year { font: 600 2rem/1 var(--mono); letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--btn); font-size: 1.2rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: 46px; z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.4); }
.menu-pop button, .menu-pop a { text-align: left; padding: 10px 12px; background: none; border: 0; color: var(--ink); cursor: pointer; text-decoration: none; border-radius: 6px; font-family: var(--sans); }
.menu-pop button:hover, .menu-pop a:hover { background: var(--line); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
.menu-pop .danger { color: #d33; }

.hero { max-width: 760px; margin: 0 auto; padding: 4px 16px 10px; }
.count { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.lbl { color: var(--muted); font-size: 0.8125rem; margin: 0; }
.huge { font: 600 clamp(2.6rem, 11vw, 4rem)/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.big { font: 600 1.25rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); font-size: 0.8125rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.stat .mini { margin-top: 4px; }
.pricebox { display: flex; align-items: center; gap: 8px; }
.pricebox .big { min-width: 3.6em; text-align: center; }
.step { width: 38px; height: 34px; padding: 0; font-size: 1.2rem; }
.meters { gap: 8px; }
.meter .bar { height: 6px; }
.meter.align .bar i { background: #2fb37a; }

.bar { height: 8px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.bar.big { height: 12px; margin: 8px 0 10px; }
.bar i { display: block; height: 100%; background: var(--bar); transition: width 0.3s; border-radius: inherit; }
.bar.duo { background: color-mix(in srgb, #d0583c 55%, var(--line)); }

button, .mini { cursor: pointer; border: 1px solid var(--line); background: var(--btn); color: var(--ink); border-radius: var(--r); padding: 8px 12px; min-height: 40px; font-weight: 600; font-family: var(--sans); white-space: nowrap; }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); width: 100%; min-height: 48px; }
.ghost { background: transparent; }
.mini { min-height: 32px; padding: 4px 8px; font-size: 0.8125rem; }
body[data-era="2"] button:not(:disabled) { box-shadow: inset -2px -2px 0 #0003, inset 2px 2px 0 #fff8; }
body[data-era="2"] button:active:not(:disabled) { box-shadow: inset 2px 2px 0 #0003, inset -2px -2px 0 #fff8; }
body[data-era="1"] button { border-style: dashed; }
body[data-era="5"] button, body[data-era="5"] .mini { border-radius: 999px; }
.contract .sub { display: block; }

.alerts { max-width: 760px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.alert { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--r); border: 1px solid; }
.alert.winter { background: color-mix(in srgb, #5aa7e6 18%, var(--bg)); border-color: #5aa7e6; }
.alert.incident { background: color-mix(in srgb, #e05a45 16%, var(--bg)); border-color: #e05a45; }
.alert span { font-size: 0.875rem; color: var(--muted); }

.body { max-width: 760px; margin: 0 auto; padding: 10px 16px calc(150px + env(safe-area-inset-bottom)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.card h2 { font: 600 1.05rem/1.2 var(--sans); margin: 0 0 8px; }
.latest { border-left: 4px solid var(--accent); }
.latest.ai { font-family: var(--mono); }
.latest-text { margin: 4px 0 0; }
.milestone h2 { font-size: 1.3rem; margin: 2px 0 4px; }
.milestone .desc { margin: 0 0 6px; }
.need { color: var(--accent); font-weight: 600; margin: 0 0 6px; font-size: 0.875rem; }
.items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.what { flex: 1; min-width: 0; }
.what p { margin: 2px 0 0; font-size: 0.875rem; color: var(--muted); }
.what b { font-weight: 600; }
.own { font-family: var(--mono); color: var(--accent); }
.yr, .tag { display: inline-block; margin-left: 6px; font: 400 0.75rem/1 var(--mono); color: var(--muted); }
.tag { color: #2fb37a; border: 1px solid currentColor; padding: 2px 5px; border-radius: 4px; }
.eff { display: block; font-size: 0.8125rem; color: var(--ink); margin-top: 2px; }
.idea { font-style: italic; }
.buys { display: flex; flex-direction: column; gap: 4px; }
.x10 { min-height: 30px; font-size: 0.8125rem; padding: 2px 8px; }
.reboot { margin-top: 6px; background: color-mix(in srgb, #e05a45 18%, var(--btn)); border-color: #e05a45; animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { border-color: transparent; } }
.research .alignment { position: relative; }
.finished { opacity: 0.6; }
.check { color: #2fb37a; font-size: 1.2rem; padding: 0 10px; }
.head-card .big { display: block; }
.hint { margin: 8px 0 0; font-size: 0.875rem; color: var(--muted); display: block; }
.warn { color: #e05a45; font-weight: 600; margin: 8px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.share { margin-top: 6px; }
.done-list summary { cursor: pointer; font-weight: 600; }
.log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.entry { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.entry p { margin: 0; }
.entry .when { font: 600 0.8125rem/1.4 var(--mono); color: var(--accent); margin-bottom: 4px; }
.entry.ai { font-family: var(--mono); border-color: var(--accent); }
.who { margin-left: 8px; font-weight: 400; color: var(--muted); }
.cosmic .big { font-size: 1.6rem; }

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.work { display: block; width: 100%; max-width: 736px; margin: 0 auto 8px; min-height: 58px; font-size: 1.15rem; background: var(--accent); color: var(--on-accent); border-color: var(--accent); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.work.pulse { animation: pulse 0.18s ease-out; }
@keyframes pulse { 50% { transform: scale(0.97); } }
.tabs { display: flex; gap: 4px; max-width: 736px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1; min-height: 40px; padding: 6px 8px; font-size: 0.875rem; background: transparent; border-color: transparent; position: relative; }
.tabs button.on { background: var(--btn); border-color: var(--line); color: var(--accent); }
.tabs .badge { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 600 0.6875rem/18px var(--sans); font-style: normal; }
.tabs .badge[hidden] { display: none; }

.ending { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: #05030c; color: #f4efe6; overflow: auto; animation: fade 2s ease both; }
.ending.unaligned { background: radial-gradient(circle at 50% 40%, #2a0d12, #05030c 70%); }
.ending.aligned { background: radial-gradient(circle at 50% 40%, #3b2a0c, #05030c 70%); }
.ending-in { max-width: 560px; }
.ending h1 { font: 600 clamp(1.8rem, 6vw, 2.8rem)/1.1 var(--sans); margin: 8px 0 16px; }
.ending .story { font: 400 1.125rem/1.6 var(--mono); }
.ending .statline { font-family: var(--mono); color: #ffc861; }
.ending .primary { background: #ffc861; color: #1a1203; border-color: #ffc861; margin-top: 16px; }
@keyframes fade { from { opacity: 0; } }
.dialog { max-width: min(560px, 94vw); background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 0; }
.dialog-in { padding: 16px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog-head h2 { margin: 0; }
.history { padding-left: 1em; } .history li { margin: 8px 0; } .history p { margin: 2px 0 0; color: var(--muted); font-size: 0.875rem; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.meters.wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.meter.safety .bar i { background: #e0a43a; }
.tag.safety { color: #e0a43a; }
.paper .ptitle { display: block; margin-top: 4px; }
.authors { font-weight: 600; color: var(--ink) !important; }
.grantline { text-align: center; display: block; }
.entry.history { border-style: dashed; }
.entry.history .when { color: var(--muted); }
.latest.history { border-left-style: dashed; }
.float { position: fixed; z-index: 40; pointer-events: none; font: 600 1.1rem/1 var(--mono); color: var(--accent); animation: floatUp 0.7s ease-out forwards; }
@keyframes floatUp { to { transform: translateY(-50px); opacity: 0; } }
.dialog h3 { margin: 16px 0 4px; }

/* landing page: Turing's question typed on the era's paper, then the title and one button */
.landing { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.landing[hidden], #app[hidden] { display: none; }
.land-in { max-width: 34rem; width: 100%; }
.land-quote { margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); }
.typed { font-size: clamp(1.15rem, 5vw, 1.5rem); color: var(--accent); white-space: nowrap; overflow: hidden; width: 21ch; border-right: 0.12em solid var(--accent);
  animation: type 1.6s steps(21) 0.3s both, caret 0.8s step-end 2s 4 forwards; }
.cite { color: var(--muted); font-size: 0.8125rem; }
@keyframes type { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } to { border-color: transparent; } }
.landing h1 { font: 700 clamp(2.4rem, 11vw, 4.2rem)/1 var(--sans); letter-spacing: -0.035em; margin: 0 0 18px; overflow-wrap: anywhere; }
.land-desc { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 26px; max-width: 32rem; }
.land-go { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.land-small { color: var(--muted); font-size: 0.875rem; margin: 18px 0 6px; }
.land-links { display: flex; gap: 18px; align-items: center; font-size: 0.875rem; margin: 0; }
.land-links a, .linkish { color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; min-height: 0; font-weight: 400; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .typed { animation: none; border-right: 0; } }

/* things revealed as the game advances: one short glow when they first appear */
.stats.one { grid-template-columns: 1fr; }
.intro p { margin: 0; }
.new { animation: reveal 1.4s ease-out; }
@keyframes reveal { from { box-shadow: 0 0 0 3px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .new { animation: none; } }
.tabs[hidden] { display: none; }