:root {
  --ink: #1a1410;
  --paper: #f3ead8;
  --red: #c0392b;
  --gold: #c9a227;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ---- Globale RPG-scrollbalk — geldt voor ALLE scrollbare elementen in het spel ---- */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); border-radius: 3px; }
*::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.4); border-radius: 3px; min-height: 32px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.65); }
* { scrollbar-width: thin; scrollbar-color: rgba(201,162,39,0.4) rgba(0,0,0,0.25); }
html, body { height: 100%; background: #0d0b09; color: var(--paper);
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; overflow: hidden; }
.hidden { display: none !important; }

/* ---- Laadscherm (world-loading) ---- */
#world-loading {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #1a1208 0%, #0d0b09 70%);
  display: flex; align-items: center; justify-content: center;
}
.wl-content { text-align: center; user-select: none; }
.wl-kanji {
  font-size: 90px; line-height: 1;
  color: var(--red);
  text-shadow: 0 0 60px rgba(192,57,43,0.5), 0 0 120px rgba(192,57,43,0.2);
  animation: wl-pulse 3s ease-in-out infinite;
}
.wl-title {
  font-size: 18px; letter-spacing: 12px; color: var(--gold);
  margin-top: 8px; padding-left: 12px; opacity: .85;
}
.wl-sub {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  opacity: .4; margin-top: 32px;
}
.wl-bar-wrap {
  width: 280px; height: 3px; margin: 14px auto 0;
  background: rgba(201,162,39,0.15); border-radius: 2px; overflow: hidden;
}
.wl-bar {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transition: width .25s ease;
}
.wl-pct { font-size: 10px; opacity: .35; margin-top: 8px; letter-spacing: 1px; }
@keyframes wl-pulse {
  0%, 100% { text-shadow: 0 0 60px rgba(192,57,43,0.5), 0 0 120px rgba(192,57,43,0.2); }
  50%       { text-shadow: 0 0 80px rgba(192,57,43,0.8), 0 0 160px rgba(192,57,43,0.35); }
}

