/* KABİR AZABI — talent board (src/talent-board.js). One-screen tree, three panels (WoW-like), gothic stone and gold. Everything under #character .tb-* */
#character .tb-wrap { --gold:#e9c27a; --gold-d:#8a6a3a; --bone:#e6d6b6; --ash:#8d7d66; --blood:#a3261c; --ink:#070505;
  width:100%; height:100%; min-height:0; min-width:0; flex:1 1 auto; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:6px;
  font-family:Georgia,'Times New Roman',serif; color:var(--bone); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#character .tb-wrap button { font-family:inherit; }
/* ---------- top bar: points left, spent per tree, builds, respec ---------- */
#character .tb-top { display:flex; align-items:center; gap:14px; min-width:0; padding:1px 4px 5px; border-bottom:1px solid #8a6a3f40; }
#character .tb-points { display:flex; align-items:center; gap:6px; flex:none; }
#character .tb-points b { font:400 30px/1 Georgia,serif; color:#8d7d66; min-width:.7em; text-align:center; }
#character .tb-points.has b { color:#f6cd74; text-shadow:0 0 14px #e0902ccc, 0 1px 0 #000; animation:tb-pts 2.6s ease-in-out infinite; }
#character .tb-points span { display:flex; flex-direction:column; font:700 10px/1.1 Georgia,serif; letter-spacing:.2em; color:#d7b983; }
#character .tb-points small { font:italic 400 10.5px/1.2 Georgia,serif; letter-spacing:.02em; color:#9b8a70; }
@keyframes tb-pts { 50% { text-shadow:0 0 22px #ffb347, 0 1px 0 #000; } }
#character .tb-spent { flex:none; display:flex; flex-direction:column; padding-left:12px; border-left:1px solid #8a6a3f40; }
#character .tb-spent b { font:400 16px/1.1 Georgia,serif; color:#e9d3a6; letter-spacing:.06em; }
#character .tb-spent small { font:400 10.5px/1.2 Georgia,serif; color:#9b8a70; white-space:nowrap; }
#character .tb-presets { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:4px; overflow:hidden; }
#character .tb-presets small { flex:none; font:700 9px/1 Georgia,serif; letter-spacing:.14em; text-transform:uppercase; color:#8d7b62; margin-right:2px; }
#character .tb-presets button { flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 8px; min-height:0;
  font:italic 400 11.5px/1.1 Georgia,serif; color:#d8c39b; background:linear-gradient(#211813,#120d0a); border:1px solid #5d4730; border-radius:10px; cursor:pointer; }
#character .tb-presets button:hover { border-color:#b48a4e; color:#fff0d0; }
#character .tb-presets button.on { color:#1a0f08; background:linear-gradient(#f0d08a,#b88a45); border-color:#ffe2a0; font-style:normal; font-weight:700; box-shadow:0 0 10px #e0a04a88; }
#character .tb-presets .tb-apply { flex:none; font:700 10px/1.1 Georgia,serif; font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:#ffe9c0; border-radius:2px;
  background:linear-gradient(#7d1b15,#3c0b08); border:1px solid #d08a52; box-shadow:0 0 12px #c0301e88; }
#character .tb-presets .tb-apply:disabled { opacity:.45; cursor:not-allowed; }
#character .tb-respec { flex:none; padding:5px 10px; min-height:0; font:400 12px/1.1 Georgia,serif; color:#e8d6b4; border:2px ridge #8a6b42; background:linear-gradient(#3a1a1ccc,#150a0be6); cursor:pointer; }
#character .tb-respec:disabled { opacity:.42; cursor:not-allowed; }
#character .tb-respec:not(:disabled):hover { border-color:#d3a463; color:#fff1d6; }
/* ---------- main: board + side ---------- */
#character .tb-main { min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(190px,25%,290px); gap:8px; }
#character .tb-fit { position:relative; min-height:0; min-width:0; overflow:hidden; border:1px solid #4a3a2a; border-radius:2px;
  background:linear-gradient(#0b0908f2,#060505f6), url(../assets/ui/stone.webp) center/320px; box-shadow:inset 0 0 0 1px #000, inset 0 0 40px #000c; }
#character .tb-canvas { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:50% 50%; }
/* the three tree panels (WoW-like): header strip, faded art of the panel's two skills, two columns of icons */
#character .tb-panel { position:absolute; top:2px; bottom:2px; overflow:hidden; border:1px solid #3a2d20; border-radius:2px; background:#0a0807;
  box-shadow:inset 0 0 0 1px #000, inset 0 0 30px #000, 0 0 0 1px #00000080; }
#character .tb-panelart { position:absolute; inset:-14px; filter:blur(2.5px) saturate(.75) brightness(.42); opacity:.7; transform:scale(1.06); }
#character .tb-panel::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 12%,transparent),transparent 45% 55%,color-mix(in srgb,var(--c2) 12%,transparent)), linear-gradient(transparent 40%,#000000b0), radial-gradient(ellipse at 50% 12%,#ffffff0d,transparent 60%); }
#character .tb-panel::after { content:''; position:absolute; inset:4px; top:44px; pointer-events:none; border:1px solid #6b563826; }
#character .tb-panel.used .tb-panelart { filter:blur(2.5px) saturate(.9) brightness(.52); opacity:.8; }
#character .tb-panel.lead { border-color:#8a6a3a; box-shadow:inset 0 0 0 1px #000, inset 0 0 30px #000, 0 0 12px #c8873144; }
#character .tb-panel.lead .tb-panelart { filter:blur(2px) saturate(1.05) brightness(.62); opacity:.9; }
#character .tb-panel header { position:absolute; left:0; right:0; top:0; height:40px; display:flex; align-items:center; gap:7px; padding:0 8px; z-index:1;
  background:linear-gradient(#251a12f0,#0e0a08e6); border-bottom:1px solid #8a6a3a99; box-shadow:0 2px 6px #000a; }
#character .tb-crest { flex:none; width:28px; height:28px; border-radius:50%; overflow:hidden; border:2px solid #8a6a3a; box-shadow:0 0 0 2px var(--ink), 0 0 8px #000; }
#character .tb-crest img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8); }
#character .tb-panel.lead .tb-crest { border-color:var(--gold); }
#character .tb-ptitle { display:flex; flex-direction:column; min-width:0; }
#character .tb-ptitle b { font:700 14px/1.05 Georgia,serif; letter-spacing:.14em; color:#e9cf98; text-shadow:0 1px 0 #000; white-space:nowrap; }
#character .tb-ptitle small { font:400 10px/1.2 Georgia,serif; color:#9b8a70; white-space:nowrap; }
#character .tb-ptitle small em { font-style:normal; font-weight:700; color:#f6cd74; }
#character .tb-paths { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:0; }
#character .tb-paths i { font:700 8px/1 Georgia,serif; font-style:normal; letter-spacing:.1em; white-space:nowrap; text-shadow:0 1px 0 #000; }
#character .tb-keycap { position:absolute; z-index:1; transform:translate(-50%,0); font:700 7.5px/1 Georgia,serif; letter-spacing:.16em; text-transform:uppercase; color:#a98f68; white-space:nowrap; text-shadow:0 1px 0 #000; }
#character .tb-or { position:absolute; z-index:4; transform:translate(-50%,-50%); padding:1px 4px; font:italic 400 8.5px/1.1 Georgia,serif; color:#a8916e; background:#0c0908e6; border:1px solid #3d3024; border-radius:7px; white-space:nowrap; pointer-events:none; }
/* build plaques (row III) */
#character .tb-plaque { position:absolute; z-index:1; border:1px solid #4a3a2a; border-top:2px solid color-mix(in srgb,var(--c) 60%,#4a3a2a); border-radius:3px;
  background:linear-gradient(color-mix(in srgb,var(--c) 14%,#0d0a08e0),#080606e0); box-shadow:inset 0 0 0 1px #000, inset 0 0 16px #000c, 0 2px 6px #000a; }
#character .tb-plaque.got { border-color:#8a6a3a; box-shadow:inset 0 0 0 1px #000, inset 0 0 16px #000c, 0 0 10px color-mix(in srgb,var(--c) 40%,transparent); }
#character .tb-plaque > b { position:absolute; left:0; right:0; top:3px; text-align:center; font:700 7.5px/1 Georgia,serif; letter-spacing:.1em; text-transform:uppercase; color:var(--c); text-shadow:0 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px; }
/* keystone: square icon in a big gold-and-iron diamond (one under every panel) */
#character .tb-crown { position:absolute; left:50%; top:50%; width:calc(var(--sz) * 1.18); height:calc(var(--sz) * 1.18); transform:translate(-50%,-50%) rotate(45deg); z-index:0; pointer-events:none;
  background:linear-gradient(135deg,#2a1d12,#0b0806 60%); border:2px solid #5d4730; box-shadow:0 0 0 3px var(--ink), 0 0 0 4px #4a3a2a, 0 8px 22px #000, inset 0 0 14px #000; }
#character .tb-crown::before { content:''; position:absolute; inset:5px; border:1px solid #8a6a3a66; }
#character .tb-key.available .tb-crown { border-color:#c9b77a; animation:tb-crown 2.2s ease-in-out infinite; }
#character .tb-key.learned .tb-crown { border-color:var(--gold); background:linear-gradient(135deg,#5a3a14,#1a0f08 65%); box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--gold-d), 0 0 30px #ffb44a88, inset 0 0 12px #000; }
#character .tb-key.excluded .tb-crown { border-color:#3a2a20; filter:brightness(.6); }
@keyframes tb-crown { 50% { box-shadow:0 0 0 3px var(--ink), 0 0 0 4px #c9b77a, 0 0 22px #f0f4b066, inset 0 0 14px #000; } }
#character .tb-key .tb-frame { z-index:1; }
#character .tb-key .tb-x { z-index:5; }
#character .tb-link.tb-rail { stroke-width:2.5; }
#character .tb-link.tb-rail.open { stroke:#6b5638; stroke-dasharray:3 4; }
/* row gutter (left) */
#character .tb-row { position:absolute; left:1px; width:41px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; z-index:0; text-align:center; }
#character .tb-row b { font:400 16px/1 Georgia,serif; color:#c9a76a; text-shadow:0 0 8px #c8873144; }
#character .tb-row span { font:700 7px/1.1 Georgia,serif; letter-spacing:.08em; text-transform:uppercase; color:#8d7b62; overflow-wrap:anywhere; }
#character .tb-gate { display:flex; align-items:center; gap:2px; font:italic 700 9.5px/1 Georgia,serif; white-space:nowrap; }
#character .tb-gate svg { width:9px; height:9px; fill:currentColor; flex:none; }
#character .tb-row.shut .tb-gate { color:#d0705a; }
#character .tb-row.open .tb-gate { color:#9a8a68; }
/* links */
#character .tb-links { position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:2; }
#character .tb-link { fill:none; stroke:#3a2e22; stroke-width:3; stroke-linejoin:round; }
#character .tb-link.open { stroke:#6b5638; stroke-dasharray:3 4; }
#character .tb-link.ready { stroke:#e4cf7a; stroke-width:3; stroke-dasharray:5 4; animation:tb-march 1.1s linear infinite; }
#character .tb-link.lit { stroke:#f3c56f; stroke-width:3.5; filter:url(#tb-glow); }
#character .tb-link.just { stroke-dasharray:300; stroke-dashoffset:300; animation:tb-draw .75s ease-out forwards; }
#character .previewing .tb-link.pre { stroke:#ffe1a0; stroke-dasharray:none; animation:none; }
@keyframes tb-march { to { stroke-dashoffset:-18; } }
@keyframes tb-draw { to { stroke-dashoffset:0; } }
/* ---------- nodes: square icon buttons ---------- */
#character .tb-canvas .tb-node { all:unset; box-sizing:border-box; position:absolute; z-index:3; width:var(--sz); height:var(--sz); transform:translate(-50%,-50%); cursor:pointer; display:block; -webkit-tap-highlight-color:transparent; }
#character .tb-canvas .tb-node::before, #character .tb-canvas .tb-node::after { content:none; display:none; }
#character .tb-frame { position:absolute; inset:0; display:block; overflow:hidden; border-radius:4px; background:#100b09; border:2px solid #3d3024; box-sizing:border-box;
  box-shadow:0 0 0 2px var(--ink), 0 0 0 3px #4a3a2a, 0 3px 8px #000c, inset 0 0 12px #000; transition:transform .14s ease, box-shadow .2s, border-color .2s; }
#character .tb-frame img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; transition:filter .2s; }
#character .tb-glyph { position:absolute; left:22%; top:22%; width:56%; height:56%; fill:currentColor; z-index:0; }
#character .tb-active .tb-frame, #character .tb-form .tb-frame { border-width:3px; }
#character .tb-key .tb-frame { border-width:3px; border-radius:5px; box-shadow:0 0 0 3px var(--ink), 0 0 0 5px #4a3a2a, 0 0 0 6px var(--ink), 0 6px 16px #000, inset 0 0 18px #000; }
/* states */
#character .tb-node.locked .tb-frame img, #character .tb-node.excluded .tb-frame img { filter:grayscale(1) brightness(.38) contrast(1.1); }
#character .tb-node.locked .tb-frame { border-color:#2a2119; }
#character .tb-node.pending .tb-frame img { filter:grayscale(.55) brightness(.6); }
#character .tb-node.pending .tb-frame { border-color:color-mix(in srgb,var(--c) 40%,#2a2119); }
#character .tb-node.available .tb-frame { border-color:#d8e6a0; box-shadow:0 0 0 2px var(--ink), 0 0 0 3px color-mix(in srgb,var(--c) 55%,#000), 0 0 12px #e8f0a066, inset 0 0 10px #000; animation:tb-avail 2.2s ease-in-out infinite; }
#character .tb-node.available .tb-frame img { filter:grayscale(.15) brightness(.85); }
@keyframes tb-avail { 50% { box-shadow:0 0 0 2px var(--ink), 0 0 0 3px var(--c), 0 0 20px #f0f4b088, inset 0 0 6px #000; } }
#character .tb-node.learned .tb-frame { border-color:var(--gold); box-shadow:0 0 0 2px var(--ink), 0 0 0 3px var(--gold-d), 0 0 14px #f0b45a77, inset 0 0 6px #0006; }
#character .tb-node.learned .tb-frame img { filter:brightness(1.1) saturate(1.15); }
#character .tb-key.learned .tb-frame { box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--gold), 0 0 0 6px var(--ink), 0 0 26px #ffb44a99, inset 0 0 8px #0008; }
#character .tb-node.superseded .tb-frame img { filter:brightness(.72) saturate(.65); }
#character .tb-node:hover .tb-frame { transform:scale(1.08); }
#character .tb-node.selected .tb-frame, #character .tb-node:focus-visible .tb-frame { outline:2px solid #fff3d0; outline-offset:3px; }
#character .tb-node:focus { outline:none; }
/* badges */
#character .tb-rank { position:absolute; right:-6px; bottom:-6px; z-index:4; padding:2px 3px; font:700 9px/1 Georgia,serif; color:#d8e6a0; background:#0c0908; border:1px solid #4a3a2a; border-radius:3px; }
#character .tb-node.learned .tb-rank { color:#ffe5a8; border-color:#c99a50; }
#character .tb-tier { position:absolute; left:2px; bottom:1px; z-index:4; font:italic 700 10px/1 Georgia,serif; color:#f0d08a; text-shadow:0 0 3px #000, 0 1px 0 #000, 0 0 6px #000; }
#character .tb-cap { position:absolute; right:-7px; top:-7px; z-index:5; display:flex; align-items:center; gap:2px; padding:1px 4px; white-space:nowrap;
  font:700 9px/1.1 Georgia,serif; color:#ffe5a8; background:#2a1a0b; border:1px solid #c99a50; border-radius:2px; box-shadow:0 1px 3px #000; }
#character .tb-cap svg, #character .tb-slotcap svg, #character .tb-assign svg { width:7px; height:10px; fill:currentColor; stroke:currentColor; }
#character .tb-lock { position:absolute; left:50%; top:50%; z-index:4; width:14px; height:14px; transform:translate(-50%,-50%); color:#a8977a; opacity:.85; filter:drop-shadow(0 1px 1px #000); }
#character .tb-lock svg { width:100%; height:100%; fill:currentColor; display:block; }
#character .tb-x { position:absolute; inset:-3px; z-index:4; pointer-events:none;
  background:linear-gradient(45deg,transparent 45%,#c2271d 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#c2271d 45% 55%,transparent 55%); filter:drop-shadow(0 0 3px #000); opacity:.9; }
#character .tb-ord { position:absolute; left:-8px; top:-8px; z-index:5; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; font:700 9px/1 Georgia,serif; color:#1a0f08; background:#f0d08a; box-shadow:0 0 6px #ffcf70; }
/* preview of a recommended build */
#character .previewing .tb-node:not(.pre) { opacity:.3; filter:grayscale(.7); }
#character .previewing .tb-node.pre .tb-frame { box-shadow:0 0 0 2px var(--ink), 0 0 0 3px #ffe1a0, 0 0 18px #ffcf70; }
/* learn burst */
#character .tb-node.just .tb-frame { animation:tb-flash 1.1s ease-out; }
#character .tb-burst { position:absolute; inset:-8px; z-index:6; border-radius:6px; pointer-events:none; border:3px solid #ffd27a; box-shadow:0 0 18px #ffb347, inset 0 0 14px #ffb347; animation:tb-burst .9s ease-out forwards; }
@keyframes tb-burst { from { transform:scale(.7); opacity:1; } to { transform:scale(1.8); opacity:0; } }
@keyframes tb-flash { 0% { filter:brightness(3) saturate(0); } 100% { filter:none; } }
/* ---------- side panel (also .skt-inspect so character-ui.js can swap it) ---------- */
#character .tb-wrap aside.tb-side { all:unset; box-sizing:border-box; grid-column:2; grid-row:1; min-height:0; min-width:0; display:flex; flex-direction:column; gap:6px; padding:10px 11px;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#6b5638 transparent; border:1px solid #4a3a2a; border-top:2px solid var(--c);
  background:radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--c) 14%,transparent),transparent 60%),linear-gradient(#120e0bf2,#080606f7); box-shadow:inset 0 0 0 1px #000, inset 0 0 30px #000a; }
#character .tb-wrap aside.tb-side::before, #character .tb-wrap aside.tb-side::after { content:none; display:none; }
#character .tb-side .tb-kicker { font:700 9px/1.2 Georgia,serif; letter-spacing:.13em; text-transform:uppercase; color:#a98f68; }
#character .tb-side header { display:flex; align-items:center; gap:10px; padding:0; margin:0; }
#character .tb-sideicon { position:relative; flex:none; width:46px; height:46px; }
#character .tb-side h3 { margin:0; font:400 19px/1.15 Georgia,serif; color:#f3e6c9; text-shadow:0 1px 0 #000; overflow-wrap:anywhere; }
#character .tb-side .tb-status { display:flex; align-items:center; gap:5px; margin:0; font:italic 400 12px/1.25 Georgia,serif; }
#character .tb-side .tb-status svg { width:11px; height:11px; fill:currentColor; flex:none; }
#character .tb-side .tb-status.ok { color:#f0c873; } #character .tb-side .tb-status.go { color:#a9d07a; } #character .tb-side .tb-status.no { color:#d07a62; }
#character .tb-sidebody { display:flex; flex-direction:column; gap:6px; }
#character .tb-side .tb-desc { margin:0; font:400 12.5px/1.42 Georgia,serif; color:#d3c7b0; }
#character .tb-side .tb-price { margin:0; padding:4px 7px; font:italic 400 12px/1.3 Georgia,serif; color:#ef9c84; border-left:2px solid var(--blood); background:#a3261c1a; }
#character .tb-side .tb-rule { margin:0; font:italic 400 11px/1.3 Georgia,serif; color:#a8987c; }
#character .tb-side .tb-rule.excl { color:#c97a62; }
#character .tb-facts { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; margin:0; }
#character .tb-facts div { display:flex; justify-content:space-between; gap:4px; padding:1px 0; border-bottom:1px solid #ffffff0d; min-width:0; }
#character .tb-facts dt { font:400 10.5px/1.3 Georgia,serif; color:#9a8b72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#character .tb-facts dd { margin:0; font:700 10.5px/1.3 Georgia,serif; color:#ecdcb8; white-space:nowrap; }
#character .tb-actions { display:flex; gap:6px; margin-top:auto; }
#character .tb-actions:empty { display:none; }
#character .tb-learn, #character .tb-refund { flex:1; padding:7px 8px; min-height:0; cursor:pointer; font:700 12px/1 Georgia,serif; letter-spacing:.12em; text-transform:uppercase; }
#character .tb-learn { color:#fff0cf; background:linear-gradient(#8a2219,#3e0c08); border:1px solid #e0a060; box-shadow:0 0 14px #c8402a66, inset 0 1px 0 #ffffff22; }
#character .tb-learn:not(:disabled):hover { filter:brightness(1.18); }
#character .tb-learn:disabled { color:#8d7d66; background:#1a1310; border-color:#3d3024; box-shadow:none; cursor:not-allowed; letter-spacing:.06em; }
#character .tb-refund { flex:0 1 auto; color:#e2d0ad; background:linear-gradient(#2b201a,#130e0b); border:1px solid #6b5638; letter-spacing:.06em; text-transform:none; font-weight:400; }
#character .tb-refund:disabled { opacity:.42; cursor:not-allowed; }
#character .tb-assign { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
#character .tb-assign small { grid-column:1 / -1; font:700 9px/1 Georgia,serif; letter-spacing:.12em; text-transform:uppercase; color:#a98f68; }
#character .tb-assign button { display:flex; align-items:center; justify-content:center; gap:2px; white-space:nowrap; overflow:hidden; min-height:0; padding:4px 6px; cursor:pointer; font:700 10px/1 Georgia,serif; color:#ecd9b0; background:linear-gradient(#35291b,#15110c); border:1px solid #8a7048; }
#character .tb-assign button:hover:not(:disabled) { filter:brightness(1.25); }
#character .tb-assign button.here { color:#1a0f08; background:linear-gradient(#f0d08a,#b88a45); border-color:#ffe2a0; cursor:default; }
/* ---------- bottom bar: identity, slot bar, help ---------- */
#character .tb-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; padding:5px 4px 0; border-top:1px solid #8a6a3f40; }
#character .tb-help { margin:0; text-align:right; font:italic 400 10.5px/1.35 Georgia,serif; color:#7f705c; }
#character .tb-ident { min-width:0; margin:0; text-align:left; font:400 11.5px/1.3 Georgia,serif; color:#bfae90; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#character .tb-ident b { font-weight:400; color:#f0d9a8; letter-spacing:.04em; }
#character .tb-ident .tb-prename { color:#ffe1a0; font-weight:700; }
#character .tb-ident span { letter-spacing:.08em; font-size:10.5px; }
#character .tb-slots { display:flex; gap:9px; padding:4px 10px; background:linear-gradient(#1a1310,#0a0807); border:1px solid #4a3a2a; border-radius:3px; box-shadow:inset 0 0 12px #000, 0 0 0 1px #000; }
#character .tb-slot { position:relative; width:46px; height:46px; }
#character .tb-slot-btn { all:unset; box-sizing:border-box; position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; overflow:hidden; border-radius:4px; background:#0d0a08;
  border:2px solid color-mix(in srgb,var(--c) 70%,#3d3024); box-shadow:0 0 0 2px var(--ink), inset 0 0 10px #000; transition:transform .12s, box-shadow .2s; }
#character .tb-slot-btn img { width:100%; height:100%; object-fit:cover; display:block; }
#character .tb-slot-btn i { font:400 22px/1 Georgia,serif; color:#5d4a33; font-style:normal; }
#character .tb-slot.empty .tb-slot-btn { border-style:dashed; border-color:#4a3a2a; }
#character .tb-slot-btn:hover, #character .tb-slot-btn:focus-visible { transform:scale(1.06); outline:none; box-shadow:0 0 0 2px var(--ink), 0 0 10px #e9c27a99; }
#character .tb-slotcap { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:2px; padding:1px 4px; white-space:nowrap; pointer-events:none;
  font:700 8px/1.1 Georgia,serif; color:#ffe5a8; background:#1a110a; border:1px solid #8a6a3a; border-radius:2px; }
#character .tb-slot-x { all:unset; position:absolute; right:-6px; top:-6px; z-index:3; width:14px; height:14px; display:grid; place-items:center; cursor:pointer; border-radius:50%;
  font:700 11px/1 Georgia,serif; color:#f0c0a8; background:#3a0c08; border:1px solid #a3261c; opacity:0; transition:opacity .15s; }
#character .tb-slot:hover .tb-slot-x, #character .tb-slot-x:focus-visible { opacity:1; }
@media (hover:none) { #character .tb-slot-x { opacity:.85; } }
/* a learned active is selected: the slots invite a click */
#character .tb-wrap:has(.tb-node.selected.tb-assignable) .tb-slot-btn { animation:tb-invite 1.6s ease-in-out infinite; }
#character .tb-slot.dropzone .tb-slot-btn { animation:tb-invite .9s ease-in-out infinite; }
#character .tb-slot.over .tb-slot-btn { transform:scale(1.12); box-shadow:0 0 0 2px var(--ink), 0 0 16px #ffd27a; border-color:#ffe2a0; }
@keyframes tb-invite { 50% { box-shadow:0 0 0 2px var(--ink), 0 0 12px #e9c27aaa; border-color:#e9c27a; } }
/* ---------- hover / long-press card ---------- */
.tb-tip { position:fixed; z-index:2147483600; width:max-content; max-width:290px; padding:9px 11px 8px; pointer-events:none; color:#e6d6b6; font:400 12px/1.4 Georgia,serif;
  background:linear-gradient(#17110dfa,#0a0807fc), url(../assets/ui/stone.webp) center/260px; border:2px ridge #8a6b42; border-top:3px solid var(--c,#c9a45a); box-shadow:0 10px 28px #000d, inset 0 0 0 1px #000, inset 0 0 22px #000a; }
.tb-tip dl { display:grid; grid-template-columns:1fr 1fr; gap:1px 10px; margin:0 0 5px; }
.tb-tip dl div { display:flex; justify-content:space-between; gap:6px; border-bottom:1px solid #ffffff0d; }
.tb-tip dt { color:#9a8b72; font-size:10.5px; white-space:nowrap; } .tb-tip dd { margin:0; font-weight:700; color:#ecdcb8; font-size:10.5px; white-space:nowrap; }
.tb-tip em svg { width:10px; height:10px; fill:currentColor; margin-right:4px; vertical-align:-1px; }
.tb-tip .tb-tip-hint { display:block; margin-top:4px; font-size:10.5px; color:#8d7d66; }
.tb-tip[hidden] { display:none; }
.tb-tip small { display:block; font:700 9px/1.2 Georgia,serif; letter-spacing:.13em; text-transform:uppercase; color:#a98f68; }
.tb-tip b { display:block; margin:2px 0 4px; font:400 16px/1.2 Georgia,serif; color:#f6e8c8; }
.tb-tip p { margin:0 0 5px; color:#cfc2a8; }
.tb-tip .tb-tip-price { color:#ef9c84; font-style:italic; }
.tb-tip em { display:block; font-size:11px; }
.tb-tip em.ok { color:#f0c873; } .tb-tip em.go { color:#a9d07a; } .tb-tip em.no { color:#d07a62; }
/* ---------- smaller screens ---------- */
@media (max-height:620px), (max-width:1000px) {
  #character .tb-wrap { gap:4px; }
  #character .tb-top { gap:8px; padding-bottom:3px; }
  #character .tb-points b { font-size:22px; } #character .tb-spent b { font-size:13px; } #character .tb-spent small, #character .tb-points small { font-size:9px; }
  #character .tb-presets small { display:none; }
  #character .tb-presets button { padding:2px 6px; font-size:9.5px; }
  #character .tb-respec { padding:3px 7px; font-size:10.5px; }
  #character .tb-main { gap:5px; grid-template-columns:minmax(0,1fr) clamp(170px,26%,240px); }
  #character .tb-wrap aside.tb-side { padding:6px 8px; gap:4px; }
  #character .tb-sideicon { width:34px; height:34px; }
  #character .tb-side h3 { font-size:15px; }
  #character .tb-side .tb-desc { font-size:11px; line-height:1.35; }
  #character .tb-side .tb-status { font-size:10.5px; }
  #character .tb-facts dt, #character .tb-facts dd { font-size:9.5px; }
  #character .tb-learn, #character .tb-refund { padding:5px 6px; font-size:10.5px; }
  #character .tb-bottom { gap:8px; padding-top:3px; }
  #character .tb-slot { width:36px; height:36px; }
  #character .tb-slots { gap:7px; padding:3px 8px; }
  #character .tb-ident { font-size:9.5px; } #character .tb-help { font-size:9px; }
}
@media (max-width:699px) {
  #character .tb-main { grid-template-columns:1fr; grid-template-rows:minmax(0,1.5fr) minmax(0,1fr); }
  #character .tb-wrap aside.tb-side { grid-column:1; grid-row:2; }
  #character .tb-help { display:none; } #character .tb-bottom { grid-template-columns:minmax(0,1fr) auto; } #character .tb-spent { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #character .tb-wrap *, #character .tb-wrap *::after { animation:none !important; transition:none !important; }
  #character .tb-link.just { stroke-dasharray:none; stroke-dashoffset:0; }
}
/* the button itself is the drag source / hit target, never its picture */
#character .tb-node > *, #character .tb-slot-btn > * { pointer-events:none; }
#character .tb-node[draggable="true"], #character .tb-slot-btn[draggable="true"] { -webkit-user-drag:element; }
#character .tb-lvl { position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:1px; padding:1px 3px; font:700 8.5px/1 Georgia,serif; font-style:normal; color:#e0a088; background:#1a0a08; border:1px solid #7a3a2a; border-radius:2px; white-space:nowrap; }
#character .tb-lvl svg { width:7px; height:7px; fill:currentColor; }
#character .tb-side .tb-delta { margin:0; font:italic 400 11.5px/1.3 Georgia,serif; color:#d8c39b; }
#character .tb-side .tb-archnote, .tb-tip .tb-archnote { margin:0; font:400 11px/1.35 Georgia,serif; color:#a8987c; }
#character .tb-side .tb-archnote b, .tb-tip .tb-archnote b { color:#e3bf7c; font-weight:700; }
.tb-tip .tb-tip-delta { color:#d8c39b; font-style:italic; }
.tb-tip .tb-archnote { margin:0 0 5px; font-size:10.5px; }
.tb-tip .tb-archnote b { display:inline; margin:0; font:700 10.5px/1.35 Georgia,serif; color:#e3bf7c; }
#character .tb-row span { font-size:6.5px; letter-spacing:.02em; overflow-wrap:normal; word-break:normal; }
#character .tb-x { opacity:.72; background:linear-gradient(45deg,transparent 46.5%,#c2271d 46.5% 53.5%,transparent 53.5%),linear-gradient(-45deg,transparent 46.5%,#c2271d 46.5% 53.5%,transparent 53.5%); }

#character .tb-plaque.tight .tb-or { padding:0 2px; font-size:7px; }
#character .tb-node.excluded .tb-x { opacity:.6; }
#character .tb-key.excluded .tb-x { inset:8px; }
#character .tb-assign button { padding:4px 2px; font-size:9px; }
/* ---------- readability pass (ajan:yazi): bigger, bolder, brighter text; the board scales, its text does not shrink below ~11px ---------- */
#character .tb-fit { --inv:max(1, calc(1 / var(--s, 1))); }
#character .tb-wrap { --sans:'Source Sans 3','Segoe UI',system-ui,sans-serif; }
/* top bar */
#character .tb-points b { color:#b8a585; }
#character .tb-points span { font:700 12px/1.15 var(--sans); letter-spacing:.16em; color:#e6c88f; }
#character .tb-points small { font:600 12px/1.2 var(--sans); letter-spacing:.02em; color:#cdb994; }
#character .tb-spent small { font:600 12px/1.2 var(--sans); color:#cdb994; }
/* board text: font-size × --inv keeps the on-screen size readable when the board is scaled down */
#character .tb-ptitle b { font-size:max(14px, calc(12.5px * var(--inv))); }
#character .tb-ptitle small { font:600 calc(11.5px * var(--inv))/1.2 var(--sans); color:#d2bf9a; }
#character .tb-paths { gap:2px; }
#character .tb-paths i { font:700 calc(12px * var(--inv))/1.05 var(--sans); letter-spacing:.05em; filter:brightness(1.3) saturate(1.1); text-shadow:0 1px 1px #000, 0 0 4px #000; }
#character .tb-keycap { font:700 calc(11.5px * var(--inv))/1 var(--sans); letter-spacing:.12em; color:#dcc396; text-shadow:0 1px 1px #000, 0 0 4px #000; }
#character .tb-or, #character .tb-plaque.tight .tb-or { font:600 calc(11.5px * var(--inv))/1.05 var(--sans); font-style:normal; color:#e2cfa8; padding:0 4px; border-color:#5d4730; }
#character .tb-plaque.tight .tb-or { padding:0 2px; }
#character .tb-plaque > b { top:2px; font:700 calc(11.5px * var(--inv))/1 var(--sans); letter-spacing:.05em; filter:brightness(1.3); text-shadow:0 1px 1px #000, 0 0 4px #000; }
#character .tb-row { width:58px; left:2px; }
#character .tb-row b { font-size:max(16px, calc(14px * var(--inv))); color:#e2bf7e; }
#character .tb-row span { font:700 calc(11px * var(--inv))/1.05 var(--sans); letter-spacing:0; color:#d4bd92; overflow-wrap:normal; word-break:normal; }
#character .tb-gate { font:700 calc(12px * var(--inv))/1 var(--sans); font-style:normal; }
#character .tb-row.open .tb-gate { color:#c9b78f; }
#character .tb-rank { font:700 calc(11.5px * var(--inv))/1 var(--sans); padding:1px 3px; color:#e6f0b4; border-color:#6b5638; }
#character .tb-tier { font:800 calc(11.5px * var(--inv))/1 var(--sans); font-style:normal; color:#ffe1a0; }
#character .tb-cap { font:700 calc(11.5px * var(--inv))/1.1 var(--sans); }
#character .tb-lvl { font:700 calc(11.5px * var(--inv))/1 var(--sans); color:#ffc4aa; bottom:-8px; }
#character .tb-lvl svg { width:calc(8px * var(--inv)); height:calc(8px * var(--inv)); }
#character .tb-ord { width:calc(15px * var(--inv)); height:calc(15px * var(--inv)); font:800 calc(11.5px * var(--inv))/1 var(--sans); }
/* side panel */
#character .tb-side .tb-kicker { font:700 11.5px/1.25 var(--sans); letter-spacing:.1em; color:#d6b884; }
#character .tb-side .tb-desc { font-size:13px; color:#e2d7c0; }
#character .tb-side .tb-rule, #character .tb-side .tb-delta { font-size:12.5px; color:#c8b898; }
#character .tb-side .tb-rule.excl { color:#e08c72; }
#character .tb-side .tb-archnote { font:400 12.5px/1.35 var(--sans); color:#cbbb9c; }
#character .tb-facts dt { font:600 12.5px/1.3 var(--sans); color:#c4b394; }
#character .tb-facts dd { font:700 12.5px/1.3 var(--sans); color:#f6e7c6; }
#character .tb-learn:disabled { color:#c2b291; background:#221a15; border-color:#5d4730; }
#character .tb-assign small { font:700 11px/1 var(--sans); color:#d6b884; }
#character .tb-assign button { font:700 12px/1 var(--sans); padding:5px 3px; }
/* bottom bar: big slot icons and labels, plain readable help text */
#character .tb-ident { font:400 13px/1.3 Georgia,serif; color:#d8c8a8; }
#character .tb-ident span { font-size:12.5px; }
#character .tb-slots { gap:12px; padding:5px 12px 9px; }
#character .tb-slot { width:clamp(60px, 4vw, 76px); height:clamp(60px, 4vw, 76px); }
#character .tb-slot-btn { border-radius:5px; }
#character .tb-slot-btn i { font:400 28px/1 Georgia,serif; color:#9a7d55; }
#character .tb-slot.empty .tb-slot-btn { border-color:#7a6040; background:#14100c; }
#character .tb-slotcap { bottom:-10px; gap:3px; padding:2px 7px; font:700 clamp(13.5px, .8vw, 16px)/1.1 var(--sans); letter-spacing:.04em; color:#fff0c8; background:#1d130b; border:1px solid #c99a50; border-radius:3px; box-shadow:0 1px 4px #000; }
#character .tb-slotcap svg { width:9px; height:13px; }
#character .tb-slot-x { width:18px; height:18px; right:-7px; top:-7px; font-size:14px; }
#character .tb-help { font:600 clamp(13.5px, .78vw, 15px)/1.4 var(--sans); font-style:normal; color:#eadfc6; text-shadow:0 1px 2px #000, 0 0 6px #000; }
/* hover card */
.tb-tip { font-size:13px; }
.tb-tip small { font:700 11px/1.2 'Source Sans 3','Segoe UI',sans-serif; color:#d6b884; }
.tb-tip p { color:#e2d7c0; }
.tb-tip dt { font:600 12px/1.3 'Source Sans 3','Segoe UI',sans-serif; color:#c4b394; } .tb-tip dd { font:700 12px/1.3 'Source Sans 3','Segoe UI',sans-serif; }
.tb-tip .tb-tip-hint { font:600 12px/1.3 'Source Sans 3','Segoe UI',sans-serif; color:#c4b394; }
.tb-tip em { font-size:12.5px; }
.tb-tip .tb-archnote, .tb-tip .tb-archnote b { font-size:12px; } .tb-tip .tb-archnote { color:#cbbb9c; }
@media (max-height:620px), (max-width:1000px) {
  #character .tb-points small, #character .tb-spent small { font-size:11px; }
  #character .tb-side .tb-desc { font-size:12px; }
  #character .tb-side .tb-kicker { font-size:11px; }
  #character .tb-facts dt, #character .tb-facts dd { font-size:11.5px; }
  #character .tb-learn, #character .tb-refund { font-size:11.5px; }
  #character .tb-slot { width:50px; height:50px; }
  #character .tb-slots { gap:9px; padding:4px 10px 8px; }
  #character .tb-slotcap { font-size:12px; padding:1px 5px; bottom:-9px; }
  #character .tb-ident { font-size:12px; } #character .tb-help { font-size:12px; }
}
/* /ajan:yazi */
#character .tb-plaque { margin-top:-9px; padding-top:9px; }
#character .tb-plaque.tight > b { font-size:calc(11px * var(--inv)); letter-spacing:0; padding:0 1px; }
/* /ajan:yazi plaque */
#character .tb-plaque.tight .tb-or { display:none; }
#character .tb-facts { gap:2px 8px; }
#character .tb-facts dt, #character .tb-facts dd { font-size:12px; }
/* ---------- size pass (ajan:boyut): bigger icons, less dead space, middle-sized text, centred bars ---------- */
/* board text: never below its design size on a small board, and grows at most 1.25x on a big one */
#character .tb-fit { --inv:max(calc(1 / var(--s, 1)), min(1, calc(1.25 / var(--s, 1)))); }
#character .tb-wrap { gap:6px; grid-template-rows:minmax(0,1fr) auto; }
/* points / spent sit at the left of the bottom bar, the respec button at its right */
#character .tb-left, #character .tb-right { min-width:0; display:flex; align-items:center; gap:12px; }
#character .tb-right { justify-content:flex-end; }
#character .tb-left .tb-ident { flex:1 1 auto; }
#character .tb-points b { font-size:24px; }
#character .tb-spent { padding-left:10px; }
#character .tb-spent b { font-size:14px; }
#character .tb-respec { flex:none; padding:5px 10px; font:600 12px/1.1 var(--sans); }
#character .tb-main { gap:6px; grid-template-columns:minmax(0,1fr) clamp(196px,22%,290px); }
/* panels: slim header strip (30), narrow row gutter (numeral + gate; the row name stays in its tooltip) */
#character .tb-panel::after { top:36px; }
#character .tb-panel header { height:32px; gap:6px; padding:0 7px; }
#character .tb-crest { width:24px; height:24px; }
#character .tb-ptitle b { font-size:calc(12.5px * var(--inv)); line-height:1.2; }
#character .tb-ptitle small { line-height:1.1; }
#character .tb-ptitle small, #character .tb-paths i { font-size:calc(11px * var(--inv)); }
#character .tb-paths { gap:1px; }
#character .tb-row { left:2px; width:32px; gap:3px; }
#character .tb-row b { font-size:calc(14px * var(--inv)); }
#character .tb-row span { display:none; }
#character .tb-gate { font-size:calc(11px * var(--inv)); }
#character .tb-gate svg { width:calc(8px * var(--inv)); height:calc(8px * var(--inv)); }
/* keystone label sits left of its diamond (two short lines), the diamond hugs the bigger icon */
#character .tb-keycap { transform:translateY(-50%); white-space:normal; text-align:right; font-size:calc(11px * var(--inv)); line-height:1.15; letter-spacing:.04em; }
#character .tb-crown { width:calc(var(--sz) * .98); height:calc(var(--sz) * .98); }
#character .tb-plaque, #character .tb-plaque.tight { margin-top:0; padding-top:0; }
#character .tb-plaque > b { top:3px; font-size:calc(11px * var(--inv)); }
#character .tb-plaque.tight > b { font-size:calc(10.5px * var(--inv)); }
#character .tb-or { font-size:calc(11px * var(--inv)); }
/* badges: 10-11 px on screen, text centred inside the box */
#character .tb-rank, #character .tb-tier, #character .tb-cap, #character .tb-lvl, #character .tb-ord { font-size:calc(10.5px * var(--inv)); line-height:1; }
#character .tb-cap, #character .tb-lvl { justify-content:center; padding:2px 4px; }
#character .tb-tier { left:3px; bottom:2px; }
#character .tb-lock { width:18px; height:18px; }
/* side panel: room above and below, middle-sized bold text */
#character .tb-wrap aside.tb-side { padding:12px 12px 11px; gap:5px; }
#character .tb-side .tb-kicker { font-size:11px; }
#character .tb-sideicon { width:44px; height:44px; }
#character .tb-side h3 { font-size:17px; }
#character .tb-side .tb-status { font:italic 600 12px/1.25 var(--sans); }
#character .tb-side .tb-desc { font:500 clamp(12.5px, .68vw, 13px)/1.36 var(--sans); }
#character .tb-side .tb-rule, #character .tb-side .tb-delta { font:italic 600 12px/1.3 var(--sans); }
#character .tb-side .tb-archnote { font:500 clamp(12px, .66vw, 13px)/1.32 var(--sans); }
#character .tb-facts dt, #character .tb-facts dd { font-size:clamp(12px, .66vw, 13px); }
#character .tb-learn, #character .tb-refund { font-size:12px; padding:7px 8px; }
#character .tb-assign small { font-size:11px; }
#character .tb-assign { grid-template-columns:max-content repeat(3,minmax(0,1fr)); }
#character .tb-assign button { font-size:11.5px; padding:5px 4px; }
/* bottom bar: identity, slot bar and help on one middle line, slot bar dead centre */
#character .tb-bottom { gap:12px; padding:5px 4px 1px; align-items:center; }
#character .tb-ident { font:600 12.5px/1.3 var(--sans); }
#character .tb-ident span { font-size:12px; }
#character .tb-help { font:600 12.5px/1.35 var(--sans); }
#character .tb-slots { gap:10px; padding:5px 10px 11px; align-self:center; justify-self:center; }
#character .tb-slot { width:clamp(48px, 3.4vw, 64px); height:clamp(48px, 3.4vw, 64px); }
#character .tb-slot-btn i { font-size:24px; }
#character .tb-slotcap { bottom:-9px; justify-content:center; padding:2px 6px; font-size:12.5px; line-height:1; }
#character .tb-slotcap svg { width:8px; height:12px; }
@media (max-height:620px), (max-width:1000px) {
  #character .tb-main { grid-template-columns:minmax(0,1fr) clamp(170px,24%,230px); }
  #character .tb-wrap aside.tb-side { padding:9px 9px 8px; gap:5px; }
  #character .tb-side h3 { font-size:15px; }
  #character .tb-side .tb-desc { font-size:12px; }
  #character .tb-slot { width:44px; height:44px; }
  #character .tb-slots { gap:8px; padding:4px 9px 10px; }
  #character .tb-slotcap { font-size:12px; padding:1px 5px; }
  #character .tb-ident, #character .tb-help { font-size:12px; }
}
/* /ajan:boyut */

/* v330: the slot bar sits centred in its strip (more room above, no empty band below) */
#character .tb-bottom { padding:16px 4px 4px; align-items:center; }
#character .tb-slots { align-self:center; }
/* v331: slot group centred top/bottom: the key captions hang 10px below the boxes, so the bottom padding is 10px larger */
#character .tb-slots { padding:12px 13px 21px; }
@media (max-height:700px) { #character .tb-slots { padding:9px 11px 17px; } }

/* Fact names remain readable in compact inspectors; values keep their own column. */
#character .tb-facts div { align-items:baseline; }
#character .tb-facts dt { min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip; }
#character .tb-facts dd { flex-shrink:0; }

/* Inspector actions stay visible; only an overflowing description scrolls. */
#character .tb-wrap aside.tb-side { display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;overflow:hidden;container-type:inline-size;container-name:skill-inspector; }
#character .tb-sidebody { min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b5638 transparent; }
#character .tb-sidebody>* { flex-shrink:0; }
#character .tb-sidebody:focus-visible { outline:1px solid #c3a571;outline-offset:-1px; }
#character .tb-actions { margin-top:0; }
#character .tb-facts dt { overflow-wrap:normal;word-break:normal; }
@container skill-inspector (max-width:230px) {
  #character .tb-facts { grid-template-columns:minmax(0,1fr); }
}