/* Refinamento visual: uma cor principal, textos maiores, mais contraste. Cores fortes só onde têm significado. */

body{font-size:16px;line-height:1.6;background:var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 500px at 0 -10%,color-mix(in srgb,var(--a1) 9%,transparent),transparent)}

/* Cards: sem faixa colorida, título legível, cor única */
.c{--k:var(--a1)!important;border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(20,10,50,.06)}
.c::before{display:none}
.c h2{font:700 19px Inter,system-ui,sans-serif;color:var(--fg);letter-spacing:0;margin:0 0 6px}
.c h2 i{background:var(--a1);color:var(--onb)}
.h{font-size:14.5px;color:var(--mut);line-height:1.5}
label{font-size:13px;color:var(--mut);letter-spacing:.04em;margin:12px 0 5px}
.g4{font:700 13px Inter,sans-serif;letter-spacing:.06em;color:var(--a1);margin:16px 0 4px}
input[type=text],select,textarea{font-size:16px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px}
input[type=text]:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--a1) 35%,transparent);border-color:var(--a1)}
button:focus-visible{outline:3px solid color-mix(in srgb,var(--a1) 45%,transparent);outline-offset:2px}

/* Contadores e escolhas: tudo na cor principal */
.st,.opt,.pl,.at,.sk{--k:var(--a1)!important}
.st{padding:9px 0}.st>div:first-child{font-size:15.5px}.st small{font-size:13px;color:var(--mut)}
.st button{width:34px;height:34px;font-size:18px}
.die{font:700 14px Inter,sans-serif;min-width:64px;background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--a1)}
.die.t{font:600 13px Inter;min-width:150px}
.opt button.on,.pl button.on{background:color-mix(in srgb,var(--a1) 12%,var(--card));border-color:var(--a1)}
.pl button{font-size:14px}.pl span{font-size:13px;color:var(--mut)}
.pill{font-size:13px}
.chip{font-size:14px;padding:5px 13px}

/* Ficha */
.dash{align-items:start}
.hn{font:800 34px Cinzel,serif;color:var(--fg)}
.hs{font-size:16px}
.at{background:var(--bg);border:1px solid var(--bd);border-radius:16px}
.at b{font:800 42px Cinzel,serif;color:var(--a1)}
.at small{font-size:15px}.at em{font-size:14px}.at span{font-size:12px}
.at:hover{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 8%,var(--card))}
.sk button{font-size:15.5px;padding:8px 4px}.sk em{font-size:13px;color:var(--a1)}
.sk button.on{opacity:1}.sk button:not(.on){opacity:.7}
.vt b{font-size:28px}.vb button{padding:4px 10px;font-size:14px}
.bar{height:12px}.bar.dg{height:18px}

