/* Product screens share the 1920×1080 scene fitted by fitScene(). */
.cinematic-layout {
  --pu-cyan: #74dcff;
  --pu-ice: #dff8ff;
  --pu-gold: #f4c975;
  --pu-line: #71d9ffb8;
  --pu-deep: #02101fc9;
  --pu-cut: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px);
}
.cinematic-layout[data-screen="map"] .space-backdrop,
.cinematic-layout[data-screen="leaderboard"] .space-backdrop,
.cinematic-layout[data-screen="skins"] .space-backdrop {
  background: linear-gradient(90deg,#010815a8,#06152962 52%,#010a16b8), url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") center/cover;
  filter: saturate(.9) brightness(.72) !important;
}
.cinematic-layout:is([data-screen="map"],[data-screen="leaderboard"],[data-screen="skins"]) .header { top: 0; left: 35px; height: 122px; }
.cinematic-layout:is([data-screen="map"],[data-screen="leaderboard"],[data-screen="skins"]) .brand { width: 325px; height: 115px; }
.cinematic-layout:is([data-screen="map"],[data-screen="leaderboard"],[data-screen="skins"]) .header-right { top: 32px; }
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) {
  position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden;
  background: radial-gradient(circle at 50% 30%, #07577922, transparent 56%);
}
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) :is(.section-heading,.map-heading) {
  position:absolute; top:100px; left:370px; right:52px; height:105px; padding:0;
}
.cinematic-layout :is(.map-heading h1,.section-heading h1) {
  font-size:54px; line-height:1.1; margin:4px 0 0; font-weight:900; letter-spacing:8px;
  color:var(--pu-ice); text-shadow:0 3px 0 #173d56, 0 7px 0 #8d6a3a, 0 0 24px #4acaff;
}
.cinematic-layout :is(.map-heading,.section-heading) .eyebrow { color:var(--pu-gold); letter-spacing:6px; font-size:16px; }
.cinematic-layout .section-heading p { font-size:16px; margin:4px 0; color:#bde2ee; }
.cinematic-layout .map-heading > button { position:absolute; right:4px; top:18px; }
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) .primary,
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) .secondary,
.cinematic-layout .modal :is(.primary,.secondary) {
  clip-path:var(--pu-cut); border-radius:0; font-weight:750; letter-spacing:3px;
  text-shadow:0 1px 4px #001;
}
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) .primary,
.cinematic-layout .modal .primary {
  border:1px solid #ffe3a8; color:#fff2c9;
  background:linear-gradient(175deg,#fff0b977,#9d6724 23%,#322010 65%,#b88b3e);
  box-shadow:inset 0 0 0 2px #f6c76e75, inset 0 5px 16px #fff3a855,0 0 30px #ffcb5355;
}
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) .secondary,
.cinematic-layout .modal .secondary {
  border:1px solid #7fe7ff; color:#ddf6ff;
  background:linear-gradient(170deg,#236992a6,#04182e 65%,#14507a);
  box-shadow:inset 0 0 0 2px #478fb65c,0 0 20px #1cbaff4d;
}
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen,.modal) button:hover:not(:disabled) { filter:brightness(1.27); }
.cinematic-layout :is(.map-screen,.records-screen,.skins-screen) .text-button { color:#9ceeff; font-size:16px; }

/* Star atlas — 20 live stage nodes, with the chosen stage held at right. */
.cinematic-layout .map-heading { left:365px; right:48px; }
.cinematic-layout .chapter-tabs { position:absolute; left:35px; top:213px; width:275px; display:flex; flex-direction:column; gap:11px; margin:0; }
.cinematic-layout .chapter-tabs:before { content:'星域航线 / CHAPTERS'; color:#a6eaff; font:15px var(--mono); letter-spacing:3px; margin:0 0 6px 8px; }
.cinematic-layout .chapter-tabs button { height:117px; display:grid; align-content:center; padding:16px 26px; border:1px solid #5fb7de; background:linear-gradient(120deg,#16405bdb,#031526e8); box-shadow:inset 0 0 0 2px #0b3550,0 9px 20px #0009; }
.cinematic-layout .chapter-tabs button.active { border-color:var(--pu-gold); box-shadow:inset 0 0 0 2px #c08b3d,0 0 20px #ffce6280; }
.cinematic-layout .chapter-tabs button small { font-size:13px; }
.cinematic-layout .chapter-tabs button b { font-size:23px; }
.cinematic-layout .chapter-tabs button span { font-size:14px; }
.cinematic-layout .library-title { position:absolute; left:343px; top:190px; width:850px; height:48px; margin:0; }
.cinematic-layout .library-title h2 { color:#c8efff; font-size:24px; letter-spacing:3px; }
.cinematic-layout .filters button { font-size:14px; padding:8px 14px; border:1px solid #427692; background:#061d32cc; }
.cinematic-layout .filters button.active { border-color:var(--pu-gold); color:var(--pu-gold); background:#503917aa; }
.cinematic-layout .library-layout { display:contents; }
.cinematic-layout .star-map { position:absolute; left:338px; top:251px; width:856px; height:714px; min-height:0; padding:8px 9px; justify-content:flex-start; border:1px solid #5dc9f0; box-shadow:inset 0 0 45px #0b5a86a6,0 0 0 4px #061724,0 0 40px #000c; background:radial-gradient(circle at 50% 40%,#1e72904d,#020e1cdd 67%),url("../assets/cinematic/deck.webp?v=track-hd-power") center 45%/cover; clip-path:var(--pu-cut); }
.cinematic-layout .star-map:before { content:''; position:absolute; inset:3px; border:1px solid #e0c17e79; clip-path:var(--pu-cut); pointer-events:none; }
.cinematic-layout .map-orbit { width:94%; height:23%; top:12%; border-color:#94dfff9e; }
.cinematic-layout .map-orbit.orbit-b { top:54%; }
.cinematic-layout .level-grid,
.cinematic-layout .level-grid:not(.expanded-map),
.cinematic-layout .level-grid.expanded-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,220px); grid-auto-flow:row; gap:30px 12px; padding:20px 30px; height:642px; align-content:center; }
.cinematic-layout .level-grid .level-card:nth-child(n),
.cinematic-layout .level-grid:not(.expanded-map) .level-card:nth-child(n) { grid-column:auto; grid-row:auto; margin:0; width:100%; min-width:0; justify-self:stretch; height:220px; padding:6px 3px; }
.cinematic-layout .level-card:not(.chapter-current) { opacity:.68; }
.cinematic-layout .level-card.selected { opacity:1; }
.cinematic-layout .level-card.selected:before { top:-18px; z-index:3; }
.cinematic-layout .level-card .cover-wrap { height:150px; }
.cinematic-layout .level-card .cover-wrap img { width:150px; height:150px; }
.cinematic-layout .level-card .cover-wrap:after { width:174px; height:47px; top:66%; }
.cinematic-layout .level-card .card-top { left:16px; right:16px; font-size:8px; }
.cinematic-layout .level-card .card-tag { display:none; }
.cinematic-layout .level-card .card-heading h3 { font-size:22px; font-weight:700; line-height:1.15; }
.cinematic-layout .level-card .card-star { font-size:16px; line-height:1.2; }
.cinematic-layout .level-card .card-body p,.cinematic-layout .level-card .card-choice { display:none; }
.cinematic-layout .map-caption { position:absolute; bottom:0; left:12px; right:12px; font-size:14px; padding:7px 12px; letter-spacing:1px; background:#041629d9; }
.cinematic-layout .selection-panel { position:absolute; left:1219px; top:190px; width:655px; height:779px; padding:10px; overflow:hidden; display:flex; flex-direction:column; border:1px solid #91e5ff; box-shadow:inset 0 0 0 3px #0b4265,0 0 0 5px #061522,0 0 45px #39bcff55; background:linear-gradient(#0c2d46df,#02111fee), url("../assets/cinematic/panel.svg") center/100% 100%; clip-path:var(--pu-cut); }
.cinematic-layout .selection-panel > img { display:block; flex:0 0 185px; height:185px; width:100%; object-fit:cover; mask-image:none; border:1px solid #6fbed9; }
.cinematic-layout .selection-content { padding:8px 22px 14px; flex:1; min-height:0; display:flex; flex-direction:column; }
.cinematic-layout .selection-content > .eyebrow { font-size:13px; color:var(--pu-gold); }
.cinematic-layout .selection-content h2 { font-size:39px; line-height:1.1; margin:2px 0 4px; text-shadow:0 0 17px #3ee1ff8a; }
.cinematic-layout .selection-content > p { font-size:14px; line-height:1.45; min-height:0; margin:3px 0 6px; }
.cinematic-layout .mechanic-preview { margin:5px 0; padding:8px 0; font-size:14px; }
.cinematic-layout .selection-content > #selectedDesc { display:none; }
.cinematic-layout .mechanic-preview > p { display:block; font-size:14px; line-height:1.55; margin:5px 0; }
.cinematic-layout .field-label { font-size:15px; margin:5px 0 4px; }
.cinematic-layout .field-label span { font-size:11px; }
.cinematic-layout .mode-select { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cinematic-layout .mode-select button { height:58px; min-height:58px; min-width:0; padding:5px 8px; line-height:1.2; border:1px solid #5ea4c2; background:#08233a; }
.cinematic-layout .mode-select button.active { border-color:var(--pu-gold); background:linear-gradient(125deg,#715028,#102a3e); box-shadow:inset 0 0 10px #ffdb8755; }
.cinematic-layout .mode-select b { font-size:17px; }
.cinematic-layout .mode-select small { font-size:11px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
.cinematic-layout .difficulty-select { gap:6px; }
.cinematic-layout .difficulty-select button { font-size:15px; min-height:39px; border:1px solid #4e91b2; background:#071c31; }
.cinematic-layout .difficulty-select button.active { color:var(--pu-gold); border-color:var(--pu-gold); background:#49371e; }
.cinematic-layout .config-line,.cinematic-layout .rule-note { font-size:12px; line-height:1.4; min-height:0; margin:5px 0; }
.cinematic-layout .selection-content .rule-note { flex:1; min-height:42px; padding:8px 10px; overflow:auto; }
.cinematic-layout .selection-panel .start-button { height:61px; min-height:61px; margin:8px 0 0; width:100%; font-size:25px; }
.cinematic-layout .theme-caption { display:none; }
.cinematic-layout .selection-foot { flex-shrink:0; margin:4px 0 0; font-size:12px; }
.cinematic-layout .selection-foot button { font-size:12px; }
.cinematic-layout .map-screen .home-footer { position:absolute; left:38px; right:46px; bottom:80px; font-size:15px; }

/* Local leaderboard and its actual personal best. */
.cinematic-layout .record-honor { position:absolute; left:38px; top:235px; width:350px; height:600px; padding:30px; border:1px solid #85d7f5; background:linear-gradient(140deg,#0e3953ed,#031322ed),url("../assets/cinematic/panel.svg") center/100% 100%; box-shadow:inset 0 0 0 3px #123c54,0 0 28px #0e87ba88; clip-path:var(--pu-cut); text-align:center; }
.cinematic-layout .record-honor .eyebrow { color:var(--pu-gold); font-size:12px; letter-spacing:2px; }
.cinematic-layout .honor-emblem { height:180px; font-size:135px; line-height:180px; color:#f5cd7a; text-shadow:0 0 34px #fdc85b,0 7px 0 #58380c; }
.cinematic-layout .record-honor h2 { font-size:27px; color:#d9faff; margin:0; }
.cinematic-layout .record-honor strong { display:block; font:italic 43px var(--mono); color:#99eaff; text-shadow:0 0 17px #2bc6ff; }
.cinematic-layout .record-honor p { min-height:45px; color:#c4e8f2; font-size:14px; }
.cinematic-layout .honor-data { border-top:1px solid #5396b4; padding:15px 0; font-size:14px; color:#aacddd; }
.cinematic-layout .record-honor button { width:100%; margin-top:12px; font-size:18px; }
.cinematic-layout .record-filters { position:absolute; left:420px; top:210px; width:1450px; height:75px; margin:0; padding:9px 20px; border:1px solid #6dbed9; background:#06182dea; box-shadow:inset 0 0 0 2px #175371; }
.cinematic-layout .record-filters label { font-size:16px; }
.cinematic-layout .record-filters select { font-size:15px; min-height:44px; border:1px solid #66c6e6; background:#05243a; color:#ddf5ff; }
.cinematic-layout .record-filters button { height:48px; font-size:15px; }
.cinematic-layout .podium { position:absolute; left:425px; top:309px; width:1440px; height:132px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; }
.cinematic-layout .podium-card { min-height:0; padding:10px 18px; border:1px solid #65b4d6; background:linear-gradient(115deg,#14435aca,#031828ed); box-shadow:inset 0 0 24px #2a79904d; }
.cinematic-layout .podium-card:first-child { border-color:#ffdb8d; background:linear-gradient(115deg,#5e451dbd,#071b29ed); }
.cinematic-layout .podium-card h3 { font-size:19px; margin:0; }
.cinematic-layout .podium-card strong { font-size:26px; color:var(--pu-gold); }
.cinematic-layout .podium-card p,.cinematic-layout .podium-card small { font-size:10px; margin:0; }
.cinematic-layout .podium-rank { font-size:36px; color:var(--pu-gold); }
.cinematic-layout .records-screen > .record-table-wrap { position:absolute; left:421px; top:455px; width:1448px; height:422px; margin:0; overflow:auto; border:1px solid #85d8f1; background:#031626e8; box-shadow:inset 0 0 35px #0e678f5e,0 0 0 4px #061727; }
.cinematic-layout .record-table { font-size:15px; }
.cinematic-layout .record-table th { position:sticky; top:0; z-index:1; background:#0d3851; color:#d9f3ff; font-size:15px; }
.cinematic-layout .record-table td { padding:9px 15px; }
.cinematic-layout .record-table tbody tr:nth-child(-n+3) { background:linear-gradient(90deg,#b98b2f2e,#10436739); }
.cinematic-layout .empty-state { min-height:380px; display:flex; justify-content:center; font-size:21px; }
.cinematic-layout .record-table-wrap .empty-state strong { font-size:25px; }
.cinematic-layout .records-foot { position:absolute; left:425px; top:887px; width:1440px; font-size:13px; }
.cinematic-layout .records-actions { position:absolute; left:425px; top:928px; margin:0; gap:15px; }
.cinematic-layout .records-actions button { min-width:250px; font-size:15px; height:55px; }
.cinematic-layout .records-screen :is(#legacyPanel,#archiveV5) { position:absolute; left:425px; top:987px; width:900px; font-size:12px; z-index:2; }

/* Workshop: category rail, eight authentic looks, live equipped preview. */
.cinematic-layout .workshop-categories { position:absolute; left:37px; top:232px; width:277px; display:flex; flex-direction:column; gap:15px; }
.cinematic-layout .workshop-categories button { height:110px; text-align:left; padding:16px 20px; border:1px solid #67c2e5; color:#d0f1ff; background:linear-gradient(130deg,#164460dd,#04182ce5); clip-path:var(--pu-cut); font-size:23px; letter-spacing:2px; }
.cinematic-layout .workshop-categories button.active { color:#ffe9b1; border-color:#ffd888; background:linear-gradient(125deg,#795322dc,#11263b); box-shadow:inset 0 0 20px #ffce6544,0 0 24px #ffca5866; }
.cinematic-layout .workshop-categories button span { color:var(--pu-gold); margin-right:10px; }
.cinematic-layout .workshop-categories button small { display:block; font:11px var(--mono); letter-spacing:2px; margin-left:43px; }
.cinematic-layout .workshop-categories-foot { margin:45px 20px; font-size:17px; line-height:2; letter-spacing:4px; color:#a7d8e8; }
.cinematic-layout .workshop-layout { display:contents; }
.cinematic-layout .workshop-inventory { position:absolute; left:338px; top:225px; width:810px; height:710px; padding:23px; border:1px solid #7cdbef; background:#04192bdc; box-shadow:inset 0 0 0 3px #164466,0 0 34px #0db7fa55; clip-path:var(--pu-cut); }
.cinematic-layout .workshop-bar { font-size:22px; height:55px; padding:2px 0 12px; }
.cinematic-layout .workshop-bar b { font-size:17px; }
.cinematic-layout .workshop-bar > span:last-child { font-size:13px; }
.cinematic-layout .skin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:20px; }
.cinematic-layout .skin-card { height:278px; padding:15px 7px; border:1px solid #63b7d8; background:linear-gradient(#14374bca,#020e1be8); }
.cinematic-layout .skin-card .skin-mini { width:148px; height:148px; max-width:100%; margin:4px auto; box-shadow:0 0 18px #38bdfb88; }
.cinematic-layout .skin-card h3 { font-size:20px; margin:4px 0 0; }
.cinematic-layout .skin-card p { font-size:11px; margin:3px 0; }
.cinematic-layout .skin-card > span { font-size:12px; color:var(--pu-gold); }
.cinematic-layout .skin-card.active { border-color:var(--pu-gold); box-shadow:inset 0 0 25px #e5b45d61,0 0 18px #ddb75a55; }
.cinematic-layout .skin-showcase { position:absolute; left:1172px; top:225px; width:703px; height:710px; border:1px solid #83dcfb; background:linear-gradient(#0b2d45d9,#021326ec),url("../assets/cinematic/panel.svg") center/100% 100%; box-shadow:inset 0 0 0 3px #185b7a,0 0 35px #27c3ff59; clip-path:var(--pu-cut); padding:22px 35px; }
.cinematic-layout .skin-orbit-stage { height:390px; position:relative; background:radial-gradient(circle at center,#139dd046,transparent 58%),url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") center/cover; border:1px solid #558daa; }
.cinematic-layout #skinPreview { visibility:hidden; }
.cinematic-layout #skinFxPreview { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.cinematic-layout #skinEffectDesc { margin:2px 0 5px; color:#f6d78e; font-size:13px; letter-spacing:1px; }
.cinematic-layout .skin-orb { width:288px; height:288px; box-shadow:0 0 35px #48d5ff73; }
.cinematic-layout .skin-showcase .eyebrow { font-size:13px; }
.cinematic-layout .skin-showcase h2 { font-size:33px; }
.cinematic-layout .skin-showcase p { font-size:14px; }
.cinematic-layout .skin-showcase .primary { display:inline-flex; min-width:250px; height:57px; font-size:20px; margin:7px 7px 0; }
.cinematic-layout .skin-showcase .secondary { min-width:230px; height:57px; font-size:15px; }
.cinematic-layout .skin-showcase .text-button { margin:0; font-size:14px; }
.cinematic-layout .preview-parts { margin-top:4px; padding-top:8px; font-size:13px; }
.cinematic-layout .workshop-info { height:590px; overflow:auto; padding:26px 12px; font-size:18px; }
.cinematic-layout .workshop-info h3 { font-size:26px; color:var(--pu-gold); }
.cinematic-layout .workshop-info p { color:#c1e8f2; }
.cinematic-layout .workshop-info ul { line-height:2.6; }

/* Modal stage language follows the pause, settings, tutorial and report references. */
.cinematic-layout .modal { background:linear-gradient(90deg,#020a14ef,#041629ae,#010812ed); backdrop-filter:blur(11px); }
.cinematic-layout .modal:before { content:''; position:absolute; inset:0; z-index:-1; background:url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") center/cover; opacity:.23; }
.cinematic-layout[data-screen="play"] .modal:before { background:linear-gradient(#02091689,#02091689),var(--active-sector-scene) center/cover no-repeat; opacity:.5; }
.cinematic-layout .modal .dialog { background:linear-gradient(145deg,#10354fe8,#031321f2 60%,#092742ee); border:1px solid #8bdcf9; clip-path:var(--pu-cut); box-shadow:inset 0 0 0 4px #135174,0 0 0 8px #020c1d,0 0 60px #1c9cdb77; }
.cinematic-layout .pause-dialog { position:relative; width:1190px !important; height:800px; max-height:800px; padding:42px 485px 32px 80px !important; text-align:center; }
.cinematic-layout .pause-dialog > .eyebrow { color:var(--pu-gold); font-size:20px; letter-spacing:8px; }
.cinematic-layout .pause-dialog .pause-symbol { display:none; }
.cinematic-layout .pause-dialog h2 { font-size:78px !important; margin:5px 0 3px; color:#def6ff; font-style:italic; text-shadow:0 4px 0 #236184,0 8px 0 #ba8b46,0 0 33px #3ccaff; }
.cinematic-layout .pause-dialog > p { font-size:14px !important; margin:0 0 15px; }
.cinematic-layout .pause-dialog > button { height:64px !important; min-height:64px !important; margin:9px 0 0 !important; font-size:20px !important; }
.cinematic-layout .pause-dialog > button.primary { height:78px !important; font-size:26px !important; }
.cinematic-layout .pause-dialog > .text-button { color:#a6eaff; background:none; border:none; box-shadow:none; font-size:15px !important; height:44px !important; min-height:44px !important; }
.cinematic-layout .pause-report { position:absolute; right:38px; top:150px; width:387px; height:580px; text-align:left; padding:25px; border:1px solid #75cde7; background:#041b31eb; box-shadow:inset 0 0 0 3px #17516b; }
.cinematic-layout .pause-report .eyebrow { color:var(--pu-gold); font-size:13px; }
.cinematic-layout .pause-report > div:not(.eyebrow) { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid #3a7894; font-size:17px; }
.cinematic-layout .pause-report strong { font:700 26px var(--mono); color:#a2eeff; }
.cinematic-layout .pause-report .pause-report-mission { display:block !important; }
.cinematic-layout .pause-report-mission strong,.cinematic-layout .pause-report-mission small { display:block; margin-top:10px; }
.cinematic-layout .pause-report-mission small { font-size:14px; color:#c4e4eb; line-height:1.6; }
.cinematic-layout .settings-dialog { width:1300px; height:820px; max-height:820px; padding:28px 45px 30px 330px; position:relative; overflow:auto; }
.cinematic-layout .settings-dialog .dialog-heading { margin:0 0 18px; height:90px; }
.cinematic-layout .settings-dialog .dialog-heading .eyebrow { color:var(--pu-gold); font-size:15px; }
.cinematic-layout .settings-dialog .dialog-heading h2 { font-size:51px; margin:0; }
.cinematic-layout .settings-tabs { position:absolute; left:25px; top:135px; width:270px; display:flex; flex-direction:column; gap:10px; }
.cinematic-layout .settings-tabs button { text-align:left; height:82px; padding:12px 17px; border:1px solid #6dc2df; color:#d1f0f9; background:#0a2b42; clip-path:var(--pu-cut); font-size:18px; }
.cinematic-layout .settings-tabs button small { display:block; font:11px var(--mono); margin-left:32px; letter-spacing:3px; }
.cinematic-layout .settings-tabs button.active { color:var(--pu-gold); border-color:var(--pu-gold); background:#4e391ddc; }
.cinematic-layout .settings-tabs .settings-help { font-size:14px; height:55px; }
.cinematic-layout .settings-dialog > [data-pane]:not(.active-pane) { display:none !important; }
.cinematic-layout .settings-dialog > .setting-row { height:90px; margin:7px 0; padding:15px 22px; border:1px solid #548eaa; background:#08253add; }
.cinematic-layout .setting-row b { font-size:20px; }
.cinematic-layout .setting-row small { font-size:13px; }
.cinematic-layout .setting-row input[type="checkbox"] { width:27px; height:27px; }
.cinematic-layout .setting-row input[type="range"] { width:350px; }
.cinematic-layout .setting-row #pilotInput { width:260px; font-size:17px; }
.cinematic-layout .settings-dialog > .settings-buttons { margin:12px 0; }
.cinematic-layout .settings-buttons button { font-size:15px; height:55px; }
.cinematic-layout .settings-dialog > .import-option { font-size:16px; margin:15px 0; }
.cinematic-layout .settings-dialog > .small-note { font-size:15px; line-height:1.7; }
.cinematic-layout .settings-dialog > .primary { position:absolute; right:45px; bottom:26px; width:220px; height:58px; font-size:17px; }
.cinematic-layout .help-dialog { position:relative; width:1660px; height:900px; max-height:900px; padding:25px; overflow:hidden; }
.cinematic-layout .help-dialog .dialog-heading { height:120px; justify-content:center; }
.cinematic-layout .help-dialog .dialog-heading .eyebrow { color:var(--pu-gold); text-align:center; font-size:15px; }
.cinematic-layout .help-dialog .dialog-heading h2 { font-size:62px; text-align:center; margin:0; }
.cinematic-layout .help-dialog .dialog-heading .close { position:absolute; right:22px; top:20px; width:45px; height:45px; }
.cinematic-layout .help-controls { position:absolute; left:24px; top:150px; width:385px; height:625px; display:flex; flex-direction:column; gap:8px; margin:0; overflow:auto; }
.cinematic-layout .help-controls > div { min-height:93px; padding:10px 15px; border:1px solid #6bc5e4; background:#082c44e6; clip-path:var(--pu-cut); }
.cinematic-layout .help-controls kbd { color:var(--pu-gold); font-size:12px; }
.cinematic-layout .help-controls b { display:inline; margin:0 0 0 10px; font-size:18px; }
.cinematic-layout .help-controls p { font-size:12px; margin:2px 0; line-height:1.4; }
.cinematic-layout .help-visual { position:absolute; left:430px; top:150px; width:745px; height:625px; overflow:hidden; border:1px solid #8cdeff; box-shadow:inset 0 0 0 3px #0b5371; }
.cinematic-layout .help-visual img { width:100%; height:100%; object-fit:cover; }
.cinematic-layout .help-callout { position:absolute; padding:8px 12px; border:1px solid #a6e8ff; background:#05263be8; color:#e2f8ff; font-size:15px; text-shadow:0 0 9px #20b5ed; }
.cinematic-layout .callout-score { top:20px; left:25px; }
.cinematic-layout .callout-pulse { top:220px; left:20px; }
.cinematic-layout .callout-flip { bottom:25px; left:180px; }
.cinematic-layout .callout-launch { bottom:130px; right:20px; }
.cinematic-layout .help-copy { position:absolute; right:24px; top:150px; width:435px; height:625px; padding:18px; overflow:auto; border:1px solid #74cee7; background:#061e31e8; }
.cinematic-layout .help-copy h3 { color:var(--pu-gold); font-size:22px; margin:4px 0; }
.cinematic-layout .help-copy p { font-size:14px; line-height:1.55; margin:6px 0 12px; }
.cinematic-layout .help-dialog > .primary { position:absolute; right:30px; bottom:24px; width:310px; height:65px; margin:0; font-size:20px; }
.cinematic-layout .result-dialog { width:1510px; height:800px; max-height:800px; grid-template-columns:44% 56%; padding:0; border-color:#e5bd71 !important; }
.cinematic-layout .result-cover { min-height:0; padding:30px; justify-content:center; background-size:cover; }
.cinematic-layout .result-cover:before { background:linear-gradient(#020d1bbc,#010811dd); }
.cinematic-layout .result-cover .eyebrow { font-size:17px; letter-spacing:3px; }
.cinematic-layout .result-cover h2 { font-size:80px; line-height:1.15; font-style:italic; font-weight:900; color:#fff0c2; text-shadow:0 4px 0 #96643c,0 0 32px #ffc955; }
.cinematic-layout .result-cover .medal { font-size:140px; color:#ffe096; }
.cinematic-layout .result-stars { font-size:62px; }
.cinematic-layout .result-cover-caption { font-size:20px; color:#d2eef6; letter-spacing:3px; }
.cinematic-layout #resultModal[data-outcome="lost"] .result-cover h2 { color:#fff0f0; text-shadow:0 4px 0 #99362c,0 0 36px #ff3d37; }
.cinematic-layout #resultModal[data-outcome="lost"] .result-cover .medal { color:#ff685d; }
.cinematic-layout .result-body { min-height:0; height:100%; padding:30px 42px; display:flex; flex-direction:column; overflow:hidden; }
.cinematic-layout .result-score-row label { font-size:19px; }
.cinematic-layout .result-score-row strong { font-size:74px; }
.cinematic-layout .result-body > p { font-size:17px; }
.cinematic-layout .result-stats { margin:14px 0; }
.cinematic-layout .result-stats span { font-size:15px; }
.cinematic-layout .result-stats b { font-size:27px; }
.cinematic-layout .result-details { min-height:0; max-height:none; flex:1 1 auto; overflow:auto; font-size:17px; line-height:1.6; }
.cinematic-layout .result-details .objective { margin:8px 0; font-size:17px; }
.cinematic-layout .rank-receipt { flex-shrink:0; margin:7px 0; padding:7px 10px; font-size:13px; }
.cinematic-layout .result-actions { display:grid; flex-shrink:0; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; }
.cinematic-layout .result-actions button { min-height:49px; font-size:16px; }
.cinematic-layout .result-actions #resultMain { grid-column:1 / -1; font-size:23px; }
.cinematic-layout .result-actions #resultExport { min-width:0; }

/* Boss warning stays in the right HUD lane; the table remains unobstructed. */
body.cinematic-layout.boss-fight #earthHUD .earth-progress { height:220px; }
body.cinematic-layout.boss-fight #earthHUD .earth-mini-scene [data-earth="description"] { font-size:13px; line-height:1.55; letter-spacing:1px; text-align:left; }
body.cinematic-layout.boss-fight #earthHUD .earth-world { margin:7px 0; gap:10px; }
body.cinematic-layout.boss-fight #earthHUD .earth-world img { width:60px; height:60px; }
body.cinematic-layout.boss-fight #earthHUD .earth-world small { display:none; }
body.cinematic-layout.boss-fight #earthHUD .earth-progress ol { margin:5px 0; }
body.cinematic-layout.boss-fight #earthHUD .earth-progress li { padding:3px 4px; font-size:13px; }
body.cinematic-layout.boss-fight #earthHUD .earth-progress li:last-child { display:none; }
body.cinematic-layout.boss-fight #earthHUD .earth-message { height:50px; padding:5px 12px; }
body.cinematic-layout.boss-fight #earthHUD .earth-message span { display:none; }
body.cinematic-layout.boss-fight #earthHUD .sector-boss-bar { left:auto; right:29px; top:845px; width:382px; padding:10px 20px 11px; z-index:4; }
body.cinematic-layout.boss-fight #earthHUD .sector-boss-bar small { font-size:11px; letter-spacing:1px; }
body.cinematic-layout.boss-fight #earthHUD .sector-boss-bar strong { font-size:19px; margin:2px 0 6px; letter-spacing:2px; }
body.cinematic-layout.boss-fight #earthHUD .sector-boss-bar > div { height:8px; }
body.cinematic-layout.boss-fight #earthHUD .sector-boss-bar > span { margin-top:4px; }
.cinematic-layout .intro { background:radial-gradient(circle at 48% 45%,#147cb360,transparent 38%),linear-gradient(#02091469,#000d1cdd),url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") center/cover; }
.cinematic-layout .intro-lockup .reference-logo { filter:drop-shadow(0 5px 4px #042d52) drop-shadow(0 0 27px #76d9ff); }
.cinematic-layout .intro-lockup .intro-enter { color:#ffe6a3; font-size:18px; letter-spacing:5px; animation:puPulse 1.5s ease-in-out infinite; }
.cinematic-layout .intro #skipIntro { font-size:18px; color:#d1f6ff; }
.cinematic-layout .ui-loading { position:absolute; background:radial-gradient(circle at 50% 42%,#1f9cd65e,transparent 44%),linear-gradient(#03152ddb,#010815ec),url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") center/cover; }
.cinematic-layout .ui-loading .warp-copy span { margin-top:0; font-size:inherit; }
.cinematic-layout .workshop-info .world-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cinematic-layout .workshop-info .world-list button { display:flex; align-items:center; gap:12px; min-height:70px; padding:8px; border:1px solid #5ba6c6; background:#092b43; color:#d8f6ff; text-align:left; font-size:16px; }
.cinematic-layout .workshop-info .world-list img { width:55px; height:55px; object-fit:cover; border-radius:50%; }
.cinematic-layout .workshop-info .world-list small { display:none; }
.cinematic-layout .ui-loading:before { width:410px; height:410px; border:20px solid #8adfff; box-shadow:0 0 32px #69ceff,inset 0 0 33px #73d6ff; }
.cinematic-layout .ui-loading .warp-copy { position:absolute; left:50%; top:68%; transform:translateX(-50%); min-width:700px; text-align:center; }
.cinematic-layout .ui-loading .warp-title { display:block; font-size:68px; font-weight:900; color:#e0f8ff; letter-spacing:15px; text-shadow:0 3px 0 #24698f,0 0 25px #1bc6ff; }
.cinematic-layout .ui-loading .warp-target { display:block; color:var(--pu-gold); font-size:25px; letter-spacing:4px; }
.cinematic-layout .ui-loading .warp-bar { display:block; height:22px; width:590px; margin:20px auto 0; border:1px solid #a9e9ff; background:#031427; overflow:hidden; }
.cinematic-layout .ui-loading .warp-bar i { display:block; width:40%; height:100%; background:linear-gradient(90deg,#045392,#c9f6ff,#13bdf4); animation:puWarp 1.1s ease-in-out infinite alternate; }
.cinematic-layout .ui-loading .warp-hint { display:block; color:#b9d9e6; font-size:15px; margin-top:12px; }
/* Nine-slice metal from the actual art sheet; the middle stays live, readable DOM. */
.cinematic-layout :is(.star-map,.selection-panel,.record-honor,.record-table-wrap,.workshop-inventory,.skin-showcase,.settings-dialog,.help-dialog,.pause-dialog,.pause-report,.result-dialog)::after {
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border:26px solid transparent;
  border-image-source:url("../assets/cinematic/ornate-hud.webp");
  border-image-slice:150;
  border-image-width:26px;
  border-image-repeat:stretch;
}
.cinematic-layout :is(.record-table-wrap,.help-dialog,.pause-report)::after { border-width:20px; border-image-width:20px; }
.cinematic-layout :is(.settings-dialog,.help-dialog) { background:linear-gradient(145deg,#10334adf,#011121f2 60%,#09253aea); }
.cinematic-layout .records-screen #archiveV5 { top:968px; left:425px; width:1000px; margin:0; border:1px solid #d4b77c; background:#051b2ce8; padding:8px 14px; }
.cinematic-layout .records-screen #archiveV5[open] { top:430px; width:1200px; max-height:525px; overflow:auto; z-index:30; box-shadow:0 0 0 5px #051421,0 0 40px #229dcc; }
.cinematic-layout .records-screen #legacyPanel { top:1005px; left:425px; width:1000px; margin:0; padding:8px 14px; }
.cinematic-layout .sector-history h4 { color:var(--pu-gold); font-size:23px; margin:12px 0 4px; }
.cinematic-layout .sector-history h5 { color:#bcefff; font-size:17px; margin:18px 0 7px; }
.cinematic-layout .sector-history p { font-size:14px; }
.cinematic-layout .old-star-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cinematic-layout .old-star-grid > div { display:flex; gap:12px; padding:8px; border:1px solid #477a94; background:#08243a; font-size:12px; }
.cinematic-layout .old-star-grid b { color:var(--pu-gold); white-space:nowrap; }
.cinematic-layout .sector-history .record-table-wrap { position:static; width:100%; height:230px; overflow:auto; border:1px solid #578fab; }
.cinematic-layout .sector-history .record-table { font-size:12px; }

/* Real Boss approach gate: warning, stage art, phases and an explicit enter action. */
.cinematic-layout #bossApproachModal { background:radial-gradient(circle at 52% 37%,#6119267d,transparent 48%),#020813e8; }
.cinematic-layout .boss-approach-dialog { position:relative; width:1490px; height:805px; max-height:805px; padding:0; overflow:hidden; border-color:#ed887c !important; background:radial-gradient(circle at 50% 38%,#4c142694,#061729ea 68%) !important; box-shadow:inset 0 0 0 4px #9f483f,0 0 65px #fd454e75 !important; }
.cinematic-layout .boss-approach-dialog:after { content:""; position:absolute; inset:0; z-index:8; pointer-events:none; border:26px solid transparent; border-image:url("../assets/cinematic/ornate-hud.webp") 150 / 26px stretch; }
.cinematic-layout .boss-approach-art { position:absolute; left:345px; top:95px; width:800px; height:600px; overflow:hidden; }
.cinematic-layout .boss-approach-art img { width:100%; height:100%; object-fit:cover; filter:saturate(1.25) contrast(1.1); mask-image:radial-gradient(ellipse,#000 31%,#000b 53%,transparent 75%); }
.cinematic-layout .boss-approach-art:after { content:""; position:absolute; inset:0; background:radial-gradient(circle,#d51a3033,transparent 65%); pointer-events:none; }
.cinematic-layout .boss-approach-art span { position:absolute; top:120px; left:0; right:0; text-align:center; font:700 19px var(--mono); color:#ffb9a4; letter-spacing:12px; text-shadow:0 0 16px #f33; }
.cinematic-layout .boss-approach-head { position:absolute; left:340px; top:30px; width:820px; z-index:3; text-align:center; }
.cinematic-layout .boss-approach-head .eyebrow { color:#ff9c84; font-size:16px; letter-spacing:8px; }
.cinematic-layout .boss-approach-head h2 { margin:0; font-size:76px; font-weight:900; font-style:italic; color:#fff5eb; text-shadow:0 4px 0 #9a4034,0 0 28px #ff5265; }
.cinematic-layout .boss-approach-head p { font-size:17px; color:#f5d2c7; margin:0; }
.cinematic-layout .boss-approach-phases,.cinematic-layout .boss-approach-intel { position:absolute; top:275px; width:300px; height:370px; padding:22px; z-index:4; border:1px solid #d18578; background:#081b2de9; box-shadow:inset 0 0 0 2px #6d313b,0 0 30px #bb37445e; }
.cinematic-layout .boss-approach-phases { left:35px; }
.cinematic-layout .boss-approach-intel { right:35px; }
.cinematic-layout .boss-approach-phases h3,.cinematic-layout .boss-approach-intel h3 { color:#ffd5a0; font-size:22px; margin:0 0 10px; }
.cinematic-layout .boss-approach-phases > div { display:flex; gap:12px; padding:10px 0; border-top:1px solid #a7655b; }
.cinematic-layout .boss-approach-phases > div b { font:italic 38px var(--mono); color:#ffaf94; line-height:1; }
.cinematic-layout .boss-approach-phases > div span { font-size:17px; color:#f2e2dc; }
.cinematic-layout .boss-approach-phases small { display:block; font-size:11px; color:#b8d5de; line-height:1.5; }
.cinematic-layout .boss-approach-intel .eyebrow { color:#ffaf94; font-size:11px; }
.cinematic-layout .boss-approach-intel p { font-size:14px; line-height:1.65; color:#c9e6ec; }
.cinematic-layout #bossApproachGoal { border-top:1px solid #a7655b; padding-top:12px; color:#ffe4bd; font-size:14px; line-height:1.6; }
.cinematic-layout .boss-approach-actions { position:absolute; left:370px; right:370px; bottom:42px; z-index:9; display:flex; gap:15px; }
.cinematic-layout .boss-approach-actions button { flex:1; height:67px; font-size:18px; }
.cinematic-layout .boss-approach-actions .primary { font-size:23px; }
@keyframes puPulse { 50% { opacity:.43; } }
@keyframes puWarp { from { transform:translateX(-90%); } to { transform:translateX(230%); } }
@media (prefers-reduced-motion: reduce) { .cinematic-layout .intro-lockup .intro-enter,.cinematic-layout .ui-loading .warp-bar i { animation:none; } }

.cinematic-layout .boss-approach-art .boss-approach-core { position:absolute; width:350px; height:350px; object-fit:contain; left:225px; top:235px; border-radius:0; mask-image:none; filter:drop-shadow(0 0 24px #ee644b) saturate(1.1); }