/* uitrusting-pop.css (10-10-2026) — DE POP: het uitrustingsvenster als lijf met een tas (zie eqPopTekenen in game-level1-nature.js).
   Links de waarden van de held, in het midden de held in 3D met de vakken van wat hij draagt links en rechts van hem en zijn wapens eronder,
   onderaan de tas. Alles hangt aan #heroeq.eq-pop; zonder die klas (?uitrusting=lijst of =oud, of de maan-elfen) blijft het vorige venster.
   Laadt ná uitrusting.css. */
#heroeq.eq-nieuw.eq-pop .eqcard { width:min(1260px, 100%); height:min(880px, calc(100dvh - 48px)); max-height:none; }
#heroeq.eq-pop .eqart, #heroeq.eq-pop .eqbody { display:none !important; }
#heroeq.eq-pop #eqclose { z-index:30; }

#eqpop { --eq-goud:#d0b37f; --eq-tekst:#f0e8d6; --eq-mild:#a9b29c; --eq-rand:#93a07b33; --eq-sans:var(--v2-sans, Inter, system-ui, sans-serif);
  position:relative; flex:1; min-width:0; display:grid; grid-template-columns:268px minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) auto; color:var(--eq-tekst); }
#eqpop .r-gewoon { --rk:#b9b3a3; --rg:#b9b3a31a; --rt:#ddd6c6; }
#eqpop .r-magisch { --rk:#6f9be0; --rg:#6f9be030; --rt:#a3c3f4; }
#eqpop .r-zeldzaam { --rk:#d9c05a; --rg:#d9c05a2c; --rt:#f0dc86; }
#eqpop .r-legendarisch { --rk:#e0893c; --rg:#e0893c36; --rt:#f5ac6a; }
#eqpop .r-uniek { --rk:#c9a35a; --rg:#c9a35a3c; --rt:#ebd298; }
#eqpop .r-leeg { --rk:#93a07b38; --rg:transparent; --rt:#a9b29c; }