/* gedeelde UI */
.btn { padding: 12px 16px; cursor: pointer; border: none; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 15px; font-weight: 600; transition: all .15s; }
.btn:hover { background: #d4493b; }
.btn.ghost { background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.35); color: var(--paper); }
.btn.ghost:hover { border-color: var(--gold); background: rgba(0,0,0,0.5); }
.btn.small { padding: 8px 12px; font-size: 13px; font-weight: 500; }
.row { display: flex; gap: 10px; margin-top: 8px; }
.row .btn { flex: 1; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: .6; margin-bottom: 7px; }
.field input { width: 100%; padding: 12px 14px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,162,39,0.3); border-radius: 8px; color: var(--paper); font-size: 16px; }
.field input:focus { outline: none; border-color: var(--gold); }
.status { text-align: center; font-size: 12px; opacity: .55; margin-top: 14px; }
.status.ok { color: #6ab04c; opacity: .85; }
.status.err { color: #e74c3c; opacity: .9; }
.logo { font-size: 56px; line-height: 1; text-align: center; color: var(--red); letter-spacing: 4px; }
.logo span { display: block; font-size: 16px; letter-spacing: 10px; color: var(--gold); margin-top: 6px; padding-left: 10px; }
.tagline { text-align: center; opacity: .6; font-size: 13px; margin: 14px 0 24px; }

/* account-scherm */
#auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 50% 0%, #2a1f1a 0%, #0d0b09 70%); }
.card { width: 100%; max-width: 400px; background: rgba(243,234,216,0.04);
  border: 1px solid rgba(201,162,39,0.25); border-radius: 14px; padding: 32px 28px;
  backdrop-filter: blur(4px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* character creator + select */
#creator-screen, #select-screen { position: fixed; inset: 0; display: flex;
  background: radial-gradient(circle at 30% 20%, #241c18 0%, #0d0b09 75%); }
.cc-left { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; }
#cc-canvas, #sel-canvas { width: 100%; height: 100%; display: block; }
.btn.full { width: 100%; margin-bottom: 10px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* character select */
.sel-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 48vh; overflow-y: auto; }

.sel-empty { font-size: 13px; opacity: .5; text-align: center; padding: 24px 0; }
.sel-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; cursor: pointer;
  border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.2);
  border-left: 3px solid var(--cc, #888); color: var(--paper); transition: all .12s; }
.sel-card:hover { border-color: var(--gold); }
.sel-card.active { background: rgba(192,57,43,0.22); border-color: var(--red); }
.sel-card .jp { font-size: 26px; color: var(--gold); width: 36px; text-align: center; flex: none; }
.sel-card .meta { display: flex; flex-direction: column; gap: 1px; }
.sel-card .meta .nm { font-size: 15px; font-weight: 600; }
.sel-card .meta .nm .lvl { font-size: 10px; font-weight: 600; opacity: .8; color: var(--gold);
  background: rgba(201,162,39,0.15); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.sel-card .meta .cls { font-size: 11px; opacity: .55; }
.sel-count { font-size: 11px; opacity: .5; text-align: center; margin-top: 12px; }
.cc-hint { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 13px; opacity: .55; }
.cc-right { width: 380px; max-width: 42vw; overflow-y: auto; padding: 30px 26px;
  background: rgba(13,11,9,0.7); border-left: 1px solid rgba(201,162,39,0.2); }
.cc-right h2 { font-size: 20px; margin-bottom: 20px; font-weight: 600; }
.cc-right h2 span { color: var(--gold); }
.cc-section { margin-bottom: 22px; }
.cc-toggles { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.cc-toggles .btn.small { text-align: left; }
.cc-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; opacity: .55; margin-bottom: 10px; }
.cc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cc-class { text-align: left; padding: 8px 10px; cursor: pointer; border-radius: 8px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.2); border-left: 3px solid var(--cc, #888);
  color: var(--paper); display: flex; flex-direction: column; gap: 1px; transition: all .12s; }
.cc-class:hover { border-color: var(--gold); }
.cc-class.active { background: rgba(192,57,43,0.22); border-color: var(--red); border-left-color: var(--cc); }
.cc-class .jp { font-size: 15px; color: var(--gold); }
.cc-class .nm { font-size: 13px; font-weight: 600; }
.cc-class .role { font-size: 10px; opacity: .5; }
.slider { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.slider span { width: 60px; opacity: .7; }
.slider input { flex: 1; accent-color: var(--red); }
.colors { display: flex; gap: 16px; }
.colors label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; opacity: .8; }
.colors input[type=color] { width: 46px; height: 34px; border: 1px solid rgba(201,162,39,0.3); border-radius: 6px; background: none; cursor: pointer; }

/* wereld */
#game-screen { position: fixed; inset: 0; }
#game-canvas { display: block; width: 100%; height: 100%; }
#hud { position: fixed; top: 14px; left: 14px; display: flex; gap: 12px; font-size: 13px; pointer-events: none; align-items: center; }
#hud-self, #hud-online { background: rgba(13,11,9,0.7); border: 1px solid rgba(201,162,39,0.3); border-radius: 8px; padding: 8px 12px; }
.hud-mail-wrap {
  position: relative; pointer-events: auto;
}
.hud-mail-btn {
  background: rgba(13,11,9,0.7); border: 1px solid rgba(201,162,39,0.35);
  border-radius: 8px; padding: 6px 10px; font-size: 16px; color: var(--gold);
  cursor: pointer; display: block;
}
.hud-mail-btn:hover { background: rgba(201,162,39,0.15); }
.hud-mail-badge {
  position: absolute; top: -5px; right: -7px;
  background: #c0392b; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
  pointer-events: none; z-index: 32;
}
#hud-self .cls { color: var(--gold); }
#hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(13,11,9,0.7); border: 1px solid rgba(201,162,39,0.2); border-radius: 20px;
  padding: 6px 16px; font-size: 12px; opacity: .65; }

/* ---- Vitals (HP-balk + level/exp) ---- */
#hud-vitals { position: fixed; top: 14px; right: 14px; width: 220px; display: flex; flex-direction: column; gap: 5px;
  background: rgba(13,11,9,0.7); border: 1px solid rgba(201,162,39,0.3); border-radius: 8px; padding: 9px 11px; pointer-events: none; }
.vit-row { display: flex; align-items: center; gap: 8px; }
.vit-lvl { font-size: 13px; color: var(--gold); white-space: nowrap; }
.vit-lvl b { font-size: 15px; }
.vit-bar { position: relative; flex: 1; height: 16px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.4); }
.vit-bar i { position: absolute; inset: 0; width: 100%; transform-origin: left; transition: width .25s ease; }
.vit-bar.hp i { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.vit-bar.exp { height: 12px; }
.vit-bar.exp i { background: linear-gradient(90deg, #b8902a, #e9c84a); width: 0; }
.vit-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9); letter-spacing: .3px; }
#hud-coins { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #f3ead8; margin-top: 1px; }
#hud-coins .coin-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6d770, #c9912a 70%, #946011);
  color: #5a3a08; font-size: 11px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#hud-coins b { color: #e9c84a; font-size: 14px; }
#hud-coins .coin-lbl { opacity: .6; font-size: 11px; }

/* ---- Toast (level-up / dood) ---- */
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 700;
  background: rgba(13,11,9,0.92); border: 1px solid var(--gold); border-radius: 12px;
  padding: 12px 24px; font-size: 18px; font-weight: 700; color: var(--gold);
  box-shadow: 0 8px 30px rgba(0,0,0,.6); pointer-events: none; animation: toastPop .4s ease; }
#toast.death { color: #e74c3c; border-color: #e74c3c; }
@keyframes toastPop { 0% { opacity: 0; transform: translate(-50%, -10px) scale(.9); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }


/* ---- Kist-prompt + Inventory (equip-laag) ---- */
#chest-prompt { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%);
  background: rgba(13,11,9,0.85); border: 1px solid var(--gold); border-radius: 10px;
  padding: 8px 18px; font-size: 15px; color: var(--gold); font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: chestPulse 1.4s ease-in-out infinite; }
@keyframes chestPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }

#inventory, #chest { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 35; }
.inv-wrap { display: flex; gap: 12px; align-items: stretch; max-width: 94vw; }
.inv-panel { width: min(520px, 92vw); max-height: 82vh; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(20,16,12,0.96); border: 1px solid rgba(201,162,39,0.35); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 14px 14px 16px; }
.chest-panel { width: min(580px, 94vw); }
.inv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.inv-head h3 { font-size: 17px; color: var(--gold); letter-spacing: 1px; }
.inv-x { background: none; border: none; color: var(--paper); font-size: 16px; cursor: pointer; opacity: .6; padding: 2px 6px; }
.inv-x:hover { opacity: 1; color: var(--gold); }
.inv-sub { font-size: 11px; opacity: .6; margin: 0 0 8px; }
.inv-hintkbd { color: var(--gold); }
.inv-tabs { display: flex; gap: 4px; margin-bottom: 10px; align-items: center; }
.inv-tab { flex: 1; padding: 5px 6px; font-size: 11px; cursor: pointer; border-radius: 6px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.18); color: var(--paper); opacity: .65; transition: all .12s;
  white-space: nowrap; text-align: center; }
.inv-tab:hover { opacity: 1; border-color: var(--gold); }
.inv-tab.active { opacity: 1; background: rgba(192,57,43,0.22); border-color: var(--red); color: #fff; }
.inv-grid-bar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px; min-height: 20px; }
.inv-grid-bar.hidden { display: none; }
.inv-sort-pill { padding: 3px 10px; font-size: 11px; cursor: pointer; border-radius: 20px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.25); color: var(--paper);
  opacity: .7; transition: all .12s; white-space: nowrap; }
.inv-sort-pill:hover { opacity: 1; border-color: var(--gold); background: rgba(201,162,39,0.1); }
.inv-sort-pill span { color: var(--gold); font-weight: 600; }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; padding-right: 2px; }
.inv-item { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left;
  padding: 6px 8px 8px; border-radius: 8px; cursor: pointer; transition: all .12s;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.18); color: var(--paper); }
