.game-page {
  --paper: #101715;
  --paper-deep: #18211e;
  --ink: #eeeade;
  --muted: #a0a79e;
  --accent: #7ce0a0;
  --line: #34403a;
  background: var(--paper);
  color: var(--ink);
}

.game-page .site-header { border-color: var(--line); }
.game-page .wordmark { color: var(--ink); }
.game-page .wordmark-icon { color: var(--accent); }
.game-page .wordmark-subtitle { color: #889286; }
.game-page .site-nav { color: #b7bdb3; }
.game-page .site-nav a:hover, .game-page .header-link:hover { color: var(--accent); }
.game-page .header-link { color: #e4e4d8; }
.game-page .header-link span { color: var(--accent); }
.game-page .menu-toggle { border-color: var(--line); }
.game-page .menu-toggle span { background: var(--ink); }
.game-page .site-nav.is-open { background: #141d1a; border-color: var(--line); }
.game-page .site-nav a { border-color: var(--line); }
.game-page .eyebrow { color: #aab2a8; }
.game-page .eyebrow-dot { background: var(--accent); box-shadow: 0 0 0 4px #7ce0a022; }

.game-hero { min-height: 680px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 3%; position: relative; padding-top: 70px; padding-bottom: 95px; }
.game-hero-copy { position: relative; z-index: 2; max-width: 590px; padding-bottom: 10px; }
.game-genre, .game-kicker { color: #a4aaa0; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.game-genre { margin: 0 0 18px; }
.game-hero h1 { margin: 0 0 28px; font-size: clamp(78px, 10vw, 127px); font-weight: 500; line-height: .78; letter-spacing: -.095em; }
.game-hero h1 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.game-credit { margin: -13px 0 20px; color: #849184; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.game-logline { max-width: 475px; margin-bottom: 25px; color: #d0d1c4; font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.42; }
.game-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.game-hero-tags span { padding: 7px 10px; border: 1px solid #4a554b; border-radius: 99px; color: #b9c0b4; font-size: 10px; }
.game-scroll-link { display: inline-flex; gap: 18px; align-items: center; margin-top: 34px; color: #e8e6d8; font-size: 12px; }
.game-scroll-link span { color: var(--accent); font-size: 17px; }
.game-hero-art { height: min(45vw, 475px); min-height: 360px; position: relative; overflow: hidden; border-radius: 48% 48% 2px 2px; isolation: isolate; background-color: #0c171b; background-image: radial-gradient(circle at 16% 18%, #e7efd8 0 1px, transparent 1.6px), radial-gradient(circle at 29% 52%, #e7efd8 0 1px, transparent 1.4px), radial-gradient(circle at 48% 20%, #e7efd8 0 1px, transparent 1.6px), radial-gradient(circle at 76% 14%, #e7efd8 0 1px, transparent 1.4px), radial-gradient(circle at 87% 49%, #e7efd8 0 1px, transparent 1.6px), radial-gradient(circle at 35% 78%, #e7efd8 0 1px, transparent 1.6px), radial-gradient(circle at 63% 66%, #e7efd8 0 1px, transparent 1.3px), radial-gradient(ellipse at 58% 42%, #25c47933, transparent 28%), linear-gradient(152deg, #101c27, #111c1c 56%, #1b2821); }
.game-hero-art::before { content: ''; position: absolute; z-index: 0; width: 75%; height: 75%; left: 12%; top: 12%; border: 1px solid #e9f1dc1c; border-radius: 50%; box-shadow: 0 0 0 32px #e9f1dc08, 0 0 0 75px #e9f1dc06; }
.game-hero-art::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: linear-gradient(0deg, #091310a8, transparent 48%, #08121730); pointer-events: none; }
.hero-nebula { position: absolute; z-index: 0; width: 83%; height: 39%; right: -18%; top: 19%; transform: rotate(-33deg); background: linear-gradient(90deg, transparent, #41ab8052, #aadbb33b, transparent); filter: blur(22px); }
.hero-planet { position: absolute; z-index: 1; width: 75%; height: 32%; bottom: -7%; left: 6%; border-radius: 50% 50% 0 0; transform: rotate(-8deg); background: linear-gradient(180deg, #39463c, #17231d 58%, #101a16); box-shadow: 0 -7px 34px #93d4a01c; }
.hero-comet { position: absolute; z-index: 2; width: 130%; height: 3px; top: 39%; left: -8%; transform: rotate(-36deg); background: linear-gradient(90deg, transparent, #83e6a2 42%, #d5ffe2 55%, #87f7b0 65%, transparent); box-shadow: 0 0 16px #83e6a2, 0 0 52px #60e692; }
.hero-comet-head { position: absolute; z-index: 2; top: 15%; right: 19%; width: 11px; height: 11px; border-radius: 50%; background: #ecfff2; box-shadow: 0 0 16px 8px #80f0aaab, 0 0 58px 24px #54dd903b; }
.hero-art-coordinate, .hero-art-caption, .hero-art-date { position: absolute; z-index: 4; color: #e9eddf; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.hero-art-coordinate { left: 25px; top: 30px; }
.hero-art-caption { left: 25px; bottom: 49px; color: #d1dacd; }
.hero-art-date { right: 25px; bottom: 27px; color: #adb7a9; }
.game-hero-index { position: absolute; bottom: 30px; left: 0; color: #818b80; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }

.game-section { border-top: 1px solid var(--line); }
.game-intro { padding-top: 96px; padding-bottom: 112px; }
.project-section-label { display: flex; align-items: center; gap: 14px; color: #a0a89c; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; }
.project-section-label span:first-child { color: var(--accent); }
.game-intro-grid { display: grid; grid-template-columns: 1fr .94fr; gap: 9%; margin-top: 41px; }
.game-kicker { margin: 0 0 17px; font-size: 9px; }
.game-intro h2, .play-heading h2, .vessel-copy h2, .identity-copy h2, .themes-layout > h2, .reveal-copy h2, .status-copy h2, .game-ending h2 { margin: 0; font-size: clamp(42px, 5.6vw, 65px); font-weight: 500; line-height: 1.05; letter-spacing: -.065em; }
.game-intro h2 em, .play-heading h2 em, .vessel-copy h2 em, .identity-copy h2 em, .themes-layout > h2 em, .reveal-copy h2 em, .game-ending h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.game-intro-copy { color: #b9bdb2; font-size: 13px; line-height: 1.85; }
.game-intro-copy p { margin: 0 0 14px; }
.game-intro-copy .game-emphasis { margin-top: 21px; padding-left: 15px; border-left: 2px solid var(--accent); color: #e0e1d4; font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.55; }
.story-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 64px; }
.timeline-card { min-height: 258px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 21px 19px; border: 1px solid #364039; background: linear-gradient(142deg, #17211d, #121a17); }
.timeline-mark, .timeline-date { color: #929b8f; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.timeline-glyph { display: block; height: 55px; margin: 21px 0 8px; color: var(--accent); font-family: var(--serif); font-size: 46px; line-height: 1; }
.glyph-up { font-family: var(--sans); font-size: 43px; font-weight: 300; }
.glyph-orbit { font-size: 48px; }
.glyph-home { font-size: 43px; }
.timeline-card h3 { margin: 5px 0 8px; color: #ece9dd; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.timeline-card p { max-width: 280px; margin: 0 0 17px; color: #aab1a5; font-size: 11px; line-height: 1.65; }
.timeline-date { margin-top: auto; color: #758074; font-size: 7px; }
.title-origin { display: grid; grid-template-columns: .34fr 1fr; gap: 20px; align-items: start; margin-top: 22px; padding: 20px 23px; border-left: 2px solid var(--accent); background: #17211d; }
.title-origin-label { color: #8e988c; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
.title-origin p { margin: 0; color: #b5bbae; font-size: 11px; line-height: 1.7; }
.title-origin strong { color: #ecebdd; font-family: var(--serif); font-size: 15px; font-weight: 500; }

.game-play { padding-top: 94px; padding-bottom: 113px; }
.play-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 9%; align-items: end; margin-top: 38px; }
.play-heading h2 { font-size: clamp(42px, 5.5vw, 63px); }
.play-heading > p { max-width: 385px; margin: 0 0 5px; color: #aeb4a9; font-size: 13px; line-height: 1.8; }
.system-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 44px; }
.system-card { min-height: 285px; position: relative; grid-column: span 3; overflow: hidden; padding: 23px 24px; border: 1px solid #39413b; background: #161e1a; }
.system-card::before { content: ''; position: absolute; top: 0; right: 0; width: 180px; height: 140px; opacity: .22; background: radial-gradient(ellipse at top right, currentColor, transparent 68%); pointer-events: none; }
.system-card-large { min-height: 345px; grid-column: span 3; }
.system-card-wide { grid-column: span 6; min-height: 250px; }
.system-green { color: #7ce0a0; }
.system-amber { color: #e0ba76; }
.system-blue { color: #90b7e4; }
.system-red { color: #df9687; }
.system-violet { color: #c3a4df; }
.system-number, .system-footnote { position: relative; z-index: 1; color: #8e988b; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.system-icon { display: block; position: relative; z-index: 1; margin-top: 28px; color: currentColor; font-family: var(--serif); font-size: 28px; }
.system-card h3 { position: relative; z-index: 1; max-width: 340px; margin: 14px 0 10px; color: #e9e8dc; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; }
.system-card p { position: relative; z-index: 1; max-width: 480px; margin: 0; color: #aeb4a8; font-size: 11px; line-height: 1.75; }
.system-card-large p { max-width: 440px; }
.system-card-wide { padding-right: 28%; }
.system-card-wide .system-icon { margin-top: 18px; }
.system-footnote { display: block; margin-top: 19px; color: #778176; font-size: 7px; }

.signal-story { padding-top: 91px; padding-bottom: 105px; }
.signal-layout { display: grid; grid-template-columns: .73fr 1fr; gap: 9%; align-items: center; margin-top: 39px; }
.signal-copy h2 { margin: 0 0 19px; font-size: clamp(41px, 5.3vw, 61px); font-weight: 500; line-height: 1.05; letter-spacing: -.065em; }
.signal-copy h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.signal-copy > p:not(.game-kicker) { max-width: 340px; color: #adb5a9; font-size: 11px; line-height: 1.8; }
.signal-copy .signal-invitation { margin: 22px 0 7px; color: #e7e8dc; font-family: var(--serif); font-size: 17px; font-style: italic; }
.signal-footnote { color: #7f897d; font-family: var(--mono); font-size: 7px; line-height: 1.6; }
.signal-console { overflow: hidden; border: 1px solid #445344; background: #111815; box-shadow: 0 20px 48px #00000020; }
.console-topbar { height: 43px; display: flex; align-items: center; gap: 6px; padding: 0 15px; border-bottom: 1px solid #344137; background: #1a241e; }
.console-light { width: 6px; height: 6px; border-radius: 50%; background: #677567; }
.console-light:first-child { background: #a1685b; }
.console-light:nth-child(2) { background: #bb9854; }
.console-light:nth-child(3) { background: #6d9972; }
.console-label { margin-left: 9px; color: #a7b19e; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.console-live { margin-left: auto; color: #7ce0a0; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.console-screen { min-height: 193px; padding: 21px 22px 15px; }
.console-prompt { margin: 0 0 12px; color: #92b796; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.console-main { margin: 0; color: #e0e3d7; font-family: var(--mono); font-size: 12px; line-height: 1.75; }
.console-response { min-height: 36px; margin: 12px 0 0; color: #9ba697; font-size: 10px; line-height: 1.65; }
.console-rule { border-top: 1px solid #334035; margin: 16px 0 11px; }
.console-status { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: #747f72; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.signal-options { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #344137; }
.signal-options button { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 13px; border: 0; border-right: 1px solid #344137; background: #17201b; color: #d0d7c9; font-family: var(--mono); font-size: 7px; letter-spacing: .04em; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.signal-options button:last-child { border-right: 0; }
.signal-options button:hover, .signal-options button:focus-visible { background: #23332a; color: #a5f4b8; }
.signal-options button:focus-visible, .console-reset:focus-visible { outline: 2px solid #91e7a5; outline-offset: -3px; }
.signal-options button span { color: var(--accent); font-size: 12px; }
.console-reset { width: 100%; display: flex; justify-content: space-between; padding: 10px 14px; border: 0; border-top: 1px solid #344137; background: transparent; color: #778275; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; text-align: left; cursor: pointer; }
.console-reset:hover { color: #c6d2c3; }
.console-reset span { color: var(--accent); font-size: 13px; }
.signal-console[data-state="obey"] { border-color: #8d7a4c; }
.signal-console[data-state="obey"] .console-live, .signal-console[data-state="obey"] .console-status span { color: #e3be77; }
.signal-console[data-state="break"] { border-color: #a46f61; }
.signal-console[data-state="break"] .console-live, .signal-console[data-state="break"] .console-status span { color: #e9a08f; }
.signal-console[data-state="wait"] { border-color: #57855e; }
.signal-console[data-state="wait"] .console-live, .signal-console[data-state="wait"] .console-status span { color: #8ff2a9; }
.signal-options button[data-selected="true"] { background: #2b3b2e; color: #a5f4b8; }
.signal-console.is-updating .console-screen { animation: signal-receive .48s ease; }
@keyframes signal-receive { 0% { opacity: .45; transform: translateY(3px); } 45% { opacity: .8; } 100% { opacity: 1; transform: translateY(0); } }

.game-vessel { padding-block: 92px 100px; background: #151d19; }
.vessel-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; align-items: center; margin-top: 45px; }
.vessel-symbol { width: min(330px, 100%); aspect-ratio: 1; position: relative; display: grid; place-items: center; margin: auto; border: 1px solid #37443a; border-radius: 50%; background: radial-gradient(circle, #2d714a38, #1a302633 47%, transparent 70%); }
.vessel-ring { width: 67%; aspect-ratio: 1; border: 1px solid #84d99a73; border-radius: 50%; box-shadow: 0 0 0 27px #a0e0ab0c, inset 0 0 34px #80d79d18; }
.vessel-dot { position: absolute; top: 22%; right: 29%; width: 10px; height: 10px; border-radius: 50%; background: #dcffe1; box-shadow: 0 0 20px 9px #72eca57c; }
.vessel-word { position: absolute; bottom: 22%; color: #a6b2a0; font-family: var(--mono); font-size: 8px; letter-spacing: .24em; }
.vessel-copy { max-width: 520px; }
.vessel-copy h2 { margin-bottom: 24px; font-size: clamp(38px, 4.6vw, 55px); }
.vessel-copy > p:not(.game-kicker) { color: #b2b8ac; font-size: 12px; line-height: 1.85; }
.vessel-copy .vessel-whisper { margin: 25px 0 0; color: var(--accent); font-family: var(--serif); font-size: 20px !important; font-style: italic; }

.game-identity { padding-top: 94px; padding-bottom: 100px; }
.identity-grid { display: grid; grid-template-columns: 1fr .98fr; gap: 8%; align-items: center; margin-top: 39px; }
.identity-copy h2 { margin-bottom: 22px; font-size: clamp(40px, 4.9vw, 57px); }
.identity-copy > p:not(.game-kicker) { color: #b1b8ad; font-size: 12px; line-height: 1.85; }
.identity-art { min-height: 310px; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; overflow: hidden; padding: 24px; border: 1px solid #394039; background: #151d19; }
.identity-night, .identity-garden { height: 190px; position: relative; overflow: hidden; display: flex; align-items: flex-start; padding: 14px; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.identity-night { color: #c5e6ce; background: radial-gradient(circle at 30% 31%, #e7fff0 0 2px, transparent 3px), radial-gradient(circle at 72% 55%, #7ff8ae 0 1px, transparent 2px), radial-gradient(ellipse at 40% 40%, #1a6d494c, transparent 60%), linear-gradient(145deg, #0c1720, #172321); }
.identity-night::after { content: ''; position: absolute; width: 160%; height: 3px; top: 47%; left: -26%; transform: rotate(-34deg); background: linear-gradient(90deg, transparent, #a4f5b8, #efffe6, transparent); box-shadow: 0 0 19px #7ce0a0; }
.identity-garden { color: #53442c; background: radial-gradient(ellipse at 65% 80%, #d8b15d, transparent 62%), linear-gradient(170deg, #d1b46e, #b79050 72%, #79683d); }
.identity-garden::before { content: ''; position: absolute; width: 160%; height: 57%; bottom: -22%; left: -25%; border-radius: 50%; background: #667248; }
.identity-garden::after { content: ''; position: absolute; width: 150%; height: 40%; bottom: -24%; left: 14%; border-radius: 50%; background: #9b8a4e; }
.identity-night span, .identity-garden span { position: relative; z-index: 1; }
.identity-transition { padding-inline: 9px; color: var(--accent); font-family: var(--serif); font-size: 20px; }
.identity-art > p { position: absolute; left: 24px; bottom: 15px; margin: 0; color: #9ba397; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; line-height: 1.6; }

.game-themes { padding-top: 92px; padding-bottom: 106px; }
.themes-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; margin-top: 40px; }
.themes-layout > h2 { position: sticky; top: 70px; align-self: start; font-size: clamp(42px, 5.4vw, 62px); }
.theme-list article { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.theme-list article:first-child { border-top: 1px solid var(--line); }
.theme-list article > span { padding-top: 4px; color: var(--accent); font-family: var(--mono); font-size: 8px; }
.theme-list h3 { margin: 0 0 6px; color: #e9e7dc; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.theme-list p { max-width: 400px; margin: 0; color: #a6aea2; font-size: 11px; line-height: 1.65; }

.game-influences { padding-top: 86px; padding-bottom: 96px; }
.influences-grid { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; margin-top: 38px; }
.influences-grid h2 { margin: 0; font-size: clamp(41px, 5.3vw, 61px); font-weight: 500; line-height: 1.05; letter-spacing: -.06em; }
.influences-grid h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.influence-copy > p:first-child { margin: 0 0 19px; color: #adb5a9; font-size: 11px; line-height: 1.8; }
.influence-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.influence-tags span { padding: 7px 10px; border: 1px solid #3b473e; border-radius: 99px; color: #d1d6c9; font-size: 9px; }
.influence-copy .influence-note { margin: 18px 0 0; color: #7f897d; font-family: var(--mono); font-size: 8px; line-height: 1.6; }

.game-reveal { padding-top: 85px; padding-bottom: 100px; }
.reveal-panel { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; align-items: center; margin-top: 35px; padding: 41px; border: 1px solid #39463c; background: radial-gradient(ellipse at top left, #285b3c24, transparent 48%), #141c18; }
.reveal-copy h2 { font-size: clamp(40px, 5vw, 58px); }
.reveal-copy > p:last-child { max-width: 310px; margin: 17px 0 0; color: #aab2a6; font-size: 11px; line-height: 1.7; }
.spoiler-details { border-top: 1px solid #4a554a; border-bottom: 1px solid #4a554a; }
.spoiler-details summary { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; color: #e2e3d8; font-family: var(--serif); font-size: 17px; cursor: pointer; list-style: none; }
.spoiler-details summary::-webkit-details-marker { display: none; }
.spoiler-details summary span:last-child { color: var(--accent); font-family: var(--sans); font-size: 20px; }
.spoiler-details[open] summary span:last-child { transform: rotate(45deg); }
.spoiler-body { padding: 0 0 12px; color: #aeb5a9; font-size: 11px; line-height: 1.8; }
.spoiler-body p { margin: 0 0 12px; }

.project-status-section { padding-top: 15px; padding-bottom: 95px; }
.status-card { min-height: 310px; position: relative; display: grid; grid-template-columns: .3fr 1fr; gap: 5%; align-items: center; overflow: hidden; padding: 37px 45px; border: 1px solid #3d4c40; background: linear-gradient(110deg, #17231d, #131b17 68%); }
.status-orbit { width: 180px; aspect-ratio: 1; position: relative; justify-self: center; border: 1px solid #57775e; border-radius: 50%; box-shadow: 0 0 0 25px #8ef1a609, 0 0 0 55px #8ef1a606; }
.status-orbit::before { content: ''; position: absolute; inset: 19%; border: 1px solid #6fa57870; border-radius: 50%; }
.status-orbit span { position: absolute; top: 13%; right: 22%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px 7px #6bec9990; }
.status-copy { max-width: 680px; }
.status-copy h2 { margin-bottom: 15px; font-size: 42px; }
.status-copy > p:not(.game-kicker):not(.status-intent) { max-width: 620px; margin: 0; color: #adb5a9; font-size: 11px; line-height: 1.8; }
.refine-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; color: #e0e3d8; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.refine-loop b { color: var(--accent); font-weight: 400; }
.status-copy .status-intent { margin: 19px 0 0; color: var(--accent); font-family: var(--serif); font-size: 13px; font-style: italic; }

.game-ending { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 65px; border-top: 1px solid var(--line); text-align: center; }
.game-ending .eyebrow { display: flex; margin-bottom: 19px; }
.game-ending h2 { font-size: clamp(50px, 7vw, 78px); }
.game-ending > p:not(.eyebrow) { margin: 17px 0 24px; color: #a7aea3; font-family: var(--serif); font-size: 14px; font-style: italic; }
.game-page .project-button { background: #e7e8da; color: #172018; }
.game-page .project-button:hover { background: #fffbed; }
.game-page .project-button span { color: #48754e; }
.game-page .site-footer { border-color: var(--line); }
.game-page .footer-note, .game-page .footer-year { color: #889286; }

.reading-progress { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.reading-progress span { width: 0; height: 100%; display: block; background: linear-gradient(90deg, #77d996, #e2d18c); box-shadow: 0 0 10px #7ce0a088; transition: width .08s linear; }
.site-nav a[aria-current="location"] { color: var(--accent); }
.hero-nebula, .hero-planet, .hero-comet, .hero-comet-head { will-change: translate; transition: translate .18s ease-out; }
.hero-comet { animation: comet-breathe 5s ease-in-out infinite alternate; }
@keyframes comet-breathe { from { opacity: .76; } to { opacity: 1; } }
.game-page .scroll-reveal { opacity: 0; transform: translateY(17px); transition: opacity .55s ease, transform .55s ease; }
.game-page .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.signal-options[hidden] { display: none; }
.signal-options button > span:last-child { color: var(--accent); font-size: 12px; }
.signal-options .signal-choice-label { color: inherit; font-size: inherit; }

@media (prefers-reduced-motion: reduce) {
  .signal-console.is-updating .console-screen { animation: none; }
  .hero-comet { animation: none; }
  .hero-nebula, .hero-planet, .hero-comet, .hero-comet-head { transition: none; }
}

@media (max-width: 380px) {
  .game-page .header-link { display: none; }
}

.flight-chart { padding-top: 83px; padding-bottom: 91px; }
.chart-heading { display: grid; grid-template-columns: .85fr 1fr; gap: 10%; align-items: end; margin-top: 31px; }
.chart-heading h2 { margin: 0; font-size: clamp(42px, 5.5vw, 63px); font-weight: 500; line-height: 1.02; letter-spacing: -.07em; }
.chart-heading h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.chart-heading > p { max-width: 460px; margin: 0 0 5px; color: #aeb6aa; font-size: 11px; line-height: 1.8; }
.chart-console { margin-top: 32px; overflow: hidden; border: 1px solid #3b4c3e; background: #0d1514; box-shadow: 0 25px 65px #00000025; }
.chart-map-shell { height: clamp(300px, 43vw, 480px); position: relative; overflow: hidden; perspective: 900px; background-color: #101b1d; background-image: radial-gradient(ellipse at 19% 79%, #52604236, transparent 28%), radial-gradient(ellipse at 80% 17%, #1d553b38, transparent 30%), linear-gradient(130deg, #101b24, #101a1a 58%, #17221d); }
.chart-map-shell::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .24; background-image: linear-gradient(#9fbea015 1px, transparent 1px), linear-gradient(90deg, #9fbea015 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse, #000 10%, transparent 82%); }
.chart-map { --chart-zoom: 1; --chart-tilt-x: 0deg; --chart-tilt-y: 0deg; position: absolute; inset: 0; transform: scale(var(--chart-zoom)) perspective(900px) rotateX(var(--chart-tilt-y)) rotateY(var(--chart-tilt-x)); transform-origin: center; transition: transform .35s ease; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-orbit { fill: none; stroke: #9bba9a24; stroke-width: 1; stroke-dasharray: 2 7; }
.chart-orbit.orbit-two { stroke: #9bba9a16; stroke-dasharray: 1 9; }
.chart-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart-route-base { stroke: #8dd89b36; stroke-width: 2; stroke-dasharray: 3 8; }
.chart-route-light { stroke: #a5ffc055; stroke-width: 4; stroke-dasharray: 1 17; filter: drop-shadow(0 0 5px #89efa0); opacity: .3; }
.chart-console[data-tracing="true"] .chart-route-light { opacity: 1; animation: chart-route-flow 1.35s linear infinite; }
.chart-halo { opacity: .2; }
.chart-console[data-tracing="true"] .chart-halo { animation: chart-halo-pulse 2.2s ease-in-out infinite alternate; }
.chart-star { fill: #dce9cb; opacity: .7; }
.chart-scanline { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 1px; background: #9efab77a; box-shadow: 0 0 14px #8be9a0; opacity: 0; pointer-events: none; }
.chart-console[data-tracing="true"] .chart-scanline { opacity: .8; animation: chart-scan 4s linear infinite; }
.chart-point { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 9px; padding: 8px; border: 0; background: transparent; color: #92a292; font-family: var(--mono); font-size: clamp(6px, .7vw, 8px); letter-spacing: .11em; white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); transition: color .2s ease, filter .2s ease; }
.chart-point i { display: block; width: 11px; height: 11px; border: 1px solid #d7f5dc; border-radius: 50%; background: #7cdf96; box-shadow: 0 0 0 6px #7cdf9621, 0 0 22px 8px #7cdf965c; transition: transform .2s ease, box-shadow .2s ease; }
.chart-point:hover, .chart-point:focus-visible, .chart-point.is-selected { color: #eff3e5; filter: brightness(1.2); }
.chart-point:hover i, .chart-point:focus-visible i, .chart-point.is-selected i { transform: scale(1.23); box-shadow: 0 0 0 8px #7cdf962b, 0 0 28px 10px #7cdf9680; }
.chart-point:focus-visible { outline: 1px solid #a7eab3; outline-offset: 3px; }
.chart-point.point-terra { left: 12%; top: 70%; }
.chart-point.point-terra i { background: #d9bd78; box-shadow: 0 0 0 6px #d9bd7821, 0 0 22px 8px #d9bd785c; }
.chart-point.point-event { left: 39.5%; top: 40%; }
.chart-point.point-deadzone { left: 66.5%; top: 65%; }
.chart-point.point-deadzone i { background: #99aaa2; border-style: dashed; box-shadow: 0 0 0 6px #99aaa219; }
.chart-point.point-garden { left: 88%; top: 35%; }
.chart-point.point-garden i { background: #dfbd79; box-shadow: 0 0 0 6px #dfbd7921, 0 0 22px 8px #dfbd785c; }
.chart-map-caption, .chart-map-coordinates { position: absolute; z-index: 3; bottom: 15px; color: #8e9c8d; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.chart-map-caption { left: 17px; }.chart-map-coordinates { right: 17px; text-align: right; }
.chart-console[data-tracing="true"] .chart-point i { animation: chart-point-pulse 1.9s ease-in-out infinite; }
.chart-console[data-tracing="true"] .point-event i { animation-delay: .25s; }.chart-console[data-tracing="true"] .point-deadzone i { animation-delay: .5s; }.chart-console[data-tracing="true"] .point-garden i { animation-delay: .75s; }
.chart-controls { min-height: 67px; display: flex; align-items: center; gap: 23px; padding: 11px 17px; border-top: 1px solid #344137; border-bottom: 1px solid #344137; background: #17211b; }
.chart-trace-button, .chart-reset-button { min-height: 37px; padding: 0 12px; border: 1px solid #4a644d; background: #24372a; color: #d9e9d4; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; cursor: pointer; }
.chart-trace-button span:first-child { margin-right: 7px; color: #94eba6; font-size: 12px; }
.chart-trace-button:hover, .chart-reset-button:hover { border-color: #95dda1; color: #a8f3b8; }
.chart-zoom-control { display: grid; grid-template-columns: auto minmax(80px, 170px) auto; align-items: center; gap: 12px; margin-left: auto; color: #8e9b8e; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }
.chart-zoom-control input { width: 100%; accent-color: #84d99a; cursor: pointer; }
.chart-zoom-control output { min-width: 31px; color: #cad6c5; text-align: right; }
.chart-reset-button { background: transparent; border-color: #3d4b40; color: #89958a; }
.chart-reset-button span { margin-left: 7px; font-size: 12px; }
.chart-trace-button:focus-visible, .chart-reset-button:focus-visible, .chart-zoom-control input:focus-visible { outline: 2px solid #94e6a5; outline-offset: 3px; }
.chart-readout { min-height: 98px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 17px 21px; }
.chart-readout-marker { display: grid; width: 35px; aspect-ratio: 1; place-items: center; border: 1px solid #506c54; border-radius: 50%; color: #9be3a8; }
.chart-readout-kicker { color: #8c9c8a; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.chart-readout p { margin: 4px 0 3px; color: #e6e8db; font-family: var(--serif); font-size: 18px; }
.chart-readout > div > span:last-child { color: #a8b1a4; font-size: 9px; line-height: 1.6; }
.chart-readout-status { align-self: start; margin-top: 6px; color: #92b09a; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; text-align: right; }
.chart-console.is-updating .chart-readout > div { animation: chart-readout-in .42s ease; }
@keyframes chart-route-flow { to { stroke-dashoffset: -36; } }
@keyframes chart-halo-pulse { from { opacity: .15; } to { opacity: .7; } }
@keyframes chart-scan { from { transform: translateY(0); } to { transform: translateY(480px); } }
@keyframes chart-point-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes chart-readout-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
  .chart-heading { gap: 6%; }
  .chart-map-shell { height: 360px; }
  .chart-controls { gap: 12px; }
  .chart-zoom-control { grid-template-columns: auto minmax(60px, 130px) auto; gap: 7px; }
}
@media (max-width: 620px) {
  .flight-chart { padding-top: 67px; padding-bottom: 75px; }
  .chart-heading { grid-template-columns: 1fr; gap: 12px; margin-top: 25px; }
  .chart-heading h2 { font-size: 43px; }
  .chart-console { margin-top: 23px; }
  .chart-map-shell { height: 330px; }
  .chart-point { gap: 8px; padding: 5px; font-size: 5px; letter-spacing: .07em; }
  .chart-point i { width: 9px; height: 9px; }
  .chart-point.point-terra { left: 13%; top: 72%; }
  .chart-point.point-event { left: 39%; top: 38%; }
  .chart-point.point-deadzone { left: 66%; top: 67%; }
  .chart-point.point-garden { left: 85%; top: 30%; }
  .chart-map-caption, .chart-map-coordinates { bottom: 10px; font-size: 5px; }
  .chart-map-caption { left: 10px; }.chart-map-coordinates { right: 10px; max-width: 42%; }
  .chart-controls { flex-wrap: wrap; padding: 11px; }
  .chart-trace-button { flex: 1; }
  .chart-zoom-control { order: 3; width: 100%; grid-template-columns: auto 1fr auto; }
  .chart-reset-button { margin-left: auto; }
  .chart-readout { grid-template-columns: 31px 1fr; gap: 10px; padding: 14px; }
  .chart-readout-marker { width: 29px; }
  .chart-readout-status { grid-column: 2; margin: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-map { transition: none; }
  .chart-console[data-tracing="true"] .chart-route-light,
  .chart-console[data-tracing="true"] .chart-halo,
  .chart-console[data-tracing="true"] .chart-scanline,
  .chart-console[data-tracing="true"] .chart-point i { animation: none; }
  .chart-console.is-updating .chart-readout > div { animation: none; }
}

@media (max-width: 820px) {
  .game-hero { min-height: 600px; grid-template-columns: 1fr .85fr; gap: 2%; }
  .game-hero h1 { font-size: clamp(74px, 11vw, 100px); }
  .game-hero-art { min-height: 340px; }
  .game-intro-grid, .identity-grid { gap: 6%; }
  .system-card { padding: 20px 19px; }
  .system-card-wide { padding-right: 20%; }
  .vessel-layout { gap: 7%; }
  .signal-layout { gap: 6%; }
  .signal-options button { padding-inline: 9px; }
  .reveal-panel { gap: 7%; padding: 32px; }
  .status-card { grid-template-columns: .25fr 1fr; gap: 4%; padding: 30px; }
  .status-orbit { width: 140px; }
}

@media (max-width: 620px) {
  .game-page .site-nav.is-open { background: #141d1a; }
  .game-page .site-nav a { color: #dddcd1; }
  .game-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 57px; padding-bottom: 70px; }
  .game-hero-copy { padding-bottom: 31px; }
  .game-genre { font-size: 8px; }
  .game-hero h1 { font-size: clamp(78px, 19vw, 112px); }
  .game-logline { max-width: 400px; font-size: 22px; }
  .game-hero-tags span { font-size: 9px; }
  .game-hero-art { width: min(100%, 390px); height: 365px; min-height: 365px; margin-inline: auto; }
  .game-hero-index { bottom: 23px; }
  .game-intro, .game-play, .game-identity, .game-themes { padding-top: 70px; padding-bottom: 77px; }
  .game-intro-grid, .play-heading, .identity-grid, .themes-layout { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  .game-intro h2, .play-heading h2, .identity-copy h2, .themes-layout > h2 { font-size: 43px; }
  .game-intro-copy { font-size: 12px; }
  .story-timeline { grid-template-columns: 1fr; gap: 10px; margin-top: 34px; }
  .title-origin { grid-template-columns: 1fr; gap: 10px; padding: 17px; }
  .timeline-card { min-height: 220px; }
  .timeline-glyph { height: 40px; margin-top: 15px; }
  .play-heading > p { font-size: 12px; }
  .system-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .system-card, .system-card-large, .system-card-wide { min-height: 250px; grid-column: auto; padding: 20px; }
  .system-card-wide { padding-right: 20px; }
  .system-card h3 { font-size: 21px; }
  .game-vessel { padding-block: 68px 78px; }
  .signal-story { padding-top: 68px; padding-bottom: 78px; }
  .signal-layout { grid-template-columns: 1fr; gap: 25px; margin-top: 28px; }
  .signal-copy h2 { font-size: 43px; }
  .signal-options button { min-height: 54px; display: block; padding: 10px 8px; font-size: 6px; }
  .signal-options button > span:last-child { display: block; margin-top: 5px; }
  .signal-options .signal-choice-label { display: block; }
  .console-label { font-size: 6px; }
  .vessel-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .vessel-symbol { width: min(260px, 75%); }
  .vessel-copy h2 { font-size: 40px; }
  .identity-art { min-height: 270px; padding: 15px; }
  .identity-night, .identity-garden { height: 165px; padding: 10px; font-size: 7px; }
  .identity-art > p { left: 15px; bottom: 11px; }
  .themes-layout { gap: 25px; }
  .themes-layout > h2 { position: static; }
  .game-influences { padding-top: 68px; padding-bottom: 77px; }
  .influences-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  .influences-grid h2 { font-size: 43px; }
  .game-reveal { padding-top: 67px; padding-bottom: 76px; }
  .reveal-panel { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; padding: 22px; }
  .reveal-copy h2 { font-size: 43px; }
  .status-card { grid-template-columns: 1fr; gap: 22px; padding: 23px; }
  .status-orbit { width: 105px; justify-self: start; }
  .status-copy h2 { font-size: 37px; }
  .refine-loop { gap: 6px; font-size: 7px; }
  .project-status-section { padding-top: 0; padding-bottom: 68px; }
  .game-ending { min-height: 340px; }
  .game-ending h2 { font-size: 52px; }
}