/* ===== Janela de PERSONAGEM (Claude, 21/10 — refeita com cara de jogo) =====
   Abas: Atributos · Técnicas · Talentos (árvore) · Visual. Gemas saíram daqui: agora vão direto na peça (client/src/gem-sockets.js).
   Arte: assets/ui/login/moldura.png (janela), medalhao.png, placa.png · assets/ui/mobile/slot*.png, btn9*.png, botao*.png, painel.png.
   Pixel art sempre em escala inteira; fonte Pix só em 16/32 px. JS: client/src/character.js (prefixo cw-). */
#character-menu{--cls:#f7d77a;--ink:#0d0914;--well:#150f1e;--line:#3a2b4d;--gold:#f7d77a;--gold2:#d69a34;--text:#e3dcef;--dim:#a596b8;
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;pointer-events:auto;overflow:auto;color:var(--text);
  background:radial-gradient(ellipse at 50% 40%,#1d1230cc,#07040cf0 75%)}
#character-menu.hidden{display:none}
#character-menu *{box-sizing:border-box}
#character-menu h2,#character-menu h3,#character-menu h4,#character-menu p,#character-menu dl,#character-menu dd{margin:0}
#character-menu img{image-rendering:pixelated}
#character-menu button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:0;box-shadow:none;text-shadow:none;min-height:0}
#character-menu button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#character-menu kbd{display:inline-block;font:16px/1 Pix,monospace;color:var(--gold);background:#0d0914;padding:1px 4px;box-shadow:inset 0 0 0 1px #6a5232;-webkit-font-smoothing:none}

/* ---------- moldura ---------- */
#character-menu .cw-frame{position:relative;width:min(1040px,100%);height:min(780px,calc(100dvh - 120px));display:flex;flex-direction:column;
  border:32px solid transparent;border-image:url(/client/assets/ui/login/moldura.png) 16 / 32px stretch;image-rendering:pixelated;
  background:radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--cls) 10%,#2a1d3c) 0,#1d1529 45%,#130d1b 100%) padding-box;
  box-shadow:0 24px 60px #000d;animation:cw-open .22s cubic-bezier(.2,1.3,.4,1)}
#character-menu .cw-frame:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background:radial-gradient(#5a447a 1px,transparent 1.5px) 0 0/8px 8px}
@keyframes cw-open{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* ---------- cabeçalho e abas ---------- */
#character-menu .cw-head{position:relative;display:flex;align-items:flex-end;gap:12px;margin:-14px 0 0;padding:0 4px 0;border-bottom:4px solid #0d0914;box-shadow:0 2px 0 #3d2c56}
#character-menu .cw-crest{flex:none;width:48px;height:48px;margin-bottom:6px;background:url(/client/assets/ui/mobile/i_heroi.png) center/32px no-repeat,url(/client/assets/ui/mobile/slot_on.png) 0 0/48px no-repeat;filter:drop-shadow(0 2px 0 #0d0914)}
#character-menu .cw-head h2{font:32px/1 Pix,monospace;color:var(--gold);text-shadow:2px 2px 0 #6e3d0e,4px 4px 0 #0d0914;margin:0 14px 12px 0;-webkit-font-smoothing:none;white-space:nowrap}
#character-menu .cw-tabs{display:flex;gap:4px;align-items:flex-end;flex:1;min-width:0}
#character-menu .cw-tabs button{position:relative;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px 0 8px;margin-bottom:-4px;
  border:8px solid transparent;border-bottom-width:4px;border-image:url(/client/assets/ui/mobile/btn9.png) 4 fill / 8px 8px 4px stretch;
  font:16px/1 Pix,monospace;color:#bfb1d4;-webkit-font-smoothing:none;filter:brightness(.8);transition:filter .12s,transform .12s}
#character-menu .cw-tabs button:hover{filter:brightness(1.05);color:#fff3cf}
#character-menu .cw-tabs button.on{border-image-source:url(/client/assets/ui/mobile/btn9_on.png);filter:none;color:#fff3cf;transform:translateY(-4px);z-index:2}
#character-menu .cw-tab-ico{width:32px;height:32px;background:center/32px no-repeat;image-rendering:pixelated;flex:none}
#character-menu .t-attrs{background-image:url(/client/assets/icons/peitoral_ferro.png)}
#character-menu .t-skills{background-image:url(/client/assets/icons/elixir_arcano.png)}
#character-menu .t-talents{background-image:url(/client/assets/icons/flor_lunar.png)}
#character-menu .t-look{background-image:url(/client/assets/icons/capuz_aurora.png)}
#character-menu .cw-badge{position:absolute;top:-12px;right:-8px;min-width:24px;height:22px;padding:0 5px;display:grid;place-items:center;font:16px/1 Pix,monospace;color:#1a1126;background:var(--gold);box-shadow:0 0 0 2px #0d0914,0 0 10px #f7d77aaa;animation:cw-badge 1.6s ease-in-out infinite}
#character-menu .cw-badge:empty{display:none}
@keyframes cw-badge{50%{transform:translateY(-2px)}}
#character-menu .cw-x{flex:none;align-self:center;width:40px;height:40px;margin:0 0 6px 6px;position:relative;
  background:url(/client/assets/ui/mobile/botao.png) 0 0/40px no-repeat!important}
#character-menu .cw-x:hover{background-image:url(/client/assets/ui/mobile/botao_on.png)!important}
#character-menu .cw-x:before,#character-menu .cw-x:after{content:"";position:absolute;left:12px;top:18px;width:16px;height:4px;background:#efe6d6;box-shadow:0 2px 0 #1a1126;transform:rotate(45deg)}
#character-menu .cw-x:after{transform:rotate(-45deg)}