.inv-item:hover { border-color: var(--gold); background: rgba(0,0,0,0.5); }
.inv-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 4px; flex: none; }
.inv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.inv-thumb-icon { font-size: 28px; line-height: 1; font-weight: 700; opacity: .9; }
[data-tier="beginner"] .inv-thumb-icon { color: #2ecc71; }
[data-tier="midgame"]  .inv-thumb-icon { color: #3498db; }
[data-tier="endgame"]  .inv-thumb-icon { color: #f1c40f; }
[data-tier="godlike"]  .inv-thumb-icon { color: #e74c3c; text-shadow: 0 0 8px rgba(231,76,60,.5); }
.inv-item .inv-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.inv-item .inv-qty { font-size: 10px; opacity: .6; margin-left: 4px; font-weight: 400; }
.inv-item .inv-tag { font-size: 10px; color: var(--gold); opacity: .8; }
.inv-item.equipped { border-color: var(--red); background: rgba(192,57,43,0.18); }
.inv-item.equipped .inv-tag { color: var(--red); }
/* tier-kleuren (rarity) */
.inv-item[data-tier="beginner"] { border-color: rgba(46,204,113,0.35); }
.inv-item[data-tier="beginner"] .inv-name { color: #2ecc71; }
.inv-item[data-tier="midgame"] { border-color: rgba(52,152,219,0.35); }
.inv-item[data-tier="midgame"] .inv-name { color: #3498db; }
.inv-item[data-tier="endgame"] { border-color: rgba(241,196,15,0.35); }
.inv-item[data-tier="endgame"] .inv-name { color: #f1c40f; }
.inv-item[data-tier="godlike"] { border-color: rgba(231,76,60,0.45); }
.inv-item[data-tier="godlike"] .inv-name { color: #e74c3c; }
/* item-preview: live ronddraaiend model + naam + stats */
#item-preview { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); }
.preview-panel { position: relative; width: min(340px, 90vw); background: rgba(20,16,12,0.97);
  border: 1px solid rgba(201,162,39,0.4); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  padding: 16px; text-align: center; }
.preview-panel .inv-x { position: absolute; top: 8px; right: 8px; }
.preview-canvas { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background: radial-gradient(circle, rgba(201,162,39,0.08), rgba(0,0,0,0.4)); }
.preview-name { font-size: 17px; color: var(--gold); margin-top: 10px; }
.preview-stats { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.preview-stat { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.25); color: var(--paper); }
.preview-desc { font-size: 11px; opacity: .6; margin-top: 10px; }

/* Skills paneel */
#skills-panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 35; }
.skills-panel-inner { width: min(380px, 90vw); }
.skills-grid { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 60vh; padding: 8px 0; }
.skill-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 8px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.18); }
.skill-card .skill-head { display: flex; justify-content: space-between; align-items: center; }
.skill-card .skill-name { font-size: 14px; font-weight: 600; }
.skill-card .skill-lvl { font-size: 13px; color: var(--gold); font-weight: 700; }
.skill-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.4); overflow: hidden; }
.skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #e9c84a); border-radius: 3px; transition: width .3s; }
.skill-exp { font-size: 10px; opacity: .5; text-align: right; }
.inv-item.locked { cursor: not-allowed; opacity: .45; }
.inv-item.locked:hover { border-color: rgba(201,162,39,0.18); background: rgba(0,0,0,0.3); }
.inv-item.locked .inv-tag { color: #b08; opacity: .9; }
.inv-empty { font-size: 12px; opacity: .55; margin-top: 12px; text-align: center; }

/* uitrusting-paneel (wat je draagt + stats) */
.eq-panel { width: 240px; max-height: 82vh; display: flex; flex-direction: column;
  background: rgba(20,16,12,0.96); border: 1px solid rgba(201,162,39,0.35); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 14px; }
.eq-slots { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 12px; }
.eq-slot { position: relative; padding: 8px 10px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px; }
.eq-slot .eq-thumb { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eq-slot .eq-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.eq-slot .eq-thumb .inv-thumb-icon { font-size: 22px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Outfit-slot: groot plaatje bovenaan, info eronder */
.eq-slot--outfit { flex-direction: column; align-items: stretch; padding: 10px; gap: 8px; }
.eq-slot--outfit .eq-thumb--outfit { width: 100%; height: 110px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.25); }
.eq-slot--outfit .eq-thumb--outfit img { width: 100%; height: 100%; object-fit: contain; }
.eq-slot--outfit .eq-thumb--outfit .inv-thumb-icon { font-size: 40px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.eq-slot--outfit .eq-info { flex: none; }
.eq-info { flex: 1; min-width: 0; }
.eq-slot-ignore {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.25); }
.eq-slot.empty { border-style: dashed; opacity: .6; }
.eq-slot-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .5; margin-bottom: 2px; }
.eq-slot-item { display: block; font-size: 14px; font-weight: 600; }
.eq-slot-stat { display: block; font-size: 10px; color: var(--gold); opacity: .8; }
.eq-unequip { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid rgba(201,162,39,0.25); background: rgba(0,0,0,0.4); color: var(--paper); cursor: pointer; opacity: .6; font-size: 12px; }
.eq-unequip:hover { opacity: 1; border-color: var(--red); color: var(--red); }
.eq-slot[data-tier="beginner"] { border-color: rgba(46,204,113,0.4); }
.eq-slot[data-tier="beginner"] .eq-slot-item { color: #2ecc71; }
.eq-slot[data-tier="midgame"] { border-color: rgba(52,152,219,0.4); }
.eq-slot[data-tier="midgame"] .eq-slot-item { color: #3498db; }
.eq-slot[data-tier="endgame"] { border-color: rgba(241,196,15,0.4); }
.eq-slot[data-tier="endgame"] .eq-slot-item { color: #f1c40f; }
.eq-slot[data-tier="godlike"] { border-color: rgba(231,76,60,0.5); }
.eq-slot[data-tier="godlike"] .eq-slot-item { color: #e74c3c; }
.eq-stats { margin-top: auto; border-top: 1px solid rgba(201,162,39,0.18); padding-top: 12px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.eq-stat { text-align: center; }
.eq-stat span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; opacity: .5; }
.eq-stat b { font-size: 18px; color: var(--gold); }
.eq-exp { grid-column: 1 / -1; margin-top: 3px; }
.eq-exp-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.4); overflow: hidden; border: 1px solid rgba(201,162,39,0.18); }
.eq-exp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); }
.eq-exp-txt { display: block; font-size: 9px; opacity: .5; text-align: center; margin-top: 3px; }

/* ---- NPC-panelen (craft / sell / shitateya) ---- */
.npc-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(20,16,12,0.97); border: 1px solid rgba(201,162,39,0.4); border-radius: 12px;
  padding: 20px; min-width: 380px; max-width: 500px; max-height: 82vh; z-index: 500;
  color: #f3ead8; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.npc-panel-title { font-size: 15px; font-weight: 700; color: #c9a227; margin-bottom: 2px; flex-shrink: 0; }
.npc-panel-sub { font-size: 11px; opacity: 0.6; margin-bottom: 10px; flex-shrink: 0; }
.npc-panel-body { overflow-y: auto; flex: 1; padding-right: 4px; }
.npc-panel-footer { margin-top: 12px; text-align: right; flex-shrink: 0; }
.npc-close-btn { background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.28);
  border-radius: 6px; color: #c9a227; padding: 6px 16px; cursor: pointer; font-size: 12px; }
.npc-close-btn:hover { background: rgba(201,162,39,0.25); }

/* Tab-balk (sell categorieën) */
.npc-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-shrink: 0; flex-wrap: wrap; }
.npc-tab { background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.2); border-radius: 6px;
  color: #f3ead8; padding: 4px 10px; cursor: pointer; font-size: 11px; opacity: 0.65; }
.npc-tab:hover { opacity: 1; }
.npc-tab.active { background: rgba(201,162,39,0.2); border-color: rgba(201,162,39,0.5);
  color: #c9a227; opacity: 1; font-weight: 600; }

/* Craft-kaarten (Katanakaji + Shitateya) */
.craft-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.18);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.craft-card.locked { opacity: 0.5; }
.craft-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.craft-card-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); }
.craft-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.craft-card-thumb .inv-thumb-icon { font-size: 22px; }
.craft-card-name { font-weight: 700; font-size: 13px; }
.craft-tier { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,0.4); }
.craft-stat { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.craft-reqs { display: flex; flex-direction: column; gap: 2px; font-size: 11px; margin-bottom: 8px; }
.craft-req { display: flex; justify-content: space-between; align-items: center;
  padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,0.2); }
.craft-req.ok { color: #7fbf7f; }
.craft-req.miss { color: #bf7f7f; }
.craft-req-have { opacity: 0.65; font-size: 10px; }
.craft-btn { border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer;
  font-size: 12px; font-weight: 600; }
.craft-btn:not(:disabled) { background: #c9a227; color: #1a1410; }
.craft-btn:not(:disabled):hover { background: #ddb833; }
.craft-btn:disabled { background: rgba(80,80,80,0.3); color: #666; cursor: default; }
.craft-info-btn { border: 1px solid rgba(201,162,39,0.45); border-radius: 6px; padding: 6px 14px; cursor: pointer;
  font-size: 12px; font-weight: 600; background: rgba(201,162,39,0.12); color: #c9a227; }
.craft-info-btn:hover { background: rgba(201,162,39,0.22); }

/* Sell-kaarten */
.sell-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  margin-bottom: 6px; background: rgba(0,0,0,0.25); border: 1px solid rgba(201,162,39,0.12); }
.sell-card:hover { border-color: rgba(201,162,39,0.28); }
.sell-card[data-tier="beginner"] { border-color: rgba(46,204,113,0.25); }
.sell-card[data-tier="beginner"] .sell-card-name { color: #2ecc71; }
.sell-card[data-tier="midgame"] { border-color: rgba(52,152,219,0.25); }
.sell-card[data-tier="midgame"] .sell-card-name { color: #3498db; }
.sell-card[data-tier="endgame"] { border-color: rgba(241,196,15,0.25); }
.sell-card[data-tier="endgame"] .sell-card-name { color: #f1c40f; }
.sell-card[data-tier="godlike"] { border-color: rgba(231,76,60,0.35); }
.sell-card[data-tier="godlike"] .sell-card-name { color: #e74c3c; }
.sell-card-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); }
.sell-card-thumb .inv-thumb-icon { font-size: 18px; }
.sell-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sell-card-info { flex: 1; min-width: 0; }
.sell-card-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-card-price { font-size: 11px; color: #c9a227; opacity: 0.8; }
.sell-qty-ctrl { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sell-qty-btn { width: 22px; height: 22px; background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.3); border-radius: 4px; color: #c9a227; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0; }
.sell-qty-btn:hover { background: rgba(201,162,39,0.28); }
.sell-qty-input { width: 40px; background: rgba(0,0,0,0.4); border: 1px solid rgba(201,162,39,0.3);
  border-radius: 4px; color: #f3ead8; padding: 3px 4px; font-size: 11px; text-align: center;
  -moz-appearance: textfield; }
.sell-qty-input::-webkit-outer-spin-button,
.sell-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sell-btn { background: rgba(201,162,39,0.18); border: 1px solid rgba(201,162,39,0.4);
  border-radius: 6px; color: #c9a227; padding: 5px 12px; cursor: pointer;
  font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.sell-btn:hover { background: rgba(201,162,39,0.32); }

/* kist-items (catalogus met pak/pas-knoppen) — lijst-layout, thumb + info + knoppen op een rij */
#chest-grid.inv-grid { grid-template-columns: 1fr; }
.chest-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,162,39,0.18); }
.chest-item .inv-thumb { width: 44px; height: 44px; margin-bottom: 0; flex: none; }
.chest-item .inv-thumb-icon { font-size: 20px; }
.chest-item .chest-info { flex: 1; }
.chest-item .chest-btns { margin-left: auto; }
.chest-item[data-tier="beginner"] { border-color: rgba(46,204,113,0.35); }
.chest-item[data-tier="beginner"] .inv-name { color: #2ecc71; }
.chest-item[data-tier="midgame"] { border-color: rgba(52,152,219,0.35); }
.chest-item[data-tier="midgame"] .inv-name { color: #3498db; }
.chest-item[data-tier="endgame"] { border-color: rgba(241,196,15,0.35); }
.chest-item[data-tier="endgame"] .inv-name { color: #f1c40f; }
.chest-item[data-tier="godlike"] { border-color: rgba(231,76,60,0.45); }
.chest-item[data-tier="godlike"] .inv-name { color: #e74c3c; }
.chest-item.locked { opacity: .5; }
.chest-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chest-info .inv-name { font-size: 13px; }
.chest-info .inv-tag { font-size: 10px; }
.chest-own { font-size: 9px; color: #6ab04c; opacity: .9; }
.chest-btns { display: flex; gap: 4px; flex: none; }

/* item context menu */
.inv-ctx { position: absolute; z-index: 900; min-width: 130px; padding: 6px 0;
  background: rgba(20,16,12,0.97); border: 1px solid rgba(201,162,39,0.5); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.7); }
.inv-ctx-btn { display: block; width: 100%; padding: 9px 16px; font-size: 13px; cursor: pointer;
  background: none; border: none; color: var(--paper); text-align: left; transition: background .1s; }
.inv-ctx-btn:hover { background: rgba(201,162,39,0.18); }
.inv-ctx-btn.disabled { opacity: .4; cursor: not-allowed; }
.inv-ctx-btn.disabled:hover { background: none; }

/* ---- Chat (RuneScape-stijl) ---- */
#chat-box { position: fixed; bottom: 0; left: 0; width: 420px; max-width: 100vw; z-index: 15;
  display: flex; flex-direction: column; pointer-events: none; }
#chat-box > * { pointer-events: auto; }
#chat-tabs { display: flex; gap: 0; }
.chat-tab { padding: 5px 14px; font-size: 11px; cursor: pointer; border: none;
  background: rgba(13,11,9,0.55); color: var(--paper); opacity: .6; transition: all .12s;
  border-top: 2px solid transparent; }
.chat-tab:first-child { border-radius: 0 8px 0 0; }
.chat-tab:hover { opacity: .9; }
.chat-tab.active { opacity: 1; background: rgba(13,11,9,0.75); border-top-color: var(--gold); color: var(--gold); }
#chat-log { height: 160px; overflow-y: auto; padding: 6px 10px; font-size: 13px; line-height: 1.45;
  background: rgba(13,11,9,0.65); }
#chat-log .chat-msg { margin: 1px 0; word-break: break-word; }
#chat-log .chat-name { font-weight: 700; cursor: pointer; }
#chat-log .chat-name:hover { text-decoration: underline; }
#chat-log .ch-world .chat-name { color: var(--gold); }
#chat-log .ch-world .chat-text { color: var(--paper); }
#chat-log .ch-whisper { color: #c084fc; font-style: italic; }
#chat-log .ch-whisper .chat-name { color: #a855f7; }
#chat-log .ch-system { color: rgba(243,234,216,0.5); font-style: italic; }
#chat-input-row { display: flex; align-items: center; background: rgba(13,11,9,0.8);
  border-top: 1px solid rgba(201,162,39,0.2); padding: 0 8px; }
#chat-prefix { font-size: 12px; color: #a855f7; font-weight: 600; white-space: nowrap; margin-right: 4px; }
#chat-input { flex: 1; background: none; border: none; outline: none; color: var(--paper);
  font-size: 13px; padding: 8px 0; font-family: inherit; }
#chat-input::placeholder { color: rgba(243,234,216,0.3); }

/* ---- Party UI (linksboven) ---- */
#party-ui { position: fixed; top: 60px; left: 14px; z-index: 14; width: 200px;
  background: rgba(13,11,9,0.7); border: 1px solid rgba(201,162,39,0.3); border-radius: 10px;
  padding: 8px 10px; cursor: move; user-select: none; }
.party-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.party-head span { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); opacity: .7; }
.party-btn { background: none; border: none; color: var(--paper); font-size: 14px; cursor: pointer; opacity: .5; padding: 2px 4px; }
.party-btn:hover { opacity: 1; color: var(--red); }
.party-member { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.party-member + .party-member { border-top: 1px solid rgba(201,162,39,0.12); padding-top: 5px; }
.party-member-info { display: flex; justify-content: space-between; align-items: center; }
.party-member-name { font-size: 12px; font-weight: 600; }
.party-member-name.leader::before { content: '★ '; color: var(--gold); font-size: 10px; }
.party-member-lvl { font-size: 10px; opacity: .5; }
.party-hp-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,0.4); overflow: hidden; }
.party-hp-fill { height: 100%; background: #27ae60; border-radius: 3px; transition: width .3s; }

/* ---- Friends panel ---- */
#friends-panel { position: fixed; top: 14%; right: 20px; transform: none; z-index: 18;
  width: 260px; max-height: 70vh; display: flex; flex-direction: column;
  background: rgba(20,16,12,0.96); border: 1px solid rgba(201,162,39,0.35); border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6); padding: 14px; }
.friends-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(201,162,39,0.3) transparent;
  display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.friend-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px;
  border-radius: 6px; background: rgba(0,0,0,0.25); }
.friend-row.online { background: rgba(39,174,96,0.12); }
.friend-name { font-size: 13px; font-weight: 600; }
.friend-status { font-size: 10px; opacity: .5; }
.friend-status.online { color: #27ae60; opacity: .9; }
.friend-btns { display: flex; gap: 4px; }
.friend-btn { background: none; border: 1px solid rgba(201,162,39,0.2); color: var(--paper); font-size: 11px;
  padding: 3px 8px; border-radius: 5px; cursor: pointer; opacity: .6; }
.friend-btn:hover { opacity: 1; border-color: var(--gold); }
.friend-btn.remove { color: var(--red); }
.friend-btn.remove:hover { border-color: var(--red); }
.friends-add-row { display: flex; gap: 6px; }
.friends-add-row input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,39,0.2);
  color: var(--paper); border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; }
.friends-add-row input::placeholder { color: rgba(243,234,216,0.3); }
.friends-empty { font-size: 12px; opacity: .4; text-align: center; padding: 12px 0; }

/* ---- Social popup (invite/request) ---- */
#social-popup { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 25;
  background: rgba(20,16,12,0.97); border: 1px solid var(--gold); border-radius: 12px;
  padding: 16px 24px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.7);
  animation: popupIn .2s ease-out; }
@keyframes popupIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
#social-popup p { font-size: 14px; margin-bottom: 12px; }
.social-popup-btns { display: flex; gap: 8px; justify-content: center; }

/* party chat kleur */
#chat-log .ch-party .chat-name { color: #27ae60; }
#chat-log .ch-party .chat-text { color: #7dcea0; }

/* ---- Pause menu (ESC) ---- */
#pause-menu, #settings-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,5,0.75); backdrop-filter: blur(4px);
}
.pause-panel {
  width: min(300px, 90vw); background: rgba(20,16,12,0.98);
  border: 1px solid rgba(201,162,39,0.4); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 10px;
  animation: popupIn .2s ease-out;
}
.pause-logo { font-size: 42px; color: var(--red); text-align: center; line-height: 1;
  text-shadow: 0 0 40px rgba(192,57,43,0.4); margin-bottom: 8px; }
