/* Gedeelde componenten (F134, spec §2.2). Laadt ná de inline <style>, zodat de alias-selectors hier bij
   gelijke specificiteit winnen van wat er inline nog staat. De DOM-overstap naar .cwTab/.cwClose komt in
   F136 (hub, settings) en F137 (tas, Cash Shop); daarna vallen de aliassen weg. */

/* Tab. Actieve stand: alleen [aria-selected="true"]. */
.cwTabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-height:calc(var(--cw-tap) + 4px)}
.cwTab{
  flex:0 0 auto;min-height:var(--cw-tap);padding:0 12px;border-radius:var(--cw-r-md);
  border:1px solid var(--cw-brass-dim);background:var(--cw-wood-raise);box-shadow:none;color:var(--cw-parchment-dim);
  font:900 var(--cw-fs-label)/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.cwTab[aria-selected="true"]{
  border-color:var(--cw-gold);color:var(--cw-gold);
  background:linear-gradient(180deg,var(--cw-wood-raise-top),var(--cw-wood-raise))}
.cwTab:focus-visible{outline:2px solid var(--cw-gold);outline-offset:2px}
.cwTabs.cwTabsFill>.cwTab{flex:1 1 0}
/* Tas-categorietabs: drie vaste kolommen in #bagCategoryTabs. Tikdoel sinds F135 op --cw-tap; F137 past de tas-lay-out aan. */
#bagCategoryTabs .cwTab{min-width:0;min-height:var(--cw-tap);padding:0 4px;font-size:var(--cw-fs-label);letter-spacing:.06em;white-space:nowrap}

/* Sluitknop: kruis uit twee pseudo-elementen, geen glyph, geen emoji, geen asset. font-size:0 verbergt de
   tekstglyph (×, CLOSE) die de bestaande DOM nog draagt; het vlak komt uit deze regel zolang .cwIconBtn
   niet in de DOM staat. */
.cwClose,.modalClose,#cashShopClose,#bagCloseBtn,#bagInfoCloseBtn,#closeMapBtn,#characterCloseBtn,#equipmentCloseBtn{
  position:relative;flex:0 0 auto;width:var(--cw-tap);height:var(--cw-tap);min-width:var(--cw-tap);min-height:var(--cw-tap);
  padding:0;border-radius:var(--cw-r-md);border:1px solid var(--cw-brass);
  background:linear-gradient(180deg,var(--cw-wood-raise-top),var(--cw-wood-raise));box-shadow:inset 0 1px 0 var(--cw-brass-lit);
  color:var(--cw-parchment);font-size:0;line-height:0;cursor:pointer}
.cwClose::before,.cwClose::after,.modalClose::before,.modalClose::after,
#cashShopClose::before,#cashShopClose::after,
#bagCloseBtn::before,#bagCloseBtn::after,#bagInfoCloseBtn::before,#bagInfoCloseBtn::after,
#closeMapBtn::before,#closeMapBtn::after,#characterCloseBtn::before,#characterCloseBtn::after,
#equipmentCloseBtn::before,#equipmentCloseBtn::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;
  border-radius:var(--cw-r-sm);background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.cwClose::after,.modalClose::after,#cashShopClose::after,#bagCloseBtn::after,
#bagInfoCloseBtn::after,#closeMapBtn::after,#characterCloseBtn::after,#equipmentCloseBtn::after{transform:translate(-50%,-50%) rotate(-45deg)}
.cwClose:focus-visible,.modalClose:focus-visible,#cashShopClose:focus-visible,
#bagInfoCloseBtn:focus-visible,#closeMapBtn:focus-visible,#characterCloseBtn:focus-visible,#equipmentCloseBtn:focus-visible{outline:2px solid var(--cw-gold);outline-offset:2px}

/* Guards: een component met eigen display verslaat de UA-regel voor [hidden] (memory dom-stub-blind-voor-css). */
.cwTab[hidden],.cwTabs[hidden],.cwClose[hidden]{display:none!important}