/* Eclipse battle surfaces. Keep the game's measured HUD zones and button sizes. */
.eclipse-edition #hud { --gold:#c7a775; --gold-hi:#ede3cc; --gold-edge:#8b7957; --bargold:#8b7957; color:var(--v2-paper); }
.eclipse-edition #hudbar { background:linear-gradient(110deg,#101812b5,#27362b70 52%,#0e1813b8); -webkit-backdrop-filter:blur(20px) saturate(1.25); backdrop-filter:blur(20px) saturate(1.25); border-top:1px solid #d3ccac50; box-shadow:0 -10px 40px #0005,inset 0 1px #f5f0d917,inset 0 -1px #ffffff0c; }
.eclipse-edition #hudbar::before { background:radial-gradient(ellipse at 48% 0,#ede9d21a,transparent 70%),repeating-linear-gradient(125deg,#e4e9d703 0 1px,transparent 1px 5px); opacity:1; }
.eclipse-edition #hudbar::after { background:linear-gradient(90deg,transparent,#c7a77580,transparent) top/100% 1px no-repeat; box-shadow:none; }
.eclipse-edition :is(#minimapbox,#toolbox,#heropanel)::after,.eclipse-edition #cmdcard::before,.eclipse-edition .cmdsplit { background:linear-gradient(transparent,#b7a17a44,transparent) center/1px 100% no-repeat; }
.eclipse-edition :is(#minimap,#portrait,.heroslot,.multichip,.qitem) { border:1px solid #a78d615e; border-radius:2px; box-shadow:0 2px 9px #0005; background-color:#0c110e; }
.eclipse-edition #portrait.klikbaar { cursor:pointer; border-color:#c7a775a6; transition:border-color .2s; }
.eclipse-edition #portrait.klikbaar:hover { border-color:#efddb6; box-shadow:0 0 0 2px #c7a77524; }
.eclipse-edition #portrait.klikbaar::after { content:'Equipment ↗'; display:block; position:absolute; inset:auto 0 0; padding:6px 2px; font:8px/1.3 var(--v2-sans); letter-spacing:.06em; text-align:center; color:#f0e4ca; background:linear-gradient(transparent,#0d130fe8 25%); }
.eclipse-edition #selpanel:not(.multi) #selinfo { background:none; border:0; border-radius:0; box-shadow:none; padding:7px 10px; }
.eclipse-edition #selname { color:#eee7d7; font-family:Georgia,serif; font-weight:normal; text-shadow:none; letter-spacing:0; }
.eclipse-edition #selpanel:not(.multi) #selname { font-size:19px; }
.eclipse-edition #selpanel:not(.multi) #selhp,.eclipse-edition #selvs { font:11px/1.4 var(--v2-sans); color:#b4b8a8; margin-top:4px; }
.eclipse-edition :is(#hpwrap,#xpwrap) { height:5px; border:0; border-radius:1px; background:#30372c; box-shadow:none; overflow:visible; }
.eclipse-edition #hpbar { background:linear-gradient(90deg,#648764,#b0c498); box-shadow:none; border-radius:1px; }
.eclipse-edition #xpwrap { height:3px; margin-top:5px; }
.eclipse-edition #xpbar { background:linear-gradient(90deg,#8f784d,#d0b67f); border-radius:1px; }
.eclipse-edition #xptxt { position:relative; top:3px; display:block; color:#a7ac98; font-family:var(--v2-sans); text-shadow:none; letter-spacing:.035em; }
.eclipse-edition #sleuvenrij { margin-top:15px; }
.eclipse-edition #selcond { color:#bcc0ad; font-family:var(--v2-sans); }
.eclipse-edition #renlabel input { accent-color:#b99e6c; }
.eclipse-edition #selcond .balk { background:#30372c; border:0; }
.eclipse-edition :is(#itemslots,#gebruikslots,#wapenslots) i { border-radius:2px; border-color:#9c865e66; box-shadow:none; }
.eclipse-edition :is(#itemslots,#wapenslots) i.aan { border-color:#d5bb87; box-shadow:0 0 0 1px #d5bb871c; }
.eclipse-edition .heroslot:not(.aan) { opacity:.4; }
.eclipse-edition .heroslot.aan { border-color:#c0a16d; }
.eclipse-edition :is(.mbtn2,.gbtn) { background:#17271c85; border:1px solid #c9c2a74a; border-radius:3px; box-shadow:inset 0 1px #ffffff0c; color:#d7ccb5; }
.eclipse-edition :is(.mbtn2,.gbtn):hover { background:#2b3224; border-color:#c7a775; }
.eclipse-edition :is(.mbtn2,.gbtn).on { background:#423c28; border-color:#c7a775; }
.eclipse-edition #cmdcard .cmd { border-radius:3px; border:1px solid #c5c5a844; background-color:#15221b72; box-shadow:inset 0 1px #f3f1d918,0 2px 5px #0002; color:#ded5bd; text-shadow:none; transition:border-color .15s,box-shadow .15s; }
.eclipse-edition #cmdcard { background:none; box-shadow:none; border-color:transparent; }
.eclipse-edition #cmdcard .cmd:not(.spell):not(.recruit):not(.waar) { background-image:linear-gradient(145deg,#d5e3c716,#14231938); }
.eclipse-edition #cmdcard .cmd:hover:not(:disabled) { border-color:#ddc294; box-shadow:inset 0 0 16px #bd9f6b17; transform:none; }
.eclipse-edition #cmdcard .cmd.on { border-color:#d4b783; background-color:#3b3b27; box-shadow:inset 0 -2px #c7a775; }
.eclipse-edition #cmdcard .cmd .lbl { color:#c7c9b7; font-family:var(--v2-sans); font-size:8px; text-shadow:none; letter-spacing:.01em; }
.eclipse-edition #cmdcard .cmd .key { color:#f2e5c9; background:#0c120fd9; border-radius:1px; font:9px/1.3 var(--v2-sans); padding:1px 3px; top:2px; left:2px; }
.eclipse-edition #cmdcard .cmd .ic svg { stroke:#ddd7c4; filter:none; }
.eclipse-edition #cmdcard .cmd .ic svg .v { fill:#ddd7c4; }
.eclipse-edition #cmdcard .cmd:disabled { border-color:#78826b38; }
.eclipse-edition #topbar { background:linear-gradient(100deg,#111c15b8,#28392a8c); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); border:1px solid #c8c2a74a; border-radius:3px; box-shadow:0 5px 22px #0004,inset 0 1px #ffffff0e; color:#d8d4c0; }
.eclipse-edition #topbar::before { background:linear-gradient(90deg,transparent,#cab58940,transparent); }
.eclipse-edition #topbar #gold { color:#e7d6ac; }
.eclipse-edition #topbar #inc { background:#74805a25; border-color:#9d9f7440; color:#c1c5aa; }
.eclipse-edition #objbanner { color:#d8ddc7; }
.eclipse-edition #objbanner :is(button,.objknop,.objlijst) { border-color:#9c885e70; background:#171e16f5; color:#d5d3bd; box-shadow:none; }
.eclipse-edition #hud :focus-visible { outline:2px solid #e2c799; outline-offset:3px; }
.eclipse-edition #tip { background:#131c12f5; border-color:#b8a17280; border-radius:2px; box-shadow:0 10px 30px #0007; }
.eclipse-edition #tip .tart { border-color:#b8a17240; }
.eclipse-edition #tip .tname { font:16px/1.25 Georgia,serif; color:#ece3cc; }
.eclipse-edition #tip .ttext { font:11px/1.6 var(--v2-sans); color:#bfc7b0; }

/* A field journal for the selected hero, using the same artwork as the gallery. */
.eclipse-edition #heroeq { background:#050a07b8; backdrop-filter:blur(9px); padding:24px; box-sizing:border-box; }
.eclipse-edition #heroeq .eqcard { width:min(1040px,100%); max-height:calc(100dvh - 48px); border:1px solid #b9a27670; border-radius:3px; background:#151c14; box-shadow:0 28px 100px #0009; animation:v2-equipment-in .22s ease-out; }
.eclipse-edition #heroeq .eqart { width:34%; background-position:50% 24%; border-right:1px solid #b9a27645; background-color:#111a12; }
.eclipse-edition #heroeq .eqart::after { background:linear-gradient(0deg,#10190ff7,transparent 68%),linear-gradient(90deg,transparent 70%,#11190f45); }
.eclipse-edition #heroeq .eqwho { left:28px; right:24px; bottom:29px; }
.eclipse-edition #heroeq .eqwho::before { content:'YOUR CHAMPION'; display:block; font:9px/1.4 var(--v2-sans); letter-spacing:.18em; color:#c8b48a; margin-bottom:12px; }
.eclipse-edition #heroeq .eqname { font:37px/1.1 Georgia,serif; color:#f2ead8; font-weight:normal; text-shadow:0 2px 12px #0007; }
.eclipse-edition #heroeq .eqrank { font:9px/1.7 var(--v2-sans); letter-spacing:.13em; color:#c3c7b0; margin-top:12px; }
.eclipse-edition #heroeq .eqbody { padding:28px; scrollbar-width:thin; scrollbar-color:#796c4a #151c14; overscroll-behavior:contain; touch-action:pan-y; }
.eclipse-edition .v2-eq-heading { margin:0 38px 21px 0; }
.eclipse-edition .v2-eq-heading > span { display:block; font:9px/1.4 var(--v2-sans); letter-spacing:.2em; color:#c5a977; }
.eclipse-edition #heroeq .v2-eq-heading h2 { color:#eee7d7; font:30px/1.15 Georgia,serif; margin:8px 0 6px; text-shadow:none; letter-spacing:0; }
.eclipse-edition .v2-eq-heading p { margin:0; font:11px/1.6 var(--v2-sans); color:#a8b19e; }
.eclipse-edition #heroeq .eqgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.eclipse-edition #heroeq .eqslot { min-height:76px; padding:10px; gap:12px; border:1px solid #93a07b22; border-radius:2px; background:#10180f77; box-shadow:none; box-sizing:border-box; }
.eclipse-edition #heroeq .eqslot.vol { border-color:#b6a17160; background:#29302077; box-shadow:none; }
.eclipse-edition #heroeq .eqslot.gekozen { border-color:#bca172!important; background:#34392399!important; box-shadow:inset 2px 0 #d0b37f; }
.eclipse-edition #heroeq .eqslot.kiesbaar:hover,.eclipse-edition #heroeq .eqslot.gebruik:hover { border-color:#dbc18f; background:#323a25; }
.eclipse-edition #heroeq .eqpic { width:44px; height:52px; border-radius:1px; border:1px solid #a18d5c40; background-color:#0c140d; }
.eclipse-edition #heroeq .eqslot.leeg .eqpic { background:transparent; border:0; }
.eclipse-edition #heroeq .eqslot.vol .eqpic { box-shadow:none; }
.eclipse-edition #heroeq .eqsil { width:25px; height:25px; color:#8a977963; }
.eclipse-edition #heroeq .eqsleuf { color:#b9ae8b; font:8px/1.4 var(--v2-sans); letter-spacing:.11em; }
.eclipse-edition #heroeq .eqit { font:16px/1.2 Georgia,serif; color:#ece3ca; margin-top:4px; }
.eclipse-edition #heroeq .eqslot.leeg .eqit { display:none; }
.eclipse-edition #heroeq .eqpow { color:#bdc5ad; font:10px/1.5 var(--v2-sans); margin-top:4px; }
.eclipse-edition #heroeq .eqslot.leeg .eqpow { color:#85907b; font-size:10px; font-style:normal; }
.eclipse-edition #heroeq .eqsom { color:#aeb7a0; font:11px/1.6 var(--v2-sans); border-color:#a08a6038; margin-top:20px; padding-top:16px; }
.eclipse-edition #heroeq .eqsom b { color:#ddd0ac; }
.eclipse-edition #heroeq #eqgebruikkop { font:9px/1.5 var(--v2-sans); color:#c5ad7f; letter-spacing:.12em; margin:20px 0 9px; }
.eclipse-edition #heroeq #eqgebruik:has(>.leeg) { grid-template-columns:1fr; }
.eclipse-edition #heroeq #eqgebruik>.leeg { min-height:48px; background:none; border-style:dashed; }
.eclipse-edition #heroeq #eqgebruik>.leeg .eqpow { margin:0; }
.eclipse-edition #heroeq #eqclose { z-index:3; top:16px; right:16px; width:34px; height:34px; border:1px solid #b9a2765c; border-radius:2px; background:#10180fe8; color:#e4d6b9; font:23px/1 var(--v2-sans); box-shadow:none; }
.eclipse-edition #heroeq #eqclose:hover { background:#41452c; border-color:#c7a775; }
@keyframes v2-equipment-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:1000px) and (min-width:761px) {
  .eclipse-edition #heroeq .eqart { width:30%; }
  .eclipse-edition #heroeq .eqbody { padding:24px 20px; }
  .eclipse-edition #heroeq .eqslot { gap:8px; padding:8px; }
  .eclipse-edition #heroeq .eqname { font-size:29px; }
}
@media (max-width:760px) {
  .eclipse-edition #hudbar { height:calc(var(--voet) + 100px + var(--lucht) + 82px + 4px + var(--sab)); }
  .eclipse-edition #minimapbox { height:82px; }
  .eclipse-edition #toolbox { bottom:calc(var(--voet) + 100px + var(--lucht) + 82px + var(--boven) + var(--sab)); }
  .eclipse-edition #selpanel { height:82px; background:none; border:0; border-radius:0; box-shadow:none; }
  .eclipse-edition #selpanel #portrait.solo,.eclipse-edition #selpanel:not(.multi) #portrait { border:1px solid #c7a7758a; border-radius:2px; box-shadow:none; }
  .eclipse-edition #toolbox { background:#122017aa; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-color:#c8c2a74a; border-radius:3px; box-shadow:0 3px 16px #0004,inset 0 1px #ffffff0d; }
  .eclipse-edition #selpanel:not(.multi) #selinfo { padding:2px 0; }
  .eclipse-edition #selpanel #selinfo #selname { font:13px/1.2 Georgia,serif; }
  .eclipse-edition #portrait.klikbaar::after { content:'↗'; padding:2px; text-align:right; font-size:11px; }
  .eclipse-edition #sleuvenrij { margin-top:0; }
  .eclipse-edition #selpanel #selinfo #xpwrap { height:11px; background:none; }
  .eclipse-edition #xpbar { height:2px; }
  .eclipse-edition #xptxt { position:absolute; top:3px; line-height:8px; }
  .eclipse-edition #heroeq { padding:12px; }
  .eclipse-edition #heroeq .eqcard { flex-direction:column; max-height:calc(100dvh - 24px); }
  .eclipse-edition #heroeq .eqart { width:auto; height:164px; background-position:50% 9%; background-size:cover; border-right:0; border-bottom:1px solid #b9a27645; flex-shrink:0; }
  .eclipse-edition #heroeq .eqart::after { background:linear-gradient(90deg,#10190fe8,transparent 100%),linear-gradient(0deg,#10190f55,transparent); }
  .eclipse-edition #heroeq .eqwho { left:21px; bottom:19px; right:50px; }
  .eclipse-edition #heroeq .eqwho::before { margin-bottom:7px; font-size:8px; }
  .eclipse-edition #heroeq .eqname { font-size:29px; }
  .eclipse-edition #heroeq .eqrank { margin-top:7px; font-size:8px; }
  .eclipse-edition #heroeq .eqbody { min-height:0; padding:22px 18px; }
  .eclipse-edition .v2-eq-heading { margin-right:0; }
  .eclipse-edition #heroeq .v2-eq-heading h2 { font-size:27px; }
  .eclipse-edition #heroeq .eqgrid { grid-template-columns:1fr 1fr; gap:7px; }
  .eclipse-edition #heroeq .eqslot { flex-direction:column; align-items:flex-start; gap:9px; padding:12px; min-height:101px; }
  .eclipse-edition #heroeq .eqslot.leeg { flex-direction:row; align-items:center; min-height:76px; }
  .eclipse-edition #heroeq .eqslot.leeg .eqpic { width:20px; height:32px; }
  .eclipse-edition #heroeq .eqsil { width:20px; height:20px; }
  .eclipse-edition #heroeq .eqpow { font-size:10px; }
  .eclipse-edition #heroeq .eqsleuf { font-size:8px; letter-spacing:.04em; }
}
@media (prefers-reduced-motion:reduce) { .eclipse-edition #heroeq .eqcard { animation:none; } }

.eclipse-edition #heroeq .eqslot.vol .eqpic { width:64px; height:64px; flex:0 0 64px; aspect-ratio:1; border-radius:3px; background-size:contain; background-repeat:no-repeat; background-position:center; }
@media(max-width:500px){.eclipse-edition #heroeq .eqslot.vol .eqpic{width:52px;height:52px;flex-basis:52px}}