.pause-logo span { display: block; font-size: 13px; letter-spacing: 10px; color: var(--gold); opacity: .8; margin-top: 4px; padding-left: 10px; }
.pause-btn { padding: 11px 16px; border-radius: 9px; border: 1px solid rgba(201,162,39,0.3);
  background: rgba(0,0,0,0.35); color: var(--paper); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .15s; text-align: center; }
.pause-btn:hover { background: rgba(201,162,39,0.12); border-color: var(--gold); }
.pause-btn.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.pause-btn.primary:hover { background: #d4493b; }
.pause-btn.danger { border-color: rgba(192,57,43,0.4); color: #e07070; margin-top: 4px; }
.pause-btn.danger:hover { background: rgba(192,57,43,0.15); border-color: var(--red); color: var(--red); }
.settings-title { font-size: 15px; font-weight: 600; color: var(--gold); text-align: center; margin-bottom: 6px; }
.settings-section { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(201,162,39,0.18); border-bottom: 1px solid rgba(201,162,39,0.18); }
.settings-row { display: flex; align-items: center; gap: 10px; }
.settings-row > span:first-child { flex: 1; font-size: 13px; opacity: .8; }
.settings-slider { flex: 1; accent-color: var(--gold); cursor: pointer; }
.settings-pct { font-size: 11px; opacity: .5; width: 30px; text-align: right; }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.12); border-radius: 22px; cursor: pointer; transition: .2s; }
.toggle-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: var(--paper); border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--gold); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }

