/* FELDZUG – start page sections (loaded only by index.html, after site.css).
   Hero · numbers · atlas · armies/classes/counter wheel · formation lab + compare slider · fog demo · morale · commander ·
   trajectory · battle log · gallery/lightbox · final call. Only transform/opacity are animated. */

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: max(36rem, 100svh); display: flex; flex-direction: column; justify-content: center; color: var(--parch); overflow: hidden; isolation: isolate; background: var(--night); }
.hero-stage { position: absolute; inset: 0; z-index: -1; }
.hero-slides, .hero-slides .slide { position: absolute; inset: -4%; }
.hero-slides { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px + var(--sy, 0) * 90px), 0) scale(1.02); }
.hero-slides .slide { inset: 0; opacity: 0; transition: opacity 2.2s var(--ease-in-out); }
.hero-slides .slide.active { opacity: 1; }
.hero-slides picture { position: absolute; inset: 0; }
.hero-slides img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.hero-slides .slide.active img, .hero-slides .slide.leaving img { animation: kenburns 16s linear both; }
.hero-slides .slide:nth-child(2n) img { transform-origin: 30% 60%; }
.hero-slides .slide:nth-child(3n) img { transform-origin: 70% 30%; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero-mist { position: absolute; left: -10%; right: -10%; height: 55%; background: url("/assets/img/ui/mist.svg") repeat-x 0 0 / 1600px 100%; pointer-events: none; mix-blend-mode: screen; }
.hero-mist.m1 { bottom: 8%; opacity: .32; transform: translate3d(calc(var(--px, 0) * -30px), 0, 0); animation: mist 90s linear infinite; }
.hero-mist.m2 { bottom: -12%; height: 70%; opacity: .26; background-size: 2200px 100%; transform: translate3d(calc(var(--px, 0) * -60px), 0, 0); animation: mist 140s linear infinite reverse; }
@keyframes mist { to { background-position: 1600px 0; } }
.hero-mist.m2 { animation-name: mist2; }
@keyframes mist2 { to { background-position: -2200px 0; } }
.hero-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 80% 6%, rgba(255, 186, 104, .26), transparent 70%),
    radial-gradient(42% 30% at 50% 46%, rgba(4, 7, 11, .5), transparent 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(4, 7, 11, .8) 100%),
    linear-gradient(180deg, rgba(4, 7, 11, .6) 0%, rgba(4, 7, 11, .2) 24%, rgba(4, 7, 11, .38) 58%, rgba(5, 9, 14, .97) 100%); }
