/* uitrusting.css (9-10-2026) — het nieuwe uitrustingsvenster (zie eqNieuwTekenen in game-level1-nature.js).
   Links de held in de scène van Choose your hero (het doek #hppodium verhuist hierheen zolang het venster open is), rechts de
   uitrusting per soort. Alles hangt aan #heroeq.eq-nieuw; zonder die klas (?uitrusting=oud, of de maan-elfen) blijft het oude
   venster zoals het was. Laadt ná battle-ui.css. */
#heroeq.eq-nieuw .eqcard { width:min(1200px, 100%); height:min(820px, calc(100dvh - 48px)); max-height:none; }
#heroeq.eq-nieuw .eqart { width:44%; flex:none; position:relative; overflow:hidden; background:#0b120c !important; background-image:none !important; }
#heroeq.eq-nieuw .eqart::after { pointer-events:none; z-index:1; background:linear-gradient(0deg, #0b120cf0 0%, #0b120c99 16%, transparent 36%); }
#heroeq.eq-nieuw .eqart #hppodium { position:absolute; inset:0; display:block; }
#heroeq.eq-nieuw .eqart #hpdoek { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#heroeq.eq-nieuw .eqart #hpdoek:active { cursor:grabbing; }
#heroeq.eq-nieuw .eqart #hpdraaihint { position:absolute; top:16px; left:0; right:0; z-index:2; text-align:center; pointer-events:none;
  font:9px/1.4 var(--v2-sans, Inter, system-ui, sans-serif); letter-spacing:.2em; text-transform:uppercase; color:#e8dcc0b3; text-shadow:0 1px 4px #000; }
#heroeq.eq-nieuw .eqwho { z-index:2; pointer-events:none; }
#heroeq.eq-nieuw #eqgrid, #heroeq.eq-nieuw #eqsom { display:none; }
#heroeq.eq-nieuw .eqbody { padding:28px 30px 30px; }

#eqnieuw { --eq-goud:#d0b37f; --eq-goud-zacht:#c5a977; --eq-tekst:#f0e8d6; --eq-mild:#aab39d; --eq-rand:#93a07b2e; --eq-vlak:#10180f8c;
  --eq-sans:var(--v2-sans, Inter, system-ui, sans-serif); }
#eqnieuw .eqk-som { font:11.5px/1.6 var(--eq-sans); color:var(--eq-mild); padding:10px 13px; border:1px solid #b6a17138; background:#1b2416a6;
  border-radius:3px; }
#eqnieuw .eqk-som b { color:var(--eq-tekst); font-weight:600; }
#eqnieuw .eqk-sectie { margin-top:20px; }
#eqnieuw .eqk-sectie h3 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 9px;
  font:9.5px/1.4 var(--eq-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--eq-goud-zacht); font-weight:600; }
#eqnieuw .eqk-sectie h3 span { font-weight:400; letter-spacing:.1em; color:#8f977f; text-transform:none; font-size:11px; }
#eqnieuw .eqk-rij { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
#eqnieuw .eqk-rij.relieken { grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:6px; }

#eqnieuw .eqk { display:flex; gap:12px; align-items:flex-start; width:100%; padding:10px; text-align:left; color:inherit; font:inherit;
  border:1px solid var(--eq-rand); background:var(--eq-vlak); border-radius:3px; box-sizing:border-box;
  transition:border-color .15s, background-color .15s, transform .15s; }
#eqnieuw button.eqk { cursor:default; }
#eqnieuw button.eqk[data-wissel] { cursor:pointer; }
#eqnieuw button.eqk[data-wissel]:hover, #eqnieuw button.eqk[data-wissel]:focus-visible { border-color:#dbc18f; background:#2a3121; transform:translateY(-1px); }
#eqnieuw .eqk.aan { border-color:#bca172; background:#2f3522d9; box-shadow:inset 3px 0 var(--eq-goud); }
#eqnieuw .eqk.nog { opacity:.5; }
#eqnieuw .eqk.bezig, #eqnieuw .eqk-optie.bezig, #eqnieuw .eqk-stijl.bezig { opacity:.6; pointer-events:none; }
#eqnieuw .eqk-pic { width:52px; height:60px; flex:none; display:grid; place-items:center; border-radius:2px; border:1px solid #a18d5c47;
  background-color:#0c140d; background-size:cover; background-position:center; }
#eqnieuw .eqk-pic.leeg { background:transparent; border-style:dashed; border-color:#93a07b3d; }
#eqnieuw .eqk-sil { width:24px; height:24px; color:#8a97796b; }
#eqnieuw .eqk-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#eqnieuw .eqk-txt small { font:9px/1.4 var(--eq-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--eq-goud-zacht); }
#eqnieuw .eqk.aan .eqk-txt small { color:var(--eq-goud); }
#eqnieuw .eqk-txt b { font:15px/1.25 Georgia, serif; font-weight:normal; color:var(--eq-tekst); }
#eqnieuw .eqk-txt em { font:11px/1.45 var(--eq-sans); font-style:normal; color:var(--eq-mild); }
#eqnieuw .eqk .weapon-mastery { margin-top:6px; }
#eqnieuw .relik { padding:8px; gap:9px; align-items:center; }
#eqnieuw .relik .eqk-pic { width:38px; height:44px; }
#eqnieuw .relik .eqk-txt b { font-size:13px; }
#eqnieuw .relik .eqk-txt em { font-size:10.5px; line-height:1.35; }

#eqnieuw .eqk-opties { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
#eqnieuw .eqk-optie { font:10.5px/1.3 var(--eq-sans); padding:5px 9px; border:1px solid #93a07b4d; background:#0f160e; color:#d8d0bc;
  border-radius:2px; cursor:pointer; }
#eqnieuw .eqk-optie:hover, #eqnieuw .eqk-optie:focus-visible { border-color:#dbc18f; color:#f4e6c4; }
#eqnieuw .eqk-optie.aan { border-color:var(--eq-goud); background:#3a3a24; color:#f4e6c4; cursor:default; }

#eqnieuw .eqk-stijlen { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#eqnieuw .eqk-stijl { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border:1px solid #93a07b40; background:#0f160e;
  color:#d8d0bc; border-radius:2px; cursor:pointer; font:11px/1.3 var(--eq-sans); }
#eqnieuw .eqk-stijl img { width:30px; height:38px; object-fit:cover; border-radius:1px; }
#eqnieuw .eqk-stijl:hover, #eqnieuw .eqk-stijl:focus-visible { border-color:#dbc18f; }
#eqnieuw .eqk-stijl.aan { border-color:var(--eq-goud); background:#3a3a24; color:#f4e6c4; }

/* telefoon en smal scherm: de held bovenaan, de uitrusting eronder */
@media (max-width: 760px) {
  #heroeq.eq-nieuw .eqcard { flex-direction:column; width:100%; height:calc(100dvh - 24px); }
  #heroeq.eq-nieuw .eqart { width:auto; height:40vh; min-height:250px; border-right:none; border-bottom:1px solid #b9a27645; }
  #heroeq.eq-nieuw .eqbody { padding:18px 16px 22px; }
  #eqnieuw .eqk-rij { grid-template-columns:1fr; }
  #eqnieuw .eqk-rij.relieken { grid-template-columns:1fr 1fr; }
}