/* de waarden */
#eqpop .eqp-stats { grid-row:1; grid-column:1; padding:28px 20px 18px 24px; border-right:1px solid #b9a27638; overflow-y:auto;
  background:linear-gradient(180deg, #1a2216, #121a11); font:12px/1.45 var(--eq-sans); }
#eqpop .eqp-naam { position:relative; padding-bottom:16px; border-bottom:1px solid #b9a27630; margin-bottom:14px; }
#eqpop .eqp-naam small { display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--eq-goud); }
#eqpop .eqp-naam b { display:block; font:400 25px/1.15 Georgia, serif; margin:6px 0 4px; color:var(--eq-tekst); }
#eqpop .eqp-naam span { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--eq-mild); }
#eqpop .eqp-score { display:inline-block; margin-top:10px; font-style:normal; font-size:13px; color:#ebd298; padding:3px 9px; border:1px solid #c9a35a55;
  background:#2a2a19; border-radius:2px; }
#eqpop .eqp-score i { font-style:normal; color:#8f977f; font-size:11px; }
#eqpop .eqp-kern { display:grid; gap:8px; margin-bottom:14px; }
#eqpop .eqp-kern > div { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:9px 11px; background:#0d140cb3;
  border:1px solid #b9a27630; border-radius:2px; }
#eqpop .eqp-kern svg { width:22px; height:22px; color:#c5a977; }
#eqpop .eqp-kern span { color:var(--eq-mild); font-size:12px; }
#eqpop .eqp-kern b { font:600 17px/1 var(--eq-sans); color:#f2dfae; font-variant-numeric:tabular-nums; }
#eqpop .eqp-kern b small { font-size:11px; font-weight:400; color:#8f977f; }
#eqpop .eqp-lijst { margin:0; }
#eqpop .eqp-lijst > div { display:flex; justify-content:space-between; gap:10px; padding:6px 2px; border-bottom:1px solid #93a07b1f; }
#eqpop .eqp-lijst dt { color:var(--eq-mild); }
#eqpop .eqp-lijst dd { margin:0; color:var(--eq-tekst); font-variant-numeric:tabular-nums; }
#eqpop .eqp-bonus { margin:14px 0 6px; color:#cdbf9a; font-size:11.5px; }
#eqpop .eqp-mild { color:#8f977f; font-size:11px; margin:4px 0 0; }

/* het lijf: de held over het hele vlak, de vakken eroverheen */
#eqpop .eqp-pop { position:relative; grid-row:1; grid-column:2; display:grid; grid-template-columns:86px minmax(0, 1fr) 86px; grid-template-rows:minmax(0, 1fr) auto;
  padding:26px 30px 16px; gap:12px; overflow:hidden; background:#0b120c; }
#eqpop .eqp-held { position:absolute; inset:0; z-index:0; }
#eqpop .eqp-held::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #0b120ccc 0, transparent 22%, transparent 78%, #0b120ccc 100%), linear-gradient(0deg, #0b120ce6 0, transparent 26%); }
#eqpop .eqp-held #hppodium { position:absolute; inset:0; display:block; }
#eqpop .eqp-held #hpdoek { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#eqpop .eqp-held #hpdoek:active { cursor:grabbing; }
#eqpop .eqp-held #hpdraaihint { position:absolute; top:14px; bottom:auto; left:0; right:0; z-index:2; text-align:center; pointer-events:none;
  font:9px/1.4 var(--eq-sans); letter-spacing:.2em; text-transform:uppercase; color:#e8dcc0a6; text-shadow:0 1px 4px #000; }
#eqpop .eqp-kolom { position:relative; z-index:2; grid-row:1; display:flex; flex-direction:column; justify-content:center; gap:12px; }
#eqpop .eqp-kolom.links { grid-column:1; }
#eqpop .eqp-kolom.rechts { grid-column:3; align-items:flex-end; }
#eqpop .eqp-onder { position:relative; z-index:2; grid-row:2; grid-column:1 / -1; display:flex; justify-content:center; gap:14px; }
#eqpop .eqp-onder .eqp-vak { width:84px; }

/* een vak */
#eqpop .eqp-vak { position:relative; display:grid; place-items:center; width:78px; aspect-ratio:1; padding:0; margin:0; color:var(--rt);
  border:1px solid var(--rk); border-radius:3px; cursor:pointer; font:inherit;
  background:radial-gradient(120% 90% at 50% 100%, var(--rg), transparent 72%), linear-gradient(180deg, #121a11f2, #080d08f2);
  box-shadow:inset 0 0 0 1px #00000099, 0 3px 10px #0009; transition:transform .12s, border-color .12s, box-shadow .12s; }
#eqpop .eqp-vak:hover, #eqpop .eqp-vak:focus-visible { transform:translateY(-1px); border-color:var(--rt); outline:none; }
#eqpop .eqp-vak.gekozen { border-color:var(--rt); box-shadow:inset 0 0 0 1px #000, 0 0 0 2px var(--rk), 0 0 18px var(--rk); }
#eqpop .eqp-vak.bezig { opacity:.55; pointer-events:none; }
#eqpop .eqp-plaat { position:absolute; inset:6px; background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:2px; }
#eqpop .eqp-vak.dim .eqp-plaat { opacity:.42; filter:grayscale(.7); }
#eqpop .eqp-sil { width:30px; height:30px; color:#8a977966; margin-top:-8px; }
#eqpop .eqp-vak small { position:absolute; left:0; right:0; bottom:6px; font:8.5px/1 var(--eq-sans); letter-spacing:.12em; text-transform:uppercase; color:#8f977f; }
#eqpop .eqp-aantal { position:absolute; right:4px; bottom:3px; font:600 11px/1 var(--eq-sans); color:#f2e6c8; text-shadow:0 1px 2px #000; }

/* de tas */
#eqpop .eqp-tas { grid-row:2; grid-column:1 / -1; padding:12px 30px 20px; border-top:1px solid #b9a27645; background:linear-gradient(180deg, #1c1410, #140f0c); }
#eqpop .eqp-tabs { display:flex; gap:6px; margin-bottom:10px; }
#eqpop .eqp-tabs button { font:11px/1 var(--eq-sans); letter-spacing:.08em; padding:7px 14px; color:#cbbfa3; background:#0e0a08; border:1px solid #b9a27640;
  border-radius:2px; cursor:pointer; }
#eqpop .eqp-tabs button.aan { color:#f6e3b7; border-color:#c9a35a; background:#3a2418; box-shadow:inset 0 0 0 1px #00000080; }
#eqpop .eqp-raster { position:relative; display:grid; grid-template-columns:repeat(auto-fill, 62px); gap:6px; max-height:136px; overflow-y:auto; }
#eqpop .eqp-raster .eqp-vak { width:62px; }
#eqpop .eqp-raster .eqp-vak.leeg-tas { cursor:default; pointer-events:none; border-color:#93a07b1f; background:#0b0807b3; box-shadow:inset 0 0 0 1px #00000080; }
#eqpop .eqp-tas-leeg { grid-column:1 / -1; margin:0; color:#a8997e; font:12px/1.4 var(--eq-sans); padding:2px 2px 4px; }

/* het kaartje van een ding */
#eqpop .eqp-info { position:absolute; z-index:20; width:310px; border:1px solid var(--rk); border-radius:3px; background:#0e140de8;
  backdrop-filter:blur(6px); box-shadow:0 14px 40px #000c, 0 0 0 1px #000; font:12px/1.45 var(--eq-sans); }
#eqpop .eqp-info[hidden] { display:none; }
#eqpop .eqp-info-kop { position:relative; display:flex; gap:12px; padding:12px 38px 12px 12px; border-bottom:1px solid var(--rk);
  background:linear-gradient(90deg, var(--rg), transparent 80%); }
