/* ORBIS skill tree and its inspector */
#tab-cls.cdv .cd-top{padding:8px 10px!important;gap:10px}
#tab-cls.cdv .cd-top .play{min-height:44px}
#tab-cls.cdv .cd-top .back{min-height:44px;min-width:44px}
#tab-cls.cdv .cd-tabs button{min-width:0;min-height:44px;padding:8px 4px;white-space:nowrap;letter-spacing:.02em}
@media (max-width:560px){
 #tab-cls.cdv .cd-top{gap:8px}
 #tab-cls.cdv .cd-top canvas{width:48px;height:48px}
 #tab-cls.cdv .cd-top .play{padding:8px 12px;font-size:12px}
}

/* contador de pontos */
#tab-cls.cdv .cd-pane.cd-tree{display:block;overflow:visible}
#tab-cls.cdv .cd-pane[hidden]{display:none!important}
#tab-cls.cdv .cd-pts{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;font-size:12px;color:var(--txt);background:var(--panel);border:2px solid var(--line);border-left:4px solid var(--amber)}
#tab-cls.cdv .cd-pts b{font-size:18px;color:var(--amber)}
#tab-cls.cdv .cd-pts .cd-q{margin-left:auto;font-size:11px;min-width:24px;text-align:center}

/* corpo: tabuleiro + inspetor */
#tab-cls.cdv .cd-body{display:flex;flex-direction:column;gap:10px;min-width:0}
#tab-cls.cdv .cd-board{min-width:0}
@media (min-width:701px){
 #tab-cls.cdv .cd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);align-items:start;gap:14px}
 #hub #nInfo{position:sticky;top:8px;max-height:max(240px,calc(100vh - 170px));max-height:max(240px,calc(100dvh - 170px));overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:701px) and (max-width:960px){
 #tab-cls.cdv .cd-body{grid-template-columns:minmax(0,1fr) minmax(160px,35%);gap:8px}
 #hub #nInfo{padding:8px}
 #hub #nInfo .sk-ic{width:44px;height:44px}
 #hub #nInfo .sk-ic img,#hub #nInfo .sk-ic.big img{width:32px;height:32px}
}

/* ramos */
#tab-cls.cdv .sk-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
#tab-cls.cdv .sk-tree .branch{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 6px;min-width:0;border:2px solid var(--line);border-top:3px solid var(--bc);container-type:inline-size}
#tab-cls.cdv .sk-tree .branch::before{display:none}
#tab-cls.cdv .sk-tree .bh{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;margin:0 0 6px;padding:6px 8px;min-height:44px;font-size:11px;line-height:1.25;text-align:left;border-bottom:2px solid var(--line)}
#tab-cls.cdv .sk-tree .bh em{display:inline;font-size:11px;color:var(--mut)}
#tab-cls.cdv .sk-tree .evobr .bh{flex-direction:row;align-items:center;justify-content:space-between}
#tab-cls.cdv .sk-branch-art{width:24px;height:24px;image-rendering:pixelated;vertical-align:middle;margin-right:8px}
#tab-cls.cdv .sk-tree .bn{display:flex;flex-direction:column;gap:4px;padding:0 4px}
#tab-cls.cdv .sk-tree .evobr{grid-column:1/-1}
#tab-cls.cdv .sk-tree .evobr .bn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

