/* A cinematic video introduction remains above the independently loading game. */
.cinematic-overlay{position:fixed;inset:0;z-index:240;overflow:hidden;isolation:isolate;background:#000;color:#fff;opacity:1;transition:opacity 400ms ease;touch-action:manipulation;font-family:var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif)}
.cinematic-overlay[hidden]{display:none!important}.cinematic-content{position:absolute;inset:0;opacity:1;transition:opacity 250ms ease}.cinematic-video,.cinematic-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#000;pointer-events:none}.cinematic-video[hidden]{display:none}.cinematic-still{z-index:1}
.cinematic-toolbar{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:12px;pointer-events:none;transition:opacity 250ms ease}.cinematic-toolbar button{min-height:44px;padding:12px 18px;border:1px solid #edd07f88;border-radius:6px;background:#06130edb;box-shadow:0 3px 14px #0008,inset 0 1px #ffe4a122;color:#ffedbb;font:400 11px/1.2 var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif);letter-spacing:.6px;pointer-events:auto;cursor:pointer}.cinematic-toolbar .cinematic-skip{margin-left:auto}.cinematic-toolbar button:hover{background:#253926;filter:none;transform:none}.cinematic-toolbar button:active{transform:none}.cinematic-overlay button:focus-visible{outline:3px solid #ffdf6a;outline-offset:4px}
.cinematic-buffer{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:90px 24px;background:radial-gradient(ellipse,#0b211aea,#000e 70%);text-align:center}.cinematic-buffer[hidden]{display:none!important}.cinematic-logo{display:block;width:min(540px,76vw);height:auto;max-height:29svh;object-fit:contain;transform:translateX(-10px);filter:drop-shadow(0 8px 16px #000a)}.cinematic-buffer-progress{position:relative;width:clamp(120px,20svh,170px);aspect-ratio:1}.cinematic-buffer-progress[hidden]{display:none}.cinematic-buffer-wheel{display:block;width:100%;height:100%;overflow:visible}.cinematic-buffer-shell{fill:#06160f;stroke:#aa8238;stroke-width:4}.cinematic-buffer-track{fill:none;stroke:#493e22;stroke-width:12}.cinematic-buffer-fill{fill:none;stroke:#ffd34d;stroke-width:12;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:80px 80px;filter:drop-shadow(0 0 3px #ffc52c77)}.cinematic-buffer-percent{position:absolute;inset:0;display:grid;place-items:center;color:#ffdc62;font-size:27px;font-weight:400;font-variant-numeric:tabular-nums;text-shadow:0 2px #533513}.cinematic-status{margin:0;color:#e9dfc0;font:400 12px/1.7 var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif);letter-spacing:.4px}
.cinematic-play{position:absolute;z-index:4;left:50%;top:72%;transform:translate(-50%,-50%);min-height:52px;padding:15px 28px;border:1px solid #fff0b6;border-radius:6px;background:linear-gradient(#ffedac,#dba846 51%,#ae751f 52%,#dfaf4e);box-shadow:inset 0 0 0 2px #7c531855,0 5px 20px #0009;color:#251606;font:400 15px/1.3 var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif);white-space:nowrap;cursor:pointer}.cinematic-play[hidden]{display:none}.cinematic-overlay .cinematic-play:hover,.cinematic-overlay .cinematic-play:active{transform:translate(-50%,-50%);filter:brightness(1.08)}
.cinematic-caption{position:absolute;z-index:3;left:50%;bottom:max(34px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:min(1000px,90vw);margin:0;padding:8px 14px;color:#fff;font:600 clamp(20px,2vw,29px)/1.4 Arial,Helvetica,sans-serif;text-align:center;-webkit-text-stroke:1px #000;paint-order:stroke fill;white-space:pre-line;text-wrap:balance;letter-spacing:.1px;text-shadow:-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,1px 1px 1px #000,0 2px 3px #000,0 0 8px #000;filter:drop-shadow(0 1px 1px #000);pointer-events:none}.cinematic-caption[hidden]{display:none}
.cinematic-overlay.is-finishing .cinematic-content,.cinematic-overlay.is-finishing .cinematic-toolbar{opacity:0;pointer-events:none}.cinematic-overlay.is-exiting{opacity:0;pointer-events:none}.cinematic-overlay[data-reduced="true"],.cinematic-overlay[data-reduced="true"] .cinematic-content,.cinematic-overlay[data-reduced="true"] .cinematic-toolbar{transition:none}
@media(max-width:600px){.cinematic-toolbar{top:max(16px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));gap:8px}.cinematic-toolbar button{padding:11px 12px;font-size:9px;letter-spacing:.3px}.cinematic-buffer{padding:85px 20px;gap:20px}.cinematic-logo{width:90vw;max-height:25svh}.cinematic-caption{bottom:max(28px,env(safe-area-inset-bottom));max-width:94vw;padding:6px 10px;font-size:18px;line-height:1.4}.cinematic-status{font-size:10px;max-width:280px}.cinematic-play{top:70%;font-size:13px}}
@media(max-height:500px){.cinematic-toolbar{top:12px}.cinematic-toolbar button{min-height:38px;padding:9px 12px}.cinematic-buffer{padding:58px 16px 20px;gap:8px}.cinematic-logo{max-height:25svh}.cinematic-buffer-progress{width:110px}.cinematic-status{font-size:9px}.cinematic-play{top:79%;min-height:42px;padding:10px 22px}.cinematic-caption{bottom:max(12px,env(safe-area-inset-bottom));font-size:18px}}
@media(prefers-reduced-motion:reduce){.cinematic-overlay,.cinematic-content,.cinematic-toolbar{transition:none}}

/* Orbageddon artwork and flight-console colours; video always keeps its original framing. */
.cinematic-overlay{z-index:1100;font-family:var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif)}
.cinematic-toolbar button{min-width:142px;border-color:#70c9ec7a;border-radius:3px;background:#061a2ade;color:#d4f4ff;box-shadow:0 3px 14px #0008,inset 0 1px #9ae6ff22;font-weight:700;letter-spacing:1px}
.cinematic-toolbar button:hover{background:#12394d;color:#fff}
.cinematic-toolbar .cinematic-skip{border-color:#f0a64caa;color:#ffe3b8}
.cinematic-overlay button:focus-visible{outline-color:#8eeaff}
.cinematic-buffer{background:radial-gradient(ellipse,#0c2940f2,#020910f5 72%)}
.cinematic-logo{transform:none;max-height:27svh;filter:drop-shadow(0 5px 22px #000b)}
.cinematic-buffer-progress{background:url('../../public/assets/ui-v12/loading-orb.png') center/84% 84% no-repeat}
.cinematic-buffer-shell{fill:transparent;stroke:#71d7ef99;stroke-width:2}
.cinematic-buffer-track{stroke:#183d4d;stroke-width:5}
.cinematic-buffer-fill{stroke:#ffbd5d;stroke-width:5;filter:drop-shadow(0 0 4px #ff9e3ab0)}
.cinematic-buffer-percent{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 9px;border:1px solid #99e1f566;border-radius:3px;background:#041320eb;color:#fff1d6;font-size:27px;font-weight:800;text-shadow:0 1px 5px #000}
.cinematic-status{color:#b5dbea;font-size:12px;font-weight:500;letter-spacing:.6px}
.cinematic-play{
 width:min(310px,82vw);min-width:0;height:106px;min-height:0;padding:10px 36px;border:0;border-radius:0;
 background:url('../../public/assets/ui-v2/primary-button.png') center/contain no-repeat;box-shadow:none;color:#fff0d6;font:800 clamp(14px,2.2vw,18px)/1.1 var(--font,'Bahnschrift','Arial Narrow',Arial,sans-serif);letter-spacing:1.2px;text-shadow:0 2px 3px #451100;
}
.cinematic-loading-toolbar{position:absolute;z-index:5;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(320px,calc(100vw - 44px));display:grid;grid-template-columns:1fr auto;gap:7px 14px;padding:9px 12px;background:#02101bba;color:#abd8e9;pointer-events:none;opacity:1;transition:opacity 250ms ease}
.cinematic-loading-label,.cinematic-loading-value{font-size:10px;font-weight:700;line-height:1;letter-spacing:1.3px;text-shadow:0 1px 3px #000}
.cinematic-loading-value{color:#d7f4ff;font-variant-numeric:tabular-nums}
.cinematic-loading-track{grid-column:1/-1;position:relative;height:2px;background:#91d4e02e;overflow:hidden}
.cinematic-loading-fill{display:block;width:0;height:100%;background:#83e0f7}
.cinematic-overlay[data-game-ready="true"] .cinematic-loading-label{color:#dbf8d0}
.cinematic-overlay[data-game-ready="true"] .cinematic-loading-fill{background:#a8e58d}
.cinematic-caption{bottom:max(82px,calc(env(safe-area-inset-bottom) + 60px))}
.cinematic-overlay.is-finishing .cinematic-loading-toolbar{opacity:0}
.cinematic-overlay[data-reduced="true"] .cinematic-loading-toolbar{transition:none}
@media(max-width:600px){
 .cinematic-toolbar button{min-width:126px;font-size:10px;min-height:44px;padding:10px 12px}
 .cinematic-logo{width:90vw;max-height:24svh}
 .cinematic-play{top:72%;height:92px;font-size:15px}
 .cinematic-loading-toolbar{bottom:max(16px,env(safe-area-inset-bottom));width:min(300px,calc(100vw - 36px))}
 .cinematic-loading-label,.cinematic-loading-value{font-size:9px;letter-spacing:1px}
 .cinematic-caption{bottom:max(76px,calc(env(safe-area-inset-bottom) + 56px))}
}
@media(max-height:500px){
 .cinematic-toolbar button{min-height:38px;padding:9px 12px}
 .cinematic-buffer{padding-top:54px;padding-bottom:55px}
 .cinematic-logo{max-height:21svh}
 .cinematic-buffer-progress{width:94px}
 .cinematic-buffer-percent{font-size:21px;padding:4px 7px}
 .cinematic-play{top:69%;height:80px}
 .cinematic-loading-toolbar{bottom:max(10px,env(safe-area-inset-bottom));gap:5px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.cinematic-loading-toolbar{transition:none}}

/* Reserve the recovery message above Play on compact landscape screens. */
@media(max-height:500px){
 .cinematic-overlay:has(.cinematic-play:not([hidden])) .cinematic-buffer{padding-bottom:135px}
}

/* The original game preloader remains the sole charging illustration and counter.
   The cinematic owns only its reserved action slot until a video frame is playing. */
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"]{background:transparent}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-video{opacity:0}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-buffer{padding:0;background:transparent}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-logo,
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-buffer-progress{display:none}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-play,
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-status{
 position:absolute;left:var(--cinematic-action-left,50%);top:var(--cinematic-action-top,80%);
 width:var(--cinematic-action-width,280px);height:var(--cinematic-action-height,50px);max-width:none;max-height:none;
 min-height:0;margin:0;transform:translate(-50%,-50%);box-sizing:border-box
}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-status{
 display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:11px;line-height:1.4;letter-spacing:.6px
}
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-play{
 padding:8px 20px;border:1px solid #f5a45b;border-top-color:#ffcf91;border-bottom-color:#a84429;border-radius:3px;
 background:linear-gradient(180deg,#d76539 0%,#af3d26 46%,#812b21 50%,#a83d29 100%);color:#fff1d1;
 font-size:clamp(12px,1.6vh,15px);font-weight:800;line-height:1.2;letter-spacing:2px;text-shadow:0 1px 2px #54170d;
 box-shadow:inset 0 0 0 2px #46180f66,inset 0 2px 0 #ffe6a445,0 5px 0 #321a15,0 8px 24px #ff71182b
}
/* Keep real game progress and detailed recovery announcements accessible, with no duplicate counter. */
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-loading-toolbar,
.cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"]:has(.cinematic-play:not([hidden])) .cinematic-status{
 position:absolute;left:0;top:0;bottom:auto;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
 clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;transform:none
}

/* On a small portrait display the original logo reaches the top edge.
   Compact controls sit beside its central orb, leaving the illustration untouched. */
@media(max-width:380px) and (max-height:650px) and (orientation:portrait){
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar{
  top:max(2px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));gap:12px
 }
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar button{
  display:flex;align-items:flex-start;justify-content:center;width:100px;min-width:0;min-height:44px;padding:3px 6px;font-size:10px;line-height:12px;letter-spacing:.5px;border:0;background:transparent;box-shadow:none;text-shadow:0 1px 3px #000
 }
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar button:focus-visible{
  outline:0;text-decoration:underline;text-underline-offset:3px;color:#fff
 }
}

/* Loading stays on the original preloader; the film has no extra progress strip. */
.cinematic-overlay .cinematic-loading-toolbar{
 position:absolute;left:0;top:0;bottom:auto;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
 clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;transform:none
}
.cinematic-caption{bottom:max(34px,env(safe-area-inset-bottom))}
@media(max-width:600px){.cinematic-caption{bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-height:500px){.cinematic-caption{bottom:max(12px,env(safe-area-inset-bottom))}}

/* Desktop and landscape captions follow the rendered film picture. */
.cinematic-overlay .cinematic-caption{
 left:var(--cinematic-caption-left,50%);
 bottom:max(var(--cinematic-caption-bottom,84px),calc(env(safe-area-inset-bottom) + 12px));
 max-width:min(1000px,calc(var(--cinematic-picture-width,100vw) - 32px));
 box-sizing:border-box
}
/* Portrait phones and tablets have room for captions below the complete video,
   including its encoded bars. Anchor the first line so cue changes never jump. */
@media(max-width:900px) and (orientation:portrait){
 .cinematic-overlay .cinematic-caption{
  top:calc(var(--cinematic-caption-below,65vh) + clamp(12px,2vh,24px));bottom:auto;
  max-width:min(600px,calc(100% - 40px));padding:0;
  font-size:clamp(18px,4.6vw,22px);line-height:1.45;
  -webkit-text-stroke:0;text-shadow:none;filter:none
 }
}
/* Recovery uses the original illustrated charge screen, including after playback
   has started. Captions belong only to a decoded, actively playing film frame. */
.cinematic-overlay:not([data-phase="playing"]) .cinematic-caption{display:none}
.cinematic-overlay[data-load-failed="true"]{pointer-events:none}
.cinematic-overlay[data-load-failed="true"] .cinematic-toolbar{pointer-events:none}
.cinematic-overlay[data-load-failed="true"] .cinematic-toolbar button{pointer-events:auto}
.cinematic-overlay[data-load-failed="true"] .cinematic-play,
.cinematic-overlay[data-load-failed="true"] .cinematic-status{display:none!important}

/* Controls always occupy their own row above the illustration on phones. */
.cinematic-toolbar[hidden]{display:none!important}
@media(max-width:600px) and (orientation:portrait){
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar{
  top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));gap:12px
 }
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar button{
  display:flex;align-items:center;justify-content:center;width:auto;min-width:112px;min-height:44px;padding:10px 12px;font-size:10px;line-height:12px;letter-spacing:1px;
  border:1px solid #70c9ec7a;border-radius:3px;background:#061a2ade;box-shadow:0 3px 14px #0008,inset 0 1px #9ae6ff22;text-shadow:0 1px 3px #000
 }
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar .cinematic-skip{border-color:#f0a64caa}
 .cinematic-overlay[data-shared-loader="true"][data-loading-surface="true"] .cinematic-toolbar button:focus-visible{outline:2px solid #8eeaff;outline-offset:3px;text-decoration:none}
}