/* ---- Player context menu ---- */
#player-ctx { position: fixed; z-index: 50; min-width: 160px;
  background: rgba(20,16,12,0.97); border: 1px solid rgba(201,162,39,0.4);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.7);
  padding: 6px 0; animation: popupIn .15s ease-out; }
.ctx-header { padding: 8px 14px 6px; border-bottom: 1px solid rgba(201,162,39,0.18); margin-bottom: 4px; }
.ctx-family { font-size: 10px; letter-spacing: 1px; opacity: .5; text-transform: uppercase; }
.ctx-charname { font-size: 14px; font-weight: 600; color: var(--gold); }
.ctx-btn { display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--paper); font-size: 13px; padding: 7px 14px; cursor: pointer; }
.ctx-btn:hover { background: rgba(201,162,39,0.12); }
.ctx-btn:disabled { opacity: .35; cursor: default; }
.ctx-btn:disabled:hover { background: none; }

/* ---- Player info popup ---- */
#player-info { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); }
.pinfo-panel { position: relative; width: min(320px, 92vw); background: rgba(20,16,12,0.97);
  border: 1px solid rgba(201,162,39,0.4); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7); padding: 16px; text-align: center; }
.pinfo-canvas { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px;
  background: radial-gradient(circle, rgba(201,162,39,0.08), rgba(0,0,0,0.4)); }