/* cartões de nó */
#tab-cls.cdv .cd-tree .node{--fs:56px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"fr" "nm" "sub" "rk" "mt";justify-items:center;align-content:start;row-gap:3px;width:100%;min-width:0;height:auto;min-height:0;margin:0;padding:6px 3px 7px;background:transparent!important;border:2px solid var(--line)!important;box-shadow:none!important;clip-path:none;opacity:1;filter:none;outline:0;color:var(--txt);font-family:var(--px);font-size:11px;line-height:1.2;text-align:center;cursor:pointer}
#tab-cls.cdv .cd-tree .node.st-can{border-color:color-mix(in srgb,var(--bc) 50%,var(--line))!important;background:rgba(255,255,255,.04)!important}
#tab-cls.cdv .cd-tree .node.st-short{border:2px dashed color-mix(in srgb,var(--bc) 60%,#000)!important}
#tab-cls.cdv .cd-tree .node.st-lock,#tab-cls.cdv .cd-tree .node.st-off{border-color:var(--line)!important}
#tab-cls.cdv .cd-tree .node.st-max{border-color:var(--bc)!important;background:color-mix(in srgb,var(--bc) 14%,transparent)!important}
#tab-cls.cdv .cd-tree .node.sel{border-color:var(--amber)!important;background:rgba(255,177,42,.11)!important;outline:0}
#tab-cls.cdv .cd-tree .node:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
#tab-cls.cdv .cd-tree .node.cap{margin-top:4px;border-top:2px dashed var(--line2)!important}
#tab-cls.cdv .node .sk-fr{grid-area:fr;position:relative;display:grid;place-items:center;width:var(--fs);height:var(--fs);max-width:100%;background:url(tree_node_frames.png) 0 0/calc(var(--fs)*4) var(--fs) no-repeat;image-rendering:pixelated}
#tab-cls.cdv .node.max .sk-fr,#tab-cls.cdv .node.link.act .sk-fr{background-position:calc(var(--fs)*-1) 0}
#tab-cls.cdv .node.lock .sk-fr{background-position:calc(var(--fs)*-2) 0}
#tab-cls.cdv .node.key .sk-fr{background-position:calc(var(--fs)*-3) 0}
#tab-cls.cdv .node .sk-fr img{display:block;width:32px;height:32px;max-width:none;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}
#tab-cls.cdv .node .sk-fr img.sk-art{width:48px;height:48px}
#tab-cls.cdv .node.lock .sk-fr img:not(.sk-lk),#tab-cls.cdv .node.st-off .sk-fr img:not(.sk-lk){opacity:.75}
#tab-cls.cdv .node .sk-fr img.sk-lk{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;opacity:1;z-index:2}
#tab-cls.cdv .node .sk-nm{grid-area:nm;max-width:100%;overflow-wrap:anywhere;font-weight:600;color:var(--txt)}
#tab-cls.cdv .node.lock .sk-nm,#tab-cls.cdv .node.st-off .sk-nm{color:var(--mut)}
#tab-cls.cdv .node .sk-sub{grid-area:sub;max-width:100%;overflow-wrap:anywhere;color:var(--mut)}
#tab-cls.cdv .node .sk-rk{grid-area:rk;display:flex;align-items:center;justify-content:center;gap:5px;min-height:12px;color:var(--mut)}
#tab-cls.cdv .node .sk-rk b{font-weight:700;color:var(--mut)}
#tab-cls.cdv .node.has .sk-rk b,#tab-cls.cdv .node.st-max .sk-rk b{color:var(--bc)}
#tab-cls.cdv .sk-pips{display:inline-flex;gap:2px}
#tab-cls.cdv .sk-pips i{display:block;width:8px;height:8px;background:#07080a;border:1px solid var(--line2)}
#tab-cls.cdv .sk-pips i.on{background:var(--bc);border-color:var(--bc)}
#tab-cls.cdv .node .sk-mt{grid-area:mt;color:var(--mut)}
#tab-cls.cdv .node .sk-foot{grid-area:ft;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 6px;min-height:14px}
#tab-cls.cdv .cd-tree .node{grid-template-areas:"fr" "nm" "sub" "ft"}
#tab-cls.cdv .node.st-can .sk-mt{color:var(--amber)}
#tab-cls.cdv .node.st-max .sk-mt{color:var(--green)}
@container (max-width:92px){#tab-cls.cdv .node{--fs:44px}}
#tab-cls.cdv .sk-tree .node:not(:first-child)::before{content:'';position:absolute;left:calc(50% - 1px);top:-6px;width:2px;height:4px;background:var(--bc);opacity:.65}
#tab-cls.cdv .sk-tree .evobr .node::before{display:none}
@media (max-width:1279px){
 #tab-cls.cdv .sk-tree .node{--fs:44px;grid-template-areas:"fr" "nm" "ft";row-gap:2px;padding:4px 2px 5px}
 #tab-cls.cdv .sk-tree .node .sk-nm{display:grid;place-items:center;min-height:2.4em;font-size:12px}
 #tab-cls.cdv .sk-tree .sk-pips i{width:6px;height:7px}
}

/* ligações / nós-chave */
#tab-cls.cdv .cd-strip{display:block;margin:0}
#tab-cls.cdv .sk-sec{margin-top:10px;padding:10px;background:var(--panel);border:2px solid var(--line);border-top:3px solid var(--bc);box-shadow:var(--sh)}
#tab-cls.cdv .sk-sec>span{display:block;margin-bottom:8px;font-family:var(--hd);font-size:11px;line-height:1.4;color:var(--mut)}
#tab-cls.cdv .sk-sec>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:8px}
#tab-cls.cdv .cd-strip .respec{display:flex;width:100%;min-height:44px;margin:12px 0 0;padding:10px 12px;font-size:12px}

/* inspetor */
#hub #nInfo{--bc:var(--line2);grid-area:auto;min-width:0;height:auto;min-height:0;margin:0;padding:12px;border-top:3px solid var(--bc)}
#hub #nInfo .sk-ih{display:flex;align-items:flex-start;gap:10px}
#hub #nInfo .sk-ic{flex:none;display:grid;place-items:center;width:72px;height:72px;background:#07080a;border:2px solid var(--bc)}
#hub #nInfo .sk-ic img{display:block;width:64px;height:64px;max-width:none;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}
#hub #nInfo .sk-ic.big img{width:48px;height:48px}
#hub #nInfo .sk-it{flex:1;min-width:0}
#hub #nInfo h3{margin:0;font-family:var(--hd);font-size:14px;line-height:1.25;color:var(--bc);overflow-wrap:anywhere;outline:0}
#hub #nInfo .sk-it>em{display:block;margin-top:4px;font-style:normal;font-size:12px;line-height:1.3;color:var(--mut)}
#hub #nInfo .sk-it .sk-rk{justify-content:flex-start;margin-top:6px;font-size:12px}
#hub #nInfo .sk-x{display:none;flex:none;width:44px;height:44px;padding:0;font-size:16px}
#hub #nInfo p{margin:10px 0 0;font-size:14px;line-height:1.35}
#hub #nInfo .sk-note{padding:7px 9px;border-left:2px solid var(--bc);background:#0b0c0f;color:var(--txt)}
#hub #nInfo .ni-r{margin-top:12px;gap:8px;font-size:13px}
#hub #nInfo .ni-r .btn{flex:1 1 150px;min-height:44px;padding:8px 12px;font-size:12px}
#hub #nInfo .ni-r .mut{flex:1 1 100%}

/* Mobile inspector stays between the board and navigation in normal flow. */
#skillDock:empty{display:none}
@media (max-width:700px), (max-width:899px) and (max-height:480px){
 #hubScroll{min-height:0}
 #hub:has(#skillDock:not(:empty)) #hubScroll{flex-basis:0;padding-bottom:8px}
 #skillDock{flex:0 0 auto;margin-bottom:var(--arena-nav-lift,34px)}
 #hub #nInfo:not(.sk-sheet){order:-1;min-height:0;padding:0 2px;background:none;border:0;box-shadow:none;font-size:13px}
}
#hub #nInfo.sk-sheet{display:flex;flex-direction:column;max-height:49vh;max-height:49dvh;margin:0;padding:0;overflow:hidden;background:var(--bg2);border:2px solid var(--line2);border-top:3px solid var(--bc);box-shadow:0 -3px 0 #000}
#hub #nInfo.sk-sheet .sk-ih{flex:none;padding:10px 12px 8px}
#hub #nInfo.sk-sheet .sk-sheet-detail{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 12px 8px}
#hub #nInfo.sk-sheet .sk-sheet-detail .ni-r:empty{display:none}
#hub #nInfo.sk-sheet .sk-sheet-actions{display:flex;flex:none;gap:6px;padding:7px 10px 8px;border-top:1px solid var(--line);background:var(--bg2)}
#hub #nInfo.sk-sheet .sk-sheet-actions .btn{flex:1 1 0;min-width:0;min-height:44px;padding:6px 5px;font-size:11px}
#hub #nInfo.sk-sheet .sk-ic{width:48px;height:48px}
#hub #nInfo.sk-sheet .sk-ic img{width:32px;height:32px}
#hub #nInfo.sk-sheet .sk-ic.big img{width:32px;height:32px}
#hub #nInfo.sk-sheet .sk-x{display:flex}

/* desktop largo: texto ao lado do ícone */
@media (min-width:1280px){
 #tab-cls.cdv .sk-tree .branch:not(.evobr) .node{grid-template-columns:var(--fs) minmax(0,1fr);grid-template-areas:"fr nm" "fr ft";justify-items:start;align-content:center;column-gap:8px;text-align:left}
 #tab-cls.cdv .sk-tree .branch:not(.evobr) .node .sk-rk{justify-content:flex-start}
 #tab-cls.cdv .sk-tree .branch:not(.evobr) .node .sk-foot{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){#tab-cls.cdv *{transition:none!important;animation:none!important}}