:root {
  --bg: #2b171b;
  --maroon: #6d1f2a;
  --maroon-dark: #351217;
  --maroon-soft: #7f3140;
  --airborne-blue: #8fc5d8;
  --airborne-blue-soft: #b7d8e3;
  --paper: #e8e1d2;
  --paper-dark: #c9c0ad;
  --ink: #f4eee2;
  --muted: #bdb5a6;
  --panel: rgba(53,18,23,.83);
  --panel-border: rgba(183,216,227,.23);
  --ground: #d7b56d;
  --air101: #d9bd78;
  --air82: #79b8d1;
  --british: #7a2636;
  --polish: #9bc8da;
  --german: #4c403b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }

#progress { position:fixed; z-index:60; inset:0 0 auto; height:3px; background:rgba(53,18,23,.22); }
#progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--maroon),var(--airborne-blue)); box-shadow:0 0 18px rgba(143,197,216,.55); }

.hud { position:fixed; z-index:40; left:0; right:0; top:3px; min-height:76px; padding:12px clamp(14px,3vw,42px); display:flex; align-items:center; justify-content:space-between; pointer-events:none; background:linear-gradient(180deg,rgba(53,18,23,.92),rgba(53,18,23,.52) 48%,transparent); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; pointer-events:auto; text-shadow:0 2px 12px rgba(53,18,23,.55); }
.brand__mark { display:grid; place-items:center; width:42px; height:38px; border:1px solid rgba(183,216,227,.5); font-family:Georgia,serif; font-weight:800; font-size:11px; letter-spacing:.08em; color:var(--airborne-blue-soft); background:var(--maroon); box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 6px 18px rgba(53,18,23,.28); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:12px; letter-spacing:.14em; }
.brand small { margin-top:2px; color:var(--airborne-blue-soft); font-size:9px; letter-spacing:.16em; }
.hud__right { margin-left:auto; display:flex; align-items:center; gap:9px; pointer-events:auto; }
.hud__date { display:flex; align-items:baseline; gap:6px; padding-right:3px; font-family:Georgia,serif; text-shadow:0 2px 10px rgba(53,18,23,.65); }
.hud__date span { font-size:25px; }
.hud__date small { font-size:10px; letter-spacing:.16em; color:var(--airborne-blue); }
.hud__button { border:1px solid rgba(183,216,227,.35); background:rgba(53,18,23,.68); backdrop-filter:blur(10px); color:var(--ink); border-radius:999px; padding:9px 13px; font-weight:800; font-size:10px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; }

.language-switch { display:flex; padding:3px; border:1px solid rgba(183,216,227,.36); border-radius:999px; background:rgba(53,18,23,.65); backdrop-filter:blur(10px); }
.language-switch button { min-width:34px; border:0; border-radius:999px; padding:6px 8px; background:transparent; color:rgba(244,238,226,.64); cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.09em; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.language-switch button.is-active { color:var(--maroon-dark); background:var(--airborne-blue); box-shadow:0 2px 10px rgba(143,197,216,.25); }

.legend { position:fixed; z-index:55; top:84px; right:20px; width:min(310px,calc(100vw - 28px)); padding:18px; border:1px solid var(--panel-border); border-radius:16px; background:rgba(53,18,23,.94); backdrop-filter:blur(18px); transform:translateY(-10px) scale(.97); opacity:0; visibility:hidden; transition:.25s ease; box-shadow:0 22px 60px rgba(53,18,23,.35); }
.legend.is-open { opacity:1; visibility:visible; transform:none; }
.legend h2 { margin:0 0 13px; font:700 13px/1 Georgia,serif; text-transform:uppercase; letter-spacing:.15em; color:var(--airborne-blue-soft); }
.legend > div { display:flex; gap:10px; align-items:center; margin:10px 0; color:#eee7d9; font-size:12px; }
.legend p { margin:15px 0 0; color:#c2b7aa; font-size:10px; line-height:1.5; }
.swatch { width:22px; height:3px; border-radius:99px; box-shadow:0 0 10px currentColor; }
.swatch--ground { background:var(--ground); color:var(--ground); }
.swatch--101 { background:var(--air101); color:var(--air101); }
.swatch--82 { background:var(--air82); color:var(--air82); }
.swatch--british { background:var(--british); color:var(--british); }
.swatch--polish { background:var(--polish); color:var(--polish); }
.swatch--german { background:var(--german); color:var(--german); }

.map-stage { position:fixed; z-index:0; inset:0; height:100svh; background:#d8d1be; }
#map { position:absolute; inset:0; }
.maplibregl-map { font-family:inherit; }
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right { opacity:.52; transform:scale(.82); transform-origin:bottom; filter:sepia(.25); }
.map-paper { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(109,31,42,.055),transparent 33%,rgba(143,197,216,.055) 70%,rgba(109,31,42,.04)); mix-blend-mode:multiply; }
.map-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 46%,transparent 31%,rgba(53,18,23,.06) 64%,rgba(53,18,23,.35) 112%),linear-gradient(90deg,rgba(53,18,23,.22),transparent 20%,transparent 80%,rgba(53,18,23,.22)); }
.map-grain { position:absolute; inset:-50%; pointer-events:none; opacity:.055; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation:grain .25s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(2%,-2%)}50%{transform:translate(-2%,1%)}75%{transform:translate(1%,2%)}100%{transform:translate(0,0)} }
.map-caption { position:absolute; left:clamp(14px,3vw,42px); bottom:calc(15px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(232,225,210,.72); backdrop-filter:blur(8px); font-size:9px; font-weight:800; letter-spacing:.16em; color:#54373a; text-transform:uppercase; box-shadow:0 8px 25px rgba(53,18,23,.1); }
.pulse-dot { width:5px; height:5px; border-radius:50%; background:var(--maroon); box-shadow:0 0 0 0 rgba(109,31,42,.45); animation:pulse 2s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 8px rgba(109,31,42,0)}100%{box-shadow:0 0 0 0 rgba(109,31,42,0)} }
.flash { position:absolute; inset:0; pointer-events:none; background:rgba(255,225,171,.36); opacity:0; mix-blend-mode:screen; }
.flash.fire { animation:flash .4s ease-out; }
@keyframes flash { 0%{opacity:0}12%{opacity:.85}100%{opacity:0} }
.aircraft-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.aircraft { position:absolute; left:-10vw; top:var(--top); font-size:18px; color:#4e4640; opacity:0; filter:drop-shadow(0 4px 4px rgba(53,18,23,.25)); transform:rotate(8deg); }
.aircraft.fly { animation:fly 4.8s cubic-bezier(.35,.05,.5,1) forwards; }
@keyframes fly { 0%{left:-12vw;opacity:0}10%{opacity:.75}90%{opacity:.65}100%{left:110vw;opacity:0} }

.story { position:relative; z-index:10; }
.chapter { min-height:100svh; padding:15vh clamp(18px,6vw,90px) 12vh; display:flex; align-items:center; pointer-events:none; }
.chapter--left { justify-content:flex-start; }
.chapter--right { justify-content:flex-end; }
.chapter--hero,.chapter--final { justify-content:center; text-align:center; min-height:112svh; }
.chapter__card { width:min(445px,88vw); padding:clamp(22px,4vw,36px); border:1px solid var(--panel-border); border-radius:22px; background:linear-gradient(145deg,rgba(79,26,35,.9),rgba(53,18,23,.78)); backdrop-filter:blur(18px) saturate(.9); box-shadow:0 28px 80px rgba(53,18,23,.28); opacity:.22; transform:translateY(28px) scale(.97); transition:opacity .55s ease,transform .55s ease,border-color .55s ease,box-shadow .55s ease; pointer-events:auto; }
.chapter.is-active .chapter__card { opacity:1; transform:none; border-color:rgba(183,216,227,.5); box-shadow:0 30px 100px rgba(53,18,23,.4),0 0 0 1px rgba(143,197,216,.05) inset; }
.hero-card,.final-card { width:min(730px,92vw); background:linear-gradient(145deg,rgba(81,26,35,.92),rgba(53,18,23,.82)); }
.eyebrow { margin:0 0 12px; color:var(--airborne-blue); font-size:10px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
h1,h2 { margin:0 0 14px; font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.025em; text-wrap:balance; }
h1 { font-size:clamp(48px,8vw,104px); line-height:.9; }
h2 { font-size:clamp(33px,5vw,60px); line-height:.98; }
.chapter p:not(.eyebrow) { margin:0; color:#e0d8ca; font-size:clamp(14px,1.45vw,17px); line-height:1.72; }
.lead { max-width:610px; margin-inline:auto!important; font-size:clamp(16px,2vw,21px)!important; }
.stat { display:flex; gap:14px; align-items:end; margin-top:22px; padding-top:18px; border-top:1px solid rgba(183,216,227,.18); text-align:left; }
.stat strong { font:500 35px/1 Georgia,serif; color:var(--airborne-blue-soft); }
.stat span { color:var(--muted); font-size:11px; max-width:140px; }
.scroll-cue { margin-top:30px; display:inline-flex; gap:10px; align-items:center; color:#d4c9bb; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue span { width:14px; height:24px; border:1px solid var(--airborne-blue); border-radius:9px; position:relative; }
.scroll-cue span::after { content:""; position:absolute; left:50%; top:5px; width:2px; height:5px; border-radius:2px; background:var(--airborne-blue); transform:translateX(-50%); animation:wheel 1.4s infinite; }
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,8px)} }
.chapter__accent { margin-top:18px; padding-left:14px; border-left:2px solid var(--airborne-blue); color:#fff6e9; font-family:Georgia,serif; font-size:20px; }
.prototype-note { margin-top:22px!important; color:#bdb2a4!important; font-size:11px!important; }
#replay { margin-top:25px; border:1px solid rgba(183,216,227,.45); border-radius:999px; padding:12px 18px; color:var(--maroon-dark); background:var(--airborne-blue); cursor:pointer; font-weight:900; text-transform:uppercase; letter-spacing:.1em; font-size:10px; }

@media (max-width:760px) {
  .hud { min-height:64px; padding:8px 10px 16px; align-items:flex-start; }
  .brand { gap:7px; }
  .brand__mark { width:34px; height:32px; font-size:9px; }
  .brand strong { font-size:9px; }
  .brand small { font-size:6.5px; letter-spacing:.1em; }
  .hud__right { gap:5px; }
  .hud__date { margin-top:3px; gap:3px; }
  .hud__date span { font-size:18px; }
  .hud__date small { font-size:8px; }
  .language-switch { padding:2px; }
  .language-switch button { min-width:30px; padding:5px 6px; font-size:9px; }
  .hud__button { padding:7px 8px; margin-top:1px; font-size:8px; }
  .chapter { min-height:94svh; padding:21vh 10px 8vh; align-items:flex-end; justify-content:center; }
  .chapter--hero,.chapter--final { min-height:105svh; align-items:center; }
  .chapter__card { width:100%; max-width:520px; border-radius:18px; padding:21px; background:linear-gradient(180deg,rgba(82,27,36,.88),rgba(53,18,23,.96)); backdrop-filter:blur(12px); }
  h1 { font-size:clamp(47px,15vw,72px); }
  h2 { font-size:clamp(31px,9vw,46px); }
  .chapter p:not(.eyebrow) { font-size:14px; line-height:1.58; }
  .map-caption { display:none; }
  .map-vignette { background:linear-gradient(180deg,rgba(53,18,23,.12),transparent 25%,transparent 56%,rgba(53,18,23,.52)); }
  .legend { top:66px; right:10px; }
}

@media (max-width:430px) {
  .brand small { display:none; }
  .brand strong { max-width:75px; line-height:1.05; }
  .hud__date { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .map-grain { display:none; }
}
.legend__tactical { padding-top:9px; margin-top:12px!important; border-top:1px solid rgba(183,216,227,.14); }
.tactical-symbol { width:22px; height:13px; border:1px dashed var(--airborne-blue); background:rgba(122,38,54,.24); border-radius:3px; }

/* V4 — moving formation signs and battle effects */
.unit-marker {
  --unit-color:#7a2636;
  display:flex;
  align-items:center;
  gap:6px;
  opacity:0;
  transform:translateY(4px) scale(.82);
  transition:opacity .22s ease,transform .22s ease,filter .25s ease;
  pointer-events:none;
  filter:drop-shadow(0 4px 5px rgba(53,18,23,.25));
  will-change:transform,opacity;
}
.unit-marker.is-visible { opacity:1; transform:none; }
.unit-marker.is-complete { opacity:.48; filter:grayscale(.25) drop-shadow(0 3px 4px rgba(53,18,23,.18)); }
.unit-marker__formation {
  position:relative;
  display:grid;
  place-items:center;
  min-width:38px;
  height:30px;
  padding:0 5px;
  border:2px solid #f3ebd8;
  outline:1px solid rgba(53,18,23,.45);
  background:var(--unit-color);
  color:#fff8e9;
  font:900 8px/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.unit-marker--airborne .unit-marker__formation { border-radius:50% 50% 42% 42% / 48% 48% 56% 56%; }
.unit-marker--armour .unit-marker__formation::after {
  content:"";
  position:absolute;
  left:7px; right:7px; bottom:-5px;
  height:4px;
  border-radius:3px;
  background:#40372f;
  box-shadow:6px 0 0 #40372f,-6px 0 0 #40372f;
}
.unit-marker--withdrawal .unit-marker__formation { border-style:dashed; }
.unit-marker--german .unit-marker__formation { background:#4c403b; border-color:#e4dac7; }
.unit-marker--polish .unit-marker__formation { background:#8fc5d8; color:#34181d; border-color:#f3ebd8; }
.unit-marker__text {
  display:flex;
  flex-direction:column;
  min-width:max-content;
  padding:4px 6px 4px 7px;
  border-left:2px solid var(--unit-color);
  border-radius:2px 6px 6px 2px;
  background:rgba(240,233,216,.88);
  backdrop-filter:blur(5px);
  box-shadow:0 3px 12px rgba(53,18,23,.13);
}
.unit-marker__text strong { color:#40262a; font-size:8px; line-height:1.05; letter-spacing:.08em; }
.unit-marker__text small { margin-top:2px; max-width:118px; overflow:hidden; text-overflow:ellipsis; color:#6a6257; font-size:6.5px; line-height:1; letter-spacing:.06em; white-space:nowrap; }

.battle-fx { width:86px; height:86px; opacity:0; pointer-events:none; transform:scale(.65); transition:opacity .45s ease,transform .45s ease; }
.battle-fx.is-active { opacity:1; transform:scale(1); }
.battle-fx--explosion .blast-core,
.battle-fx--explosion .blast-ring,
.battle-fx--explosion .blast-debris { position:absolute; inset:50%; border-radius:50%; transform:translate(-50%,-50%); }
.battle-fx--explosion .blast-core { width:12px; height:12px; background:#ffd99a; box-shadow:0 0 10px #f7ad54,0 0 25px rgba(210,86,40,.72); opacity:0; }
.battle-fx--explosion .blast-ring { width:12px; height:12px; border:3px solid rgba(125,50,34,.7); opacity:0; }
.battle-fx--explosion .blast-debris { width:6px; height:6px; background:#402f29; opacity:0; box-shadow:16px -9px 0 #5d4034,-14px -12px 0 #6f4c3c,19px 12px 0 #3d302b,-20px 9px 0 #604437,4px 20px 0 #45352f; }
.battle-fx--explosion.is-bursting .blast-core { animation:blastCore 1.05s ease-out; }
.battle-fx--explosion.is-bursting .blast-ring { animation:blastRing 1.1s ease-out; }
.battle-fx--explosion.is-bursting .blast-debris { animation:blastDebris 1s ease-out; }
@keyframes blastCore { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 10%{opacity:1} 38%{opacity:.92;transform:translate(-50%,-50%) scale(2.25)} 100%{opacity:0;transform:translate(-50%,-50%) scale(4)} }
@keyframes blastRing { 0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)} 100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)} }
@keyframes blastDebris { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)} 18%{opacity:.9} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(48deg)} }

.battle-fx--smoke .smoke-puff { position:absolute; left:50%; top:58%; width:25px; height:25px; border-radius:50%; background:rgba(60,54,49,.44); filter:blur(5px); transform:translate(-50%,-50%) scale(.4); opacity:0; }
.battle-fx--smoke.is-active .smoke-puff--1 { animation:smokeRise 4.8s ease-in-out infinite; }
.battle-fx--smoke.is-active .smoke-puff--2 { animation:smokeRise 5.4s 1.1s ease-in-out infinite; }
.battle-fx--smoke.is-active .smoke-puff--3 { animation:smokeRise 4.4s 2.2s ease-in-out infinite; }
@keyframes smokeRise {
  0% { opacity:0; transform:translate(-50%,0) scale(.4); }
  18% { opacity:.42; }
  58% { opacity:.28; transform:translate(calc(-50% + 7px),-28px) scale(1.35); }
  100% { opacity:0; transform:translate(calc(-50% - 5px),-52px) scale(2.1); }
}

@media (max-width:720px) {
  .unit-marker__formation { min-width:31px; height:25px; font-size:7px; border-width:1.5px; }
  .unit-marker__text { display:none; }
  .battle-fx { width:64px; height:64px; }
}

@media (prefers-reduced-motion:reduce) {
  .battle-fx--smoke.is-active .smoke-puff,
  .battle-fx--explosion.is-bursting .blast-core,
  .battle-fx--explosion.is-bursting .blast-ring,
  .battle-fx--explosion.is-bursting .blast-debris { animation:none!important; opacity:.22; }
}


/* V5 — scene-aware forces hierarchy */
.unit-marker__text { opacity:0; transform:translateX(-5px) scale(.96); visibility:hidden; transition:opacity .18s ease,transform .18s ease; }
.unit-marker.is-focus { z-index:3; }
.unit-marker.is-focus .unit-marker__text { opacity:1; transform:none; visibility:visible; }
.unit-marker.is-overview .unit-marker__formation { min-width:31px; height:25px; font-size:7px; }
.unit-marker.is-complete { opacity:.28; }
.unit-marker:not(.is-focus) { filter:drop-shadow(0 2px 3px rgba(53,18,23,.18)); }

.forces-panel {
  position:fixed;
  z-index:31;
  top:105px;
  right:clamp(14px,2.5vw,34px);
  width:min(285px,24vw);
  max-height:calc(100vh - 145px);
  padding:14px;
  border:1px solid rgba(183,216,227,.24);
  border-radius:14px;
  background:rgba(53,18,23,.88);
  backdrop-filter:blur(15px);
  box-shadow:0 18px 55px rgba(53,18,23,.22);
  overflow:auto;
  transition:opacity .25s ease,transform .25s ease;
}
.forces-panel.is-empty { opacity:.35; }
.forces-panel__head { padding:2px 2px 10px; border-bottom:1px solid rgba(183,216,227,.14); }
.forces-panel__kicker,.forces-sheet__head span { display:block; color:var(--airborne-blue); font-size:9px; font-weight:900; letter-spacing:.15em; }
.forces-panel__head strong,.forces-sheet__head strong { display:block; margin-top:5px; color:var(--paper); font:700 13px/1.2 Georgia,serif; }
.force-group { margin-top:12px; }
.force-group h3 { display:flex; align-items:center; justify-content:space-between; margin:0 0 7px; color:rgba(244,238,226,.68); font-size:8px; letter-spacing:.15em; }
.force-group h3 span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(143,197,216,.12); color:var(--airborne-blue-soft); }
.force-item { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.force-item:last-child { border-bottom:0; }
.force-item__badge,.forces-mini {
  display:grid; place-items:center; flex:0 0 auto;
  min-width:34px; height:25px; padding:0 5px;
  border:1.5px solid rgba(244,238,226,.8);
  background:var(--force-color);
  color:#fff8e9;
  font-size:7px; font-weight:950; letter-spacing:.03em;
}
.force-item--british .force-item__badge,.force-item--allied .force-item__badge { border-radius:8px 8px 6px 6px; }
.force-item--german .force-item__badge { background:#4c403b; }
.force-item__copy { min-width:0; display:flex; flex-direction:column; }
.force-item__copy strong { color:#f1eadc; font-size:9.5px; line-height:1.25; }
.force-item__copy em { margin-top:2px; color:#bdb5a6; font-size:7.5px; line-height:1.25; font-style:normal; }
.force-item__copy small { margin-top:3px; color:var(--airborne-blue-soft); font-size:7px; }
.forces-empty { margin:12px 0 0; color:var(--muted); font-size:9px; }

.forces-bar,.forces-sheet,.forces-backdrop { display:none; }

@media (max-width: 980px) and (min-width: 721px) {
  .forces-panel { width:230px; }
  .force-item__copy em,.force-item__copy small { display:none; }
}

@media (max-width:720px) {
  .forces-panel { display:none; }
  .unit-marker__text { display:none!important; }
  .unit-marker__formation { min-width:29px; height:23px; padding:0 4px; font-size:6.5px; }
  .unit-marker.is-complete { opacity:.18; }

  .forces-bar {
    display:flex;
    position:fixed;
    z-index:46;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    min-height:52px;
    align-items:center;
    gap:9px;
    padding:7px 10px;
    border:1px solid rgba(183,216,227,.3);
    border-radius:14px;
    background:rgba(53,18,23,.94);
    backdrop-filter:blur(16px);
    color:var(--paper);
    box-shadow:0 10px 35px rgba(53,18,23,.34);
    text-align:left;
  }
  .forces-bar__badges { display:flex; align-items:center; gap:3px; min-width:0; }
  .forces-mini { min-width:27px; height:22px; padding:0 3px; font-size:6px; }
  .forces-mini--british,.forces-mini--allied { border-radius:7px 7px 5px 5px; }
  .forces-mini--german { background:#4c403b; }
  .forces-mini-more { color:var(--airborne-blue-soft); font-size:8px; font-weight:900; }
  .forces-bar__label { margin-left:auto; display:flex; min-width:68px; flex-direction:column; }
  .forces-bar__label strong { font-size:8px; letter-spacing:.12em; }
  .forces-bar__label small { margin-top:2px; color:#bdb5a6; font-size:6.5px; white-space:nowrap; }
  .forces-bar__chevron { color:var(--airborne-blue); font-size:18px; }

  .forces-backdrop {
    display:block;
    position:fixed; z-index:70; inset:0;
    background:rgba(28,15,18,.48);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .forces-backdrop.is-open { opacity:1; visibility:visible; }
  .forces-sheet {
    display:block;
    position:fixed; z-index:71;
    left:0; right:0; bottom:0;
    max-height:68svh;
    padding:8px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0;
    background:rgba(53,18,23,.985);
    border-top:1px solid rgba(183,216,227,.3);
    box-shadow:0 -18px 60px rgba(25,12,15,.38);
    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.2,.75,.2,1);
  }
  .forces-sheet.is-open { transform:none; }
  .forces-sheet__handle {
    display:block; width:52px; height:18px; margin:0 auto 4px; padding:0;
    border:0; background:transparent; position:relative;
  }
  .forces-sheet__handle::after { content:""; position:absolute; left:8px; right:8px; top:6px; height:4px; border-radius:99px; background:rgba(232,225,210,.34); }
  .forces-sheet__head { padding:2px 0 12px; border-bottom:1px solid rgba(183,216,227,.16); }
  .forces-sheet__content { max-height:calc(68svh - 95px); overflow:auto; overscroll-behavior:contain; }
  .forces-sheet .force-item { padding:10px 0; }
  .forces-sheet .force-item__badge { min-width:42px; height:31px; font-size:8px; }
  .forces-sheet .force-item__copy strong { font-size:11px; }
  .forces-sheet .force-item__copy em { font-size:9px; }
  .forces-sheet .force-item__copy small { font-size:8.5px; }
  body.forces-sheet-open { overflow:hidden; }
}


@media (min-width:981px) {
  /* Keep story copy away from the persistent forces panel. */
  .chapter--right { justify-content:flex-start; }
}

/* V6 — quieter unit hierarchy, historical identity and cinematic effects */
.unit-marker.is-visible { opacity:var(--unit-opacity,.45); }
.unit-marker.is-focus { opacity:1!important; transform:scale(1.04); }
.unit-marker__formation { overflow:visible; }
.unit-marker__badge-image { display:block; width:27px; height:27px; object-fit:contain; }
.unit-marker__flag {
  position:absolute; z-index:3; right:-8px; top:-5px;
  width:15px; height:10px; object-fit:cover;
  border:1px solid rgba(255,248,233,.85);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.unit-marker--german .unit-marker__flag { width:14px; height:9px; }
.unit-marker:not(.is-focus) .unit-marker__text { display:none; }

.force-item__badge--image { padding:0; background:transparent!important; border:0!important; min-width:38px; height:34px; }
.force-item__badge--image img { width:34px; height:34px; object-fit:contain; }
.force-flag { width:18px; height:11px; object-fit:cover; margin-right:6px; vertical-align:-1px; border:1px solid rgba(255,255,255,.35); }
.force-item__commander { width:38px; height:46px; flex:0 0 auto; object-fit:cover; object-position:center top; border-radius:4px; filter:grayscale(1) contrast(1.05); border:1px solid rgba(183,216,227,.25); }
.forces-mini { position:relative; overflow:visible; }
.forces-mini__badge { width:22px; height:22px; object-fit:contain; }
.forces-mini__flag { position:absolute; right:-4px; top:-4px; width:11px; height:7px; object-fit:cover; border:1px solid rgba(255,255,255,.65); }

.forces-sheet__controls { position:relative; height:28px; }
.forces-sheet__handle { display:block; width:42px; height:4px; margin:5px auto 0; border-radius:99px; background:rgba(232,225,210,.34); }
.forces-sheet__close {
  position:absolute; right:0; top:-4px; display:grid; place-items:center;
  width:34px; height:34px; padding:0; border:1px solid rgba(183,216,227,.24);
  border-radius:50%; background:rgba(255,255,255,.06); color:#f2ead7;
  font:300 25px/1 Arial,sans-serif; cursor:pointer;
}
.forces-sheet__close:hover { background:rgba(143,197,216,.13); }
@media(max-width:720px) {
  .forces-sheet__handle { position:static; }
  .forces-sheet__handle::after { display:none; }
}

/* Particle explosion: irregular fire, debris and lingering smoke instead of UI rings. */
.battle-fx--explosion { width:120px; height:120px; }
.blast-flash,.blast-fire,.blast-dark,.blast-particle,.blast-smoke { position:absolute; left:50%; top:58%; pointer-events:none; opacity:0; }
.blast-flash { width:18px; height:18px; border-radius:48% 52% 42% 58%; background:#fff1ba; filter:blur(1px); }
.blast-fire { width:28px; height:30px; border-radius:55% 45% 60% 40%; background:radial-gradient(circle at 45% 55%,#fff1a3 0 18%,#f59a37 40%,#a83b20 72%,transparent 75%); filter:blur(1.2px); }
.blast-fire--2 { width:35px; height:25px; }
.blast-dark { width:26px; height:22px; border-radius:50%; background:rgba(48,39,34,.75); filter:blur(3px); }
.blast-particle { width:4px; height:4px; border-radius:45%; background:#50372c; box-shadow:0 0 2px #d87736; }
.blast-smoke { width:30px; height:26px; border-radius:50%; background:rgba(55,51,47,.55); filter:blur(6px); }
.battle-fx--explosion.is-bursting .blast-flash { animation:realFlash .55s ease-out; }
.battle-fx--explosion.is-bursting .blast-fire--1 { animation:realFire .9s ease-out; }
.battle-fx--explosion.is-bursting .blast-fire--2 { animation:realFire2 1.05s .05s ease-out; }
.battle-fx--explosion.is-bursting .blast-dark { animation:realDark 1.7s .25s ease-out; }
.battle-fx--explosion.is-bursting .blast-particle { animation:realDebris 1.15s var(--delay) cubic-bezier(.15,.65,.25,1); }
.battle-fx--explosion.is-bursting .blast-smoke--1 { animation:realSmoke 3.1s .3s ease-out; }
.battle-fx--explosion.is-bursting .blast-smoke--2 { animation:realSmoke2 3.5s .5s ease-out; }
.battle-fx--explosion.is-bursting .blast-smoke--3 { animation:realSmoke3 3.8s .7s ease-out; }
@keyframes realFlash { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 12%{opacity:1} 55%{opacity:.8;transform:translate(-50%,-50%) scale(2.6)} 100%{opacity:0;transform:translate(-50%,-50%) scale(4)} }
@keyframes realFire { 0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)} 16%{opacity:1} 65%{opacity:.8;transform:translate(-50%,-65%) scale(2.1) rotate(12deg)} 100%{opacity:0;transform:translate(-50%,-95%) scale(2.7)} }
@keyframes realFire2 { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 22%{opacity:.9} 100%{opacity:0;transform:translate(-30%,-105%) scale(2.4) rotate(-18deg)} }
@keyframes realDark { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 25%{opacity:.65} 100%{opacity:0;transform:translate(-50%,-125%) scale(3)} }
@keyframes realDebris { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 15%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(210deg) scale(.7)} }
@keyframes realSmoke { 0%{opacity:0;transform:translate(-50%,-45%) scale(.4)} 25%{opacity:.5} 100%{opacity:0;transform:translate(-70%,-190%) scale(2.6)} }
@keyframes realSmoke2 { 0%{opacity:0;transform:translate(-50%,-45%) scale(.4)} 25%{opacity:.42} 100%{opacity:0;transform:translate(-5%,-215%) scale(2.9)} }
@keyframes realSmoke3 { 0%{opacity:0;transform:translate(-50%,-45%) scale(.4)} 25%{opacity:.38} 100%{opacity:0;transform:translate(-100%,-235%) scale(3.2)} }

/* V7 */
.unit-marker{opacity:0!important}.unit-marker.is-visible{opacity:var(--unit-opacity,.22)!important}.unit-marker.is-visible.is-secondary{opacity:var(--unit-opacity,.48)!important}.unit-marker.is-visible.is-focus{opacity:1!important;transform:scale(1.04);z-index:4}.unit-marker.is-complete.is-visible:not(.is-focus){opacity:.18!important}
.unit-marker__flag,.unit-marker--german .unit-marker__flag{width:20px!important;height:13px!important;right:-11px!important;top:-7px!important}.unit-marker__commander{position:absolute;left:-17px;bottom:-14px;width:31px;height:31px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid #f2ead7;box-shadow:0 3px 10px rgba(38,20,24,.42);filter:grayscale(1) contrast(1.06);opacity:0;transform:scale(.65) translateY(5px);transition:.22s ease;pointer-events:none}.unit-marker.is-focus .unit-marker__commander{opacity:1;transform:none}
.bridge-photo-marker{appearance:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:52px;padding:3px;border:1px solid rgba(109,31,42,.72);border-radius:7px;background:rgba(244,238,226,.93);box-shadow:0 5px 16px rgba(53,18,23,.26);opacity:0;visibility:hidden;transform:translateY(5px) scale(.82);transition:.22s ease;cursor:pointer}.bridge-photo-marker.is-visible{opacity:.82;visibility:visible;transform:none}.bridge-photo-marker:hover,.bridge-photo-marker.is-expanded{opacity:1;width:105px;z-index:10}.bridge-photo-marker img{width:44px;height:34px;object-fit:cover;filter:grayscale(1) sepia(.16) contrast(1.05);border-radius:4px}.bridge-photo-marker.is-expanded img,.bridge-photo-marker:hover img{width:97px;height:72px}.bridge-photo-marker span{display:none;color:#4b2529;font-size:6px;font-weight:900;text-align:center}.bridge-photo-marker.is-expanded span,.bridge-photo-marker:hover span{display:block}
#mapPreloader{position:fixed;left:-320px;top:-320px;width:128px;height:128px;opacity:.01;pointer-events:none}.forces-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.forces-panel__toggle,.card-map-toggle{display:none;width:31px;height:31px;place-items:center;flex:0 0 auto;border:1px solid rgba(183,216,227,.22);border-radius:50%;background:rgba(255,255,255,.055);color:var(--airborne-blue-soft);cursor:pointer}.chapter__card{position:relative}
.credits-panel{position:fixed;z-index:65;top:84px;right:20px;width:min(390px,calc(100vw - 28px));max-height:calc(100svh - 104px);overflow:auto;padding:20px;border:1px solid var(--panel-border);border-radius:16px;background:rgba(53,18,23,.97);color:#ded6c8;backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(30,14,18,.42);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s ease}.credits-panel.is-open{opacity:1;visibility:visible;transform:none}.credits-panel h2{margin:0 35px 13px 0;color:var(--airborne-blue-soft);font:700 16px Georgia,serif}.credits-panel p{font-size:9px;line-height:1.55;color:#cbc2b4}.credits-panel__close{position:absolute;right:11px;top:10px;width:31px;height:31px;border:1px solid rgba(183,216,227,.22);border-radius:50%;background:transparent;color:#fff;font-size:22px;cursor:pointer}
@media (min-width:721px) and (max-width:1180px),(pointer:coarse) and (min-width:721px){.card-map-toggle,.forces-panel__toggle{display:grid}body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed),body.map-is-moving .forces-panel:not(.is-map-collapsed){opacity:.16!important;pointer-events:none}.chapter__card.is-map-collapsed{width:48px!important;height:48px!important;min-height:48px;padding:8px!important;overflow:hidden;background:rgba(53,18,23,.74)}.chapter__card.is-map-collapsed>*:not(.card-map-toggle){display:none!important}.chapter__card.is-map-collapsed .card-map-toggle{display:grid;margin:0}.forces-panel.is-map-collapsed{width:50px!important;height:50px!important;padding:9px!important;overflow:hidden}.forces-panel.is-map-collapsed .forces-panel__head>div,.forces-panel.is-map-collapsed .forces-panel__content{display:none!important}.forces-panel.is-map-collapsed .forces-panel__head{border:0;padding:0}}
@media(max-width:720px){.unit-marker__flag,.unit-marker--german .unit-marker__flag{width:17px!important;height:11px!important;right:-9px!important;top:-6px!important}.unit-marker__commander{width:27px;height:27px;left:-15px;bottom:-13px}.bridge-photo-marker{width:43px}.bridge-photo-marker img{width:35px;height:28px}.bridge-photo-marker.is-expanded{width:92px}.bridge-photo-marker.is-expanded img{width:84px;height:62px}.hud__button--credits{display:none}}

/* V8 — controls are available on desktop too */
.card-controls { position:absolute; right:10px; top:10px; display:flex; gap:6px; z-index:5; }
.card-map-toggle,.card-opacity-toggle,.forces-panel__toggle {
  display:grid!important; place-items:center; width:31px; height:31px;
  border:1px solid rgba(183,216,227,.24); border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--airborne-blue-soft); cursor:pointer;
  transition:background .18s ease,opacity .18s ease;
}
.card-map-toggle:hover,.card-opacity-toggle:hover,.forces-panel__toggle:hover { background:rgba(143,197,216,.16); }
.chapter__card.opacity-normal,.forces-panel.opacity-normal { opacity:1!important; }
.chapter.is-active .chapter__card.opacity-soft,.forces-panel.opacity-soft { opacity:.58!important; }
.chapter.is-active .chapter__card.opacity-ghost,.forces-panel.opacity-ghost { opacity:.24!important; }
.forces-panel__controls { display:flex; gap:6px; }

.chapter__card.is-map-collapsed {
  width:52px!important; height:52px!important; min-height:52px!important;
  padding:9px!important; overflow:hidden!important; background:rgba(53,18,23,.78)!important;
}
.chapter__card.is-map-collapsed > *:not(.card-controls) { display:none!important; }
.chapter__card.is-map-collapsed .card-controls { position:static; }
.chapter__card.is-map-collapsed .card-opacity-toggle { display:none!important; }
.forces-panel.is-map-collapsed {
  width:52px!important; height:52px!important; padding:9px!important; overflow:hidden!important;
}
.forces-panel.is-map-collapsed .forces-panel__head > div:first-child,
.forces-panel.is-map-collapsed .forces-panel__content,
.forces-panel.is-map-collapsed .forces-panel__opacity { display:none!important; }
.forces-panel.is-map-collapsed .forces-panel__head { padding:0!important; border:0!important; }

/* Bridge photos are event markers: fast fade only when camera and scroll are idle. */
.bridge-photo-marker { transition:opacity .14s ease,transform .14s ease,width .2s ease!important; }
.bridge-photo-marker.is-visible { animation:bridgePhotoIn .22s ease-out both; }
@keyframes bridgePhotoIn { from{opacity:0;transform:translateY(7px) scale(.84)} to{opacity:.82;transform:none} }

/* Explosions remain visible long enough for fire -> debris -> smoke sequence. */
.battle-fx--explosion.is-active { opacity:1!important; visibility:visible!important; }

/* V9 — active movement is never translucent */
.unit-marker.is-visible.is-moving { opacity:1!important; filter:drop-shadow(0 4px 6px rgba(53,18,23,.28))!important; }
.unit-marker.is-visible.is-context:not(.is-moving) { opacity:.24!important; }
.unit-marker.is-visible.is-focus { opacity:1!important; z-index:8; }
.unit-marker.is-complete.is-visible.is-moving { opacity:1!important; }

/* V9 explosion: independent state, above every map marker, with guaranteed visible fireball. */
.battle-fx--explosion { z-index:9999!important; width:132px!important; height:132px!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; }
.battle-fx--explosion.explosion-playing { opacity:1!important; visibility:visible!important; }
.battle-fx--explosion.explosion-playing .blast-flash { animation:realFlash .7s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-fire--1 { animation:realFire 1.15s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-fire--2 { animation:realFire2 1.25s .05s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-dark { animation:realDark 2.0s .3s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-particle { animation:realDebris 1.35s var(--delay) cubic-bezier(.15,.65,.25,1) both!important; }
.battle-fx--explosion.explosion-playing .blast-smoke--1 { animation:realSmoke 3.4s .35s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-smoke--2 { animation:realSmoke2 3.7s .5s ease-out both!important; }
.battle-fx--explosion.explosion-playing .blast-smoke--3 { animation:realSmoke3 4s .65s ease-out both!important; }
.battle-fx--explosion.explosion-playing::before {
  content:""; position:absolute; left:50%; top:58%; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle,#fff8d0 0 15%,#ffbd4a 35%,#dc5a26 62%,rgba(93,41,31,.25) 78%,transparent 82%);
  transform:translate(-50%,-50%); box-shadow:0 0 18px 8px rgba(246,138,55,.55);
  animation:v9Core 1.05s ease-out both;
}
@keyframes v9Core { 0%{opacity:0;transform:translate(-50%,-50%) scale(.15)} 12%{opacity:1} 45%{opacity:.98;transform:translate(-50%,-58%) scale(2.2)} 100%{opacity:0;transform:translate(-50%,-85%) scale(3.4)} }

/* Commander portrait is very clear on focused units, including German formations. */
.unit-marker.is-focus .unit-marker__commander { opacity:1!important; visibility:visible!important; width:34px!important; height:34px!important; z-index:9; }

/* V10 — Forces in Action is authoritative for map visibility */
.force-item { width:100%; appearance:none; text-align:left; background:transparent; color:inherit; border-left:0; border-right:0; border-top:0; cursor:pointer; font:inherit; }
.force-item:hover,.force-item:focus-visible { background:rgba(143,197,216,.08); outline:none; }
.force-item.is-selected { background:rgba(143,197,216,.13); box-shadow:inset 2px 0 0 var(--airborne-blue); }
.unit-marker.is-visible.is-context { opacity:.62!important; }
.unit-marker.is-force-dimmed { opacity:.14!important; filter:grayscale(.55)!important; }
.unit-marker.is-force-highlighted { opacity:1!important; z-index:20!important; filter:drop-shadow(0 0 7px rgba(143,197,216,.9)) drop-shadow(0 5px 8px rgba(53,18,23,.35))!important; }
.unit-marker.force-pulse .unit-marker__formation { animation:forcePulse 1.05s ease-in-out 2; }
@keyframes forcePulse {
  0%,100%{transform:scale(1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 0 rgba(143,197,216,.0)}
  45%{transform:scale(1.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 10px rgba(143,197,216,.2)}
}

/* V10 — sticky multi-beat documentary chapters */
.chapter {
  min-height:calc(92svh + (var(--beat-count,1) * 58svh))!important;
  padding:0 clamp(18px,6vw,90px)!important;
  display:block!important;
  position:relative;
}
.chapter__sticky {
  position:sticky;
  top:0;
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  padding-top:clamp(96px,14vh,150px);
  pointer-events:none;
}
.chapter--left .chapter__sticky { justify-content:flex-start; }
.chapter--right .chapter__sticky { justify-content:flex-end; }
.chapter--hero .chapter__sticky,.chapter--final .chapter__sticky { justify-content:center; text-align:center; }
.chapter__sticky .chapter__card { pointer-events:auto; }

.chapter__beats {
  position:relative;
  min-height:9.2em;
  margin-top:2px;
}
.chapter__beat {
  position:absolute;
  inset:0;
  margin:0!important;
  opacity:0;
  transform:translateY(12px);
  visibility:hidden;
  transition:opacity .48s ease,transform .48s ease,visibility .48s ease;
}
.chapter__beat.is-active {
  opacity:1;
  transform:none;
  visibility:visible;
}
.chapter__beat.is-past {
  opacity:0;
  transform:translateY(-10px);
}
.chapter__card .stat,.chapter__card .chapter__accent,.chapter__card .prototype-note,.chapter__card #replay {
  position:relative;
}
@media(max-width:720px) {
  .chapter { min-height:calc(94svh + (var(--beat-count,1) * 68svh))!important; padding:0 12px!important; }
  .chapter__sticky { padding-top:92px; align-items:flex-start; }
  .chapter__beats { min-height:11.2em; }
}

/* V11 — map-priority layout */

/* Story always stays on the left and closer to the viewport edge. */
.chapter--left .chapter__sticky,
.chapter--right .chapter__sticky,
.chapter--hero .chapter__sticky,
.chapter--final .chapter__sticky {
  justify-content:flex-start!important;
  text-align:left!important;
}
.chapter {
  padding-left:clamp(10px,1.6vw,24px)!important;
  padding-right:clamp(10px,1.6vw,24px)!important;
}
.chapter__sticky {
  padding-top:clamp(82px,10vh,116px)!important;
  padding-bottom:150px;
}
.chapter__card,
.hero-card,
.final-card {
  width:min(410px,31vw)!important;
  max-width:410px;
  background:linear-gradient(145deg,rgba(79,26,35,.76),rgba(53,18,23,.64))!important;
  backdrop-filter:blur(13px) saturate(.92)!important;
  box-shadow:0 22px 62px rgba(53,18,23,.22)!important;
}
.chapter.is-active .chapter__card {
  opacity:.92!important;
}
.chapter__card.opacity-normal { opacity:.92!important; }
.chapter.is-active .chapter__card.opacity-soft { opacity:.62!important; }
.chapter.is-active .chapter__card.opacity-ghost { opacity:.28!important; }

/* While the user or camera is moving, text gets out of the way automatically. */
body.story-is-scrolling .chapter.is-active .chapter__card:not(.is-map-collapsed),
body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed) {
  opacity:.54!important;
  transition:opacity .16s ease!important;
}
body.map-action-active .chapter.is-active .chapter__card:not(.is-map-collapsed) {
  opacity:.38!important;
}

/* Forces in Action becomes a horizontal tactical strip along the bottom. */
.forces-panel {
  top:auto!important;
  bottom:12px!important;
  left:clamp(12px,1.5vw,22px)!important;
  right:clamp(12px,1.5vw,22px)!important;
  width:auto!important;
  max-height:118px!important;
  min-height:86px;
  padding:9px 12px!important;
  display:grid!important;
  grid-template-columns:180px minmax(0,1fr);
  gap:12px;
  overflow:hidden!important;
  background:rgba(53,18,23,.76)!important;
  backdrop-filter:blur(13px)!important;
  border-radius:13px!important;
}
.forces-panel__head {
  border-right:1px solid rgba(183,216,227,.13);
  border-bottom:0!important;
  padding:4px 12px 4px 2px!important;
}
.forces-panel__content {
  min-width:0;
  display:flex;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:3px;
  scrollbar-width:thin;
}
.forces-panel .force-group {
  flex:0 0 auto;
  min-width:max-content;
  margin:0!important;
  display:flex;
  align-items:center;
  gap:7px;
}
.forces-panel .force-group h3 {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  justify-content:center;
  gap:4px;
  height:66px;
  margin:0 2px 0 0!important;
}
.forces-panel .force-item {
  width:clamp(128px,13vw,176px)!important;
  min-width:128px;
  height:68px;
  padding:5px 7px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:8px;
  align-items:center;
  background:rgba(255,255,255,.025);
}
.forces-panel .force-item__commander {
  width:34px!important;
  height:42px!important;
}
.forces-panel .force-item__copy strong { font-size:8px!important; }
.forces-panel .force-item__copy em,
.forces-panel .force-item__copy small { font-size:6.5px!important; }
.forces-panel.opacity-normal { opacity:.88!important; }
.forces-panel.opacity-soft { opacity:.58!important; }
.forces-panel.opacity-ghost { opacity:.26!important; }

body.story-is-scrolling .forces-panel:not(.is-map-collapsed),
body.map-is-moving .forces-panel:not(.is-map-collapsed) {
  opacity:.42!important;
}
body.map-action-active .forces-panel:not(.is-map-collapsed) {
  opacity:.28!important;
}

/* A collapsed bottom strip becomes a small button at bottom-right. */
.forces-panel.is-map-collapsed {
  left:auto!important;
  right:14px!important;
  bottom:14px!important;
  width:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  height:52px!important;
  display:block!important;
}

/* Tablet: smaller left story card and shallower horizontal forces strip. */
@media (min-width:721px) and (max-width:1180px) {
  .chapter { padding-left:10px!important; padding-right:10px!important; }
  .chapter__sticky { padding-top:76px!important; padding-bottom:128px; }
  .chapter__card,.hero-card,.final-card {
    width:min(340px,38vw)!important;
    max-width:340px;
    padding:22px!important;
  }
  .chapter.is-active .chapter__card { opacity:.88!important; }
  body.story-is-scrolling .chapter.is-active .chapter__card:not(.is-map-collapsed),
  body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.44!important; }
  body.map-action-active .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.30!important; }

  .forces-panel {
    bottom:8px!important;
    left:8px!important;
    right:8px!important;
    min-height:78px;
    max-height:96px!important;
    grid-template-columns:145px minmax(0,1fr);
    padding:7px 9px!important;
  }
  .forces-panel .force-item {
    width:128px!important;
    min-width:128px;
    height:60px;
  }
  .forces-panel .force-item__copy em,
  .forces-panel .force-item__copy small { display:none!important; }
}

/* Mobile: the map occupies the upper visual field; story stays a translucent left/full-width sheet,
   with the compact Forces bar below. */
@media (max-width:720px) {
  .chapter {
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .chapter__sticky {
    padding-top:68px!important;
    padding-bottom:84px!important;
    align-items:flex-start!important;
  }
  .chapter__card,.hero-card,.final-card {
    width:min(94vw,430px)!important;
    max-width:none!important;
    padding:18px 17px!important;
    background:linear-gradient(145deg,rgba(79,26,35,.72),rgba(53,18,23,.60))!important;
  }
  .chapter.is-active .chapter__card { opacity:.88!important; }
  body.story-is-scrolling .chapter.is-active .chapter__card:not(.is-map-collapsed),
  body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.42!important; }
  body.map-action-active .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.28!important; }

  .forces-panel { display:none!important; }
  .forces-bar {
    background:rgba(53,18,23,.78)!important;
    backdrop-filter:blur(12px)!important;
  }
  body.story-is-scrolling .forces-bar,
  body.map-is-moving .forces-bar { opacity:.55; }
  body.map-action-active .forces-bar { opacity:.34; }

  h1 { font-size:clamp(38px,13vw,58px)!important; }
  h2 { font-size:clamp(28px,9vw,40px)!important; }
  .chapter__beats { min-height:9.8em!important; }
}

/* V12 — requested transparency levels */
.chapter.is-active .chapter__card,
.chapter__card.opacity-normal { opacity:.90!important; }
body.story-is-scrolling .chapter.is-active .chapter__card:not(.is-map-collapsed),
body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.80!important; }
body.map-action-active .chapter.is-active .chapter__card:not(.is-map-collapsed) { opacity:.70!important; }

.forces-panel.opacity-normal,.forces-panel { opacity:.90!important; }
body.story-is-scrolling .forces-panel:not(.is-map-collapsed),
body.map-is-moving .forces-panel:not(.is-map-collapsed) { opacity:.80!important; }
body.map-action-active .forces-panel:not(.is-map-collapsed) { opacity:.70!important; }

.forces-bar { opacity:.90!important; }
body.story-is-scrolling .forces-bar,
body.map-is-moving .forces-bar { opacity:.80!important; }
body.map-action-active .forces-bar { opacity:.70!important; }

.chapter--intro-screen {
  min-height:100svh!important;
  height:100svh!important;
  padding:0!important;
}
.chapter--intro-screen .chapter__sticky {
  position:relative!important;
  min-height:100svh!important;
  height:100svh!important;
  padding:0!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.chapter--intro-screen .chapter__card {
  width:min(760px,88vw)!important;
  max-width:760px!important;
  margin:auto!important;
  background:linear-gradient(145deg,rgba(79,26,35,.90),rgba(53,18,23,.86))!important;
  opacity:.96!important;
}
.chapter--intro-screen .chapter__beats {
  min-height:auto!important;
}
.chapter--intro-screen .chapter__beat {
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
body.intro-active .forces-panel,
body.intro-active .forces-bar,
body.intro-active #mapCaption,
body.intro-active .battle-fx,
body.intro-active .unit-marker {
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

#mapCaption {
  left:18px!important;
  right:auto!important;
  bottom:2px!important;
  top:auto!important;
  max-width:430px!important;
  text-align:left!important;
  transform:none!important;
  font-size:9px!important;
  letter-spacing:.13em!important;
  opacity:.72!important;
  z-index:29!important;
}
@media (min-width:721px) {
  .forces-panel { bottom:22px!important; }
}
@media (max-width:720px) {
  #mapCaption { display:none!important; }
}

@media (max-width:720px) {
  .chapter__beats {
    min-height:0!important;
    height:auto!important;
    display:grid;
  }
  .chapter__beat {
    grid-area:1/1;
    position:relative!important;
    min-height:0!important;
  }
  .chapter__beat:not(.is-active) {
    position:absolute!important;
    inset:0!important;
  }
  .chapter__card {
    padding-bottom:16px!important;
  }
}

.chapter__beats { min-height:7.2em!important; }
@media (max-width:1180px) and (min-width:721px) {
  .chapter__beats { min-height:7.8em!important; }
}

/* V13 — compact authoritative Forces strip */
.forces-panel,
.forces-panel.opacity-normal,
.forces-panel.opacity-soft,
.forces-panel.opacity-ghost,
body.story-is-scrolling .forces-panel,
body.map-is-moving .forces-panel,
body.map-action-active .forces-panel {
  opacity:1!important;
  background:#351217!important;
  backdrop-filter:none!important;
}
.forces-panel {
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  min-height:0!important;
  max-height:min(210px,27vh)!important;
  padding:8px 10px 9px!important;
  overflow:hidden!important;
}
.forces-panel__head {
  flex:0 0 auto;
  width:100%;
  min-height:25px;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:0 2px 6px!important;
  border-right:0!important;
  border-bottom:1px solid rgba(183,216,227,.14)!important;
}
.forces-panel__kicker {
  flex:0 0 auto;
  white-space:nowrap;
}
.forces-panel__scene {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:9px;
  overflow:hidden;
}
#forcesSceneLocation {
  flex:0 0 auto;
  color:var(--airborne-blue-soft);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
#forcesSceneTitle {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px!important;
  line-height:1.1;
}
.forces-panel__content {
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:flex-start!important;
  align-items:flex-start!important;
  gap:7px 10px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0!important;
}
.forces-panel .force-group {
  flex:1 1 420px!important;
  min-width:min(100%,340px)!important;
  width:auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:flex-start!important;
  gap:6px!important;
}
.forces-panel .force-group h3 {
  flex:0 0 34px!important;
  width:34px!important;
  height:58px!important;
  margin:0!important;
  writing-mode:vertical-rl!important;
  transform:rotate(180deg)!important;
}
.forces-panel .force-item {
  flex:1 1 142px!important;
  width:auto!important;
  min-width:132px!important;
  max-width:190px!important;
  height:58px!important;
  padding:5px 7px!important;
}
.forces-panel .force-item__commander {
  width:30px!important;
  height:38px!important;
}
.forces-panel .force-item__copy strong {
  font-size:7.5px!important;
  line-height:1.08!important;
}
.forces-panel .force-item__copy em,
.forces-panel .force-item__copy small {
  font-size:6.2px!important;
  line-height:1.05!important;
}

/* The old map caption has been replaced by the Forces scene heading. */
#mapCaption { display:none!important; }

/* Every story point reserves enough text height for its longest beat.
   All beats occupy the same grid cell; hidden beats still determine the grid row height. */
.chapter__beats {
  display:grid!important;
  min-height:0!important;
  height:auto!important;
}
.chapter__beat,
.chapter__beat.is-active,
.chapter__beat.is-past {
  grid-area:1 / 1!important;
  position:relative!important;
  inset:auto!important;
  min-height:0!important;
}
.chapter__beat:not(.is-active) {
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Intro contains one paragraph only and therefore cannot stack its old secondary beat. */
.chapter--intro-screen .chapter__beats {
  display:block!important;
  min-height:0!important;
}
.chapter--intro-screen .chapter__beat {
  position:relative!important;
  inset:auto!important;
}

/* Forces is always solid on mobile as well. */
.forces-bar,
body.story-is-scrolling .forces-bar,
body.map-is-moving .forces-bar,
body.map-action-active .forces-bar {
  opacity:1!important;
  background:#351217!important;
  backdrop-filter:none!important;
}
.forces-sheet {
  background:#351217!important;
  opacity:1!important;
}

@media (min-width:721px) and (max-width:1180px) {
  .forces-panel {
    max-height:min(190px,25vh)!important;
    padding:7px 8px 8px!important;
  }
  .forces-panel__head { gap:8px!important; }
  #forcesSceneLocation { font-size:7px; }
  #forcesSceneTitle { font-size:11px!important; }
  .forces-panel .force-group { flex-basis:320px!important; }
  .forces-panel .force-item {
    flex-basis:125px!important;
    min-width:118px!important;
    max-width:165px!important;
    height:54px!important;
  }
}

@media (max-width:720px) {
  /* No fixed paragraph reserve: card height follows the longest beat naturally. */
  .chapter__beats {
    display:grid!important;
    min-height:0!important;
    height:auto!important;
  }
  .chapter__beat,
  .chapter__beat:not(.is-active) {
    grid-area:1 / 1!important;
    position:relative!important;
    inset:auto!important;
  }
}

/* V14 — Forces header owns all scene metadata; no floating map caption remains */
.forces-panel__scene {
  flex:1 1 auto!important;
  justify-content:flex-start;
}
#forcesSceneLocation {
  color:var(--airborne-blue)!important;
  font-weight:900!important;
}
#forcesSceneTitle {
  color:var(--paper)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:600!important;
}
.map-caption,.pulse-dot { display:none!important; }

/* V15 — refined Forces layout */
.forces-panel {
  left:6px!important;
  right:6px!important;
  bottom:5px!important;
  max-height:min(220px,28vh)!important;
  padding:8px 14px 9px!important;
}
.forces-panel__head {
  min-height:31px!important;
  align-items:center!important;
  padding:0 4px 7px!important;
  gap:18px!important;
}
.forces-panel__kicker {
  display:flex!important;
  align-items:center!important;
  height:24px;
  margin:0!important;
  line-height:1!important;
}
.forces-panel__scene {
  display:flex!important;
  align-items:center!important;
  min-height:24px;
  gap:12px!important;
}
#forcesSceneLocation,
#forcesSceneTitle {
  display:flex!important;
  align-items:center!important;
  min-height:24px;
  margin:0!important;
  line-height:1.05!important;
}
#forcesSceneLocation {
  font-size:8px!important;
  letter-spacing:.14em!important;
}
#forcesSceneTitle {
  font-size:15px!important;
}

/* Groups consume only the width they need; Germany follows Allies immediately. */
.forces-panel__content {
  justify-content:flex-start!important;
  align-items:flex-start!important;
  align-content:flex-start!important;
  gap:8px!important;
}
.forces-panel .force-group {
  flex:0 1 auto!important;
  width:max-content!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.forces-panel .force-group + .force-group {
  margin-left:4px!important;
}
.forces-panel .force-item {
  flex:0 1 175px!important;
  width:175px!important;
  min-width:145px!important;
  max-width:190px!important;
  height:64px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

/* Unit card order: emblem -> text -> commander portrait. */
.force-item__badge {
  order:1;
  flex:0 0 auto!important;
}
.force-item__copy {
  order:2;
  flex:1 1 auto!important;
  min-width:0!important;
}
.commander-photo-button {
  order:3;
  flex:0 0 auto;
  width:38px;
  height:48px;
  padding:0;
  margin-left:auto;
  border:1px solid rgba(183,216,227,.26);
  border-radius:5px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  cursor:zoom-in;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.commander-photo-button:hover,
.commander-photo-button:focus-visible {
  transform:translateY(-1px) scale(1.04);
  border-color:var(--airborne-blue);
  box-shadow:0 5px 18px rgba(0,0,0,.3),0 0 0 2px rgba(143,197,216,.12);
  outline:none;
}
.commander-photo-button .force-item__commander {
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center top!important;
  filter:grayscale(1) contrast(1.06);
}

/* Cinematic commander lightbox. */
.commander-lightbox {
  position:fixed;
  z-index:120;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.commander-lightbox.is-open {
  opacity:1;
  visibility:visible;
}
.commander-lightbox__backdrop {
  position:absolute;
  inset:0;
  background:rgba(20,10,12,.74);
  backdrop-filter:blur(9px);
}
.commander-lightbox__panel {
  position:relative;
  z-index:1;
  width:min(620px,92vw);
  max-height:min(760px,88svh);
  display:grid;
  grid-template-columns:minmax(230px,1.05fr) minmax(220px,.95fr);
  overflow:hidden;
  border:1px solid rgba(183,216,227,.28);
  border-radius:18px;
  background:#351217;
  box-shadow:0 35px 110px rgba(0,0,0,.55);
}
.commander-lightbox__image-wrap {
  min-height:420px;
  background:#221419;
}
.commander-lightbox__image-wrap img {
  display:block;
  width:100%;
  height:100%;
  max-height:72svh;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(1) contrast(1.06);
}
.commander-lightbox__copy {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:32px 28px;
  background:linear-gradient(145deg,#491923,#351217);
}
.commander-lightbox__copy span {
  color:var(--airborne-blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}
.commander-lightbox__copy h2 {
  margin:8px 0 10px;
  color:var(--paper);
  font-size:clamp(27px,4vw,44px);
  line-height:.95;
}
.commander-lightbox__copy p {
  margin:0;
  color:#c9c0b2;
  font-size:12px;
  line-height:1.45;
}
.commander-lightbox__close {
  position:absolute;
  z-index:2;
  right:12px;
  top:12px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(20,10,12,.62);
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
body.commander-lightbox-open { overflow:hidden; }

@media (min-width:721px) and (max-width:1180px) {
  .forces-panel {
    left:5px!important;
    right:5px!important;
    bottom:4px!important;
  }
  .forces-panel__head { gap:10px!important; }
  #forcesSceneTitle { font-size:12px!important; }
  .forces-panel .force-item {
    flex-basis:155px!important;
    width:155px!important;
    min-width:132px!important;
    height:58px!important;
  }
  .commander-photo-button { width:34px;height:43px; }
}

@media (max-width:720px) {
  .commander-lightbox { padding:12px; }
  .commander-lightbox__panel {
    width:min(94vw,460px);
    grid-template-columns:1fr;
    max-height:88svh;
  }
  .commander-lightbox__image-wrap { min-height:0;height:56svh; }
  .commander-lightbox__copy { padding:20px 20px 22px; }
  .commander-lightbox__copy h2 { font-size:30px; }
}

/* V16 — shared alignment system */
:root {
  --story-left:clamp(14px,2.2vw,46px);
  --story-right:clamp(14px,2.2vw,46px);
}
.brand {
  left:var(--story-left)!important;
}
.chapter {
  padding-left:var(--story-left)!important;
  padding-right:var(--story-right)!important;
}
.chapter__card,
.hero-card,
.final-card {
  width:min(410px,31vw)!important;
}
.forces-panel {
  left:var(--story-left)!important;
  right:var(--story-right)!important;
}

/* Story-card headings are deliberately smaller to leave more map visible. */
.chapter__card h1 {
  font-size:clamp(42px,5.2vw,72px)!important;
  line-height:.92!important;
}
.chapter__card h2 {
  font-size:clamp(32px,4vw,56px)!important;
  line-height:.94!important;
}

/* Requested story-card opacity. */
.chapter.is-active .chapter__card,
.chapter__card.opacity-normal {
  opacity:.95!important;
}
body.story-is-scrolling .chapter.is-active .chapter__card:not(.is-map-collapsed),
body.map-is-moving .chapter.is-active .chapter__card:not(.is-map-collapsed) {
  opacity:.90!important;
}
body.map-action-active .chapter.is-active .chapter__card:not(.is-map-collapsed) {
  opacity:.80!important;
}

/* Forces is always completely opaque, regardless of scroll/camera/effects. */
.forces-panel,
.forces-panel.opacity-normal,
.forces-panel.opacity-soft,
.forces-panel.opacity-ghost,
body.story-is-scrolling .forces-panel,
body.map-is-moving .forces-panel,
body.map-action-active .forces-panel,
.forces-bar,
body.story-is-scrolling .forces-bar,
body.map-is-moving .forces-bar,
body.map-action-active .forces-bar {
  opacity:1!important;
}

/* Every unit named in Forces in Action remains fully visible on the map. */
.unit-marker.is-force-relevant,
.unit-marker.is-force-relevant.is-context,
.unit-marker.is-force-relevant.is-faded,
.unit-marker.is-force-relevant.is-moving {
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

/* Credits & info */
.credits-panel {
  width:min(540px,calc(100vw - 28px))!important;
  max-height:min(760px,88svh)!important;
  overflow-y:auto!important;
}
.credits-panel__kicker {
  color:var(--airborne-blue)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
}
.credits-panel section {
  padding:18px 0!important;
  border-top:1px solid rgba(183,216,227,.15);
}
.credits-panel section:first-of-type { border-top:0; }
.credits-panel section h2 {
  margin:0 0 8px!important;
  font-size:24px!important;
}
.credits-panel section p {
  margin:0 0 9px!important;
  line-height:1.55!important;
}

/* Tablet follows the exact same left/right visual rails. */
@media (min-width:721px) and (max-width:1180px) {
  :root {
    --story-left:12px;
    --story-right:12px;
  }
  .chapter__card,.hero-card,.final-card {
    width:min(340px,38vw)!important;
  }
  .chapter__card h1 { font-size:clamp(40px,6.5vw,62px)!important; }
  .chapter__card h2 { font-size:clamp(30px,5vw,46px)!important; }
}

/* Mobile: align brand, story cards and Forces UI to one 10px rail. */
@media (max-width:720px) {
  :root {
    --story-left:10px;
    --story-right:10px;
  }
  .chapter { padding-left:var(--story-left)!important; padding-right:var(--story-right)!important; }
  .chapter__card,.hero-card,.final-card {
    width:calc(100vw - (var(--story-left) + var(--story-right)))!important;
    max-width:none!important;
  }
  .chapter__card h1 { font-size:clamp(38px,11vw,54px)!important; }
  .chapter__card h2 { font-size:clamp(29px,8vw,40px)!important; }
}

/* V17 — stronger connection between map, Forces and header */

/* Header follows the same left rail as story/Forces. */
.hud {
  padding-left:var(--story-left)!important;
  padding-right:var(--story-right)!important;
}
.brand {
  margin-left:0!important;
  left:auto!important;
}
.brand__mark {
  width:46px!important;
  height:46px!important;
  padding:4px!important;
  background:#6d1f2a!important;
}
.brand__mark img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand strong {
  font-size:12px!important;
  letter-spacing:.13em!important;
}

/* Legend meaning lives on the force cards and in Credits & info. */
.force-item {
  position:relative;
  overflow:hidden;
}
.force-item::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--route-color,var(--airborne-blue));
  opacity:.82;
}
.force-item.is-map-active {
  background:rgba(143,197,216,.13)!important;
  border-color:rgba(143,197,216,.42)!important;
  box-shadow:inset 0 0 0 1px rgba(143,197,216,.08),0 0 16px rgba(143,197,216,.12)!important;
}
.force-item.is-map-active::before {
  width:5px;
  opacity:1;
  box-shadow:0 0 8px var(--route-color,var(--airborne-blue));
}
.force-item.is-map-primary {
  animation:forceCardActivePulse 1.5s ease-in-out infinite;
}
@keyframes forceCardActivePulse {
  0%,100% { box-shadow:inset 0 0 0 1px rgba(143,197,216,.08),0 0 10px rgba(143,197,216,.08); }
  50% { box-shadow:inset 0 0 0 1px rgba(143,197,216,.18),0 0 22px rgba(143,197,216,.22); }
}

/* Relevant map markers must remain fully visible. */
.unit-marker.is-force-relevant {
  opacity:1!important;
  visibility:visible!important;
}

/* Credits & info is a true centered, scroll-safe dialog. */
.credits-panel {
  top:50%!important;
  left:50%!important;
  right:auto!important;
  width:min(620px,calc(100vw - 32px))!important;
  max-height:min(78svh,760px)!important;
  transform:translate(-50%,-48%) scale(.985)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:24px!important;
  box-shadow:0 34px 110px rgba(0,0,0,.48)!important;
}
.credits-panel.is-open {
  transform:translate(-50%,-50%) scale(1)!important;
}
.credits-panel::before {
  content:"";
  position:fixed;
  inset:0;
}
.credits-panel section p:last-child { margin-bottom:0!important; }

/* Mobile shows only the compact Forces bar until explicitly opened. */
@media (max-width:720px) {
  .forces-panel {
    display:none!important;
  }
  .forces-bar {
    display:flex!important;
  }
  .forces-sheet {
    display:block!important;
    transform:translateY(105%)!important;
  }
  .forces-sheet.is-open {
    transform:translateY(0)!important;
  }
  .forces-backdrop {
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
  }
  .forces-backdrop.is-open {
    opacity:1!important;
    visibility:visible!important;
  }

  /* Mobile Credits & info becomes a clear circular info control. */
  .hud__info-button {
    display:grid!important;
    place-items:center;
    width:34px!important;
    height:34px!important;
    min-width:34px;
    padding:0!important;
    border-radius:50%!important;
    font-size:0!important;
  }
  .hud__info-button::before {
    content:"i";
    font:800 16px/1 Georgia,serif;
    color:var(--airborne-blue-soft);
    text-transform:none;
  }

  .credits-panel {
    width:calc(100vw - 20px)!important;
    max-height:82svh!important;
    padding:20px 18px 24px!important;
  }
}

/* Tablet/desktop header starts exactly on story rail. */
@media (min-width:721px) {
  .brand { transform:none!important; }
}

/* V18 — mobile/tablet Forces polish */
@media (max-width:720px) {
  .forces-sheet {
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    border-radius:22px 22px 0 0!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .forces-sheet__head,
  .forces-sheet__content {
    width:100%!important;
  }
  .forces-sheet__content .force-group {
    width:100%!important;
    margin:0!important;
  }
  .hud__info-button {
    position:relative;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
  }
  .hud__info-button::before {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-52%);
    width:1em;
    height:1em;
    display:grid;
    place-items:center;
    line-height:1!important;
  }
}

/* iPad/tablet: treat all Forces as one compact continuous flow instead of separated half-width groups. */
@media (min-width:721px) and (max-width:1180px) {
  .forces-panel__content {
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  .forces-panel .force-group {
    flex:0 1 auto!important;
    width:auto!important;
    max-width:100%!important;
    display:contents!important;
  }
  .forces-panel .force-group h3 {
    width:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    display:flex!important;
  }
  .forces-panel .force-item {
    flex:0 1 155px!important;
    width:155px!important;
    margin:0!important;
  }
}

/* Bridge photographs are story objects: clearly visible at the bridge during relevant scenes. */
.bridge-photo-marker.is-visible {
  opacity:1!important;
  visibility:visible!important;
  width:62px!important;
  transform:none!important;
  z-index:18!important;
  box-shadow:0 7px 24px rgba(53,18,23,.34)!important;
}
.bridge-photo-marker.is-visible img {
  width:54px!important;
  height:41px!important;
}
.bridge-photo-marker.is-visible span {
  display:block!important;
  font-size:6px!important;
}
.bridge-photo-marker { cursor:zoom-in!important; }

.commander-lightbox__credit {
  margin-top:18px!important;
  padding-top:12px;
  border-top:1px solid rgba(183,216,227,.15);
  color:rgba(244,238,226,.58)!important;
  font-size:8px!important;
  line-height:1.4!important;
}

/* Info & credits dialog remains centered above all map/story content. */
.credits-panel {
  z-index:110!important;
}

/* V19 — tighter photo lightbox typography */
.commander-lightbox__copy h2 {
  font-size:clamp(24px,3vw,38px)!important;
  line-height:1!important;
  overflow-wrap:anywhere;
}
@media(max-width:720px) {
  .commander-lightbox__copy h2 { font-size:27px!important; }
}

.unit-marker.is-force-relevant,
.unit-marker.is-force-relevant.is-context,
.unit-marker.is-force-relevant.is-complete,
.unit-marker.is-force-relevant.is-overview,
.unit-marker.is-force-relevant.is-moving,
.unit-marker.is-force-relevant.is-focus {
  opacity:1!important;
  visibility:visible!important;
}

.force-group h3 {
  font-size:clamp(5.5px,.55vw,8px)!important;
  letter-spacing:.10em!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(max-width:720px) {
  .forces-sheet .force-group h3 {
    font-size:9px!important;
    letter-spacing:.11em!important;
    writing-mode:horizontal-tb!important;
    transform:none!important;
    width:auto!important;
    height:auto!important;
  }
}

.forces-panel.is-hidden-scene,
.forces-bar.is-hidden-scene {
  display:none!important;
}

.story-photo-stage {
  position:fixed;
  z-index:34;
  inset:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.story-photo-stage.is-visible {
  opacity:1;
  visibility:visible;
}
.story-photo {
  position:absolute;
  top:50%;
  right:clamp(32px,8vw,150px);
  width:min(330px,25vw);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(244,238,226,.62);
  border-radius:11px;
  background:#351217;
  box-shadow:0 22px 60px rgba(35,17,20,.38);
  transform:translate(125%, -50%) rotate(.6deg);
  opacity:0;
  pointer-events:auto;
  cursor:zoom-in;
}
.story-photo-stage.is-visible .story-photo {
  animation:storyPhotoEnter .72s cubic-bezier(.2,.78,.18,1) forwards;
}
.story-photo-stage.is-leaving .story-photo {
  animation:storyPhotoLeave .58s ease-in forwards;
}
.story-photo img {
  display:block;
  width:100%;
  max-height:310px;
  object-fit:cover;
  filter:grayscale(1) contrast(1.04);
}
.story-photo__caption {
  display:block;
  padding:10px 12px 11px;
  text-align:left;
}
.story-photo__caption strong {
  display:block;
  color:var(--paper);
  font:600 13px/1.15 Georgia,serif;
}
.story-photo__caption small {
  display:block;
  margin-top:4px;
  color:var(--airborne-blue-soft);
  font-size:7px;
  line-height:1.3;
}
@keyframes storyPhotoEnter {
  0% { opacity:0; transform:translate(125%,-50%) rotate(.6deg); }
  100% { opacity:1; transform:translate(0,-50%) rotate(.6deg); }
}
@keyframes storyPhotoLeave {
  0% { opacity:1; transform:translate(0,-50%) rotate(.6deg); }
  100% { opacity:0; transform:translate(-145%,-50%) rotate(-.5deg); }
}
@media(max-width:900px) {
  .story-photo {
    right:18px;
    width:min(280px,34vw);
  }
}
@media(max-width:720px) {
  .story-photo {
    top:auto;
    right:14px;
    bottom:92px;
    width:min(240px,64vw);
    transform:translate(125%,0);
  }
  .story-photo-stage.is-visible .story-photo { animation:storyPhotoEnterMobile .65s ease-out forwards; }
  .story-photo-stage.is-leaving .story-photo { animation:storyPhotoLeaveMobile .5s ease-in forwards; }
  .story-photo img { max-height:190px; }
  @keyframes storyPhotoEnterMobile {
    from { opacity:0; transform:translateX(125%); }
    to { opacity:1; transform:translateX(0); }
  }
  @keyframes storyPhotoLeaveMobile {
    from { opacity:1; transform:translateX(0); }
    to { opacity:0; transform:translateX(-120%); }
  }
}

/* V20 — dedicated slow scroll-controlled historical-photo phase */
.chapter {
  min-height:calc(92svh + (var(--beat-count,1) * 58svh) + (var(--photo-scroll,0) * 150svh))!important;
}
.story-photo-stage {
  opacity:1!important;
  visibility:visible;
}
.story-photo-stage:not(.is-visible) {
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.story-photo {
  left:0!important;
  right:auto!important;
  top:50%!important;
  width:min(330px,25vw)!important;
  opacity:var(--photo-opacity,0)!important;
  transform:translate3d(var(--photo-x,110vw),-50%,0) rotate(.45deg)!important;
  animation:none!important;
  transition:none!important;
  will-change:transform,opacity;
}
.story-photo-stage.is-visible .story-photo,
.story-photo-stage.is-leaving .story-photo {
  animation:none!important;
}
@media(max-width:900px) {
  .story-photo { width:min(285px,34vw)!important; }
}
@media(max-width:720px) {
  .chapter {
    min-height:calc(94svh + (var(--beat-count,1) * 68svh) + (var(--photo-scroll,0) * 165svh))!important;
  }
  .story-photo {
    top:46%!important;
    bottom:auto!important;
    width:min(250px,66vw)!important;
    transform:translate3d(var(--photo-x,110vw),-50%,0)!important;
  }
}

/* Geographic unit symbols do not fly with a camera transition. */
body.map-is-moving .unit-marker {
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}

/* If a relevant force has a commander image, keep it visible on the map for
   the entire time that force is listed in Forces in Action. */
.unit-marker.is-force-relevant .unit-marker__commander {
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* V21 — mobile story photos always enter below the text card */
@media(max-width:720px) {
  .story-photo {
    top:var(--mobile-photo-top,52vh)!important;
    bottom:auto!important;
    max-height:var(--mobile-photo-max-h,210px)!important;
    transform:translate3d(var(--photo-x,110vw),0,0)!important;
  }
  .story-photo img {
    max-height:calc(var(--mobile-photo-max-h,210px) - 48px)!important;
    object-fit:cover;
  }
}

/* Every force listed in Forces in Action is a fully visible map object. */
.unit-marker.is-force-relevant {
  opacity:1!important;
  visibility:visible!important;
}

/* V22 — give historical photographs a longer readable passage */
.chapter[data-has-photo="true"] {
  --photo-scroll:1.28!important;
}
@media(max-width:720px) {
  .chapter[data-has-photo="true"] { --photo-scroll:1.38!important; }
}

/* V22 — cinematic battle effects. The camera remains settled while these play. */
.cinematic-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.paratrooper,.supply-drop{position:absolute;left:var(--x);top:13%;width:18px;height:34px;opacity:0;transform:translateX(0)}
.paratrooper-group.is-playing .paratrooper,.supply-drop-group.is-playing .supply-drop{animation:chuteDescent 6.4s cubic-bezier(.22,.62,.35,1) var(--delay) forwards}
.paratrooper__canopy,.supply-drop__canopy{position:absolute;left:1px;top:0;width:16px;height:8px;border:1.4px solid rgba(244,238,226,.95);border-bottom:0;border-radius:14px 14px 2px 2px;background:rgba(244,238,226,.2)}
.paratrooper__lines,.supply-drop__lines{position:absolute;left:4px;top:7px;width:10px;height:11px;border-left:1px solid rgba(244,238,226,.65);border-right:1px solid rgba(244,238,226,.65)}
.paratrooper__body{position:absolute;left:7px;top:19px;width:4px;height:8px;border-radius:50% 50% 2px 2px;background:#351217}
.supply-drop__container{position:absolute;left:5px;top:19px;width:8px;height:9px;background:#6d1f2a;border:1px solid rgba(244,238,226,.55)}
@keyframes chuteDescent{0%{opacity:0;transform:translate3d(0,-12vh,0) scale(.75)}10%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),57vh,0) scale(1.05)}}

.glider{position:absolute;right:-90px;top:var(--y);width:70px;height:22px;opacity:0;transform:rotate(-5deg)}
.glider-group.is-playing .glider{animation:gliderApproach 5.8s cubic-bezier(.2,.62,.28,1) var(--delay) forwards}
.glider__wing{position:absolute;left:0;top:7px;width:68px;height:5px;background:rgba(244,238,226,.88);clip-path:polygon(0 35%,44% 0,100% 35%,57% 65%,42% 65%)}
.glider__body{position:absolute;left:30px;top:2px;width:9px;height:19px;background:#e5dcc8;clip-path:polygon(42% 0,62% 0,100% 100%,0 100%)}
@keyframes gliderApproach{0%{opacity:0;transform:translate3d(0,-15px,0) rotate(-7deg) scale(.72)}10%{opacity:1}86%{opacity:.96}100%{opacity:0;transform:translate3d(-92vw,18vh,0) rotate(1deg) scale(1.12)}}

.artillery-shell{position:absolute;left:25%;bottom:23%;width:2px;height:2px;opacity:0}
.artillery-shell::before{content:"";position:absolute;width:150px;height:80px;left:0;bottom:0;border-top:1px solid rgba(244,220,174,.75);border-radius:50% 50% 0 0;transform:rotate(-14deg);transform-origin:left bottom}
.artillery-shell.is-playing{animation:shellArc .9s ease-in forwards}
@keyframes shellArc{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:0;left:var(--impact-x);bottom:calc(100% - var(--impact-y))}}
.artillery-impact{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);opacity:0}
.artillery-impact>i{position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0 10%,#c87935 25%,#572126 50%,transparent 72%)}
.artillery-impact>i:nth-child(2){animation-delay:.08s;transform:scale(.7) translate(9px,-5px)}
.artillery-impact>i:nth-child(3){animation-delay:.16s;transform:scale(.55) translate(-11px,4px)}
.artillery-impact.is-playing{animation:impactBase 3.1s ease-out forwards}
.artillery-impact.is-playing>i{animation:impactBloom 1.2s ease-out forwards}
@keyframes impactBase{0%{opacity:0}5%{opacity:1}68%{opacity:.7}100%{opacity:0;transform:translate(-50%,-80%) scale(2.2)}}
@keyframes impactBloom{0%{opacity:0;filter:blur(0);scale:.3}15%{opacity:1;scale:1.8}100%{opacity:0;filter:blur(5px);scale:3.2}}

body.cinematic-action-active .map-stage{transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){
  .cinematic-fx{display:none!important}
}

/* V23 — geographically anchored airborne effects */
.geo-aircraft {
  width:28px;height:28px;display:grid;place-items:center;
  color:#351217;font-size:22px;line-height:1;
  text-shadow:0 1px 3px rgba(244,238,226,.8);
  pointer-events:none;
}
.geo-aircraft--glider { width:54px;height:24px;position:relative; }
.geo-glider__wing{position:absolute;left:0;top:9px;width:52px;height:4px;background:#eee4d0;clip-path:polygon(0 40%,43% 0,100% 40%,57% 70%,42% 70%)}
.geo-glider__body{position:absolute;left:23px;top:3px;width:8px;height:18px;background:#ded3bf;clip-path:polygon(42% 0,62% 0,100% 100%,0 100%)}
.geo-drop-group{position:absolute;width:130px;height:170px;transform:translate(-50%,-20%);pointer-events:none;z-index:4}
.geo-drop-group .paratrooper,.geo-drop-group .supply-drop{left:calc(50% + var(--x));top:0}
.geo-drop-group.is-playing .paratrooper,.geo-drop-group.is-playing .supply-drop{animation:chuteDescent 6.4s cubic-bezier(.22,.62,.35,1) var(--delay) forwards}
.geo-artillery-impact{position:absolute!important;transform:translate(-50%,-50%)!important}

/* V25 — geographic bridge-photo anchors */
.bridge-photo-anchor {
  width:0!important;
  height:0!important;
  pointer-events:none;
  overflow:visible!important;
}
.bridge-photo-anchor .bridge-photo-marker {
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  pointer-events:auto;
  transform:translate(-50%,0) scale(.9)!important;
  transform-origin:50% 100%;
}
.bridge-photo-anchor .bridge-photo-marker.is-visible {
  transform:translate(-50%,0) scale(1)!important;
}
.bridge-photo-anchor .bridge-photo-marker:hover {
  transform:translate(-50%,0) scale(1.08)!important;
}
/* Never apply transforms to the MapLibre-owned outer marker itself. */
.maplibregl-marker.bridge-photo-anchor {
  transform-origin:0 0!important;
}

/* V26 — long side labels remain a single vertical word */
.forces-panel .force-group h3 {
  font-size:5px!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  height:66px!important;
  min-height:66px!important;
}
@media (min-width:721px) and (max-width:1180px) {
  .forces-panel .force-group h3 {
    font-size:4.8px!important;
    letter-spacing:.04em!important;
    height:62px!important;
    min-height:62px!important;
  }
}

/* V27 — map action priority and airborne zone labels */
/* Bridge photos remain geographically attached, but tactical units always render above them. */
.bridge-photo-anchor { z-index:24!important; }
.unit-marker { z-index:46!important; }
.unit-marker.is-force-relevant { z-index:58!important; }
.unit-marker.is-moving,.unit-marker.is-focus { z-index:72!important; }
.unit-marker.is-moving .unit-marker__commander,
.unit-marker.is-force-relevant .unit-marker__commander { z-index:3!important; }

.unit-marker.unit-start-pulse .unit-marker__formation {
  animation:unitStartPulse 1.02s cubic-bezier(.2,.72,.22,1) both!important;
}
.unit-marker.unit-start-pulse::after {
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:38px;height:38px;
  border:2px solid rgba(143,197,216,.85);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.45);
  pointer-events:none;
  animation:unitStartRing 1.0s ease-out both;
}
@keyframes unitStartPulse {
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.16)}
}
@keyframes unitStartRing {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}
}

.air-zone-label {
  min-width:54px;
  padding:5px 7px 6px;
  border:1px solid rgba(109,31,42,.68);
  border-radius:7px;
  background:rgba(244,238,226,.9);
  color:#4b2529;
  box-shadow:0 5px 18px rgba(53,18,23,.22);
  text-align:center;
  opacity:0;
  transform:translateY(5px) scale(.9);
  transition:opacity .32s ease,transform .32s ease;
  pointer-events:none;
  z-index:35;
}
.air-zone-label.is-visible { opacity:.92;transform:none; }
.air-zone-label.is-leaving { opacity:0;transform:translateY(-5px) scale(.94); }
.air-zone-label strong {
  display:block;
  font:900 9px/1 Georgia,serif;
  letter-spacing:.08em;
  color:#6d1f2a;
}
.air-zone-label span {
  display:block;
  margin-top:3px;
  max-width:92px;
  font-size:6px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.035em;
}

@media(max-width:720px){
  .air-zone-label { padding:4px 6px 5px;min-width:48px; }
  .air-zone-label strong { font-size:8px; }
  .air-zone-label span { font-size:5.5px;max-width:76px; }
}

/* V28 — contextual labels are always below tactical/action layers */
.air-zone-label {
  z-index:14!important;
}
.bridge-photo-anchor {
  z-index:24!important;
}
.unit-marker {
  z-index:52!important;
}
.unit-marker.is-force-relevant {
  z-index:62!important;
}
.unit-marker.is-moving,
.unit-marker.is-focus {
  z-index:74!important;
}
.geo-aircraft,
.geo-aircraft--glider {
  z-index:88!important;
}
.geo-drop-group,
.paratrooper-group,
.glider-group,
.supply-drop-group {
  z-index:84!important;
}
.geo-artillery-impact,
.artillery-group {
  z-index:82!important;
}

/* Debug-friendly device mode is intentionally data-only; no visible badge. */
body[data-scene-layout="tablet"] .map-stage,
body[data-scene-layout="mobile"] .map-stage {
  --responsive-scene-director:1;
}

/* V29 — Info & credits typography */
.credits-panel__titleblock {
  padding:2px 42px 18px 0;
  border-bottom:1px solid rgba(183,216,227,.18);
  margin-bottom:4px;
}
.credits-panel__titleblock .credits-panel__kicker {
  margin:0 0 7px!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
}
.credits-panel__titleblock h1 {
  margin:0!important;
  color:var(--paper)!important;
  font:700 clamp(24px,3vw,36px)/.95 Georgia,"Times New Roman",serif!important;
  letter-spacing:.025em!important;
}
.credits-panel section h2 {
  margin:0 0 9px!important;
  color:var(--airborne-blue-soft)!important;
  font:700 17px/1.05 Georgia,"Times New Roman",serif!important;
  letter-spacing:.01em!important;
}
.credits-panel section p {
  margin:0 0 10px!important;
  color:#d9d0c2!important;
  font-size:11px!important;
  line-height:1.62!important;
}
.credits-panel__credits-intro {
  color:var(--paper)!important;
  font-size:11.5px!important;
  line-height:1.58!important;
  margin-bottom:14px!important;
}
@media(max-width:720px) {
  .credits-panel__titleblock h1 {
    font-size:27px!important;
  }
  .credits-panel section h2 {
    font-size:16px!important;
  }
  .credits-panel section p,
  .credits-panel__credits-intro {
    font-size:10.5px!important;
  }
}