.ridge { position: absolute; left: -3%; right: -3%; bottom: -1px; width: 106%; height: clamp(7rem, 17vw, 15rem); overflow: visible; pointer-events: none; transform: translate3d(calc(var(--px, 0) * -38px), calc(var(--sy, 0) * -40px), 0); }
.ridge path { fill: none; stroke: #04070b; stroke-width: 2.2; stroke-linecap: round; }
.ridge .r-ground { fill: #05090e; stroke: none; }
.ridge .r-banner { fill: #05090e; stroke-width: 3; }
.hero-content { position: relative; padding-block: clamp(6rem, 14vh, 9rem) clamp(7rem, 16vh, 10rem); text-align: center; transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--sy, 0) * -60px), 0); opacity: calc(1 - var(--sy, 0) * 1.4); }
.hero-eyebrow { font: 600 clamp(.7rem, .6rem + .3vw, .9rem)/1 var(--label); letter-spacing: .45em; text-transform: uppercase; color: var(--parch-2); margin: 0 0 1.4rem; padding-left: .45em; }
.hero-title { margin: 0; line-height: .9; }
.hero-title .letters { position: relative; display: inline-flex; font: 400 clamp(3.6rem, 1rem + 11vw, 11.5rem)/1 var(--serif); letter-spacing: .14em; padding-left: .14em; background: none; color: inherit; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6)); }
.hero-title .letters span { display: inline-block; background: linear-gradient(180deg, #fff3cf 0%, var(--gold-hi) 18%, var(--gold) 52%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* shimmer: an identical text layer with a moving light band, clipped to the glyphs */
.hero-title .letters::after { content: "FELDZUG"; position: absolute; inset: 0; padding-left: .14em; pointer-events: none; color: transparent;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 250, 230, .85) 50%, transparent 58%) 160% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  animation: shimmer 7s ease-in-out 2.4s infinite; }
/* letter reveal: each letter rises out of a blur */
.js .hero-title .letters span { opacity: 0; transform: translateY(.35em) scale(.96); filter: blur(10px); animation: letter 1.1s var(--ease) forwards; }
.js .hero-title .letters span:nth-child(1) { animation-delay: .25s; } .js .hero-title .letters span:nth-child(2) { animation-delay: .35s; }
.js .hero-title .letters span:nth-child(3) { animation-delay: .45s; } .js .hero-title .letters span:nth-child(4) { animation-delay: .55s; }
.js .hero-title .letters span:nth-child(5) { animation-delay: .65s; } .js .hero-title .letters span:nth-child(6) { animation-delay: .75s; }
.js .hero-title .letters span:nth-child(7) { animation-delay: .85s; }
.js:not(.no-loader):not(.loaded) .hero-title .letters span { animation-play-state: paused; }
@keyframes letter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes shimmer { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.hero-rule { max-width: 26rem; margin: 1.6rem auto; color: var(--gold); }
.js .hero-rule::before, .js .hero-rule::after { transform-origin: right; animation: rule-in 1.2s var(--ease) 1.1s both; }
.js .hero-rule::after { transform: scaleX(-1); transform-origin: right; animation-name: rule-in-r; }
.js .hero-rule i { animation: pop .6s var(--spring) 1.2s both; }
@keyframes rule-in { from { transform: scaleX(0); } }
@keyframes rule-in-r { from { transform: scaleX(0); } to { transform: scaleX(-1); } }
@keyframes pop { from { transform: rotate(45deg) scale(0); } }
.hero-tag { font: italic 400 clamp(1.1rem, .95rem + .7vw, 1.6rem)/1.45 var(--serif); color: #efe6d0; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); margin: 0 auto 2.2rem; }
.hero-cta { justify-content: center; }
.hero-cta .btn { min-height: 3.3rem; padding-inline: 1.9rem; font-size: .92rem; }
.js .hero-tag, .js .hero-cta, .js .hero-eyebrow, .js .hero-status { animation: rise 1s var(--ease) both; }
.js .hero-eyebrow { animation-delay: .1s; } .js .hero-tag { animation-delay: 1.2s; } .js .hero-cta { animation-delay: 1.4s; } .js .hero-status { animation-delay: 1.7s; }
.js:not(.no-loader):not(.loaded) :is(.hero-tag, .hero-cta, .hero-eyebrow, .hero-status, .hero-rule i) { animation-play-state: paused; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero-status { margin: 1.6rem 0 0; font: 600 .74rem/1.4 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--parch-2); min-height: 1.4em; }
.hero-status:not(:empty)::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #7fd08e; box-shadow: 0 0 10px #7fd08e; margin-right: .6rem; vertical-align: .08em; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero-foot { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vh, 2rem); display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.hero-dots { display: flex; gap: .45rem; }
.hero-dots button { width: 2.2rem; height: 1.2rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(236, 228, 207, .3); }
.hero-dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.hero-dots button.on::after { animation: dotfill 8s linear forwards; }
@keyframes dotfill { to { transform: scaleX(1); } }
.hero-cap { margin: 0; font: italic .9rem/1.3 var(--serif); color: var(--parch-2); text-align: right; flex: 1; transition: opacity .6s; }
.hero-cap.swap { opacity: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; width: 1.6rem; height: 2.6rem; margin-left: -.8rem; border: 1px solid rgba(236, 228, 207, .45); border-radius: 1rem; }
.scroll-cue span { position: absolute; left: 50%; top: .5rem; width: 3px; height: .55rem; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(1rem); } }
@media (max-width: 40rem) { .hero-cap { display: none; } .hero-foot { justify-content: flex-start; } }

/* ---------------------------------------------------------------- chapter nav (scroll spy) */
.chapters { position: fixed; right: 1.1rem; top: 50%; z-index: 40; display: none; flex-direction: column; gap: .2rem; transform: translateY(-50%); transition: opacity .5s, visibility .5s; }
.js .chapters:not(.shown) { opacity: 0; visibility: hidden; }
@media (min-width: 84rem) { .chapters { display: flex; } }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; height: 1.6rem; text-decoration: none; color: var(--ink-2); }
.chapters a::after { content: ""; width: .5rem; height: .5rem; transform: rotate(45deg); border: 1px solid currentColor; transition: background var(--t), transform var(--t) var(--spring), box-shadow var(--t); }
.chapters a span { font: 600 .66rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity var(--t), transform var(--t); background: var(--glass-2); padding: .35rem .5rem; border: 1px solid var(--line); }
.chapters a:hover span, .chapters a:focus-visible span, .chapters a.active span { opacity: 1; transform: none; }
.chapters a.active { color: var(--accent); }
.chapters a.active::after { background: var(--gold); transform: rotate(45deg) scale(1.3); box-shadow: 0 0 10px var(--gold); }
.chapters a.active span { opacity: 0; }
.chapters:hover a span { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- numbers band */
.numbers { position: relative; background: linear-gradient(180deg, #05090e, var(--bg)); padding-block: 1rem 0; }
#schlachtfeld { padding-top: clamp(3rem, 6vw, 5rem); }
:root[data-theme="light"] .numbers { background: linear-gradient(180deg, #05090e 0%, #22201a 35%, var(--bg) 100%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .numbers { background: linear-gradient(180deg, #05090e 0%, #22201a 35%, var(--bg) 100%); } }
.num-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); border-block: 1px solid var(--line); }
.num-row li { background: color-mix(in srgb, var(--bg) 92%, #05090e); padding: 1.6rem .8rem; text-align: center; position: relative; }
.num-row b { display: block; font: 400 clamp(2.6rem, 2rem + 2vw, 3.8rem)/1 var(--serif); color: var(--accent); text-shadow: 0 0 30px color-mix(in srgb, var(--gold) 35%, transparent); }
.num-row span { display: block; margin-top: .5rem; font: 600 .78rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.num-row small { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .8rem; }

/* ---------------------------------------------------------------- atlas (interactive map) */
.atlas { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .atlas { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; } }
.atlas-map { position: relative; border-radius: var(--radius); overflow: visible; background: var(--night); box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); }
.atlas-map img { border-radius: var(--radius); filter: saturate(.85) contrast(1.05); }
.atlas-map::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; background: radial-gradient(80% 80% at 50% 50%, transparent 55%, rgba(5, 9, 14, .55)); }
.base { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; font: 600 .62rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; padding: .3rem .5rem; color: #fff; background: rgba(5, 9, 14, .7); border: 1px solid rgba(255, 255, 255, .2); }
.base-n { top: 9%; border-color: #c9382b; } .base-s { bottom: 9%; border-color: var(--knight); }
.pins { position: absolute; inset: 0; z-index: 3; }
.pin { position: absolute; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border: 0; padding: 0; background: none; cursor: pointer; }
.pin::before { content: ""; position: absolute; inset: .7rem; transform: rotate(45deg); background: var(--gold); border: 2px solid #fff6d8; box-shadow: 0 0 0 4px rgba(5, 9, 14, .45), 0 0 14px var(--gold); transition: transform var(--t) var(--spring); }
.pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
.pin[aria-selected="true"]::before { transform: rotate(45deg) scale(1.35); background: #fff1c9; }
.pin[aria-selected="true"]::after { animation: ping 2s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
.pin span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .1rem); white-space: nowrap; font: 600 .66rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px #000, 0 0 10px #000; pointer-events: none; }
.pin:hover::before, .pin:focus-visible::before { transform: rotate(45deg) scale(1.3); }
.p-huegel { left: 50%; top: 48.9%; } .p-weiler { left: 27.7%; top: 53.9%; } .p-wacht { left: 77.1%; top: 57.8%; } .p-hohlweg { left: 33.5%; top: 35.6%; } .p-weizen { left: 41.5%; top: 70%; }
.atlas-view { position: relative; display: grid; }
.atlas-view .view { grid-area: 1 / 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); background: var(--night); opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity .7s var(--ease), transform 1.2s var(--ease), visibility 0s .7s; }
.atlas-view .view.active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.atlas-view .view img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.atlas-view figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.2rem 1rem; color: var(--parch); background: linear-gradient(transparent, rgba(5, 9, 14, .9)); font-size: .95rem; }
.atlas-view figcaption b { font: 400 1.25rem var(--serif); color: var(--gold); margin-right: .3rem; }
html:not(.js) .atlas-view .view { position: relative; opacity: 1; visibility: visible; grid-area: auto; transform: none; margin-bottom: 1rem; }
.routes { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.routes li { padding: 1rem 1.2rem; border-left: 2px solid var(--gold); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent); color: var(--ink-2); }
.routes b { display: block; font: 400 1.15rem var(--serif); color: var(--accent); margin-bottom: .2rem; }

/* ---------------------------------------------------------------- armies */
.duel { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: clamp(3rem, 6vw, 5rem); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); background: var(--night); overflow: hidden; border-radius: var(--radius); }
@media (min-width: 52rem) { .duel { grid-template-columns: 1fr 1fr; } }
.duel .side { position: relative; overflow: hidden; min-height: clamp(18rem, 30vw, 26rem); }
.duel .side picture { position: absolute; inset: 0; }
.duel .side img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1s; filter: saturate(.9) brightness(.85); }
.duel .side:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
@media (min-width: 52rem) {
  .duel .knights { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); margin-right: -4%; }
  .duel .orcs { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); margin-left: -4%; }
}
.duel .side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.duel .knights::after { background: linear-gradient(90deg, rgba(20, 45, 90, .55), transparent 60%), linear-gradient(0deg, rgba(5, 9, 14, .92), transparent 65%); }
.duel .orcs::after { background: linear-gradient(270deg, rgba(60, 25, 15, .55), transparent 60%), linear-gradient(0deg, rgba(5, 9, 14, .92), transparent 65%); }
.duel figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem 1.6rem; color: var(--parch-2); max-width: 30rem; }
.duel .orcs figcaption { left: auto; text-align: right; }
.duel figcaption b { display: block; font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.15 var(--serif); color: #fff; margin: .6rem 0 .3rem; }
.duel .knights .chip { color: #a9c8f2; border-color: rgba(120, 165, 230, .6); background: rgba(40, 80, 140, .35); }
.duel .orcs .chip { color: #f0b39e; border-color: rgba(220, 120, 90, .6); background: rgba(140, 50, 30, .35); }
.versus { display: none; }
@media (min-width: 52rem) {
  .versus { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; z-index: 2; width: 5.4rem; height: 5.4rem; margin: -2.7rem 0 0 -2.7rem; transform: rotate(45deg); background: radial-gradient(circle, #1a2a3c, #070c12); border: 1px solid var(--gold); box-shadow: 0 0 0 6px rgba(5, 9, 14, .6), 0 0 40px rgba(219, 179, 97, .35); }
  .versus span { transform: rotate(-45deg); font: italic 400 1.15rem var(--serif); color: var(--gold); }
}
.sub-title { text-align: center; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-bottom: 1.8rem; }
.classes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.cls { display: flex; flex-direction: column; padding: 1.5rem 1.3rem 1.3rem; }
.cls-icon { width: 3rem; height: 3rem; color: var(--gold); stroke-width: 1.2; margin-bottom: 1rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 45%, transparent)); transform: translateZ(30px); }
.cls h4 { font-size: 1.35rem; margin: 0 0 .15rem; color: var(--ink); }
.cls .role { font: 600 .66rem/1.35 var(--label); letter-spacing: .08em; min-height: 2.7em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.cls p { font-size: .94rem; color: var(--ink-2); }
.cls .ability { min-height: 4.2rem; align-content: flex-start; margin-top: auto; margin-bottom: 0; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cls .ability small { color: var(--ink-2); width: 100%; font-size: .78rem; }
.note { margin-top: 1rem; }
.counter-wheel { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 46rem; display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .counter-wheel { grid-template-columns: 20rem 1fr; } }
.cw { width: 100%; max-width: 22rem; margin-inline: auto; overflow: visible; }
.cw-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 6; }
.cw-arc { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cw-head { fill: var(--gold); }
.js .counter-wheel:not(.in) .cw-arc { stroke-dashoffset: 1; }
.js .counter-wheel .cw-arc { transition: stroke-dashoffset 1s var(--ease-in-out); }
.js .counter-wheel .cw-arc:nth-of-type(2) { transition-delay: .5s; } .js .counter-wheel .cw-arc:nth-of-type(3) { transition-delay: .8s; }
.js .counter-wheel .cw-arc:nth-of-type(4) { transition-delay: 1.1s; } .js .counter-wheel .cw-arc:nth-of-type(5) { transition-delay: 1.4s; }
.cw-node circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.cw-node use { color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cw-node text { text-anchor: middle; font: 600 10px var(--label); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.cw-center { text-anchor: middle; font: italic 15px var(--serif); fill: var(--ink-2); }
.counter-wheel figcaption { color: var(--ink-2); }
.counter-wheel .cw-node { transition: transform .4s var(--spring); }

/* ---------------------------------------------------------------- formation lab */
.formation-lab { padding: 1rem; }
.f-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.f-tabs button { flex: 1 1 auto; min-height: 2.4rem; padding: .4rem .7rem; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 600 .72rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.f-tabs button:hover { color: var(--ink); border-color: var(--line-strong); }
.f-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #5d4a24, #3b2f17); color: #f6dc9c; border-color: var(--gold); box-shadow: 0 0 14px -4px var(--gold); }
#formation-canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 40%, #2a4026, #16241a 70%, #0d160f); border: 1px solid var(--line); border-radius: 2px; }
.f-info { margin: .8rem .2rem 0; font-size: .92rem; color: var(--ink-2); min-height: 3em; }
.f-info b { color: var(--accent); font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
/* compare slider */
.compare { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); background: var(--night); --pos: 50%; touch-action: pan-y; }
.compare .cmp-a img, .compare .cmp-b img { width: 100%; }
.compare .cmp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare .cmp-b img { height: 100%; object-fit: cover; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; min-height: 0; padding: 0; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 12px var(--gold); z-index: 2; pointer-events: none; }
.cmp-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 9, 14, .8); border: 1px solid var(--gold); color: var(--gold); font: 700 1rem/1 var(--label); letter-spacing: .1em; }
.cmp-range:focus-visible ~ .cmp-handle::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.cmp-label { position: absolute; bottom: .8rem; z-index: 2; font: 600 .7rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(5, 9, 14, .7); padding: .4rem .6rem; border: 1px solid var(--line-strong); pointer-events: none; }
.cmp-label.l { left: .8rem; } .cmp-label.r { right: .8rem; }
.cap-below { margin: .8rem 0 0; }

/* ---------------------------------------------------------------- fog demo */
.fogsec { overflow: hidden; }
.fogsec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 55%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%); }
.fog-demo { max-width: 66rem; margin-inline: auto; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); background: var(--night); touch-action: pan-y; cursor: crosshair; margin-bottom: 2rem; }
.fog-demo img { width: 100%; aspect-ratio: 992 / 558; object-fit: cover; }
.fog-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html:not(.js) .fog-canvas, html:not(.js) .fog-toggle { display: none; }
.fog-hud { position: absolute; left: 1rem; top: 1rem; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: rgba(5, 9, 14, .75); border: 1px solid var(--line-strong); font: 600 .7rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--parch); }
.fog-hud .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #777; transition: background .3s, box-shadow .3s; }
.fog-demo.spotted .fog-hud .dot { background: #e2564a; box-shadow: 0 0 10px #e2564a; animation: blink 1.2s infinite; }
.fog-demo .fog-toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; background: rgba(5, 9, 14, .7); color: var(--parch); border-color: rgba(236, 228, 207, .45); }

/* ---------------------------------------------------------------- morale */
.morale { padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
.m-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.m-name { font: 400 1.3rem var(--serif); color: var(--ink); }
.m-badge { font: 600 .68rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; padding: .35rem .55rem; border: 1px solid var(--ok); color: var(--ok); transition: color .3s, border-color .3s; }
.m-badge.waver { border-color: #e5b53a; color: #e5b53a; }
.m-badge.rout { border-color: #e2564a; color: #e2564a; animation: blink 1s infinite; }
.m-badge.rally { border-color: var(--knight); color: #7fb0f0; }
.m-time { margin-left: auto; font: 600 .9rem var(--label); color: var(--ink-2); }
.m-track { position: relative; height: 1.1rem; background: color-mix(in srgb, var(--ink) 12%, transparent); border: 1px solid var(--line-strong); overflow: hidden; }
.m-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(.8); background: linear-gradient(90deg, #2b6b3e, #61b06e); transition: transform .25s linear; }
.m-fill.waver { background: linear-gradient(90deg, #8a6417, #e5b53a); }
.m-fill.rout { background: linear-gradient(90deg, #6e1712, #e2564a); }
.m-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255, 255, 255, .55); }
.m-mark.t40 { left: 40%; } .m-mark.t20 { left: 20%; }
.m-scale { position: relative; height: 1.3rem; font: 600 .62rem/1.3rem var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; }
.m-scale .s20, .m-scale .s40 { position: absolute; transform: translateX(-50%); }
.m-scale .s20 { left: 20%; } .m-scale .s40 { left: 40%; }
.m-log { list-style: none; padding: 0; margin: .8rem 0 1rem; min-height: 7.6rem; font-size: .9rem; color: var(--ink-2); }
.m-log li { padding: .3rem 0 .3rem 1.1rem; position: relative; border-bottom: 1px dashed var(--line); animation: rise .5s var(--ease) both; }
.m-log li::before { content: ""; position: absolute; left: 0; top: .8rem; width: .4rem; height: .4rem; transform: rotate(45deg); background: var(--gold); }

/* ---------------------------------------------------------------- commander */
.commander { overflow: hidden; color: var(--parch); background: #05090e; }
.commander .sec-head .lead { color: var(--parch-2); }
.commander h2 { color: #fff; }
.commander .eyebrow { color: var(--gold); }
.cmd-bg { position: absolute; inset: 0; z-index: 0; }
.cmd-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.7) blur(1px); transform: scale(1.1) translate3d(0, calc(var(--par, 0) * 40px), 0); }
.cmd-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 40%, rgba(5, 9, 14, .2), rgba(5, 9, 14, .92)), linear-gradient(180deg, #05090e, transparent 25%, transparent 75%, #05090e); }
.commander .wrap { position: relative; z-index: 1; }
.abilities { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ability-card { --corner: #dbb361; background: rgba(12, 21, 32, .78); border-color: rgba(219, 179, 97, .3); color: var(--parch); padding: 1.6rem; text-align: center; }
.ability-card h3 { justify-content: center; color: #fff; font-size: 1.45rem; flex-wrap: wrap; }
.ability-card p { color: var(--parch-2); }
.ab-top { position: relative; width: 6.5rem; height: 6.5rem; margin: 0 auto 1.1rem; }
.ab-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ab-ring circle { fill: rgba(5, 9, 14, .6); stroke: rgba(219, 179, 97, .22); stroke-width: 3; }
.ab-ring .cd { fill: none; stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px var(--gold)); }
.ability-card.cooling .cd { animation: cooldown var(--cd-s, 6s) linear forwards; }
@keyframes cooldown { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ab-icon { position: absolute; left: 50%; top: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; color: var(--gold); stroke-width: 1.3; }
.ab-key { position: absolute; right: -.2rem; bottom: -.2rem; z-index: 1; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font: 700 .9rem/1 var(--label); color: var(--accent-ink); background: linear-gradient(#f3d38c, #a37b2c); border: 1px solid #fff1c9; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ability-card.fired .ab-icon { animation: fire .7s var(--spring); }
@keyframes fire { 40% { transform: scale(1.3); filter: drop-shadow(0 0 14px var(--gold)); } }
.ability-card.fired::after { content: ""; position: absolute; left: 50%; top: 4.85rem; width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; border-radius: 50%; border: 2px solid var(--gold); animation: shock .9s var(--ease) forwards; pointer-events: none; }
@keyframes shock { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.ab-cd { display: flex; justify-content: center; gap: .6rem; align-items: baseline; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(219, 179, 97, .2); }
.ab-cd span { font: 600 .68rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--parch-2); }
.ab-cd b { font: 400 1.3rem var(--serif); color: var(--gold); }
.ultimate { border-color: rgba(201, 56, 43, .55); box-shadow: 0 0 60px -25px rgba(201, 56, 43, .8), var(--shadow); }
.ultimate .chip { color: #ffb3a6; border-color: rgba(226, 86, 74, .6); background: rgba(160, 40, 30, .3); }
.rain { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; pointer-events: none; }
.rain i { position: absolute; top: -30%; width: 1px; height: 1.1rem; background: linear-gradient(transparent, var(--gold-hi)); animation: rain 1.1s linear infinite; opacity: .8; }
.rain i:nth-child(1) { left: 22%; animation-delay: .1s; } .rain i:nth-child(2) { left: 36%; animation-delay: .6s; } .rain i:nth-child(3) { left: 50%; animation-delay: .3s; }
.rain i:nth-child(4) { left: 62%; animation-delay: .9s; } .rain i:nth-child(5) { left: 74%; animation-delay: .45s; } .rain i:nth-child(6) { left: 84%; animation-delay: .75s; }
@keyframes rain { to { transform: translate3d(-6px, 7.5rem, 0); } }

/* ---------------------------------------------------------------- trajectory */
.trajectory { padding: 1rem 1rem 1.2rem; margin-bottom: 1.5rem; }
#traj { width: 100%; height: auto; overflow: visible; }
.tr-min { fill: rgba(201, 56, 43, .1); stroke: rgba(226, 86, 74, .45); stroke-dasharray: 4 5; }
.tr-hill { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: var(--line); }
.tr-lab.hill { font-style: italic; font-family: var(--serif); letter-spacing: .04em; fill: var(--ink-3); }
.tr-ground { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.tr-ticks line { stroke: var(--line-strong); }
.tr-ticks text, .tr-lab { font: 600 11px var(--label); letter-spacing: .08em; fill: var(--ink-2); text-anchor: middle; }
.tr-ticks .max { stroke: var(--gold); stroke-dasharray: 3 4; }
.tr-ticks text.max { fill: var(--accent); stroke: none; }
.tr-lab.warn { fill: var(--danger); }
.tr-path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: .85; }
.tr-cat path { fill: #6b4a2b; stroke: #2a1a0d; stroke-width: 1.5; stroke-linejoin: round; }
.tr-cat .wheel { fill: #3a2716; stroke: #c9a05a; stroke-width: 2; }
.tr-arm path { fill: none; stroke: #8a6236; stroke-width: 6; stroke-linecap: round; }
.tr-arm .cup { stroke: #c9a05a; stroke-width: 3; }
.tr-ball { fill: url(#tr-fire); filter: drop-shadow(0 0 10px #ff9a3c); }
.tr-impact { fill: rgba(255, 150, 60, .3); stroke: #ffb347; stroke-width: 2; }
.tr-smoke circle { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.tr-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: .6rem; font-size: .86rem; color: var(--ink-2); }
.tr-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.sw { display: inline-block; width: .9rem; height: .9rem; border: 1px solid; }
.sw.min { background: rgba(201, 56, 43, .15); border-color: rgba(226, 86, 74, .7); border-style: dashed; }
.sw.max { border-color: var(--gold); border-style: dashed; }
.sw.imp { border-radius: 50%; background: rgba(255, 150, 60, .35); border-color: #ffb347; }
.kat-shots { margin-top: 0; }

/* ---------------------------------------------------------------- battle log chart */
.battlelog { padding: 1.3rem 1.3rem 1rem; }
.bl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .6rem; }
.bl-title { font: 400 1.5rem/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.bl-meta { font: 600 .72rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.bl-chart { width: 100%; height: auto; overflow: visible; }
.bl-chart .grid-l { stroke: var(--line); }
.bl-chart text { font: 600 9.5px var(--label); fill: var(--ink-2); letter-spacing: .06em; }
.bl-chart .bar { transform-box: fill-box; transform-origin: bottom; }
.bl-chart .own { fill: #4f86d0; } .bl-chart .foe { fill: #c9483c; }
.js .battlelog:not(.in) .bar { transform: scaleY(0); }
.js .battlelog .bar { transition: transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 28ms + .2s); }
.bl-chart .line { fill: none; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bl-chart .line.own { stroke: #6aa3f0; fill: none; } .bl-chart .line.foe { stroke: #e2564a; fill: none; }
.js .battlelog:not(.in) .line { stroke-dashoffset: 1; }
.js .battlelog .line { transition: stroke-dashoffset 2.2s var(--ease-in-out) .6s; }
.bl-chart .ev rect { fill: color-mix(in srgb, var(--gold) 18%, transparent); stroke: var(--gold); }
.bl-chart .ev.red rect { fill: rgba(201, 56, 43, .2); stroke: #e2564a; }
.bl-chart .ev text { fill: var(--accent); text-anchor: middle; font-size: 8.5px; }
.bl-chart .ev.red text { fill: #e2564a; }
.js .battlelog:not(.in) .ev { opacity: 0; }
.js .battlelog .ev { transition: opacity .4s; transition-delay: calc(var(--i, 0) * 60ms + 1.2s); }
.bl-chart .sub { font: 600 9px var(--label); letter-spacing: .14em; text-transform: uppercase; fill: var(--accent); }
.bl-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; color: var(--ink-2); margin-top: .4rem; }
.bl-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sw.own { background: #4f86d0; border-color: #4f86d0; } .sw.foe { background: #c9483c; border-color: #c9483c; } .sw.ev { border-color: var(--gold); }

/* ---------------------------------------------------------------- gallery */
.gallery { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); grid-auto-flow: dense; }
@media (min-width: 62rem) { .gallery .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; } }
.g-item { position: relative; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--night); cursor: zoom-in; display: block; text-align: left; }
.g-item img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: saturate(.9); }
.g-item picture { height: 100%; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.06); filter: saturate(1.08); }
.g-item::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0; transition: opacity var(--t); pointer-events: none; box-shadow: inset 0 0 30px rgba(219, 179, 97, .25); }
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; }
.g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .7rem; font-size: .84rem; color: var(--parch); background: linear-gradient(transparent, rgba(5, 9, 14, .88)); transform: translateY(35%); opacity: .0; transition: transform var(--t) var(--ease), opacity var(--t); }
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { transform: none; opacity: 1; }
@media (hover: none) { .g-cap { transform: none; opacity: 1; } }
dialog.gallery-lb { width: min(96vw, 120rem); max-height: 96vh; background: #05090e; color: var(--parch); border-color: rgba(219, 179, 97, .45); }
.lb-fig { position: relative; }
.lb-fig img { width: 100%; max-height: calc(96vh - 4.5rem); object-fit: contain; background: #000; }
.lb-fig.swap img { animation: lbswap .45s var(--ease); }
@keyframes lbswap { from { opacity: 0; transform: scale(.985); } }
.lb-bar { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; }
.lb-bar p { flex: 1; margin: 0; text-align: center; font-size: .92rem; }
.lb-bar .tool { color: var(--parch); }
.lb-count { color: var(--gold); font: 600 .74rem var(--label); letter-spacing: .14em; margin-left: .6rem; }

/* ---------------------------------------------------------------- final call */
.final { position: relative; overflow: hidden; color: var(--parch); padding-block: clamp(5rem, 12vw, 9rem); background: #05090e; }
.final-bg { position: absolute; inset: 0; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: scale(1.08) translate3d(0, calc(var(--par, 0) * 50px), 0); }
.final-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(5, 9, 14, .35), rgba(5, 9, 14, .95)); }
.final-in { position: relative; }
.final h2 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); margin-bottom: .3em; }
.final .lead { color: var(--parch-2); }
.final-bar { max-width: 24rem; height: 3px; margin: 2rem auto 2.4rem; background: rgba(219, 179, 97, .18); position: relative; overflow: hidden; }
.final-bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--gold-lo), var(--gold) 85%, #fff6d8); box-shadow: 0 0 12px var(--gold); transform: scaleX(1); transition: transform 2.4s var(--ease-in-out) .3s; }
.js .final-in:not(.in) .final-bar i { transform: scaleX(0); }

/* ---------------------------------------------------------------- light theme adjustments (image-backed sections stay dark) */
@media (prefers-reduced-motion: reduce) {
  .hero-slides, .ridge, .hero-content, .hero-mist { transform: none !important; opacity: 1; }
  .js .hero-title .letters span { opacity: 1; transform: none; filter: none; }
  .hero-embers, .rain, .scroll-cue span { display: none; }
  .js .battlelog:not(.in) .bar { transform: none; }
}

@media (max-width: 40rem) { .num-row li:last-child { grid-column: 1 / -1; } .num-row b { font-size: 2.4rem; } }
/* phones: card rows become swipeable rails instead of very long stacks */
@media (max-width: 40rem) {
  .classes, .abilities { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem .3rem 1rem; margin-inline: -.3rem; scrollbar-width: thin; }
  .classes > *, .abilities > * { scroll-snap-align: center; }
  .m-scale { letter-spacing: 0; font-size: .56rem; }
}