:root{--bg:#0d1416;--panel:#121b1c;--gold:#d4b986;--muted:#83928f;--line:#2b3838;--ink:#ede5d6;--teal:#8fbbb4;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% 45%,#23323155,transparent 65%),var(--bg)}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f7dfab;outline-offset:4px}button{touch-action:manipulation}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button,input{-webkit-tap-highlight-color:transparent}button:hover{filter:brightness(1.15)}[hidden]{display:none!important}.shell{max-width:1390px;padding:0 46px;margin:0 auto}.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:28px}.wordmark{font:25px Georgia,serif;letter-spacing:7px;display:flex;align-items:center;gap:23px}.wordmark span{font:9px monospace;letter-spacing:2px;border-left:1px solid #53605b;padding-left:23px;color:#9caaa4}.mast-info{font:9px monospace;letter-spacing:1.5px;color:#a8b4ac;display:flex;gap:11px;align-items:center}.mast-info i{width:5px;height:5px;background:var(--teal);border-radius:100%;box-shadow:0 0 9px #7dcabc}.mast-info>span{margin-left:26px;color:#647a73}.layout{display:grid;grid-template-columns:minmax(205px,1fr) auto minmax(205px,1fr);gap:38px;align-items:start;max-width:1190px;margin:auto}.sidebar{padding-top:2px;min-width:0}.section-index{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:#657a76;border-bottom:1px solid var(--line);padding-bottom:15px}.section-index span:last-child{color:#a7a88d}.eyebrow{font:9px monospace;letter-spacing:1.8px;color:var(--gold);margin:0 0 13px}.objective-card{padding:25px 0 26px}.objective-card h2{font:30px Georgia,serif;margin:0 0 11px;line-height:1.1;font-weight:400}.objective-card>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#94a49f;margin:0}.objective-progress{display:flex;align-items:center;gap:12px;font:10px monospace;margin-top:22px;color:#788c84}.objective-progress>span{color:var(--gold)}.objective-progress>div{height:2px;background:#2c3937;flex:1}.objective-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width 1s}.objective-progress small{font:9px monospace}.section-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px}.section-label h3{font:9px monospace;letter-spacing:1.1px;margin:0;color:#b0b9ab}.section-label>span{font:8px monospace;color:#73847d}.district-map{width:100%;height:auto;display:block;margin:16px 0 9px;opacity:.9}.map-caption{font:7px monospace;letter-spacing:.8px;color:#95a59a;display:flex;align-items:center;gap:6px}.map-caption>span:last-child{margin-left:auto;color:#586c66}.small-dot{width:4px;height:4px;background:var(--gold);border-radius:50%}.journal-card{margin-top:24px}#journal,#mobile-journal{padding:0;margin:16px 0 0;list-style:none}#journal li,#mobile-journal li{font-size:11px;color:#879c92;line-height:1.7;border-left:1px solid #3b5147;padding:0 0 10px 13px;position:relative}#journal li:before,#mobile-journal li:before{content:'';width:3px;height:3px;background:#697f6c;position:absolute;left:-2px;top:6px}#journal li:first-child{color:#b8c3af}.sidebar-footer{font:8px monospace;letter-spacing:1px;color:#5e7269;margin-top:24px;display:flex;justify-content:space-between}.game-column{width:min(40vw,calc((100svh - 175px)*.6));min-width:330px;max-width:444px}.game-frame{width:100%;aspect-ratio:3/5;position:relative;overflow:hidden;background:#111e21;border:1px solid #53635a;box-shadow:0 20px 80px #0006,0 0 0 5px #0b1111,0 0 0 6px #35433a;border-radius:3px;isolation:isolate}#world{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#08101266,transparent 20%,transparent 70%,#08101277);box-shadow:inset 0 0 70px #0003}.game-hud{position:absolute;top:0;left:0;right:0;padding:17px 17px 15px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(#081113dd,transparent)}.game-hud>div>span{font:8px monospace;letter-spacing:1px;color:#f3e4bd}.game-hud small{display:block;font:7px monospace;color:#90aca8;margin-top:5px;letter-spacing:1.2px}.icon-button{width:32px;height:32px;background:#132020c9;border:1px solid #67807866;border-radius:50%;font:17px Arial;display:grid;place-items:center}.below-game{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:1px;color:#778980;padding-top:18px}.below-game i{margin:0 5px;font-style:normal}kbd{font:7px monospace;color:#a7b4a0}.character-heading{display:flex;align-items:center;gap:12px;padding:25px 0 19px}.character-icon{height:42px;width:36px;border:1px solid #756747;display:grid;place-items:center;font:27px Georgia;color:var(--gold);background:#282a20}.character-heading .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:6px;color:#828c76}.character-heading h2{font:22px Georgia;margin:0;word-break:break-word}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #263532}.stat-row>span{font:8px monospace;letter-spacing:1px;color:#74897d}.stat-row strong{font-size:10px;font-weight:400;color:#bac4b1}.factions{margin-top:23px}.faction-card{width:100%;display:flex;align-items:center;gap:12px;background:transparent;text-align:left;padding:17px 0;border-bottom:1px solid #263532}.faction-glyph{width:28px;height:30px;font:26px Georgia;color:#9a997b}.faction-card h4{font:9px monospace;letter-spacing:1.3px;color:#c7c6aa;margin:0 0 5px}.faction-card p{font-size:10px;color:#768c7e;margin:0}.faction-card>span:last-child{margin-left:auto;color:#64785f;font-size:12px}.settings-card{margin-top:25px}.setting{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;padding:12px 0;color:#9eac98;font-size:11px;text-align:left}.switch{width:25px;height:13px;border:1px solid #586e5d;border-radius:10px;position:relative}.switch:after{content:'';position:absolute;left:3px;top:3px;width:5px;height:5px;background:#71846c;border-radius:50%;transition:transform .2s}.setting[aria-pressed=true] .switch{border-color:#a5a17b;background:#585b37}.setting[aria-pressed=true] .switch:after{transform:translateX(11px);background:#dfd4a3}.reset-button{padding:12px 0;background:none;color:#718772;font:9px monospace;border-top:1px solid #2b3931;width:100%;text-align:left;margin-top:13px}.site-footer{display:flex;justify-content:space-between;padding:23px 0 20px;margin-top:25px;border-top:1px solid #26352e;font:8px monospace;letter-spacing:1px;color:#566e60}.intro,.ending{position:absolute;inset:0;background:linear-gradient(180deg,#0c181be8 0%,#0c181bbd 35%,#101c1cf7 65%,#101a19 100%);display:flex;flex-direction:column;align-items:center;padding:28px 26px 20px;text-align:center;overflow:auto}.intro-top{flex:1;min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center}.intro .eyebrow{font-size:7px;color:#a3b3a1;letter-spacing:2px}.sigil{width:65px;height:65px;border:1px solid #9a875255;border-radius:50%;display:grid;place-items:center;margin:6px 0 22px;position:relative;box-shadow:0 0 0 8px #90845b08}.sigil:after{content:'';position:absolute;inset:8px;border:1px solid #a68b5533;transform:rotate(45deg)}.sigil span{font:39px Georgia;color:#b5a075}.intro h1{font:35px Georgia,serif;letter-spacing:6px;color:#eee5ce;margin:0 0 10px;padding-left:6px}.chapter{font:8px monospace;color:#b2aa88;margin:0}.intro-rule{width:30px;height:1px;background:#a4915a;margin:20px 0 15px}.intro-copy{font:italic 15px/1.7 Georgia;color:#abb6a6;margin:0 0 19px}.customizer{width:100%;border-top:1px solid #52614455;border-bottom:1px solid #52614455;padding:14px 0 12px;margin:0 0 17px;text-align:left}.traveller-preview{display:flex;align-items:center;gap:13px}.traveller-preview canvas{image-rendering:pixelated;width:52px;height:52px;border:1px solid #63735c55;background:#23342e88}.traveller-preview>div{flex:1}.traveller-preview label{font:7px monospace;letter-spacing:1.3px;color:#899c83;display:block;margin-bottom:7px}.traveller-preview input{width:100%;border:0;border-bottom:1px solid #6f7b5c88;background:transparent;font:17px Georgia;padding:0 0 6px;color:#e4e6d0;border-radius:0;outline-offset:2px}.custom-row{display:flex;align-items:center;gap:8px;margin-top:13px}.custom-row>span{font:7px monospace;letter-spacing:1px;color:#899c83;margin-right:1px}.custom-row>span:nth-of-type(2){margin-left:auto}.swatches{display:flex;gap:6px}.swatches button{width:16px;height:16px;border:2px solid transparent;box-shadow:0 0 0 1px #151e1a;padding:0}.swatches button.selected{box-shadow:0 0 0 1px #ded5aa;border-color:#12201e}.custom-row small{font:italic 11px Georgia;margin-left:auto;color:#6f866e}.primary-button{width:100%;padding:15px 18px;background:#c6b483;color:#14201b;font:11px monospace;letter-spacing:.7px;display:flex;justify-content:space-between;align-items:center;border:1px solid #edddb066}.primary-button>span{font-size:16px}.intro-foot{font:6px monospace;color:#728970;letter-spacing:1px;margin:13px 0 0}.objective-toast{position:absolute;top:72px;left:18px;right:18px;display:flex;align-items:center;gap:12px;background:#142322e8;border:1px solid #78856570;padding:11px 13px;animation:appear .3s}.objective-toast span{color:#d9c18e}.objective-toast p{margin:0;font-size:11px;line-height:1.5;color:#d8ddc4}.interaction-prompt{position:absolute;bottom:95px;left:0;right:0;text-align:center;pointer-events:none}.interaction-prompt button{pointer-events:auto;font:10px monospace;border:1px solid #a4af8877;border-radius:3px;background:#14221eeb;padding:9px 12px;color:#e3dfbc;box-shadow:0 5px 20px #0005}.interaction-prompt span{font:9px monospace;border:1px solid #8c9863;padding:1px 4px;margin-right:6px;color:#c8d3aa}.interaction-prompt b{font-weight:400}.dialogue{position:absolute;bottom:15px;left:13px;right:13px;padding:17px 18px 13px;background:#101b1bf5;border:1px solid #9b8e6288;box-shadow:0 10px 40px #0008;animation:appear .2s}.dialogue-head{display:flex;gap:10px;align-items:center}.speaker-mark{width:30px;height:34px;background:#3d493a;color:#cfbd8a;font:21px Georgia;display:grid;place-items:center;border:1px solid #7d8355}.dialogue-head h3{font:10px monospace;letter-spacing:1px;margin:0 0 5px;color:#dece9d}.dialogue-head small{font:7px monospace;letter-spacing:1px;color:#7d9a8b}.dialogue-head>span{margin-left:auto;font:8px monospace;color:#648373}.dialogue>p{font:16px/1.55 Georgia;color:#e0e3d0;margin:17px 0}.dialogue-next{background:none;border-top:1px solid #41544170;padding:11px 0 0;width:100%;text-align:right;font:9px monospace;color:#bcc794;letter-spacing:1px}.dialogue-next span{margin-left:12px}.choice-button{width:100%;padding:12px 10px;margin:0 0 7px;background:#2d3c30;text-align:left;border:1px solid #7d8b5766;color:#e1dfb6;font:11px/1.4 monospace}.choice-button small{display:block;font:11px/1.5 Georgia;color:#a3b89a;margin-top:4px}.touch-controls{position:absolute;left:16px;right:16px;bottom:15px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.dpad{--dpad-cell:38.5px;width:calc(var(--dpad-cell)*3);height:calc(var(--dpad-cell)*3);display:grid;grid-template-columns:repeat(3,var(--dpad-cell));grid-template-rows:repeat(3,var(--dpad-cell));filter:drop-shadow(0 3px 8px #0007);pointer-events:auto;touch-action:none}.dpad button,.dpad>span{background:#142b29b8;border:1px solid #749c8055;color:#c0ccaa;font:17.6px monospace;touch-action:none;user-select:none;-webkit-user-select:none}.dpad button:active,.dpad button.pressed{background:#456246cc}.dpad .up{grid-area:1/2;border-radius:5px 5px 0 0}.dpad .left{grid-area:2/1;border-radius:5px 0 0 5px}.dpad>span{grid-area:2/2;border:0;background:#142b29b8}.dpad .right{grid-area:2/3;border-radius:0 5px 5px 0}.dpad .down{grid-area:3/2;border-radius:0 0 5px 5px}#action-button{pointer-events:auto;width:66px;height:66px;border-radius:50%;background:#38462bd9;border:1px solid #b6bc7b66;color:#e1dfad;font:21px Georgia;box-shadow:0 4px 15px #0005;margin-bottom:3px}#action-button span{font:6px monospace;letter-spacing:1px;display:block;margin-top:4px}.touch-controls{opacity:.85}.ending{justify-content:center;padding:34px 28px;background:#101c1af5}.ending-emblem{font:62px Georgia;color:#bdbb80;margin:24px 0}.ending h2{font:34px/1.1 Georgia;color:#e7dec5;margin:0 0 20px}.ending>p:not(.eyebrow):not(.prototype-note){font:15px/1.7 Georgia;color:#a8baa8;margin:0}.ending-detail{margin:25px 0 28px;border-top:1px solid #65754f66;border-bottom:1px solid #65754f66;width:100%;padding:17px 0;display:flex;flex-direction:column;gap:10px}.ending-detail>span{font:7px monospace;letter-spacing:1.5px;color:#8d9d7b}.ending-detail strong{font:13px monospace;letter-spacing:2px;color:#d4d9a9}.ending-detail small{font:italic 11px Georgia;color:#7d9676}.text-button{background:none;font:10px monospace;color:#a0b286;padding:15px 5px}.prototype-note{font:9px/1.8 Arial;color:#657f6e;margin:10px 0 0}.menu-overlay{position:absolute;inset:0;background:#101c1bf7;padding:21px 24px;overflow-y:auto}.menu-head{display:flex;justify-content:space-between;align-items:center}.menu-head .eyebrow{margin:0}.menu-overlay h2{font:32px Georgia;margin:17px 0 20px}.menu-overlay h3{font:8px monospace;color:#b0b798;letter-spacing:1px;border-top:1px solid #43523d;padding-top:18px;margin:22px 0 10px}.menu-objective{font:13px/1.7 Georgia;color:#bdc7a7}.menu-overlay #mobile-journal li{font-size:12px}#mobile-settings{margin:5px 0}.alert-modal{position:fixed;inset:0;z-index:30;background:#071210cd;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}.alert-modal>div{max-width:390px;width:100%;padding:28px;border:1px solid #8c936166;background:#17251f;box-shadow:0 20px 100px #0007}.alert-modal h2{font:30px Georgia;margin:0 0 17px}.alert-modal p{font:15px/1.7 Georgia;color:#adbea2}.alert-modal #alert-actions{display:flex;gap:10px;margin-top:25px}.alert-modal #alert-actions button{flex:1}.alert-modal .primary-button{justify-content:center;font-size:10px}.alert-modal .text-button{border:1px solid #78906055}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(min-width:900px) and (pointer:fine){.touch-controls{opacity:.35}.touch-controls:hover{opacity:.9}}@media(max-height:850px) and (min-width:900px){.masthead{height:74px;margin-bottom:23px}.shell{padding:0 35px}.layout{gap:30px}.game-column{width:calc((100svh - 145px)*.6);min-width:310px}.site-footer{margin-top:16px;padding:17px 0;font-size:7px}.objective-card{padding-top:20px;padding-bottom:21px}.district-map{max-height:165px}.journal-card{margin-top:17px}.settings-card{margin-top:15px}.faction-card{padding:13px 0}.factions{margin-top:18px}.sidebar-footer{margin-top:15px}.intro{padding:20px 23px 17px}.sigil{margin:3px 0 15px;width:53px;height:53px}.intro h1{font-size:30px}.intro-copy{font-size:14px}.intro-rule{margin:15px 0 12px}}@media(max-width:1090px){.shell{padding:0 25px}.layout{gap:23px;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)}.mast-info{font-size:8px}.mast-info>span{display:none}.faction-card{gap:8px}.faction-card p{font-size:9px}.sidebar .section-index{font-size:8px}.objective-card h2{font-size:27px}.stat-row{gap:4px}.stat-row>span{font-size:7px}.stat-row strong{font-size:9px}.wordmark span{display:none}}@media(max-width:899px){body{overflow:hidden;background:#101b1b}.shell{padding:0}.masthead,.sidebar,.site-footer,.below-game{display:none}.layout{display:flex;justify-content:center;gap:0}.game-column{width:min(100vw,60svh);max-width:none;min-width:0;height:100svh;display:flex;align-items:center;justify-content:center}.game-frame{width:100%;height:100%;aspect-ratio:3/5;border:0;border-radius:0;box-shadow:0 0 50px #0009}.game-hud{padding-top:max(17px,env(safe-area-inset-top));}.intro{padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));}.touch-controls{bottom:max(18px,env(safe-area-inset-bottom))}.dialogue{bottom:max(15px,env(safe-area-inset-bottom))}.interaction-prompt{bottom:168px}.objective-toast{top:73px}.game-hud>div>span{font-size:9px}.game-hud small{font-size:8px}.intro h1{font-size:36px}.intro .eyebrow{font-size:8px}.intro-foot{font-size:7px}.intro-copy{font-size:17px}.custom-row>span{font-size:8px}.swatches button{width:19px;height:19px}.dialogue>p{font-size:18px}.dialogue-head h3{font-size:11px}.dialogue-head small{font-size:8px}.dialogue-next{font-size:11px}.choice-button{font-size:12px;padding:13px 11px}.primary-button{font-size:12px}.prototype-note{font-size:10px}.menu-overlay{padding-top:max(22px,env(safe-area-inset-top))}}@media(max-width:899px) and (min-aspect-ratio:3/5){.game-column{width:60svh}}@media(max-width:899px) and (max-aspect-ratio:3/5){.game-column{width:100vw}.game-frame{aspect-ratio:auto}#world{object-fit:cover}.intro-top{min-height:230px}}@media(max-height:690px) and (max-width:899px){.intro{padding:16px 23px}.sigil{width:42px;height:42px;margin:0 0 14px}.sigil span{font-size:28px}.intro h1{font-size:30px}.intro-copy{font-size:14px;margin-bottom:10px}.intro-rule{margin:14px 0 10px}.intro-top{min-height:205px}.customizer{padding:10px 0;margin-bottom:12px}.custom-row{margin-top:10px}.primary-button{padding:12px 15px}.intro-foot{margin-top:10px}.ending{padding:20px}.ending-emblem{margin:10px 0;font-size:45px}.ending h2{font-size:30px}.ending-detail{margin:15px 0}.ending>p:not(.eyebrow):not(.prototype-note){font-size:13px}.game-hud{padding:13px}.dialogue>p{font-size:15px}.choice-button{padding:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep oversized end cards scrollable from their first line. */
.ending{justify-content:flex-start;justify-content:safe center}
@media(max-width:899px){.dpad{--dpad-cell:46.2px}.swatches button{width:26px;height:26px}#action-button{width:72px;height:72px}}
/* iOS long-press protection is confined to the game, not the whole page. */
.game-frame,.game-frame *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-controls,.touch-controls *,#world{-webkit-user-drag:none;touch-action:none}
/* Character names remain editable; menus and story copy can still be selected. */
.game-frame input,.game-frame textarea,.game-frame [contenteditable="true"],
.dialogue>p,.menu-objective,#mobile-journal,#mobile-journal *,.menu-overlay .prototype-note,
.ending>p,.ending-detail,.ending-detail *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.game-frame input,.game-frame textarea,.game-frame [contenteditable="true"]{touch-action:manipulation}

/* Lightweight Alpha entry screen; the game remains unchanged behind it. */
.alpha-gate{position:fixed;inset:0;z-index:40;overflow:auto;display:flex;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 15%,#243b3b 0%,#111e20 45%,#0b1415 100%)}
.alpha-card{width:100%;max-width:390px;text-align:center;padding:38px 34px;border:1px solid #6e765c66;background:#101d1de8;box-shadow:0 24px 90px #0006}
.alpha-card>.eyebrow{font-size:8px;letter-spacing:1.7px;color:#a3b3a1}
.alpha-card .sigil{margin:28px auto 25px}
.alpha-card h1{font:34px Georgia,serif;letter-spacing:5px;color:#eee5ce;margin:0 0 12px;padding-left:5px}
.alpha-card .intro-rule{margin:25px auto 20px}
.alpha-copy{font:italic 19px/1.5 Georgia;color:#ccd1b9;margin:0 0 12px}
.alpha-help{font:13px/1.7 Arial,sans-serif;color:#9bafa5;margin:0 0 30px}
#alpha-form{text-align:left}
#alpha-form label{display:block;font:9px monospace;letter-spacing:1.4px;color:#b4bc9c;margin-bottom:10px}
#alpha-code{display:block;width:100%;min-height:48px;padding:12px 13px;border:1px solid #71856d;background:#0b1617;color:#eee5ce;font:16px monospace;border-radius:2px;letter-spacing:1px;touch-action:manipulation}
#alpha-code:focus-visible{outline:2px solid #cfbc8b;outline-offset:3px}
#alpha-code[aria-invalid=true]{border-color:#cf927f}
.alpha-status{min-height:36px;margin:11px 0;font:12px/1.5 Arial,sans-serif;color:#d5c49c;overflow-wrap:anywhere}
#alpha-submit{min-height:48px}
#alpha-submit:disabled{cursor:wait;opacity:.7}
.alpha-foot{margin:24px 0 0;font:7px/1.7 monospace;letter-spacing:1px;color:#7d9586}
@media(max-width:450px){.alpha-gate{padding-left:20px;padding-right:20px}.alpha-card{padding:30px 24px}.alpha-card h1{font-size:30px;letter-spacing:4px}}
@media(max-height:650px){.alpha-gate{align-items:flex-start}.alpha-card{padding-top:24px;padding-bottom:24px}.alpha-card .sigil{width:45px;height:45px;margin:15px auto}.alpha-card .sigil span{font-size:28px}.alpha-card .intro-rule{margin:17px auto}.alpha-help{margin-bottom:20px}}

/* The game-only teal Jobe mark is subdued; the gold master remains unchanged. */
.dpad>.dpad-center{display:grid;place-items:center}
.dpad-center img{display:block;width:80%;height:80%;object-fit:contain;pointer-events:none;opacity:.6}

/* Studio ident: the approved stacked master is unchanged, revealed in three
   clipped layers at its original proportions. All motion ends in that lockup. */
.studio-intro{--studio-gold:#c5b358;--studio-light:#f7f5ed;position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#101113;cursor:pointer;touch-action:manipulation;animation:studio-exit 3.6s ease both}
.studio-intro:before,.studio-intro:after{content:'';position:absolute;left:0;right:0;height:clamp(24px,7vh,72px);background:#090a0c;z-index:3;pointer-events:none;animation:studio-bars 3.6s cubic-bezier(.2,.8,.2,1) both}
.studio-intro:before{top:0}.studio-intro:after{bottom:0}
.studio-aura{position:absolute;width:min(120vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#c5b35820 0%,#c5b35808 32%,transparent 66%);animation:studio-aura 3.6s ease both;pointer-events:none}
.studio-rays{position:absolute;inset:-35%;background:linear-gradient(118deg,transparent 42%,#c5b35808 48%,#e7dc9c12 50%,transparent 55%);animation:studio-rays 3.6s cubic-bezier(.22,.7,.25,1) both;pointer-events:none}
.studio-orbit{position:absolute;width:min(57vw,350px);aspect-ratio:1;border:1px solid #c5b35830;transform:rotate(45deg);animation:studio-orbit 3.6s cubic-bezier(.16,.8,.2,1) both;pointer-events:none}
.studio-logo{width:min(94vw,560px,calc(var(--app-height,100svh)*.86));aspect-ratio:10/9;position:relative;animation:studio-frame 3.6s ease both;will-change:transform,opacity}
.studio-logo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.studio-emblem,.studio-wordmark,.studio-descriptor{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.studio-emblem{clip-path:inset(0 0 43%);transform-origin:50% 33%;animation:studio-emblem 3.6s cubic-bezier(.16,.8,.2,1) both}
.studio-wordmark{clip-path:inset(58% 0 18%);animation:studio-wordmark 3.6s cubic-bezier(.16,.8,.2,1) both}
.studio-descriptor{clip-path:inset(82% 0 0);animation:studio-descriptor 3.6s cubic-bezier(.16,.8,.2,1) both}
/* No unmasked highlight is ever rendered in browsers without masking. */
.studio-shine{display:none;position:absolute;inset:0;pointer-events:none}
@supports ((mask-image:url('')) or (-webkit-mask-image:url(''))){
  .studio-shine{display:block;-webkit-mask:url('assets/jobe-studios-stacked-master.svg') center/contain no-repeat;mask:url('assets/jobe-studios-stacked-master.svg') center/contain no-repeat}
  .studio-shine:after{content:'';position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 42%,#fff5d5aa 49%,#ffffffd9 50%,#fff5d580 51%,transparent 58%);animation:studio-shine 3.6s ease-in-out both}
}
.studio-rule{position:absolute;left:30%;width:40%;top:94%;height:1px;background:linear-gradient(90deg,transparent,#c5b358b3,transparent);transform-origin:center;animation:studio-rule 3.6s ease both;pointer-events:none}
.studio-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(23px,env(safe-area-inset-bottom));z-index:4;color:#f7f5ed80;font:8px monospace;letter-spacing:1.5px;animation:studio-hint 3.6s ease both;pointer-events:none}
@keyframes studio-exit{0%,82%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes studio-frame{0%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.045)}}
@keyframes studio-emblem{0%,4%{opacity:0;transform:translateY(-20px) scale(1.26)}27%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes studio-wordmark{0%,16%{opacity:0;transform:translateY(27px)}37%,100%{opacity:1;transform:translateY(0)}}
@keyframes studio-descriptor{0%,26%{opacity:0;transform:translateY(13px)}44%,100%{opacity:1;transform:translateY(0)}}
@keyframes studio-aura{0%{opacity:0;transform:scale(.38)}24%{opacity:.9;transform:scale(1)}50%,76%{opacity:.55;transform:scale(1.12)}100%{opacity:0;transform:scale(1.3)}}
@keyframes studio-rays{0%{opacity:0;transform:translateX(-30%) scale(.8)}24%{opacity:1}58%{opacity:.6;transform:translateX(25%) scale(1.1)}82%,100%{opacity:0;transform:translateX(45%) scale(1.2)}}
@keyframes studio-orbit{0%,7%{opacity:0;transform:translateY(-10%) rotate(45deg) scale(.3)}22%{opacity:.65}55%,100%{opacity:0;transform:translateY(-10%) rotate(45deg) scale(1.7)}}
@keyframes studio-shine{0%,32%{opacity:0;transform:translateX(-70%)}38%{opacity:.6}68%{opacity:.6;transform:translateX(70%)}73%,100%{opacity:0;transform:translateX(75%)}}
@keyframes studio-rule{0%,30%{opacity:0;transform:scaleX(0)}52%,80%{opacity:.65;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.7)}}
@keyframes studio-bars{0%{transform:scaleY(1.5)}30%,82%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes studio-hint{0%,18%{opacity:0}33%,82%{opacity:1}100%{opacity:0}}
@media(max-height:420px){.studio-skip{font-size:7px;bottom:max(14px,env(safe-area-inset-bottom))}.studio-intro:before,.studio-intro:after{height:18px}}
@media(prefers-reduced-motion:reduce){.studio-intro{display:none!important}}

/* Installation is an optional offer inside the Alpha gate, never a blocking popup. */
.alpha-gate{align-items:flex-start}.alpha-card{margin-block:auto}
.install-card{margin-top:24px;padding-top:21px;border-top:1px solid #6e765c55;text-align:left}
.install-heading{display:flex;align-items:center;gap:11px}.install-heading img{flex:none;border:1px solid #c5b35833;border-radius:9px}
.install-heading .eyebrow{font-size:6px;letter-spacing:1px;color:#8fbbb4;margin:0 0 5px}.install-heading h2{font:18px Georgia,serif;margin:0;color:#dddcc7}
#install-description{font:11px/1.65 Arial,sans-serif;color:#9bafa5;margin:13px 0 12px}
.install-actions{display:flex;align-items:center;gap:12px}.install-button{min-height:44px;flex:1;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#233c37;border:1px solid #8fbbb477;color:#c8ddd2;font:10px monospace;letter-spacing:.3px}.install-button span{font-size:15px}.install-button:disabled{opacity:.65;cursor:wait}
.install-dismiss{min-width:65px;min-height:44px;padding:10px 0;background:transparent;font:10px Arial;color:#8fa497}
.install-guidance{margin-top:13px;padding:13px;background:#0b161766;border-left:2px solid #8fbbb4;color:#c1d2c5;font:12px/1.7 Arial,sans-serif}.install-guidance p{margin:0}.install-guidance .install-save-note{font-size:10px;line-height:1.6;color:#839c8f;margin-top:10px}
.install-status{font:10px/1.6 Arial,sans-serif;color:#8fa99a;margin:10px 0 0;min-height:0}.install-status:empty{display:none}

/* Cosmic Malice rebrand: readable titles within the existing compact layout. */
.alpha-card h1,.intro h1{font-size:clamp(22px,5.6vw,28px);letter-spacing:2px;padding-left:2px;white-space:nowrap}
.sigil span{font-size:25px;letter-spacing:-2px;padding-right:2px}
.character-icon{font-size:16px}
.wordmark{font-size:23px;letter-spacing:3px;gap:20px}
@media(max-height:690px) and (max-width:899px){.sigil span{font-size:19px}}

/* Approved Cosmic Malice lockup. Studio ident and control artwork stay intact. */
.alpha-card h1.game-brand,.intro h1.game-brand{display:block;width:100%;margin:8px 0 13px;padding:0;line-height:0;white-space:normal}
.game-brand img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.intro h1.game-brand{max-width:310px;margin:0 0 10px}
@media(max-height:690px){.intro h1.game-brand{max-width:250px;margin-bottom:8px}}

/* Original orbital title sequence: charcoal, ivory and the approved gold lockup. */
.title-screen{position:fixed;inset:0;z-index:45;isolation:isolate;overflow:hidden;background:#030607;color:#e9e4d8;min-width:320px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none}
.title-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#293c40 0%,#111c20 34%,#050a0d 68%,#020405 100%);opacity:1}
.title-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(#02040566,transparent 20%,transparent 50%,#020608bb 100%);box-shadow:inset 0 0 120px #0007}
.title-stars{position:absolute;inset:-10%;opacity:.6;background-image:radial-gradient(circle at 18% 19%,#b5bfb7 0 1px,transparent 1.5px),radial-gradient(circle at 75% 33%,#d7dac9 0 1px,transparent 1.3px),radial-gradient(circle at 49% 8%,#afc3c5 0 1px,transparent 1.5px),radial-gradient(circle at 88% 74%,#a6b3b2 0 1px,transparent 1.4px),radial-gradient(circle at 29% 63%,#e2dbc9 0 .8px,transparent 1.3px);background-size:317px 257px,413px 397px,283px 367px,467px 271px,197px 179px;transform:rotate(-8deg)}
.title-orbit{position:absolute;width:min(86vw,920px);aspect-ratio:1;left:50%;top:48%;transform:translate(-50%,-50%);opacity:.65}
.title-planet{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 73% 29%,#334448 0%,#172329 34%,#060b0f 65%,#020507 75%);box-shadow:inset -2px 2px 2px #c9d6cf6b,3px -3px 28px #9cbbb52b;transform:rotate(-20deg)}
.title-planet:after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(167deg,transparent 0 25px,#8bada907 26px 31px,transparent 32px 53px);box-shadow:inset 35px -40px 60px #0009}
.title-ring{position:absolute;border:1px solid #a3b5af3b;border-radius:50%;inset:2%;transform:rotate(-32deg) scaleY(.42);box-shadow:0 0 0 7px #9dafa90a,0 0 0 15px #acbfb81b,0 0 0 19px #0009}
.title-ring:after{content:'';position:absolute;inset:-2%;border:3px solid transparent;border-left-color:#c6d0bd88;border-bottom-color:#a7bab755;border-radius:50%}
.title-ring-inner{inset:9%;transform:rotate(38deg) scaleY(.75);border-style:dashed;border-color:#718b8566;box-shadow:none}
.title-ring-inner:after{border-width:1px;border-left-color:#d7cfac66;border-bottom-color:transparent;inset:-12%}
.title-ray{position:absolute;width:140%;height:3px;left:-20%;top:52%;background:linear-gradient(90deg,transparent,#b4cac950,#eff5e9bb,#b4cac950,transparent);transform:rotate(-24deg);box-shadow:0 0 26px 6px #a4c5c31f;opacity:.3}
.title-dockward{position:absolute;bottom:0;left:50%;width:max(110%,1100px);height:auto;max-height:60%;object-fit:cover;object-position:center bottom;transform:translateX(-50%);opacity:.8;pointer-events:none}
.title-grain{position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 4px);pointer-events:none}
.title-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(48px,env(safe-area-inset-top)) 24px max(90px,env(safe-area-inset-bottom));text-align:center}
.title-kicker{font:9px/1.5 monospace;letter-spacing:4px;color:#aab6b0;margin:0 0 13px}
.title-lockup{position:relative;flex:none;aspect-ratio:3/2;width:min(76vw,600px,73svh);margin:0;line-height:0}
.title-lockup img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.title-chapter{display:flex;align-items:center;justify-content:center;gap:22px;font:10px/1.5 monospace;letter-spacing:6px;color:#d5cfb8;margin:17px 0 0;padding-left:6px;text-shadow:0 2px 12px #000}
.title-chapter span{width:38px;height:1px;background:linear-gradient(90deg,transparent,#bcb8a3)}
.title-chapter span:last-child{transform:rotate(180deg)}
.title-controls{height:180px;margin-top:35px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
#title-start{min-height:46px;padding:13px 26px;background:#0a1419b8;border:1px solid #a1aaa269;border-radius:0;font:11px/1.6 monospace;letter-spacing:3px;color:#f0ead8;box-shadow:0 3px 24px #0005;transition:background .2s,border-color .2s}
#title-start:hover{background:#253532de;border-color:#d7ca9b;filter:none}
#title-start:active{background:#42534a}
#title-status{max-width:290px;margin:12px 0 0;font:10px/1.6 monospace;color:#b0bbb0;letter-spacing:.3px}
/* Reserve the finished composition before revealing it. Visibility keeps the
   waiting controls out of hit testing and the accessibility tree without reflow. */
.title-screen[data-phase=animating] .title-controls{visibility:hidden;pointer-events:none}
.title-announcement{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.title-footer{position:absolute;z-index:3;bottom:max(27px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:8px/1.5 monospace;letter-spacing:2px;color:#82938f}
#title-skip{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:none;color:#d0d8cc;white-space:nowrap;font:9px/1.5 monospace;letter-spacing:1.5px;min-height:44px;padding:12px 16px}
#title-skip span{margin-left:7px;font-size:15px}
.title-blackout{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none}
/* Every animated layer has an explicit initial state. Keep the backing black
   and use opacity/transform only: no animated filters or bright flash frames. */
.title-lockup .title-logo-symbol,.title-lockup .title-logo-type{position:absolute;inset:0;opacity:0;visibility:hidden}
.title-logo-symbol{clip-path:inset(0 0 36% 0)}
.title-logo-type{clip-path:inset(64% 0 0 0)}
.title-screen[data-phase=animating]{animation:title-sequence-clock 33.2s linear both,title-screen-in .55s ease-out both;cursor:pointer}
.title-screen[data-phase=animating] .title-blackout{opacity:1;animation:title-from-black 1.8s ease-in-out both}
.title-screen[data-phase=animating] .title-scene{opacity:0;animation:title-world-arrival 8.6s linear 24.6s both}
.title-screen[data-phase=animating] .title-stars{opacity:0;animation:title-stars-arrival 8.6s ease-out 24.6s both}
.title-screen[data-phase=animating] .title-orbit{opacity:0;animation:title-orbit-arrival 8.6s cubic-bezier(.2,.55,.35,1) 24.6s both}
.title-screen[data-phase=animating] .title-planet{opacity:0;animation:title-planet-arrival 8.6s ease 24.6s both}
.title-screen[data-phase=animating] .title-ring-outer{opacity:0;animation:title-ring-arrival 8.6s ease-in-out 24.6s both}
.title-screen[data-phase=animating] .title-ring-inner{opacity:0;animation:title-inner-arrival 8.6s ease-in-out 24.6s both}
.title-screen[data-phase=animating] .title-ray{opacity:0;animation:title-ray-arrival 8.6s ease-out 24.6s both}
.title-screen[data-phase=animating] .title-dockward{opacity:0;animation:title-dock-arrival 8.6s cubic-bezier(.22,.6,.25,1) 24.6s both}
.title-screen[data-phase=animating] .title-logo-complete{opacity:0}
.title-screen[data-phase=animating] .title-logo-symbol{visibility:visible;opacity:0;animation:title-symbol-arrival 2.1s 28.9s cubic-bezier(.2,.65,.3,1) both}
.title-screen[data-phase=animating] .title-logo-type{visibility:visible;opacity:0;animation:title-type-arrival 1.9s 30.5s cubic-bezier(.2,.65,.3,1) both}
.title-screen[data-phase=animating] .title-kicker{opacity:0;animation:title-text-arrival 1s 31.4s ease both}
.title-screen[data-phase=animating] .title-chapter{opacity:0;animation:title-text-arrival 1.1s 31.9s ease both}
/* Independent opacity/lift entrances avoid a hard text pop. Keep the credit
   container's landscape centering transform untouched. No layout is animated. */
.title-screen[data-phase=ready] #title-start,.title-screen[data-phase=loading] #title-start{animation:title-controls-arrival .85s cubic-bezier(.22,.61,.36,1) both}
.title-screen[data-phase=ready] #title-status,.title-screen[data-phase=loading] #title-status{animation:title-controls-arrival 1s .12s cubic-bezier(.22,.61,.36,1) both}
.title-screen[data-phase=ready] .title-credit-inline:before,.title-screen[data-phase=loading] .title-credit-inline:before{animation:title-credit-rule 1s .22s ease both}
.title-screen[data-phase=ready] .title-credit-inline>span,.title-screen[data-phase=loading] .title-credit-inline>span{animation:title-controls-arrival 1.1s .3s cubic-bezier(.22,.61,.36,1) both}
.title-screen[data-phase=ready] .title-credit-inline>.title-credit-collaboration,.title-screen[data-phase=loading] .title-credit-inline>.title-credit-collaboration{animation-delay:.42s}
.title-screen[data-phase=ready] .title-credit-inline>.title-credit-presented,.title-screen[data-phase=loading] .title-credit-inline>.title-credit-presented{animation-delay:.54s}
@keyframes title-controls-arrival{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-credit-rule{from{opacity:0;transform:scaleX(.65)}to{opacity:1;transform:scaleX(1)}}
.title-screen[data-phase=loading] .title-blackout{z-index:6;opacity:1;pointer-events:auto;transition:opacity .5s ease-in-out}
/* Reuse the full-screen title as a black curtain after the destination paints.
   Hiding its children prevents the old title showing through the outgoing fade. */
.title-screen[data-phase=revealing]{background:#000;opacity:0;cursor:default;animation:title-game-reveal .65s ease-in-out both}
.title-screen[data-phase=revealing]>*{visibility:hidden}
@keyframes title-game-reveal{from{opacity:1}to{opacity:0}}
@keyframes title-sequence-clock{from{--title-sequence:0}to{--title-sequence:1}}
@keyframes title-screen-in{from{opacity:0}to{opacity:1}}
@keyframes title-from-black{0%,58%{opacity:1}100%{opacity:0}}
@keyframes title-world-arrival{0%,12%{opacity:0;transform:scale(1.1)}40%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes title-stars-arrival{0%,12%{opacity:0;transform:rotate(-8deg) scale(1.3)}30%{opacity:.6}100%{opacity:.6;transform:rotate(-8deg) scale(1)}}
@keyframes title-orbit-arrival{0%,17%{transform:translate(-50%,-35%) scale(1.6);opacity:0}45%{opacity:.65}100%{transform:translate(-50%,-50%) scale(1);opacity:.65}}
@keyframes title-planet-arrival{0%,18%{opacity:0;transform:rotate(-37deg)}45%{opacity:1}100%{opacity:1;transform:rotate(-20deg)}}
@keyframes title-ring-arrival{0%,23%{opacity:0;transform:rotate(34deg) scaleY(.08)}42%{opacity:.65}90%,100%{opacity:1;transform:rotate(-32deg) scaleY(.42)}}
@keyframes title-inner-arrival{0%,30%{opacity:0;transform:rotate(-43deg) scaleY(.25)}58%{opacity:.7}95%,100%{opacity:1;transform:rotate(38deg) scaleY(.75)}}
@keyframes title-ray-arrival{0%,30%{opacity:0;transform:rotate(-38deg) translateY(70px)}75%,100%{opacity:.3;transform:rotate(-24deg) translateY(0)}}
@keyframes title-dock-arrival{0%,31%{opacity:0;transform:translate(-50%,72px) scale(1.08)}72%{opacity:.65}100%{opacity:.8;transform:translate(-50%,0) scale(1)}}
@keyframes title-symbol-arrival{from{opacity:0;transform:translateY(25px) scale(1.08)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes title-type-arrival{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes title-text-arrival{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.title-reduced,.title-reduced *,.title-reduced *:before,.title-reduced *:after{animation:none!important;transition:none!important}
@media(max-width:600px){.title-content{padding:40px 16px 84px}.title-lockup{width:min(100vw,70svh);max-width:none}.title-kicker{font-size:8px;letter-spacing:2.8px;margin-bottom:29px}.title-chapter{font-size:9px;letter-spacing:4px;gap:15px;margin-top:23px}.title-chapter span{width:25px}.title-controls{margin-top:38px}#title-start{font-size:10px;letter-spacing:2px;padding:13px 24px}.title-orbit{width:148vw;top:43%}.title-dockward{width:1100px;max-height:46%}.title-footer{left:20px;right:20px;font-size:7px;letter-spacing:1px;bottom:max(23px,env(safe-area-inset-bottom))}#title-skip{bottom:13px;font-size:8px;letter-spacing:1px}.title-scene:after{box-shadow:inset 0 0 80px #0006}}
@media(max-height:590px){.title-content{padding-top:24px;padding-bottom:48px}.title-lockup{width:min(70vw,70svh)}.title-kicker{margin-bottom:6px;font-size:7px}.title-chapter{margin-top:6px;font-size:8px}.title-controls{height:180px;margin-top:15px}#title-status{margin-top:7px;font-size:9px}.title-footer{bottom:max(14px,env(safe-area-inset-bottom))}#title-skip{bottom:-12px}.title-dockward{max-height:52%}}
.title-sound{position:absolute;top:max(17px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));z-index:5;padding:12px;min-height:44px;background:#06101580;border:1px solid #9eafa026;font:8px/1.5 monospace;letter-spacing:1.5px;color:#c1cabe}
.title-sound:disabled{opacity:.4}
@media(max-width:600px){.title-sound{top:max(12px,env(safe-area-inset-top));right:14px;font-size:7px;padding:10px}.title-kicker{margin-top:17px}}
@media(max-height:590px){.title-sound{top:8px;right:12px}}

/* Prelude: music attribution, living planets, then the orbital relay.
   All panels disappear on skip/reduced motion; the final title is unchanged. */
.title-opening-credits,.title-cinema{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.title-opening-credits{z-index:3;background:#000;align-items:center;justify-content:center;text-align:center}
.opening-credit-copy{width:100%;padding:40px 24px}
.opening-credit-copy h2{font:normal clamp(28px,5.8vw,48px)/1.25 Georgia,serif;color:#e5dfcd;letter-spacing:2px;margin:0}
.opening-credit-copy h2 span{display:block;font:normal 11px/1.8 monospace;letter-spacing:1.4px;color:#b7bbae;margin-bottom:14px}
.opening-credit-rule{height:1px;width:36px;background:#aa976b;margin:27px auto}
.opening-credit-copy h3{font:normal 12px/1.7 monospace;color:#c6c8b6;letter-spacing:1.5px;margin:0;padding-left:1.5px}
.title-cinema{z-index:1;background:#020506}
.title-cinema:before{content:'';position:absolute;inset:0;z-index:1;opacity:.18;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 4px);pointer-events:none}
.title-cinema:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000a,transparent 17%,transparent 75%,#000c);box-shadow:inset 0 0 80px #0005}
/* Every overlay shares the artwork's cover plane. Masks cannot drift onto
   architecture when the viewport changes from desktop to a narrow phone. */
.cinema-stage{position:absolute;left:50%;top:50%;width:max(100%,calc(var(--app-height,100vh) * 1.776833));height:max(100%,56.279905vw);transform:translate(-50%,-50%);transform-origin:center;pointer-events:none}
.title-cinema img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none}
.cinema-atmosphere,.cinema-relay-motion{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.cinema-cloud-flow{transform-box:view-box;transform-origin:50% 50%}
.cinema-dawn-glow{opacity:0;transform-origin:836px 401px}
.cinema-signal{opacity:0;transform-origin:836px 318px}
.cinema-relay-beacon,.cinema-relay-current{opacity:0}
.cinema-relay-mist{opacity:.6}
.cinema-approach-lines{position:absolute;inset:0;opacity:.24;background:radial-gradient(1px 1px at 22% 41%,#b7c9bb 50%,transparent 70%),radial-gradient(1px 1px at 73% 27%,#adc9c6 50%,transparent 70%),radial-gradient(1px 1px at 67% 74%,#cdb98a 50%,transparent 70%);pointer-events:none}
.title-credit-inline{display:block;font:11px/1.45 "Helvetica Neue",Arial,sans-serif;color:#aeb8af;letter-spacing:.15px;max-width:min(330px,calc(100vw - 40px));white-space:normal;margin:18px 0 0;flex:none;text-wrap:balance}
.title-credit-inline:before{content:'';display:block;width:28px;height:1px;background:#af9b6366;margin:0 auto 12px}
.title-credit-inline>span{display:block}
.title-credit-inline strong{font-weight:500;color:#e1d8c1;letter-spacing:.25px}
.title-credit-collaboration{margin-top:7px;font-size:10px;line-height:1.55}
.title-credit-detail{color:#8d9c94;white-space:nowrap}
.title-credit-presented{margin-top:7px;font-size:10px}
.title-screen[data-phase=animating] .title-opening-credits{display:flex;opacity:0;animation:title-credit-card 4.9s .45s linear both}
.title-screen[data-phase=animating] .opening-credit-copy{animation:title-credit-copy 4.9s .45s ease both}
.title-screen[data-phase=animating] .title-cinema-space{display:block;opacity:0;animation:title-space-panel 7.1s 4.5s linear both}
.title-screen[data-phase=animating] .cinema-space-stage{animation:title-space-drift 7.1s 4.5s ease-out both}
.title-screen[data-phase=animating] .title-cinema-station{display:block;opacity:0;animation:title-station-panel 8s 11.1s linear both}
.title-screen[data-phase=animating] .cinema-station-stage{animation:title-station-approach 8s 11.1s cubic-bezier(.2,.5,.3,1) both}
.title-screen[data-phase=animating] .cinema-space-clouds{animation:title-space-weather 7.1s 4.5s linear both}
.title-screen[data-phase=animating] .cinema-dawn-glow{animation:title-dawn-breath 7.1s 4.5s ease-in-out both}
.title-screen[data-phase=animating] .cinema-station-clouds{animation:title-station-weather 8s 11.1s linear both}
.title-screen[data-phase=animating] .title-cinema-relay{display:block;opacity:0;animation:title-relay-panel 7.3s 18.2s linear both}
.title-screen[data-phase=animating] .cinema-relay-stage{animation:title-relay-traverse 7.3s 18.2s ease-out both}
.title-screen[data-phase=animating] .cinema-relay-mist{animation:title-relay-weather 7.3s 18.2s linear both}
.title-screen[data-phase=animating] .cinema-signal-one{animation:title-relay-signal 4.8s 18.8s ease-out both}
.title-screen[data-phase=animating] .cinema-signal-two{animation:title-relay-signal 4.8s 20.1s ease-out both}
.title-screen[data-phase=animating] .cinema-signal-three{animation:title-relay-signal 4.8s 21.4s ease-out both}
.title-screen[data-phase=animating] .cinema-relay-beacon{animation:title-relay-beacon 7.3s 18.2s ease-in-out both}
.title-screen[data-phase=animating] .cinema-relay-current{animation:title-relay-current 7.3s 18.2s ease-in-out both}
@keyframes title-space-weather{from{transform:translateX(-35px)}to{transform:translateX(62px)}}
@keyframes title-station-weather{from{transform:translate(-22px,5px)}to{transform:translate(53px,-9px)}}
@keyframes title-dawn-breath{0%,100%{opacity:0;transform:scaleX(.6)}45%{opacity:.75;transform:scaleX(1.5)}}
@keyframes title-relay-panel{0%{opacity:0}14%,85%{opacity:1}100%{opacity:0}}
@keyframes title-relay-traverse{from{transform:translate(-50%,-48%) scale(1.08)}to{transform:translate(-50%,-50%) scale(1.02)}}
@keyframes title-relay-weather{from{transform:translateX(-90px);opacity:.35}to{transform:translateX(110px);opacity:.8}}
@keyframes title-relay-signal{0%{opacity:0;transform:scale(.04)}15%{opacity:.5}75%{opacity:.28}100%{opacity:0;transform:scale(4.8)}}
@keyframes title-relay-beacon{0%,12%,100%{opacity:0}24%,43%,62%,80%{opacity:1}33%,52%,71%{opacity:.35}}
@keyframes title-relay-current{0%,12%,100%{opacity:0}32%,74%{opacity:.9}}
@keyframes title-credit-card{0%{opacity:0}18%,77%{opacity:1}100%{opacity:0}}
@keyframes title-credit-copy{0%{opacity:0;transform:translateY(7px)}23%,73%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}
@keyframes title-space-panel{0%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}
@keyframes title-space-drift{from{transform:translate(-50%,-47%) scale(1.12)}to{transform:translate(-50%,-51%) scale(1.02)}}
@keyframes title-station-panel{0%{opacity:0}13%,83%{opacity:1}100%{opacity:0}}
@keyframes title-station-approach{from{transform:translate(-50%,-49%) scale(1.03)}to{transform:translate(-50%,-46%) scale(1.18)}}
@media(max-width:600px){.opening-credit-copy h2{font-size:32px}.opening-credit-copy h3{font-size:10px;letter-spacing:1px}}
@media(max-height:590px){.opening-credit-rule{margin:19px auto}.opening-credit-copy h2{font-size:32px}}

@media(max-height:590px) and (min-width:650px){
 .title-content{padding-bottom:102px}
 .title-lockup{width:min(70vw,60svh)}
 .title-controls{height:70px}
 .title-credit-inline{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 48px));max-width:none;margin:0;font-size:10px}
 .title-credit-inline{display:grid;grid-template-columns:1fr 1.65fr 1fr;gap:16px;align-items:center}
 .title-credit-inline:before{display:none}
 .title-credit-inline>span{margin:0}
}

/* EVASI-style light: the moving band is always clipped to the logo's alpha. */
.title-logo-sheen{display:none;position:absolute;inset:0;pointer-events:none}
.title-logo-sweep{position:absolute;inset:0;overflow:hidden;-webkit-mask:url("assets/endgame-logo.svg") center/100% 100% no-repeat;mask:url("assets/endgame-logo.svg") center/100% 100% no-repeat}
.title-logo-sweep:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 38%,rgba(255,244,199,.5) 44%,#fffdf4 48%,#fff 50%,#fffdf4 52%,rgba(255,244,199,.5) 56%,transparent 62%);transform:translateX(-65%)}
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
 .title-screen[data-phase=ready] .title-logo-sheen{display:block}
 .title-screen[data-phase=ready] .title-logo-sweep:after{animation:title-logo-shine 4.5s ease-in-out infinite alternate}
}
@keyframes title-logo-shine{from{transform:translateX(-65%)}to{transform:translateX(65%)}}
.title-reduced .title-logo-sheen{display:none!important}
@media(prefers-reduced-motion:reduce){.title-logo-sheen{display:none!important}}

/* Install remains reachable at the gate and in game settings. */
.install-menu-button{display:block;width:100%;min-height:44px;margin-top:12px;padding:12px;background:#233c37;border:1px solid #8fbbb466;text-align:left;font:11px monospace;color:#c8ddd2}
.install-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid #71856d;background:#101d1d;color:var(--ink);box-shadow:0 24px 90px #0009;overflow:auto}
.install-dialog::backdrop{background:#02090be8}
.install-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.install-dialog-head .eyebrow{margin:0;font-size:8px}.install-dialog-head button{flex:none;min-width:44px;min-height:44px}
.install-dialog h2{font:27px Georgia,serif;margin:18px 0}.install-dialog .install-guidance{margin:0;font-size:14px;line-height:1.75}.install-dialog .install-save-note{font-size:11px}

/* Fill the current viewport, not the smallest Safari-toolbar viewport. Keep the
   artwork behind the home indicator; inset controls, never the entire canvas. */
:root{--app-height:100vh}
@supports(height:100dvh){:root{--app-height:100dvh}}
html{min-height:100%;background:#0d1416}
body{min-height:var(--app-height);overscroll-behavior-y:none}
@media(max-width:899px){
  #game-shell{position:fixed;inset:0;height:var(--app-height);max-width:none}
  .layout{height:100%;width:100%}
  .game-column{height:100%;width:min(100%,calc(var(--app-height)*.6))}
  .game-frame{height:100%;max-height:none}
  .game-hud{padding:calc(13px + env(safe-area-inset-top)) max(17px,env(safe-area-inset-right)) 15px max(17px,env(safe-area-inset-left))}
  .touch-controls{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
  .dialogue{left:max(13px,env(safe-area-inset-left));right:max(13px,env(safe-area-inset-right));bottom:calc(15px + env(safe-area-inset-bottom));max-height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 35px);overflow-y:auto}
  .interaction-prompt{bottom:calc(178px + env(safe-area-inset-bottom))}
  .objective-toast{top:calc(73px + env(safe-area-inset-top))}
  .intro{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .ending,.menu-overlay{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .title-content{padding-top:calc(40px + env(safe-area-inset-top));padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .title-footer{bottom:calc(23px + env(safe-area-inset-bottom))}
}
@media(max-width:899px) and (max-aspect-ratio:3/5){.game-column{width:100%}}
@media(max-height:590px){.title-content{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(48px,env(safe-area-inset-bottom))}.title-footer{bottom:max(14px,env(safe-area-inset-bottom))}}
@media(max-height:590px) and (min-width:650px){.title-content{padding-bottom:calc(102px + env(safe-area-inset-bottom))}.title-credit-inline{bottom:calc(44px + env(safe-area-inset-bottom))}}

/* Every full-screen stage uses one explicit window size. The title, gate and
   studio ident must not fall back to fixed inset geometry while only gameplay
   receives the measured height. Never use screen.height for interactive UI.
   The deprecated black-translucent status-bar meta is deliberately omitted:
   WebKit #313800/#317153 describe a status-bar-sized orphan strip with it. */
html{height:var(--app-height)}
body{position:relative;min-height:var(--app-height)}
.studio-intro,.alpha-gate,.title-screen,.alert-modal{inset:0 0 auto;height:var(--app-height);min-height:0}
/* Avoid the standalone fixed-position clipping path. Root scrolling stays
   disabled on phones; scrollable cards and menus keep their own overflow. */
@media(max-width:899px){
html[data-standalone=true] .studio-intro,
html[data-standalone=true] .alpha-gate,
html[data-standalone=true] .title-screen,
html[data-standalone=true] .alert-modal{position:absolute}
html[data-standalone=true] #game-shell{position:absolute}
}

/* Gate status is announced without covering the playable lane. */
.gate-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}