/* Spiel-Client /play im Stil des Aethoria-Logos (Flyff-artig): helle Fenster, blaue Titelleisten,
   weisse Innenkante mit dunkelblauem Rand, runde Schrift, goldene Hauptknoepfe. Wird nach app.css geladen. */
body.client {
  --navy: #0e2a5a; --navy-2: #2a4a7f; --blue: #1e8ff0; --blue-d: #0f62c2; --sky: #bfe4ff; --sky-2: #e9f5ff;
  --gold: #ffc928; --gold-d: #e39a0c; --gold-2: #b87400;
  --text: #17325f; --muted: #5a6e94; --dim: #8a9bbb; --line: #b9d3ef; --line-hi: #7fb2e6;
  --panel: rgba(255, 255, 255, .96); --panel-2: #fff; --ok: #2fb35f; --danger: #e5484d;
  --head: "Baloo 2", ui-rounded, system-ui, sans-serif; --body: "Nunito", ui-rounded, system-ui, sans-serif; --pixel: var(--head);
  --r: 14px;
  --win-edge: 0 0 0 3px #fff, 0 0 0 5px var(--navy), 0 16px 40px rgba(14, 42, 90, .28);
  font: 700 16px/1.45 var(--body); color: var(--text);
}
body.client #ui { background: radial-gradient(ellipse at center, rgba(233, 245, 255, .05) 0%, rgba(14, 42, 90, .28) 100%); }
body.client .client-bg { filter: none; }

/* ---------- Grundbausteine ---------- */
body.client .panel { background: var(--panel); border: 0; border-radius: 18px; box-shadow: var(--win-edge); backdrop-filter: none; color: var(--text); }
body.client .panel::before { display: none; }
body.client .title, body.client .section-title { font: 800 26px/1.15 var(--head); color: var(--blue-d); text-shadow: none; letter-spacing: 0; }
body.client .subtitle, body.client .muted { color: var(--muted); }
body.client .btn { --c: #e8f3ff; --c2: #fff; --tx: var(--navy); font: 800 16px/1 var(--head); text-transform: none; letter-spacing: 0; border-radius: 99px; padding: 10px 20px;
  box-shadow: 0 0 0 2px var(--navy), 0 4px 0 2px rgba(14, 42, 90, .2); }
