/* Shared paladin / archer spell language. Loaded after the responsive dock. */
.eclipse-edition [data-school] { --spell-accent:#f3ca72; --spell-rgb:243,202,114; }
.eclipse-edition [data-school="healing"] { --spell-accent:#87e8b5; --spell-rgb:135,232,181; }
.eclipse-edition [data-school="ward"] { --spell-accent:#84cfff; --spell-rgb:132,207,255; }
.eclipse-edition [data-school="ultimate"] { --spell-accent:#ffda8f; --spell-rgb:255,218,143; }
.eclipse-edition .v2-skills .v2-spell-art { position:relative; display:block; width:58px; height:58px; overflow:hidden; border:1px solid #a58a59; border-bottom:2px solid var(--spell-accent); border-radius:5px; background:#111813; box-shadow:0 4px 15px #0006,0 0 14px rgba(var(--spell-rgb),.08); }
.eclipse-edition .v2-spell-art img { display:block; width:100%; height:100%; object-fit:cover; }
.eclipse-edition .v2-skills .v2-spell-art kbd { position:absolute; left:3px; top:3px; width:17px; height:18px; font:600 10px/1 var(--v2-sans); color:#fff0d4; border:1px solid #ceb47e80; border-radius:3px; background:#111810e6; box-shadow:0 1px 4px #0008; }
.eclipse-edition .v2-skills small { color:#e3deca; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell { position:relative; isolation:isolate; border:1px solid #ac9060; border-bottom-color:var(--spell-accent); box-shadow:inset 0 0 0 2px #120e0880,inset 0 0 13px #0005,0 2px 6px #0007; transition:border-color .15s,box-shadow .15s,filter .15s; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell::after { content:''; position:absolute; inset:2px; width:auto; height:auto; opacity:1; pointer-events:none; border:1px solid #ffe2ab30; background:linear-gradient(150deg,#fff2c918,transparent 38%); z-index:2; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell::before { content:''; display:block; position:absolute; left:3px; right:3px; bottom:3px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--spell-accent) calc(100% - var(--cooldown,0%)),#030707a8 0); box-shadow:0 0 6px rgba(var(--spell-rgb),.5); z-index:4; pointer-events:none; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell .key { position:absolute; top:4px; left:4px; z-index:5; display:grid; place-items:center; min-width:17px; height:18px; padding:0 3px; border:1px solid #ddc59880; border-radius:3px; background:#0b1313e8; color:#fff2d6; font:700 11px/1 var(--v2-sans); text-shadow:0 1px 3px #000; box-shadow:0 1px 4px #0009; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="ready"] { box-shadow:inset 0 0 0 2px #120e0880,inset 0 -7px 13px rgba(var(--spell-rgb),.12),0 2px 6px #0007; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell:enabled:hover { border-color:var(--spell-accent); box-shadow:0 0 0 1px rgba(var(--spell-rgb),.4),0 0 16px rgba(var(--spell-rgb),.3); filter:brightness(1.15); }
.eclipse-edition #v2battleDock #cmdcard .champion-spell:focus-visible { outline:2px solid #fff0ca; outline-offset:2px; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="cooling"] { opacity:1; filter:none; border-color:#8c8d81; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell .cool { z-index:3; display:grid; place-items:center; padding-top:8px; color:#fff8e6; font:600 clamp(18px,2vw,25px)/1 var(--v2-sans); font-variant-numeric:tabular-nums; text-shadow:0 2px 3px #000,0 0 9px #000; background:conic-gradient(#070d13c9 calc(var(--p,0)*1%),#070d1338 0); }
.eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="locked"] { opacity:.55; filter:saturate(.45); border-color:#81765d; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="locked"]::before { display:none; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell .spell-lock { display:none; }
.eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="locked"] .spell-lock { display:grid; place-items:center; position:absolute; z-index:4; right:4px; bottom:4px; min-width:19px; height:19px; padding:0 2px; background:#101513eb; border:1px solid #ccb98f7a; border-radius:3px; color:#f5e5bd; font:600 11px/1 var(--v2-sans); }

/* Saturated meters, actual game values and distinct low/empty states. */
.eclipse-edition #v2battleDock #selpanel #selinfo #hpwrap { height:7px; border-radius:3px; background:#0a2019; box-shadow:inset 0 0 0 1px #b2e7ba35,0 0 8px #3ae59918; overflow:hidden; }
.eclipse-edition #v2battleDock #hpbar { height:100%; border-radius:3px; box-shadow:inset 0 1px #c4ffd88c,0 0 7px #4df2a66b; }
.eclipse-edition #v2battleDock #hpwrap[data-health="low"] #hpbar { box-shadow:inset 0 1px #fff0b5a0,0 0 7px #ffce626b; }
.eclipse-edition #v2battleDock #hpwrap[data-health="critical"] #hpbar { box-shadow:inset 0 1px #ffc7cca0,0 0 7px #ff63756b; }
.eclipse-edition #v2battleDock #selpanel #selinfo #xpwrap { position:relative; height:5px; margin-top:6px; border-radius:2px; background:#352a1880; box-shadow:inset 0 0 0 1px #cead6e3b; overflow:visible; }
.eclipse-edition #v2battleDock #xpbar { height:100%; border-radius:2px; background:linear-gradient(90deg,#ba8430,#ffe3a0); box-shadow:inset 0 1px #fff3c593,0 0 5px #ecc6754a; }
.eclipse-edition #v2battleDock #xptxt { position:absolute; inset:8px auto auto 0; white-space:nowrap; color:#e7cd94; font:500 9px/1 var(--v2-sans); letter-spacing:.02em; text-shadow:0 1px 2px #000; }
.eclipse-edition #v2battleDock #sleuvenrij { margin-top:17px; }
.eclipse-edition #v2battleDock #selcond { border-color:#82cbea70; color:#f1fbff; box-shadow:inset 0 1px #bfefff19,0 0 9px #65c7ff0c; }
.eclipse-edition #v2battleDock #selcond .balk { opacity:1; background:linear-gradient(180deg,#b5edff20,transparent 65%),linear-gradient(90deg,#246f97 calc(var(--p,100)*1%),#10202a 0); }
.eclipse-edition #v2battleDock #selcond.laag .balk { background:linear-gradient(180deg,#ffe4ac20,transparent 65%),linear-gradient(90deg,#916124 calc(var(--p,100)*1%),#261e13 0); }
.eclipse-edition #v2battleDock #selcond.op .balk { background:linear-gradient(180deg,#e2757030,#602c3b); }
.eclipse-edition #v2battleDock #selcond .tx { color:#fff; text-shadow:0 1px 3px #0009; font-variant-numeric:tabular-nums; }
.eclipse-edition #v2battleDock #renvink { accent-color:#82d9ff; }
@media (max-width:900px) {
 .eclipse-edition #v2battleDock #selcond { margin:4px 0 6px; }
 .eclipse-edition #v2battleDock #selpanel #selinfo #hpwrap { height:6px; }
 .eclipse-edition #v2battleDock #selpanel #selinfo #xpwrap { height:4px; margin-top:5px; }
 .eclipse-edition #v2battleDock #xptxt { top:6px; font-size:8px; }
 .eclipse-edition #v2battleDock #sleuvenrij { margin-top:15px; }
 .eclipse-edition #v2battleDock #cmdcard .champion-spell .key { top:3px; left:3px; min-width:15px; height:16px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .eclipse-edition #v2battleDock #cmdcard .champion-spell { transition:none; } }

/* Equipment progress and grouped consumables. */
#heroeq .eqpic,#riem .full,#gebruikslots .full{position:relative;overflow:visible}
.item-count{position:absolute;right:3px;bottom:3px;min-width:21px;padding:1px 5px;border:1px solid #ecd48e99;border-radius:5px;background:#07100ef2;color:#fff0bd;font:700 13px/18px system-ui;text-align:center;text-shadow:0 1px 2px #000;box-shadow:0 2px 8px #0009}
.stack-label{white-space:nowrap;color:#f4cb78}
.weapon-mastery{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-top:9px;border-top:1px solid #d1b87724;padding-top:8px;font:11px/1.4 system-ui;color:#c1c7b9;--mastery:#d8a961}
.weapon-mastery.bow{--mastery:#68d5b7}.weapon-mastery.sword{--mastery:#8dbae9}.weapon-mastery.axe{--mastery:#f39756}
.weapon-mastery b{font-size:10px;font-weight:500;color:var(--mastery)}
.weapon-mastery meter{grid-column:1/-1;width:100%;height:5px;border:0;background:#ffffff12;border-radius:5px;overflow:hidden;appearance:none}
.weapon-mastery meter::-webkit-meter-bar{height:5px;border:0;background:#ffffff12}.weapon-mastery meter::-webkit-meter-optimum-value{background:var(--mastery)}
.weapon-mastery small{grid-column:1/-1;font-size:10px;color:#99a499}
#heroeq .eqtxt{min-width:0}#heroeq .eqslot{align-items:start}
@media(max-width:600px){.weapon-mastery{grid-template-columns:1fr}.weapon-mastery b{font-size:10px}#heroeq .eqpow{font-size:11px}}
.eclipse-edition #riem i.full{width:30px;height:30px;background-size:cover}
.eclipse-edition :is(#itemslots,#gebruikslots) i.full{width:30px;height:30px;background-size:cover;flex:0 0 30px}
.eclipse-edition :is(#riem,#gebruikslots) .item-count{min-width:14px;padding:0 3px;right:0;bottom:0;font-size:11px;line-height:15px}
@media(max-width:600px){.eclipse-edition :is(#itemslots,#gebruikslots) i.full{width:28px;height:28px;flex-basis:28px}}

/* The selection previews skills that the campaign has not taught yet. */
.eclipse-edition #heropick .v2-skills > span { --spell-accent:#8b928e; --spell-rgb:139,146,142; }
.eclipse-edition #heropick .v2-spell-art { filter:grayscale(1); opacity:.52; border-color:#737b74; box-shadow:0 3px 9px #0005; }
.eclipse-edition #heropick .v2-skills small { color:#929a94; }