.pinfo-family { font-size: 11px; opacity: .45; letter-spacing: 1px; margin-top: 10px; }
.pinfo-name { font-size: 18px; font-weight: 700; color: var(--gold); }
.pinfo-cls { font-size: 12px; opacity: .6; margin-top: 2px; }
.pinfo-gear { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pinfo-gear-item { font-size: 11px; padding: 4px 10px; border-radius: 6px;
  background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.2); }
.pinfo-close { position: absolute; top: 8px; right: 8px; }

/* ---- Follow indicator ---- */
#follow-hud { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(20,16,12,0.9); border: 1px solid rgba(201,162,39,0.35);
  border-radius: 20px; padding: 5px 14px; font-size: 12px; opacity: .8;
  display: flex; align-items: center; gap: 8px; }

/* ---- Loot panel footer ---- */
.loot-panel-footer { padding: 10px 16px 2px; display: flex; justify-content: flex-end; }
#loot-panel { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); }
#loot-panel.hidden { display: none; }

/* ---- Quest panel ---- */
#quest-panel { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); }
#quest-panel.hidden { display: none; }
.quest-panel-inner { position: relative; width: min(620px, 96vw); max-height: 85vh; display: flex; flex-direction: column;
  background: rgba(18,14,10,0.97); border: 1px solid rgba(201,162,39,0.4); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.8); padding: 16px; overflow: hidden; }
.quest-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; margin-top: 10px; }

.quest-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(201,162,39,0.18);
  border-radius: 10px; padding: 12px 14px; transition: border-color .15s; }
