/* Eclipse Edition. Scoped to the copied entry point; game HUD is untouched. */
.eclipse-edition { --v2-ink:#0e100f; --v2-paper:#eee8da; --v2-muted:#a49e8f; --v2-gold:#c7a775; --v2-rule:rgba(200,177,130,.24); --v2-sans:Arial,Helvetica,sans-serif; }
.eclipse-edition :is(#menu,#heropick) { color:var(--v2-paper); }
.eclipse-edition :is(#menu,#heropick) button { -webkit-tap-highlight-color:transparent; }
.eclipse-edition :is(#menu,#heropick) :focus-visible { outline:2px solid #f3d5a0; outline-offset:5px; }
.eclipse-edition :is(#menu,#heropick) svg { flex-shrink:0; vertical-align:middle; }
.eclipse-edition .v2-eyebrow { font:10px/1.5 var(--v2-sans); letter-spacing:.19em; color:var(--v2-gold); display:flex; align-items:center; gap:10px; }
.eclipse-edition .v2-eyebrow > span { display:block; height:1px; width:26px; background:var(--v2-gold); }
.eclipse-edition .v2-brand { display:flex; align-items:center; gap:12px; color:#ddd0b1; font:18px Georgia,serif; letter-spacing:.045em; white-space:nowrap; }
.eclipse-edition .v2-brand > svg { color:#c7a775; }
.eclipse-edition .v2-brand small { display:block; font:8px/1.5 var(--v2-sans); letter-spacing:.42em; margin-top:5px; }

/* The original film keeps its playback sequence, with room for the navigation. */
.eclipse-edition #menu { display:block; overflow:hidden; background:#080909; padding:0; text-align:left; }
.eclipse-edition #menu.hidden { display:none; }
.eclipse-edition #menu > #menuvid,.eclipse-edition #menu > #menuvid2 { position:absolute; inset:0 0 0 12%; width:88%; height:100%; object-fit:cover; object-position:62% center; transform:none; filter:saturate(.72) brightness(.83); }
.eclipse-edition #menu::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#080b0b 0%,rgba(8,11,11,.96) 10%,rgba(8,11,11,.84) 26%,rgba(8,11,11,.18) 53%,rgba(8,11,11,.01) 75%),linear-gradient(0deg,#080b0b 0%,transparent 28%,transparent 76%,rgba(8,11,11,.5)); }
.eclipse-edition #menu #subtitle,.eclipse-edition #menu #flavor,.eclipse-edition #menu #sitelinks,.eclipse-edition #menu #version { display:none!important; }
.eclipse-edition #menu > .v2-masthead { position:absolute; inset:0 0 auto; height:88px; display:flex; align-items:center; justify-content:flex-end; padding:0 4.3%; z-index:6; }
.eclipse-edition .v2-masthead .v2-edition { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; }
.eclipse-edition .v2-edition { font:9px var(--v2-sans); color:#b2a894; letter-spacing:.25em; padding-left:10px; }
.eclipse-edition .v2-original { font:10px var(--v2-sans); text-decoration:none; color:#b0ab9c; display:flex; align-items:center; gap:9px; }
.eclipse-edition .v2-original:hover { color:#fff0cd; }
.eclipse-edition #menu > .v2-menu-content { position:absolute; left:8%; top:17%; bottom:13%; width:min(390px,35vw); display:flex; flex-direction:column; align-items:flex-start; }
.eclipse-edition .v2-menu-content #logo.beeldlogo { position:relative!important; inset:auto!important; width:280px!important; height:166px!important; min-height:166px; margin:9px 0 0 -14px!important; padding:0; background:url('/assets/logo-sol-eclipse-v3.webp') center/contain no-repeat; transform:none!important; animation:none!important; filter:none; opacity:1!important; }
.eclipse-edition .v2-menu-content #logo::before,.eclipse-edition .v2-menu-content #logo::after { display:none; }
.eclipse-edition .v2-menu-story { margin:4px 0 28px; font:italic 15px/1.65 Georgia,serif; color:#b8b3a5; }
.eclipse-edition #menupaneel { display:flex; flex-direction:column; width:100%; padding:0; gap:0; background:none; border:0; border-radius:0; box-shadow:none; opacity:1!important; transform:none!important; }
.eclipse-edition #menupaneel::before,.eclipse-edition #menupaneel::after { display:none; }
.eclipse-edition #menupaneel .verborgenveld { display:none; }
.eclipse-edition #menuerr:empty { display:none; }
.eclipse-edition #menupaneel .mbtn { display:flex; align-items:center; gap:18px; position:relative; width:100%; min-height:72px; padding:11px 16px 12px 0; margin:0; text-align:left; background:none; border:0; border-bottom:1px solid rgba(205,180,136,.12); border-radius:0; box-shadow:none; font-weight:normal; text-shadow:none; letter-spacing:normal; transition:padding .3s,background .3s; }
.eclipse-edition #menupaneel .mbtn::before,.eclipse-edition #menupaneel .mbtn::after { display:none; }
.eclipse-edition .v2-menu-number { font:10px var(--v2-sans); color:#7f786a; }
.eclipse-edition .v2-menu-label { display:flex; flex-direction:column; gap:5px; }
.eclipse-edition .v2-menu-label strong { font:24px/1.1 Georgia,serif; color:#c5beac; }
.eclipse-edition .v2-menu-label small { font:10px/1.5 var(--v2-sans); letter-spacing:.01em; color:#939084; }
.eclipse-edition .v2-menu-arrow { margin-left:auto; opacity:0; transform:translateX(-8px); transition:.25s; color:#e3c895; }
.eclipse-edition #menupaneel .v2-active { padding-left:15px; background:linear-gradient(90deg,rgba(193,154,84,.12),transparent); border-left:1px solid #c4a46d; }
.eclipse-edition .v2-active .v2-menu-label strong { color:#f5e6c8; }
.eclipse-edition .v2-active .v2-menu-number { color:#cbb78c; }
.eclipse-edition .v2-active .v2-menu-arrow { opacity:1; transform:none; }
.eclipse-edition #menu > .v2-menu-footer { position:absolute; inset:auto 4.3% 0; height:70px; border-top:1px solid rgba(196,171,130,.17); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.eclipse-edition .v2-menu-footer nav { display:flex; gap:30px; }
.eclipse-edition .v2-menu-footer .linkbtn { margin:0; padding:8px 0; border:0; background:none; font:9px var(--v2-sans); letter-spacing:.14em; color:#aea795; text-decoration:none; box-shadow:none; }
.eclipse-edition .v2-menu-footer .linkbtn::after { display:none; }
.eclipse-edition .v2-atmosphere-controls { display:flex; gap:30px; align-items:center; }
.eclipse-edition #v2motion { display:flex; align-items:center; gap:8px; background:none; border:0; color:#aea795; font:10px var(--v2-sans); padding:10px 0; }
.eclipse-edition .v2-preview-tag { display:flex; align-items:center; gap:12px; font:8px var(--v2-sans); color:#78776d; letter-spacing:.12em; }
.eclipse-edition .v2-preview-tag i { width:3px; height:3px; border-radius:50%; background:#b8a27a; }
.eclipse-edition #menu > .v2-film-button { position:absolute; right:7%; bottom:16%; display:flex; gap:16px; align-items:center; border:0; background:none; color:#ddd2b6; padding:14px 0; text-align:left; }
.eclipse-edition .v2-play-ring { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(220,199,158,.48); border-radius:50%; transition:background .3s; }
.eclipse-edition .v2-film-button:hover .v2-play-ring { background:#c8a46d33; }
.eclipse-edition .v2-film-button small { display:block; font:8px var(--v2-sans); letter-spacing:.19em; color:#9e9687; margin-bottom:7px; }
.eclipse-edition .v2-film-button strong { font:16px Georgia,serif; }
.eclipse-edition .v2-film-line { width:46px; height:1px; background:#b5a17c66; margin-left:18px; }
.eclipse-edition #menu > .v2-scene-caption { position:absolute; top:39%; right:6%; display:flex; gap:11px; align-items:center; writing-mode:vertical-rl; }
.eclipse-edition .v2-scene-caption span { font:9px var(--v2-sans); letter-spacing:.25em; color:#c5b48f; }
.eclipse-edition .v2-scene-caption i { height:44px; width:1px; background:#b6a07a77; }
.eclipse-edition .v2-scene-caption small { font:italic 11px Georgia,serif; color:#a99e89; }
.eclipse-edition #menu > .v2-motes { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.eclipse-edition .v2-motes i { position:absolute; left:var(--x); bottom:-10px; width:2px; height:2px; border-radius:50%; background:#eac894; box-shadow:0 0 7px #ca9b59; animation:v2-drift var(--duration) var(--delay) linear infinite; }
@keyframes v2-drift { 0% { transform:translate(0,0); opacity:0; } 20% { opacity:.5; } 75% { opacity:.25; } 100% { transform:translate(var(--drift),-80vh); opacity:0; } }
.eclipse-edition .v2-still .v2-motes { display:none; }

/* Hero gallery */
.eclipse-edition #heropick { --v2-left:31%; --v2-bottom:126px; --v2-top:76px; background:#111412; display:block; overflow:hidden; }
.eclipse-edition #heropick.hidden { display:none; }
.eclipse-edition .v2-hero-header { position:absolute; top:0; left:0; right:0; height:var(--v2-top); display:flex; align-items:center; justify-content:space-between; padding:0 3.2%; border-bottom:1px solid var(--v2-rule); background:rgba(15,17,16,.96); z-index:5; }
.eclipse-edition .v2-hero-logo { display:block; width:110px; height:calc(var(--v2-top) - 10px); object-fit:contain; }
.eclipse-edition .v2-steps { display:flex; gap:28px; list-style:none; margin:0; padding:0; font:10px var(--v2-sans); letter-spacing:.07em; text-transform:uppercase; }
.eclipse-edition .v2-steps li { display:flex; align-items:center; gap:10px; color:#777970; }
.eclipse-edition .v2-steps li+li::before { content:''; width:35px; height:1px; background:var(--v2-rule); margin-right:8px; }
.eclipse-edition .v2-steps b { font:11px Georgia,serif; color:#777970; }
.eclipse-edition .v2-steps [aria-current] { color:#d4c3a2; }
.eclipse-edition .v2-steps [aria-current] b { color:#c9a86c; }
.eclipse-edition .v2-back-menu { display:flex; align-items:center; gap:8px; border:0; background:none; color:#b8b0a0; padding:10px 0; font:10px var(--v2-sans); }
.eclipse-edition #hplinks { position:absolute; top:var(--v2-top); bottom:var(--v2-bottom); left:0; width:var(--v2-left); padding:40px 34px 22px 10.5%; padding-left:3.5%; z-index:3; gap:0; overflow:auto; max-height:none; border-right:1px solid var(--v2-rule); background:linear-gradient(105deg,#131613,#141714f0 85%,#141714de); text-align:left; scrollbar-width:thin; }
.eclipse-edition #hpnaam { font:clamp(35px,3.45vw,58px)/1.1 Georgia,serif; color:#f0e8d7; letter-spacing:-.025em; text-shadow:none; margin:14px 0 10px; }
.eclipse-edition #hprol { font:10px/1.5 var(--v2-sans); color:#c6ac7f; letter-spacing:.16em; margin:0; }
.eclipse-edition .v2-biography p { font:14px/1.75 Georgia,serif; color:#bbb8a9; margin:22px 0 15px; }
.eclipse-edition .v2-biography > small { font:8px/1.7 var(--v2-sans); letter-spacing:.11em; color:#8e9485; }
.eclipse-edition #hpstats { display:block; flex:none; overflow:visible; margin-top:24px; }
.eclipse-edition .v2-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; border-top:1px solid var(--v2-rule); border-bottom:1px solid var(--v2-rule); padding:7px 0; }
.eclipse-edition .v2-stat { display:flex; gap:13px; align-items:center; padding:12px 0; }
.eclipse-edition .v2-stat > svg { color:#a88c5f; width:19px; }
.eclipse-edition .v2-stat small { display:block; text-transform:uppercase; color:#acb09f; font:10px var(--v2-sans); letter-spacing:.08em; margin-bottom:5px; }
.eclipse-edition .v2-stat strong { font:23px Georgia,serif; color:#e2d8c2; }
.eclipse-edition .v2-skills-title { font:8px/1.6 var(--v2-sans); color:#8f9789; letter-spacing:.1em; margin:21px 0 13px; }
.eclipse-edition .v2-skills { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.eclipse-edition .v2-skills > span { display:flex; flex-direction:column; gap:7px; align-items:center; text-align:center; }
.eclipse-edition .v2-skills kbd { display:grid; place-items:center; width:42px; height:44px; border:1px solid #756447; color:#e4d0a4; background:radial-gradient(ellipse at 50% 120%,#65513588,transparent 70%),#1b211b; font:23px Georgia,serif; box-shadow:inset 0 0 0 3px #111714; }
.eclipse-edition .v2-skills small { font:11px/1.35 var(--v2-sans); color:#c8cbbb; max-width:72px; }
.eclipse-edition .v2-weapon { margin-top:23px; padding-top:20px; border-top:1px solid var(--v2-rule); }
.eclipse-edition .v2-weapon .v2-eyebrow { font-size:8px; letter-spacing:.12em; color:#949b8d; }
.eclipse-edition .v2-weapon > strong { display:block; margin-top:11px; font:20px Georgia,serif; color:#daccad; }
.eclipse-edition .v2-weapon p { font:12px/1.6 Georgia,serif; color:#a2aa99; margin:8px 0; }
.eclipse-edition .v2-weapon > small { font:9px/1.6 var(--v2-sans); color:#c1a775; }
.eclipse-edition .v2-artwork { position:absolute; left:var(--v2-left); right:0; top:var(--v2-top); bottom:var(--v2-bottom); overflow:hidden; background:#18201b; }
.eclipse-edition #v2heroart { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 0%; filter:saturate(.82) brightness(1); }
.eclipse-edition .v2-art-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,22,18,.05) 0%,transparent 50%,rgba(13,19,17,.25) 77%,#0f1412b8),linear-gradient(0deg,rgba(11,17,13,.54),transparent 27%,transparent 85%,rgba(14,19,15,.12)); }
.eclipse-edition .v2-roster { position:absolute; right:3%; top:calc(var(--v2-top) + 30px); width:130px; bottom:calc(var(--v2-bottom) + 100px); z-index:4; display:flex; flex-direction:column; gap:13px; }
.eclipse-edition .v2-roster > .v2-eyebrow { font-size:8px; letter-spacing:.13em; justify-content:center; color:#c4bdaa; text-shadow:0 1px 8px #000; }
.eclipse-edition #hprooster { display:flex; flex-direction:column; justify-content:flex-start; flex:1; gap:12px; min-height:0; }
.eclipse-edition .v2-hero-card { position:relative; width:100%; height:145px; flex:1 1 130px; min-height:90px; max-height:165px; padding:0; overflow:hidden; border:1px solid #93805b88; background:#111810; border-radius:2px; box-shadow:0 4px 20px #0003; text-align:left; transition:border-color .2s,transform .2s; }
.eclipse-edition .v2-hero-card:hover { border-color:#e3c996; transform:translateX(-3px); }
.eclipse-edition .v2-hero-card[aria-pressed="true"] { border:1px solid #f4ddb0; box-shadow:0 0 0 2px #c8a36755,0 0 22px #d8ad5a45; }
.eclipse-edition .v2-hero-card img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:saturate(.55) brightness(.8); transition:filter .3s; }
.eclipse-edition .v2-hero-card[aria-pressed="true"] img { filter:saturate(.85) brightness(1); }
.eclipse-edition .v2-card-shade { position:absolute; inset:0; background:linear-gradient(0deg,#0b140eea,transparent 80%); }
.eclipse-edition .v2-card-lock,.eclipse-edition .v2-card-check { position:absolute; right:8px; top:8px; color:#e2d0a9; text-shadow:0 1px 3px #000; }
.eclipse-edition .v2-card-name { position:absolute; left:12px; bottom:10px; right:5px; }
.eclipse-edition .v2-card-name strong { display:block; color:#e5d6b8; font:14px Georgia,serif; }
.eclipse-edition .v2-card-name small { display:block; font:9px var(--v2-sans); letter-spacing:.08em; color:#c3c3b0; margin-top:5px; }
.eclipse-edition .v2-art-caption { position:absolute; left:calc(var(--v2-left) + 30px); right:calc(3% + 150px); bottom:calc(var(--v2-bottom) + 26px); z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.eclipse-edition .v2-art-caption small { display:block; color:#a69f8a; font:8px var(--v2-sans); letter-spacing:.17em; margin-bottom:8px; }
.eclipse-edition .v2-art-caption em { color:#d5caae; font:italic 20px Georgia,serif; }
.eclipse-edition #v2view { display:flex; align-items:center; gap:8px; padding:8px 0; border:0; background:none; color:#bebaa7; font:10px var(--v2-sans); white-space:nowrap; }
.eclipse-edition #v2view[hidden] { display:none; }
.eclipse-edition #hpvak { left:var(--v2-left); right:0; top:var(--v2-top); bottom:var(--v2-bottom); opacity:0; pointer-events:none; z-index:2; }
.eclipse-edition .model-view #hpvak { opacity:1; pointer-events:auto; }
.eclipse-edition .model-view .v2-artwork { opacity:1; background:#151c15 url('./sanctuary.webp') 50% center/cover no-repeat; }
.eclipse-edition .model-view #v2heroart { visibility:hidden; }
.eclipse-edition #v2modelloading { position:absolute; top:42%; left:0; right:0; color:#d8cbb0; font:11px var(--v2-sans); letter-spacing:.1em; text-align:center; }
.eclipse-edition #v2modelloading[hidden] { display:none; }
.eclipse-edition .v2-model-controls { position:absolute; top:calc(var(--v2-top) + 15px); left:calc(var(--v2-left) + 22px); z-index:4; display:flex; align-items:center; gap:5px; padding:5px 8px; background:#101811c2; border:1px solid #bcb18b38; }
.eclipse-edition .v2-model-controls[hidden] { display:none; }
.eclipse-edition .v2-model-controls > span { color:#d5c7a3; font:8px var(--v2-sans); letter-spacing:.09em; margin-right:7px; }
.eclipse-edition .v2-model-controls > i { display:block; height:12px; width:1px; background:#c8b78244; margin:0 3px; }
.eclipse-edition .v2-model-controls button { min-width:25px; height:26px; padding:4px 6px; border:0; color:#d9cbaa; background:none; font:14px var(--v2-sans); }
.eclipse-edition .v2-model-controls button:last-child { font-size:10px; }
.eclipse-edition .v2-model-controls button:hover { background:#b69b6133; }
.eclipse-edition #hpdraaihint { font:10px var(--v2-sans); color:#b4ac98; bottom:12px; }

/* Controls stay in one predictable strip, independent of the gallery height. */
.eclipse-edition .v2-setup { position:absolute; left:0; right:0; bottom:0; min-height:var(--v2-bottom); height:var(--v2-bottom); padding:23px 3.5% 28px; background:#131713f5; border-top:1px solid var(--v2-rule); display:grid; grid-template-columns:minmax(160px,.9fr) minmax(360px,1.6fr) minmax(180px,.75fr); column-gap:40px; align-items:start; z-index:5; }
.eclipse-edition #hpnaamrij { gap:9px; align-items:stretch; position:relative; }
.eclipse-edition #hpnaamrij label,.eclipse-edition #standrij > span { font:8px var(--v2-sans); letter-spacing:.16em; color:#b3ab94; text-transform:uppercase; }
.eclipse-edition #hpnick { height:40px; background:#0f130f; border:1px solid #4d5444; border-radius:1px; color:#e2d8bf; padding:9px 12px; box-shadow:none; font:14px Georgia,serif; width:100%; }
.eclipse-edition #hpnick::placeholder { font:14px Georgia,serif; color:#797f70; }
.eclipse-edition #hpnick:focus { border-color:#c8ad7a; outline:none; box-shadow:0 0 0 2px #c8ad7a33; }
.eclipse-edition #v2validation { position:absolute; top:70px; font:10px var(--v2-sans); color:#f4af97; }
.eclipse-edition #standrij { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:0; margin:0; padding:0; border:0; min-width:0; }
.eclipse-edition #standrij.hidden { display:none; }
.eclipse-edition #standrij > span { display:block; flex:0 0 100%; margin:0 0 9px; text-align:left; }
.eclipse-edition #standrij .standbreek { display:none; }
.eclipse-edition #standrij .mbtn { display:flex; align-items:center; justify-content:center; border:1px solid #b49a67; border-right-width:0; border-radius:0; height:40px; min-height:40px; width:auto; min-width:0; margin:0; padding:8px 13px; color:#ecd9b0; background:#77613b3b; box-shadow:none; text-shadow:none; font:13px Georgia,serif; letter-spacing:.02em; }
.eclipse-edition #standrij .mbtn::before,.eclipse-edition #standrij .mbtn::after,.eclipse-edition #hponder .mbtn::before,.eclipse-edition #hponder .mbtn::after { display:none; }
.eclipse-edition #standrij .mbtn.secondary { background:#0e130f; border-color:#464e3e; color:#a5a994; }
.eclipse-edition #standrij .mbtn:nth-of-type(3) { border-right-width:1px; }
.eclipse-edition #standrij .v2-heroic { border:0; background:none; margin-left:15px; padding:8px 0; font:11px var(--v2-sans); gap:8px; }
.eclipse-edition #standrij .v2-heroic::after { content:''; display:block; position:static; width:26px; height:14px; border-radius:10px; border:1px solid #9a865e; background:radial-gradient(circle at 75% 50%,#e6cd99 0 4px,transparent 5px),#7c684040; }
.eclipse-edition #standrij .v2-heroic.secondary { border:0; background:none; }
.eclipse-edition #standrij .v2-heroic.secondary::after { background:radial-gradient(circle at 25% 50%,#78806a 0 4px,transparent 5px); border-color:#576047; }
.eclipse-edition #hponder { margin:18px 0 0; gap:0; display:block; }
.eclipse-edition #hpterug { display:none; }
.eclipse-edition #hpklaar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(115deg,#d7bd87,#b9975a); color:#1a2117; text-shadow:none; border:1px solid #ead7b0; border-radius:1px; height:44px; min-height:44px; min-width:0; width:100%; margin:0; box-shadow:0 0 22px #af8b4526; font:15px Georgia,serif; letter-spacing:.02em; transition:filter .2s; }
.eclipse-edition #hpklaar:hover { filter:brightness(1.13); }
.eclipse-edition #hpklaar:disabled { background:#30372c; color:#a2a18d; border-color:#565a49; box-shadow:none; cursor:not-allowed; }
.eclipse-edition .v2-difficulty-hint { position:absolute; left:3.5%; bottom:10px; width:90%; color:#a3ac98; font:11px/1.4 var(--v2-sans); text-align:center; pointer-events:none; }
.eclipse-edition .v2-online-setup { grid-template-columns:1fr 1fr; }

@media (min-width:1600px) {
  .eclipse-edition #menu > .v2-menu-content { top:19%; }
  .eclipse-edition .v2-menu-content #logo.beeldlogo { width:340px!important; height:205px!important; min-height:205px; }
  .eclipse-edition #menupaneel .mbtn { min-height:85px; }
  .eclipse-edition .v2-menu-label strong { font-size:28px; }
  .eclipse-edition #heropick { --v2-left:29%; --v2-bottom:134px; --v2-top:86px; }
  .eclipse-edition #hplinks { padding-top:55px; padding-right:50px; }
  .eclipse-edition .v2-biography p { font-size:17px; }
  .eclipse-edition .v2-roster { width:165px; gap:20px; }
  .eclipse-edition .v2-hero-card { max-height:205px; }
  .eclipse-edition .v2-card-name strong { font-size:18px; }
  .eclipse-edition #hpstats { margin-top:35px; }
  .eclipse-edition .v2-stat { padding:19px 0; }
}
@media (max-height:780px) and (min-width:901px) {
  .eclipse-edition #menu > .v2-menu-content { top:15%; }
  .eclipse-edition .v2-menu-content #logo.beeldlogo { height:140px!important; min-height:140px; width:245px!important; }
  .eclipse-edition .v2-menu-story { margin:0 0 17px; font-size:13px; }
  .eclipse-edition #menupaneel .mbtn { min-height:62px; }
  .eclipse-edition .v2-menu-label strong { font-size:22px; }
  .eclipse-edition #hplinks { padding-top:24px; padding-bottom:18px; }
  .eclipse-edition #hpnaam { margin:9px 0 8px; font-size:36px; }
  .eclipse-edition .v2-biography p { margin:14px 0 10px; font-size:12px; line-height:1.6; }
  .eclipse-edition .v2-biography > small { display:none; }
  .eclipse-edition #hpstats { margin-top:12px; }
  .eclipse-edition .v2-stats-grid { padding:2px 0; }
  .eclipse-edition .v2-stat { padding:7px 0; }
  .eclipse-edition .v2-skills-title { margin:13px 0 9px; }
  .eclipse-edition .v2-weapon { margin-top:12px; padding-top:10px; }
  .eclipse-edition .v2-weapon > strong { margin-top:8px; font-size:18px; }
  .eclipse-edition .v2-weapon p { margin:6px 0; }
}
@media (max-width:1100px) and (min-width:701px) {
  .eclipse-edition .v2-edition { display:none; }
  .eclipse-edition #menu > .v2-menu-content { left:6%; width:38%; }
  .eclipse-edition #heropick { --v2-left:35%; }
  .eclipse-edition .v2-steps { gap:14px; font-size:9px; }
  .eclipse-edition .v2-steps li+li::before { width:15px; margin-right:0; }
  .eclipse-edition .v2-brand { font-size:15px; }
  .eclipse-edition .v2-roster { right:2%; width:108px; }
  .eclipse-edition .v2-card-name { left:8px; }
  .eclipse-edition .v2-card-name strong { font-size:12px; }
  .eclipse-edition .v2-art-caption { right:calc(2% + 118px); left:calc(var(--v2-left) + 20px); }
  .eclipse-edition .v2-art-caption em { font-size:16px; }
  .eclipse-edition .v2-setup { column-gap:22px; grid-template-columns:minmax(130px,.8fr) minmax(330px,1.5fr) minmax(130px,.7fr); }
  .eclipse-edition #standrij .mbtn { padding:8px 10px; }
  .eclipse-edition #standrij .v2-heroic { margin-left:10px; padding:8px 0; }
  .eclipse-edition #hpnaam { font-size:36px; }
}
@media (max-width:700px) {
  .eclipse-edition #menu { overflow-y:auto; min-height:100svh; }
  .eclipse-edition #menu > #menuvid,.eclipse-edition #menu > #menuvid2 { inset:0 0 auto; width:100%; height:54svh; object-position:60% 45%; filter:saturate(.8) brightness(.75); }
  .eclipse-edition #menu::before { background:linear-gradient(0deg,#080b0b 0%,#080b0b 42%,#080b0b77 72%,#080b0b44); }
  .eclipse-edition #menu > .v2-masthead { position:relative; height:74px; padding:0 24px; }
  .eclipse-edition .v2-masthead .v2-brand { font-size:14px; gap:8px; }
  .eclipse-edition .v2-masthead .v2-brand svg { width:22px; }
  .eclipse-edition .v2-edition { display:none; }
  .eclipse-edition .v2-original { font-size:9px; }
  .eclipse-edition #menu > .v2-menu-content { position:relative; left:0; top:0; bottom:auto; margin:6vh 8% 28px; width:84%; }
  .eclipse-edition .v2-menu-content > .v2-eyebrow { font-size:8px; }
  .eclipse-edition .v2-menu-content #logo.beeldlogo { width:240px!important; height:145px!important; min-height:145px; margin-left:-9px!important; }
  .eclipse-edition .v2-menu-story { font-size:14px; margin:6px 0 22px; }
  .eclipse-edition #menupaneel .mbtn { min-height:69px; }
  .eclipse-edition .v2-menu-label strong { font-size:24px; }
  .eclipse-edition #menu > .v2-film-button { position:relative; right:auto; bottom:auto; margin:0 8% 25px; padding:0; }
  .eclipse-edition .v2-film-line { width:30px; }
  .eclipse-edition #menu > .v2-menu-footer { position:relative; inset:auto; margin:0 8%; padding:20px 0; height:auto; flex-direction:column; align-items:flex-start; gap:14px; }
  .eclipse-edition .v2-preview-tag { font-size:6px; }
  .eclipse-edition .v2-atmosphere-controls { width:100%; justify-content:space-between; gap:10px; }
  .eclipse-edition #menu > .v2-scene-caption { display:none; }

  .eclipse-edition #heropick { --v2-top:64px; --v2-left:0%; --v2-bottom:0px; overflow:auto; touch-action:pan-y; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; background:#131713; }
  .eclipse-edition #heropick > * { flex-shrink:0; }
  .eclipse-edition #heropick.hidden { display:none; }
  .eclipse-edition .v2-hero-header { position:relative; height:64px; min-height:64px; padding:0 6%; }
  .eclipse-edition .v2-hero-header .v2-brand { font-size:14px; gap:8px; }
  .eclipse-edition .v2-hero-header .v2-brand svg { width:20px; }
  .eclipse-edition .v2-steps { display:none; }
  .eclipse-edition .v2-back-menu { font-size:9px; }
  .eclipse-edition .v2-artwork { position:absolute; top:64px; height:470px; bottom:auto; left:0; right:0; }
  .eclipse-edition #v2heroart { object-fit:cover; object-position:50% 20%; filter:saturate(.78) brightness(.78); }
  .eclipse-edition .v2-art-vignette { background:linear-gradient(0deg,#131713,transparent 43%),linear-gradient(90deg,#13171322,transparent); }
  .eclipse-edition .v2-roster { position:relative; order:1; top:auto; left:auto; right:auto; bottom:auto; margin:350px 6% 0; width:auto; height:auto; gap:10px; }
  .eclipse-edition .v2-roster > .v2-eyebrow { justify-content:flex-start; font-size:8px; }
  .eclipse-edition #hprooster { flex-direction:row; gap:10px; }
  .eclipse-edition .v2-hero-card { width:auto; height:126px; min-height:126px; flex:1 1 0; }
  .eclipse-edition .v2-card-name { left:8px; }
  .eclipse-edition .v2-card-name strong { font-size:12px; }
  .eclipse-edition .v2-card-name small { font-size:8px; letter-spacing:.04em; }
  .eclipse-edition #hplinks { position:relative; order:2; left:auto; top:auto; bottom:auto; right:auto; width:auto; max-height:none; overflow:visible; margin:28px 6% 0; padding:0; border:0; background:none; }
  .eclipse-edition #hpnaam { font-size:45px; }
  .eclipse-edition .v2-biography p { font-size:15px; margin:20px 0 13px; }
  .eclipse-edition #hpstats { margin-top:24px; }
  .eclipse-edition .v2-stats-grid { gap:0 30px; }
  .eclipse-edition .v2-stat { padding:15px 0; }
  .eclipse-edition .v2-skills { gap:10px; }
  .eclipse-edition .v2-skills small { font-size:11px; max-width:80px; }
  .eclipse-edition .v2-skills kbd { width:50px; height:50px; }
  .eclipse-edition .v2-skills-title { font-size:8px; }
  .eclipse-edition .v2-weapon { margin:25px 0; padding-top:20px; }
  .eclipse-edition .v2-art-caption { left:6%; top:339px; right:6%; bottom:auto; z-index:4; }
  .eclipse-edition .v2-art-caption em { font-size:19px; }
  .eclipse-edition .v2-art-caption small { font-size:7px; }
  .eclipse-edition #hpdraaihint { display:none; }
  .eclipse-edition #v2view { font-size:10px; padding:10px; background:#14201588; border:1px solid #d4bd8133; }
  .eclipse-edition #hpvak { top:64px; left:0; right:0; bottom:auto; height:305px; }
  .eclipse-edition .v2-model-controls { top:74px; left:6%; padding:2px 4px; }
  .eclipse-edition .v2-model-controls > span { display:none; }
  .eclipse-edition .v2-model-controls button { min-width:28px; height:30px; }
  .eclipse-edition .model-view .v2-artwork { background-position:50% 20%; }
  .eclipse-edition .v2-setup { position:relative; order:3; display:grid; grid-template-columns:1fr; column-gap:0; row-gap:21px; height:auto; min-height:0; margin-top:0; padding:24px 6% 50px; }
  .eclipse-edition #hpnaamrij { width:100%; }
  .eclipse-edition #hpnaamrij label,.eclipse-edition #standrij > span { font-size:9px; }
  .eclipse-edition #hpnick { height:46px; font-size:16px; }
  .eclipse-edition #standrij .mbtn { height:42px; min-height:42px; padding:9px 12px; font-size:13px; }
  .eclipse-edition #standrij .v2-heroic { margin-left:12px; padding:9px 0; font-size:10px; }
  .eclipse-edition #hponder { margin:0; width:100%; padding:0; }
  .eclipse-edition #hpklaar { height:50px; min-height:50px; font-size:17px; padding:12px 18px!important; }
  .eclipse-edition .v2-difficulty-hint { bottom:15px; left:6%; width:88%; font-size:9px; }
  .eclipse-edition #v2validation { top:71px; }
}
@media (max-width:370px) {
  .eclipse-edition #standrij .mbtn { padding:9px 9px; font-size:12px; }
  .eclipse-edition #standrij .v2-heroic { margin-left:8px; font-size:9px; }
  .eclipse-edition .v2-hero-header .v2-brand { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .eclipse-edition :is(#menu,#heropick) * { animation:none!important; transition:none!important; }
  .eclipse-edition .v2-motes { display:none; }
  .eclipse-edition #menu { background:#080b0b url('../tex/menu_bg.jpg') 60% center/cover no-repeat; }
}

@media (max-height:780px) and (min-width:901px) {
 .eclipse-edition #hplinks { padding-top:20px; }
 .eclipse-edition .v2-biography p { margin:12px 0 7px; }
 .eclipse-edition .v2-weapon p { margin:5px 0; font-size:11px; }
  .eclipse-edition .v2-weapon > small { font-size:10px; }
 .eclipse-edition .v2-weapon { margin-top:9px; padding-top:8px; }
}

.eclipse-edition .v2-artwork[data-hero='paladin'] #v2heroart { object-position:46% center; }
@media (max-width:700px) { .eclipse-edition .v2-artwork[data-hero='paladin'] #v2heroart { object-position:50% 20%; } }

/* Center the opening menu around the actual game logo. */
.eclipse-edition #menu > .v2-menu-content { left:50%; transform:translateX(-50%); align-items:center; width:min(390px,48vw); text-align:center; }
.eclipse-edition .v2-menu-content #logo.beeldlogo { margin-left:0!important; }
.eclipse-edition #menu > #menuvid,.eclipse-edition #menu > #menuvid2 { inset:0; width:100%; object-position:center; }
.eclipse-edition #menu::before { background:radial-gradient(ellipse at 50% 48%,#080b0b88 0%,#080b0b55 28%,#080b0b0d 66%),linear-gradient(0deg,#080b0b 0%,transparent 30%,transparent 72%,#080b0b55); }
.eclipse-edition #menupaneel .mbtn { justify-content:center; padding-left:16px; padding-right:16px; text-align:center; }
.eclipse-edition #menupaneel .v2-active { border-left:0; background:linear-gradient(90deg,transparent,#c19a5426,transparent); }
.eclipse-edition .v2-menu-number { position:absolute; left:16px; }
.eclipse-edition .v2-menu-arrow { position:absolute; right:16px; }
.eclipse-edition .v2-menu-label { align-items:center; }
@media (max-width:1100px) and (min-width:701px) {
  .eclipse-edition #menu > .v2-film-button { right:3%; gap:9px; max-width:180px; }
  .eclipse-edition .v2-film-button strong { font-size:13px; }
  .eclipse-edition .v2-film-button small { font-size:7px; letter-spacing:.1em; }
  .eclipse-edition .v2-play-ring { width:30px; height:30px; flex-shrink:0; }
  .eclipse-edition .v2-film-line { display:none; }
}
@media (max-width:700px) {
  .eclipse-edition #menu > .v2-menu-content { left:0; transform:none; width:84%; }
  .eclipse-edition #menu > #menuvid,.eclipse-edition #menu > #menuvid2 { height:54svh; }
  .eclipse-edition #menu::before { background:linear-gradient(0deg,#080b0b 0%,#080b0b 42%,#080b0b55 72%,#080b0b2b); }
  .eclipse-edition #menu > .v2-film-button { justify-content:center; }
  .eclipse-edition .v2-hero-logo { width:88px; }
  .eclipse-edition .model-view .v2-artwork { background-size:auto 305px; background-position:50% top; }
}

/* Only the currently selected champion carries the selection tick. */
.v2-hero-card[aria-pressed="false"] .v2-card-check{opacity:0}
/* 24-9-2026 (Eric: 'pas voor de online versie de interface en home al aan naar de nieuwe versie') — LIGGEND op een
   telefoon (393 hoog) vielen alle vier de keuzes onder het beeld (#menu is overflow:hidden), dus je kon niet eens op
   'The campaign' tikken. Liggend en laag: logo en verhaalregel links, de vier keuzes er compact naast. */
@media (max-height:500px) and (min-width:501px) {
  .eclipse-edition #menu { overflow-y:auto; }
  .eclipse-edition #menu > .v2-masthead { height:46px; }
  .eclipse-edition .v2-edition { display:none; }
  .eclipse-edition #menu > .v2-menu-content { left:50%; transform:translateX(-50%); top:50px; bottom:50px; width:min(600px,72vw); display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:28px; align-items:start; align-content:center; }
  .eclipse-edition .v2-menu-content > .v2-eyebrow { grid-column:1; grid-row:1; font-size:8px; }
  .eclipse-edition .v2-menu-content #logo.beeldlogo { grid-column:1; grid-row:2; width:190px!important; height:112px!important; min-height:112px; margin:4px auto 0!important; }
  .eclipse-edition .v2-menu-story { grid-column:1; grid-row:3; font-size:12px; line-height:1.5; margin:2px 0 0; }
  .eclipse-edition .v2-menu-content #menupaneel { grid-column:2; grid-row:1 / span 3; align-self:center; }
  .eclipse-edition #menupaneel .mbtn { min-height:52px; padding:6px 12px 7px 0; gap:14px; }
  .eclipse-edition #menupaneel .v2-active { padding-left:12px; }
  .eclipse-edition .v2-menu-label { gap:2px; }
  .eclipse-edition .v2-menu-label strong { font-size:18px; }
  .eclipse-edition .v2-menu-label small { font-size:9px; }
  .eclipse-edition #menu > .v2-film-button { right:4%; bottom:52px; padding:6px 0; gap:10px; }
  .eclipse-edition .v2-play-ring { width:34px; height:34px; }
  .eclipse-edition .v2-film-button strong { font-size:13px; }
  .eclipse-edition .v2-film-line { display:none; }
  .eclipse-edition #menu > .v2-scene-caption { display:none; }
  .eclipse-edition #menu > .v2-menu-footer { height:44px; }
  .eclipse-edition .v2-menu-footer nav,.eclipse-edition .v2-atmosphere-controls { gap:18px; }
}
@media (max-height:500px) and (min-width:501px) and (max-width:760px) {
  .eclipse-edition .v2-film-button > span:not(.v2-play-ring) { display:none; }
  .eclipse-edition .v2-preview-tag { display:none; }
}
/* 25-9 (Eric: 'zorg dat het goed speelbaar is via browser en app') — in de app (viewport-fit=cover) lag de kopbalk van de
   heldkeuze onder de klok en de statusiconen. De veilige zones komen er nu bij (staand boven, liggend links/rechts naast
   het Dynamic Island); op de website zijn --sat/--sal/--sar 0, dus daar verandert niets. */
@media (max-width:700px) {
  .eclipse-edition .v2-hero-header { height:calc(64px + var(--sat, 0px)); min-height:calc(64px + var(--sat, 0px)); padding-top:var(--sat, 0px); }
}
@media (max-height:500px) {
  .eclipse-edition .v2-hero-header { padding-left:calc(3.2% + var(--sal, 0px)); padding-right:calc(3.2% + var(--sar, 0px)); }
}

/* Greek champion portraits and compact mobile selection, 11 October 2026. */
.eclipse-edition #heropick { backdrop-filter:none; -webkit-backdrop-filter:none; }
.eclipse-edition .v2-mobile-actions { display:none; }
.eclipse-edition #v2heroart { filter:none; }
.eclipse-edition .v2-hero-card img,
.eclipse-edition .v2-hero-card[aria-pressed="true"] img { filter:none; object-position:50% 20%; }
@media (min-width:1101px) {
  .eclipse-edition .v2-roster { right:6.5%; }
}
@media (max-width:700px) {
  .eclipse-edition #heropick { padding-bottom:calc(116px + env(safe-area-inset-bottom,0px)); scroll-padding-bottom:130px; }
  .eclipse-edition .v2-roster { margin-top:296px; gap:8px; }
  .eclipse-edition .v2-art-caption { top:319px; }
  .eclipse-edition #hplinks { margin-top:20px; }
  .eclipse-edition .v2-setup { padding-bottom:34px; }
  .eclipse-edition .v2-mobile-actions { display:grid; position:fixed; left:0; right:0; bottom:0; z-index:20; grid-template-columns:minmax(0,1fr) minmax(124px,.8fr); gap:12px; align-items:end; padding:12px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:#131713fa; border-top:1px solid var(--v2-rule); box-shadow:0 -8px 24px #0004; }
  .eclipse-edition .v2-mobile-actions #hpnaamrij { min-width:0; gap:6px; }
  .eclipse-edition .v2-mobile-actions #hponder { margin:0; min-width:0; }
  .eclipse-edition .v2-mobile-actions #hpnick,
  .eclipse-edition .v2-mobile-actions #hpklaar { height:46px; min-height:46px; }
  .eclipse-edition .v2-mobile-actions #hpklaar { padding:10px 12px!important; font-size:16px; }
  .eclipse-edition .v2-mobile-actions #v2validation { top:auto; bottom:calc(100% + 7px); background:#131713; padding:2px 4px; }
}