/* /upgrade/cinco-chakras-hex.css -- Cinco Chakras em hexágono (mockup aprovado 01/10/2026). Montagem em cinco-chakras-hex.js. */
.ckx{display:grid;gap:14px;margin:0 0 14px;}
.ckx-tab{position:relative;aspect-ratio:1.04;max-width:720px;width:100%;margin-inline:auto;}
.ckx-hex{position:absolute;width:160px;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;}
.ckx-forma{width:92px;height:80px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(160deg,#3b4560,#1a2030);display:grid;place-items:center;align-content:center;gap:2px;position:relative;}
.ckx-forma::after{content:"";position:absolute;inset:3px;clip-path:inherit;background:radial-gradient(circle at 50% 35%,var(--cor) 0%,rgba(0,0,0,0) 62%),#151b29;opacity:.95;}
.ckx-forma img{position:relative;z-index:1;width:30px;height:30px;object-fit:contain;}
.ckx-nome{position:relative;z-index:1;font:800 13px var(--display,inherit);color:var(--cor);text-shadow:0 2px 8px #000;}
.ckx-nvb{position:absolute;left:4px;top:6px;z-index:2;width:30px;height:30px;border-radius:50%;background:#5a1414;border:2px solid #c9902c;padding:0;text-align:center;font:800 13px var(--display,inherit);color:#fff;box-sizing:border-box;}
.ckx-nvb:focus{outline:2px solid var(--cyan,#3fd0e0);outline-offset:1px;}
.ckx-pct{font:600 10.5px/1.3 var(--body,inherit);color:var(--t-mid,#a7b0bd);text-align:center;min-height:26px;}
.ckx-xp{font:600 10px var(--mono,monospace);color:var(--t-low,#6b7686);text-align:center;}
.ckx-ctl{display:flex;gap:4px;align-items:center;}
.ckx-mini{min-width:26px;height:24px;border:1px solid var(--border,#29313d);border-radius:6px;background:var(--s-800,#141a25);color:var(--cyan,#3fd0e0);font:700 13px var(--body,inherit);cursor:pointer;padding:0 6px;}
.ckx-pratica{font:600 12px var(--body,inherit);background:linear-gradient(180deg,#2c8fd6,#1b5f9e);color:#fff;border:1px solid #6fc3ff;border-radius:6px;padding:3px 10px;cursor:pointer;}
.ckx-pratica:disabled{opacity:.35;cursor:default;}
.ckx-centro{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(245,197,66,.16),rgba(245,197,66,.02) 65%);border:2px solid rgba(245,197,66,.35);pointer-events:none;}
.ckx-f{font:800 18px var(--display,inherit);color:#ffe7a3;}
.ckx-centro small{display:block;color:var(--t-mid,#a7b0bd);font-size:11px;}
.ckx-res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.ckx-kpi{background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:12px;padding:10px 14px;display:grid;gap:2px;min-width:0;}
.ckx-kpi span{font:600 11px var(--mono,monospace);letter-spacing:.1em;color:var(--t-low,#6b7686);text-transform:uppercase;}
.ckx-kpi b{display:flex;align-items:center;gap:6px;font:800 22px var(--display,inherit);font-variant-numeric:tabular-nums;}
.ckx-kpi b.c{color:var(--cyan,#3fd0e0);}
.ckx-nota{margin:0;color:var(--t-low,#6b7686);font-size:13px;line-height:1.5;}
/* a escolha do nível agora é no tabuleiro; os seletores seguem na tela (escondidos) porque a calculadora lê deles */
#screen-cinco-chakras #cc-niveis-titulo,#screen-cinco-chakras #cc-niveis-atuais{display:none !important;}

@media (max-width:760px){
  .ckx-tab{aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px;}
  .ckx-hex{position:static;transform:none;width:auto;}
  .ckx-centro{position:static;transform:none;width:auto;height:auto;border-radius:12px;padding:10px;grid-column:1 / -1;order:-1;}
  .ckx-res{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.ckx-alvo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:720px;width:100%;margin-inline:auto;}
.ckx-alvo .ckx-kpi small{font-size:11px;color:var(--t-low,#6b7686);}
.ckx-pm{display:flex;gap:6px;align-items:center;}
.ckx-pm input{width:84px;height:34px;text-align:center;font:800 20px var(--display,inherit);background:var(--s-900,#0e1320);color:var(--t-hi,#fff);border:1px solid var(--border,#29313d);border-radius:8px;}
.ckx-pm .ckx-mini{height:34px;min-width:34px;font-size:16px;}
/* v3 (02/10/2026, pedido do dono): menos informacao, tudo centralizado; "ja possui" em cima, desenho embaixo como no Amuleto */
.ckx-tab{aspect-ratio:1.55;max-width:660px;}
.ckx-hex{width:200px;gap:6px;}
.ckx-forma{width:78px;height:68px;}
.ckx-forma img{width:30px;height:30px;}
.ckx-nome{font-size:12px;}
.ckx-ctl{gap:4px;justify-content:center;}
.ckx-nvb{position:static;width:46px;height:26px;border-radius:6px;background:var(--s-900,#0e1320);border:1px solid var(--border,#29313d);font:800 14px var(--display,inherit);text-align:center;color:#fff;padding:0;box-sizing:border-box;}
.ckx-centro{width:116px;height:116px;}
.sc-campo:has(#cc-fase-alvo){display:none !important;}
.ckx-res{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:760px){.ckx-tab{aspect-ratio:auto;max-width:none;}.ckx-hex{width:auto;}.ckx-res{grid-template-columns:repeat(1,minmax(0,1fr));}}
.ckx-forma{width:92px;}.ckx-nome{font-size:11.5px;white-space:nowrap;}
.ckx-ri{width:16px;height:16px;vertical-align:-3px;margin-right:6px;object-fit:contain;}