:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#030610;color:#d4eaff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#030610}
[hidden]{display:none!important}
#loading,#fullscreen-control{-webkit-user-select:none;user-select:none}
#canvas{display:block;width:100%;height:100%;outline:none}
#loading{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse at 65% 30%,#20364b 0,#070d1c 45%,#020309 85%);z-index:2;transition:opacity .45s}
#menu-scene{position:absolute;left:50%;top:50%;width:max(100vw,177.778vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0}
.scene-ready #menu-scene{opacity:1}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,3,12,.72),transparent 30%,rgba(0,3,12,.1) 70%,rgba(0,3,12,.28)),radial-gradient(ellipse at 50% 45%,rgba(0,5,18,.13),rgba(0,3,12,.1) 45%,rgba(0,3,12,.36))}
.menu-content{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:min(900px,87vw);display:flex;align-items:center;flex-direction:column;text-align:center}
h1{width:100%;margin:0;filter:drop-shadow(0 5px 16px #020a19)}h1 img{display:block;width:100%;height:auto}
.menu-content h1,.menu-content h1 img{-webkit-user-select:none;user-select:none}.menu-content h1 img{-webkit-user-drag:none}
#enter{position:relative;display:block;margin:4vh 0 0;padding:16px 58px;border:0;background:transparent;color:#deefff;font:600 clamp(24px,2.25vw,34px)/1 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:5px;cursor:pointer;text-shadow:0 0 7px #66b8fd,0 0 22px #2f72b6;transition:color .2s,text-shadow .2s,transform .2s}
#enter:before,#enter:after{content:'';position:absolute;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#8accfa,transparent);opacity:0;transition:opacity .2s}#enter:before{top:0}#enter:after{bottom:0}
#enter:hover,#enter:focus-visible{color:white;text-shadow:0 0 9px #a6dcff,0 0 28px #57acfa;transform:scale(1.04);outline:none}#enter:hover:before,#enter:hover:after,#enter:focus-visible:before,#enter:focus-visible:after{opacity:.8}#enter:active{transform:scale(.98)}
#enter:disabled{cursor:default;opacity:.5;transform:none}
#status{font-size:13px;letter-spacing:1.3px;line-height:1.7;color:#afc9de;min-height:24px;margin:18px 0 0;text-shadow:0 2px 5px #000}
#sound-hint,.edition{position:absolute;bottom:27px;margin:0;color:#9bacbf;font-size:10px;line-height:1.6;letter-spacing:1.8px;text-transform:uppercase;text-shadow:0 2px 4px #000}
#sound-hint{left:32px}.edition{right:32px}.edition span{padding:0 10px;opacity:.5}
#hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:4px;background:#080c10bb;color:#d7e5ef;font-size:13px;pointer-events:none;white-space:nowrap}
#loading.starting{background:#000}#loading.starting>*{visibility:hidden}
@media(max-width:640px){.menu-content{top:24%;width:96vw}#enter{margin-top:6vh;padding:16px 45px}#sound-hint,.edition{font-size:8px;letter-spacing:1px;bottom:20px}#sound-hint{left:20px}.edition{right:20px;max-width:45%;text-align:right}#hint{width:92%;white-space:normal;text-align:center}}
@media(max-height:520px) and (min-width:641px){.menu-content{top:2%;width:min(690px,75vw)}#enter{margin-top:0}#status{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}#enter:hover,#enter:focus-visible{transform:none}}

.tagline{margin:-6% 20px 0;max-width:90%;color:#c4dae9;font-size:clamp(11px,1.4vw,17px);line-height:1.6;letter-spacing:.08em;text-shadow:0 2px 8px #020610}

#menu-cameo{position:absolute;right:3vw;bottom:7vh;width:27vw;max-height:38vh;aspect-ratio:620/540;opacity:0;pointer-events:none;overflow:hidden;background:#080907;isolation:isolate}
#menu-cameo video{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.32) saturate(.58) contrast(1.22) brightness(.89);transform:scale(1.025)}
#menu-cameo:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0003 0,#0003 1px,transparent 1px,transparent 4px),radial-gradient(ellipse at center,transparent 35%,#10140795 100%);box-shadow:inset 0 0 40px #000a}
@media(max-width:640px){#menu-cameo{width:38vw;bottom:9vh}}

#menu-cameo[data-side="left"]{left:3vw;right:auto}

#mission-failure{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:32px;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#2b171be8,#090d16f5 70%);backdrop-filter:blur(9px) saturate(.25);-webkit-backdrop-filter:blur(9px) saturate(.25);animation:failure-reveal .32s ease-out both}
.failure-card{text-align:center;max-width:600px;color:#f2eeec;animation:failure-rise .4s ease-out both}
.failure-mark{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 32px;border:1px solid #dc8d8266;transform:rotate(45deg);box-shadow:0 0 35px #ce635a12}
.failure-mark span{width:12px;height:12px;border:1px solid #e3a094;background:#df8b7b18}
.failure-label{margin:0 0 16px;color:#dfa294;font:500 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.failure-card h2{margin:0;color:#f3efed;font:400 clamp(32px,4.3vw,58px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.035em}
.failure-detail{margin:22px 0 0;color:#a5a6af;font:400 clamp(12px,1.3vw,15px)/1.6 Arial,Helvetica,sans-serif;letter-spacing:.03em}
.failure-loader{width:150px;height:1px;margin:32px auto 0;background:#eee0dc20;overflow:hidden}
.failure-loader span{display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,#d99b8d,transparent);animation:failure-loading 1.5s ease-in-out infinite}
@keyframes failure-reveal{from{opacity:0}to{opacity:1}}
@keyframes failure-rise{from{transform:translateY(7px)}to{transform:translateY(0)}}
@keyframes failure-loading{from{transform:translateX(-110%)}to{transform:translateX(325%)}}
@media(prefers-reduced-motion:reduce){#mission-failure,.failure-card,.failure-loader span{animation:none}.failure-loader span{margin:auto}}

#debug-checkpoints{margin:16px auto 0;max-width:620px;color:#9bb1c4;font:11px/1.4 Arial,sans-serif;letter-spacing:1px}#debug-checkpoints p{margin:0 0 8px;text-transform:uppercase}.debug-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.debug-buttons button{padding:7px 10px;border:1px solid #7892a655;border-radius:3px;background:#07121db8;color:#bbcedd;font:12px/1.2 Arial,sans-serif;cursor:pointer}.debug-buttons button:hover,.debug-buttons button:focus-visible{background:#20394e;color:white;border-color:#a9cee8}.debug-buttons button:disabled{opacity:.4;cursor:default}
@media(max-height:720px){.menu-content{top:3%}#enter{margin-top:1vh}#debug-checkpoints{margin-top:8px}#status{margin-top:6px}}


.swear-setting{display:flex;align-items:center;gap:10px;margin:12px 0 2px;padding:7px 12px;border:1px solid #7892a655;border-radius:4px;background:#07121db8;color:#deefff;text-align:left;font:14px/1.35 Arial,sans-serif;cursor:pointer}
.swear-setting input{width:18px;height:18px;margin:0;accent-color:#8accfa;cursor:pointer;flex-shrink:0}
.swear-setting small{display:block;margin-top:3px;color:#a9c0d2;font-size:11px}
.swear-setting:focus-within{outline:2px solid #a9cee8;outline-offset:3px}
#start-progress{display:none;position:absolute;inset:0;margin:0;align-items:center;justify-content:center;color:#c4dae9;font:14px/1.5 Arial,sans-serif;letter-spacing:.06em}
#loading.starting>#start-progress{display:flex;visibility:visible}
@media(max-height:720px){.swear-setting{margin-top:4px;padding:5px 10px}.menu-content h1{width:min(100%,720px)}}
@media(max-height:560px){#loading{overflow-y:auto}.menu-content{position:relative;top:auto;padding:12px 0 24px}.menu-content h1{width:min(100%,440px)}}