#eqpop .eqp-info-plaat { width:64px; height:64px; flex:none; border:1px solid var(--rk); border-radius:2px; background:#080d08 center / contain no-repeat; display:grid; place-items:center; }
#eqpop .eqp-info-plaat svg { width:30px; height:30px; color:#8a977966; }
#eqpop .eqp-info-titel { display:flex; flex-direction:column; gap:3px; min-width:0; }
#eqpop .eqp-info-titel b { font:400 17px/1.2 Georgia, serif; color:var(--rt); }
#eqpop .eqp-info-titel small { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--eq-mild); }
#eqpop .eqp-sterren { font-style:normal; font-size:12px; letter-spacing:2px; color:var(--rt); }
#eqpop .eqp-sterren span { color:#ffffff22; }
#eqpop .eqp-info-dicht { position:absolute; top:8px; right:8px; width:24px; height:24px; padding:0; border:1px solid #b9a27650; background:#0b100b; color:#e8dcc0;
  border-radius:2px; cursor:pointer; font-size:15px; line-height:1; }
#eqpop .eqp-info-lijf { padding:10px 14px 4px; color:#d9d2bf; }
#eqpop .eqp-info-lijf p { margin:0 0 8px; }
#eqpop .eqp-info-lijf .weapon-mastery { margin:6px 0 8px; }
#eqpop .eqp-info-voet { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px 12px; border-top:1px solid #93a07b26; }
#eqpop .eqp-info-voet span { color:var(--eq-mild); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
#eqpop .eqp-actie { font:600 12px/1 var(--eq-sans); padding:9px 16px; color:#1b1408; background:linear-gradient(180deg, #e9cf94, #c9a35a); border:1px solid #f3dfae;
  border-radius:2px; cursor:pointer; }
#eqpop .eqp-actie:hover, #eqpop .eqp-actie:focus-visible { filter:brightness(1.08); outline:none; }

/* telefoon en smal scherm: eerst het lijf, dan de waarden, dan de tas; het kaartje onderaan */
@media (max-width: 760px) {
  #heroeq.eq-nieuw.eq-pop .eqcard { width:100%; height:calc(100dvh - 24px); }
  #eqpop { display:flex; flex-direction:column; overflow-y:auto; }
  #eqpop .eqp-pop { order:1; flex:none; height:520px; grid-template-columns:60px minmax(0, 1fr) 60px; padding:46px 10px 12px; gap:8px; }
  #eqpop .eqp-kolom { gap:8px; }
  #eqpop .eqp-vak, #eqpop .eqp-onder .eqp-vak { width:58px; }
  #eqpop .eqp-sil { width:24px; height:24px; }
  #eqpop .eqp-vak small { font-size:7.5px; letter-spacing:.06em; bottom:4px; }
  #eqpop .eqp-stats { order:2; flex:none; border-right:none; border-top:1px solid #b9a27638; padding:16px; overflow:visible; }
  #eqpop .eqp-naam { padding-bottom:12px; }
  #eqpop .eqp-kern { grid-template-columns:repeat(3, 1fr); gap:6px; }
  #eqpop .eqp-kern > div { grid-template-columns:1fr; justify-items:center; text-align:center; gap:3px; padding:8px 4px; }
  #eqpop .eqp-kern b { font-size:15px; }
  #eqpop .eqp-lijst { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; }
  #eqpop .eqp-tas { order:3; flex:none; padding:12px 16px 90px; }
  #eqpop .eqp-raster { grid-template-columns:repeat(auto-fill, 54px); max-height:none; }
  #eqpop .eqp-raster .eqp-vak { width:54px; }
  #eqpop .eqp-info { position:fixed; left:12px; right:12px; bottom:12px; width:auto; top:auto !important; left:12px !important; }
}