/* Rolagem: o resultado é o destaque da tela */
.rb{--rc:var(--mut);text-align:center;border:2px solid var(--rc);border-radius:18px;padding:18px 16px;margin:6px 0 10px;background:color-mix(in srgb,var(--rc) 12%,var(--card))}
.rb small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--mut)}
.rb b{display:block;font:800 30px Cinzel,serif;color:var(--rc);line-height:1.2;margin:2px 0 6px}
.rb span{display:block;font-size:15px;color:var(--fg);max-width:44ch;margin:0 auto}
.rb.c0{--rc:var(--bad)}.rb.c1{--rc:#d9622b}.rb.c2{--rc:var(--a4)}.rb.c3{--rc:var(--a3)}.rb.c4{--rc:var(--ok)}
.d6 b{font-size:38px}.d6 small{font-size:13px}.d6 em{font-size:13px}
.rm{font-size:14px}.hist div{font-size:14.5px;padding:6px 0}

/* Início */



/* Biblioteca e janelas: leitura */
.rd{font-size:16.5px;line-height:1.75}.rd p,.rd li{max-width:75ch}
.li{font-size:15.5px;padding:9px 12px}
.fb{font-size:16px;line-height:1.7}

/* Navegação */
#tb button{font-size:15px}
#tb button.on{box-shadow:0 4px 14px -6px var(--a1)}

/* Barras de vitalidade: PV vermelho, Mana azul */
.vit .vt:nth-of-type(1) .bar>div{background:var(--bad)!important}
.vit .vt:nth-of-type(2) .bar>div{background:#2f7ee8!important}
:root[data-theme="dark"] .vit .vt:nth-of-type(2) .bar>div,:root[data-theme="black"] .vit .vt:nth-of-type(2) .bar>div{background:#6aa8ff!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vit .vt:nth-of-type(2) .bar>div{background:#6aa8ff!important}}

/* Espaços de conjuração na Ficha */
.slb{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
.slh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;letter-spacing:.06em;color:var(--mut)}
.slr{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:6px 0}
.slr>span:first-child{font-weight:700}.slp{display:flex;flex-wrap:wrap;gap:6px}
button.pip{width:26px;height:26px;padding:0;margin:0;border-radius:50%;border:2px solid #2f7ee8;background:transparent;cursor:pointer}
button.pip.f{background:#2f7ee8}
:root[data-theme=dark] button.pip,:root[data-theme=black] button.pip{border-color:#6aa8ff}
:root[data-theme=dark] button.pip.f,:root[data-theme=black] button.pip.f{background:#6aa8ff}

/* Painel de cores personalizadas */
#pcor{position:fixed;right:16px;top:76px;z-index:9999;width:320px;max-width:calc(100vw - 32px);max-height:calc(100vh - 96px);overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:16px;padding:16px;box-shadow:0 20px 50px -12px rgba(0,0,0,.45)}
#pcor .pch{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pcr{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer}.pcr input{width:46px;height:36px;padding:0;border:1px solid var(--bd);border-radius:10px;background:none;cursor:pointer}
.pcr span{display:flex;flex-direction:column}.pcr small{color:var(--mut);font-size:12.5px}
.pcp{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
@media (max-width:600px){#pcor{top:auto;bottom:80px;right:8px;left:8px;width:auto}}

/* Dados com forma e animação */
.d6{opacity:.7}.d6 .sh{position:relative;display:grid;place-items:center;width:84px;height:84px;font-style:normal}
.sh svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--card);stroke:var(--a1);stroke-width:4;stroke-linejoin:round}
.d6.k .sh svg{fill:color-mix(in srgb,var(--a1) 16%,var(--card))}
.sh b{position:relative;font:800 30px Cinzel,serif;color:var(--fg);line-height:1}.sh.s4 b{top:9px;font-size:26px}.sh.s10 b,.sh.s12 b{font-size:28px}
.sh.go{animation:rolar .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes rolar{0%{transform:translateY(-14px) rotate(-200deg) scale(.7)}35%{transform:translateY(0) rotate(80deg) scale(1.08)}55%{transform:translateY(-8px) rotate(160deg)}75%{transform:translateY(0) rotate(300deg) scale(1.03)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
.sh.go b{animation:contra .9s linear both}@keyframes contra{to{transform:rotate(-360deg)}}
.rb.wait{border:2px dashed var(--bd);background:transparent;color:var(--mut)}
.rb.k5{animation:surge .35s ease-out}@keyframes surge{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.rb:not(.wait){animation:surge .35s ease-out}
.anl{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;font-size:13px;color:var(--mut);text-transform:none;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.sh.go,.sh.go b,.rb{animation:none!important}}

/* Equipamento e feedback */
.eqa{display:grid;grid-template-columns:130px 1fr auto;gap:8px}
.eqi{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--bd)}.eqi input{grid-column:1/-1}
.eqq{display:inline-flex;align-items:center;gap:6px}.eqq button,.eqx{width:30px;height:30px;border-radius:50%;border:1px solid var(--bd);background:var(--bg);color:var(--fg);padding:0}.eqq em{font-style:normal;min-width:24px;text-align:center;font-weight:700}
#pfb{display:none;position:fixed;right:16px;top:76px;z-index:9999;width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - 96px);overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:16px;padding:16px;box-shadow:0 20px 50px -12px rgba(0,0,0,.45)}
#pfb .pch{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
@media (max-width:600px){#pfb{top:auto;bottom:80px;right:8px;left:8px;width:auto}.eqa{grid-template-columns:1fr auto}.eqa select{grid-column:1/-1}}

@media (max-width:1500px){.tx{display:none}}

/* Proficiência: abas de nível e botão i */
.chip.pc{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px}.chip.pc>button:first-child{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.ib{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--a1);background:transparent;color:var(--a1);font:700 13px Georgia,serif;font-style:italic;line-height:1;padding:0;cursor:pointer}.ib:hover{background:var(--a1);color:var(--onb)}
.pft{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.pft button{flex:1;min-width:52px;padding:8px 4px;border-radius:10px;border:2px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:700;cursor:pointer}
.pft button.ok{border-color:var(--a3)}.pft button.on{background:var(--a1);border-color:var(--a1);color:var(--onb)}
.pfb h4{margin:.2em 0 .5em;color:var(--a1);font-size:17px}.pfi{margin-top:12px;border-top:1px solid var(--bd);padding-top:8px}.pfi summary{cursor:pointer;font-weight:700;color:var(--mut)}
.pfb p{margin:.5em 0}.pfb br+br{display:none}.pfb ul,.pfb ol{margin:.4em 0;padding-left:1.3em}

/* Tutorial guiado */
#tuth{position:fixed;z-index:9990;border-radius:18px;border:3px solid var(--a1);box-shadow:0 0 0 9999px rgba(10,8,24,.5);pointer-events:none;transition:all .25s}
#tut{position:fixed;left:0;right:0;z-index:9995;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
#tut.bot{bottom:24px}#tut.top{top:84px}#tut.mid{top:0;bottom:0;align-items:center;background:rgba(10,8,24,.5)}
#tut .tb{pointer-events:auto;width:440px;max-width:100%;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-top:4px solid var(--a1);border-radius:16px;padding:16px 18px;box-shadow:0 24px 60px -12px rgba(0,0,0,.55)}
#tut h3{margin:6px 0 4px;font:800 19px Cinzel,serif;color:var(--a1)}#tut p{margin:0 0 12px;line-height:1.6;font-size:15px}
#tut .tp{font-size:12px;font-weight:700;color:var(--mut);display:flex;align-items:center;gap:10px}#tut .tp span{flex:1;height:5px;border-radius:9px;background:var(--bd);overflow:hidden}#tut .tp i{display:block;height:100%;background:var(--a1)}
#tut .ta{display:flex;justify-content:space-between;align-items:center;gap:8px}
@media (max-width:860px){#tut.bot{bottom:84px}#tut.top{top:68px}}

/* Guia de subir de nível */
.upt{width:100%;border-collapse:collapse;font-size:14px}.upt th,.upt td{padding:7px 8px;border-bottom:1px solid var(--bd);text-align:center}.upt th:first-child,.upt td:first-child{text-align:left}.upt b.g{color:var(--ok)}
.upw{background:color-mix(in srgb,var(--a4) 16%,var(--card));border:1px solid var(--a4);border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}

/* Aviso de backup */
.bkw{grid-column:1/-1;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;border-radius:16px;border:1px solid var(--a4);background:color-mix(in srgb,var(--a4) 14%,var(--card));order:0}

/* Mestre e modo mesa */
.mzg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:16px}
.mzh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.mzv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px;flex-wrap:wrap}
.mzp{font:800 34px Cinzel,serif;color:var(--fg)}.mzp.lo{color:var(--bad)}
.vb{display:inline-flex;gap:6px}.vb button{min-width:44px;min-height:40px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:700;cursor:pointer}
.mzr{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.mza{flex:1;min-width:52px;text-align:center;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:6px 4px}.mza small{display:block;color:var(--mut);font-size:11px;font-weight:700}.mza b{font-size:15px}
.mzx{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px}
.chip.no button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 4px}
.mesa{max-width:900px;margin:0 auto;display:grid;gap:14px}.mesah{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mzbig{padding:20px!important}.mzl{display:block;color:var(--mut);font-weight:700;letter-spacing:.08em;font-size:12px;margin-bottom:6px}
.mzbig .mzp{font-size:56px}.mzb{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.mzb button{min-height:64px;font-size:24px;font-weight:800;border-radius:16px;border:2px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer}
.mzbig .slr{grid-template-columns:120px 1fr auto;font-size:18px}.mzbig button.pip{width:38px;height:38px}
.mzat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mzat>button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:16px;border:2px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;font-weight:700}
.mzat .sh{width:70px;height:70px}.mzat .sh b{font-size:22px}
.mesa .chip{font-size:16px;padding:6px 14px}
body.modomesa #bn{display:none}body.modomesa main{padding-bottom:30px}
@media (max-width:600px){.mzat{grid-template-columns:repeat(2,1fr)}.mzbig .mzp{font-size:46px}.mzbig .slr{grid-template-columns:90px 1fr auto}}
.sh{position:relative;display:grid;place-items:center;font-style:normal}