/* =====================================================================
   MENU DE SKILLS — opção A "Grimório" (03/10). Desenho: src/ui/skills-grimorio.js.
   PC: coluna das 4 skills + detalhe grande. Celular (≤760): fileira de 4
   ícones em cima, detalhe embaixo. Toda letra usa --text-scale (100–130%).
   ===================================================================== */
#characterSkillsPanel .skg{--sk-ouro:#d9b45a;--sk-ouro2:#8a6a2c;--sk-borda:#343b46;--sk-fundo:#161b22;--sk-tx:#dfe5ee;--sk-sub:#8b95a4;
  display:grid;gap:10px;color:var(--sk-tx);min-width:0}
#characterSkillsPanel .skg img{image-rendering:auto}
.skg-topo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #3a3326;border-radius:10px;background:linear-gradient(120deg,#231d14,#171a20)}
.skg-topo-tx{min-width:0}
.skg-topo-tx>span{display:block;color:var(--sk-ouro);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.skg-topo-tx>strong{display:block;margin-top:2px;font-size:calc(11px * var(--text-scale,1));color:#cfd6df;font-weight:600;line-height:1.35}
.skg-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #3b3f48;border-radius:8px;background:#12151b;white-space:nowrap}
.skg-chip>span{color:var(--sk-sub);font-size:calc(8.5px * var(--text-scale,1));font-weight:900;letter-spacing:.6px}
.skg-chip>b{font-size:calc(14px * var(--text-scale,1));color:#e7edf5;font-variant-numeric:tabular-nums}
.skg-chip.ouro{border-color:#6b5426}.skg-chip.ouro>b{color:#f0cd6e}
.skg-moeda{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.skg-sem-arte{display:inline-grid;place-items:center;box-sizing:border-box;border:1px dashed currentColor;border-radius:50%;font-style:normal;color:#9aa5b5;opacity:.85}
.skg-sem-arte::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}

.skg-grade{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-items:start}
.skg-trilho{display:grid;gap:6px;min-width:0}
.skg-tile{display:grid!important;grid-template-columns:54px minmax(0,1fr);gap:9px;align-items:center;width:100%;min-height:0!important;padding:7px!important;border:1px solid var(--sk-borda)!important;border-radius:10px!important;background:var(--sk-fundo)!important;text-align:left;color:inherit!important;cursor:var(--cur-mao,pointer);box-shadow:none!important}
.skg-tile:hover{border-color:#5a5032!important}
.skg-tile.sel{border-color:var(--sk-ouro)!important;background:linear-gradient(90deg,#2b2416,#171b22)!important;box-shadow:inset 0 0 0 1px rgba(217,180,90,.35)!important}
.skg-tile:focus-visible{outline:2px solid var(--sk-ouro);outline-offset:2px}
.skg-tile.trancada{opacity:.62}
.skg-tile-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:9px;background:radial-gradient(circle at 50% 35%,#2a3240,#0f1319 75%);overflow:hidden}
.skg-tile-ic em{position:absolute;inset:auto 0 0 0;padding:1px 0;background:rgba(0,0,0,.72);color:#e6c56b;font-style:normal;font-weight:900;font-size:calc(8.5px * var(--text-scale,1));text-align:center}
.skg-ic{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.skg-tile.trancada .skg-ic{filter:grayscale(1) brightness(.7)}
.skg-tile-tx{display:grid;gap:3px;min-width:0}
.skg-tile-tx b{font-size:calc(12px * var(--text-scale,1));line-height:1.2;overflow-wrap:anywhere}
.skg-tile-tx small{font-size:calc(9px * var(--text-scale,1));color:var(--sk-sub);font-variant-numeric:tabular-nums}
.skg-mini{display:block;height:4px;border-radius:2px;background:#262b34;overflow:hidden}.skg-mini>i{display:block;height:100%;background:#d4ae55}

.skg-det{display:grid;gap:10px;min-width:0;padding:12px;border:1px solid #3a3f49;border-radius:12px;background:linear-gradient(170deg,#1b2029,#13171d)}
.skg-palco{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:6px 12px 6px 4px;border-radius:10px;background:radial-gradient(ellipse at 18% 55%,#3a2a18 0%,#161a21 62%);overflow:hidden}
.skg-sprite{width:96px;max-width:100%;aspect-ratio:543/724;justify-self:center;background-size:400% 100%;background-repeat:no-repeat;background-position:66.667% 0;mix-blend-mode:screen;animation:skgQuadros .62s steps(4) infinite}
.skg-sprite.codigo{mix-blend-mode:normal;animation:none;background:none;position:relative}
.skg-sprite.codigo>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.skg-sprite.vazio{display:grid;place-items:center;mix-blend-mode:normal;animation:none}
@keyframes skgQuadros{from{background-position:0 0}to{background-position:133.333% 0}}
@media (prefers-reduced-motion:reduce){.skg-sprite{animation:none}}
body.graphics-lite .skg-sprite{animation:none}
.skg-nome{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0}
.skg-nome .skg-ic.g{width:52px;height:52px}
.skg-nome-tx{min-width:0}
.skg-nome-tx>span{display:block;color:var(--sk-ouro);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.6px;line-height:1.3}
.skg-nome-tx>h3{margin:2px 0;font-size:calc(17px * var(--text-scale,1));color:#f3f5f8;line-height:1.2;overflow-wrap:anywhere}
.skg-nome-tx>p{margin:0;color:#b5bfcc;font-size:calc(10.5px * var(--text-scale,1));line-height:1.4}
.skg-lv{font-size:calc(20px * var(--text-scale,1));color:#f2d27a;white-space:nowrap;font-variant-numeric:tabular-nums}
.skg-lv small{font-size:calc(11px * var(--text-scale,1));color:var(--sk-sub)}
.skg-aviso{margin:0;padding:7px 10px;border:1px solid #4b3d22;border-radius:8px;background:#1b160d;color:#e6cf93;font-size:calc(10px * var(--text-scale,1));line-height:1.4}

.skg-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.skg-nums>span{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;min-width:0;padding:6px 8px;border:1px solid #333a45;border-radius:8px;background:#141920}
.skg-num-ic{grid-row:span 2;width:24px;height:24px;object-fit:contain}
.skg-nums b{font-size:calc(14px * var(--text-scale,1));color:#f0f3f7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.skg-nums small{font-size:calc(8.5px * var(--text-scale,1));color:#7f8a9b;text-transform:uppercase;letter-spacing:.4px;line-height:1.2}
.skg-sec{display:grid;gap:4px;min-width:0}
.skg-sec>span{color:var(--sk-ouro);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.7px}
.skg-sec>p{margin:0;color:#c3cbd6;font-size:calc(10.5px * var(--text-scale,1));line-height:1.4}
.skg-ests{display:flex;flex-wrap:wrap;gap:6px}
.skg-est{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 3px;border:1px solid color-mix(in srgb,var(--c) 45%,#2a2f38);border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#12161c);font-size:calc(10px * var(--text-scale,1));color:#e4e9f0;line-height:1.2}
.skg-est-ic{width:22px;height:22px;flex:0 0 22px;border-radius:50%;object-fit:contain}
.skg-est .skg-sem-arte{color:var(--c)}
.skg-ficha>summary{cursor:var(--cur-mao,pointer);color:var(--sk-ouro);font-size:calc(10.5px * var(--text-scale,1));font-weight:700;padding:2px 0}
.skg-ficha .skl-ficha{margin-top:6px}

.skg-up-box{display:grid;gap:8px;padding:10px;border:1px solid #4a3d22;border-radius:10px;background:#16130d}
.skg-pips{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px}
.skg-pips i{height:7px;border-radius:2px;background:#262b34}.skg-pips i.on{background:linear-gradient(180deg,#f2cf6e,#b8892e)}
.skg-pips i:nth-child(5n){margin-right:3px}
.skg-up-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.skg-up-tx{min-width:0}
.skg-up-tx>span{display:block;margin-bottom:2px;color:var(--sk-ouro);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.7px}
.skg-up-tx>strong{display:block;font-size:calc(14px * var(--text-scale,1));color:#91d3a4;font-variant-numeric:tabular-nums}
.skg-up-tx>strong i{font-style:normal;color:#8b95a4}.skg-up-tx>strong b{color:#b7f0c6}
.skg-up-tx>small{display:block;margin-top:3px;color:#8a93a1;font-size:calc(9.5px * var(--text-scale,1));line-height:1.35}
.skg-up{display:grid!important;gap:3px;justify-items:center;flex:0 0 auto;min-width:140px;min-height:46px!important;padding:6px 14px!important;border:1px solid var(--botao-ouro-borda)!important;border-radius:9px!important;background:var(--botao-ouro-fundo)!important;color:var(--botao-ouro-texto)!important;cursor:var(--cur-mao,pointer)}
.skg-up>span{font-size:calc(11.5px * var(--text-scale,1));font-weight:900;letter-spacing:.6px}
.skg-up>small{display:flex;align-items:center;gap:5px;font-size:calc(10px * var(--text-scale,1));color:#f5dc96;line-height:1;font-variant-numeric:tabular-nums}
.skg-up:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}
/* MAESTRIA (13/10, SQL 1651): trecho de marco em marco, custo em joia, Selo, requisito em vermelho, borda dourada por marco. */
.skg-pips{grid-template-columns:repeat(var(--n,20),minmax(0,1fr))}
.skg-pips.m i.on{background:linear-gradient(180deg,#ffe9a3,#e0a73a);box-shadow:0 0 4px rgba(255,200,90,.45)}
.skg-trecho{display:flex;align-items:baseline;gap:8px}
.skg-trecho>span{color:#f3c75b;font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.8px}
.skg-trecho>b{color:#f5e2a8;font-size:calc(11px * var(--text-scale,1));font-variant-numeric:tabular-nums}
.skg-cj{display:inline-flex;align-items:center;gap:2px}.skg-cj img{width:15px;height:15px;object-fit:contain}.skg-cj.falta b{color:#ff8f86}
.skg-up-tx>small.skg-falta{color:#ff7d74;font-weight:800}
.skg-up-tx>small.skg-mae{color:#e8c66a}
.skg-link{display:inline-block!important;min-height:0!important;margin-top:5px;padding:0!important;border:0!important;background:none!important;color:#8fc2ff!important;font-size:calc(10px * var(--text-scale,1));font-weight:800;text-decoration:underline;cursor:var(--cur-mao,pointer)}
.skg-selo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:0 0 auto}
.skg-selo .skg-up{min-width:110px}
.skg-mini.m>i{background:linear-gradient(90deg,#d4ae55,#ffe39a)}
.skg-tile.marco1 .skg-tile-ic{box-shadow:inset 0 0 0 1px #8a6a2c}
.skg-tile.marco2 .skg-tile-ic{box-shadow:inset 0 0 0 2px #a8812f}
.skg-tile.marco3 .skg-tile-ic{box-shadow:inset 0 0 0 2px #c99a3a,0 0 4px rgba(217,180,90,.35)}
.skg-tile.marco4 .skg-tile-ic{box-shadow:inset 0 0 0 2px #e0b04a,0 0 7px rgba(240,200,100,.45)}
.skg-tile.marco5 .skg-tile-ic{box-shadow:inset 0 0 0 2px #ffd56b,0 0 10px rgba(255,214,110,.55)}
.skg-tile.lenda .skg-tile-ic{animation:skgLenda 2.4s ease-in-out infinite}
@keyframes skgLenda{0%,100%{box-shadow:inset 0 0 0 2px #ffd56b,0 0 8px rgba(255,214,110,.45)}50%{box-shadow:inset 0 0 0 2px #fff0b8,0 0 16px rgba(255,226,140,.85)}}
@media (prefers-reduced-motion:reduce){.skg-tile.lenda .skg-tile-ic{animation:none}}
@media (max-width:760px){.skg-selo{width:100%}}
.skg-max{display:inline-grid;place-items:center;min-height:42px;padding:0 16px;border:1px solid #447157;border-radius:8px;color:#80d39c;font-weight:900;font-size:calc(10.5px * var(--text-scale,1))}

/* IA DAS SKILLS (04/10): a escolha que antes ficava no cartão Skills da batalha. */
.skg-ia{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 12px;border:1px solid #3b3f48;border-radius:10px;background:#12151b}
.skg-ia-tx{min-width:0}
.skg-ia-tx b{display:block;color:var(--sk-ouro);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.8px}
.skg-ia-tx small{display:block;margin-top:2px;color:#aeb7c7;font-size:calc(10.5px * var(--text-scale,1));line-height:1.3}
.skg-ia select{flex:none;min-height:38px;min-width:170px;max-width:100%;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#1a1e27;color:#eef1f6;font-size:calc(12px * var(--text-scale,1));font-weight:700}
/* Tablet / PC estreito */
@media (max-width:1120px){.skg-grade{grid-template-columns:210px minmax(0,1fr)}}
/* Celular e celular deitado estreito */
@media (max-width:760px){
  .skg-topo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .skg-topo-tx{grid-column:1/-1}
  .skg-chip{justify-content:center}
  .skg-ia{flex-wrap:wrap}
  .skg-ia select{flex:1 1 100%;min-height:42px}
  .skg-grade{grid-template-columns:minmax(0,1fr)}
  .skg-trilho{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .skg-tile{grid-template-columns:minmax(0,1fr);justify-items:center;padding:5px 3px!important;text-align:center}
  .skg-tile-ic{width:48px;height:48px}.skg-tile-ic .skg-ic{width:40px;height:40px}
  .skg-tile-tx{width:100%}
  .skg-tile-tx b{font-size:calc(9.5px * var(--text-scale,1));min-height:2.4em;display:grid;align-items:center}
  .skg-tile-tx small{font-size:calc(8.5px * var(--text-scale,1))}
  .skg-det{padding:10px}
  .skg-palco{grid-template-columns:76px minmax(0,1fr);gap:8px;padding:4px 8px 4px 2px}
  .skg-sprite{width:76px}
  .skg-nome{grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .skg-nome .skg-ic.g{display:none}
  .skg-nome-tx>h3{font-size:calc(15px * var(--text-scale,1))}
  .skg-nums{gap:5px}
  .skg-nums>span{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:6px 4px;row-gap:2px}
  .skg-num-ic{grid-row:auto;width:20px;height:20px}
  .skg-nums b{font-size:calc(13px * var(--text-scale,1))}
  .skg-up-linha{flex-direction:column;align-items:stretch}
  .skg-up{width:100%}
}
@media (max-width:380px){
  .skg-lv{font-size:calc(17px * var(--text-scale,1))}
  .skg-nums small{font-size:calc(7.5px * var(--text-scale,1));letter-spacing:0}
}

/* =====================================================================
   GRIMÓRIO 3 (03/11, thread "Árvores de skills", opção 3 do autor).
   Faixa de ícones em cima (Lv, vaga da barra, selo de marco) e a ficha
   larga: a skill (agora → depois, APRIMORAR) | Estrelas, Build do PvP e IA |
   Escolhas. No PC cabe sem rolar (o JS liga .cmp e, se faltar, o cabeçalho
   fino das Árvores); no celular vira uma coluna.
   ===================================================================== */
#characterSkillsPanel .skg.g3{gap:7px}
.skg.g3 .skg-topo{display:flex;align-items:center;gap:10px;padding:5px 8px}
.skg.g3 .skg-topo>.skg-trilho{flex:1 1 auto;min-width:0;border:0;background:none;padding:2px 0}
.skg.g3 .skg-topo .skg-alt{grid-column:auto;margin:0}
.skg.g3 .skg-topo-tx{display:none}
.skg-rec{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px;justify-items:stretch;margin-left:auto;flex:0 0 auto}
.skg-rec .skg-chip.ouro{grid-column:1/-1;justify-content:center}
.skg-rec .skg-chip{padding:3px 9px}.skg-rec .skg-chip>b{font-size:calc(13px * var(--text-scale,1))}
.skg.g3 .skg-trilho{display:flex;gap:7px;padding:5px 8px;border:1px solid var(--sk-borda);border-radius:10px;background:var(--sk-fundo);overflow-x:auto;scrollbar-width:thin}
.skg.g3 .skg-tile{position:relative;flex:0 0 auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px;width:auto;min-width:64px;padding:4px 6px!important;text-align:center}
.skg.g3 .skg-tile-ic{width:40px;height:40px;overflow:visible}
.skg.g3 .skg-tile-ic .skg-ic{width:36px;height:36px}
.skg.g3 .skg-tile-tx{width:100%;gap:2px;justify-items:center}
.skg.g3 .skg-tile-tx b{display:none}
.skg.g3 .skg-tile-tx small{font-size:calc(10.5px * var(--text-scale,1));color:#d9b45a;font-weight:800}
.skg.g3 .skg-mini{width:100%;height:3px}
.skg.g3 .skb-tile .skg-tile-tx b{display:block;font-size:calc(10px * var(--text-scale,1));white-space:nowrap}
.skg.g3 .skb-tile .skg-tile-tx small{display:none}
.skg-vaga{position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#d9b45a;color:#1a1206;font:900 calc(10px * var(--text-scale,1))/16px Arial,sans-serif;font-style:normal;text-align:center}
.skg-selo-ic{position:absolute;left:-5px;top:-5px;width:18px;height:18px;object-fit:contain}
.skg-largo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,2.15fr);gap:8px;align-items:start;min-width:0}
.skg.g3.extra .skg-largo{grid-template-columns:minmax(0,1fr)}
.skg-lado{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:8px;align-content:start;min-width:0}
.skg.g3.extra .skg-lado{grid-template-columns:minmax(0,1fr)}
.skg-lado>.skb-caixa{display:contents}
.skg-lado .skb-cab2,.skg-lado .skb-dica{grid-column:1/-1}
.skg-lado .skb-cab2:not(:has(.skb-troca)){display:none}
.skg-lado>.skb-caixa>.skb-passo:nth-of-type(1){grid-column:1}
.skg-lado>.skb-caixa>.skb-passo:nth-of-type(2){grid-column:2;grid-row:span 3}
.skg-lado .skb-rodape{grid-column:1;grid-template-columns:minmax(0,1fr);gap:6px}
.skg-lado .skb-passo{padding:8px 9px;gap:6px}
.skg-lado .skb-tem,.skg-lado .skb-est2-tx>b{display:none}
.skg-lado .skb-est2-tx .skb-estrelas{font-size:calc(15px * var(--text-scale,1))}
.skg-lado .skb-rod-item{padding:6px 8px}
.skg-lado .skg-ia{grid-column:1;margin-top:0;flex-wrap:wrap;gap:6px;padding:7px 9px}
.skg-lado .skg-ia select{min-width:0;flex:1 1 140px;min-height:32px}
.skg.g3 .skg-det{gap:7px;padding:9px 10px}
.skg.g3 .skg-palco{grid-template-columns:56px minmax(0,1fr);gap:8px;padding:2px 8px 2px 2px}
.skg.g3 .skg-sprite{width:56px}
.skg.g3 .skg-nome .skg-ic.g{display:none}
.skg.g3 .skg-nome{grid-template-columns:minmax(0,1fr) auto}
.skg.g3 .skg-lv{font-size:calc(22px * var(--text-scale,1));font-family:Georgia,serif}
.skg.g3 .skg-nums>span{padding:4px 7px}
.skg.g3 .skg-sec{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px}
.skg.g3 .skg-up-box{gap:5px;padding:7px 9px}
.skg.g3 .skg-up-linha{flex-direction:column;align-items:stretch;gap:6px}
.skg.g3 .skg-up{width:100%;min-height:40px!important}
.skg.g3 .skg-selo{width:100%}
.skg-trecho{align-items:center}
.skg-trecho>img{width:16px;height:16px;object-fit:contain}
.skg-trecho>em{margin-left:auto;font-style:normal;font-weight:800;color:#f3d48a;font-size:calc(10.5px * var(--text-scale,1))}
.skg-antes{display:flex;align-items:center;gap:10px;margin:2px 0 1px;flex-wrap:wrap}
.skg-antes>span{display:flex;flex-direction:column;font-size:calc(8.5px * var(--text-scale,1));letter-spacing:.06em;text-transform:uppercase;color:#8f97aa}
.skg-antes b{font:700 calc(17px * var(--text-scale,1)) Georgia,serif;color:#f1ece2;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.skg-antes .v b{color:#7fe08f}
.skg-antes>i{font-style:normal;color:#d9b45a;font-size:18px}
.skg-antes>em{font-style:normal;font-weight:800;color:#7fe08f;border:1px solid #2f6b3a;border-radius:999px;padding:1px 8px;font-size:calc(12px * var(--text-scale,1))}
/* .cmp: o JS liga quando não cabe. Some o texto de apoio; o número fica. */
.skg.g3.cmp .skg-nome-tx>p,.skg.g3.cmp .skg-up-tx>small.skg-mae,.skg.g3.cmp .skb-passo-tit small,.skg.g3.cmp .skb-rod-item small,.skg.g3.cmp .skg-ia-tx small,.skg.g3.cmp .skg-sec>span{display:none}
.skg.g3.cmp .skg-sec{grid-template-columns:minmax(0,1fr)}
.skg.g3.cmp .skg-palco{grid-template-columns:44px minmax(0,1fr)}.skg.g3.cmp .skg-sprite{width:44px}
.skg.g3.cmp .skb-op{min-height:0!important;padding:5px 6px!important}
.skg.g3.cmp .skb-fileira+.skb-fileira{padding-top:5px}
/* Ataque básico e Passivas na mesma ficha larga (sem "x/10" e sem o "Você tem", que já está no alto). */
.skg.g3.extra .skb-det{gap:7px;padding:9px 10px}
.skg.g3.extra .skb-tem,.skg.g3.extra .skb-est2-tx>b{display:none}
.skg.g3.extra .skb-cab2:not(:has(.skb-troca)){display:none}
.skg.g3.extra .skb-passo{padding:8px 9px;gap:6px}
.skg.g3.extra .skb-rod-item{padding:6px 8px}
@media (min-width:761px){
  .skg.g3.basico .skb-caixa{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .skg.g3.basico .skb-caixa>.skb-dica,.skg.g3.basico .skb-caixa>.skb-cab2,.skg.g3.basico .skb-caixa>.skb-rodape{grid-column:1/-1}
  .skg.g3.passivas .skb-passivas{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .skg.g3.passivas .skb-topo-det{display:none}
  .skg.g3.passivas .skb-caixa{padding:7px;gap:6px}
  .skg.g3.passivas .skb-passo{padding:6px 7px}
  .skg.g3.passivas .skb-vaga{min-height:40px!important;padding:2px!important;gap:1px}
  .skg.g3.passivas .skb-vaga-ic{width:30px;height:30px}
  .skg.g3.passivas .skb-passiva{padding:6px 7px;gap:3px 8px;grid-template-columns:40px minmax(0,1fr) 150px;grid-template-areas:"ic tx dp" "st st acao";align-items:center}
  .skg.g3.passivas .skb-passiva-ic{grid-area:ic;align-self:start}
  .skg.g3.passivas .skb-passiva-estrela,.skg.g3.passivas .skb-passiva-estrela>.skb-est2{display:contents}
  .skg.g3.passivas .skb-passiva-estrela .skb-est2-tx{grid-area:st}
  .skg.g3.passivas .skb-passiva-estrela .skb-est2-tx .skb-estrelas{font-size:calc(12px * var(--text-scale,1))}
  .skg.g3.passivas .skb-passiva-estrela .skb-despertar,.skg.g3.passivas .skb-passiva-estrela .skb-max,.skg.g3.passivas .skb-passiva-estrela .skb-tranca{grid-area:dp;justify-self:end}
  .skg.g3.passivas .skb-passiva-acao>*{width:100%}
  .skg.g3.passivas .skb-equipar,.skg.g3.passivas .skb-equipada{min-height:26px!important;padding:3px 10px!important}
  .skg.g3.passivas .skb-despertar{min-height:0!important;padding:3px 6px!important;width:150px}
  .skg.g3.passivas .skb-passiva-estrela .skb-est2-tx .skb-estrelas{font-size:calc(10px * var(--text-scale,1))}
  .skg.g3.passivas .skb-passo-tit{display:none}
}
.skg.g3.extra.cmp .skb-topo-det p,.skg.g3.extra.cmp .skb-zero,.skg.g3.extra.cmp .skb-passo-tit small,.skg.g3.extra.cmp .skb-rod-item small{display:none}
/* .cmp2: PC pequeno com letra grande (1051×591 a 130%). Fica só o que decide: nome, números, agora → depois e o botão. */
.skg.g3.cmp2 .skg-sprite,.skg.g3.cmp2 .skg-sec,.skg.g3.cmp2 .skg-ficha,.skg.g3.cmp2 .skg-up-tx>small,.skg.g3.cmp2 .skg-nome-tx>span,.skg.g3.cmp2 .skg-nums small,.skg.g3.cmp2 .skg-up-tx>span{display:none}
.skg.g3.cmp2 .skg-palco{grid-template-columns:minmax(0,1fr);padding:0 4px}
.skg.g3.cmp2 .skg-nums>span{grid-template-columns:18px minmax(0,1fr);padding:3px 6px}.skg.g3.cmp2 .skg-num-ic{width:18px;height:18px;grid-row:auto}
.skg.g3.cmp2 .skg-antes b{font-size:calc(15px * var(--text-scale,1))}
.skg.g3.cmp2 .skg-up{min-height:34px!important;padding:4px 10px!important}
.skg.g3.cmp2 .skg-tile-ic{width:32px;height:32px}.skg.g3.cmp2 .skg-tile-ic .skg-ic{width:28px;height:28px}.skg.g3.cmp2 .skg-tile{min-width:52px;padding:3px 4px!important}
.skg.g3.cmp2 .skb-op>small{font-size:calc(8.5px * var(--text-scale,1))}
.skg.g3.cmp2 .skb-passo-tit>i{width:18px;height:18px}
/* Celular: uma coluna, faixa de ícones rolando de lado. */
@media (max-width:760px){
  .skg.g3 .skg-topo{flex-wrap:wrap;min-width:0}
  .skg.g3 .skg-topo>.skg-trilho{order:3;flex:1 1 100%;width:100%;max-width:100%;flex-wrap:wrap;overflow:visible}
  .skg-rec{display:flex;flex-wrap:wrap;gap:4px;min-width:0;flex:1 1 auto;justify-content:flex-end}.skg-rec .skg-chip{padding:3px 7px}.skg-rec .skg-chip>b{font-size:calc(12px * var(--text-scale,1))}
  .skg.g3 .skg-largo,.skg.g3 .skg-det,.skg.g3 .skg-lado{min-width:0;max-width:100%}
  .skg-rec{justify-content:flex-start;margin-left:0}
  .skg.g3 .skg-trilho{display:flex;grid-template-columns:none}
  .skg-largo,.skg-lado{grid-template-columns:minmax(0,1fr)}
  .skg-lado>.skb-caixa>.skb-passo:nth-of-type(1),.skg-lado>.skb-caixa>.skb-passo:nth-of-type(2),.skg-lado .skb-rodape,.skg-lado .skg-ia{grid-column:1;grid-row:auto}
}
/* 03/11 (autor): no Grimório o palco mostra o ÍCONE da skill (não o desenho da arena). Moldura quadrada, sem brilho. */
.skg.g3 .skg-sprite.vazio{aspect-ratio:1;border-radius:10px;border:1px solid rgba(214,170,92,.55);background:linear-gradient(180deg,#2a1d10,#120c07);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.skg.g3 .skg-sprite.vazio .skg-ic{width:88%;height:88%;object-fit:contain;display:block}

/* SKILLS NOVAS NO TRILHO E RESET DAS SKILLS (03/11, Árvores): a skill nova leva o selinho do ponto da árvore;
   o botão do reset (1 vez por personagem) fica embaixo das moedas. Sem glow. */
.skg-arv-ic{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;object-fit:contain}
.skg-reset{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:5px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(214,174,92,.55);background:rgba(28,20,12,.75);color:#f1d79a;font:600 calc(11px * var(--text-scale,1))/1.2 inherit;cursor:var(--cur-mao,pointer)}
.skg-reset img{width:16px;height:16px;object-fit:contain}
.skg-reset:hover{border-color:#e6c47a;color:#fff1cf}