.quest-card.quest-active { border-color: rgba(201,162,39,0.45); background: rgba(201,162,39,0.05); }
.quest-card.quest-completed { opacity: .55; }
.quest-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.quest-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.quest-title-block { flex: 1; min-width: 0; }
.quest-name { font-size: 15px; font-weight: 700; color: var(--gold); display: block; }
.quest-jp { font-size: 11px; opacity: .45; letter-spacing: 1px; }
.quest-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-left: auto; flex-shrink: 0; }
.quest-cat-main { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(231,76,60,0.2); color: #e74c3c; }
.quest-cat-side { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(52,152,219,0.2); color: #3498db; }
.quest-req { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.06); opacity: .7; }
.quest-status-tag { font-size: 10px; padding: 2px 8px; border-radius: 5px; }
.quest-status-available { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }
.quest-status-active { background: rgba(201,162,39,0.2); color: var(--gold); }
.quest-status-completed { background: rgba(46,204,113,0.2); color: #2ecc71; }
.quest-desc { font-size: 12px; opacity: .65; line-height: 1.5; margin: 0 0 8px; }
.quest-objectives { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 5px; }
.quest-obj { font-size: 12px; }
.quest-obj.done .quest-obj-label { opacity: .5; text-decoration: line-through; }
.quest-obj-label { display: block; margin-bottom: 2px; }
.quest-obj-progress { font-size: 10px; opacity: .6; float: right; margin-top: -18px; }
.quest-prog-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 2px; }
.quest-prog-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width .3s; }
.quest-rewards { font-size: 11px; opacity: .7; margin-bottom: 8px; }
.quest-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.quest-active-badge { display: inline-block; background: var(--gold); color: #000; font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px; margin-left: 6px; }

/* ── NPC Chat bubbel ─────────────────────────────────────────────────── */
#npc-chat {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(680px, 94vw);
  pointer-events: auto;
}
#npc-chat.hidden { display: none; }
.npc-chat-inner {
  background: rgba(15, 10, 5, 0.96);
  border: 2px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 24px rgba(180,140,60,0.25);
  padding: 0;
  overflow: hidden;
}
.npc-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(180,140,60,0.25);
  background: rgba(180,140,60,0.08);
}
.npc-chat-npcname {
  font-family: var(--font-jp, serif); font-size: 18px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.05em;
}
.npc-chat-body {
  padding: 22px 24px 14px;
  min-height: 90px;
}
.npc-chat-text {
  font-size: 17px; line-height: 1.7; color: #f0e8d0; margin: 0;
  font-family: var(--font-main, sans-serif);
}
.npc-chat-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 16px;
}
.npc-chat-dots { display: flex; gap: 6px; align-items: center; }
.npc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(180,140,60,0.3); transition: background 0.2s;
}
.npc-dot.active { background: var(--gold); }
.npc-chat-btns { display: flex; gap: 10px; }
.npc-chat-btns .btn { padding: 8px 20px; font-size: 14px; }
.npc-chat-btns .btn-primary {
  background: var(--gold); color: #111; font-weight: 700; border: none;
  border-radius: 8px; cursor: pointer;
}
.npc-chat-btns .btn-primary:hover { background: #e8c84a; }

/* ---- Active Quest Tracker (rechts op scherm, BDO-stijl) ---- */
#quest-tracker {
  position: fixed; top: 68vh; right: 16px; transform: translateY(-50%);
  z-index: 25; min-width: 200px; max-width: 260px;
  pointer-events: auto;
}
#quest-tracker.hidden { display: none; }
#quest-tracker.minimized .qt-body { display: none; }
#qt-header {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,8,6,0.85); border: 1px solid rgba(201,162,39,0.45);
  border-radius: 8px 8px 0 0; padding: 5px 10px; cursor: pointer;
}
#qt-header:only-child { border-radius: 8px; }
#quest-tracker.minimized #qt-header { border-radius: 8px; }
#qt-title {
  color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
#qt-toggle {
  background: none; border: none; color: #aaa; font-size: 12px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
