@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root{color-scheme:dark;--ink:#e6e9c9;--dim:#929b89;--acid:#d4e890;font-family:'VT323','Courier New',monospace}*{box-sizing:border-box}body{margin:0;background:#080b0b;color:var(--ink);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e3efac;outline-offset:5px}button:disabled{opacity:.4;cursor:not-allowed}#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-2;image-rendering:pixelated}.scanlines{pointer-events:none;position:fixed;inset:0;z-index:20;opacity:.17;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 4px)}body:after{content:'';pointer-events:none;position:fixed;inset:0;z-index:19;box-shadow:inset 0 0 160px 35px #0008}header,footer{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 5vw}header{border-bottom:1px solid #73826730}.brand{font-size:27px;letter-spacing:3px;color:var(--ink);text-decoration:none;line-height:1}.brand span{display:block;color:var(--dim);font-size:10px;letter-spacing:2px;margin:9px 0 0 27px}.header-actions{display:flex;gap:14px}.small{color:#bac3a7;background:#11181188;border:1px solid #58624d;padding:8px 13px;font-size:15px;letter-spacing:1px}.small:hover{color:var(--acid);border-color:var(--acid)}main{max-width:1320px;margin:auto;min-height:calc(100svh - 171px);padding:42px 40px 28px}.intro{text-align:center}.eyebrow{font-size:14px;letter-spacing:3px;color:var(--acid);margin-bottom:15px}.intro h1{font-weight:400;line-height:.96;font-size:clamp(44px,6vw,78px);letter-spacing:1px;margin:0 0 16px;text-shadow:3px 3px 0 #38442c}.intro h1 span{color:var(--acid)}.intro p{font-size:20px;color:#a9b39b;margin:0;line-height:1.3}.coordinates{display:flex;justify-content:space-between;color:#7e8b78;font-size:13px;letter-spacing:2px;margin-top:35px;padding-bottom:11px;border-bottom:1px solid #63705b55}.planet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:15px 0}.planet-option{position:relative;min-width:0;padding:16px 12px 19px;background:linear-gradient(#10181566,#0a0e0b99);border:1px solid #3b4938;color:var(--ink)}.planet-option:before,.planet-option:after{position:absolute;color:#64765b;font-size:20px;line-height:1;content:'+';top:-10px}.planet-option:before{left:-5px}.planet-option:after{right:-5px}.planet-option:hover{background:#7f975519}.planet-option.selected{border:1px solid var(--acid);background:#a4bd6012}.planet-option.selected:before,.planet-option.selected:after{color:var(--acid)}.slot{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#94a487}.slot span:last-child{color:#6d7d64}.planet-canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-height:250px;image-rendering:pixelated;filter:drop-shadow(0 0 24px #72845a15)}.planet-name{font-size:24px;letter-spacing:3px;margin:4px 0 7px}.planet-state{color:#87977e;font-size:13px;letter-spacing:2px}.selected .planet-state{color:var(--acid)}.selection-bar{display:flex;align-items:center;justify-content:space-between;border:1px solid #526049;background:#10170fbb;padding:17px 22px;margin-top:9px;gap:20px}.selection-bar strong{font-size:20px;font-weight:400;letter-spacing:1px}.selection-bar p{color:#8c9a80;font-size:15px;margin:5px 0 0}.primary{color:#161e11;border:1px solid #e4efb5;background:var(--acid);box-shadow:3px 3px 0 #485535;padding:13px 25px;font-size:19px;letter-spacing:1px;white-space:nowrap}.primary:hover{background:#ecf6c0}.hint{color:#78866e;text-align:center;font-size:14px;letter-spacing:1px;margin:20px 0 0}.hint b{color:#adb99a;font-weight:400}footer{border-top:1px solid #73826730;color:#68765d;font-size:12px;letter-spacing:1px;gap:15px;padding-top:20px;padding-bottom:20px}footer b{color:#bbd177;font-size:10px}.reveal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:15px;letter-spacing:2px}.chosen-tag{color:#101b0b;background:var(--acid);padding:6px 12px;font-size:14px}.other-tag{color:#96a085;font-size:14px}.cinema{position:relative;overflow:hidden;border:1px solid #707c5a;background:#101510;aspect-ratio:16/9;box-shadow:0 0 70px #74865312}.scene-art{position:absolute;inset:-2%;background-size:300% 400%;image-rendering:pixelated;animation:drift 18s ease-in-out infinite alternate;filter:saturate(.85) contrast(1.07)}.cinema:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0006,transparent 25%,transparent 35%,#050902f5 100%);box-shadow:inset 0 0 70px #0007}.scene-number{position:absolute;top:22px;left:25px;z-index:2;color:#d9e3b7;letter-spacing:3px;font-size:14px;text-shadow:2px 2px #000}.scene-chapter{position:absolute;right:25px;top:22px;z-index:2;color:#eff2d5;font-size:14px;letter-spacing:2px;text-shadow:2px 2px #000}.scene-copy{position:absolute;bottom:35px;left:35px;right:35px;z-index:3;max-width:790px;text-shadow:2px 2px 0 #080d05}.scene-copy .eyebrow{font-size:14px;margin-bottom:10px;color:#cedba7}.scene-copy h1{font-size:clamp(28px,3.2vw,44px);font-weight:400;line-height:1;margin:0 0 13px}.scene-copy p{font-size:clamp(19px,2vw,24px);line-height:1.25;margin:0;color:#d3dac5}.film-controls{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:19px 0}.steps{display:flex;gap:6px}.steps span{width:29px;height:4px;background:#35402e}.steps .past{background:#71845c}.steps .active{background:var(--acid)}.control-left{display:flex;align-items:center;gap:20px}.navigation{display:flex;gap:12px}.text-button{background:none;border:none;color:#8e9c81;padding:10px;font-size:17px}.round-status{color:#7d8c70;font-size:13px}.recap-intro{text-align:center;margin:8px 0 25px}.recap-intro h1{font-size:48px;line-height:1;font-weight:400;margin:10px 0}.recap-intro p{font-size:21px;color:#a4b390;max-width:620px;margin:0 auto}.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.outcome{position:relative;border:1px solid #45553b;background:#11170ed9;overflow:hidden}.outcome.mine{border-color:var(--acid)}.thumb{aspect-ratio:4/3;background-size:300% 400%;image-rendering:pixelated}.outcome-body{padding:17px}.outcome h2{font-size:27px;font-weight:400;margin:5px 0 12px}.outcome p{font-size:18px;color:#a4b390;line-height:1.2;margin:10px 0}.verdict{font-size:13px;letter-spacing:1px;color:var(--acid)}.verdict.danger{color:#e6a18b}.verdict.strange{color:#bca9cf}.outcome .small{width:100%;margin-top:12px}.mine .thumb:after{content:'YOUR PLANET';display:inline-block;margin:12px;background:var(--acid);color:#18200f;padding:5px 8px;font-size:13px}.recap-actions{display:flex;justify-content:center;gap:16px;margin-top:30px}.share-status{font-size:16px;color:#b5c49c;text-align:center;min-height:20px;margin:18px 0 0}.modal{position:fixed;inset:0;background:#030703d9;z-index:30;display:grid;place-items:center;padding:22px}.modal-box{width:min(100%,520px);border:1px solid var(--acid);background:#10180f;padding:35px;box-shadow:7px 7px 0 #34432a}.modal-box h2{font-size:37px;line-height:1;font-weight:400;margin:10px 0 20px}.modal-box p{font-size:21px;color:#b7c3a3;line-height:1.3}.modal-actions{display:flex;gap:15px;justify-content:flex-end;margin-top:25px}dialog{background:#11190f;color:var(--ink);border:1px solid var(--acid);max-width:520px;padding:30px;font:22px/1.3 'VT323',monospace}dialog::backdrop{background:#030703dd}dialog h2{font-size:34px;font-weight:400}dialog p{color:#b7c3a3}dialog .small{float:right}@keyframes drift{to{transform:scale(1.06) translate(-.5%,.3%)}}@media(max-width:800px){header{padding:20px}.brand{font-size:23px}.brand span{font-size:8px}.header-actions{gap:7px}.small{font-size:13px;padding:8px}main{padding:30px 20px 25px}.planet-grid{grid-template-columns:repeat(2,1fr);gap:13px}.planet-canvas{max-height:190px}.planet-name{font-size:22px}.coordinates{margin-top:25px;font-size:11px;letter-spacing:1px}.selection-bar{padding:15px;align-items:stretch;flex-direction:column;gap:14px}.selection-bar .primary{width:100%}.intro h1{font-size:51px}.intro p{font-size:18px}.planet-option{padding:12px}.cinema{aspect-ratio:4/5;max-height:720px}.scene-copy{left:23px;right:23px;bottom:27px}.scene-copy h1{font-size:33px}.scene-copy p{font-size:23px;line-height:1.25}.scene-number{left:20px;top:18px}.scene-chapter{right:20px;top:18px;font-size:12px}.outcomes{grid-template-columns:repeat(2,1fr)}.reveal-top{font-size:13px;letter-spacing:1px}.steps span{width:13px}.film-controls{gap:9px}.control-left{gap:8px}.navigation{gap:5px}.primary{padding:12px 17px;font-size:17px}.round-status{display:none}footer{padding:18px 20px;font-size:10px}footer span:nth-child(2){display:none}.recap-intro h1{font-size:38px}.recap-actions{flex-direction:column}.outcome-body{padding:13px}.outcome h2{font-size:24px}.outcome p{font-size:17px}.verdict{font-size:11px}}@media(max-width:420px){#help{font-size:0;padding:8px}#help:after{content:'?';font-size:16px}.brand span{letter-spacing:1px}.header-actions{gap:5px}.intro h1{font-size:43px}.planet-canvas{max-height:145px}.planet-state{font-size:11px}.scene-copy h1{font-size:29px}.scene-copy p{font-size:21px}.outcome h2{font-size:21px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep the cinematic frame and its controls together on a laptop screen. */
body[data-phase="reveal"] main{padding-top:22px;padding-bottom:8px}.cinema{height:clamp(300px,calc(100svh - 285px),650px);aspect-ratio:auto}.thumb svg{display:block}.scene-art svg{display:block}
@media(max-width:800px){.cinema{height:auto;aspect-ratio:4/5}.steps{gap:3px}.steps span{width:7px}.scene-copy{bottom:25px}.film-controls .primary{font-size:16px;padding:12px}.film-controls .text-button{font-size:15px;padding:8px}.reveal-top{gap:12px}.chosen-tag{font-size:12px;white-space:nowrap}}
@media(max-width:360px){.steps span{width:5px}.reveal-top{font-size:11px}.chosen-tag{font-size:11px;padding:5px}.scene-copy p{font-size:19px}.scene-copy h1{font-size:27px}}


.thumb{position:relative;overflow:hidden}.mine .thumb:after{position:absolute;top:0;left:0}


.planet-canvas{max-height:none;max-width:220px;margin:0 auto}
@media(min-width:801px) and (max-height:850px){body[data-phase="choose"] header{padding-top:20px;padding-bottom:20px}body[data-phase="choose"] main{padding-top:23px;padding-bottom:12px}.intro h1{font-size:60px;margin-bottom:12px}.intro .eyebrow{margin-bottom:10px}.coordinates{margin-top:22px}.planet-canvas{max-width:170px}.planet-option{padding:12px}.planet-name{font-size:21px}.selection-bar{padding:13px 18px}.hint{margin-top:14px}}
@media(max-width:800px){.planet-canvas{max-width:170px}}