/* Operation Cybernet — full-screen title composition, isolated from combat UI. */
html,body{background:#000}
/* Raster the existing HUD during loading. visibility:hidden deferred its first
   clipped/blurred GPU paint until combat, blocking the GPU thread for 123 ms.
   Near-zero composited opacity keeps the menu visually unchanged without
   compiling or traversing the 3D scene again. */
body.boot-active #hud{visibility:visible;opacity:.001;pointer-events:none}
body.boot-active #game{opacity:0;transition:opacity 1.1s ease}
body.boot-ready #game{opacity:1}
#cinematicIntro{background:#000}
#introVideo{object-fit:contain;object-position:center center;background:#000;transition:opacity .55s ease;filter:none}
#cinematicIntro.intro-ending #introVideo{transition-duration:var(--exit-time,850ms)}
#initializeScreen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#dce9ec}
#initializeScreen[hidden]{display:none}
.boot-overline{position:absolute;top:6vh;font:10px 'Chakra Petch',sans-serif;letter-spacing:.32em;color:#6b7c83}
.initialize-title{font:600 clamp(30px,5vw,76px)/1.1 Orbitron,sans-serif;letter-spacing:.18em;text-indent:.18em;text-align:center}
.initialize-title small{display:block;font:400 12px 'Chakra Petch',sans-serif;letter-spacing:.8em;margin-bottom:20px}
#initializeButton{margin-top:60px;background:transparent;box-shadow:none;border:1px solid #33464e;font:500 12px 'Chakra Petch',sans-serif;padding:16px 32px;letter-spacing:.28em;min-width:230px}
#initializeButton span{margin-left:40px;color:#8bb4bf}
#initializeLoad{display:none;width:min(360px,72vw);margin-top:24px;color:#9bc3cf;font:500 10px 'Chakra Petch',sans-serif;letter-spacing:.18em;position:relative}
#initializeScreen.loading #initializeLoad{display:block}
.initialize-track{position:relative;height:4px;margin-top:12px;background:#172832;overflow:hidden;box-shadow:inset 0 0 0 1px #45616f66,0 0 18px #67cfe52a}.initialize-track:after{content:'';position:absolute;inset:-2px auto -2px -34%;width:34%;background:linear-gradient(90deg,transparent,#e8fdffdd,transparent);animation:bootScan 1.25s linear infinite}.initialize-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#715dff,#9cecff);box-shadow:0 0 15px #79dfff;transition:width .18s ease}
#initializeLoad b{position:absolute;right:0;top:-2px;width:7px;height:7px;border:1px solid #8fdcf1;border-radius:50%;animation:bootPulse .9s ease-in-out infinite alternate}
@keyframes bootPulse{to{transform:scale(1.6);opacity:.35}}
#initializeScreen p{font-size:9px;letter-spacing:.2em;color:#657880;margin-top:20px}
#skipIntro{position:absolute;right:3.5vw;bottom:4vh;margin:0;border:0;background:transparent;box-shadow:none;color:#c5d2d9;opacity:.45;font:400 10px 'Chakra Petch',sans-serif;letter-spacing:.2em;padding:12px}
#skipIntro:hover,#skipIntro:focus-visible{opacity:1;transform:none}
#startScreen{z-index:5;display:block;background:linear-gradient(90deg,rgba(0,4,9,.86),rgba(0,5,10,.42) 37%,transparent 77%),linear-gradient(0deg,rgba(0,3,8,.80),transparent 40%);opacity:0;transition:opacity 1s ease;pointer-events:none}
body.intro-complete #startScreen{opacity:1;pointer-events:auto}
#startScreen.hidden{display:none}
.title-top,.title-footer{position:absolute;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;font:400 10px 'Chakra Petch',sans-serif;letter-spacing:.22em;color:#9aaeb7}
.title-top{top:5vh}.title-top span:first-child:before{content:'◈';color:#8bcad5;margin-right:13px}
.title-footer{bottom:4vh;font-size:9px;color:#80939c}.title-footer i{font-style:normal;color:#6ba3af;margin:0 12px}
.title-content{position:absolute;left:8vw;top:31%;width:65vw;max-width:1150px}
.title-rule{width:56px;height:2px;background:#8cbdc9;margin-bottom:28px;box-shadow:0 0 14px #609db74a}
.operation{font:500 clamp(11px,1.1vw,16px) 'Chakra Petch',sans-serif;letter-spacing:.82em;color:#a8c3cc;margin:0 0 17px 4px}
#startScreen h1{font:700 clamp(40px,6.6vw,112px)/1 Orbitron,sans-serif;letter-spacing:.055em;margin:0;text-shadow:0 2px 0 #09202a,0 0 32px #83bccc12;color:#dfedf0}
.title-tagline{font:400 10px 'Chakra Petch',sans-serif;letter-spacing:.34em;color:#79939f;margin:24px 0 0 4px}
#startScreen nav{margin-top:58px;width:310px;display:flex;flex-direction:column;gap:4px}
#startScreen nav button{margin:0;text-align:left;position:relative;padding:17px 0 17px 17px;min-width:0;width:100%;font:500 13px 'Chakra Petch',sans-serif;letter-spacing:.22em;color:#b2c6ce;box-shadow:none;background:transparent;border:0;border-left:1px solid #526772;transform:none}
#startScreen #playButton{background:linear-gradient(90deg,#8ccadb16,transparent);color:#edf8fa}
#startScreen nav button:hover,#startScreen nav button:focus-visible{border-left-color:#aeefff;background:linear-gradient(90deg,#9cdbe22b,transparent);box-shadow:none;filter:none;outline:none;color:white}
#startScreen nav button:disabled{opacity:.32;cursor:wait}
.menu-index{font-size:9px;color:#68858f;margin-right:25px;letter-spacing:.06em}.menu-arrow{float:right;margin-right:16px;color:#99c2cb}
.boot-status{margin:27px 0 0 18px;max-width:250px;color:#6f8996;font:400 9px 'Chakra Petch',sans-serif;letter-spacing:.18em}
.boot-track{position:relative;height:4px;background:#172832;margin-top:12px;width:240px;overflow:hidden;box-shadow:inset 0 0 0 1px #45616f55,0 0 14px #67cfe522}.boot-track:after{content:'';position:absolute;inset:-2px auto -2px -34%;width:34%;background:linear-gradient(90deg,transparent,#d9fbffcc,transparent);animation:bootScan 1.25s linear infinite}.boot-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4e8799,#b9f4ff);box-shadow:0 0 12px #85eaff;transition:width .18s ease}@keyframes bootScan{to{left:110%}}
body.intro-complete .title-content{animation:titleResolve 1.15s cubic-bezier(.16,.8,.2,1) both}
@keyframes titleResolve{from{opacity:0;transform:translateY(13px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
#titleSettings{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,13,.98) 0%,rgba(1,7,13,.94) 48%,rgba(1,7,13,.78));padding:12vh 8vw;color:#b2c9d2;z-index:2}
#titleSettings[hidden]{display:none}#titleSettings h2{font:500 clamp(18px,2vw,30px) Orbitron,sans-serif;color:#d6e7eb;text-shadow:none;letter-spacing:.12em;margin:45px 0}
#titleSettings button{background:none;box-shadow:none;border:0;border-bottom:1px solid #415963;margin:0;padding:12px 0;font:12px 'Chakra Petch',sans-serif}
#titleSettings label{display:flex;flex-direction:column;gap:14px;font-size:11px;letter-spacing:.18em}#titleSettings select{max-width:330px;background:#0b1821;border:1px solid #3a5261;color:#d9e8ed;padding:12px;font-family:inherit}
#titleSettings p,.title-controls{font-size:11px;color:#7c959f;letter-spacing:.08em;line-height:2}.title-controls{margin-top:34px}
#bootVeil{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:90;transition:opacity .42s ease}#bootVeil.black{opacity:1;pointer-events:auto}
body.boot-departing #startScreen{opacity:0;pointer-events:none;transition-duration:.32s}
button:focus-visible{outline:1px solid #b2e5f0;outline-offset:5px}
@media(max-height:760px){.title-content{top:24%}#startScreen nav{margin-top:32px}.title-rule{margin-bottom:19px}.title-tagline{margin-top:17px}.boot-status{margin-top:17px}}
@media(max-width:700px){.title-content{left:7vw;width:88vw;top:32%}#startScreen h1{font-size:10vw}.title-top span:last-child{display:none}.title-footer{font-size:8px}.title-footer span:last-child{display:none}#startScreen nav{width:250px}.operation{letter-spacing:.6em}.title-tagline{font-size:8px}}
@media(prefers-reduced-motion:reduce){.title-content{animation:none!important}.boot-track:after,.initialize-track:after,#initializeLoad b{animation:none;display:none}*{scroll-behavior:auto}}
body.intro-complete.boot-active{background:#000 url('title-world.jpg') center/cover no-repeat}
#startScreen #playButton:hover,#startScreen #playButton:focus-visible{box-shadow:none;background:linear-gradient(90deg,#9cdbe22b,transparent);transform:none;border-left-color:#aeefff;filter:none;outline:none}
#startScreen:has(#titleSettings:not([hidden])) .title-content{visibility:hidden}
/* Public landing: current sanctuary artwork, quiet framing, one clear primary action. */
#initializeScreen{align-items:flex-start;padding:8vw;background:linear-gradient(90deg,#01050bee 0%,#020811a6 42%,#02060b22 100%),url('title-world.jpg?v=public-6') center/cover}
#initializeScreen .boot-overline{left:8vw;color:#98bdc9}
.initialize-title{text-align:left;text-indent:0;font-size:clamp(42px,6vw,96px);letter-spacing:.07em;text-shadow:0 4px 45px #000}
.initialize-title small{text-align:left;letter-spacing:.65em;color:#9cc5d2}
#initializeButton{background:#c5edf2;color:#07141c;border-color:#c5edf2;min-width:280px;text-align:left;margin-top:40px;font-weight:700;box-shadow:0 0 40px #82cbdf15}
#initializeButton span{color:#183e50;float:right}#initializeButton:hover{background:#e8fcff;box-shadow:0 0 30px #93d8ed30;transform:translateY(-2px)}
#initializeScreen p.landing-intro-copy{font:400 17px/1.8 'Chakra Petch',sans-serif;letter-spacing:.025em;color:#b4c6d0;margin-top:30px}
#startScreen{background:linear-gradient(90deg,#01060de6,#02081194 35%,transparent 70%),linear-gradient(0deg,#01060de8,transparent 40%)}
.title-content{left:6vw;top:24%;width:48vw}.title-rule{width:68px}.operation{font-size:12px}#startScreen h1{font-size:clamp(40px,5.5vw,88px)}
.title-description{font:400 clamp(15px,1.1vw,19px)/1.7 'Chakra Petch',sans-serif;color:#b0c4cf;margin:28px 0 0}
#startScreen nav{margin-top:32px;width:330px;gap:9px}#startScreen #playButton{background:#c5edf2;color:#091620;border:1px solid #d4f9ff;padding:20px 18px;font-weight:700}#startScreen #playButton .menu-index,#startScreen #playButton .menu-arrow{color:#365a69}#startScreen #playButton:hover,#startScreen #playButton:focus-visible{background:#e9fbff;color:#07141c;border-color:white}
.mission-card{position:absolute;right:6vw;bottom:12vh;width:310px;padding:24px 0 0;border-top:1px solid #a6d6e34d;text-align:left;color:#9cb8c5}.mission-card>span{font-size:9px;letter-spacing:.22em;color:#84b2c6}.mission-card h2{font:500 20px Orbitron,sans-serif;letter-spacing:.1em;color:#cfdee6;margin:17px 0;text-shadow:none}.mission-card p{font:14px/1.8 'Chakra Petch',sans-serif}.mission-card div{font-size:9px;letter-spacing:.08em;margin-top:20px}.mission-card b{font-weight:500;color:#d0e5ed;margin:0 7px 0 10px}.mission-card b:first-child{margin-left:0}
body.intro-complete.boot-active{background-image:url('title-shafts.jpg?v=1')}
@media(max-width:900px){.mission-card{display:none}.title-content{width:85vw}.initialize-title{font-size:10vw}}
@media(max-height:760px){.title-content{top:18%}.title-description{margin-top:18px}#startScreen nav{margin-top:22px}.title-rule{margin-bottom:20px}}
@media(max-width:600px){#initializeScreen{padding:7vw}.title-content{left:7vw;top:22%}.title-description{font-size:15px}#startScreen nav{width:280px}.title-tagline{letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){#initializeButton:hover{transform:none}}

/* Live renderer behind a lightweight letterboxed cinematic overlay. */
body.combat-intro-playing #cinematicIntro{background:transparent;pointer-events:none;border-top:6vh solid #000;border-bottom:6vh solid #000;box-sizing:border-box}
body.combat-intro-playing #skipIntro{pointer-events:auto}
body.combat-intro-playing #startScreen{visibility:hidden}
#introCaption{display:none;position:absolute;left:5vw;bottom:4vh;color:#deedf1;text-shadow:0 2px 12px #000;font-family:Orbitron,sans-serif;letter-spacing:.26em}
.combat-intro-playing #introCaption{display:grid;gap:10px}
#introCaption span{font-size:9px;color:#84bccd}#introCaption strong{font-size:clamp(14px,2vw,26px);font-weight:500}
#cinematicIntro.intro-ending{opacity:0;transition:opacity .35s}

.intro-cut{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1}#introCaption,#skipIntro{z-index:2}
body.combat-intro-playing #infernoLock{z-index:110}

#titleSettings{max-height:85vh;overflow-y:auto}.sound-settings{margin:18px 0;padding:14px 0;border-top:1px solid #29404d;border-bottom:1px solid #29404d}.sound-settings summary{cursor:pointer;color:#b8dce8;letter-spacing:.12em}.sound-settings label{display:flex!important;justify-content:space-between;margin-top:16px}.sound-settings input{width:100%;accent-color:#78cce8}.sound-settings output{color:#8cd6ec}.sound-settings small{display:block;color:#819ca9;margin:8px 0}.sound-settings button{font-size:11px;margin-top:14px}
@media (max-width:620px){#titleSettings{height:100dvh;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8vh 7vw 12vh;box-sizing:border-box}}
/* Approved opening art; retain the existing Cybernet button typography and states. */
#initializeScreen{box-sizing:border-box;padding:0 20px max(5vh,env(safe-area-inset-bottom));justify-content:flex-end;align-items:center;background:#02060b;isolation:isolate}
#initializeScreen::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/images/operation-cybernet-cover-v1.png') center top/cover no-repeat}
#initializeScreen .initialize-title,#initializeScreen .boot-overline,#initializeScreen>p,#initializeScreen #initializeLoad,#skipIntro{display:none}
#initializeScreen #initializeButton{margin:0;min-width:min(280px,100%);max-width:100%}
@media(max-height:500px){#initializeScreen{padding-bottom:max(16px,env(safe-area-inset-bottom))}#initializeScreen #initializeButton{padding:12px 20px}}