#qt-toggle:hover { color: var(--gold); }
.qt-body {
  background: rgba(10,8,6,0.80); border: 1px solid rgba(201,162,39,0.25);
  border-top: none; border-radius: 0 0 8px 8px; padding: 8px 10px;
}
.qt-quest-name {
  color: #e0d5c0; font-size: 12px; font-weight: 600;
  margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.qt-quest-name .qt-cat-main { color: var(--gold); font-size: 10px; margin-right: 4px; }
.qt-quest-name .qt-cat-side { color: #888; font-size: 10px; margin-right: 4px; }
.qt-objs { list-style: none; margin: 0 0 6px; padding: 0; }
.qt-objs li {
  font-size: 11px; color: #bbb; padding: 1px 0;
  display: flex; justify-content: space-between; gap: 8px;
}
.qt-objs li.obj-done { color: #7ed07e; text-decoration: line-through; opacity: .7; }
.qt-objs li .obj-count { color: var(--gold); font-weight: 600; white-space: nowrap; }
.qt-separator { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }

/* ---- Quest Reward Pickup venster ---- */
#quest-reward {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
}
#quest-reward.hidden { display: none; }
.quest-reward-inner {
  background: #1a1510; border: 2px solid var(--gold);
  border-radius: 16px; padding: 30px 36px; min-width: 320px; max-width: 480px;
  text-align: center; box-shadow: 0 12px 60px rgba(0,0,0,0.8);
}
.quest-reward-title {
  font-size: 22px; font-weight: 800; color: var(--gold); margin-bottom: 4px;
}
.quest-reward-qname {
  font-size: 13px; color: #888; margin-bottom: 20px;
}
.quest-reward-label {
  font-size: 11px; color: #666; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 14px;
}
#quest-reward-items {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-bottom: 24px;
}
/* XP / coins: pill — zelfde border-radius als item card */
.quest-reward-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(201,162,39,0.25);
  border-radius: 12px; padding: 10px 18px; font-size: 15px; color: #e8e0d0;
  font-weight: 600;
}
.quest-reward-pill .pill-icon { font-size: 18px; }
/* Equipment item card met 3D-preview */
.quest-reward-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,39,0.3);
  border-radius: 12px; padding: 14px 16px; min-width: 120px;
}
.quest-reward-card .rw-thumb {
  width: 96px; height: 96px;
  border-radius: 8px; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.quest-reward-card .rw-thumb img { width: 100%; height: 100%; object-fit: contain; }
.quest-reward-card .rw-thumb .inv-thumb-icon { font-size: 40px; }
.quest-reward-card .rw-item-name {
  font-size: 13px; color: #e0d5c0; font-weight: 600; text-align: center;
  max-width: 110px; word-break: break-word;
}
.quest-reward-card[data-tier="beginner"] { border-color: rgba(46,204,113,0.35); }
.quest-reward-card[data-tier="midgame"]  { border-color: rgba(52,152,219,0.35); }
.quest-reward-card[data-tier="endgame"]  { border-color: rgba(241,196,15,0.45); }
.quest-reward-card[data-tier="godlike"]  { border-color: rgba(231,76,60,0.5); box-shadow: 0 0 16px rgba(231,76,60,0.2); }

/* ---- Mail / Berichtensysteem ---- */
#mail-panel {
  position: fixed; inset: 0; z-index: 38;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
}
#mail-panel.hidden { display: none; }
.mail-panel-inner {
  background: #161210; border: 1px solid rgba(201,162,39,0.4);
  border-radius: 14px; width: min(700px, 95vw); height: min(520px, 90vh);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,0.7);
}
.mail-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(201,162,39,0.2);
}
.mail-panel-head h3 { font-size: 18px; color: var(--gold); }
.mail-layout {
  display: flex; flex: 1; overflow: hidden;
}
.mail-list {
  width: 240px; min-width: 180px; border-right: 1px solid rgba(255,255,255,0.07);
  overflow-y: auto; padding: 8px 0;
}
.mail-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .12s;
}
.mail-item:hover { background: rgba(201,162,39,0.07); }
.mail-item.active { background: rgba(201,162,39,0.12); }
.mail-item.unread .mail-item-title { color: #fff; font-weight: 700; }
.mail-item-title { font-size: 13px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item-meta { font-size: 10px; color: #666; margin-top: 2px; }
.mail-item .unread-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.mail-detail {
  flex: 1; padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column;
}
.mail-detail-empty { color: #555; margin: auto; font-size: 14px; }
.mail-detail-from { font-size: 11px; color: #888; margin-bottom: 4px; }
.mail-detail-title { font-size: 18px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.mail-detail-body { font-size: 14px; color: #ccc; line-height: 1.7; white-space: pre-wrap; }
.mail-detail-actions { margin-top: 16px; display: flex; gap: 10px; }
.mail-notif {
  position: fixed; bottom: 100px; right: 16px; z-index: 45;
  background: #1a1410; border: 1px solid var(--gold);
  border-radius: 10px; padding: 12px 16px; max-width: 280px;
  animation: mail-slide-in .3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.mail-notif-title { color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mail-notif-body { font-size: 12px; color: #ccc; }
@keyframes mail-slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Mobiele snelkoppelingen ---- */
#mobile-nav {
  display: flex;
  position: fixed; left: 8px; bottom: 235px; z-index: 30;
  flex-direction: column; gap: 6px;
  pointer-events: auto;
}
.mob-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 52px; height: 52px;
  background: rgba(13,11,9,0.80); border: 1px solid rgba(201,162,39,0.35);
  border-radius: 10px; cursor: pointer; color: var(--paper);
  font-size: 20px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.mob-btn span {
  font-size: 8px; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(201,162,39,0.8); line-height: 1; font-weight: 600;
}
.mob-btn:active, .mob-btn.active {
  background: rgba(192,57,43,0.25); border-color: var(--red);
}

/* ---- Mobiel (touch-schermen ≤768px) ---- */
@media (max-width: 768px) {
  /* HUD top-left: kleiner en minder overlap-risico */
  #hud { font-size: 11px; gap: 6px; top: 8px; left: 8px; flex-wrap: wrap; max-width: 55vw; }
  #hud-self, #hud-online { padding: 5px 8px; }

  /* Vitals top-right: smaller */
  #hud-vitals { width: 160px; right: 8px; top: 8px; padding: 6px 8px; }
  .vit-lvl { font-size: 11px; }
  .vit-lvl b { font-size: 13px; }
  .vit-bar { height: 12px; }
  .vit-bar span { font-size: 9px; }
  #hud-coins { font-size: 11px; }
  #hud-coins .coin-ico { width: 14px; height: 14px; font-size: 9px; }
  #hud-coins b { font-size: 12px; }

  /* Chat: full-breedte, minder hoog */
  #chat-box { width: 100vw; }
  #chat-log { height: 90px; font-size: 11px; }
  #chat-input { font-size: 12px; }

  /* Quest tracker: niet overlappend met rechter vitals-panel */
  #quest-tracker { top: auto; bottom: 180px; right: 8px; transform: none; min-width: 150px; max-width: 200px; }
  /* Friends panel: hoger op mobiel */
  #friends-panel { top: 80px; right: 8px; }
  #qt-title { font-size: 10px; }
  .qt-body { padding: 6px 8px; }
  .qt-quest-name, .qt-objs li { font-size: 10px; }

  /* Hint onderin */
  #hint { font-size: 11px; bottom: 6px; padding: 4px 12px; }

  /* NPC chat bubbel: iets hoger zodat hij boven de chat uitkomt */
  #npc-chat { bottom: 120px; width: min(96vw, 680px); }
  .npc-chat-text { font-size: 14px; }
  .npc-chat-header { padding: 10px 14px 8px; }
  .npc-chat-body { padding: 14px 16px 10px; }
  .npc-chat-footer { padding: 8px 14px 12px; }

  /* NPC panelen (shop, craft): niet breder dan scherm */
  .npc-panel { min-width: unset; width: min(92vw, 440px); }

  /* Inventory/chest/skills panels zijn al min(…, 92vw) → goed */

  /* FPS teller opzij op mobiel */
  #fps { display: none; }

  /* Inventory: verticaal stapelen zodat tabs niet afvallen */
  .inv-wrap { flex-direction: column; max-height: 88vh; }
  .inv-panel { width: 100%; max-height: 56vh; }
  .eq-panel { width: 100%; max-height: 32vh; flex-shrink: 0; overflow-y: auto; }
  .eq-slots { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .eq-slot--outfit { width: 100%; }
  .eq-slot--outfit .eq-thumb--outfit { height: 70px; }
  .inv-tabs { flex-wrap: wrap; }
  .inv-tab { flex: 0 1 auto; padding: 4px 8px; font-size: 10px; }

  /* Mobiele nav: positie aanpassen voor kortere chat */
  #mobile-nav { bottom: 165px; }

  /* Party UI compact */
  #party-ui { width: 160px; top: 50px; }
}