/* ---------- corpo ---------- */
#character-menu .cw-body{flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr);gap:14px;padding-top:14px}
#character-menu .cw-main{min-width:0;min-height:0;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#584274 transparent}
#character-menu .cw-pane[hidden]{display:none}
#character-menu .cw-pane{display:flex;flex-direction:column;gap:12px;min-height:100%}
#character-menu .cw-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#character-menu .cw-pane-head h3{font:32px/1 Pix,monospace;color:#fff3cf;text-shadow:2px 2px 0 #0d0914;-webkit-font-smoothing:none}
#character-menu .cw-pane-head p{margin-top:4px;font:13px/1.4 Txt,sans-serif;color:var(--dim);max-width:560px}
/* orbe com os pontos livres */
#character-menu .cw-orb{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff3c4 0,#f7d77a 18%,#d69a34 45%,#6e3d0e 80%);box-shadow:0 0 0 3px #0d0914,0 0 0 5px #d69a34,0 0 24px #f7d77a88;animation:cw-orb 2.4s ease-in-out infinite}
#character-menu .cw-orb b{font:32px/1 Pix,monospace;color:#1a1126;text-shadow:1px 1px 0 #fff3c488;-webkit-font-smoothing:none}
#character-menu .cw-orb small{font:11px/1.1 Txt,sans-serif;color:#3d1f08;text-align:center;font-weight:700}
#character-menu .cw-orb.empty{background:radial-gradient(circle at 40% 35%,#5a4a70,#2a2038 70%);box-shadow:0 0 0 3px #0d0914,0 0 0 5px #3d2c56;animation:none}
#character-menu .cw-orb.empty b{color:#a596b8;text-shadow:none}#character-menu .cw-orb.empty small{color:#8e7fa6}
@keyframes cw-orb{50%{box-shadow:0 0 0 3px #0d0914,0 0 0 5px #f7d77a,0 0 36px #f7d77acc}}

/* ---------- espaço de item (usado em tudo) ---------- */
#character-menu .cw-slot{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;background:url(/client/assets/ui/mobile/slot.png) 0 0/48px no-repeat}
#character-menu .cw-slot img{width:32px;height:32px}
#character-menu .cw-slot.big{width:72px;height:72px;background-size:72px}
#character-menu .cw-slot.big img{width:48px;height:48px}
#character-menu .cw-slot kbd{position:absolute;right:-2px;bottom:-4px;padding:0 3px;background:#0d0914;box-shadow:0 0 0 1px #6a5232}
#character-menu .cw-lock{position:absolute;right:-4px;top:-4px;width:20px;height:20px;background:url(/client/assets/ui/cadeado.png) center/20px no-repeat;filter:drop-shadow(0 1px 0 #0d0914)}
#character-menu .cw-sk .cw-lock{inset:0;right:auto;top:auto;width:100%;height:100%;background-size:24px}

/* ---------- herói ---------- */
#character-menu .cw-hero{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;scrollbar-width:none}
#character-menu .cw-arch{position:relative;flex:none;height:184px;display:grid;place-items:center;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;
  background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--cls) 45%,transparent) 0,transparent 60%),linear-gradient(#2a1d3c,#110b18) padding-box}
#character-menu .cw-arch:before{content:"";position:absolute;left:50%;bottom:8px;width:120px;height:18px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--cls) 60%,transparent),transparent 70%);animation:cw-glow 2.4s ease-in-out infinite}
@keyframes cw-glow{50%{opacity:.5}}
#character-menu .cw-arch canvas{position:relative;width:144px;height:168px;image-rendering:pixelated}
#character-menu .cw-medal{position:absolute;left:-14px;top:-14px;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:url(/client/assets/ui/login/medalhao.png) -56px 0/112px 56px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0d0914)}
#character-menu .cw-medal small{font:10px/1 Txt,sans-serif;font-weight:700;color:#d69a34;margin-bottom:-1px}
#character-menu .cw-medal b{font:16px/1 Pix,monospace;color:#fff3c4;text-shadow:1px 1px 0 #0d0914;-webkit-font-smoothing:none}
#character-menu .cw-plate{text-align:center;padding:6px 8px;border:16px solid transparent;border-width:8px;border-image:url(/client/assets/ui/login/placa.png) 8 fill / 8px stretch;margin-top:-4px}
#character-menu .cw-name{font:16px/1.2 Pix,monospace;color:#fff3cf;text-shadow:1px 1px 0 #0d0914;-webkit-font-smoothing:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#character-menu .cw-class{display:flex;flex-direction:column;margin-top:2px;font:13px/1.25 Txt,sans-serif}
#character-menu .cw-class b{color:var(--cls)}#character-menu .cw-class small{font-size:11px;color:var(--dim)}
#character-menu .cw-evo-btn{width:100%;padding:8px;font:16px/1 Pix,monospace!important;color:#1a1126!important;background:linear-gradient(#fff3c4,#f7d77a)!important;box-shadow:0 0 0 2px #0d0914,0 0 16px #f7d77a!important;animation:cw-orb 1.4s ease-in-out infinite;-webkit-font-smoothing:none}
#character-menu .cw-evo-btn small{display:block;font:11px Txt,sans-serif;color:#3d2c10;margin-top:3px}
#character-menu .cw-evo-tag{font:11px/1.4 Txt,sans-serif;text-align:center;color:var(--evo,#c4bccf);padding:5px 6px;background:#0d0914;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--evo,#584274) 55%,transparent)}
#character-menu .cw-evo-tag.dim{color:#8e7fa6;box-shadow:inset 0 0 0 1px #3a2b4d}
#character-menu .cw-evo:empty{display:none}
#character-menu .cw-xp{position:relative;height:22px;background:#0d0914;box-shadow:inset 0 0 0 2px #3d2c56;overflow:hidden}
#character-menu .cw-xp i{position:absolute;left:2px;top:2px;bottom:2px;max-width:calc(100% - 4px);background:linear-gradient(#c8a2ff,#8d5bd6 55%,#5a2f9a);box-shadow:inset 0 2px 0 #e9d9ff88}
#character-menu .cw-xp small{position:absolute;inset:0;display:grid;place-items:center;font:11px/1 Txt,sans-serif;font-weight:700;color:#fff;text-shadow:1px 1px 0 #0d0914}
#character-menu .cw-sheet{display:flex;flex-direction:column;gap:2px}
#character-menu .cw-stat{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:2px 6px 2px 2px;background:linear-gradient(90deg,#1d1529,transparent)}
#character-menu .cw-sico{display:grid;place-items:center;width:32px;height:32px}#character-menu .cw-sico img{width:32px;height:32px}
#character-menu .cw-stat dt{font:13px Txt,sans-serif;color:var(--dim)}
#character-menu .cw-stat dd{font:16px/1 Pix,monospace;color:#efe6d6;-webkit-font-smoothing:none;text-align:right}
#character-menu .cw-hp dd{color:#ff8a8a}#character-menu .cw-mp dd{color:#8ad7ef}#character-menu .cw-atk dd{color:#f1ce8b}#character-menu .cw-def dd{color:#c2b5ee}#character-menu .cw-crit dd{color:#f7d77a}#character-menu .cw-spd dd{color:#8fd1b8}

/* ---------- botões de ação ---------- */
#character-menu .cw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:8px solid transparent;border-image:url(/client/assets/ui/login/botao_n.png) 4 fill / 8px stretch;
  font:16px/1 Pix,monospace;color:#fff3c4;text-shadow:2px 2px 0 #4a0d18;-webkit-font-smoothing:none;box-shadow:0 3px 0 #0d0914}
#character-menu .cw-btn:hover:not(:disabled){border-image-source:url(/client/assets/ui/login/botao_h.png)}
#character-menu .cw-btn:active:not(:disabled){border-image-source:url(/client/assets/ui/login/botao_p.png);transform:translateY(2px);box-shadow:0 1px 0 #0d0914}
#character-menu .cw-btn:disabled{filter:grayscale(1) brightness(.6);cursor:default}

/* ---------- atributos ---------- */
.cw-class-guide,.creation-attribute-guide{padding:10px 12px;border:1px solid #a9894d;background:linear-gradient(115deg,#372a3d,#181323);color:#e9e0ed;min-width:0;flex-shrink:0;font:13px/1.4 Txt,sans-serif;overflow-wrap:anywhere}
.class-guide-title{font-size:11px;letter-spacing:.5px;color:#f7d77a;margin-bottom:6px}
.class-guide-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.class-guide-columns>div{min-width:0}
.class-guide-columns small,.class-guide-columns strong,.class-guide-columns span{display:block}
.class-guide-columns small{font-size:11px;color:#bdb0c7}
.class-guide-columns strong{font-size:16px;color:#fff0c2;margin:2px 0}
.class-guide-columns span{font-size:12px;color:#cbbfd4}
#character-menu .cw-attr-txt .cw-primary-label{font:10px/1.3 Txt,sans-serif;letter-spacing:.5px;color:#f7d77a;margin:0 0 5px}
.creation-attribute-guide{margin:10px 0}
@media(max-width:400px){.class-guide-columns{gap:8px}.class-guide-columns strong{font-size:14px}}
#character-menu .cw-attrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#character-menu .cw-attr{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 14px 14px 12px;
  border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 14%,#1d1529),#120c19) padding-box}
#character-menu .cw-attr .cw-slot{grid-row:1/3}
#character-menu .cw-attr-txt{min-width:0}
#character-menu .cw-attr-txt strong{display:block;font:16px/1.1 Pix,monospace;color:var(--ac);text-shadow:1px 1px 0 #0d0914;-webkit-font-smoothing:none}
#character-menu .cw-attr-txt small{display:block;margin-top:4px;font:12px/1.35 Txt,sans-serif;color:var(--dim)}
#character-menu .cw-attr-txt em{display:inline-block;margin-top:6px;padding:2px 6px;font:normal 12px/1.2 Txt,sans-serif;font-weight:700;color:#1a1126;background:var(--ac)}
#character-menu .cw-attr-txt .cw-preview{display:block;margin-top:4px;color:#93e0a0;font-weight:700}
#character-menu .cw-attr-val{grid-column:3;grid-row:1;justify-self:center;font:32px/1 Pix,monospace;color:#fff3cf;text-shadow:2px 2px 0 #0d0914;-webkit-font-smoothing:none}
#character-menu .cw-attr-val.zero{color:#5f5874}
#character-menu .cw-plus{grid-column:3;grid-row:2;justify-self:center;position:relative;width:44px;height:44px;background:url(/client/assets/ui/mobile/botao_on.png) 0 0/44px no-repeat!important;filter:drop-shadow(0 0 6px #f7d77a88)}
#character-menu .cw-plus:before,#character-menu .cw-plus:after{content:"";position:absolute;left:14px;top:20px;width:16px;height:4px;background:#fff3c4;box-shadow:0 2px 0 #6e3d0e}
#character-menu .cw-plus:after{transform:rotate(90deg)}
#character-menu .cw-plus:hover:not(:disabled){filter:brightness(1.15) drop-shadow(0 0 10px #f7d77a)}
#character-menu .cw-plus:active:not(:disabled){transform:translateY(2px)}
#character-menu .cw-plus:disabled{background-image:url(/client/assets/ui/mobile/botao.png)!important;filter:grayscale(.8) brightness(.6);cursor:default}
#character-menu .cw-plus:disabled:before,#character-menu .cw-plus:disabled:after{background:#5f5874}

/* ---------- técnicas ---------- */
#character-menu .cw-loadout{display:flex;align-items:center;gap:8px;padding:4px 12px;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:#100b16 padding-box}
#character-menu .cw-lbl{font:16px/1 Pix,monospace;color:var(--gold2);margin-right:8px;-webkit-font-smoothing:none}
#character-menu .cw-loadout button{position:relative;width:56px;height:56px;display:grid;place-items:center;background:url(/client/assets/ui/mobile/slot_tec.png) 0 0/48px no-repeat!important;background-position:4px 4px!important}
#character-menu .cw-loadout button img{width:32px;height:32px}
#character-menu .cw-loadout button kbd{position:absolute;left:0;top:0;padding:0 3px;background:#0d0914}
#character-menu .cw-loadout button.evo{background-image:url(/client/assets/ui/mobile/slot_on.png)!important}
#character-menu .cw-loadout button.sel{filter:drop-shadow(0 0 6px #b98cff)}
#character-menu .cw-loadout button:hover{transform:translateY(-2px)}
#character-menu .cw-skillgrid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;min-height:0}
#character-menu .cw-skills{display:flex;flex-direction:column;gap:3px}
#character-menu .cw-sk{display:flex;align-items:center;gap:10px;padding:3px 10px 3px 4px;text-align:left;background:linear-gradient(90deg,#1d1529,#140e1c);box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-sk .cw-slot{background-image:url(/client/assets/ui/mobile/slot_tec.png)}
#character-menu .cw-sk.evo .cw-slot{background-image:url(/client/assets/ui/mobile/slot_on.png)}
#character-menu .cw-sk:hover{background:linear-gradient(90deg,#2a1f3a,#1a1324)}
#character-menu .cw-sk.sel{background:linear-gradient(90deg,#3a2654,#1d1529);box-shadow:inset 3px 0 0 #b98cff,inset 0 0 0 1px #584274}
#character-menu .cw-sk.locked{opacity:.5;cursor:default}
#character-menu .cw-sk-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
#character-menu .cw-sk-txt strong{font:16px/1.1 Pix,monospace;color:#f4e7c6;-webkit-font-smoothing:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#character-menu .cw-sk-txt small{font:12px Txt,sans-serif;color:var(--dim)}
#character-menu .cw-pips{display:flex;gap:4px}
#character-menu .cw-pips i{width:14px;height:6px;background:#2c2140;box-shadow:0 0 0 1px #0d0914}
#character-menu .cw-pips i.lit{background:#f7d77a;box-shadow:0 0 0 1px #0d0914,0 0 6px #f7d77a99}
#character-menu .cw-detail{display:flex;flex-direction:column;gap:10px;padding:14px;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:linear-gradient(#1f1630,#120c19) padding-box}
#character-menu .cw-detail-top{display:flex;gap:12px;align-items:center}
#character-menu .cw-tec{flex:none;width:72px;height:72px;display:grid;place-items:center;background:url(/client/assets/ui/mobile/tecnica.png) 0 0/72px no-repeat}
#character-menu .cw-tec img{width:48px;height:48px}
#character-menu .cw-detail h4{font:16px/1.2 Pix,monospace;color:#fff3cf;-webkit-font-smoothing:none;margin-bottom:6px}
#character-menu .cw-tag,#character-menu .cw-rank{display:inline-block;margin-right:6px;padding:2px 6px;font:11px Txt,sans-serif;font-weight:700}
#character-menu .cw-tag{color:#1a1126;background:#b98cff}#character-menu .cw-rank{color:#f7d77a;box-shadow:inset 0 0 0 1px #6a5232}
#character-menu .cw-desc{font:13px/1.45 Txt,sans-serif;color:var(--text)}
#character-menu .cw-costs{display:flex;gap:14px;font:12px Txt,sans-serif;color:var(--dim)}
#character-menu .cw-costs span:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:1px}
#character-menu .cw-costs .mana:before{background:#45c6e8}#character-menu .cw-costs .cd:before{background:#f7d77a}
#character-menu .cw-effect{display:flex;flex-direction:column;gap:3px;padding:10px;background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-effect small{font:11px Txt,sans-serif;font-weight:700;letter-spacing:1px;color:#8e7fa6}
#character-menu .cw-effect b{font:13px/1.35 Txt,sans-serif;font-weight:700;color:#efe6d6}
#character-menu .cw-effect b.next{color:#8fd1b8}
#character-menu .cw-up{margin-top:auto;width:100%}

/* ---------- árvore de talentos ---------- */
#character-menu .cw-tree{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}
#character-menu .cw-branch{display:flex;flex-direction:column;min-width:0;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--br) 18%,transparent),transparent 60%),linear-gradient(#18111f,#0f0a14) padding-box}
#character-menu .cw-branch header{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;border-bottom:2px solid color-mix(in srgb,var(--br) 40%,#2c2140)}
#character-menu .cw-bglyph{flex:none;width:36px;height:36px;display:grid;place-items:center;font:20px/1 sans-serif;color:var(--br);background:radial-gradient(circle,var(--brd),#0d0914 75%);box-shadow:0 0 0 2px #0d0914,0 0 0 4px color-mix(in srgb,var(--br) 60%,#3d2c56),0 0 12px color-mix(in srgb,var(--br) 50%,transparent);border-radius:50%}
#character-menu .cw-branch header div{flex:1;min-width:0}
#character-menu .cw-branch header b{display:block;font:16px/1 Pix,monospace;color:var(--br);-webkit-font-smoothing:none}
#character-menu .cw-branch header small{display:block;margin-top:3px;font:11px/1.25 Txt,sans-serif;color:var(--dim)}
#character-menu .cw-branch header>i{font:normal 32px/1 Pix,monospace;color:#fff3cf;text-shadow:2px 2px 0 #0d0914;-webkit-font-smoothing:none}
#character-menu .cw-branch-body{position:relative;flex:1;min-height:300px;margin:4px 0 8px}
#character-menu .cw-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#character-menu .cw-links line{stroke:#2c2140;stroke-width:6;stroke-linecap:square}
#character-menu .cw-links line.on{stroke:var(--br);filter:drop-shadow(0 0 4px var(--br))}
#character-menu .cw-req{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:2;min-width:22px;padding:2px 3px;text-align:center;font:16px/1 Pix,monospace;color:#5f5874;background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140;-webkit-font-smoothing:none}
#character-menu .cw-req:after{content:"pts";display:block;font:9px/1 Txt,sans-serif;font-weight:700}
#character-menu .cw-req.ok{color:var(--br);box-shadow:inset 0 0 0 1px var(--br)}
#character-menu .cw-node{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);display:grid;place-items:center;
  background:url(/client/assets/ui/mobile/slot.png) 2px 2px/48px no-repeat!important;transition:transform .12s,filter .12s;z-index:1}
#character-menu .cw-node img{width:32px;height:32px}
#character-menu .cw-nrank{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:1px 4px;font:16px/1 Pix,monospace;color:#8e7fa6;background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140;white-space:nowrap;-webkit-font-smoothing:none}
#character-menu .cw-node:hover{transform:translate(-50%,-50%) scale(1.08);z-index:3}
#character-menu .cw-node.locked{filter:grayscale(1) brightness(.6)}
#character-menu .cw-node.locked img{opacity:.55}
#character-menu .cw-node.locked .cw-lock{filter:none}
#character-menu .cw-node.idle{filter:brightness(.8)}
#character-menu .cw-node.open{filter:drop-shadow(0 0 6px var(--br));animation:cw-avail 1.3s ease-in-out infinite}
#character-menu .cw-node.open .cw-nrank{color:#fff3cf;box-shadow:inset 0 0 0 1px var(--br)}
#character-menu .cw-node.has{background-image:url(/client/assets/ui/mobile/slot_tec.png)!important;filter:drop-shadow(0 0 4px var(--br))}
#character-menu .cw-node.has .cw-nrank{color:var(--br);box-shadow:inset 0 0 0 1px var(--br)}
#character-menu .cw-node.max{background-image:url(/client/assets/ui/mobile/slot_on.png)!important;filter:drop-shadow(0 0 8px #f7d77a)}
#character-menu .cw-node.max .cw-nrank{color:#1a1126;background:#f7d77a;box-shadow:0 0 0 1px #0d0914}
#character-menu .cw-node.sel{outline:2px dashed #fff3cf;outline-offset:3px}
#character-menu .cw-node.cw-pop{animation:cw-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes cw-avail{50%{filter:drop-shadow(0 0 12px var(--br)) brightness(1.15)}}
@keyframes cw-pop{40%{transform:translate(-50%,-50%) scale(1.3)}}
#character-menu .cw-tree-foot{display:flex;gap:12px;align-items:stretch}
#character-menu .cw-tdetail{flex:1;min-height:72px;display:flex;gap:12px;align-items:center;padding:8px 12px;background:#0d0914;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--br,#3d2c56) 60%,#2c2140)}
#character-menu .cw-tdetail h4{font:16px/1.2 Pix,monospace;color:var(--br,#fff3cf);-webkit-font-smoothing:none}
#character-menu .cw-tdetail h4 small{font:16px Pix,monospace;color:#8e7fa6}
#character-menu .cw-tdetail p{margin-top:3px;font:13px/1.35 Txt,sans-serif;color:var(--text)}
#character-menu .cw-tdetail .next{color:#8fd1b8}
#character-menu .cw-tdetail em{display:block;margin-top:3px;font:normal 12px Txt,sans-serif;font-weight:700}
#character-menu .cw-tdetail em.no{color:#ff8a8a}#character-menu .cw-tdetail em.yes{color:#f7d77a}
#character-menu .cw-tip{font:13px Txt,sans-serif;color:var(--dim)}
#character-menu .cw-reset{display:flex;align-items:center}
#character-menu .cw-reset:empty{display:none}

/* ---------- visual ---------- */
#character-menu .cw-look{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#character-menu .cw-aura,#character-menu .cw-costume{display:flex;flex-direction:column;gap:8px;padding:14px;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:#130d1b padding-box}
#character-menu .cw-paint{grid-column:1/-1;min-width:0;padding:14px;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:#130d1b padding-box}
#character-menu .paint-title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:12px}
#character-menu .paint-title b{color:var(--gold);font:13px Txt,sans-serif}
#character-menu .paint-layout{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1fr);gap:14px}
#character-menu .paint-stage{min-width:0;align-self:start;background:radial-gradient(ellipse at center,#3d2b58,#0d0914 75%);border:1px solid #594368;padding:8px;text-align:center}
#character-menu .paint-stage canvas{display:block;width:100%;max-width:240px;height:auto;image-rendering:pixelated;margin:auto}
#character-menu .paint-stage small{display:block;color:var(--gold);font:12px/1.4 Txt,sans-serif;margin:5px 0}
#character-menu .paint-directions,#character-menu .paint-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:6px}
#character-menu .paint-views{grid-template-columns:repeat(3,minmax(0,1fr))}
#character-menu .cw-paint button{min-height:40px;padding:6px;background:#241a33;box-shadow:inset 0 0 0 1px #594368;font:12px/1.3 Txt,sans-serif;white-space:normal}
#character-menu .cw-paint button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--gold);color:#ffe6a2}
#character-menu .cw-paint button:disabled{opacity:.5;cursor:default}
#character-menu .paint-controls{min-width:0;display:flex;flex-direction:column;gap:10px}
#character-menu .paint-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#character-menu .paint-colors label{display:flex;flex-direction:column;gap:6px;font:12px/1.3 Txt,sans-serif;color:#ead8ef}
#character-menu .paint-colors input{display:block;width:100%;height:44px;padding:3px;border:1px solid #72538e;background:#241a33;cursor:pointer}
#character-menu .paint-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#character-menu .paint-swatches{display:flex;justify-content:center;gap:2px;margin-bottom:5px}
#character-menu .paint-swatches i{display:block;width:15px;height:15px;border:1px solid #94809e}
#character-menu .paint-option{display:flex;align-items:center;gap:8px;min-height:36px;font:13px/1.4 Txt,sans-serif}
#character-menu .paint-option input{width:20px;height:20px;accent-color:#b58bd5}
#character-menu .cw-paint .paint-hint{font-size:11px;color:#bba9c9}
#character-menu .cw-paint .paint-price{font-size:12px;line-height:1.5}.paint-price b{color:#f7d77a}
#character-menu .paint-actions{display:flex;flex-direction:column;gap:6px}
#character-menu .cw-paint [data-paint-save]{background:#49324f;min-height:44px;color:#ffe6a2;font-weight:bold}
#character-menu [data-paint-status]{font:12px/1.45 Txt,sans-serif;color:#b9d8be;min-height:18px}
#character-menu .paint-library{margin-top:14px;padding-top:12px;border-top:1px solid #493450}
#character-menu [data-paint-library]{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#character-menu [data-paint-active]{min-width:100px;max-width:160px}
@media(max-width:640px){#character-menu .paint-layout{grid-template-columns:1fr}#character-menu .paint-stage{width:100%;max-width:300px;justify-self:center}#character-menu .cw-paint{padding:10px}#character-menu .paint-colors{gap:5px}}
#character-menu .cw-look h4{font:16px/1 Pix,monospace;color:var(--gold);-webkit-font-smoothing:none}
#character-menu .cw-look p{font:13px/1.4 Txt,sans-serif;color:var(--dim)}
#character-menu .cw-auras{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
#character-menu .cw-auras button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;font:12px Txt,sans-serif;color:var(--text);background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-auras button i{width:28px;height:28px;transform:rotate(45deg);background:var(--aura);box-shadow:0 0 0 2px #0d0914,0 0 0 3px #584274,0 0 12px var(--aura)}
#character-menu .cw-auras button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--aura),0 0 12px color-mix(in srgb,var(--aura) 50%,transparent)}
#character-menu .cw-auras button:disabled{opacity:.4;cursor:default}
#character-menu .cw-costumes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
#character-menu .cw-costumes button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font:12px Txt,sans-serif;color:var(--text);background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-costumes button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold)}
#character-menu .cw-none{width:20px;height:20px;border:3px solid #5f5874;border-radius:50%;position:relative}
#character-menu .cw-none:after{content:"";position:absolute;left:6px;top:-3px;width:3px;height:20px;background:#5f5874;transform:rotate(45deg)}
#character-menu .cw-aura-now i{display:inline-block;width:12px;height:12px;margin-right:6px;background:var(--aura);vertical-align:-1px}

/* ---------- rodapé e efeitos ---------- */
#character-menu .cw-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 -14px;padding:8px 4px 0;border-top:2px solid #2c2140}
#character-menu .cw-status{font:13px Txt,sans-serif;color:#f4e7c6}
#character-menu .cw-foot small{font:12px Txt,sans-serif;color:var(--dim);white-space:nowrap}
#character-menu .cw-gain{animation:cw-pop2 .6s ease-out}
@keyframes cw-pop2{30%{filter:brightness(1.6) drop-shadow(0 0 12px #f7d77a)}}
#character-menu .cw-spark{position:absolute;z-index:9;width:5px;height:5px;background:#f7d77a;pointer-events:none}

/* ---------- telas menores e celular ---------- */
@media (max-width:900px){
  #character-menu .cw-body{grid-template-columns:1fr}
  #character-menu .cw-hero{display:grid;grid-template-columns:160px 1fr;gap:8px;overflow:visible}
  #character-menu .cw-arch{grid-row:1/5;height:auto;min-height:180px}
  #character-menu .cw-sheet{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr)}
  #character-menu .cw-tabs span{display:none}
  #character-menu .cw-head h2{display:none}
  #character-menu .cw-frame{height:auto;max-height:calc(100dvh - 32px);overflow:auto}
  #character-menu .cw-main{overflow:visible}
  #character-menu .cw-body{flex:none}
  #character-menu .cw-loadout{flex-wrap:wrap}
  #character-menu .cw-foot{flex-wrap:wrap}
}
@media (max-width:640px){
  #character-menu{padding:4px}
  #character-menu .cw-frame{border-width:16px;border-image-width:16px}
  #character-menu .cw-attrs,#character-menu .cw-look,#character-menu .cw-skillgrid{grid-template-columns:1fr}
  #character-menu .cw-tree{grid-template-columns:1fr;min-height:0}
  #character-menu .cw-branch-body{min-height:320px}
  #character-menu .cw-tree-foot{flex-direction:column}
  #character-menu .cw-lbl{display:none}
  #character-menu .cw-loadout{gap:4px;padding:4px}
  #character-menu .cw-loadout button{width:48px;height:52px;background-position:0 4px!important}
  #character-menu .cw-tabs{gap:2px}
  #character-menu .cw-tabs button{padding:0 6px}
  #character-menu .cw-crest{display:none}
}
html.touch-device #character-menu .cw-frame{max-height:100%!important;overflow:auto}
@media (prefers-reduced-motion:reduce){#character-menu *{animation:none!important;transition:none!important}}

/* ---------- builds de classe (22/10): escolha 1 de 3 técnicas por espaço (shared/builds.js) ---------- */
#character-menu .cw-detail{overflow-y:auto}
#character-menu .cw-build{display:flex;flex-direction:column;gap:6px;padding:10px;background:#0d0914;box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-build>small{font:11px Txt,sans-serif;font-weight:700;letter-spacing:1px;color:#8e7fa6}
#character-menu .cw-build-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#character-menu .cw-build-opts button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 5px;min-height:76px;background:#1a1226;color:#efe6d6;border:0;box-shadow:inset 0 0 0 2px #2c2140;cursor:pointer;font:11px/1.2 Txt,sans-serif;font-weight:700;text-align:center}
#character-menu .cw-build-opts button img{width:32px;height:32px;image-rendering:pixelated}
#character-menu .cw-build-opts button:hover{box-shadow:inset 0 0 0 2px #6a5232}
#character-menu .cw-build-opts button.sel{box-shadow:inset 0 0 0 2px #f7d77a,0 0 8px #f7d77a55}
#character-menu .cw-build-opts button.cur{background:linear-gradient(#24331f,#1a1226)}
#character-menu .cw-build-opts em{position:absolute;top:2px;right:3px;font:9px Txt,sans-serif;font-style:normal;color:#8fd16a}
#character-menu .cw-build-desc{font:12px/1.4 Txt,sans-serif;color:var(--text)}
#character-menu .cw-build-desc b{color:#fff3cf}#character-menu .cw-build-desc i{color:#8fd1b8;font-style:normal;font-weight:700}
#character-menu .cw-build-desc.dim{color:var(--dim)}
#character-menu .cw-build-go{width:100%}
#character-menu .cw-styles:empty{display:none}
#character-menu .cw-styles{display:grid;gap:8px;background:#100d19;border:1px solid #51435f;padding:10px;margin-bottom:10px;font:12px/1.4 Txt,sans-serif;color:#e1dacb}
#character-menu .cw-styles>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#character-menu .cw-styles [data-puppet-style]{min-height:40px;padding:7px 3px;color:var(--path);background:#1a1424;border:1px solid #4a3e58;font:700 12px Txt,sans-serif;cursor:pointer}
#character-menu .cw-styles [aria-pressed=true]{border-color:var(--path);box-shadow:inset 0 0 0 1px var(--path)}
#character-menu .cw-styles p{margin:0}
#character-menu .cw-styles small{color:#bcb1c7;font:11px/1.4 Txt,sans-serif}

/* ---------- estilos de jogo (25/10): 3 por classe + troca ao lado do Melhorar (shared/class-styles.js) ---------- */
#character-menu .cw-styles{gap:8px;padding:10px 12px;background:linear-gradient(#17111f,#0f0b16);border:0;box-shadow:inset 0 0 0 1px #3a2d4c,inset 0 2px 0 #241a33}
#character-menu .cw-styles>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#character-menu .cw-styles>header small{font:700 11px Txt,sans-serif;letter-spacing:1px;color:#8e7fa6}
#character-menu .cw-styles>header b{font:14px/1 Pix,monospace;-webkit-font-smoothing:none;letter-spacing:.5px}
#character-menu .cw-styles>div.cw-style-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#character-menu .cw-style-cards button{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 8px;color:#efe6d6;background:#1a1424;border:0;box-shadow:inset 0 0 0 1px #4a3e58;font:700 12px/1.15 Txt,sans-serif;text-align:left;cursor:pointer}
#character-menu .cw-style-cards button:hover{box-shadow:inset 0 0 0 1px var(--path)}
#character-menu .cw-style-cards button[aria-pressed=true]{background:linear-gradient(90deg,color-mix(in srgb,var(--path) 22%,#1a1424),#1a1424);box-shadow:inset 0 0 0 2px var(--path)}
#character-menu .cw-style-cards button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--path);box-shadow:0 0 8px var(--path)}
#character-menu .cw-glyph{flex:none;display:grid;place-items:center;width:26px;height:26px;font:17px/1 serif;font-style:normal;color:var(--path);background:#0d0914;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--path) 55%,#0d0914);text-shadow:0 0 6px var(--path)}
#character-menu .cw-style-cards span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#character-menu .cw-style-cards em{flex:none;font:700 10px Txt,sans-serif;font-style:normal;color:#bcb1c7}
#character-menu .cw-styles>div.cw-style-info{display:flex;flex-direction:column;gap:7px;padding:8px 10px;background:#0d0914;box-shadow:inset 3px 0 0 var(--path)}
#character-menu .cw-style-kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#character-menu .cw-style-kit span{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.5;filter:saturate(.4)}
#character-menu .cw-style-kit span.on{opacity:1;filter:none}
#character-menu .cw-style-kit img{width:32px;height:32px;image-rendering:pixelated}
#character-menu .cw-style-kit small{font:10px/1.1 Txt,sans-serif!important;text-align:center;color:#d8cfe6!important}
#character-menu .cw-style-bonus b{color:var(--path)}
#character-menu .cw-style-info .cw-btn{min-height:38px}
/* lista: bolinha da cor do estilo + botão ⇄ para trocar aquela técnica */
#character-menu .cw-sk{position:relative}
#character-menu .cw-sk-sty{flex:none;width:6px;height:6px;margin-left:auto;background:var(--path);box-shadow:0 0 0 1px #0d0914,0 0 6px var(--path)}
#character-menu .cw-sk-swap{flex:none;display:grid;place-items:center;width:26px;height:26px;font:700 15px/1 Txt,sans-serif;color:#f7d77a;background:#0d0914;box-shadow:inset 0 0 0 1px #6a5232;cursor:pointer}
#character-menu .cw-sk-swap:hover{background:#2a1f12;box-shadow:inset 0 0 0 1px #f7d77a}
/* detalhe: Melhorar e as 3 opções lado a lado */
#character-menu .cw-actrow{margin-top:auto;display:grid;gap:8px;align-items:stretch}
#character-menu .cw-actrow.has-swap{grid-template-columns:minmax(120px,1fr) auto}
#character-menu .cw-actrow .cw-up{margin:0;height:100%}
#character-menu .cw-actrow .cw-build{gap:4px;padding:5px 6px;background:#0d0914}
#character-menu .cw-actrow .cw-build>small{font-size:10px;letter-spacing:.8px;text-align:center}
#character-menu .cw-actrow .cw-build-opts{grid-template-columns:repeat(3,46px);gap:4px}
#character-menu .cw-actrow .cw-build-opts button{min-height:46px;height:46px;padding:4px;justify-content:center;box-shadow:inset 0 0 0 2px #2c2140,inset 0 -3px 0 var(--path)}
#character-menu .cw-actrow .cw-build-opts button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#character-menu .cw-actrow .cw-build-opts button img{width:32px;height:32px}
#character-menu .cw-actrow .cw-build-opts button.cur{background:linear-gradient(#24331f,#13101c)}
#character-menu .cw-actrow .cw-build-opts button.sel{box-shadow:inset 0 0 0 2px #f7d77a,inset 0 -3px 0 var(--path),0 0 8px #f7d77a55}
#character-menu .cw-actrow .cw-build-opts em{top:auto;bottom:4px;right:3px;width:6px;height:6px;font-size:0;background:#8fd16a;box-shadow:0 0 0 1px #0d0914}
#character-menu .cw-build-preview{display:flex;flex-direction:column;gap:8px;padding:9px 10px;background:#0d0914;box-shadow:inset 3px 0 0 var(--path),inset 0 0 0 1px #2c2140}
#character-menu .cw-tag.cw-tag-sty{color:var(--path);background:#0d0914;box-shadow:inset 0 0 0 1px var(--path)}
@media (max-width:640px){
  #character-menu .cw-actrow.has-swap{grid-template-columns:1fr}
  #character-menu .cw-actrow .cw-build-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  #character-menu .cw-style-cards button{flex-direction:column;align-items:center;text-align:center;gap:3px}
}
#character-menu .cw-style-info p{font:12px/1.35 Txt,sans-serif;color:#e1dacb}
#character-menu .cw-style-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
#character-menu .cw-style-row .cw-style-kit{display:flex;gap:3px}
#character-menu .cw-style-row .cw-style-kit span{width:34px;height:34px;display:grid;place-items:center;background:#1a1226;box-shadow:inset 0 0 0 1px #2c2140}
#character-menu .cw-style-row .cw-style-kit span.on{box-shadow:inset 0 0 0 1px var(--path)}
#character-menu .cw-style-row .cw-style-kit img{width:28px;height:28px}
#character-menu .cw-style-row .cw-btn{min-height:38px;padding:0 12px;white-space:nowrap}
@media (max-width:640px){#character-menu .cw-style-row{grid-template-columns:1fr}#character-menu .cw-style-row .cw-style-kit{justify-content:center}}
/* Necromante (25/10): 4 opções por espaço e 4 estilos — grade 2×2 em vez de deixar o 4º sozinho numa linha */
#character-menu .cw-styles>div.cw-style-cards:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
#character-menu .cw-build-opts:has(>:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
#character-menu .cw-actrow .cw-build-opts:has(>:nth-child(4)){grid-template-columns:repeat(2,46px)}
@media (max-width:640px){
  #character-menu .cw-actrow .cw-build-opts:has(>:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
  #character-menu .cw-styles>div.cw-style-cards:has(>:nth-child(4)) button{flex-direction:row;text-align:left;gap:6px}
}

/* ===================== ÁRVORE DE HABILIDADES (Claude, 27/10) — client/src/skill-tree-ui.js ===================== */
#character-menu .cw-skilltree{display:flex;flex-direction:column;gap:10px}
#character-menu .st-cols,#character-menu .st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
#character-menu .st-cols header{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:6px 10px;background:linear-gradient(90deg,color-mix(in srgb,var(--path) 26%,#1a1126),#150e1e);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--path) 55%,#3d2c56)}
#character-menu .st-cols header i{grid-row:span 2;font:20px Pix,monospace;font-style:normal;color:var(--path)}
#character-menu .st-cols header b{font:14px Pix,monospace;color:var(--path);letter-spacing:1px}
#character-menu .st-cols header small{font:11px/1.25 Txt,sans-serif;color:#b8aec6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#character-menu .st-grid{position:relative}
#character-menu .st-node{position:relative;display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;min-height:54px;padding:5px 8px 5px 5px;text-align:left;cursor:pointer;color:#efe6d6;
  background:linear-gradient(#211830,#140e1d);border:0;box-shadow:inset 0 0 0 1px #3d2c56,0 2px 0 #0b0712;transition:transform .1s,box-shadow .15s}
#character-menu .st-node:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #8e7fa6,0 2px 0 #0b0712}
#character-menu .st-node.sel{box-shadow:inset 0 0 0 2px #f7d77a,0 0 12px #f7d77a55}
#character-menu .st-node.has,#character-menu .st-node.max{background:linear-gradient(#2c2038,#191122)}
#character-menu .st-node.max{box-shadow:inset 0 0 0 1px #d69a34,0 2px 0 #0b0712}
#character-menu .st-node.max.sel{box-shadow:inset 0 0 0 2px #f7d77a,0 0 12px #f7d77a55}
#character-menu .st-node.locked{filter:grayscale(.85) brightness(.65)}
#character-menu .st-ico{position:relative;display:grid;place-items:center;width:44px;height:44px;background:#0b0712;box-shadow:inset 0 0 0 1px #3d2c56}
#character-menu .st-node.passive .st-ico{border-radius:50%}
#character-menu .st-ico img{width:32px;height:32px;image-rendering:pixelated}
#character-menu .st-ico kbd{position:absolute;right:-4px;bottom:-4px;font:11px Pix,monospace;color:#1a1126;background:#f7d77a;padding:0 4px}
#character-menu .st-ico .cw-lock{position:absolute;inset:auto auto -2px -2px}
#character-menu .st-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#character-menu .st-txt b{font:13px/1.1 Pix,monospace;color:#f2e7dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#character-menu .st-txt small{font:10px Pix,monospace;color:#a99bb6;letter-spacing:.5px}
#character-menu .st-node.has .st-txt small,#character-menu .st-node.max .st-txt small{color:#f7d77a}
#character-menu .st-bar{display:block;height:4px;background:#0b0712;box-shadow:0 0 0 1px #3d2c56}
#character-menu .st-bar em{display:block;height:100%;background:linear-gradient(90deg,#d69a34,#f7d77a)}
#character-menu .st-link{align-self:start;justify-self:center;width:4px;height:12px;margin-top:-10px;background:#3d2c56;pointer-events:none;z-index:0}
#character-menu .st-link.on{background:#f7d77a}
#character-menu .st-detail{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:8px solid transparent;border-image:url(/client/assets/ui/mobile/painel.png) 8 fill / 16px stretch;background:linear-gradient(#1f1630,#120c19) padding-box}
#character-menu .st-dhead{display:flex;gap:12px;align-items:center}
#character-menu .st-dhead h4{margin:0 0 4px;font:18px Pix,monospace;color:var(--path,#f7d77a)}
#character-menu .st-reqs{margin:0;font:12px Txt,sans-serif;color:#c4bccf}
#character-menu .st-reqs span{margin-right:8px}#character-menu .st-reqs .ok{color:#9be37a}#character-menu .st-reqs .no{color:#ff8a8a}
#character-menu .st-why{margin:0;font:12px Txt,sans-serif;color:#ffb0a0}
#character-menu .st-barpick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#character-menu .st-barpick small{font:10px Pix,monospace;color:#a99bb6;margin-right:2px}
#character-menu .st-barpick button{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;background:#0b0712;border:0;box-shadow:inset 0 0 0 1px #3d2c56}
#character-menu .st-barpick button.on{box-shadow:inset 0 0 0 2px #f7d77a}
#character-menu .st-barpick button img{width:30px;height:30px;image-rendering:pixelated}
#character-menu .st-barpick kbd{position:absolute;right:-3px;bottom:-3px;font:10px Pix,monospace;color:#1a1126;background:#c4bccf;padding:0 3px}
#character-menu .st-barpick .st-empty{width:22px;height:22px;border:2px dashed #3d2c56}
#character-menu .st-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font:12px Pix,monospace;color:#a99bb6}
#character-menu .cw-attr-short{display:inline-block;min-width:34px;margin-right:4px;padding:0 4px;font:12px Pix,monospace;color:#1a1126;background:var(--ac);text-align:center}
#character-menu .cw-attr.cw-rec:not(.cw-primary){box-shadow:inset 3px 0 0 var(--ac)}
@media (max-width:760px){#character-menu .st-cols,#character-menu .st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#character-menu .st-node{grid-template-columns:36px 1fr;padding:4px}#character-menu .st-ico{width:36px;height:36px}#character-menu .st-ico img{width:26px;height:26px}#character-menu .st-txt b{font-size:11px;white-space:normal}#character-menu .st-cols header small{display:none}}

/* ---- (27/10) CAMINHOS: escolha como jogar + o que subir ---- */
#character-menu .cp-paths{display:grid;gap:8px;padding:10px 12px;margin-bottom:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--path) 16%,#1a1126),#150e1e);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--path) 45%,#3d2c56)}
#character-menu .cp-paths>small{font:11px Pix,monospace;letter-spacing:1px;color:#bcb1c7}
#character-menu .cp-paths>p{margin:0;font:14px/1.35 Txt,sans-serif;color:#efe6f7}
#character-menu .cp-path-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
#character-menu .cp-path-btns button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 10px;border:0;cursor:pointer;font:14px Pix,monospace;color:#d9cfe4;background:#1d1429;box-shadow:inset 0 0 0 2px #3d2c56}
#character-menu .cp-path-btns button i{font-style:normal;font-size:18px;color:var(--path)}
#character-menu .cp-path-btns button[aria-pressed="true"]{color:#1a1126;background:var(--path);box-shadow:inset 0 0 0 2px #fff8,0 0 12px color-mix(in srgb,var(--path) 60%,transparent)}
#character-menu .cp-path-btns button[aria-pressed="true"] i{color:#1a1126}
#character-menu .cp-plan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;margin-bottom:10px;background:#140d1c;box-shadow:inset 0 0 0 1px #3d2c56;font:15px Txt,sans-serif;color:#efe6f7}
#character-menu .cp-plan small{color:#9f94ad}
#character-menu .cp-plan em{font:13px Txt,sans-serif;color:#9f94ad}
/* Fonte de leitura e sem sombra duplicada nos botões de atributos. */
#character-menu .cp-plan .cw-btn{min-height:40px;background:#f7d77a;color:#1a1126;font:700 14px/16px Txt,sans-serif;padding:6px 14px;animation:cpPulse 1.6s ease-in-out infinite;text-shadow:none;-webkit-font-smoothing:antialiased}
/* Mantém a aparência já usada pelo botão de redefinição. */
#character-menu .cp-plan .cw-reset-btn{font:700 14px/16px Txt,sans-serif;color:#fff3cf;text-shadow:none;animation:none;-webkit-font-smoothing:antialiased}
@keyframes cpPulse{50%{box-shadow:0 0 14px #f7d77a99}}
#character-menu .cw-attrs6{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#character-menu .cw-attr6{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;background:#18111f;box-shadow:inset 0 0 0 1px #3d2c56;opacity:.78}
#character-menu .cw-attr6.up{opacity:1;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 18%,#18111f),#18111f);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ac) 70%,#3d2c56)}
#character-menu .cw-attr6 .cw-slot{width:44px;height:44px}
#character-menu .cw-attr6 .cw-slot img{width:32px;height:32px}
#character-menu .cw-attr6 .cw-attr-txt{display:grid;gap:2px;min-width:0}
#character-menu .cw-attr6 strong{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:13px Pix,monospace;color:#efe6f7}
#character-menu .cw-attr6 .cw-attr-short{color:var(--ac)}
#character-menu .cw-attr6 small{font:12px/1.3 Txt,sans-serif;color:#cfc5da}
#character-menu .cw-attr6 .cw-preview{color:#8d829b;font-size:11px}
#character-menu .cw-attr6 .cw-attr-val{font:18px Pix,monospace;color:var(--ac);min-width:28px;text-align:right}
#character-menu .cw-up-tag{font:10px Pix,monospace;font-style:normal;padding:1px 5px;background:var(--ac);color:#1a1126;letter-spacing:1px}
/* árvore: pontos livres, próximo passo e coluna do caminho */
#character-menu .st-points{font:14px Txt,sans-serif;color:#cfc5da;margin:-2px 0 8px}
#character-menu .st-points b{font:18px Pix,monospace;color:#f7d77a}
#character-menu .st-step{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--path) 22%,#1a1126),#150e1e);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--path) 70%,#3d2c56)}
#character-menu .st-step.done{padding:6px 12px}
#character-menu .st-step span{display:grid;gap:2px}
#character-menu .st-step small{font:11px Pix,monospace;letter-spacing:1px;color:var(--path)}
#character-menu .st-step b{font:15px Txt,sans-serif;color:#fff}
#character-menu .st-step b em{font-style:normal;color:var(--path);font-weight:700}
#character-menu .st-step i{font:12px Txt,sans-serif;font-style:normal;color:#a99fb7}
#character-menu .st-step .cw-btn{min-height:42px;animation:cpPulse 1.6s ease-in-out infinite}
#character-menu .st-step .st-nopts{font:12px Txt,sans-serif;letter-spacing:0;color:#9f94ad}
#character-menu .st-cols header small{display:block;-webkit-line-clamp:unset;white-space:normal}
#character-menu .st-cols header:not(.mine){opacity:.6}
#character-menu .st-cols header.mine{box-shadow:inset 0 0 0 2px var(--path),0 0 10px color-mix(in srgb,var(--path) 45%,transparent)}
#character-menu .st-node.st-next{animation:stNext 1.2s ease-in-out infinite;box-shadow:inset 0 0 0 2px #f7d77a}
@keyframes stNext{50%{box-shadow:inset 0 0 0 2px #f7d77a,0 0 16px #f7d77a}}
@media (max-width:1100px){#character-menu .cw-attrs6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  #character-menu .cw-attrs6{grid-template-columns:1fr}
  #character-menu .cw-attr6 .cw-preview{display:none}
  #character-menu .cp-path-btns{grid-template-columns:repeat(3,minmax(0,1fr))}
  #character-menu .cp-path-btns button{font-size:12px;padding:4px;flex-direction:column;gap:2px}
  #character-menu .st-cols header small{display:block;font-size:10px}
  #character-menu .st-step .cw-btn{width:100%}
}