/* ---- Charakterfenster (Werte, Fähigkeiten, Talente, Klasse) ---- */
#char { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(980px, 94vw); height: min(640px, 86vh); display: flex; flex-direction: column; z-index: 40; padding: 0 !important; overflow: hidden; color: var(--ink); font: 13px var(--font-ui); pointer-events: auto; }
#char[hidden] { display: none; }
#char.full { left: 1.5vw; top: 1.5vh; width: 97vw; height: 97vh; transform: none; z-index: 60; }   /* Talentbaum im Vollbild */
#char.full .ch-treewrap { height: calc(100% - 46px); }
#char .pb-head { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--glass-line); }
#char .pb-head > b { font-size: 18px; }
#char .x { margin-left: auto; background: none; border: 0; color: var(--ink); font-size: 18px; cursor: pointer; }
.ch-tabs { display: flex; gap: 6px; }
.ch-tabs button { position: relative; background: rgba(255,255,255,.06); border: 1px solid var(--glass-line); color: var(--ink); border-radius: 999px; padding: 5px 14px; font: 600 13px var(--font-ui); cursor: pointer; }
.ch-tabs button.on { background: linear-gradient(#f8e3a8, #d8b25a); color: #2a1c08; border-color: #fff3c8; }
.ch-tabs button i, #ch-badge { position: absolute; top: -7px; right: -6px; min-width: 18px; height: 18px; border-radius: 999px; background: #ff6a3a; color: #fff; font: 800 11px/18px var(--font-ui); font-style: normal; text-align: center; padding: 0 4px; box-shadow: 0 0 10px rgba(255,106,58,.7); }
.ch-tabs button i:empty, .ch-tabs button i[hidden], #ch-badge[hidden] { display: none; }
#btn-char { position: relative; }
#ch-body { flex: 1; overflow: auto; padding: 14px 18px; }
.ch-cols { display: flex; gap: 22px; }
.ch-left { flex: 1.2; }
.ch-right { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 14px; }
.ch-who { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ch-who b { font: 700 20px "Cinzel", serif; color: var(--accent); }
.ch-who span { opacity: .75; }
.ch-free { margin: 4px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-free b { color: var(--accent); font-size: 16px; }
.ch-free small { opacity: .65; }
.ch-attr { display: grid; grid-template-columns: 12px 1fr 44px 34px; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); border-radius: 10px; }
.ch-attr b { font-size: 15px; }
.ch-attr em { font: 800 18px var(--font-ui); font-style: normal; text-align: right; }
.ch-attr small { grid-column: 2 / 5; opacity: .7; font-size: 11.5px; }
.ch-dot { width: 12px; height: 12px; border-radius: 50%; }
#char button[data-cmd] { cursor: pointer; border-radius: 999px; border: 1px solid #fff3c8; background: linear-gradient(#f8e3a8, #d8b25a); color: #2a1c08; font: 800 16px var(--font-ui); min-width: 30px; height: 30px; }
#char button[data-cmd]:disabled { opacity: .3; cursor: default; filter: grayscale(1); }
#char .ch-small { font: 600 12px var(--font-ui) !important; height: 26px !important; padding: 0 12px; background: rgba(255,255,255,.08) !important; color: var(--ink) !important; border-color: var(--glass-line) !important; }
.ch-sub { font: 700 14px "Cinzel", serif; color: var(--accent); margin: 4px 0 8px; }
.ch-stat { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.ch-stat span { opacity: .8; }
.ch-skill { display: flex; gap: 14px; align-items: center; padding: 12px; margin-bottom: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); border-radius: 12px; }
.ch-skill.locked { opacity: .5; }
.ch-skill small { display: block; opacity: .75; margin-top: 2px; }
.ch-skill small.m { opacity: .55; }
.ch-sicon { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 24px; background: rgba(0,0,0,.3); }
.ch-sicon .icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 26px; }
.ch-sicon svg { width: 100%; height: 100%; }
.ch-sicon > i { position: absolute; right: 3px; bottom: 2px; font: 800 11px var(--font-ui); font-style: normal; text-shadow: 0 1px 2px #000; }
.ch-sinfo { flex: 1; }
.ch-sinfo b { font-size: 15px; }
.ch-sinfo em { color: var(--accent); font-style: normal; margin-left: 6px; }
.ch-rank { display: flex; gap: 3px; margin-top: 6px; }
.ch-rank i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.ch-rank i.on { background: linear-gradient(90deg, #ffe08a, #f0a83a); box-shadow: 0 0 6px rgba(255,200,90,.6); }
.ch-path { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ch-chip { border: 2px solid var(--accent); border-radius: 999px; padding: 4px 14px; font: 700 14px "Cinzel", serif; }
.ch-cards { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ch-card { flex: 1; min-width: 190px; border: 2px solid var(--c); border-radius: 14px; padding: 12px 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(0,0,0,.2)); }
.ch-card b { font: 700 18px "Cinzel", serif; color: var(--c); }
.ch-card p { opacity: .85; margin: 6px 0; }
.ch-card ul { margin: 6px 0 10px; padding-left: 18px; color: #c8f0b8; }
.ch-card .ch-cskill { margin-bottom: 10px; }
#char .ch-card button { width: 100%; font-size: 14px; }
#char .ch-card button.armed { background: linear-gradient(#ffb49a, #e8542a); color: #fff; }
.ch-ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ch-way { border-left: 3px solid var(--c); padding: 4px 10px; font-size: 12px; opacity: .85; }
.ch-way b { color: var(--c); font-size: 14px; }
.ch-treewrap { position: relative; height: calc(100% - 46px); min-height: 380px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(60,70,110,.35), rgba(8,10,18,.6)); border: 1px solid var(--glass-line); }
#ch-tree { width: 100%; height: 100%; cursor: grab; user-select: none; }
#ch-tree line { stroke: rgba(255,255,255,.16); stroke-width: 4; }
#ch-tree line.near { stroke: rgba(255,255,255,.28); }
#ch-tree line.on { stroke: #f3d58a; stroke-width: 7; }
#ch-tree text { fill: rgba(255,255,255,.75); font: 700 20px var(--font-ui); pointer-events: none; }
#ch-tree .tn { cursor: pointer; }
#ch-tree .tn circle { fill: #1c2030; stroke: rgba(255,255,255,.3); stroke-width: 2.5; }
#ch-tree .tn .halo { fill: none; stroke: none; }
#ch-tree .tn.can circle:not(.halo) { stroke: var(--c); stroke-width: 3.5; }
#ch-tree .tn.can .halo { stroke: var(--c); stroke-width: 2; opacity: .5; animation: chpulse 1.4s ease-in-out infinite; }
#ch-tree .tn.on circle:not(.halo) { fill: var(--c); stroke: #fff6d8; }
#ch-tree .tn.on .halo { stroke: var(--c); opacity: .35; stroke-width: 6; }
#ch-tree .tn.key .inner { fill: none; stroke: rgba(255,255,255,.5); }
#ch-tree .tn.start circle:not(.halo) { fill: #fff6d8; stroke: #f3d58a; }
@keyframes chpulse { 50% { opacity: .1; } }
#ch-ttip { position: absolute; width: 230px; pointer-events: none; background: rgba(10,12,20,.94); border: 1px solid var(--glass-line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
#ch-ttip ul { margin: 4px 0; padding-left: 16px; color: #c8f0b8; }
#ch-ttip .d { opacity: .8; margin-top: 2px; }
#ch-ttip small { opacity: .6; }
.ch-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 12px; font-size: 12px; }
.ch-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 5px; }

/* Weltkarte (Taste N) */
#worldmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -51%); width: min(760px, 92vw, 120vh); display: flex; flex-direction: column; z-index: 41; padding: 0 !important; overflow: hidden; pointer-events: auto; color: var(--ink); font: 13px var(--font-ui); }
#worldmap[hidden] { display: none; }
#worldmap .pb-head { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--glass-line); }
#worldmap .pb-head b { font: 700 17px "Cinzel", var(--font-display); color: var(--gold); }
#worldmap .wm-hint { flex: 1; font-size: 12px; opacity: .75; }
#worldmap .x { margin-left: auto; }
#worldmap canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; max-height: calc(86vh - 44px); object-fit: contain; background: #0c1108; }

/* ---- Inventar groß: Figur in der Mitte, Ausrüstung links und rechts, Tasche 8 × 6 ---- */
#inv { position: absolute; left: 50%; top: 50%; right: auto !important; bottom: auto !important; transform: translate(-50%, -52%); width: min(1060px, 96vw) !important; z-index: 39; }
#inv .inv-body { gap: 18px; padding: 6px 4px 2px; }
#inv .inv-left { width: 480px !important; display: flex; flex-direction: column; gap: 10px; }
#inv .doll { display: grid; grid-template-columns: 140px 1fr 140px; gap: 8px; align-items: stretch; }
#inv .doll-col { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
#inv .doll .eq { height: 74px; flex-direction: column; justify-content: center; text-align: center; gap: 2px; padding: 4px; }
#inv .doll .eq .ic { width: 38px; height: 38px; }
#inv .doll .eq b { max-width: 128px; font-size: 11px; }
#inv-hero { width: 100%; height: 330px; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, rgba(255,226,160,.16), rgba(0,0,0,.35) 70%); }
#inv .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 12px; font-size: 12px; }
#inv .bag { grid-template-columns: repeat(8, 58px); gap: 6px; }
#inv .bag .cell { width: 58px; height: 58px; }
#inv .bag .cell .ic { width: 42px; height: 42px; }
#inv .inv-foot { gap: 10px; }
#bag-count.full { color: #ff7a6a; font-weight: 700; }
#inv-ctx { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 8px; min-width: 170px; font: 12.5px var(--font-ui); pointer-events: auto; }
#inv-ctx b { padding: 2px 4px 4px; }
#inv-ctx button { text-align: left; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font: inherit; }
#inv-ctx button:hover { background: rgba(255,210,120,.18); }
#inv-ctx button.bad { color: #ff9a8a; }

/* Schmiedin und Händler */
#dlg-body .shoplist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
#dlg-body .shoprow { display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.04); }
#dlg-body .shoprow .ic { grid-row: span 2; width: 30px; height: 30px; }
#dlg-body .shoprow .ic svg, #dlg-body .shopgrid .ic svg { width: 100%; height: 100%; }
#dlg-body .shoprow small { grid-column: 2; opacity: .75; font-size: 11px; }
#dlg-body .shoprow .btn { grid-row: 1 / span 2; grid-column: 3; white-space: nowrap; }
#dlg-body .shopgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#dlg-body .shopgrid .btn { display: flex; align-items: center; gap: 6px; justify-content: flex-start; min-width: 0; padding-left: 8px; padding-right: 6px; letter-spacing: .02em; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dlg-body .shopgrid .ic { width: 26px; height: 26px; display: inline-block; flex: none; }

/* Handeln: Gespräch links, Tasche rechts (ohne Figur), nichts überlappt */
#dialog.trade { left: 16px !important; transform: none !important; top: 80px; width: min(520px, 44vw) !important; }
#inv.trade { left: auto !important; right: 16px !important; top: 80px !important; transform: none !important; width: min(560px, 50vw) !important; }
#inv.trade .inv-left { display: none !important; }

/* Kopfgeld beim Hauptmann und in der Auftragsanzeige */
.qbox.bounty { margin-top: 10px; }
.b-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.b-row span { flex: 1; } .b-row em { font-style: normal; color: var(--gold, #f3d58a); font-size: 12px; }
.b-row.offer span { color: #e8dcc0; } .btn.small { padding: 3px 10px; font-size: 12px; }
#bounty-list { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #ffd98a; }

/* ---- Charakterfenster, neu: Edelsteine, Kacheln, Sternenbaum (wenig Text, Erklärungen im Tooltip) ---- */
#char .pb-head { background: linear-gradient(180deg, rgba(255,214,120,.08), transparent); }
.ch-pts { display: inline-block; padding: 3px 12px; border-radius: 999px; font: 800 13px var(--font-ui); color: #2a1c08; background: linear-gradient(#ffe9a8, #e0a83a); box-shadow: 0 0 14px rgba(255,190,80,.55); animation: chPts 1.6s ease-in-out infinite; }
.ch-pts.off { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: none; animation: none; opacity: .7; }
@keyframes chPts { 50% { box-shadow: 0 0 22px rgba(255,200,90,.9); } }
.ch-who .ch-pts { margin-left: auto; }
.ch-gems { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 16px; }
.ch-gem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px; border-radius: 14px; cursor: default;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 18%, transparent), rgba(0,0,0,.25) 75%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ch-gem .gm { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #fff8 0, color-mix(in srgb, var(--c) 85%, #fff) 18%, var(--c) 45%, color-mix(in srgb, var(--c) 40%, #000) 100%);
  box-shadow: 0 0 0 3px #1a1208, 0 0 0 5px #b08a3a, 0 0 18px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -6px 12px rgba(0,0,0,.45); }
.ch-gem .gg { position: absolute; top: 9px; font-size: 15px; opacity: .65; color: #fff; text-shadow: 0 1px 2px #000; }
.ch-gem em { font: 900 28px var(--font-ui); font-style: normal; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.8); margin-top: 10px; }
.ch-gem > b { font: 700 15px "Cinzel", serif; color: var(--c); letter-spacing: .04em; }
#char .ch-gem button { position: absolute; right: 12px; top: 12px; }
.ch-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ch-bt { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; padding: 10px 12px; border-radius: 12px; background: linear-gradient(160deg, rgba(255,214,120,.12), rgba(0,0,0,.25)); border: 1px solid rgba(255,214,120,.25); }
.ch-bt span { grid-row: span 2; font-size: 24px; color: var(--accent); text-shadow: 0 0 10px rgba(255,200,90,.6); }
.ch-bt b { font: 900 22px var(--font-ui); color: #fff; } .ch-bt small { opacity: .65; font-size: 11px; }
.ch-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ch-tile { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.ch-tile span { grid-row: span 2; font-size: 15px; color: #d8c08a; text-align: center; } .ch-tile b { font: 800 14px var(--font-ui); } .ch-tile small { font-size: 10px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ch-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; border-radius: 14px; text-align: center;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--c) 16%, transparent), rgba(0,0,0,.25) 70%); border: 1px solid rgba(255,255,255,.08); transition: transform .12s, border-color .12s; }
.ch-st:not(.locked):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ch-st.up { border-color: rgba(255,214,120,.45); }
.ch-st .si { position: relative; width: 74px; height: 74px; border-radius: 16px; overflow: visible; display: grid; place-items: center; cursor: grab;
  box-shadow: 0 0 0 2px #120c06, 0 0 0 4px #b08a3a, 0 6px 14px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.ch-st .si .icon { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; display: grid; place-items: center; font-size: 30px; }
.ch-st .si svg { width: 100%; height: 100%; }
.ch-st .si > i { position: absolute; left: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 6px; background: #120c06; border: 1px solid #b08a3a; font: 800 11px/18px var(--font-ui); font-style: normal; color: #ffe9a8; text-align: center; }
#char .ch-st .si button { position: absolute; right: -9px; bottom: -9px; min-width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 12px rgba(255,200,90,.7); }
#char .ch-st .si button:disabled { display: none; }
.ch-st > b { font: 700 14px "Cinzel", serif; color: #f6e6c0; }
.ch-st .ch-rank { margin: 0; gap: 3px; } .ch-st .ch-rank i { width: 9px; height: 9px; border-radius: 50%; }
.ch-st.locked { opacity: .45; } .ch-st.locked .si { cursor: default; box-shadow: 0 0 0 2px #120c06, 0 0 0 4px #4a3a1a; background: rgba(0,0,0,.35); }
.ch-st.locked .lock { font-size: 26px; filter: grayscale(1); } .ch-st.locked small { font-size: 11px; opacity: .8; }
.ch-help { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--glass-line); font: 800 13px var(--font-ui); cursor: help; color: var(--accent); }
/* Sternenbaum */
.ch-treewrap { background: radial-gradient(circle at 50% 50%, rgba(70,60,130,.45), rgba(14,12,30,.85) 55%, rgba(4,4,10,.95)); }
#ch-tree .stars circle { fill: #fff; }
#ch-tree .rings circle { fill: none; stroke: rgba(200,180,255,.08); stroke-width: 2; stroke-dasharray: 6 14; }
#ch-tree .rings .rg1 { stroke: rgba(255,214,140,.07); stroke-dasharray: 2 10; stroke-width: 3; }
#ch-tree line { stroke: rgba(170,160,220,.18); stroke-width: 4; stroke-linecap: round; }
#ch-tree line.near { stroke: rgba(210,200,255,.35); }
#ch-tree line.on { stroke: #ffe39a; stroke-width: 7; filter: url(#tglow); }
#ch-tree .tn circle, #ch-tree .tn polygon { fill: #161428; stroke: rgba(200,190,255,.35); stroke-width: 2.5; }
#ch-tree .tn .inner { fill: none !important; stroke: rgba(255,255,255,.25) !important; stroke-width: 1.5 !important; }
#ch-tree .tn .gl { fill: rgba(220,210,255,.55); text-anchor: middle; font-family: "Segoe UI Symbol", var(--font-ui); pointer-events: none; }
#ch-tree .tn.can circle:not(.halo):not(.inner), #ch-tree .tn.can polygon:not(.inner) { stroke: var(--c); stroke-width: 3.5; }
#ch-tree .tn.can .gl { fill: var(--c); }
#ch-tree .tn.on circle:not(.halo):not(.inner), #ch-tree .tn.on polygon:not(.inner) { fill: color-mix(in srgb, var(--c) 75%, #000); stroke: #fff2c8; filter: url(#tglow); }
#ch-tree .tn.on .gl { fill: #fff; }
#ch-tree .tn.notable circle:not(.halo):not(.inner) { stroke-width: 3.5; }
#ch-tree .tn.key polygon:not(.inner) { stroke: #d8b25a; stroke-width: 4; }
#ch-tree .tn:hover circle:not(.halo):not(.inner), #ch-tree .tn:hover polygon:not(.inner) { stroke: #fff; }
#ch-tree text:not(.gl) { fill: rgba(230,220,255,.6); font: 700 17px var(--font-ui); paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 4px; }

/* Klassen-Äste anderer Klassen: blass */
#ch-tree .tn.foreign { opacity: .28; }

/* Rang 5 und 10: Meilenstein-Perlen (Raute, golden umrandet) */
.ch-st .ch-rank { align-items: center; }
.ch-st .ch-rank i.ms { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 1px #c9952e; }
.ch-st .ch-rank i.ms.on { background: linear-gradient(135deg, #fff2b0, #ff9a2a); box-shadow: 0 0 0 1px #fff2b0, 0 0 8px rgba(255,190,80,.9); }