/* Nebelheim: Grundstil. Fensterstile liegen in client/styles/*.css und werden beim Bauen angehaengt. */
:root {
  --ui-scale: 1;
  --font-scale: 1;
  --bg: rgba(18, 20, 26, 0.92);
  --bg2: rgba(30, 32, 40, 0.95);
  --bg3: rgba(46, 48, 58, 0.95);
  --line: rgba(200, 180, 130, 0.28);
  --line2: rgba(200, 180, 130, 0.55);
  --text: #ece6d8;
  --muted: #a49e90;
  --gold: #e8c060;
  --accent: #d8a848;
  --good: #6ad07a;
  --bad: #ff6a5a;
  --warn: #ffc04a;
  --info: #7ab8ff;
  --hp: #c8383a;
  --hp2: #ff5a50;
  --res: #3a78d8;
  --xp: #a07ae8;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  --radius: 6px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --title: Georgia, 'Times New Roman', serif;
  font-size: calc(14px * var(--font-scale));
}
:root.contrast {
  --bg: rgba(0, 0, 0, 0.97); --bg2: #000; --bg3: #111; --line: #fff; --line2: #ffd800; --text: #fff; --muted: #e0e0e0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0e12; color: var(--text); font-family: var(--font); }
#gl, #overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: none; }
#ui .win, #ui .modal-wrap, #ui #screen > *, #ui .interactive, #ui #hud .interactive, #ui button, #ui input, #ui select, #ui textarea { pointer-events: auto; }
#screen, #hud, #windows, #modals, #toasts { position: absolute; inset: 0; }
#hud { transform-origin: 0 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .info { color: var(--info); }
.gold { color: var(--gold); }
.small { font-size: 0.86em; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1; }
.sep { height: 1px; background: var(--line); margin: 8px 0; }
h1, h2, h3, h4 { font-family: var(--title); font-weight: normal; margin: 0 0 6px; color: var(--gold); }
h3 { font-size: 1.1em; } h4 { font-size: 1em; color: var(--accent); }
a { color: var(--info); }

/* Knoepfe und Felder */
button, .btn {
  font: inherit; color: var(--text); background: linear-gradient(#3a3a46, #2a2a34); border: 1px solid var(--line2); border-radius: 4px;
  padding: 5px 12px; cursor: pointer; transition: filter 0.1s;
}
button:hover:not(:disabled) { filter: brightness(1.25); }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
button:disabled { opacity: 0.45; cursor: default; }
.btn.primary, button.primary { background: linear-gradient(#a07a2a, #6e5018); border-color: #e8c060; color: #fff6e0; }
.btn.danger, button.danger { background: linear-gradient(#8a2a24, #5a1814); border-color: #ff8a70; }
.btn.small, button.small { padding: 2px 8px; font-size: 0.86em; }
input, select, textarea {
  font: inherit; color: var(--text); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px;
}
input[type='range'] { padding: 0; }
input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--accent); }
label.field { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
label.field > span { color: var(--muted); font-size: 0.9em; }
label.check { display: flex; gap: 8px; align-items: center; margin: 4px 0; cursor: pointer; }

/* Fenster */
.win {
  position: absolute; min-width: 260px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow);
}
.win-head {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; cursor: move; user-select: none;
  background: linear-gradient(rgba(90, 70, 30, 0.5), rgba(40, 32, 18, 0.4)); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.win-title { font-family: var(--title); color: var(--gold); font-size: 1.08em; letter-spacing: 0.02em; }
.win-close { background: none; border: none; padding: 0 6px; font-size: 1em; color: var(--muted); }
.win-close:hover { color: var(--text); }
.win-body { padding: 10px 12px; overflow: auto; flex: 1; }

/* Listen und Tabellen */
.list { display: flex; flex-direction: column; gap: 2px; }
.list > .item { padding: 5px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); display: flex; gap: 8px; align-items: center; }
.list > .item:hover { background: rgba(255, 255, 255, 0.07); }
.list > .item.sel { background: rgba(232, 192, 96, 0.16); outline: 1px solid var(--line2); }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; color: var(--muted); font-weight: normal; font-size: 0.86em; border-bottom: 1px solid var(--line); padding: 3px 6px; }
table.tbl td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.grid { display: grid; gap: 4px; }

/* Reiter */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; flex-wrap: wrap; }
.tab { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; padding: 4px 10px; color: var(--muted); }
.tab.on { background: var(--bg3); border-color: var(--line); color: var(--gold); }

/* Balken */
.bar { position: relative; height: 14px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 3px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 0.15s; }
.bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.78em; text-shadow: 0 1px 2px #000; }
.bar.hp .bar-fill { background: linear-gradient(#e0504a, #9a2626); }
.bar.res .bar-fill { background: linear-gradient(#5a9aff, #2a5ab0); }
.bar.xp .bar-fill { background: linear-gradient(#b890ff, #6a4ab8); }
.bar.cast .bar-fill { background: linear-gradient(#ffd070, #c08a20); }
.bar.prog .bar-fill { background: linear-gradient(#80d080, #3a8a3a); }

/* Gegenstandskacheln */
.islot {
  position: relative; width: 44px; height: 44px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.35)); display: flex; align-items: center; justify-content: center;
  user-select: none; cursor: default;
}
.islot.small { width: 34px; height: 34px; }
.islot.small .iicon { font-size: 18px; }
.islot .iicon { font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.islot .iqty { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: bold; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.islot .iplus { position: absolute; left: 2px; top: 0; font-size: 10px; color: var(--gold); text-shadow: 0 0 2px #000; }
.islot .ibroken { position: absolute; right: 2px; top: 0; font-size: 10px; color: var(--bad); font-weight: bold; }
.islot .iempty { color: rgba(255, 255, 255, 0.18); font-size: 0.72em; text-align: center; line-height: 1.1; }
.islot.r-common { border-color: rgba(216, 210, 196, 0.35); }
.islot.r-uncommon { border-color: #5fd068; box-shadow: inset 0 0 8px rgba(95, 208, 104, 0.25); }
.islot.r-rare { border-color: #4aa3ff; box-shadow: inset 0 0 8px rgba(74, 163, 255, 0.3); }
.islot.r-epic { border-color: #c06bff; box-shadow: inset 0 0 10px rgba(192, 107, 255, 0.35); }
.islot.r-legendary { border-color: #ff9b2e; box-shadow: inset 0 0 12px rgba(255, 155, 46, 0.45); }
.islot.dragging { opacity: 0.4; }
.islot.dropok, .dropok { outline: 2px dashed var(--gold); }
.islot.sel { outline: 2px solid var(--gold); }
.money { color: var(--gold); white-space: nowrap; }
.money .coin { color: #f0c040; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 10000; max-width: 340px; padding: 8px 10px; pointer-events: none;
  background: rgba(10, 10, 14, 0.96); border: 1px solid var(--line2); border-radius: 5px; box-shadow: var(--shadow); font-size: 0.92em;
}
.itip > div { margin: 1px 0; }
.itip-name { font-weight: bold; font-size: 1.05em; }
.itip-sub, .itip-il { color: var(--muted); font-size: 0.9em; }
.itip-stat .up { color: var(--good); } .itip-stat .down { color: var(--bad); }
.itip-special { color: #ffb050; margin-top: 4px !important; }
.itip-set { margin-top: 5px !important; color: #e8d070; }
.itip-set .off { color: var(--muted); } .itip-set .on { color: var(--good); }
.itip-sock { color: #9ad0ff; }
.itip-desc { color: #d8d0b8; font-style: italic; margin-top: 4px !important; }
.itip-req.bad, .itip-cls.bad, .itip-dur.bad { color: var(--bad); }
.itip-bind { color: var(--muted); }
.itip-price { margin-top: 4px !important; color: var(--muted); }
.tip-title { color: var(--gold); font-weight: bold; margin-bottom: 3px; }

/* Dialoge */
.modal-wrap { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 5000; }
.modal { min-width: 320px; max-width: 520px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.modal-title { font-family: var(--title); color: var(--gold); font-size: 1.15em; margin-bottom: 8px; }
.modal-body { margin-bottom: 12px; line-height: 1.45; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* Meldungen */
#toasts { display: flex; flex-direction: column; align-items: center; top: 120px; bottom: auto; gap: 4px; z-index: 6000; }
#windows { z-index: 2; } #modals { z-index: 5; }
.toast { padding: 6px 14px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); text-shadow: 0 1px 2px #000; transition: opacity 0.5s; font-weight: 600; }
.toast.err, .toast.bad { color: #ff7a6a; } .toast.warn { color: var(--warn); } .toast.good { color: var(--good); }
.toast.fade { opacity: 0; }
.banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; transition: opacity 0.8s; pointer-events: none; z-index: 900; }
.banner-main { font-family: var(--title); font-size: 2.4em; color: #ffe6a0; text-shadow: 0 2px 8px #000, 0 0 30px rgba(255, 180, 60, 0.4); }
.banner-sub { font-size: 1.1em; color: var(--text); text-shadow: 0 1px 4px #000; margin-top: 4px; }
.banner.fade { opacity: 0; }

/* Barrierefreiheit */
:root.reduce-motion *, :root.reduce-motion *::before { transition: none !important; animation: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Bildlaufleisten */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(200, 180, 130, 0.3); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* hud.css */
/* Spieloberflaeche (HUD) und Bildschirme vor dem Spiel */

/* ---------- Spielerrahmen ---------- */
.hud-pf { position: absolute; left: 14px; top: 12px; display: flex; gap: 8px; align-items: center; background: linear-gradient(90deg, rgba(14,16,22,0.88), rgba(14,16,22,0.55)); border: 1px solid var(--line); border-radius: 10px 6px 6px 10px; padding: 6px 10px 6px 6px; width: 290px; cursor: pointer; }
.pf-portrait { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line2); display: flex; align-items: center; justify-content: center; font-family: var(--title); font-size: 1.6em; color: #fff; text-shadow: 0 1px 3px #000; flex: none; }
.pf-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pf-top { justify-content: space-between; }
.pf-name { font-weight: 600; color: var(--gold); }
.pf-lvl { font-size: 0.82em; color: var(--muted); }
.pf-hp { height: 16px; }
.pf-res { height: 10px; }
.pf-res .bar-text { font-size: 0.68em; }
.bar.low { box-shadow: 0 0 8px rgba(255, 60, 40, 0.8); animation: lowpulse 1s infinite; }
@keyframes lowpulse { 50% { box-shadow: 0 0 2px rgba(255, 60, 40, 0.3); } }
.pf-combo { display: flex; gap: 3px; height: 8px; }
.pf-combo:empty { display: none; }
.pip { width: 14px; height: 7px; border-radius: 2px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18); }
.pip.on { background: linear-gradient(#ffe070, #e08020); box-shadow: 0 0 5px #ffa030; }
.hud-buffs { position: absolute; left: 14px; top: 84px; width: 300px; }
.buffs { display: flex; flex-wrap: wrap; gap: 3px; }
.buff { position: relative; width: 28px; height: 28px; border-radius: 4px; background: rgba(0,0,0,0.7); border: 1px solid var(--c, #888); display: flex; align-items: center; justify-content: center; color: var(--c, #ddd); pointer-events: auto; }
.buff.neg { box-shadow: inset 0 0 6px rgba(255, 40, 40, 0.5); }
.buff.small { width: 22px; height: 22px; font-size: 0.8em; }
.buff-g { font-size: 15px; text-shadow: 0 1px 2px #000; }
.buff-n { position: absolute; right: 1px; bottom: -1px; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000; }
.buff-t { position: absolute; left: 0; right: 0; bottom: -13px; font-size: 10px; text-align: center; color: var(--text); text-shadow: 0 1px 2px #000; }

/* ---------- Gruppe ---------- */
.hud-party { position: absolute; left: 14px; top: 132px; width: 190px; display: flex; flex-direction: column; gap: 5px; }
.pm { background: rgba(14,16,22,0.78); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; pointer-events: auto; cursor: pointer; }
.pm.off { opacity: 0.55; }
.pm-top { font-size: 0.86em; gap: 4px; }
.pm-name { font-weight: 600; }
.pm-hp { height: 12px; margin-top: 2px; }
.pm-hp .bar-text { font-size: 0.7em; }
.pm-res { height: 4px; margin-top: 1px; border: none; }

/* ---------- Ziel ---------- */
.hud-tf { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 320px; background: rgba(14,16,22,0.85); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; }
.tf-name { font-weight: 600; font-size: 1.05em; }
.tf-x { background: none; border: none; color: var(--muted); padding: 0 4px; font-size: 1.1em; }
.tf-hp { height: 15px; margin-top: 4px; }
.tf-cast { height: 12px; margin-top: 4px; }
.tf-cast .bar-text { font-size: 0.7em; }
.tf-st { margin-top: 5px; }
.tf-act { flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.tf-act button { font-size: 0.78em; }

/* ---------- Boss ---------- */
.hud-boss { position: absolute; left: 50%; top: 98px; transform: translateX(-50%); width: min(560px, 60vw); text-align: center; }
.boss-name { font-family: var(--title); color: #ffb090; font-size: 1.15em; text-shadow: 0 2px 4px #000; margin-bottom: 3px; }
.boss-bar { height: 18px; border: 1px solid rgba(255,160,120,0.6); }
.boss-stg { height: 4px; background: linear-gradient(90deg, #ffe060, #ff9020); margin-top: 2px; width: 0; transition: width 0.25s; }

/* ---------- Minikarte ---------- */
.hud-mm { position: absolute; right: 14px; top: 10px; width: 180px; text-align: center; }
.mm-zone { font-family: var(--title); color: var(--gold); text-shadow: 0 1px 3px #000; margin-bottom: 3px; }
.mm-cv { width: 180px; height: 180px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
.mm-info { color: var(--text); text-shadow: 0 1px 2px #000; margin-top: 2px; }

/* ---------- Ereignis und Quests ---------- */
.hud-ev { position: absolute; right: 14px; top: 236px; width: 260px; background: rgba(14,16,22,0.82); border: 1px solid rgba(255, 200, 80, 0.45); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; }
.ev-title { font-family: var(--title); color: #ffd070; }
.ev-bar { height: 13px; }
.ev-leave { margin-top: 4px; align-self: flex-start; pointer-events: auto; }
.hud-track { position: absolute; right: 14px; top: 236px; width: 260px; display: flex; flex-direction: column; gap: 6px; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.hud-ev:not(.hidden) ~ .hud-track { top: 380px; }
.trk-head { font-family: var(--title); color: var(--gold); cursor: pointer; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.trk-q { cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.trk-q:hover { background: rgba(0,0,0,0.4); }
.trk-name { color: #ffe6a8; font-weight: 600; font-size: 0.92em; }
.trk-tag { color: var(--muted); font-weight: normal; }
.trk-obj { font-size: 0.85em; padding-left: 8px; color: var(--text); }
.trk-q.done .trk-name { color: var(--good); }

/* ---------- Aktionsleiste ---------- */
.hud-bottom { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hud-bar { display: flex; gap: 14px; align-items: flex-end; background: linear-gradient(rgba(14,16,22,0.5), rgba(14,16,22,0.9)); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.ab-group { display: flex; gap: 5px; align-items: flex-end; }
.ab-slot { position: relative; width: 50px; height: 50px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,0.55); cursor: pointer; overflow: hidden; }
.ab-slot.ab-small { width: 38px; height: 38px; }
.ab-slot.ab-ult { width: 56px; height: 56px; border-color: #e8c060; box-shadow: 0 0 10px rgba(232, 192, 96, 0.35); }
.ab-slot.empty { border-style: dashed; opacity: 0.6; }
.ab-icon { position: absolute; inset: 2px; display: flex; align-items: center; justify-content: center; }
.ab-icon .sk-icon { width: 100% !important; height: 100% !important; }
.ab-glyph { font-size: 22px; text-shadow: 0 1px 2px #000; }
.ab-cd { position: absolute; inset: 0; pointer-events: none; }
.ab-cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.05em; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.ab-key { position: absolute; right: 3px; top: 1px; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.ab-slot.nores .ab-icon { filter: saturate(0.3) brightness(0.6) sepia(0.6) hue-rotate(180deg); }
.ab-slot.locked .ab-icon { filter: grayscale(1) brightness(0.45); }
.ab-slot.ready { animation: abready 0.35s; }
@keyframes abready { 0% { box-shadow: inset 0 0 0 30px rgba(255, 240, 180, 0.6); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.ab-slot:hover { border-color: #ffe090; }
.hud-xp { width: 640px; max-width: 70vw; height: 9px; border-radius: 4px; }
.hud-xp .bar-text { font-size: 0.66em; opacity: 0; transition: opacity 0.2s; }
.hud-xp:hover .bar-text { opacity: 1; }
.hud-cast, .hud-hold { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); width: 300px; height: 18px; border: 1px solid rgba(255, 220, 120, 0.6); }
.hud-hold { bottom: 136px; height: 12px; }

/* ---------- Chat ---------- */
.hud-chat { position: absolute; left: 14px; bottom: 12px; width: 420px; display: flex; flex-direction: column; gap: 3px; opacity: 0.72; transition: opacity 0.3s, background 0.3s; padding: 4px; border-radius: 6px; }
.hud-chat:hover, .hud-chat.active, .hud-chat.recent { opacity: 1; }
.hud-chat:hover, .hud-chat.active { background: rgba(10,12,16,0.6); }
.chat-tabs { display: flex; gap: 2px; }
.chat-tab { padding: 1px 8px; font-size: 0.78em; background: rgba(0,0,0,0.5); border-color: var(--line); }
.chat-tab.active { color: var(--gold); border-color: var(--line2); }
.chat-log { height: 170px; overflow-y: auto; font-size: 0.88em; line-height: 1.32; text-shadow: 0 1px 2px #000, 0 0 3px #000; scrollbar-width: thin; }
.chat-line { word-wrap: break-word; }
.chat-line.k-good { color: var(--good) !important; } .chat-line.k-warn { color: var(--warn) !important; } .chat-line.k-bad { color: var(--bad) !important; }
.chat-time { color: var(--muted); font-size: 0.85em; }
.chat-name { cursor: pointer; font-weight: 600; }
.chat-row { gap: 4px; }
.chat-ch { width: 82px; font-size: 0.82em; padding: 3px; }
.chat-in { flex: 1; font-size: 0.9em; padding: 4px 6px; background: rgba(0,0,0,0.6); }

/* ---------- Beute ---------- */
.hud-feed { position: absolute; right: 210px; bottom: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.feed-line { transition: opacity 0.6s; animation: feedin 0.25s; }
@keyframes feedin { from { transform: translateX(20px); opacity: 0; } }

/* ---------- Menueleiste ---------- */
.hud-br { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.hud-gold { text-shadow: 0 1px 2px #000; background: rgba(14,16,22,0.7); padding: 2px 8px; border-radius: 4px; }
.hud-menu { display: flex; gap: 3px; background: rgba(14,16,22,0.78); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.mb { width: 32px; height: 32px; padding: 0; font-size: 16px; position: relative; }
.mb.active { border-color: #ffe090; background: linear-gradient(#5a5040, #3a3428); }
.mb.notify::after { content: ''; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #ffcc33; box-shadow: 0 0 6px #ffaa00; }

/* ---------- Hinweise ---------- */
.hud-hint { position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%); background: rgba(10,12,16,0.8); border: 1px solid var(--line2); border-radius: 5px; padding: 4px 12px; color: #ffe8b0; }
.hud-perf { position: absolute; right: 200px; top: 10px; font-size: 0.78em; color: var(--muted); text-shadow: 0 1px 2px #000; }
.hud-death { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); text-align: center; background: rgba(10,10,14,0.88); border: 1px solid rgba(200, 80, 60, 0.6); border-radius: 8px; padding: 18px 28px; max-width: 420px; }
.death-title { font-family: var(--title); font-size: 2em; color: #ff8a70; margin-bottom: 4px; }
body.is-dead #gl { filter: grayscale(0.85) brightness(0.8); }
:root.reduce-motion .bar.low, :root.reduce-motion .ab-slot.ready, :root.reduce-motion .feed-line { animation: none; }

/* ---------- Laden ---------- */
.loading { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #1c2028 0%, #08090c 80%); display: flex; align-items: center; justify-content: center; z-index: 9000; pointer-events: auto; }
.loading-box { text-align: center; }
.loading-text { color: var(--muted); margin: 10px 0 16px; }
.spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid rgba(232, 192, 96, 0.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bildschirme ---------- */
.logo { font-family: var(--title); font-size: 3.2em; color: #ffe2a0; letter-spacing: 0.06em; text-shadow: 0 2px 10px #000, 0 0 40px rgba(255, 180, 80, 0.35); }
.logo.small-logo { font-size: 2em; }
.logo-sub { color: var(--muted); margin-bottom: 18px; font-style: italic; }
.scr { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #2a3038 0%, #12151a 55%, #07080a 100%); }
.scr::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,0.015) 0 2px, transparent 2px 9px); pointer-events: none; }
.scr-login { display: flex; align-items: center; justify-content: center; }
.login-box { width: 360px; background: rgba(16,18,24,0.88); border: 1px solid var(--line2); border-radius: 10px; padding: 26px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; text-align: center; position: relative; }
.login-box label { text-align: left; font-size: 0.86em; color: var(--muted); margin-top: 6px; }
.login-box input { width: 100%; }
.login-err { min-height: 1.3em; font-size: 0.88em; margin-top: 4px; }
button.primary { background: linear-gradient(#a07a30, #6a4c18); border-color: #e8c060; color: #fff4d8; font-weight: 600; }
button.big { padding: 10px 34px; font-size: 1.15em; }
button.sm { padding: 1px 8px; }
.scr-select, .scr-create { display: grid; grid-template-columns: 300px 1fr 340px; grid-template-rows: 1fr auto; gap: 14px; padding: 20px; }
.scr-select { grid-template-columns: 300px 1fr; }
.cs-left, .cc-left, .cc-right { background: rgba(16,18,24,0.85); border: 1px solid var(--line); border-radius: 8px; padding: 14px; overflow: auto; position: relative; }
.cs-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cs-char { text-align: left; padding: 8px 12px; background: rgba(40,42,52,0.8); border-color: var(--line); }
.cs-char.sel { border-color: #e8c060; background: linear-gradient(90deg, rgba(120,90,30,0.55), rgba(40,42,52,0.8)); }
.cs-char.empty { border-style: dashed; text-align: center; }
.cs-name { font-size: 1.1em; font-weight: 600; }
.cs-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; }
.cp-canvas { width: 100%; height: 100%; min-height: 300px; cursor: grab; }
.cs-info { position: absolute; top: 10px; left: 0; right: 0; text-align: center; text-shadow: 0 2px 4px #000; pointer-events: none; }
.cs-bottom { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; align-items: center; position: relative; }
.cs-bottom input { width: 260px; font-size: 1.05em; padding: 8px 10px; }
.cc-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cc-cls { text-align: left; padding: 7px 9px; border-left: 4px solid var(--c); background: rgba(40,42,52,0.8); }
.cc-cls.sel { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), rgba(40,42,52,0.8)); border-color: var(--c); }
.cc-cls-name { font-weight: 600; }
.cc-looks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cc-look { font-size: 0.92em; }
.cc-val { min-width: 92px; text-align: center; color: var(--gold); }
.cc-desc p { line-height: 1.45; }
.cc-desc .small { margin-top: 5px; line-height: 1.4; }
@media (max-width: 1000px) {
  .scr-select, .scr-create { grid-template-columns: 1fr; grid-template-rows: auto 320px auto auto; overflow: auto; }
  .hud-chat { width: 300px; }
  .hud-track { display: none; }
}

/* Baumodus */
.ed-panel { position: absolute; top: 96px; left: 16px; width: 340px; padding: 10px 12px; pointer-events: auto;
  background: rgba(24, 20, 14, 0.9); border: 1px solid #c8a050; border-radius: 6px; color: #f0e2c0; font-size: 0.92em; z-index: 30; }
.ed-panel.hidden { display: none; }
.ed-title { font-weight: bold; color: #ffd070; margin-bottom: 6px; letter-spacing: 0.04em; }
.ed-sel { font-weight: bold; }
.ed-sub, .ed-help { color: #b8a888; font-size: 0.86em; margin-top: 4px; }
.ed-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ed-kind { flex: 1; background: #14110c; color: #f0e2c0; border: 1px solid #5a4a30; border-radius: 4px; padding: 2px 4px; }
.ed-export { width: 100%; font-family: monospace; font-size: 0.85em; background: #14110c; color: #f0e2c0; border: 1px solid #5a4a30; }
/* Mitspielen in der Browser-Version (Live-Raum der Artefaktseite) */
.room-lobby { margin: 18px auto 0; max-width: 420px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.room-title { color: var(--text, #eee); font-weight: 600; margin-bottom: 4px; }
.room-btn { width: 100%; }
.room-help { margin-top: 4px; line-height: 1.4; }
.room-notice { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); z-index: 9500; background: rgba(30, 24, 18, 0.95); color: #f3e6cf; border: 1px solid #8a6b3d; border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 18px rgba(0,0,0,.5); }

/* items.css */
/* Gegenstands- und Wirtschaftsfenster: Inventar, Charakter, Bank, Haendler, Post, Marktbrett, Handel, Betrachten. */

/* Kontextmenue */
.ctxmenu {
  position: fixed; z-index: 9000; min-width: 170px; padding: 4px; display: flex; flex-direction: column; gap: 1px;
  background: rgba(14, 14, 20, 0.97); border: 1px solid var(--line2); border-radius: 5px; box-shadow: var(--shadow);
}
.ctx-item { background: transparent; border: none; text-align: left; padding: 5px 10px; border-radius: 3px; }
.ctx-item:hover:not(:disabled), .ctx-item:focus-visible { background: rgba(232, 192, 96, 0.16); filter: none; outline: none; }
.ctx-item.bad { color: var(--bad); }

/* Gemeinsames */
input.num { width: 110px; text-align: right; }
td.num { text-align: right; white-space: nowrap; }
.islot.unusable { background: radial-gradient(rgba(255, 60, 50, 0.22), rgba(60, 0, 0, 0.45)); }
.islot.intrade { opacity: 0.35; }
.islot .iup { position: absolute; left: 2px; bottom: 0; font-size: 10px; color: var(--good); text-shadow: 0 0 2px #000; }
.islot.lowdur { box-shadow: inset 0 0 10px rgba(255, 80, 60, 0.55); }
.islot.canfit { outline: 2px solid rgba(106, 208, 122, 0.8); }
.islot[draggable='true'] { cursor: grab; }
.durwarn { margin: 6px 0; padding: 5px 8px; border-radius: 4px; background: rgba(255, 106, 90, 0.12); border: 1px solid rgba(255, 106, 90, 0.4); color: #ffb0a0; font-size: 0.9em; }

/* Inventar */
.inv-grid, .bank-grid { display: grid; grid-template-columns: repeat(8, 44px); gap: 4px; justify-content: center; }
.bank-grid { grid-template-columns: repeat(10, 44px); }
.inv-qhead { margin-top: 8px; }
.inv-qbag { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow: auto; }
.inv-qrow { display: flex; gap: 8px; align-items: center; }
.inv-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.inv-gold { font-size: 1.05em; }
.inv-help { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line2); color: var(--muted); font-size: 0.8em; cursor: help; }

/* Charakter und Betrachten */
.doll { display: flex; gap: 10px; align-items: stretch; }
.doll-col { display: flex; flex-direction: column; gap: 6px; }
.doll-center { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(232, 192, 96, 0.08), rgba(0, 0, 0, 0.25)); border: 1px solid var(--line); }
.char-info { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px; width: 100%; }
.char-name { font-family: var(--title); font-size: 1.35em; color: var(--gold); }
.char-title { color: #d8c8a0; font-style: italic; }
.char-xp { width: 100%; max-width: 240px; margin-top: 6px; }
.char-gold { margin-top: 4px; }
.stat-wrap { display: flex; gap: 14px; align-items: flex-start; }
.stat-tbl { flex: 1.3; }
.stat-tbl tr.grp th { color: var(--accent); font-family: var(--title); font-size: 0.95em; padding-top: 6px; }
.stat-tbl tr:not(.grp):hover td { background: rgba(255, 255, 255, 0.04); }
.stat-extra { flex: 1; }
.stat-extra .set-on { color: var(--good); }
.stat-extra .special { color: #ffb050; }
.rep-row { display: flex; flex-direction: column; gap: 3px; }
.bar.rep { height: 16px; }
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.looks .list { max-height: 220px; overflow: auto; }
.looks .item { cursor: pointer; }

/* Haendler */
.vendor-list { max-height: 360px; overflow: auto; }
.vendor-row.locked { opacity: 0.6; }
.vendor-name { gap: 1px; min-width: 0; }
.vendor-sell { margin-top: 8px; }
.vendor-drop { padding: 10px; border: 1px dashed var(--line2); border-radius: 5px; color: var(--muted); text-align: center; font-size: 0.9em; }
.vendor-sell.dropok .vendor-drop { border-color: var(--gold); color: var(--text); }
.vendor-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Post */
.mail-split { display: grid; grid-template-columns: 200px 1fr; gap: 10px; min-height: 260px; }
.mail-list { max-height: 340px; overflow: auto; }
.mail-row { cursor: pointer; }
.mail-row.unread .mail-subj { font-weight: bold; color: var(--text); }
.mail-subj { color: #d0c8b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.mail-icon { width: 18px; text-align: center; }
.mail-view { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mail-body { white-space: pre-wrap; word-break: break-word; line-height: 1.45; padding: 8px; background: rgba(0, 0, 0, 0.25); border-radius: 4px; min-height: 80px; }
.mail-att { display: flex; flex-direction: column; gap: 6px; }
.mail-btns { margin-top: 6px; }
.mail-attach { display: flex; gap: 4px; flex-wrap: wrap; }
.win textarea { width: 100%; resize: vertical; }

/* Marktbrett */
.market-search { margin-bottom: 8px; }
.market-scroll { max-height: 380px; overflow: auto; margin-bottom: 6px; }
.market-tbl tr.mine td { background: rgba(232, 192, 96, 0.06); }
.market-tbl td { vertical-align: middle; }
.market-sell { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.market-sell > .col.center { align-items: center; min-width: 110px; }
.market-calc { padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border-radius: 4px; }

/* Handel */
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-side { padding: 8px; border-radius: 5px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); }
.trade-side.locked { border-color: var(--warn); }
.trade-side.confirmed { border-color: var(--good); box-shadow: inset 0 0 12px rgba(106, 208, 122, 0.2); }
.trade-grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; justify-content: center; margin: 6px 0; }
.trade-gold { margin-top: 4px; }
.trade-gold input.num { width: 100px; }
.trade-hint { margin: 8px 0; }
.trade-btns { margin-top: 4px; }
.treq {
  position: absolute; left: 50%; top: 90px; transform: translateX(-50%); z-index: 4000; min-width: 280px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center;
}
.treq-title { font-family: var(--title); color: var(--gold); font-size: 1.1em; margin-bottom: 6px; }
.treq-btns { justify-content: center; margin-top: 10px; }

/* quests.css */
/* Quests und Welt: NSC-Gespraech, Questlog, Karte, Journal, Sammlungen, Auftragsbrett */

/* Questmarkierungen und Stufenfarben */
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 18px; font-family: var(--title); font-weight: bold; font-size: 1.15em; color: var(--gold); text-shadow: 0 1px 2px #000; flex: none; }
.qmark.active { color: #b0b0b0; }
.qlv-red { color: #ff6a5a; } .qlv-orange { color: #ff9a4a; } .qlv-yellow { color: #f0d860; } .qlv-green { color: #6ad07a; } .qlv-gray { color: #9a9a9a; }

/* Ziele und Belohnungen */
.qobj { list-style: none; margin: 0 0 8px; padding: 0; }
.qobj li { padding: 2px 0; }
.qobj li.done { color: var(--good); }
.qobj li.locked { color: var(--muted); }
.qobj-mark { display: inline-block; width: 14px; text-align: center; }
.qrew { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.qrew.compact { gap: 3px; margin: 4px 0 0; font-size: 0.92em; }
.qrew-xp { color: #c8a8ff; }
.qrew-items { gap: 4px; }

/* NSC-Gespraech */
.npc-head { margin-bottom: 6px; }
.npc-name { font-family: var(--title); font-size: 1.25em; color: var(--gold); }
.npc-title { font-size: 0.9em; }
.npc-lines { margin: 6px 0 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); border-left: 2px solid var(--line2); border-radius: 0 4px 4px 0; }
.npc-line { margin: 0 0 6px; line-height: 1.45; font-style: italic; color: #e6dcc4; }
.npc-line:last-child { margin-bottom: 0; }
.npc-line.note { font-style: normal; color: var(--gold); }
.npc-quests { margin-bottom: 10px; }
.list > .item.npc-quest { width: 100%; text-align: left; border: 1px solid transparent; color: var(--text); background: rgba(255, 255, 255, 0.04); padding: 6px 8px; }
.list > .item.npc-quest:hover { border-color: var(--line); }
.npc-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.npc-role { text-align: left; display: flex; gap: 6px; align-items: center; }
.npc-role-icon { width: 18px; text-align: center; flex: none; }
.npc-qhead { align-items: baseline; }
.npc-qhead h3 { margin: 0; }
.npc-qtext { line-height: 1.5; margin: 6px 0 10px; }
.npc-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.npc-choice { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.npc-choice:hover { background: rgba(255, 255, 255, 0.07); }
.npc-choice.sel { border-color: var(--gold); background: rgba(232, 192, 96, 0.14); }
.npc-choice-label { font-weight: 600; margin-bottom: 3px; }
.npc-qbtns { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }

/* Questlog */
.qlog-head { margin-bottom: 8px; align-items: flex-end; }
.qlog-head .tabs { margin-bottom: 0; }
.qlog-cols { display: flex; gap: 10px; height: min(520px, 64vh); }
.qlog-list { width: 250px; flex: none; overflow-y: auto; padding-right: 4px; border-right: 1px solid var(--line); }
.qlog-group { font-family: var(--title); color: var(--accent); margin: 8px 0 3px; font-size: 0.95em; }
.qlog-group:first-child { margin-top: 0; }
.qlog-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.qlog-item:hover { background: rgba(255, 255, 255, 0.06); }
.qlog-item.sel { background: rgba(232, 192, 96, 0.16); outline: 1px solid var(--line2); }
.qlog-item input { flex: none; margin: 0; }
.qlog-detail { flex: 1; overflow-y: auto; padding-right: 4px; }
.qlog-detail h3 { margin-bottom: 2px; }
.qready { color: var(--gold); margin-top: 4px; font-weight: 600; }
.qtext { line-height: 1.5; margin: 8px 0; }
.qhint { font-size: 0.92em; font-style: italic; }
.qlog-btns { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.qlog-btns .check { margin: 0; }
.qlog-done { max-height: min(520px, 64vh); overflow-y: auto; }

/* Karte */
.map-top { margin-bottom: 8px; }
.map-top .check { margin: 0; }
.map-wrap { display: flex; justify-content: center; background: #0a0b0e; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.map-canvas { display: block; max-width: 100%; height: auto; image-rendering: auto; }
.map-info { margin: 6px 0 4px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; }
.lg { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; }
.lg.me { background: #ffe070; border-radius: 50%; }
.lg.party { background: #5aa0ff; border-radius: 50%; }
.lg.wp { background: #60e0ff; transform: rotate(45deg); width: 8px; height: 8px; }
.lg.portal { background: #a070ff; border-radius: 50%; }
.lg.dungeon { background: #b03a30; }
.lg.quest { background: rgba(255, 200, 60, 0.25); border: 1px dashed #ffc83c; border-radius: 50%; }
.map-wps summary { cursor: pointer; color: var(--gold); font-family: var(--title); margin: 4px 0; }
.map-wps .list { max-height: 160px; overflow-y: auto; margin-top: 4px; }
.map-wpico { color: #606a70; }
.map-wpico.on { color: #60e0ff; }

/* Journal, Sammlungen, Auftragsbrett */
.jr-card { padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 5px; }
.jr-card.done { border-color: rgba(106, 208, 122, 0.45); }
.jr-card h4 { margin: 0; }
.jr-stats td:first-child { color: var(--muted); }
.col-items { gap: 4px; }
.list + .jr-card { margin-top: 8px; }
.islot.missing { opacity: 0.35; filter: grayscale(1); }

/* settings.css */
/* Einstellungen, Hilfe, Spielmenue und Oberflaechenskalierung */

/* Skalierung: HUD fuellt weiterhin den Bildschirm, Fenster werden einzeln skaliert (Ziehen bleibt exakt). */
:root.ui-scaled #hud {
  right: auto; bottom: auto;
  width: calc(100% / var(--ui-scale)); height: calc(100% / var(--ui-scale));
  transform: scale(var(--ui-scale)); transform-origin: 0 0;
}
:root.ui-scaled #windows > .win {
  transform: scale(var(--ui-scale)); transform-origin: 0 0;
  max-width: calc(96vw / var(--ui-scale)); max-height: calc(86vh / var(--ui-scale));
}
:root.ui-scaled #modals .modal { transform: scale(var(--ui-scale)); }

/* Einstellungsfenster */
.settings-win .win-body { min-height: 300px; max-height: calc(80vh / var(--ui-scale)); }
.settings-win .tab-body { padding: 2px 2px 4px; }
.set-group { margin: 12px 0 4px; }
.set-group:first-child { margin-top: 2px; }
.set-slider input[type='range'] { width: 100%; }
.set-slider .set-val { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 4em; text-align: right; }
.set-check { margin: 2px 0 6px; }
.set-check small, label.field small { display: block; margin-left: 24px; line-height: 1.3; }
label.field small { margin-left: 0; }
.set-foot { justify-content: flex-end; margin-top: 12px; }
table.set-keys td { padding: 3px 6px; }
.set-keycell, .help-key { width: 1%; white-space: nowrap; text-align: right; }
.keycap {
  display: inline-block; min-width: 2.6em; text-align: center; font-family: inherit; font-weight: 600; font-size: 0.9em;
  padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line2); background: linear-gradient(#3a3a46, #24242c);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
button.keycap { min-width: 6.5em; }
button.keycap.unbound { color: var(--muted); border-style: dashed; }
button.keycap.capturing { color: #fff6e0; border-color: var(--gold); background: linear-gradient(#a07a2a, #6e5018); animation: set-pulse 1s ease-in-out infinite; }
.keycap.fixed { color: var(--muted); font-weight: normal; }
@keyframes set-pulse { 50% { filter: brightness(1.35); } }

/* Hilfe */
.help-win .win-body { max-height: calc(80vh / var(--ui-scale)); line-height: 1.45; }
.help-keys td { vertical-align: top; }
.help-keys .help-key { text-align: left; padding-right: 12px; }
.help-bind-grid, .help-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; }
.help-bind-title { color: var(--accent); font-size: 0.9em; margin: 4px 0 2px; }
.help-sec { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 6px; background: rgba(255, 255, 255, 0.02); }
.help-sec > summary { cursor: pointer; padding: 6px 10px; font-family: var(--title); color: var(--gold); user-select: none; }
.help-sec[open] > summary { border-bottom: 1px solid var(--line); }
.help-sec-body { padding: 6px 12px 8px; }
.help-sec-body p { margin: 4px 0 8px; }
.help-sec-body ul { margin: 4px 0; padding-left: 18px; }
.help-sec-body li { margin: 3px 0; }
.help-class { border-left: 3px solid var(--line2); padding: 4px 0 4px 10px; margin: 8px 0; }
.help-class-head { font-family: var(--title); font-size: 1.05em; margin-bottom: 2px; }
.help-class > div { margin: 1px 0; }
.help-status td { padding: 2px 4px; vertical-align: top; font-size: 0.92em; }
.help-glyph { width: 1.6em; text-align: center; }
.help-cmds code { color: var(--gold); white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }

/* Spielmenue */
.menu-win .win-body { padding: 14px 16px; }
.menu-list { gap: 8px; }
.menu-btn { width: 100%; padding: 8px 12px; font-size: 1.02em; }
.menu-list .sep { margin: 2px 0; }

/* Hoher Kontrast fuer eigene Elemente */
:root.contrast .keycap { background: #000; border-color: #fff; color: #fff; box-shadow: none; }
:root.contrast .help-sec { background: #000; border-color: #fff; }
.help-key .keycap + .keycap { margin-left: 3px; }
.help-key .keycap { min-width: 1.9em; }

/* skills.css */
/* Faehigkeiten, Lehrer, Werkstatt */
.sk-icon {
  --sk: #c8c0a8;
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; user-select: none; line-height: 1;
  color: var(--sk); border: 1px solid color-mix(in srgb, var(--sk) 60%, #000);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sk) 32%, #15161c), #0d0e12 80%);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--sk) 25%, transparent);
}
.sk-icon .sk-glyph { filter: drop-shadow(0 1px 1px #000); font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', var(--font); }
.sk-icon.k-passive { border-radius: 50%; }
.sk-icon.k-passive .sk-glyph { font-family: var(--title); font-weight: bold; font-size: 0.85em; }
.sk-icon.k-ultimate { border-color: var(--gold); box-shadow: inset 0 0 12px color-mix(in srgb, var(--sk) 45%, transparent), 0 0 6px rgba(232, 192, 96, 0.35); }
.sk-icon .sk-star { position: absolute; right: 1px; top: 0; font-size: 10px; color: var(--gold); text-shadow: 0 0 2px #000; }
.sk-icon.unlearned { filter: grayscale(0.85) brightness(0.6); }
.sk-icon.drag { cursor: grab; }

.sk-tip { max-width: 320px; }
.sk-tip > div { margin: 2px 0; }
.sk-tip-name { font-weight: bold; font-size: 1.05em; }
.sk-tip-sub, .sk-tip-meta { color: var(--muted); font-size: 0.9em; }
.sk-tip-tags { color: var(--warn); font-size: 0.86em; }
.sk-tip-desc { color: var(--text); line-height: 1.35; }
.sk-tip-vals { color: #b8d0e8; font-size: 0.88em; margin-top: 4px !important; }
.sk-tip-spec { color: var(--info); font-size: 0.88em; }
.sk-tip-next { color: var(--good); font-size: 0.88em; }

.sk-head { margin-bottom: 6px; }
.sk-barbox { padding: 8px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, 0.25); }
.sk-barrow { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.sk-bsep { width: 1px; height: 36px; background: var(--line); margin: 0 4px; }
.sk-bslot {
  position: relative; width: 46px; height: 46px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.sk-bslot.fixed { opacity: 0.85; }
.sk-bslot.ult { border-color: rgba(232, 192, 96, 0.5); }
.sk-bslot[draggable='true'] { cursor: grab; }
.sk-bslot.dragging { opacity: 0.4; }
.sk-bempty { font-size: 0.66em; color: rgba(255, 255, 255, 0.25); text-align: center; }
.sk-bkey { position: absolute; left: 2px; top: 0; font-size: 10px; font-weight: bold; color: var(--text); text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }

.sk-group { margin-top: 8px; }
.sk-row { align-items: flex-start !important; }
.sk-row.locked { opacity: 0.62; }
.sk-info { gap: 2px !important; min-width: 0; }
.sk-name { font-weight: 600; }
.sk-meta { color: var(--muted); }
.sk-desc { color: #d8d0b8; line-height: 1.35; }
.sk-onbar { padding: 0 5px; border: 1px solid var(--line2); border-radius: 3px; color: var(--gold); }
.sk-rank { align-items: flex-end; gap: 4px !important; min-width: 70px; }
.sk-pips { display: flex; gap: 3px; }
.sk-pip { width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(0, 0, 0, 0.6); }
.sk-pip.on { background: var(--gold); }
.sk-up { min-width: 56px; }

.sk-prof { padding: 6px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 4px; }
.sk-nodes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sk-note { padding: 6px 8px; margin-bottom: 8px; border-left: 3px solid var(--line2); background: rgba(255, 255, 255, 0.03); }
.sk-spec { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 4px; }
.sk-spec.on { border-color: var(--gold); background: rgba(232, 192, 96, 0.08); }
.sk-spec .money { margin-left: 2px; }

.ct-scroll { max-height: 52vh; overflow: auto; margin: 6px 0; }
.ct-name { cursor: help; }
.ct-known td { opacity: 0.7; }

.cr-make { display: flex; gap: 12px; min-height: 320px; }
.cr-left { width: 270px; flex: none; }
.cr-list { max-height: 52vh; overflow: auto; }
.cr-left.cr-list { max-height: 56vh; }
.cr-right { flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.cr-rec.low { opacity: 0.7; }
.cr-count { font-size: 0.86em; }
.cr-mats { gap: 3px !important; }

@media (max-width: 700px) {
  .cr-make { flex-direction: column; }
  .cr-left { width: auto; }
  .cr-right { padding-left: 0; border-left: none; }
}

/* social.css */
/* Soziales, Gruppen, Gilden, PvP: Fenster und Karten (Praefix soc-). */
.soc-list { max-height: 46vh; overflow: auto; }
.soc-row { min-height: 40px; }
.soc-row.off { opacity: 0.62; }
.soc-row.me { background: rgba(232, 192, 96, 0.08); }
.soc-name { font-weight: 600; }
.soc-sub { margin-bottom: 2px; }
.soc-empty { padding: 10px 4px; line-height: 1.45; }
.soc-actions input, .soc-tab-in { flex: 1; min-width: 0; }
.soc-actions .row > input { flex: 1; }
.soc-ctl { margin-top: 8px; }
.soc-crown { color: var(--gold); }
.soc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: #555; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.soc-dot.on { background: var(--good); box-shadow: 0 0 5px rgba(106, 208, 122, 0.7); }
.soc-mbars { width: 90px; display: flex; flex-direction: column; gap: 2px; flex: none; }
.soc-mbars .bar { height: 10px; }
.soc-mbars .bar.res { height: 5px; }
#win-party .row > input, #win-guild .row > input, #win-guildreg input { flex: 1; min-width: 0; }
#win-party select { max-width: 100%; }
.soc-listings { max-height: 34vh; overflow: auto; }
.soc-listings td { vertical-align: middle; }
tr.soc-own td { background: rgba(232, 192, 96, 0.08); }
tr.soc-offrow td { color: var(--muted); }

/* Gilde */
.soc-roster { max-height: 44vh; overflow: auto; }
.soc-roster td .soc-dot { vertical-align: middle; }
.soc-acts { white-space: nowrap; text-align: right; }
.soc-acts .btn { padding: 1px 6px; margin-left: 2px; }
.soc-motd { padding: 6px 8px; background: rgba(0, 0, 0, 0.3); border-left: 2px solid var(--accent); border-radius: 3px; font-style: italic; white-space: pre-wrap; word-break: break-word; }
.soc-contrib { max-height: 150px; overflow: auto; padding: 4px 6px; background: rgba(255, 255, 255, 0.03); border-radius: 4px; }
.soc-bank { display: grid; grid-template-columns: repeat(8, 34px); gap: 4px; padding: 6px; background: rgba(0, 0, 0, 0.25); border-radius: 5px; justify-content: center; }

/* Arena */
.soc-arena-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.soc-stat { padding: 6px 4px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.soc-stat-v { font-size: 1.35em; font-family: var(--title); }

/* Karten (Einladungen, Duell, Arena) */
.soc-pops { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 800; pointer-events: none; }
.soc-card {
  pointer-events: auto; width: 340px; max-width: 92vw; padding: 9px 12px 8px; background: var(--bg); border: 1px solid var(--line2);
  border-radius: var(--radius); box-shadow: var(--shadow); animation: soc-in 0.18s ease-out;
}
.soc-card-title { font-family: var(--title); color: var(--gold); margin-bottom: 4px; }
.soc-card-text { line-height: 1.4; }
.soc-card-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 7px; }
.soc-card-time { height: 3px; margin-top: 7px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; overflow: hidden; }
.soc-card-fill { height: 100%; width: 100%; background: var(--accent); animation: soc-shrink linear forwards; }
.soc-card.soc-duel { border-color: #ff8a70; }
@keyframes soc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes soc-shrink { from { width: 100%; } to { width: 0; } }

.soc-arena-hud { pointer-events: auto; min-width: 320px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); }
.soc-arena-time { text-align: center; font-size: 1.15em; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.soc-arena-res { text-align: center; font-family: var(--title); font-size: 1.6em; margin: 2px 0 6px; }
.soc-arena-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.soc-arena-team { display: flex; flex-direction: column; gap: 3px; }
.soc-arena-team.mine { outline: 1px solid var(--line); border-radius: 3px; padding: 2px; }
.soc-arena-m .bar { height: 8px; }
.soc-arena-m.out { opacity: 0.4; text-decoration: line-through; }
.soc-t1 { color: #ffb070; } .soc-t2 { color: #b08aff; }
:root.reduce-motion .soc-card-fill { animation: none; width: 100%; }