/* Inventory drag targets; only actionable equipment can be moved. */
#eqpop [data-ding^="wapen:"],#eqpop [data-ding^="armour:"]{touch-action:none}
#eqpop .eqp-drop{outline:2px solid #e1bf70;outline-offset:3px;box-shadow:0 0 18px #dab45a55}
#eqpop .eqp-dragging{opacity:.35}
.eqp-drag-ghost{position:fixed;left:0;top:0;width:70px;height:70px;z-index:100000;pointer-events:none;border:2px solid #e1bf70;background:#211e16;border-radius:4px;box-shadow:0 8px 30px #0009}
.eqp-drag-ghost .eqp-plaat{display:block;width:100%;height:100%;background-size:cover;background-position:center}

#eqpspells{grid-column:1/-1;display:flex;gap:6px;padding:8px 20px;background:#171b16;flex-wrap:wrap}
#eqpspells button{display:flex;align-items:center;gap:6px;flex:1;min-width:140px;background:#27291f;border:1px solid #706345;color:#efe4c8;text-align:left;cursor:pointer}
#eqpspells img{width:38px;height:38px;object-fit:cover}#eqpspells small{margin-left:auto;color:#d5b96b}

#eqpspellinfo{flex-basis:100%;margin:3px 0;color:#e6dac1;font-size:13px}

.eqp-sockets{padding:10px 0;border-top:1px solid #8c784144;margin-top:8px}.eqp-sockets b{color:#bcece9;letter-spacing:.06em}.eqp-sockets button,[data-offhand]{background:#343628;color:#f4e7bd;border:1px solid #877648;border-radius:4px;padding:7px;margin:3px;cursor:pointer}.eqp-sockets button:disabled{opacity:.4;cursor:default}

.eqp-gem-slots{display:flex;gap:9px;margin:10px 0}.eqp-gem-slots .eqp-gem-slot{position:relative;min-width:56px;min-height:56px;font-size:30px;background:radial-gradient(#283331,#0d1515);border:2px solid #7d7250;border-radius:7px;color:#758b89}.eqp-gem-slots .eqp-gem-slot.filled{color:#d0fff9;border-color:#dfcb83;text-shadow:0 0 12px #78cde4}.eqp-gem-slot small{position:absolute;bottom:1px;right:5px;font-size:10px}.eqp-storage-note{grid-column:1/-1;color:#d9c899;font-size:12px;margin:4px 0}[data-store-item]{padding:8px;background:#443927;color:#eed9a7;border:1px solid #8b7142;border-radius:4px}[data-store-item]:disabled{opacity:.45}.eqp-info small{display:block}

/* Inventory 129: one portrait, weapons below life, clear socket targets. */
.inventory129.singleHero129 #heropanel .heroslot[data-h="pal"]{display:none!important}
.inventory129 #ab-wapen,.inventory129 #itemslots{display:none!important}
#heroWeapons129{display:flex;gap:5px;margin:6px 0;flex-wrap:wrap}
#heroWeapons129[hidden]{display:none}
#heroWeapons129 button{width:38px;height:38px;padding:2px;background:#171b15;border:1px solid #7f7355;border-radius:4px;cursor:pointer}
#heroWeapons129 button.active{border:2px solid #f3d081;box-shadow:0 0 8px #c69b4966}
#heroWeapons129 img{width:100%;height:100%;object-fit:cover}
.eqp-gem-slot img{width:38px;height:38px;object-fit:cover;border-radius:4px}
.eqp-gem-slot{min-width:56px;min-height:56px;font-size:26px}

.inventory129.singleHero129 #advisor #advportrait,.inventory129.singleHero129 #advisor canvas,.inventory129.singleHero129 #advisor video{display:none!important}

/* Local inventory139: direct socket controls, also reachable by keyboard. */
#eqpquickgems:empty{display:none}#eqpquickgems{padding:10px 0 12px;border-bottom:1px solid #b9a27645;margin-bottom:10px;color:#d8c9a7;font:12px/1.4 var(--eq-sans)}
.eqp-quick-title,.eqp-quick-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.eqp-quick-title{justify-content:space-between;margin-bottom:7px}.eqp-quick-title button{background:#1b231c;color:#c8bc9f;border:1px solid #64593f;border-radius:4px;padding:5px 9px}.eqp-quick-title button[aria-pressed=true]{border-color:#e4bd5f;color:#ffe2a1}.eqp-quick-slots,.eqp-quick-colors{display:flex;gap:6px}.eqp-quick-row button{position:relative;width:45px;height:45px;padding:0;border:1px solid #b29759;border-radius:5px;background:#101714;color:#d1b56e;font-size:25px;overflow:hidden;cursor:pointer}.eqp-quick-row img{width:100%;height:100%;object-fit:cover}.eqp-quick-row small{position:absolute;right:2px;bottom:1px;background:#100e0be6;color:white;font:11px sans-serif;padding:0 3px;border-radius:2px}.eqp-quick-row button:disabled{opacity:.33;cursor:default}.eqp-quick-row button:focus-visible{outline:3px solid #fff2b0;outline-offset:2px}.eqp-gem-arrow{color:#bca779;font-size:20px}#eqpquickgems>small{display:block;margin-top:6px;color:#a99e85}@media(max-width:760px){.eqp-quick-title{align-items:flex-start}.eqp-quick-row{gap:7px}.eqp-quick-row button{width:39px;height:39px}.eqp-quick-slots,.eqp-quick-colors{gap:4px}}

/* inventory142: deliberate drops and visible guidance on mouse, pen and touch. */
#eqpop.drag142 [data-ding^="weaponGem:"],#eqpop.drag142 [data-ding^="forge:diamond:"],#eqpop.drag142 [data-gem-item][data-gem-color]{touch-action:none;user-select:none;cursor:grab;-webkit-user-drag:none}
#eqpop.drag142 .eqp-quick-slots button{min-width:49px;min-height:49px}
#eqpop.drag142 .eqp-drop{outline:2px solid #dcc27d;outline-offset:2px;box-shadow:0 0 13px #d4b26944}
#eqpop.drag142 .eqp-drop-hover142{outline:3px solid #eafbc3;box-shadow:0 0 19px #e0c47288;transform:scale(1.04)}
#eqpop.drag142 .eqp-drop-no142{outline:2px solid #d48277;box-shadow:0 0 12px #a3322244}
.eqp-drag-ghost142{position:fixed;top:0;left:0;width:66px;height:66px;z-index:2147483647;pointer-events:none;border:1px solid #e9ce85;border-radius:12px;background:#171a17ed;box-shadow:0 8px 20px #000b;padding:3px}
.eqp-drag-ghost142 img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.eqp-drag-status142{position:fixed;z-index:2147483646;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(540px,90vw);padding:12px 18px;background:#171b18f5;border:1px solid #bba36b;border-radius:9px;color:#ffe8b3;font-size:13px;pointer-events:none;box-shadow:0 4px 28px #0009}
.eqp-drag-status142[data-state="blocked"]{border-color:#c98372;color:#ffe0d4}
.eqp-attack-icon142{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 5px #0009)}

#eqpraster.eqp-learning142{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.eqp-learning-intro142{grid-column:1/-1;color:#d0c6ad;margin:0 0 5px;font-size:12px}
.eqp-lesson142{display:flex;gap:10px;align-items:center;background:linear-gradient(130deg,#2a2b21,#151d19);border:1px solid #6d6045;border-radius:7px;padding:8px;min-width:0}
.eqp-lesson142>.eqp-vak{flex:0 0 66px;width:66px;height:66px}
.eqp-lesson142 b{display:block;color:#eee2bd;font-size:13px}.eqp-lesson142 small{display:block;color:#b5b7a0;font-size:11px;margin-top:5px}

/* 144 — a coherent small heraldic stat set, readable at its actual display size. */
#eqpop .eqp-kern>div:has(.eqp-stat-icon144){grid-template-columns:42px minmax(0,1fr) auto;gap:8px;padding:6px 8px;background:linear-gradient(105deg,#28302299,#10170ee8)}
#eqpop .eqp-stat-icon144{display:block;width:42px;height:42px;filter:drop-shadow(0 2px 3px #0009)}
#eqpop .eqp-kern .eqp-stat-caption144{display:block;font-size:9px;color:#a6aa96;margin-top:2px}

/* 147: hero and companion above the map/action dock. */
.eclipse-edition #v2battleDock #heropanel{position:absolute!important;left:12px!important;bottom:calc(100% + 8px)!important;top:auto!important;display:flex!important;gap:8px;width:auto;height:72px;grid-area:1 / 1 / -1 / -1!important;right:auto!important;overflow:visible}
.inventory129.singleHero129 #heropanel .heroslot[data-h="pal"]{display:block!important}
.eclipse-edition #v2battleDock #heropanel .heroslot{width:54px;height:72px;position:relative;overflow:hidden;border-radius:7px}
#heropanel .heroslot>i,#heropanel .heroslot>span{z-index:3}
#eqpquickgems{padding:6px 0!important}#eqpquickgems .eqp-quick-title>b{display:none}#eqpquickgems .eqp-quick-title{margin-bottom:4px}#eqpquickgems .eqp-quick-row{gap:7px}#eqpquickgems button img{object-fit:cover}#eqpquickgems .eqp-quick-slots button,#eqpquickgems .eqp-quick-colors button{width:40px;height:40px;min-width:40px}

/* All equipment sources use the same pointer gesture on touch devices. */
#eqpop.drag142 [data-ding]{touch-action:none;user-select:none;-webkit-user-drag:none}

/* A socketed diamond remains visible as an unavailable bag reference. */
#eqpop .eqp-vak.dim .eqp-plaat{filter:grayscale(1);opacity:.32}

/* Four finger rings, separate from the arm bracelet. */
#eqpop .eqp-kolom.rechts {display:grid;grid-template-columns:repeat(2, 62px);align-content:center;gap:8px;justify-content:end;}
#eqpop .eqp-kolom.rechts .eqp-vak {width:62px;}
#eqpop .eqp-kolom.rechts .eqp-vak:first-child,#eqpop .eqp-kolom.rechts .eqp-vak:last-child {grid-column:1/-1;justify-self:end;}
#eqpop .r-leeg .eqp-sil {width:34px;height:34px;color:#c5ae7e;filter:drop-shadow(0 1px 2px #000);opacity:.8;}
#eqpop .r-leeg {border-color:#ae946947;background:radial-gradient(ellipse at 50% 35%,#64503924,transparent 72%),#10150ff2;box-shadow:inset 0 0 0 3px #080d0880,inset 0 0 18px #0008,0 2px 8px #0006;}
@media(max-width:760px){#eqpop .eqp-kolom.rechts{grid-template-columns:repeat(2,42px);gap:5px;}#eqpop .eqp-kolom.rechts .eqp-vak{width:42px;}#eqpop .eqp-kolom.rechts .eqp-sil{width:23px;height:23px;}#eqpop .eqp-kolom.rechts small{font-size:6px;}}

#eqpop .eqp-kolom.links .eqp-vak{width:68px;}
@media(max-width:760px){#eqpop .eqp-kolom.links .eqp-vak{width:58px;}}

/* One vertical jewellery column; no side-by-side ring slots. */
#eqpop .eqp-kolom.rechts{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:flex-end;}
#eqpop .eqp-kolom.rechts .eqp-vak{width:57px;flex:0 0 57px;}
#eqpop .eqp-empty-ring155{position:absolute;width:40px;height:40px;top:2px;left:8px;}
#eqpop .r-leeg:has(.eqp-empty-ring155) .eqp-sil{visibility:hidden;}
@media(max-width:760px){#eqpop .eqp-kolom.rechts .eqp-vak{width:48px;flex-basis:48px;}#eqpop .eqp-empty-ring155{width:32px;height:32px;left:7px;}}

/* PIN 305: dedicated close rail, including narrow screens. */
#heroeq.eq-pop .eqcard{padding-top:44px;box-sizing:border-box;}
#heroeq.eq-pop #eqclose{top:5px;right:10px;width:34px;height:34px;z-index:40;}
@media(max-width:760px){
 #eqpop .eqp-kern{grid-template-columns:repeat(2,minmax(0,1fr));}
 #eqpop .eqp-kern>div:has(.eqp-stat-icon144){grid-template-columns:32px minmax(0,1fr);gap:5px;}
 #eqpop .eqp-stat-icon144{width:30px;height:30px;grid-row:1/3;}
 #eqpop .eqp-kern>div:has(.eqp-stat-icon144)>b{grid-column:2;line-height:1.25;}
 #eqpop .eqp-kern span{overflow-wrap:anywhere;}
 .inventory-light305 #eqpop .eqp-held::after{display:none;}
}

/* Mobile polish: generous touch targets, without changing diamond artwork. */
@media(max-width:760px){html:not(.inventory-polish-old) .eqp-quick-row button{min-width:48px;min-height:48px;flex:0 0 48px}html:not(.inventory-polish-old) .eqp-quick-colors{flex-wrap:wrap;gap:7px}html:not(.inventory-polish-old) .eqp-quick-row{row-gap:12px}}
/* Empty ring placeholders use neutral grey artwork and labels. */
html:not(.inventory-polish-old) #eqpop .r-leeg:has(.eqp-empty-ring155){--rt:#a2a2a2;border-color:#77777755;background:radial-gradient(ellipse at 50% 35%,#60606024,transparent 72%),#131513f2;}
html:not(.inventory-polish-old) #eqpop .eqp-empty-ring155{filter:grayscale(1);opacity:.72;}
html:not(.inventory-polish-old) #eqpop .r-leeg:has(.eqp-empty-ring155) small{color:#a2a2a2;}

/* Empty means unowned; a neutral equipment silhouette stays legible at phone size. */
.champion-start321 #eqpop .r-leeg{--rk:#62676b;--rt:#a7a9ac;--rg:#55555522;border-color:#686c7066;background:#161719;}
.champion-start321 #eqpop .eqp-empty-art321{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;opacity:.76;filter:grayscale(1);border-radius:2px;pointer-events:none;}
.champion-start321 #eqpop .r-leeg small{color:#b3b5b8;background:linear-gradient(transparent,#101114ed);padding:8px 1px 2px;bottom:0;line-height:1.2;text-shadow:0 1px 2px #000;}
.champion-start321 #eqpop .r-leeg .eqp-sil{color:#a7a9ac;filter:grayscale(1);}
.champion-start321 #eqpspells .spell-locked321{filter:grayscale(1);opacity:.52;border-color:#73767a;color:#b2b4b7;}
.champion-start321 #eqpop .eqp-lesson142:has(.dim){filter:grayscale(1);border-color:#565a5e;}
.champion-start321 .eclipse-edition #v2battleDock #cmdcard .champion-spell[data-state="locked"]{filter:grayscale(1);border-color:#73767a;color:#b2b4b7;}
.champion-start321 #hpdoek{touch-action:pan-y;}
.champion-start321 #eqpop .eqp-held #hpdoek{touch-action:pan-y;}
.champion-start321 #eqpop.drag142 [data-ding],.champion-start321 #eqpop.drag142 [data-gem-item][data-gem-color]{touch-action:pan-y;-webkit-touch-callout:none;}
@media(max-width:760px){
 .champion-start321 #eqpop{overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scroll-padding-block:16px;}
 .champion-start321 #eqpop .eqp-tas,.champion-start321 #eqpop .eqp-raster{overflow:visible;max-height:none;}
 .champion-start321 #eqpop .eqp-held #hpdraaihint{letter-spacing:.05em;font-size:9px;}
}

/* Descriptive spell tooltips must never cover the tappable hero portrait. */
.champion-start321 #tip,.champion-start321 #tip *{pointer-events:none!important;}

.champion-start321 #eqpop .eqp-quick-row:has(.eqp-quick-colors:empty) .eqp-gem-arrow{display:none;}