/* Oberfläche im Stil klassischer Fantasy-MMOs (Richtung WoW / Metin / Silkroad):
   dunkle Bronze, Goldrahmen mit Doppellinie, Cinzel-Schrift, Lebens- und Erfahrungskugel an der Leiste.
   Wird als letztes geladen und überschreibt style.css / style3d.css / hud.css. */
:root {
  --b1: #2c2216; --b2: #140f09; --b3: #0a0705; --gold: #e8c46a; --gold-d: #8a6a32; --gold-l: #fff0b8; --line: #6b5226; --ink: #f2e8d2; --muted: #b8a888;
  --ttl: 'Cinzel', Georgia, serif;
  --frame: inset 0 0 0 1px #000, inset 0 0 0 2px #7a5c2a, inset 0 0 0 3px #1a130b, 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.6);
}

/* ---------- Spieler oben links: Porträt im Goldring, Name, Klasse, Leben, Erfahrung ---------- */
#me { left: 14px !important; top: 12px !important; width: auto !important; transform: none !important; display: flex; align-items: center; gap: 0;
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
#me .portrait { position: relative; width: 86px; height: 86px; flex: none; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 50% 35%, #4a3a26, #120d08 72%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #c9a24a, 0 0 0 6px #3a2a14, 0 0 0 7px #000, 0 6px 16px rgba(0,0,0,.7), inset 0 0 18px rgba(0,0,0,.9); }
#me .portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
#me .portrait .lvl { position: absolute; right: -6px; bottom: -4px; min-width: 30px; height: 30px; line-height: 26px; padding: 0 !important; text-align: center; border-radius: 50% !important;
  background: radial-gradient(circle at 40% 30%, #5a4020, #120d08) !important; border: 2px solid #e8c46a !important; color: #ffe9a8 !important; font: 700 13px var(--ttl) !important;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.8); }
#me .me-info { margin-left: -14px; padding: 8px 14px 9px 24px; width: 236px; border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, rgba(44,34,22,.94), rgba(16,12,8,.94)); box-shadow: var(--frame); }
#me .me-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px !important; justify-content: flex-start !important; }
#me .me-head b { font: 700 15px var(--ttl) !important; color: #ffe9a8 !important; letter-spacing: .03em; text-shadow: 0 1px 2px #000; }
#me .cls { display: inline !important; font: 600 11px var(--font-ui); color: var(--muted) !important; letter-spacing: .04em; text-transform: uppercase; }
#me .bar.hp { height: 18px !important; }
#me .bar.xp { height: 6px !important; margin-top: 4px; }
#me .bar.xp i { background: linear-gradient(#fff2b8, #e8b43a 50%, #a8741a) !important; }

/* Lebensbalken (Spieler, Ziel): Rahmen mit Goldkante, glänzende Füllung */
.bar { position: relative; border-radius: 3px !important; background: #120806 !important; border: 1px solid #000 !important; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 1px #6b5226 !important; margin-top: 0; }
.bar i { border-radius: 0 !important; }
.bar.hp i { background: linear-gradient(#ff9a8a 0%, #e0322a 42%, #a01810 58%, #c0241a 100%) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.bar.hp.foe i { background: linear-gradient(#ffc27a 0%, #e8781e 42%, #a84a0a 58%, #c25a12 100%) !important; }
.bar .lag { background: linear-gradient(#fff3c8, #e8c46a) !important; border-radius: 0 !important; }
.bar span { font: 700 11px/17px var(--font-ui) !important; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }

/* Ziel: neben dem Spieler, gleiche Machart */
#target { left: 336px !important; top: 26px !important; width: 226px !important; transform: none !important; padding: 7px 12px 9px !important; border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(44,34,22,.94), rgba(16,12,8,.94)) !important; border: 0 !important; box-shadow: var(--frame) !important; backdrop-filter: none !important; }
#target .me-head { display: flex; align-items: center; gap: 8px; justify-content: flex-start !important; margin-bottom: 5px !important; }
#target .me-head b { font: 700 14px var(--ttl) !important; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
#target .lvl { min-width: 26px; height: 22px; line-height: 19px; text-align: center; border-radius: 4px !important; padding: 0 4px !important;
  background: radial-gradient(circle at 40% 30%, #5a4020, #120d08) !important; border: 1px solid #c9a24a !important; color: #ffe9a8 !important; font: 700 12px var(--ttl) !important; }
#target .bar { height: 16px !important; }

/* ---------- Leiste unten: Lebenskugel · Fähigkeiten · Erfahrungskugel ---------- */
#hudbar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 0; z-index: 5; pointer-events: none; }
#hudbar > * { pointer-events: auto; }
#hudbar .hb-mid { position: relative; margin: 0 -12px 6px; padding: 10px 26px 8px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #33281a, #1a140c 55%, #110c07); box-shadow: var(--frame), inset 0 1px 0 rgba(255,230,160,.18); }
#hudbar .hb-mid::before { content: ''; position: absolute; left: 50%; top: -9px; width: 120px; height: 12px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #c9a24a 20%, #fff0b8 50%, #c9a24a 80%, transparent); clip-path: polygon(0 100%, 12% 30%, 50% 0, 88% 30%, 100% 100%); opacity: .85; }
#hudbar #skillbar { position: static !important; transform: none !important; left: auto !important; bottom: auto !important; margin: 0 !important; display: flex; gap: 5px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#skillbar .slot { width: 50px !important; height: 50px !important; border-radius: 5px !important; border: 0 !important; padding: 0 !important; overflow: hidden !important; margin: 0 !important;
  background: linear-gradient(#1e170e, #0a0705) !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, inset 0 0 0 3px #2a1f10, 0 0 0 1px #000, 0 3px 6px rgba(0,0,0,.7) !important; }
#skillbar .slot .icon.art, #skillbar .slot .icon { inset: 4px !important; border-radius: 3px !important; overflow: hidden; }
#skillbar .slot::after { content: ''; position: absolute; inset: 0; border-radius: 5px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%), linear-gradient(0deg, rgba(0,0,0,.35), transparent 30%) !important; }
#skillbar .slot:hover { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #ffe08a, inset 0 0 0 3px #3a2a10, 0 0 0 1px #000, 0 0 14px rgba(255,210,110,.6) !important; }
#skillbar .slot .key { left: 3px !important; top: 2px !important; bottom: auto !important; transform: none !important; z-index: 3; min-width: 0; padding: 0 4px; border-radius: 3px;
  background: rgba(0,0,0,.65) !important; border: 0 !important; font: 700 10.5px/14px var(--font-ui) !important; color: #ffe39a !important; text-shadow: none; }
#skillbar .slot .cd { inset: 4px !important; border-radius: 3px !important; z-index: 1; }
#skillbar .slot .cdt { z-index: 3; font: 800 18px var(--font-ui) !important; color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; }
#skillbar .slot.cooling .icon { filter: saturate(.35) brightness(.75); }
#skillbar .slot.empty { opacity: 1 !important; background: linear-gradient(#17120b, #0a0705) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3a1e, 0 0 0 1px #000 !important; }
#skillbar .slot.empty .key { color: #8a7a5a !important; }
#skillbar .slot.swap { width: 38px !important; height: 38px !important; align-self: flex-end; margin-right: 8px !important; }
#skillbar .slot.swap.off { opacity: .5; }
#skillbar #sk-pot { margin: 0 8px !important; }
#skillbar .slot .num { z-index: 3; right: 4px !important; bottom: 2px !important; font: 800 12px var(--font-ui) !important; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
#skillbar .slot.flash { animation: slotFlash2 .35s; }
@keyframes slotFlash2 { 0% { filter: brightness(2.2); } 100% { filter: none; } }

/* Erfahrung: in der Leiste unten, in zehn Abschnitte geteilt */
#hudbar #xpline { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; height: 9px !important; margin-top: 8px; border-radius: 2px;
  background: #0a0706 !important; border: 0 !important; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #000, 0 0 0 2px #5a4420 !important; overflow: hidden; }
#hudbar #xpline i { background: linear-gradient(#fff2b8, #e8b43a 50%, #9a6a12) !important; box-shadow: 0 0 6px rgba(255,200,90,.6) !important; }
#hudbar #xpline::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.75) calc(10% - 1px) 10%); }
#hudbar #xpline span { position: absolute; left: 50%; bottom: auto !important; top: -1px; transform: translateX(-50%); z-index: 2; font: 700 9.5px/11px var(--font-ui) !important; color: #fff6dc !important; text-shadow: 0 0 3px #000, 0 1px 1px #000; opacity: 0; transition: opacity .15s; white-space: nowrap; }
#hudbar .hb-mid:hover #xpline span { opacity: 1; }

/* Kugeln: Glas, Flüssigkeit mit Welle, Goldring */
.orb { position: relative; width: 108px; height: 108px; flex: none; border-radius: 50%; z-index: 2; background: #070404;
  box-shadow: 0 0 0 2px #000, 0 0 0 5px #c9a24a, 0 0 0 7px #3a2a14, 0 0 0 8px #000, 0 8px 20px rgba(0,0,0,.75); }
.orb::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 200deg, transparent 0 20%, rgba(201,162,74,.0) 20%, #2a1f10 21% 29%, transparent 30% 70%, #2a1f10 71% 79%, transparent 80%); }
.orb-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.orb-in i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height .3s ease; }
.orb-in i::before { content: ''; position: absolute; left: -50%; top: -6px; width: 200%; height: 12px; border-radius: 50%; opacity: .8; animation: orbWave 3.5s linear infinite; }
@keyframes orbWave { from { transform: translateX(-12%) scaleY(1); } 50% { transform: translateX(12%) scaleY(.6); } to { transform: translateX(-12%) scaleY(1); } }
.orb.hp .orb-in i { background: radial-gradient(ellipse at 50% 0%, #ff8a7a 0%, #d82a20 35%, #8a0c08 75%, #4a0404 100%); }
.orb.hp .orb-in i::before { background: radial-gradient(ellipse at center, rgba(255,190,170,.75), rgba(255,120,100,0) 70%); }
.orb.xp .orb-in i { background: radial-gradient(ellipse at 50% 0%, #fff2b0 0%, #f0b830 35%, #a8700c 75%, #5a3804 100%); }
.orb.xp .orb-in i::before { background: radial-gradient(ellipse at center, rgba(255,250,210,.8), rgba(255,220,120,0) 70%); }
.orb-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.62), rgba(255,255,255,.08) 18%, rgba(255,255,255,0) 34%), radial-gradient(circle at 50% 120%, rgba(255,255,255,.12), transparent 50%);
  box-shadow: inset 0 -12px 22px rgba(0,0,0,.65), inset 0 6px 14px rgba(255,255,255,.08), inset 0 0 0 2px rgba(0,0,0,.7); }
.orb > span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 700 17px var(--ttl); color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000, 0 0 10px rgba(0,0,0,.6); pointer-events: none; }
#hudbar.low .orb.hp { animation: lowPulse 1s ease-in-out infinite; }
@keyframes lowPulse { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #ff5a3a, 0 0 0 7px #3a1408, 0 0 0 8px #000, 0 0 26px rgba(255,60,40,.85); } }

/* alte Plätze (Leben über der Leiste) ausblenden */
#castbar { bottom: 132px !important; }

/* ---------- Karte rechts oben: Goldring, Namensschild ---------- */
#mapbox { padding-top: 4px; }
#minimap { border-radius: 50%; box-shadow: 0 8px 22px rgba(0,0,0,.65), 0 0 18px rgba(255,200,100,.12) !important; filter: none !important; }   /* Goldring zeichnet minimap.js */
#map-zone { display: inline-block; margin: 0 auto 8px !important; padding: 2px 16px; border-radius: 3px; font: 700 13px var(--ttl) !important; font-style: normal !important; color: #ffe9a8 !important; letter-spacing: .06em;
  background: linear-gradient(180deg, #33281a, #120d08); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #7a5c2a, 0 2px 6px rgba(0,0,0,.6); }
#map-pos, #map-time { font: 600 11px var(--font-ui) !important; color: #d8ccb0 !important; }

/* ---------- Auftrag rechts: Titel mit Goldlinie ---------- */
#quest { margin-top: 10px; padding: 8px 10px 10px !important; text-align: left !important; border-radius: 6px !important;
  background: linear-gradient(90deg, rgba(16,12,8,0), rgba(16,12,8,.72) 25%) !important; border: 0 !important; box-shadow: none !important; }
#quest .q-title { font: 700 10.5px var(--font-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: #c9a24a !important; display: flex; align-items: center; gap: 6px; }
#quest .q-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #c9a24a, transparent); }
#quest b#q-name { font: 700 15px var(--ttl) !important; color: #ffe9a8 !important; margin: 3px 0 2px; text-shadow: 0 1px 2px #000; }
#quest #q-prog { font: 13px var(--font-ui); color: #f2e8d2 !important; text-shadow: 0 1px 2px #000; }
#quest #q-prog b { color: #ffd76a; }
#quest .q-where { color: #b8a888 !important; font-size: 11.5px; margin-top: 2px; }

/* ---------- Knöpfe unten rechts ---------- */
#menu-btns { bottom: 16px !important; gap: 6px; }
.hud-btn { height: 34px !important; padding: 0 12px !important; border-radius: 4px !important; border: 0 !important; color: #ffe9a8 !important; font: 700 12.5px var(--ttl) !important; letter-spacing: .03em;
  background: linear-gradient(180deg, #3a2c1a, #160f08) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #8a6a32, 0 0 0 1px #000, 0 3px 8px rgba(0,0,0,.6) !important; backdrop-filter: none !important; }
.hud-btn:hover { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #ffe08a, 0 0 0 1px #000, 0 0 12px rgba(255,210,110,.45) !important; }
.hud-btn kbd { background: rgba(0,0,0,.5) !important; color: #e8c46a; border-radius: 3px; padding: 0 4px; font: 700 10.5px var(--font-ui) !important; margin-left: 4px; }

/* ---------- Chat unten links ---------- */
#chat { bottom: 16px !important; }
#chat-in { border: 0 !important; background: rgba(12,9,6,.92) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #7a5c2a !important; border-radius: 3px !important; }

/* ---------- Fenster: Bronze mit doppelter Goldkante ---------- */
.panel-box, #dialog, #inv, #char { background: linear-gradient(180deg, rgba(38,30,20,.97), rgba(16,12,8,.97)) !important; border: 0 !important; border-radius: 6px !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, inset 0 0 0 4px #1a130b, inset 0 0 0 5px #5a4420, 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.75) !important; }
.panel-box::before, #char::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 6px; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,214,140,.08), transparent 60%),
    linear-gradient(135deg, #e8c46a 0 10px, transparent 10px) top left / 22px 22px no-repeat, linear-gradient(225deg, #e8c46a 0 10px, transparent 10px) top right / 22px 22px no-repeat,
    linear-gradient(45deg, #e8c46a 0 10px, transparent 10px) bottom left / 22px 22px no-repeat, linear-gradient(315deg, #e8c46a 0 10px, transparent 10px) bottom right / 22px 22px no-repeat; opacity: .9; }
.panel-box > *, #char > * { position: relative; z-index: 1; }
.pb-head { padding: 4px 6px 8px !important; margin-bottom: 10px !important; border-bottom: 0 !important; position: relative; }
.pb-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #c9a24a 15%, #fff0b8 50%, #c9a24a 85%, transparent); }
.pb-head b, #dlg-name { font: 700 19px var(--ttl) !important; color: #ffe9a8 !important; letter-spacing: .08em !important; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 12px rgba(232,196,106,.35); }
.pb-head .x, #char .x { width: 26px; height: 26px; border-radius: 4px !important; border: 0 !important; color: #ffd8c0 !important; font-size: 14px !important; cursor: pointer;
  background: linear-gradient(#6a2418, #2a0c06) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #b8543a; }

/* Inventar: Figur auf einem Sockel, eckige Plätze mit Goldkante, Seltenheit als Farbschein */
#inv-hero { background: radial-gradient(ellipse 45% 8% at 50% 92%, rgba(232,196,106,.35), transparent 70%), radial-gradient(ellipse at 50% 38%, rgba(255,226,160,.18), rgba(0,0,0,.45) 72%) !important;
  border-radius: 4px !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4420, inset 0 0 30px rgba(0,0,0,.7); }
.eq, .bag .cell { border-radius: 4px !important; border: 1px solid #000 !important; background: linear-gradient(#1c150d, #0b0805) !important;
  box-shadow: inset 0 0 0 1px #6b5226, inset 0 0 0 2px #120d07, 0 2px 4px rgba(0,0,0,.6) !important; }
.eq[style*="border-color"], .bag .cell[style*="border-color"] { border-width: 1px !important; }
.bag .cell.empty { opacity: .8 !important; background: linear-gradient(#15100a, #090604) !important; box-shadow: inset 0 0 0 1px #3a2c16, 0 1px 2px rgba(0,0,0,.5) !important; }
.eq:hover, .bag .cell:not(.empty):hover { box-shadow: inset 0 0 0 1px #ffe08a, inset 0 0 0 2px #2a1f10, 0 0 12px rgba(255,210,110,.45) !important; }
.eq b { font: 700 11px var(--font-ui) !important; }
#inv .stats { padding: 8px 10px; border-radius: 4px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px #3a2c16; }
#inv .stats div { color: var(--muted); } #inv .stats b { color: #ffe9a8; }
#inv .inv-foot .gold { font: 700 15px var(--ttl); color: #ffd76a; }
#inv .inv-foot .gold::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c0, #e8b43a 45%, #8a5a0a); box-shadow: 0 0 0 1px #5a3a08; }

/* Tooltip: Goldrahmen */
#tip { background: linear-gradient(180deg, rgba(30,23,15,.98), rgba(12,9,6,.98)) !important; border: 0 !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, 0 0 0 1px #000, 0 10px 26px rgba(0,0,0,.7) !important; padding: 10px 12px !important; }

/* Gespräch der Geschichte und Wegweiser im gleichen Stil */
#story { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, inset 0 0 0 4px #1a130b, inset 0 0 0 5px #5a4420, 0 0 0 1px #000, 0 16px 40px rgba(0,0,0,.7) !important; border: 0 !important; }
#story .st-name { font-family: var(--ttl) !important; font-size: 16px !important; }
#guide { border: 0 !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #8a6a32, 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.6) !important; background: linear-gradient(180deg, rgba(44,34,22,.92), rgba(16,12,8,.92)) !important; }
#guide #g-name { font-family: var(--ttl) !important; }

/* Knöpfe in Fenstern */
.btn, .gbtn { font-family: var(--ttl) !important; letter-spacing: .04em; }

/* Banner (Level, Auftrag) mit Cinzel */
#banner .big { font-family: 'Cinzel Decorative', var(--ttl) !important; }
#zone-name { font-family: var(--ttl) !important; font-style: normal !important; letter-spacing: .08em; }

/* Knöpfe unten rechts als Symbol-Kacheln (Taste klein in der Ecke), damit sie neben die Leiste passen */
#menu-btns { right: 14px !important; gap: 5px !important; }
.hud-btn { position: relative; width: 44px !important; height: 44px !important; padding: 0 !important; font-size: 0 !important; color: transparent !important;
  background-repeat: no-repeat !important; background-position: center 45%, 0 0 !important; background-size: 26px 26px, auto !important; }
.hud-btn kbd { position: absolute; right: 2px; bottom: 2px; margin: 0 !important; font-size: 9.5px !important; line-height: 12px; padding: 0 3px !important; }
#btn-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c46a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a2c1a, #160f08) !important; }
#btn-map { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c46a' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a2c1a, #160f08) !important; }
#btn-char { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c46a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4.5 4.5-6.5 8-6.5s6.5 2 8 6.5'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a2c1a, #160f08) !important; }
#btn-inv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c46a' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1.5 13h-15z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a2c1a, #160f08) !important; }
/* Chat über der Leiste links, Hilfe nur im offenen Chat */
#chat { bottom: 132px !important; width: min(380px, 28vw) !important; }
#help { display: none; }
#chat:focus-within #help, #chat.open #help { display: block; }
#fps { bottom: 70px !important; right: 16px !important; }

/* Inventar: Ausrüstungsplätze als Symbol-Kacheln (Name im Tooltip), Figur breiter */
#inv .inv-left { width: 470px !important; }
#inv .doll { grid-template-columns: 78px 1fr 78px !important; gap: 10px !important; }
#inv .doll .eq { height: 74px !important; padding: 6px 2px 4px !important; gap: 3px !important; }
#inv .doll .eq .ic { width: 42px !important; height: 42px !important; }
#inv .doll .eq div b { display: none; }
#inv .doll .eq div, #inv .doll .eq > span:not(.ic):not(.lv) { font: 600 9.5px var(--font-ui); color: #a89878; text-transform: uppercase; letter-spacing: .04em; }
#inv-hero { height: 372px !important; }
#inv .bag .cell .ic { width: 44px !important; height: 44px !important; }
#inv .bag .cell .lv, #inv .eq .lv { font: 700 10px var(--font-ui); color: #ffe9a8; right: 3px; bottom: 1px; }

/* ---------- Heldenauswahl: Held am Lagerfeuer, Karten unten, Knöpfe rechts ---------- */
#select { justify-content: flex-start !important; }
#select .sel-top { position: absolute; top: 26px; left: 0; right: 0; text-align: center; pointer-events: none; }
#select .sel-title { font: 700 30px 'Cinzel Decorative', var(--ttl); color: #ffe9a8; letter-spacing: .12em; text-shadow: 0 2px 0 #000, 0 0 24px rgba(232,196,106,.45); }
#select .sel-server { margin-top: 4px; font: 600 12px var(--font-ui); color: #c8b890; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
#select .sel-server b { color: #ffd76a; }
#select .sel-side { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 280px; padding: 22px 22px 18px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(38,30,20,.94), rgba(14,10,7,.94)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, inset 0 0 0 4px #1a130b, inset 0 0 0 5px #5a4420, 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.7); }
#select .sel-name { font: 700 22px var(--ttl); color: #ffe9a8; text-align: center; text-shadow: 0 1px 2px #000; }
#select .sel-info { font: 13px var(--font-ui); color: #c8b890; text-align: center; margin: 4px 0 14px; }
#select .sel-side .gbtn[hidden] { display: none; }
#select .slots { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; gap: 14px; }
.slot-card { position: relative; width: 190px; height: 92px; padding: 12px 12px 10px 58px; text-align: left; cursor: pointer; border: 0; border-radius: 5px; color: #f2e8d2;
  background: linear-gradient(180deg, rgba(44,34,22,.95), rgba(16,12,8,.95)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #6b5226, 0 0 0 1px #000, 0 8px 20px rgba(0,0,0,.6);
  display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: transform .15s, box-shadow .15s; }
.slot-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #c9a24a, 0 0 0 1px #000, 0 10px 24px rgba(0,0,0,.65), 0 0 16px rgba(232,196,106,.25); }
.slot-card.on { transform: translateY(-6px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #ffe08a, inset 0 0 22px rgba(232,196,106,.18), 0 0 0 1px #000, 0 0 26px rgba(255,210,110,.45); }
.slot-card .sc-lvl, .slot-card .sc-plus { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; line-height: 32px; text-align: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5a4020, #120d08); border: 2px solid #c9a24a; color: #ffe9a8; font: 700 15px var(--ttl); box-shadow: 0 0 0 1px #000; }
.slot-card .sc-plus { font-size: 22px; line-height: 30px; color: #c9a24a; border-style: dashed; background: rgba(0,0,0,.35); }
.slot-card .sc-name { font: 700 15px var(--ttl); color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-card .sc-cls { font: 600 11px var(--font-ui); color: #c8b890; text-transform: uppercase; letter-spacing: .05em; }
.slot-card .sc-gold { font: 600 11px var(--font-ui); color: #ffd76a; }
.slot-card.empty { opacity: .82; } .slot-card.empty .sc-name { color: #c8b890; }
#select .sel-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 12px var(--font-ui); color: #b8a888; text-shadow: 0 1px 2px #000; pointer-events: none; }

/* ---------- Hauptmenü: dunkle Rahmung, Logo mit Glanz, Menü auf Bronzebrett ---------- */
#menu-root .vignette { background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.85) 100%),
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.75)) !important; }
#mainmenu .logo { margin-bottom: 34px !important; filter: drop-shadow(0 6px 18px rgba(0,0,0,.85)); }
#mainmenu .mm { padding: 22px 26px 18px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(34,26,17,.9), rgba(12,9,6,.92)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838, inset 0 0 0 4px #1a130b, inset 0 0 0 5px #5a4420, 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.75); }
#mainmenu .mm-btn { margin: 0 !important; }
#mainmenu .mm-foot { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font: 600 11.5px var(--font-ui) !important; color: #b8a888 !important; letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
#mainmenu .mm-foot::before { content: 'Welt: Königsburg · '; color: #ffd76a; }

/* Zahlen nie in Cinzel (dort sieht „11“ aus wie „II“) */
#me .portrait .lvl, #target .lvl, .orb > span, .slot-card .sc-lvl, #inv .inv-foot .gold, .ch-attr em, .ch-free b { font-family: var(--font-ui) !important; font-weight: 800 !important; }
#me .portrait .lvl { font-size: 13px !important; }

/* ---------- Charakterfenster im gleichen Stil: Reiter als Bronzeplatten, eckige Knöpfe ---------- */
#char { overflow: visible !important; }
#char #ch-body { overflow: auto; }
#char .pb-head { padding: 16px 18px 12px !important; gap: 18px !important; }
#char .pb-head > b { font: 700 19px var(--ttl) !important; }
.ch-tabs { gap: 4px !important; }
.ch-tabs button { border-radius: 4px 4px 0 0 !important; padding: 7px 16px 6px !important; border: 0 !important; color: #c8b890 !important; font: 700 12.5px var(--ttl) !important; letter-spacing: .04em;
  background: linear-gradient(180deg, #2a2014, #120d08) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4420 !important; }
.ch-tabs button:hover { color: #ffe9a8 !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #9a7838 !important; }
.ch-tabs button.on { color: #2a1a06 !important; background: linear-gradient(180deg, #ffe8a8, #d8a840 60%, #a8781e) !important; box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 #fff6d0, 0 0 12px rgba(232,196,106,.35) !important; }
.ch-tabs button i, #ch-badge { top: -9px !important; right: -7px !important; min-width: 19px !important; height: 19px !important; font: 800 11px/19px var(--font-ui) !important; z-index: 3;
  background: radial-gradient(circle at 40% 30%, #ff8a5a, #c8301a) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd0a0, 0 2px 4px rgba(0,0,0,.6) !important; }
.ch-who b { font: 700 21px var(--ttl) !important; color: #ffe9a8 !important; }
.ch-attr, .ch-skill { border-radius: 4px !important; border: 0 !important; background: linear-gradient(180deg, rgba(28,21,13,.9), rgba(12,9,6,.9)) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3a1e !important; }
.ch-attr:hover, .ch-skill:hover { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #8a6a32 !important; }
.ch-attr b, .ch-sinfo b { font: 700 15px var(--ttl) !important; color: #f2e8d2; }
.ch-attr small, .ch-skill small { color: #a89878 !important; opacity: 1 !important; }
.ch-right { border-radius: 4px !important; border: 0 !important; background: linear-gradient(180deg, rgba(28,21,13,.9), rgba(12,9,6,.9)) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3a1e !important; padding: 12px 16px !important; }
.ch-sub { font: 700 14px var(--ttl) !important; color: #e8c46a !important; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid #4a3a1e; }
.ch-stat { border-bottom: 1px solid rgba(232,196,106,.08) !important; } .ch-stat span { color: #c8b890; opacity: 1 !important; } .ch-stat b { color: #ffe9a8; }
#char button[data-cmd] { border-radius: 4px !important; border: 0 !important; min-width: 32px !important; height: 30px !important; color: #ffe9a8 !important; font: 800 17px var(--font-ui) !important;
  background: linear-gradient(180deg, #4a3618, #1e1409) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #b8913e, 0 2px 4px rgba(0,0,0,.6) !important; }
#char button[data-cmd]:not(:disabled):hover { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #ffe08a, 0 0 10px rgba(255,210,110,.5) !important; }
#char .ch-small { border-radius: 4px !important; border: 0 !important; background: linear-gradient(180deg, #2a2014, #120d08) !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4420 !important; color: #e8dcc0 !important; }
.ch-sicon { border-radius: 4px !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #8a6a32; }
.ch-card { border-radius: 6px !important; }
.ch-treewrap { border-radius: 4px !important; border: 0 !important; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a3a1e; }

/* Zeichen über Leuten: goldenes ! = Geschichte/Auftrag, blaues ! = Kopfgeld */
.lb .mk { font: 900 34px Georgia, serif !important; line-height: 1; margin-bottom: 2px; animation: mkBob 1.2s ease-in-out infinite; }
.lb .mk.main { color: #ffd23a !important; text-shadow: 0 0 2px #000, 0 2px 0 #000, 0 0 3px #000, 0 0 14px rgba(255,200,60,.9) !important; }
.lb .mk.rep { color: #6ab8ff !important; text-shadow: 0 0 2px #000, 0 2px 0 #000, 0 0 3px #000, 0 0 14px rgba(90,170,255,.9) !important; }

/* Leiste frei belegen: Ziehen und Ablegen */
#skillbar .slot.dragging { opacity: .45; }
#skillbar .slot.drop { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #8affa0, 0 0 0 1px #000, 0 0 16px rgba(120,255,160,.6) !important; }
.ch-sicon[draggable="true"] { cursor: grab; }
.ch-sicon[draggable="true"]:active { cursor: grabbing; }

/* Stufe im Porträt: Zahl genau mittig */
#me .portrait .lvl { display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; padding: 0 !important; width: 30px; min-width: 30px !important; box-sizing: border-box; font-variant-numeric: tabular-nums; }

/* Schmiedin, Material, Tagesbonus */
#dlg-body .mats, #dlg-body .daily { margin: 4px 0 8px; font-size: 12.5px; color: #e8dcc0; }
#dlg-body .daily b { color: #ffd76a; }
#inv .inv-foot .mats { font: 800 13px var(--font-ui); margin-left: 10px; letter-spacing: .02em; }
/* Bestiarium */
.be-list { display: flex; flex-direction: column; gap: 6px; }
.be-row { display: grid; grid-template-columns: 220px 1fr 70px; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(28,21,13,.9), rgba(12,9,6,.9)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #3a2c16; }
.be-row.none { opacity: .55; }
.be-name b { font: 700 14px var(--ttl); color: #f2e8d2; } .be-name small { display: block; color: #a89878; font-size: 11px; }
.be-bar { position: relative; height: 16px; border-radius: 3px; background: #0a0706; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #4a3a1e; overflow: hidden; }
.be-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#fff2b8, #e8b43a 50%, #9a6a12); }
.be-bar span { position: absolute; inset: 0; text-align: center; font: 700 10.5px/16px var(--font-ui); color: #fff; text-shadow: 0 1px 2px #000; }
.be-tiers { font-size: 17px; color: #6a5a3a; letter-spacing: 2px; text-align: right; } .be-tiers .on { color: #ffd76a; text-shadow: 0 0 6px rgba(255,200,80,.7); }
#inv .inv-foot .mats, #inv .inv-foot #bag-count { white-space: nowrap; } #inv .inv-foot .mats span + span { margin-left: 6px; }
/* Weltkarte: Legende klein in der Kopfzeile (nicht in Titelschrift) */
#worldmap .wm-hint { font: 500 12px var(--font-ui); color: #d8ccb0; opacity: .9; }
#worldmap .wm-hint i { font: 700 12px var(--font-ui); font-style: normal; text-shadow: 0 1px 0 #000; }
/* Alchemie-Fenster (links neben dem Inventar) */
#alch { position: fixed; left: 16px; top: 80px; width: min(440px, 40vw); max-height: calc(100vh - 190px); overflow: auto; z-index: 31; padding: 12px 16px 16px; }
#alch .al-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
#alch .al-tabs button { flex: 1; padding: 7px 0; font: 700 13px var(--font-ui); color: #d8ccb0; background: linear-gradient(#2a2016, #16100a); border: 1px solid #4a3a1e; border-radius: 4px; cursor: pointer; }
#alch .al-tabs button.on { color: #1a1006; background: linear-gradient(#ffe9a8, #c9a24a); border-color: #ffe9a8; }
#alch .al-item { display: flex; gap: 14px; align-items: center; padding: 10px; margin-bottom: 10px; background: rgba(0,0,0,.35); border-radius: 6px; box-shadow: inset 0 0 0 1px #3a2c16; }
#alch .al-item b { font: 700 16px var(--ttl); display: block; } #alch .al-item small { display: block; color: #a89878; font-size: 12px; margin-top: 2px; }
#alch .al-slot { position: relative; width: 64px; height: 64px; flex: none; border: 2px solid; border-radius: 6px; background: #0c0906; padding: 8px; box-sizing: border-box; }
#alch .al-slot svg { width: 100%; height: 100%; }
.pl { position: absolute; right: 3px; top: 1px; font: 800 12px var(--font-ui); color: #fff1b0; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#alch .al-row { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid rgba(201,162,74,.15); color: #d8ccb0; font-size: 13px; }
#alch .al-row i, #alch .al-opt i, #alch .al-stone i { color: #a89878; font-style: normal; }
#alch .al-opt { display: block; margin: 8px 2px 0; color: #d8ccb0; font-size: 13px; cursor: pointer; }
#alch .al-chance { display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px; color: #d8ccb0; font-size: 13px; }
#alch .al-chance b { color: #fff1b0; font-size: 18px; }
#alch .al-cbar { flex: 1; height: 12px; border-radius: 6px; background: #0a0706; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #4a3a1e; overflow: hidden; }
#alch .al-cbar i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a12, #ffd76a); }
#alch .al-risk { font-size: 12px; color: #a8c890; margin: 2px 2px 12px; } #alch .al-risk.bad { color: #ff8a7a; }
#alch .al-go { width: 100%; padding: 10px 0; font-size: 15px; }
#alch .al-bar { position: relative; height: 22px; margin-top: 12px; border-radius: 4px; background: #0a0706; box-shadow: inset 0 0 0 1px #6a5228; overflow: hidden; }
#alch .al-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #4a2a8a, #b88aff, #fff1b0); }
#alch .al-bar span { position: absolute; inset: 0; text-align: center; font: 700 12px/22px var(--font-ui); color: #fff; text-shadow: 0 1px 2px #000; }
#alch .al-res { margin-top: 12px; padding: 10px; border-radius: 5px; font: 700 14px var(--font-ui); text-align: center; }
#alch .al-res.ok { color: #b8ffb0; background: rgba(40,90,30,.35); box-shadow: inset 0 0 0 1px #4a8a3a; }
#alch .al-res.bad { color: #ffb0a0; background: rgba(110,30,20,.35); box-shadow: inset 0 0 0 1px #8a3a2a; }
#alch .al-empty { color: #a89878; font-size: 13px; padding: 18px 6px; text-align: center; }
#alch .al-stones { display: flex; flex-direction: column; gap: 6px; }
#alch .al-stone { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: rgba(0,0,0,.3); border-radius: 5px; font-size: 13px; color: #d8ccb0; }
#alch .al-stone > div { flex: 1; } #alch .al-stone small { display: block; color: #a89878; font-size: 11.5px; }
#alch .al-stone .gem { width: 16px; height: 16px; transform: rotate(45deg); border-radius: 3px; box-shadow: 0 0 8px currentColor, inset 0 0 0 1px rgba(0,0,0,.5); flex: none; }
#inv .inv-foot #open-alch { margin-left: 6px; }
#inv .bag .cell { position: relative; }
/* Leuchten ab +3 / +6 / +9 (Inventar, Ausrüstung, Alchemie) */
.glow1 { animation: glow1 2.4s ease-in-out infinite; } .glow2 { animation: glow2 2s ease-in-out infinite; } .glow3 { animation: glow3 1.6s ease-in-out infinite; }
@keyframes glow1 { 50% { box-shadow: 0 0 8px 1px rgba(168,228,255,.65), inset 0 0 10px rgba(168,228,255,.45); } }
@keyframes glow2 { 50% { box-shadow: 0 0 12px 2px rgba(138,122,255,.8), inset 0 0 14px rgba(138,122,255,.55); } }
@keyframes glow3 { 50% { box-shadow: 0 0 16px 4px rgba(255,180,58,.9), inset 0 0 18px rgba(255,140,40,.6); } }
#alch .al-wornrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; color: #a89878; }
#alch .al-worn { position: relative; width: 38px; height: 38px; border: 2px solid; border-radius: 5px; background: #0c0906; padding: 4px; box-sizing: border-box; cursor: pointer; opacity: .8; }
#alch .al-worn svg { width: 100%; height: 100%; } #alch .al-worn.on { opacity: 1; outline: 2px solid #ffe9a8; outline-offset: 1px; } #alch .al-worn:hover { opacity: 1; }
#alch .al-worn .pl { font-size: 10px; }

/* Material-Reihe im Inventar */
#inv .matbag { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; min-height: 44px; align-items: center; }
#inv .matbag .cell { width: 44px; height: 44px; position: relative; display: flex; align-items: center; justify-content: center; cursor: default; flex: none;
  border-radius: 4px; border: 1px solid #6a5228; background: linear-gradient(#1c150d, #0b0805); box-shadow: inset 0 0 0 1px rgba(255,220,150,.06); }
#inv .matbag .cell .ic { width: 32px; height: 32px; display: block; } #inv .matbag .cell .ic svg { width: 100%; height: 100%; }
#inv .matbag .cell .lv { position: absolute; right: 3px; bottom: 1px; font: 800 11px var(--font-ui); color: #fff1b0; text-shadow: 0 1px 2px #000, 0 0 3px #000; line-height: 1; }
#inv .matbag .none { font-size: 12px; color: #a89878; padding: 0 4px; }

/* Ereignisse: Schattensteine und Uniques (unter dem Auftrag, anklickbar) */
#events { margin-top: 8px; padding: 6px 8px; pointer-events: auto; text-align: left; }
#events .q-title { font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffb35a; margin-bottom: 4px; }
#events .ev { display: flex; gap: 8px; align-items: center; padding: 5px 6px; margin: 2px 0; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,180,90,.25); animation: evPulse 1.6s ease-in-out infinite; }
#events .ev:hover { background: rgba(60,30,10,.6); }
#events .ev i { font-style: normal; font-size: 18px; width: 20px; text-align: center; }
#events .ev b { display: block; font: 700 13px var(--font-ui); color: #fff0c8; } #events .ev small { display: block; font-size: 11px; color: #d8c8a8; }
#events .ev.stone i { color: #c88aff; } #events .ev.uniq i { color: #ff9a3a; }
@keyframes evPulse { 50% { box-shadow: inset 0 0 0 1px rgba(255,180,90,.7), 0 0 10px rgba(255,150,60,.35); } }
/* großes Ereignis-Banner */
#banner .big.evt { color: #ffb35a; font-size: 46px; text-shadow: 0 3px 0 #000, 0 0 28px rgba(255,120,40,.85), 0 0 60px rgba(200,90,255,.45); }
#banner.pop.evtpop { animation: bannerPop 4.6s ease forwards; }
#inv .inv-foot .gold { white-space: nowrap; flex: none; }

/* Ziehen und Ablegen: passende Felder leuchten */
#inv .eq.drop-ok { outline: 2px dashed #ffd76a; outline-offset: -3px; box-shadow: 0 0 14px rgba(255,200,90,.55) !important; }
/* Optionen-Knopf (Zahnrad) */
#btn-opt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c46a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a2c1a, #160f08) !important; }
/* kleine Fenster: Knöpfe über die Kugel heben, damit nichts verdeckt ist */
@media (max-width: 1360px) { #menu-btns { bottom: 128px !important; } }

/* ---------- Gegenstände: Seltenheit leuchtet im Kästchen, Symbol mit Schatten, Glanz bei Magisch und besser ---------- */
#inv .bag .cell[style*="--rc"], #inv .eq[style*="--rc"], #alch .al-worn, .shopgrid .cell[style*="--rc"] {
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 34%, transparent) 0%, transparent 68%), linear-gradient(180deg, #241a10, #0b0805) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 70%, #000), inset 0 0 14px color-mix(in srgb, var(--rc) 45%, transparent), 0 2px 4px rgba(0,0,0,.6) !important; overflow: hidden; }
#inv .bag .cell .ic svg, #inv .eq .ic svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)) drop-shadow(0 0 4px color-mix(in srgb, var(--rc, #000) 55%, transparent)); transition: transform .12s; }
#inv .bag .cell:not(.empty):hover .ic svg { transform: scale(1.12) rotate(-4deg); }
/* Glanz, der über seltene Gegenstände streicht (nicht bei Normal: dort ist --rc grau) */
#inv .bag .cell[style*="--rc"]:not([style*="--rc:#b8b8b8"])::after, #inv .eq[style*="--rc"]:not([style*="--rc:#b8b8b8"])::after {
  content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-60%); animation: itemShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes itemShine { 0%, 70% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
#inv .bag .cell .lv { background: rgba(0,0,0,.6); border-radius: 3px; padding: 0 3px; right: 2px !important; bottom: 2px !important; }
#inv .bag .cell .pl { position: absolute; left: 2px; top: 1px; font: 800 11px var(--font-ui); color: #ffe27a; text-shadow: 0 1px 2px #000, 0 0 6px rgba(255,200,80,.8); }
/* Tooltip: Name groß in Seltenheitsfarbe, goldene Trennlinie, dunkler Grund mit Rahmen */
#tip { box-shadow: 0 0 0 1px #6a5228, 0 0 0 3px #120c06, 0 0 0 4px #8a6a34, 0 10px 28px rgba(0,0,0,.75) !important; padding: 10px 12px !important; min-width: 190px; }
#tip .t { font: 700 15px var(--ttl, serif) !important; letter-spacing: .02em; text-shadow: 0 0 10px currentColor, 0 1px 2px #000; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, #c9a14a, transparent) 1; }
#tip .r { text-transform: uppercase; letter-spacing: .12em; font-size: 10px !important; opacity: .85; }
/* Seltenheit deutlicher: kräftiger Rand und Leuchten (Normal bleibt schlicht) */
#inv .bag .cell[style*="--rc"]:not([style*="--rc:#b8b8b8"]), #inv .eq[style*="--rc"]:not([style*="--rc:#b8b8b8"]) {
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 55%, transparent) 0%, color-mix(in srgb, var(--rc) 14%, transparent) 55%, transparent 80%), linear-gradient(180deg, #241a10, #0b0805) !important;
  box-shadow: inset 0 0 0 2px var(--rc), inset 0 0 0 3px #0b0805, inset 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 8px color-mix(in srgb, var(--rc) 45%, transparent) !important; }

/* Ziehbild beim Verschieben im Inventar: nur das Symbol im Seltenheitsrahmen */
.drag-ghost { position: fixed; left: -200px; top: -200px; width: 56px; height: 56px; padding: 6px; box-sizing: border-box; border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 75%), #160f08; box-shadow: inset 0 0 0 2px var(--rc); }
.drag-ghost svg { width: 100%; height: 100%; }

/* Siegel (Stern, Mond, Sonne): Lichtrand läuft ums Feld, Feld pulsiert in der Siegelfarbe, Symbol funkelt – sofort erkennbar */
@property --sa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.seal { position: relative; isolation: isolate; animation: sealPulse 1.8s ease-in-out infinite; }
.seal::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  padding: 3px; background: conic-gradient(from var(--sa), transparent 0 50%, color-mix(in srgb, var(--rc) 60%, transparent) 64%, #fff 74%, var(--rc) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sealRun 1.8s linear infinite; }
.seal .ic svg { animation: sealTwinkle 1.8s ease-in-out infinite; }
@keyframes sealRun { to { --sa: 360deg; } }
@keyframes sealPulse { 0%, 100% { filter: drop-shadow(0 0 3px var(--rc)); } 50% { filter: drop-shadow(0 0 9px var(--rc)) drop-shadow(0 0 3px #fff) brightness(1.15); } }
@keyframes sealTwinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(3deg); } }
/* Siegel am Boden: Name groß, leuchtend, pulsierend */
.lb.seal, .bag.seal { font-size: 14px !important; font-weight: 800; letter-spacing: .03em; animation: sealLabel 1.4s ease-in-out infinite; }
@keyframes sealLabel { 50% { text-shadow: 0 0 6px var(--rc), 0 0 14px var(--rc), 0 1px 2px #000; transform: translateY(-2px); } }
#inv .bag .cell .sl { position: absolute; right: 3px; top: 1px; font: 900 13px/1 var(--font-ui); color: var(--rc); text-shadow: 0 0 4px var(--rc), 0 1px 2px #000; z-index: 4; animation: sealTwinkle 1.8s ease-in-out infinite; }

/* ---- Oberfläche aufgewertet: Charakterrahmen mit Goldrand und Zierecken, glänzende Balken, Skill-Leiste mit Glanz ---- */
@property --pr { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
#me .portrait::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--pr), transparent 0 20%, rgba(255,236,170,.95) 25%, transparent 32% 70%, rgba(255,214,120,.7) 75%, transparent 82%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px) 50%, transparent calc(50% + 1px)); mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px) 50%, transparent calc(50% + 1px));
  animation: portraitRun 7s linear infinite; }
@keyframes portraitRun { to { --pr: 360deg; } }
#me .portrait .lvl { z-index: 3; }
#me .me-info { position: relative; background: linear-gradient(180deg, rgba(52,40,24,.96), rgba(18,13,8,.96) 60%, rgba(30,22,12,.96)) !important; }
#me .me-info::before, #target::before { content: ''; position: absolute; left: 18px; right: 10px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffe08a 20%, #fff4c8 50%, #ffe08a 80%, transparent); opacity: .7; }
#me .me-info::after, #target::after { content: '❖'; position: absolute; right: 6px; bottom: 2px; font-size: 9px; color: #c9a24a; opacity: .7; pointer-events: none; }
#target { position: absolute; }
/* Lebensbalken: wandernder Glanz; Erfahrung: Zehnerteilung */
.bar.hp i { overflow: hidden; }
.bar.hp i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: barSheen 3.2s ease-in-out infinite; }
@keyframes barSheen { 0%, 55% { left: -40%; } 100% { left: 110%; } }
#me .bar.xp { position: relative; }
#me .bar.xp::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.7) calc(10% - 1px) 10%); }
/* Skill-Leiste: Glanz oben, bereit = kurzes Aufblitzen, Mausdrüber = leicht anheben */
#skillbar .slot:not(.empty) .icon::before { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255,255,255,.22), transparent); pointer-events: none; z-index: 1; }
#skillbar .slot:not(.empty):not(.cooling) .icon::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -50%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,240,200,.35), transparent); animation: slotSheen 6s ease-in-out infinite; }
@keyframes slotSheen { 0%, 88% { left: -50%; } 100% { left: 120%; } }
#skillbar .slot .icon { position: absolute; }
#skillbar .slot { transition: transform .1s; }
#skillbar .slot:not(.empty):hover { transform: translateY(-2px); }

/* ---- Inventar neu: Gold im Kopf, Ausrüstung als Bühne mit Sockeln, Werte als Plaketten, Tasche mit Kopfzeile ---- */
#inv .pb-head { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(255,214,120,.1), transparent); }
#inv .pb-head .gold { margin-left: auto; margin-right: 10px; font: 800 16px var(--font-ui) !important; color: #ffd76a; padding: 3px 14px 3px 10px; border-radius: 999px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px #6a5228; }
#inv .pb-head .gold::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #f0b83a 45%, #8a5a10); box-shadow: 0 0 8px rgba(255,200,80,.7); }
#inv .inv-left { position: relative; }
#inv .doll { position: relative; padding: 30px 12px 12px; border-radius: 10px;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(120,90,200,.16), transparent 70%), radial-gradient(ellipse at 50% 100%, rgba(255,200,110,.12), transparent 60%), linear-gradient(180deg, #19130c, #0b0805);
  box-shadow: inset 0 0 0 1px #3a2c16, inset 0 0 40px rgba(0,0,0,.8); }
#inv .doll::before, #inv .doll::after { content: '❖'; position: absolute; top: 6px; color: #8a6a34; font-size: 11px; }
#inv .doll::before { left: 10px; } #inv .doll::after { right: 10px; }
#inv .doll-title { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font: 700 12px var(--ttl, serif); letter-spacing: .25em; text-transform: uppercase; color: #c9a24a; }
#inv-hero { background: radial-gradient(ellipse 40% 7% at 50% 93%, rgba(255,210,120,.45), transparent 75%), radial-gradient(ellipse 50% 45% at 50% 40%, rgba(255,226,160,.14), transparent 75%) !important; box-shadow: none !important; }
/* Sockel: dunkle Vertiefung mit Goldkante, leer = blasses Umrissbild */
#inv .doll .eq { width: 74px; border-radius: 8px !important; background: radial-gradient(circle at 50% 40%, #2a2014, #0d0905 75%) !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4420, inset 0 4px 10px rgba(0,0,0,.8), 0 1px 0 rgba(255,220,150,.08) !important; }
#inv .doll .eq .ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc, #000) 50%, transparent)); }
#inv .doll .eq:not([style*="--rc"]) .ic { opacity: .3 !important; }
#inv .doll .eq .lv { position: absolute; right: 3px; top: 3px; bottom: auto !important; background: rgba(0,0,0,.6); border-radius: 3px; padding: 0 3px; }
#inv .doll .eq:hover { transform: translateY(-1px); }
/* Werte unter der Figur: Plaketten mit Zeichen */
#inv .stats { display: flex !important; gap: 6px; flex-wrap: wrap; align-items: stretch; padding: 8px !important; }
#inv .stats .st-cls { flex: 1 0 100%; font: 700 13px var(--ttl, serif); color: #ffe9a8; letter-spacing: .06em; text-align: center; padding-bottom: 4px; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, #8a6a34, transparent) 1; }
#inv .stats .st-chip { flex: 1; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 5px 7px; border-radius: 7px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,214,120,.12); }
#inv .stats .st-chip span { grid-row: span 2; color: #e8c06a; font-size: 14px; text-align: center; }
#inv .stats .st-chip b { font: 800 14px var(--font-ui); color: #fff !important; } #inv .stats .st-chip small { font-size: 10px; color: var(--muted); }
/* Tasche und Material: Kopfzeilen */
#inv .inv-right { display: flex; flex-direction: column; }
#inv .inv-sec { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; padding-bottom: 5px; border-bottom: 1px solid; border-image: linear-gradient(90deg, #8a6a34, transparent) 1; }
#inv .inv-sec b { font: 700 13px var(--ttl, serif); letter-spacing: .18em; text-transform: uppercase; color: #c9a24a; }
#inv .inv-sec #bag-count { font: 700 12px var(--font-ui); color: var(--muted); }
#inv .inv-sec #sort-inv { margin-left: auto; }
#inv .inv-help { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px #6a5228; font: 800 12px var(--font-ui); color: #e8c06a; cursor: help; }
#inv .inv-sec + .matbag { margin-top: 0; }
#inv .inv-foot { justify-content: flex-end; margin-top: auto; padding-top: 8px; }
#inv .inv-foot #open-alch { font-size: 13px; padding: 6px 16px; }
/* Taschenfelder: eingelassen, leere mit feinem Rautenmuster, Mausdrüber hebt an */
#inv .bag .cell.empty { background: repeating-linear-gradient(45deg, rgba(255,214,120,.025) 0 6px, transparent 6px 12px), linear-gradient(#15100a, #090604) !important; }
#inv .bag .cell:not(.empty) { transition: transform .1s; cursor: pointer; }
#inv .bag .cell:not(.empty):hover { transform: translateY(-2px); z-index: 2; }

/* Siegel außer Sicht: leuchtender Pfeil am Bildrand mit Entfernung */
.seal-edge { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 5; animation: sealEdge 1s ease-in-out infinite; }
.seal-edge i { font-style: normal; font-size: 26px; color: var(--rc); text-shadow: 0 0 8px var(--rc), 0 0 16px var(--rc), 0 1px 2px #000; display: block; }
.seal-edge b { font: 800 11px var(--font-ui); color: #fff; text-shadow: 0 0 6px var(--rc), 0 1px 2px #000; white-space: nowrap; }
@keyframes sealEdge { 50% { filter: brightness(1.6); } }
/* sechs Plätze je Seite (Ohrringe, Halskette, zwei Ringe): etwas flachere Sockel */
#inv .doll .eq { height: 60px !important; padding: 4px 2px 3px !important; }
#inv .doll .eq .ic { width: 34px !important; height: 34px !important; }
#inv .doll .eq div, #inv .doll .eq > span:not(.ic):not(.lv) { font-size: 8.5px !important; }
#inv .doll-col { gap: 6px !important; }
/* Name über Beute am Boden: nicht das Taschen-Raster des Inventars erben (sonst sitzt der Name weit links neben dem Gegenstand) */
.lb .bag { display: block !important; width: auto !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; white-space: nowrap; text-align: center; }

/* Verstärkung im Inventar sichtbar: Leuchten über filter (box-shadow ist dort fest überschrieben) und farbiger Innenschein */
#inv .glow1, #inv .glow2, #inv .glow3, #alch .glow1, #alch .glow2, #alch .glow3 { position: relative; }
#inv .glow1 { animation: glowF1 2.4s ease-in-out infinite !important; } #inv .glow2 { animation: glowF2 2s ease-in-out infinite !important; } #inv .glow3 { animation: glowF3 1.6s ease-in-out infinite !important; }
@keyframes glowF1 { 0%, 100% { filter: drop-shadow(0 0 2px #a8e4ff); } 50% { filter: drop-shadow(0 0 7px #a8e4ff) brightness(1.15); } }
@keyframes glowF2 { 0%, 100% { filter: drop-shadow(0 0 3px #8a7aff); } 50% { filter: drop-shadow(0 0 10px #8a7aff) drop-shadow(0 0 3px #c8b8ff) brightness(1.2); } }
@keyframes glowF3 { 0%, 100% { filter: drop-shadow(0 0 4px #ffb43a); } 50% { filter: drop-shadow(0 0 13px #ffb43a) drop-shadow(0 0 4px #fff0c0) brightness(1.25); } }
#inv .glow1 .ic svg { filter: drop-shadow(0 0 4px #a8e4ff) !important; } #inv .glow2 .ic svg { filter: drop-shadow(0 0 5px #8a7aff) !important; } #inv .glow3 .ic svg { filter: drop-shadow(0 0 6px #ffb43a) !important; }
#inv .seal.glow1, #inv .seal.glow2, #inv .seal.glow3 { animation: sealPulse 1.8s ease-in-out infinite !important; }

/* Siegel-Zeichen im Inventar: groß, golden, leuchtend – oben links am Feld (Tasche und angelegt) */
#inv .bag .cell .sl, #inv .eq .sl { position: absolute; left: -3px; top: -5px; right: auto; z-index: 5; font: 900 20px/1 Georgia, serif; color: #ffd76a;
  text-shadow: 0 0 6px #ffb43a, 0 0 12px #ffb43a, 0 1px 2px #000, 0 0 2px #000; animation: sealBadge 1.6s ease-in-out infinite; pointer-events: none; }
#inv .eq { position: relative; }
@keyframes sealBadge { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(-8deg); } }
#inv .bag .cell .pl { left: auto; right: 3px; }
/* Siegel-Zeichen: innerhalb des Feldes (Felder schneiden Überstehendes ab), auch auf den Ausrüstungsplätzen groß und golden */
#inv .bag .cell .sl, #inv .eq .sl, #inv .doll .eq > span.sl { left: 2px !important; top: 1px !important; right: auto !important; bottom: auto !important; position: absolute !important;
  font: 900 21px/1 Georgia, serif !important; color: #ffd76a !important; text-transform: none !important; letter-spacing: 0 !important; }
#inv .doll .eq > span.sl:not(.ic):not(.lv) { font-size: 21px !important; font-weight: 900 !important; color: #ffd76a !important; line-height: 1 !important; }

/* ---- Alchemie größer und übersichtlicher (war winzig und anstrengend) ---- */
#alch { width: min(640px, 46vw) !important; top: 64px !important; left: 20px !important; max-height: calc(100vh - 170px) !important; padding: 16px 22px 22px !important; font-size: 15px; }
#alch .pb-head b { font-size: 22px !important; letter-spacing: .08em; }
#alch .al-tabs { gap: 10px; margin-bottom: 16px; }
#alch .al-tabs button { padding: 11px 0; font-size: 16px; border-radius: 6px; }
#alch .al-wornrow { gap: 8px; margin-bottom: 16px; font-size: 14px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px #3a2c16; }
#alch .al-wornrow > span { flex-basis: 100%; font: 700 12px var(--ttl, serif); letter-spacing: .18em; text-transform: uppercase; color: #c9a24a; }
#alch .al-worn { width: 58px; height: 58px; padding: 6px; border-radius: 8px; opacity: .85; transition: transform .1s; }
#alch .al-worn:hover { transform: translateY(-2px); }
#alch .al-worn.on { outline: 3px solid #ffe9a8; outline-offset: 2px; box-shadow: 0 0 16px rgba(255,220,130,.6) !important; }
#alch .al-worn .pl { font-size: 13px !important; }
#alch .al-item { gap: 18px; padding: 16px; margin-bottom: 14px; border-radius: 10px; background: radial-gradient(ellipse at 20% 50%, rgba(255,214,120,.1), rgba(0,0,0,.35) 70%); }
#alch .al-slot { width: 104px; height: 104px; padding: 12px; border-width: 3px; border-radius: 10px; }
#alch .al-slot .pl { font-size: 18px !important; }
#alch .al-item b { font-size: 21px; } #alch .al-item small { font-size: 14px; margin-top: 4px; }
#alch .al-row { padding: 9px 4px; font-size: 16px; } #alch .al-row b { font-size: 17px; }
#alch .al-opt { margin: 12px 4px 0; font-size: 15px; } #alch .al-opt input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
#alch .al-chance { margin: 18px 4px 6px; font-size: 15px; } #alch .al-chance b { font-size: 26px; } #alch .al-cbar { height: 16px; border-radius: 8px; }
#alch .al-risk { font-size: 14px; margin: 4px 4px 16px; }
#alch .al-go { padding: 15px 0; font-size: 18px; letter-spacing: .06em; }
#alch .al-bar { height: 30px; } #alch .al-bar span { font-size: 14px; line-height: 30px; }
#alch .al-res { font-size: 17px; padding: 14px; }
#alch .al-empty { font-size: 15px; padding: 26px 10px; }
#alch .al-stone { padding: 11px 12px; font-size: 15px; gap: 14px; } #alch .al-stone small { font-size: 13px; } #alch .al-stone .gem { width: 22px; height: 22px; }
#alch .al-stone button { font-size: 14px; padding: 8px 14px; }

/* ---- Leiste unten aufgeräumt: keine dunklen Sicheln an den Kugeln, schlichter Glanz, Farben wie das Inventar ---- */
.orb::before { display: none !important; }
.orb { box-shadow: 0 0 0 2px #000, 0 0 0 4px #d8b04a, 0 0 0 5px #6a5228, 0 0 0 7px #120c06, 0 0 0 8px #8a6a34, 0 8px 22px rgba(0,0,0,.7) !important; }
.orb-glass { background: radial-gradient(ellipse 38% 26% at 36% 24%, rgba(255,255,255,.42), rgba(255,255,255,0) 100%) !important;
  box-shadow: inset 0 -14px 24px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.6) !important; }
.orb-in i::before { opacity: .45 !important; height: 8px !important; top: -4px !important; }
.orb.xp .orb-in i::before { opacity: .3 !important; }
#hudbar .hb-mid { background: linear-gradient(180deg, rgba(42,33,22,.97), rgba(18,13,8,.97)) !important;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a5228, 0 0 0 3px #120c06, 0 6px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,160,.14) !important; }
#hudbar .hb-mid::after { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #d8b04a 20%, #fff0b8 50%, #d8b04a 80%, transparent); opacity: .6; }

/* Buffs unter dem Charakterrahmen */
#buffs { position: absolute; left: 112px; top: 74px; display: flex; gap: 6px; z-index: 5; pointer-events: auto; }
#buffs .buff { position: relative; width: 34px; height: 34px; border-radius: 6px; background: #120c06; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bc), 0 0 10px color-mix(in srgb, var(--bc) 60%, transparent); overflow: hidden; }
#buffs .buff .bi { position: absolute; inset: 2px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; font-size: 18px; color: var(--bc); }
#buffs .buff .bi svg { width: 100%; height: 100%; }
#buffs .buff i { position: absolute; left: 0; right: 0; bottom: 0; font: 800 10px/12px var(--font-ui); font-style: normal; text-align: center; color: #fff; background: rgba(0,0,0,.65); }
#buffs .buff.end { animation: buffEnd .5s ease-in-out infinite; }
@keyframes buffEnd { 50% { opacity: .45; } }