/* ── Cinematic cutscene stage (.cs1-*) ──
   Shared engine for all 3 cutscenes (cutscene-engine.js). All cutscenes use the same
   cs1-* class namespace — isolated per cutscene via JS scene data, not CSS prefixes.
   Font: Montserrat only (project rule: Exo 2 + Montserrat). */
.cs1-stage{position:fixed;inset:0;overflow:hidden;z-index:99990;background:#000;font-family:'Montserrat',sans-serif;color:#eef2f6}
.cs1-shaker{position:absolute;inset:0;will-change:transform}
.cs1-bg{position:absolute;inset:0;background-size:cover;background-position:center 36%}
.cs1-bg.stable{background-image:url('../assets/backgrounds/commander_bridge_stable.webp')}
.cs1-bg.damaged{background-image:url('../assets/backgrounds/commander_bridge_demaged.webp');opacity:0;transition:opacity .7s ease}
.cs1-stage.crashed .cs1-bg.damaged{opacity:1}
.cs1-warp{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 38%, rgba(120,180,255,.22), transparent 55%);transition:opacity .6s ease}
.cs1-bg.stable{animation:cs1-warppush 7s ease-in-out infinite alternate}
@keyframes cs1-warppush{from{transform:scale(1)}to{transform:scale(1.06)}}
.cs1-stage.crashed .cs1-warp{opacity:0}
.cs1-stage.crashed .cs1-bg.stable{animation:none}
.cs1-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, transparent 36%, rgba(5,8,13,.55) 70%, rgba(4,7,11,.92) 100%)}
.cs1-alarm{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(220,32,20,0) 45%, rgba(220,32,20,.55) 100%),linear-gradient(180deg, rgba(220,32,20,.20), transparent 22%, transparent 78%, rgba(220,32,20,.20))}
.cs1-alarm.on{animation:cs1-alarmpulse 1.7s ease-in-out infinite}
@keyframes cs1-alarmpulse{0%,100%{opacity:.12}50%{opacity:.62}}
.cs1-flash{position:absolute;inset:0;background:#dfe9ff;opacity:0;pointer-events:none}
.cs1-flash.fire{animation:cs1-flashk .55s ease-out}
@keyframes cs1-flashk{0%{opacity:.9}100%{opacity:0}}
.cs1-flash.soft{animation:cs1-flashsoft .5s ease-out}
@keyframes cs1-flashsoft{0%{opacity:.35}100%{opacity:0}}
.cs1-warp.pulse{animation:cs1-warppulse .9s ease-out}
@keyframes cs1-warppulse{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
.cs1-warpcanvas{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none;background:#000}
.cs1-warpcanvas.on{opacity:1}
.cs1-shaker.shaking{animation:cs1-shake 1.4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes cs1-shake{10%{transform:translate(-8px,4px) rotate(-.3deg)}20%{transform:translate(9px,-5px) rotate(.3deg)}30%{transform:translate(-11px,6px) rotate(-.4deg)}40%{transform:translate(10px,-4px) rotate(.3deg)}50%{transform:translate(-7px,5px)}60%{transform:translate(6px,-3px)}70%{transform:translate(-5px,2px)}80%{transform:translate(3px,-2px)}100%{transform:translate(0,0)}}
.cs1-panel{position:absolute;left:clamp(20px,2.6vw,52px);right:clamp(20px,2.6vw,52px);bottom:clamp(18px,2.8vh,40px);height:clamp(340px,52vh,580px);background:linear-gradient(180deg, rgba(9,13,20,.93), rgba(6,10,16,.985) 45%);cursor:pointer;display:flex;flex-direction:column;padding:clamp(26px,3.2vh,46px) clamp(38px,3.6vw,66px) clamp(16px,2vh,24px);clip-path:polygon(1.08% 0, 98.92% 0, 100% 3.4%, 100% 96.6%, 98.92% 100%, 1.08% 100%, 0 96.6%, 0 3.4%)}
.cs1-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
.cs1-hatch{position:absolute;top:8px;right:16px;width:78px;height:18px;z-index:7;background:repeating-linear-gradient(-45deg,#3a4655 0 1.5px,transparent 1.5px 8px);opacity:.5;-webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
.cs1-inner{flex:1;min-height:0;display:flex;position:relative;z-index:6}
.cs1-portrait-col{flex:0 0 clamp(230px,20vw,330px);display:flex;align-items:stretch}
.cs1-portrait{position:relative;flex:1;padding-top:clamp(14px,2.6vh,30px);background:linear-gradient(180deg,rgba(10,16,25,.55),rgba(7,11,17,.55));border:1px solid #1f2935;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cs1-portrait::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url('../assets/backgrounds/commander_bridge_stable.webp');background-size:cover;background-position:center;filter:blur(2px);transform:scale(1.12);opacity:.4}
.cs1-stage.crashed .cs1-portrait::before{background-image:url('../assets/backgrounds/commander_bridge_demaged.webp')}
.cs1-portrait img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;display:block;transition:opacity .28s ease}
.cs1-portrait::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,12,18,.96))}
.cs1-portrait-alarm{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 45%, rgba(255,40,24,0) 35%, rgba(220,30,18,.9) 100%),linear-gradient(180deg, rgba(220,30,18,.4), transparent 32%, transparent 68%, rgba(220,30,18,.4))}
.cs1-portrait-alarm.on{animation:cs1-alarmpulse 1.7s ease-in-out infinite}
.cs1-pc{position:absolute;width:40px;height:40px;border:2px solid var(--cs1-accent,#ff6a2c);z-index:3}
.cs1-pc.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cs1-pc.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.cs1-pc.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.cs1-pc.brr{bottom:-1px;right:-1px;border-left:0;border-top:0}
.cs1-content{flex:1;padding-left:clamp(32px,3vw,54px);position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.cs1-accent-line{width:clamp(42px,4vw,66px);height:3px;background:#ff6a2c;margin-bottom:clamp(10px,1.4vh,16px)}
.cs1-role{font-family:'Exo 2',sans-serif;font-weight:800;font-size:clamp(23px,2.4vw,38px);line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#eef2f6}
.cs1-ident{margin-top:9px;font-family:'Exo 2',sans-serif;font-weight:600;font-size:clamp(15px,1.5vw,22px);letter-spacing:.18em;color:#ff6a2c;text-transform:uppercase}
.cs1-dialogue{margin-top:clamp(16px,2.6vh,34px);flex:1;min-height:0;overflow-y:auto;padding-right:18px;display:flex;flex-direction:column;justify-content:center}
.cs1-dialogue p{font-family:'Montserrat',sans-serif;font-size:clamp(19px,1.95vw,30px);line-height:1.4;font-weight:400;color:#f2f5f8;max-width:64ch}
.cs1-dialogue::-webkit-scrollbar{width:4px}
.cs1-dialogue::-webkit-scrollbar-thumb{background:#3a4655;border-radius:2px}
.cs1-cursor{display:inline-block;width:10px;height:1em;background:#ff6a2c;vertical-align:-2px;margin-left:3px;animation:cs1-bl .8s steps(1) infinite}
@keyframes cs1-bl{50%{opacity:0}}
.cs1-top{position:absolute;top:6px;right:0;display:flex;gap:12px;align-items:stretch;z-index:2}
.cs1-skip{display:flex;align-items:center;gap:12px;padding:11px 26px;border:1px solid #3a4655;background:rgba(8,12,19,.5);cursor:pointer;font-family:'Exo 2',sans-serif}
.cs1-skip:hover{border-color:#ff6a2c}
.cs1-skip span{font-weight:700;letter-spacing:.18em;font-size:16px;color:#eef2f6}
.cs1-skip .chev{color:#ff6a2c;font-weight:700;font-size:15px;letter-spacing:-2px}
.cs1-footer{flex:0 0 auto;margin-top:clamp(12px,1.8vh,20px);padding-top:clamp(12px,1.6vh,16px);border-top:1px solid #1f2935;display:flex;align-items:center;justify-content:space-between;z-index:6;position:relative}
.cs1-brand{display:flex;align-items:center;gap:11px;font-family:'Exo 2',sans-serif;font-weight:700;letter-spacing:.16em;font-size:16px;color:#eef2f6}
.cs1-brand .drift{color:#ff6a2c}
.cs1-brand .ver{color:#525c6a;font-weight:600;font-size:12px;letter-spacing:.1em;margin-left:4px}
.cs1-foot-right{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.cs1-progress{font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;letter-spacing:.18em;color:#8893a1}
.cs1-progress b{color:#ff6a2c;font-weight:700}
.cs1-nav{display:flex;gap:8px}
.cs1-nav button{width:36px;height:30px;border:1px solid #3a4655;background:rgba(8,12,19,.5);color:#8893a1;font-family:'Exo 2',sans-serif;font-weight:700;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cs1-nav button:hover{border-color:#ff6a2c;color:#ff6a2c}
.cs1-nav button:disabled{opacity:.3;cursor:default}