body.client .btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
body.client .btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--navy), 0 1px 0 2px rgba(14, 42, 90, .2); }
body.client .btn.primary { --c: var(--gold-d); --c2: #ffe46b; --tx: var(--navy); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy), 0 6px 0 4px rgba(14, 42, 90, .2); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
body.client .btn.primary:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy), 0 6px 0 4px rgba(14, 42, 90, .2), 0 0 24px rgba(255, 201, 40, .5); }
body.client .btn.ghost { --c: transparent; --c2: transparent; color: var(--navy-2); box-shadow: inset 0 0 0 2px var(--line-hi); }
body.client .btn.ghost:hover { background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--blue); }
body.client .btn.danger { --c: #c9353a; --c2: #ff6b6f; --tx: #fff; }
body.client .btn.big { font-size: 20px; padding: 14px 28px; }
body.client .field label { color: var(--navy-2); font: 800 15px var(--head); }
body.client .input { background: #f3f9ff; border: 2px solid var(--line); border-radius: 12px; color: var(--navy); font: 700 17px var(--body); }
body.client .input::placeholder { color: var(--dim); }
body.client .input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 143, 240, .18); }
body.client .pw-toggle { color: var(--blue-d); font-weight: 800; }
body.client .err { color: var(--danger); font-weight: 700; }
body.client .overlay { background: rgba(14, 42, 90, .35); backdrop-filter: blur(4px); }
body.client .toast { background: #fff; color: var(--navy); border: 0; border-radius: 99px; box-shadow: 0 0 0 2px var(--navy), 0 10px 24px rgba(14, 42, 90, .25); font-weight: 800; }
body.client .toast.good { box-shadow: 0 0 0 2px var(--ok), 0 10px 24px rgba(14, 42, 90, .25); }
body.client .toast.bad { box-shadow: 0 0 0 2px var(--danger), 0 10px 24px rgba(14, 42, 90, .25); }
body.client ::selection { background: var(--blue); color: #fff; }

/* ---------- Ladebildschirm ---------- */
body.client .client-load { background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 55%, #f6f0ff 100%); }
body.client .client-load .load-logo { width: min(620px, 86vw); filter: drop-shadow(0 12px 26px rgba(14, 42, 90, .3)); animation: aeFloat 4s ease-in-out infinite; }
@keyframes aeFloat { 50% { transform: translateY(-8px); } }
body.client .load-bar { height: 22px; padding: 3px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 0 3px var(--navy), 0 8px 20px rgba(14, 42, 90, .2); }
body.client .load-bar i { border-radius: 99px; background: linear-gradient(#7cc6ff, var(--blue) 60%, var(--blue-d)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45); }
body.client .load-txt { font: 800 18px var(--head); color: var(--navy); }

/* ---------- Login ---------- */
body.client .auth-card { background: var(--panel); border: 0; border-radius: 22px; padding: 0 26px 24px; box-shadow: var(--win-edge); overflow: hidden; }
body.client .auth-card .tabs { margin: 0 -26px 22px; padding: 0; gap: 0; border-radius: 0; background: linear-gradient(#3aa4ff, var(--blue-d)); border-bottom: 3px solid var(--navy); }
body.client .auth-card .tab { padding: 14px 10px 12px; border-radius: 0; font: 800 19px var(--head); color: rgba(255, 255, 255, .7); }
body.client .auth-card .tab[aria-selected="true"] { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 -4px 0 var(--gold); text-shadow: 0 2px 0 var(--navy); }
body.client .auth-foot { color: var(--muted); }
body.client .client-logo img { filter: drop-shadow(0 10px 22px rgba(14, 42, 90, .35)); }

/* ---------- Fenster (Serverwahl, Charakterwahl) ---------- */
body.client .cwin { background: var(--panel); border: 0; border-radius: 22px; box-shadow: var(--win-edge); overflow: hidden; }
body.client .cwin-head { padding: 12px 20px; font: 800 22px var(--head); color: #fff; background: linear-gradient(#3aa4ff, var(--blue-d)); border-bottom: 3px solid var(--navy); text-shadow: 0 2px 0 var(--navy); }
body.client .cwin-body { padding: 18px 20px; }
body.client .cwin-foot { border-top: 2px solid var(--line); background: #f3f9ff; padding: 14px 20px; }
body.client .srv { background: #f3f9ff; border: 2px solid var(--line); border-radius: 14px; padding: 16px 18px; }
body.client .srv:hover { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(30, 143, 240, .15); }
body.client .srv-name { font: 800 22px var(--head); color: var(--navy); }
body.client .srv-ch, body.client .srv-load { color: var(--muted); font-weight: 700; }
body.client .cslot { background: linear-gradient(#f3f9ff, #e3f0ff); border: 2px solid var(--line); border-radius: 16px; }
body.client .cslot:hover { border-color: var(--blue); }
body.client .cslot.on { border-color: var(--gold-d); background: linear-gradient(#fffaf0, #ffefc2); box-shadow: 0 0 0 3px var(--gold), 0 8px 18px rgba(227, 154, 12, .25); }
body.client .cslot-name { font: 800 19px var(--head); color: var(--navy); }
body.client .cslot.on .cslot-name { color: var(--gold-2); }
body.client .cslot-lv { color: var(--muted); font-weight: 700; }
body.client .cslot.cslot-free { background: rgba(255, 255, 255, .6); border-style: dashed; color: var(--muted); }
body.client .cslot.cslot-free .plus { font: 800 34px var(--head); color: var(--blue); }

/* ---------- Welt-HUD: Charakterkarte, Ort, Tastenleiste ---------- */
body.client .wcard { background: rgba(255, 255, 255, .94); border: 0; border-radius: 18px; box-shadow: var(--win-edge); }
body.client .wc-port { background: radial-gradient(circle at 50% 70%, #fff, var(--sky)); border: 3px solid var(--blue); box-shadow: 0 0 0 2px var(--navy); }
body.client .wc-lv { font: 800 12px var(--head); color: #fff; background: linear-gradient(#ffd34d, var(--gold-d)); border: 2px solid var(--navy); text-shadow: 0 1px 0 var(--navy); }
body.client .wc-name { font: 800 17px var(--head); color: var(--navy); text-shadow: none; }
body.client .wc-name .clan { color: #2f9a4c; } body.client .wc-name .adm { color: var(--danger); }
body.client .wc-sub { color: var(--muted); font-weight: 700; }
body.client .wc-bar { background: #dbe8f7; border: 2px solid var(--navy); box-shadow: none; height: 14px; }
body.client .wc-bar.hp i { background: linear-gradient(#ff8f86, #e5484d 60%, #b8262b); }
body.client .wc-bar.xp { height: 10px; } body.client .wc-bar.xp i { background: linear-gradient(#9fd6ff, var(--blue)); }
body.client .wc-bar b { font: 800 10px/10px var(--head); color: #fff; text-shadow: 0 1px 0 var(--navy), 1px 0 0 var(--navy), -1px 0 0 var(--navy); }
body.client .wc-bar.xp b { font-size: 8px; line-height: 6px; }
body.client .wc-gold { font: 800 15px var(--head); color: var(--gold-2); }
body.client .whud-place { background: rgba(255, 255, 255, .94); border: 0; border-radius: 16px; box-shadow: var(--win-edge); }
body.client .whud-map { font: 800 18px var(--head); color: var(--blue-d); text-shadow: none; }
body.client .whud-online { color: var(--muted); font-weight: 700; }
body.client .whud-keys { background: rgba(255, 255, 255, .9); border: 0; border-radius: 99px; box-shadow: 0 0 0 2px var(--navy), 0 8px 20px rgba(14, 42, 90, .2); color: var(--navy-2); font-weight: 700; }
body.client .whud-keys kbd { font: 800 11px var(--head); padding: 1px 6px; border-radius: 6px; background: var(--blue); color: #fff; border: 0; box-shadow: 0 2px 0 var(--navy); }

/* ---------- Chat ---------- */
body.client #worldui .whud-chat { border-radius: 16px; background: rgba(255, 255, 255, .28); }
body.client #worldui .whud-chat .wchat-msg { background: rgba(255, 255, 255, .82); color: var(--navy); text-shadow: none; border-radius: 99px; padding: 2px 10px; font-weight: 700; }
body.client #worldui .wchat-msg b { color: var(--blue-d); } body.client #worldui .wchat-msg.me b { color: var(--gold-2); }
body.client #worldui .wchat-msg.ch-clan b, body.client #worldui .wchat-msg.ch-clan span { color: #2f9a4c; }
body.client #worldui .whud-chat .wchat-row input { background: rgba(255, 255, 255, .85); border: 2px solid var(--line); border-radius: 99px; color: var(--navy); }
body.client #worldui .whud-chat .wchat-row input::placeholder { color: var(--muted); }
body.client #worldui .whud-chat:focus-within { background: rgba(255, 255, 255, .95); box-shadow: var(--win-edge); border-color: transparent; }
body.client #worldui .whud-chat:focus-within .wchat-msg { background: none; padding: 0; }
body.client #worldui .whud-chat:focus-within .wchat-row input { background: #f3f9ff; border-color: var(--blue); }
body.client .wchat-head { border-bottom: 2px solid var(--line); }
body.client .wch { font: 800 14px var(--head); color: var(--muted); border-radius: 99px; }
body.client .wch.on { color: #fff; background: var(--blue); border-color: var(--navy); }
body.client .wchat-ch { color: var(--muted); font: 700 12px var(--body); }

/* ---------- Fenster in der Welt: Clan, Spieler, Einladung, Meldungen ---------- */
body.client .wwin { background: var(--panel); border: 0; border-radius: 20px; box-shadow: var(--win-edge); overflow: hidden; color: var(--text); }
body.client .wwin .winv-head { padding: 10px 16px; font: 800 20px var(--head); color: #fff; background: linear-gradient(#3aa4ff, var(--blue-d)); border-bottom: 3px solid var(--navy); text-shadow: 0 2px 0 var(--navy); }
body.client .winv-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0; font: 800 18px/1 var(--head); color: #fff; background: #ff6b6f; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
body.client .wtxt { color: var(--muted); font-weight: 700; }
body.client .wlab { color: var(--navy-2); font-weight: 800; }
body.client .wlab input { background: #f3f9ff; border: 2px solid var(--line); border-radius: 10px; color: var(--navy); font: 700 15px var(--body); }
body.client .wlab input:focus { outline: none; border-color: var(--blue); }
body.client .wclan-top { font: 800 18px var(--head); color: var(--navy); }
body.client .tag { color: #2f9a4c; }
body.client .wcm { background: #f3f9ff; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-weight: 700; }
body.client .wcm.on { color: var(--navy); }
body.client .wcm .rk { background: #e3f0ff; } body.client .wcm .rk.leader { color: var(--gold-2); } body.client .wcm .rk.officer { color: var(--blue-d); }
body.client .mini { font: 800 13px var(--head); border-radius: 99px; border: 2px solid var(--line-hi); background: #fff; color: var(--navy-2); }
body.client .mini.bad { color: var(--danger); border-color: #f3b2b4; }
body.client .wi-stats div, body.client .wi-eq div { background: #f3f9ff; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
body.client .wi-stats b { font: 800 18px var(--head); color: var(--blue-d); } body.client .wi-stats span { color: var(--muted); }
body.client .wi-eq b { color: var(--navy); }
body.client .winvite { background: #fff; border: 0; border-radius: 18px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2fb35f, 0 16px 40px rgba(14, 42, 90, .3); color: var(--navy); font-weight: 700; }
body.client #worldui .wtoast { background: #fff; color: var(--navy); border: 0; border-radius: 99px; padding: 7px 18px; box-shadow: 0 0 0 2px var(--navy), 0 8px 18px rgba(14, 42, 90, .25); font: 800 15px var(--head); text-shadow: none; }

/* ---------- Inventar (helle Variante, ohne Codex-Rahmengrafik) ---------- */
body.client #worldui .winv { background: var(--panel); border-radius: 22px; box-shadow: var(--win-edge); filter: none; overflow: hidden; }
body.client #worldui .winv::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(26 * var(--u)); background: linear-gradient(#3aa4ff, var(--blue-d)); border-bottom: 3px solid var(--navy); }
body.client #worldui .iv-title { z-index: 1; top: calc(6 * var(--u)); left: calc(10 * var(--u)); height: calc(14 * var(--u)); font: 800 calc(10 * var(--u)) var(--head); color: #fff; text-shadow: 0 2px 0 var(--navy); }
body.client #worldui .iv-x { z-index: 1; top: calc(7 * var(--u)); left: auto; right: calc(8 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #ff6b6f;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
body.client #worldui .iv-x::before, body.client #worldui .iv-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 55%; height: 2px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
body.client #worldui .iv-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
body.client #worldui .iv-x:hover { background-color: #ff4a50; background-image: none; }
body.client #worldui .iv-eq { top: calc(31 * var(--u)); padding: calc(1 * var(--u)) 0; background: #f3f9ff; border: 2px solid var(--line); border-radius: 14px; }
body.client #worldui .iv-es, body.client #worldui .iv-s { background: linear-gradient(#fff, #eaf4ff); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--line); image-rendering: auto; }
body.client #worldui .iv-es:not([data-id])::before { content: ''; position: absolute; inset: 18%; background: var(--img) center / contain no-repeat; filter: grayscale(1) opacity(.28); }
body.client #worldui .iv-es.off { opacity: 1; }
body.client #worldui .iv-es[data-id] { background: linear-gradient(#fff, #eaf4ff); }
body.client #worldui .iv-s.free { opacity: 1; background: rgba(234, 244, 255, .6); box-shadow: inset 0 0 0 2px #dbe8f7; }
body.client #worldui .iv-s:not(.free):hover, body.client #worldui .iv-es[data-id]:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
body.client #worldui .iv-s.sel, body.client #worldui .iv-es.sel { background: #fff8e1; box-shadow: inset 0 0 0 3px var(--gold); }
body.client #worldui .iv-r { background: none; border-radius: 10px; }
body.client #worldui .iv-r.r1 { box-shadow: inset 0 0 0 2px #4aa8ff, inset 0 0 10px rgba(74, 168, 255, .35); background: none; }
body.client #worldui .iv-r.r2 { box-shadow: inset 0 0 0 2px #9b6bff, inset 0 0 10px rgba(155, 107, 255, .35); background: none; }
body.client #worldui .iv-r.r3 { box-shadow: inset 0 0 0 2px #ffae1a, inset 0 0 12px rgba(255, 174, 26, .45); background: none; }
body.client #worldui .iv-s i, body.client #worldui .iv-es i { font: 800 calc(5 * var(--u)) var(--head); color: #fff; text-shadow: 0 1px 0 var(--navy), 1px 0 0 var(--navy), -1px 0 0 var(--navy), 0 -1px 0 var(--navy); }
body.client #worldui .iv-stats { font: 800 calc(5.5 * var(--u)) var(--head); color: var(--muted); }
body.client #worldui .iv-stats b { color: var(--blue-d); }
body.client #worldui .iv-tab { border: 0; border-image: none; border-radius: 99px; font: 800 calc(5.5 * var(--u)) var(--head); color: var(--navy-2); background: #e3f0ff; }
body.client #worldui .iv-tab:hover { background: #d3e7ff; color: var(--navy); }
body.client #worldui .iv-tab.on { background: var(--blue); color: #fff; box-shadow: 0 0 0 2px var(--navy); }
body.client #worldui .iv-track { background: #e3f0ff; border-radius: 99px; }
body.client #worldui .iv-thumb { left: calc(.5 * var(--u)); width: calc(6 * var(--u)); border-radius: 99px; background: var(--blue); box-shadow: 0 0 0 1px var(--navy); }
body.client #worldui .iv-thumb i, body.client #worldui .iv-thumb b { background: none; }
body.client #worldui .iv-foot { border-top: 2px solid var(--line); padding-top: calc(1 * var(--u)); font: 800 calc(6 * var(--u)) var(--head); }
body.client #worldui .iv-gold { color: var(--gold-2); }
body.client #worldui .iv-cap { color: var(--muted); }
body.client #worldui .iv-tip { border: 0; border-image: none; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--win-edge); color: var(--muted); font-weight: 700; }
body.client #worldui .iv-tip b { font: 800 18px var(--head); }
body.client #worldui .iv-tip .t-l { color: var(--blue-d); } body.client #worldui .iv-tip .t-l.bad { color: var(--danger); }
body.client #worldui .iv-tip .t-s { color: #2f9a4c; } body.client #worldui .iv-tip .t-p { color: var(--gold-2); }
body.client #worldui .iv-tip .t-h { color: var(--dim); }
/* Gewoehnliche Items (hellgraue Seltenheitsfarbe) auf weissem Grund lesbar machen */
body.client #worldui .iv-tip b[style*="#d9d4e2"] { color: var(--navy) !important; }
/* Charakterwahl passt auch auf niedrige Bildschirme */
body.client .client-screen { padding-top: 14px; gap: 10px; }
body.client .cslot { height: 160px; } body.client .cslot-fig { height: 104px; }
@media (max-height: 800px) { body.client .client-logo img { width: min(300px, 60vw); } }

/* ---------- Charakter-Erstellung ---------- */
body.client .section > h3 { font: 800 18px var(--head); color: var(--blue-d); letter-spacing: 0; }
body.client .pose-bar { background: #f3f9ff; border-top: 2px solid var(--line); }
body.client .chip { background: #fff; border: 2px solid var(--line); color: var(--navy-2); font: 800 15px var(--head); }
body.client .chip:hover { border-color: var(--blue); color: var(--navy); }
body.client .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--navy); color: #fff; }
body.client .cls { background: #f3f9ff; border: 2px solid var(--line); border-radius: 14px; }
body.client .cls:hover { border-color: var(--blue); }
body.client .cls[aria-checked="true"] { background: #fff; border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 6px 16px rgba(14, 42, 90, .15); }
body.client .cls .cn { font: 800 13px var(--head); color: var(--c); filter: brightness(.75); }
body.client .cls .mini { border: 0; border-radius: 0; background: none; padding: 0; font: 700 13px var(--body); color: var(--muted); }
body.client .pips i { background: #dbe8f7; }
body.client .pips i.on { box-shadow: none; filter: brightness(.85); }
body.client .cls-desc { background: #f3f9ff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-weight: 700; }
body.client .cls-desc b { color: var(--navy); }
body.client .swatch-row .lbl, body.client .gear-row .lbl { color: var(--navy-2); font-weight: 800; }
body.client .sw[aria-checked="true"] { outline: 3px solid var(--blue); }
body.client .form-foot { border-top: 2px solid var(--line); }
body.client .stage-box { border-radius: 16px 16px 0 0; }
/* Charakterwahl: Figur ganz sichtbar (Porträt-Modus braucht >= 116 px Höhe für doppelte Größe) */
body.client .cslot { height: 182px; } body.client .cslot-fig { height: 120px; }

/* ---------- Drachentempel: Haendler und Auftraege ---------- */
body.client .wtemple { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
body.client .wtemple .winv-head { display: flex; justify-content: space-between; align-items: center; }
body.client .wt-body { padding: 14px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
body.client .wt-list { display: flex; flex-direction: column; gap: 8px; }
body.client .wt-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 10px; background: #f3f9ff; border: 1px solid var(--line); border-radius: 12px; }
body.client .wt-row img { width: 40px; height: 40px; }
body.client .wt-name { display: flex; flex-direction: column; line-height: 1.2; } body.client .wt-name small { color: var(--muted); font-weight: 700; }
body.client .wt-name b[style*="#d9d4e2"] { color: var(--navy) !important; }
body.client .wt-price { font: 800 16px var(--head); color: var(--gold-2); white-space: nowrap; }
body.client .wt-gold { color: var(--gold-2); }
body.client .mini[disabled] { opacity: .45; }
body.client .mini.gold { background: linear-gradient(#ffe46b, var(--gold)); border-color: var(--navy); color: var(--navy); }
body.client .wt-bless { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #f3f9ff; border: 2px solid var(--line); }
body.client .wt-bless.on { background: #fff8e1; border-color: var(--gold); }
body.client .wt-bless b { font: 800 17px var(--head); color: var(--navy); } body.client .wt-bless span { grid-column: 1; color: var(--muted); font-weight: 700; font-size: 14px; }
body.client .wt-bless .mini { grid-row: 1 / 3; grid-column: 2; }
body.client .wt-quest { padding: 10px 12px; border-radius: 14px; background: #f3f9ff; border: 2px solid var(--line); }
body.client .wt-quest.st-done { border-color: #2fb35f; background: #effbf3; } body.client .wt-quest.st-claimed { opacity: .6; }
body.client .wt-qtop { display: flex; justify-content: space-between; align-items: center; } body.client .wt-qtop b { font: 800 18px var(--head); color: var(--navy); }
body.client .wt-st { font: 800 13px var(--head); color: var(--blue-d); background: #e3f0ff; padding: 1px 10px; border-radius: 99px; }
body.client .wt-quest p { margin: 2px 0 6px; color: var(--muted); font-weight: 700; font-size: 14px; }
body.client .wt-prog { position: relative; height: 16px; border-radius: 99px; background: #dbe8f7; border: 2px solid var(--navy); overflow: hidden; }
body.client .wt-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#9fd6ff, var(--blue)); }
body.client .wt-quest.st-done .wt-prog i { background: linear-gradient(#8fe6a8, #2fb35f); }
body.client .wt-prog span { position: relative; display: block; text-align: center; font: 800 11px/12px var(--head); color: #fff; text-shadow: 0 1px 0 var(--navy), 1px 0 0 var(--navy), -1px 0 0 var(--navy); }
body.client .wt-qfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; } body.client .wt-qfoot small { color: var(--gold-2); font-weight: 800; }
body.client .cslot-fig { height: 128px; flex: none; }
/* Charakterkarte schmaler */
body.client .wcard { min-width: 0; width: 250px; padding: 6px 10px 6px 6px; gap: 8px; border-radius: 16px; }
body.client .wc-port { width: 42px; height: 42px; }
body.client .wc-lv { min-width: 18px; height: 16px; font-size: 10px; }
body.client .wc-main { gap: 3px; }
body.client .wc-name { font-size: 15px; line-height: 1.1; }
body.client .wc-sub { font-size: 11px; line-height: 1.2; }
body.client .wc-bar { height: 12px; } body.client .wc-bar b { font-size: 9px; line-height: 8px; }
body.client .wc-bar.xp { height: 9px; } body.client .wc-bar.xp b { font-size: 7px; line-height: 5px; }
body.client .wc-gold { position: absolute; top: 6px; right: 10px; font-size: 13px; }
body.client .wc-gold .coin { width: 11px; height: 11px; }
body.client .wc-name { padding-right: 46px; }

/* ---------- HUD dunkel (Nachtblau mit weisser Innenkante, passend zum Logo-Rand) ---------- */
body.client {
  --hud-bg: linear-gradient(180deg, rgba(22, 44, 88, .93), rgba(10, 24, 52, .93));
  --hud-edge: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px var(--navy), 0 12px 28px rgba(6, 14, 34, .45);
}
body.client .wcard { width: 268px; background: var(--hud-bg); box-shadow: var(--hud-edge); padding: 8px 12px 8px 8px; align-items: flex-start; }
body.client .wc-port { width: 46px; height: 46px; margin-top: 2px; background: radial-gradient(circle at 50% 70%, #3e6fb8, #142a55); border-color: #7cc6ff; }
body.client .wc-name { color: #fff; padding-right: 0; text-shadow: 0 1px 0 #000; }
body.client .wc-name .clan { color: #8ff0a9; } body.client .wc-name .adm { color: #ff7d80; }
body.client .wc-sub { color: #a9c2ea; }
body.client .wc-bar { background: rgba(4, 10, 26, .75); border: 1px solid rgba(255, 255, 255, .25); height: 13px; }
body.client .wc-bar.mp { height: 11px; } body.client .wc-bar.mp i { background: linear-gradient(#a8dcff, #2f8cff 60%, #1452c2); }
body.client .wc-bar.mp b { font: 800 9px/9px var(--head); color: #fff; text-shadow: 0 1px 0 #000; position: relative; display: block; text-align: center; }
body.client .wc-bar.xp { height: 8px; } body.client .wc-bar.xp i { background: linear-gradient(#fff1a0, #ffc928 60%, #d08a0a); }
body.client .wc-bar.xp b { font-size: 7px; line-height: 6px; }
body.client .wc-money { display: flex; gap: 14px; margin-top: 1px; }
body.client .wcard .wc-gold { position: static; font: 800 13px var(--head); color: #ffd85e; display: flex; align-items: center; gap: 4px; padding: 0; }
body.client .wc-dgold { font: 800 13px var(--head); color: #ff9a6b; display: flex; align-items: center; gap: 4px; }
/* Drachenei (seltene Waehrung): Eiform mit Glanzpunkt und Schuppen-Flecken */
.dcoin { width: 11px; height: 14px; display: inline-block; flex: none; border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  background: radial-gradient(circle at 34% 28%, #fff3d6 0 12%, transparent 13%), radial-gradient(circle at 62% 62%, #b3261e 0 9%, transparent 10%),
    radial-gradient(circle at 36% 72%, #b3261e 0 7%, transparent 8%), linear-gradient(160deg, #ffb070, #ff6a3d 55%, #a8231b);
  box-shadow: inset 0 0 0 1px rgba(80, 10, 0, .55); }
body.client .whud-place { background: var(--hud-bg); box-shadow: var(--hud-edge); }
body.client .whud-map { color: #fff; } body.client .whud-online { color: #a9c2ea; }

/* Quest-Tracker unter der Karte */
body.client .wtrack { top: 128px; left: 10px; width: 268px; padding: 7px 12px; border-radius: 14px; background: rgba(10, 24, 52, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); display: flex; flex-direction: column; gap: 1px; color: #fff; pointer-events: none; }
body.client .wtrack[hidden] { display: none !important; }
body.client .wtrack b { font: 800 11px var(--head); color: #ffc928; letter-spacing: .3px; }
body.client .tq-title { font: 800 15px/1.15 var(--head); }
body.client .tq-goal { font: 700 13px var(--body); color: #a9c2ea; } body.client .tq-goal.done { color: #8ff0a9; } body.client .tq-goal.offer { color: #ffd85e; }

/* Skill-Leiste unten mittig */
body.client .wskills { left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: var(--hud-bg); box-shadow: var(--hud-edge); }
body.client .whud-keys { bottom: 82px; }
body.client .sk { position: relative; width: 62px; height: 56px; border-radius: 10px; background: linear-gradient(#2a4f8f, #15305e); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #fff; cursor: pointer; }
body.client .sk:hover { box-shadow: inset 0 0 0 2px #ffc928; }
body.client .sk-k { position: absolute; left: 4px; top: 2px; font: 800 11px var(--head); color: #ffc928; }
body.client .sk-n { font: 800 11px/1.05 var(--head); text-align: center; padding: 0 3px; margin-top: 6px; }
body.client .sk-mp { font: 700 10px var(--body); color: #8fd0ff; }
body.client .sk-cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(4, 10, 26, .7); pointer-events: none; }
body.client .sk.nomp .sk-mp { color: #ff8a8a; }
body.client .sk-lock { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(4, 10, 26, .78); font: 800 13px var(--head); color: #a9c2ea; font-style: normal; }
body.client .sk.locked .sk-lock { display: flex; }
body.client .sk.pot { width: 50px; background: linear-gradient(#3a3270, #211a4a); }
body.client .sk.pot .icn { width: 30px; height: 30px; }
body.client .sk.pot b { position: absolute; right: 4px; bottom: 2px; font: 800 12px var(--head); text-shadow: 0 1px 0 #000; }
@media (max-width: 900px) { body.client .sk { width: 50px; } body.client .sk-n { font-size: 9px; } }

/* ---------- Spielfenster (Dialog, Haendler, Schmied, Quest-Log) ---------- */
body.client .gwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; z-index: 5; }
body.client .gwin[hidden] { display: none !important; }
body.client .gwin .winv-head { display: flex; justify-content: space-between; align-items: center; }
body.client .wnpc { width: min(440px, calc(100vw - 24px)); top: auto; bottom: 90px; transform: translateX(-50%); }
body.client .nd-talk { margin: 0; font-weight: 700; color: var(--navy-2); }
body.client .nd-q { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #fff8e1; border: 2px solid var(--gold); }
body.client .nd-q b { font: 800 19px var(--head); color: var(--navy); } body.client .nd-q span { color: var(--navy-2); font-weight: 700; } body.client .nd-q small { color: var(--gold-2); font-weight: 800; }
body.client .nd-q.done { background: #effbf3; border-color: #2fb35f; }
body.client .nd-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
body.client .mw-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
body.client .mw-tabs { display: flex; gap: 6px; }
body.client .mw-tab { font: 800 14px var(--head); padding: 5px 14px; border-radius: 99px; border: 0; background: #e3f0ff; color: var(--navy-2); }
body.client .mw-tab.on { background: var(--blue); color: #fff; box-shadow: 0 0 0 2px var(--navy); }
body.client .mw-wallet { display: flex; gap: 12px; font: 800 15px var(--head); }
body.client .mw-wallet .wc-gold { position: static; color: var(--gold-2); display: flex; align-items: center; gap: 4px; padding: 0; }
body.client .mw-wallet .wc-dgold { color: #d2522a; }
body.client .icn { width: 36px; height: 36px; flex: none; }
body.client .wt-row { grid-template-columns: 40px 1fr auto auto; }
body.client .wt-price.gold::after { content: ' Gold'; } body.client .wt-price.dgold { color: #d2522a; } body.client .wt-price.dgold::after { content: ' DG'; }
body.client .mw-buy { display: flex; gap: 4px; }
body.client .wtxt.small { font-size: 13px; margin: 0; }
body.client .sm-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: #f3f9ff; border: 1px solid var(--line); }
body.client .sm-row.ok { background: #fff; border-color: #2fb35f; }
body.client .sm-mid b { font: 800 16px var(--head); color: var(--navy); }
body.client .sm-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
body.client .sm-p { display: inline-flex; align-items: center; gap: 3px; font: 800 13px var(--head); padding: 1px 8px 1px 2px; border-radius: 99px; background: #e3f0ff; }
body.client .sm-p .icn { width: 20px; height: 20px; }
body.client .sm-p.have { color: #1f8a46; } body.client .sm-p.miss { color: var(--danger); background: #fdecec; }
body.client #worldui .iv-tip .t-src { color: var(--blue-d); font-size: 13px; } body.client #worldui .iv-tip .t-use { color: #7a4fd6; font-size: 13px; }
body.client .sk { width: 76px; }
body.client .sk-n { font-size: 10px; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }
/* Boden frei halten: flache Skill-Leiste, Tastenleiste aus (Tasten stehen auf den Skills, Hilfe im Quest-Log) */
body.client .whud-keys { display: none !important; }
body.client .wskills { bottom: 6px; padding: 4px; gap: 4px; border-radius: 12px; opacity: .92; }
body.client .sk { height: 42px; width: 72px; border-radius: 8px; }
body.client .sk-n { margin-top: 4px; font-size: 9.5px; }
body.client .sk-mp { font-size: 9px; }
body.client .sk.pot { width: 44px; } body.client .sk.pot .icn { width: 24px; height: 24px; }

/* ---------- Untere Leiste (fest, unter der Spielwelt): Chat links, Skills mittig ---------- */
body.client #worldui::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 62px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #16305e, #0a1834); border-top: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 -2px 0 #0e2a5a, 0 -10px 24px rgba(6, 14, 34, .35); }
body.client .wskills { bottom: 9px; background: none; box-shadow: none; padding: 0; opacity: 1; }
body.client .sk { height: 44px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 2px 0 #050c1c; }
body.client #worldui .whud-chat { bottom: 70px; }
body.client #worldui .whud-chat .wchat-row { position: fixed; left: 10px; bottom: 13px; width: min(340px, calc(50vw - 260px)); padding: 0; }
body.client #worldui .whud-chat .wchat-row input { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
body.client #worldui .whud-chat .wchat-row input::placeholder { color: #a9c2ea; }
body.client #worldui .whud-chat:focus-within .wchat-row input { background: #fff; color: var(--navy); }
body.client #worldui .whud-chat .wchat-log { height: 110px; }
body.client .wnpc { bottom: 80px; }
@media (max-width: 1000px) { body.client #worldui .whud-chat .wchat-row { width: 180px; } }
body.client #worldui .whud-chat:not(:focus-within) { background: none !important; box-shadow: none !important; }

/* ---------- Tasten-Knoepfe rechts in der unteren Leiste (3D, anklickbar) ---------- */
body.client .wmenu { right: 12px; bottom: 9px; display: flex; gap: 10px; }
body.client .wm-grp { display: flex; gap: 5px; padding: 3px; border-radius: 12px; background: rgba(2, 8, 22, .45); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .12); }
body.client .wm-btn { position: relative; width: 58px; height: 38px; border: 0; padding: 0; border-radius: 9px; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, #4f86d6 0%, #2a5cad 48%, #1d4688 52%, #183a72 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 0 #0a1c3e, 0 5px 8px rgba(0, 0, 0, .35);
  transition: transform .08s, box-shadow .08s, filter .12s; }
body.client .wm-btn.act { background: linear-gradient(180deg, #ffd860 0%, #f5b221 48%, #e09a0e 52%, #b9740a 100%); color: #3a2200;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 3px 0 #6b4200, 0 5px 8px rgba(0, 0, 0, .35); }
body.client .wm-btn::before { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 40%; border-radius: 7px 7px 12px 12px; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none; }
body.client .wm-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
body.client .wm-btn:active, body.client .wm-btn.down { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 #0a1c3e; }
body.client .wm-btn.act:active, body.client .wm-btn.act.down { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 #6b4200; }
body.client .wm-btn kbd { font: 800 13px/1 var(--head); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
body.client .wm-btn.act kbd { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
body.client .wm-btn span { font: 800 9px/1 var(--head); letter-spacing: .2px; opacity: .92; }
/* Skill-Leiste im selben 3D-Stil */
body.client .sk { background: linear-gradient(180deg, #3a6cb8 0%, #22508f 48%, #183f75 52%, #12305c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 0 #0a1c3e, 0 5px 8px rgba(0, 0, 0, .35); transition: transform .08s, filter .12s; }
body.client .sk:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 2px #ffc928, 0 3px 0 #0a1c3e; }
body.client .sk:active { transform: translateY(3px); }
body.client .sk.pot { background: linear-gradient(180deg, #5a4fa8 0%, #3c3280 50%, #2a2260 100%); }
@media (max-width: 1250px) { body.client .wm-btn span { display: none; } body.client .wm-btn { width: 36px; } }
@media (max-width: 900px) { body.client .wmenu { display: none; } }
body.client .wm-btn kbd { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0; height: auto; color: inherit; }

/* ---------- Zahnrad + Einstellungen ---------- */
body.client .wm-gear { width: 42px; height: 38px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; align-self: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, #8a9bbb, #4a5a7c 60%, #2a3554);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #10182c, 0 5px 8px rgba(0, 0, 0, .35); transition: transform .25s, filter .12s; }
body.client .wm-gear svg { width: 24px; height: 24px; fill: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
body.client .wm-gear:hover { transform: rotate(60deg); filter: brightness(1.15); }
body.client .wm-gear:active { transform: rotate(60deg) translateY(2px); }
body.client .wfps { top: 82px; right: 12px; padding: 2px 10px; border-radius: 99px; background: rgba(10, 24, 52, .78); color: #8ff0a9; font: 800 13px var(--head); }
body.client .wfps[hidden] { display: none !important; }
body.client .wset { width: min(440px, calc(100vw - 24px)); }
body.client .st-h { margin: 6px 0 0; font: 800 14px var(--head); color: var(--blue-d); text-transform: uppercase; letter-spacing: .5px; }
body.client .st-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #e3eefb; font-weight: 700; color: var(--navy); }
body.client .st-row input[type=range] { width: 170px; accent-color: var(--blue); }
body.client .st-row b { width: 30px; text-align: right; font: 800 14px var(--head); color: var(--blue-d); }
body.client .st-seg { grid-column: 2 / 4; display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: #e3f0ff; }
body.client .st-seg button { border: 0; padding: 4px 12px; border-radius: 99px; background: none; font: 800 13px var(--head); color: var(--navy-2); cursor: pointer; }
body.client .st-seg button.on { background: var(--blue); color: #fff; box-shadow: 0 0 0 2px var(--navy); }
body.client .st-tog { grid-column: 3; position: relative; width: 46px; height: 26px; border: 0; border-radius: 99px; background: #c7d6ea; cursor: pointer; transition: background .15s; }
body.client .st-tog i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
body.client .st-tog.on { background: #2fb35f; } body.client .st-tog.on i { left: 23px; }
/* Inventar: Ziehen und Ablegen */
.iv-ghost { position: fixed; z-index: 100; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); transform: scale(1.1) rotate(-6deg); }
body.client #worldui .iv-s.dragging-src, body.client #worldui .iv-es.dragging-src { opacity: .35; }
body.client #worldui .drop-ok { box-shadow: inset 0 0 0 3px #2fb35f, 0 0 12px rgba(47, 179, 95, .6) !important; background: #effbf3 !important; }
body.client #worldui .iv-s, body.client #worldui .iv-es { touch-action: none; user-select: none; }
/* Durchsage-Banner (Admin) */
body.client .wannounce { top: 90px; left: 50%; transform: translateX(-50%); min-width: 340px; max-width: min(700px, calc(100vw - 40px)); padding: 12px 22px; border-radius: 16px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; color: #fff; pointer-events: none; z-index: 20;
  background: linear-gradient(180deg, #2f6fd0, #173f86); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy), 0 16px 40px rgba(6, 14, 34, .5); animation: annIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
body.client .wannounce[hidden] { display: none !important; }
body.client .wannounce.restart { background: linear-gradient(180deg, #ff7a3d, #c2361b); }
body.client .wannounce b { font: 800 13px var(--head); letter-spacing: 1px; text-transform: uppercase; color: #ffe46b; }
body.client .wannounce span { font: 800 20px/1.25 var(--head); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
@keyframes annIn { from { opacity: 0; transform: translate(-50%, -20px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
body.client .adm-help { display: flex; flex-direction: column; gap: 4px; font: 700 14px var(--body); color: var(--navy); }
body.client .adm-help div { padding: 4px 8px; background: #f3f9ff; border-radius: 8px; }
/* Nebenquests */
body.client .nd-h { display: block; margin: 4px 0 2px; font: 800 14px var(--head); color: var(--blue-d); text-transform: uppercase; letter-spacing: .5px; }
body.client .nd-sides { display: flex; flex-direction: column; gap: 6px; }
body.client .nd-side { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: #f3f9ff; border: 2px solid var(--line); }
body.client .nd-side.st-open { border-color: var(--gold); background: #fffaf0; } body.client .nd-side.st-done { border-color: #2fb35f; background: #effbf3; }
body.client .nd-side.st-locked { opacity: .55; }
body.client .nd-st { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.client .nd-st b { font: 800 16px var(--head); color: var(--navy); } body.client .nd-st span { font: 800 12px var(--head); color: var(--blue-d); background: #e3f0ff; padding: 1px 9px; border-radius: 99px; white-space: nowrap; }
body.client .nd-tx { font: 700 14px var(--body); color: var(--navy-2); } body.client .nd-side small { color: var(--gold-2); font-weight: 800; }
body.client .nd-side .mini { align-self: flex-end; }
body.client .tq-side { font: 700 12px var(--body); color: #cfe0ff; } body.client .tq-side.done { color: #8ff0a9; }
body.client .wnpc { max-height: calc(100vh - 160px); }
/* Spielerprofil: PvP und Aktionen */
body.client .wi-stats.pvp div { background: #fff4ec; border-color: #ffd4b8; } body.client .wi-stats.pvp b { color: #d2522a; }
body.client .wi-act { display: flex; flex-wrap: wrap; gap: 6px; }
body.client .wi-fr { font: 800 13px var(--head); color: #2f9a4c; align-self: center; }
/* Freunde */
body.client .wfriends { width: min(420px, calc(100vw - 24px)); }
body.client .fr-c { font: 700 13px var(--body); opacity: .85; margin-left: 6px; }
body.client .fr-add { display: flex; gap: 6px; } body.client .fr-add input { flex: 1; padding: 7px 10px; border: 2px solid var(--line); border-radius: 10px; background: #f3f9ff; font: 700 15px var(--body); color: var(--navy); }
body.client .fr-row { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #f3f9ff; border: 1px solid var(--line); }
body.client .fr-dot { width: 10px; height: 10px; border-radius: 50%; background: #b9c7da; } body.client .fr-dot.on { background: #2fb35f; box-shadow: 0 0 6px #2fb35f; }
body.client .fr-n { display: flex; flex-direction: column; line-height: 1.15; } body.client .fr-n b { font: 800 16px var(--head); color: var(--navy); } body.client .fr-n small { color: var(--muted); font-weight: 700; }
/* Private Nachrichten im Chat */
body.client #worldui .wchat-msg.ch-dm b, body.client #worldui .wchat-msg.ch-dm span { color: #c2187a; }
/* HUD-Groesse (Einstellungen): nur Karten und Fenster */
body.client #worldui .wcard, body.client #worldui .wtrack, body.client #worldui .whud-place, body.client #worldui .wfps,
body.client #worldui .gwin, body.client #worldui .wwin, body.client #worldui .winv, body.client #worldui .wannounce, body.client #worldui .winvite,
body.client #worldui .iv-tip { zoom: var(--hud-z, 1); }
@media (max-width: 1500px) { body.client .wm-btn span { display: none; } body.client .wm-btn { width: 38px; } body.client .wmenu { gap: 6px; } }

/* ---------- Gruppe (rechts unter der Ortsanzeige) ---------- */
body.client .wparty { top: 110px; right: 10px; width: 210px; padding: 8px 10px; border-radius: 14px; background: var(--hud-bg); box-shadow: var(--hud-edge); color: #fff; display: flex; flex-direction: column; gap: 5px; zoom: var(--hud-z, 1); }
body.client .wparty[hidden] { display: none !important; }
body.client .wp-head { display: flex; justify-content: space-between; align-items: center; } body.client .wp-head b { font: 800 13px var(--head); color: #ffc928; }
body.client .wp-head .mini { font-size: 11px; padding: 1px 8px; }
body.client .wp-m.off { opacity: .5; }
body.client .wp-n { display: flex; align-items: center; gap: 4px; font: 800 14px var(--head); } body.client .wp-n small { margin-left: auto; font: 700 11px var(--body); color: #a9c2ea; }
body.client .wp-crown { width: 11px; height: 9px; background: #ffc928; clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
body.client .wp-hp { height: 7px; border-radius: 99px; background: rgba(4, 10, 26, .75); overflow: hidden; } body.client .wp-hp i { display: block; height: 100%; background: linear-gradient(#ff8f86, #e5484d); transition: width .3s; }
body.client .wp-tip { font: 700 11px var(--body); color: #a9c2ea; }
body.client .wfps { top: auto; bottom: 74px; right: 12px; }
/* ---------- Buffs (rechts neben der Charakterkarte) ---------- */
body.client .wbuffs { top: 12px; left: 290px; display: flex; gap: 6px; pointer-events: none; zoom: var(--hud-z, 1); }
body.client .wb { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 10px 7px 6px; border-radius: 12px; background: var(--hud-bg); box-shadow: var(--hud-edge); color: #fff; overflow: hidden; animation: annIn .3s both; }
body.client .wb-ic { width: 22px; height: 26px; background: linear-gradient(#8fd8ff, #2f6fd0); clip-path: polygon(50% 0, 100% 20%, 92% 70%, 50% 100%, 8% 70%, 0 20%); }
body.client .wb span { display: flex; flex-direction: column; line-height: 1.1; } body.client .wb b { font: 800 13px var(--head); } body.client .wb small { font: 700 11px var(--body); color: #8ff0a9; }
body.client .wb em { font: 800 14px var(--head); color: #ffc928; font-style: normal; }
body.client .wb s { position: absolute; left: 0; bottom: 0; height: 3px; background: #8ff0a9; text-decoration: none; }
/* Gruppen-Chat */
body.client #worldui .wchat-msg.ch-party b, body.client #worldui .wchat-msg.ch-party span { color: #1f8fb8; }
body.client .wb { animation: wbIn .3s both; }
@keyframes wbIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body.client .wb { animation: none; }
body.client #worldui .wchat-msg.ch-sys b, body.client #worldui .wchat-msg.ch-sys span { color: #b8860b; }
body.client #worldui .iv-sort { padding: 0 calc(5 * var(--u)); height: calc(10 * var(--u)); border: 0; border-radius: 99px; cursor: pointer; font: 800 calc(5.5 * var(--u)) var(--head); color: #fff;
  background: linear-gradient(180deg, #4f86d6, #1d4688); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 #0a1c3e; }
body.client #worldui .iv-sort:hover { filter: brightness(1.12); } body.client #worldui .iv-sort:active { transform: translateY(2px); box-shadow: none; }

/* ---------- PvP: Duell-Bedingungen, Ergebnis, Arena-Lobby ---------- */
body.client .dq-terms { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; font-size: 14px; color: var(--muted); }
body.client .dq-terms b { color: var(--navy); } body.client .dq-terms .stake b { color: var(--gold-2); }
body.client .wduelset { width: min(400px, calc(100vw - 24px)); }
body.client .ds-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; font: 800 15px var(--head); color: var(--navy); }
body.client .ds-row input { width: 140px; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); font: 800 15px var(--body); color: var(--navy); text-align: right; }
body.client .ds-seg, body.client .pl-tabs, body.client .pl-stakes { display: flex; gap: 6px; flex-wrap: wrap; }
body.client .ds-seg .mini, body.client .pl-tabs .mini, body.client .pl-stakes .mini { min-width: 42px; }
body.client .gwin .mini.on { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
body.client .ds-sum { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: #fff8e2; color: var(--gold-2); font-weight: 800; text-align: center; }
body.client .wduelend { width: min(340px, calc(100vw - 24px)); text-align: center; }
body.client .de-big { font: 800 34px/1 var(--head); margin: 6px 0; } body.client .de-big small { display: block; font: 700 14px var(--body); color: var(--muted); margin-top: 4px; }
body.client .de-big.win { color: var(--gold-d); } body.client .de-big.lose { color: var(--navy-2); }
body.client .de-score { font: 800 26px var(--head); color: var(--navy); }
body.client .de-line { margin: 4px 0; color: var(--muted); } body.client .de-line b { color: var(--navy); } body.client .de-line b.up { color: var(--ok); } body.client .de-line b.down { color: var(--danger); }
body.client .wpvp { width: min(560px, calc(100vw - 24px)); }
body.client .pl-me { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: stretch; margin-bottom: 10px; }
body.client .pl-me .wi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
body.client .pl-me .wi-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; } body.client .pl-me .wi-stats span { font-size: 11px; text-align: center; }
body.client .pl-rank { border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; color: #fff; background: linear-gradient(160deg, var(--rc, #9a6a3a), #1b2340); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
body.client .pl-rank b { font: 800 17px var(--head); } body.client .pl-rank span { font: 800 26px/1 var(--head); color: #ffe46b; } body.client .pl-rank small { opacity: .8; font-size: 11px; }
body.client .r-bronze { --rc: #a8683a; } body.client .r-silber { --rc: #8f9bb0; } body.client .r-gold { --rc: #d9a21a; }
body.client .r-platin { --rc: #3fb7b0; } body.client .r-diamant { --rc: #4d8dff; } body.client .r-drachenmeister { --rc: #c23a6a; }
body.client .pl-tabs { margin: 4px 0 6px; } body.client .pl-stakes { margin: 6px 0; }
body.client .pl-q { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--line); }
body.client .pl-q > div:not(.pl-spin) { flex: 1; display: flex; flex-direction: column; } body.client .pl-q b { font: 800 16px var(--head); color: var(--navy); } body.client .pl-q small { color: var(--muted); }
body.client .pl-q.on { background: #fff8e2; box-shadow: inset 0 0 0 2px var(--gold); } body.client .pl-q.busy { justify-content: center; color: var(--muted); }
body.client .pl-spin { width: 26px; height: 26px; border-radius: 50%; border: 4px solid #ffe7a0; border-top-color: var(--gold-d); animation: plspin 1s linear infinite; }
@keyframes plspin { to { transform: rotate(360deg); } }
body.client .pl-h { margin: 10px 0 4px; font: 800 15px var(--head); color: var(--blue-d); }
body.client .pl-top { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
body.client .pl-top > div { display: grid; grid-template-columns: 26px 1fr 118px 46px 44px; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 9px; background: #f3f9ff; }
body.client .pl-top > div.me { background: #fff4c7; box-shadow: inset 0 0 0 2px var(--gold); }
body.client .pl-pos { font: 800 14px var(--head); color: var(--muted); text-align: center; } body.client .pl-n { font-weight: 800; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.client .pl-r { font-size: 12px; font-weight: 800; color: var(--rc); } body.client .pl-top b { color: var(--navy); text-align: right; } body.client .pl-top small { color: var(--muted); text-align: right; }
@media (max-width: 520px) { body.client .pl-me { grid-template-columns: 1fr; } body.client .pl-me .wi-stats { grid-template-columns: repeat(2, 1fr); } body.client .pl-top > div { grid-template-columns: 22px 1fr 46px 40px; } body.client .pl-r { display: none; } }
body.client .wi-stats.pvp { grid-template-columns: repeat(4, 1fr); }
/* Untere Leiste zu eng (layoutBar in world.js): Knopfleiste nur mit Tasten */
body.client .wmenu.compact { gap: 6px; } body.client .wmenu.compact .wm-btn { width: 38px; } body.client .wmenu.compact .wm-btn span { display: none; }
body.client .wannounce.event { background: linear-gradient(180deg, #ffb13d, #d2641b); }
body.client .wannounce.boss { background: linear-gradient(180deg, #c2364b, #6b1530); }
body.client .wannounce.pvp { background: linear-gradient(180deg, #5b8cff, #2a3fb8); }
body.client .wskills.compact .sk:not(.pot) { width: 46px; } body.client .wskills.compact .sk:not(.pot) .sk-n { display: none; }
body.client .wskills.compact .sk:not(.pot) .sk-mp { margin-top: 12px; }
/* VIP-Abzeichen (tuerkis) */
body.client .wc-name .vip { display: inline-block; padding: 0 6px; border-radius: 6px; background: #0f9e98; color: #e0fffd; font-size: .78em; vertical-align: 1px; }
/* Gemischte Quests: Zielliste */
body.client .nd-goals { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
body.client .nd-goals li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: 7px; background: #f3f9ff; font-size: 13px; color: var(--navy); }
body.client .nd-goals li b { color: var(--muted); white-space: nowrap; }
body.client .nd-goals li.ok { background: #e6f7ea; } body.client .nd-goals li.ok b { color: var(--ok); }
body.client .nd-goals li.ok span::before { content: '\2713  '; color: var(--ok); font-weight: 900; }

/* ---------- Handelslizenz, Prüfung, Handelsfenster ---------- */
body.client .wlicense { width: min(460px, calc(100vw - 24px)); }
body.client .tl-ok { padding: 12px; border-radius: 12px; background: #e6f7ea; display: flex; flex-direction: column; gap: 2px; color: var(--navy); }
body.client .tl-steps { display: flex; flex-direction: column; gap: 8px; }
body.client .tl-step { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f3f9ff; box-shadow: inset 0 0 0 2px var(--line); }
body.client .tl-step b { color: var(--navy); } body.client .tl-step span { grid-column: 1; color: var(--muted); font-size: 14px; }
body.client .tl-step .mini { grid-column: 2; grid-row: 1 / span 2; }
body.client .tl-step.ok { background: #e6f7ea; box-shadow: inset 0 0 0 2px #9fd9ac; } body.client .tl-step.ok span { color: var(--ok); font-weight: 800; }
body.client .tl-rules { margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
body.client .wexam { width: min(620px, calc(100vw - 24px)); }
body.client .wexam .wt-body { overflow: auto; }
body.client .ex-q { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #f3f9ff; display: flex; flex-direction: column; gap: 4px; }
body.client .ex-q b { color: var(--navy); margin-bottom: 2px; }
body.client .ex-q label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
body.client .ex-q label:hover { background: #e3f0ff; } body.client .ex-q input { margin-top: 3px; }
body.client .wtrade { width: min(660px, calc(100vw - 24px)); }
body.client .tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.client .tr-col { padding: 8px; border-radius: 12px; background: #f3f9ff; box-shadow: inset 0 0 0 2px var(--line); display: flex; flex-direction: column; gap: 6px; min-height: 180px; }
body.client .tr-col.them { background: #fff8e2; box-shadow: inset 0 0 0 2px #f1d58a; }
body.client .tr-h { display: flex; justify-content: space-between; align-items: center; } body.client .tr-h b { color: var(--navy); }
body.client .tr-st { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: #e2e8f2; color: var(--muted); }
body.client .tr-st.rd { background: #fff0c2; color: var(--gold-2); } body.client .tr-st.ok { background: #d8f3df; color: var(--ok); }
body.client .tr-list { display: flex; flex-direction: column; gap: 3px; flex: 1; }
body.client .tr-it { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 6px; align-items: center; padding: 2px 6px; border-radius: 8px; background: #fff; }
body.client .tr-it .icn { width: 28px; height: 28px; image-rendering: pixelated; } body.client .tr-it b { font-size: 13px; color: var(--navy); }
body.client .tr-it input { width: 56px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line); text-align: right; }
body.client .tr-it em { font-style: normal; font-weight: 800; color: var(--muted); }
body.client .tr-x { border: 0; background: none; color: var(--danger); font-size: 18px; cursor: pointer; line-height: 1; }
body.client .tr-money { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
body.client .tr-money input { width: 80px; padding: 2px 4px; margin-left: 4px; border-radius: 6px; border: 1px solid var(--line); text-align: right; }
body.client .tr-money b { color: var(--navy); }
body.client .tr-empty { color: var(--dim); font-size: 13px; }
body.client .tr-bag { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow: auto; padding: 4px; border-radius: 10px; background: #f3f9ff; }
body.client .tr-b { position: relative; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; padding: 4px; }
body.client .tr-b:hover { box-shadow: inset 0 0 0 2px var(--blue); } body.client .tr-b .icn { width: 32px; height: 32px; image-rendering: pixelated; }
body.client .tr-b em { position: absolute; right: 2px; bottom: 0; font: 800 10px var(--head); font-style: normal; color: var(--navy); text-shadow: 0 0 2px #fff; }
body.client .tr-warn { margin: 6px 0; font-size: 13px; color: #b5651d; font-weight: 700; }
body.client .tr-btns { gap: 8px; flex-wrap: wrap; } body.client .tr-btns .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { body.client .tr-cols { grid-template-columns: 1fr; } }
body.client .wt-price.tausch { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--navy); }
body.client .wt-price.tausch .icn { width: 22px; height: 22px; }