:root{
  --ink:#0e0d11; --paper:#141318; --card:#1c1a21; --line:#332f3b; --line2:#453f52;
  --txt:#e7e3ea; --txt2:#9b94a6; --accent:#c93444; --accent-t:#c9344426;
  --ok:#4caf7d; --warn:#d9a91a; --bad:#e05555; --chipbg:#26232e;
  --co:#d9a91a; --en:#b06ef7; --mo:#8f96a3; --sa:#e04848; --me:#5b8ae0;
  --co-t:#d9a91a1f; --en-t:#b06ef71f; --mo-t:#8f96a31f; --sa-t:#e048481f; --me-t:#5b8ae01f;
  --shadow:0 1px 4px #0006;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:transparent;color:var(--txt);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;}

/* ===== temas por elemento (afinidade) ===== */
:root[data-elem="morte"]{--accent:#8f96a3;--accent-t:#8f96a326;--elemglow:#3a3f47}
:root[data-elem="energia"]{--accent:#b06ef7;--accent-t:#b06ef726;--elemglow:#4a1a6e}
:root[data-elem="sangue"]{--accent:#ff4545;--accent-t:#ff454526;--elemglow:#7a0e14}
:root[data-elem="conhecimento"]{--accent:#d9a91a;--accent-t:#d9a91a26;--elemglow:#5c4708}
:root[data-elem="medo"]{--accent:#5b8ae0;--accent-t:#5b8ae026;--elemglow:#12295c}
:root[data-elem="morte"][data-elem-ativo="1"]{--paper:#101114;--card:#191b1f;--line:#2e3238}
:root[data-elem="sangue"][data-elem-ativo="1"]{--paper:#1a0b0e;--card:#261114;--line:#4a2028;--line2:#632b36}
:root[data-elem="energia"][data-elem-ativo="1"]{--paper:#130f1a;--card:#1d1626;--line:#372a4a}
:root[data-elem="conhecimento"][data-elem-ativo="1"]{--paper:#161307;--card:#211d0e;--line:#3d351b}
:root[data-elem="medo"][data-elem-ativo="1"]{--paper:#0e1119;--card:#151a26;--line:#252e44}
#fxCanvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* vinheta da cor do elemento nas bordas da tela (só com afinidade ativa) */
:root[data-elem-ativo="1"] main::before{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, var(--elemglow,transparent) 145%);opacity:.55}
:root[data-elem="sangue"][data-elem-ativo="1"] main::before{animation:sanguepulso 3.4s ease-in-out infinite}
@keyframes sanguepulso{0%,100%{opacity:.45}50%{opacity:.8}}
@media (prefers-reduced-motion: reduce){:root[data-elem="sangue"][data-elem-ativo="1"] main::before{animation:none}}

/* splash de NEX / transcender */
.fxsplash{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, #000c 0%, #000e 75%);
  animation:fxin .35s ease-out;pointer-events:none}
.fxsplash.out{animation:fxout .4s ease-in forwards}
.fxsplash .inner{text-align:center;padding:0 20px}
.fxsplash .t{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-weight:700;
  font-size:clamp(34px,7vw,68px);letter-spacing:6px;text-transform:uppercase;color:var(--fxc);
  text-shadow:0 0 22px var(--fxg),0 0 60px var(--fxg);animation:fxtrack 1.9s ease-out}
.fxsplash .s{margin-top:10px;font-size:clamp(14px,2.4vw,20px);letter-spacing:3px;color:#e7e3ea;
  text-transform:uppercase;opacity:.9}
.fxsplash.static .t,.fxsplash.static{animation:none}
@keyframes fxin{from{opacity:0}to{opacity:1}}
@keyframes fxout{to{opacity:0}}
@keyframes fxtrack{from{letter-spacing:22px;opacity:0;filter:blur(6px)}to{letter-spacing:6px;opacity:1;filter:blur(0)}}
.fxflash{position:fixed;inset:0;z-index:998;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 40%, var(--fxc) 160%);
  opacity:.5;animation:fxout .65s ease-out forwards}

/* ===== escolha de elemento (página 2 do modal de NEX 50%) ===== */
.elover{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:20px;animation:fxin .35s ease-out;overflow-y:auto;
  background:radial-gradient(ellipse at center, #08070aee 30%, #000f 100%)}
.elover::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(ellipse at center, transparent 30%, var(--hc,transparent) 230%)}
.elover[data-hover]:not([data-hover=""])::before{opacity:.55}
.elover h2{margin:0;font-size:clamp(24px,4vw,38px);letter-spacing:3px;color:#ece8f0;text-transform:uppercase;
  font-family:"Palatino Linotype",Palatino,Georgia,serif;text-align:center}
.elover .sub{margin:0;color:#9b94a6;font-size:13.5px;letter-spacing:.5px;text-align:center;max-width:60ch}
.elgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;width:min(980px,94vw)}
.elcard{position:relative;border:1px solid #332f3b;border-radius:14px;padding:24px 16px 18px;cursor:pointer;
  background:#131118d9;color:#e7e3ea;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.4), box-shadow .28s, border-color .28s, opacity .3s, filter .3s;
  font:inherit;text-align:center}
.sig{display:block;background:var(--c);
  -webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat}
.elcard .sig{width:112px;height:112px;filter:drop-shadow(0 0 5px var(--cg));
  transition:filter .35s, transform .6s ease}
.elcard b{font-size:19px;letter-spacing:2.5px;text-transform:uppercase;
  font-family:"Palatino Linotype",Palatino,Georgia,serif;color:var(--c)}
.elcard .chaves{font-size:11px;letter-spacing:1px;color:#9b94a6;text-transform:uppercase}
.elcard .frase{font-size:12px;color:#c6c0d0;font-style:italic;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s, max-height .35s}
.elcard:hover,.elcard:focus-visible{transform:translateY(-10px) scale(1.06);border-color:var(--c);
  box-shadow:0 6px 44px -8px var(--c), inset 0 0 30px -18px var(--c)}
.elcard:hover .sig,.elcard:focus-visible .sig{filter:drop-shadow(0 0 18px var(--cg)) drop-shadow(0 0 40px var(--cg));
  transform:scale(1.12) rotate(4deg)}
.elcard:hover .frase,.elcard:focus-visible .frase{opacity:1;max-height:60px}
.elover[data-hover]:not([data-hover=""]) .elcard:not(:hover):not(:focus-visible){opacity:.32;filter:saturate(.3) blur(.4px)}
.elover #elVoltar{background:#ffffff10;border-color:#ffffff26;color:#c6c0d0}

/* carta expandida no centro, pulsando até o pacto */
.elover.picking h2,.elover.picking .sub,.elover.picking #elVoltar{opacity:0;pointer-events:none;transition:opacity .35s}
.elover.picking .elcard:not(.expanded){opacity:0!important;pointer-events:none;transition:opacity .35s}
/* expandida = sem card: só o símbolo pulsando, nome, frase e botões soltos na tela */
.elcard.expanded{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:6;cursor:default;
  width:min(560px,94vw);max-height:94vh;overflow-y:auto;padding:10px;
  background:transparent;border-color:transparent;box-shadow:none!important;
  opacity:1!important;filter:none!important;gap:12px}
.elcard.expanded:hover,.elcard.expanded:focus-visible{transform:none}
.elcard.expanded .sig{width:min(44vh,320px);height:min(44vh,320px);
  animation:sigbreath 1.9s ease-in-out infinite .55s}
.elcard.expanded b{font-size:clamp(28px,5vw,42px);letter-spacing:7px;text-shadow:0 0 24px var(--cg)}
.elcard.expanded .chaves{font-size:12.5px;letter-spacing:2px}
.elcard.expanded .frase{opacity:1;max-height:90px;font-size:15.5px}
.elcard.expanded .acoes{display:flex;gap:12px;margin-top:16px;justify-content:center}
@keyframes sigbreath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 12px var(--cg))}
  50%{transform:scale(1.08);filter:drop-shadow(0 0 34px var(--cg)) drop-shadow(0 0 85px var(--cg))}}

/* confirmação + selamento */
.elselar{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:10px}
.elselar .sig{width:min(42vh,320px);height:min(42vh,320px);filter:drop-shadow(0 0 16px var(--cg))}
.elselar .nm{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(30px,6vw,52px);
  letter-spacing:8px;text-transform:uppercase;color:var(--c);text-shadow:0 0 26px var(--cg)}
.elselar .frase{color:#c6c0d0;font-style:italic;font-size:15px;max-width:52ch}
.elselar .acoes{display:flex;gap:12px;margin-top:8px}
.elselar .acoes .primary{color:#fff}
/* selamento: o símbolo oficial se revela num círculo que abre, gira levemente e pulsa de luz */
.elselar.selando .sig{animation:sigreveal 1.5s cubic-bezier(.3,.8,.3,1) forwards, sigpulse 2.5s ease-out forwards}
.elselar.selando .nm{animation:fxtrack 2s ease-out}
@keyframes sigreveal{
  0%{clip-path:circle(0% at 50% 50%);transform:scale(.6) rotate(-14deg);opacity:0}
  55%{opacity:1}
  99%{clip-path:circle(140% at 50% 50%)}
  100%{clip-path:none;transform:scale(1) rotate(0)}}
@keyframes sigpulse{0%{filter:drop-shadow(0 0 4px var(--cg))}
  70%{filter:drop-shadow(0 0 36px var(--cg)) drop-shadow(0 0 90px var(--cg))}
  100%{filter:drop-shadow(0 0 18px var(--cg))}}
@media (prefers-reduced-motion: reduce){
  .elover,.elcard,.elcard .sig,.elselar.selando .sig,.elselar.selando .nm,
  .elcard.expanded,.elcard.expanded .sig{animation:none!important;transition:none!important;clip-path:none!important}
}

/* gamificação leve no wizard */
.pick.on{animation:pickpulse .35s ease-out}
@keyframes pickpulse{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.pick.on{animation:none}}
h1,h2,h3,.display{font-family:"Palatino Linotype",Palatino,Georgia,serif;}
.mono,.num{font-family:Consolas,ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:var(--txt);background:var(--card);
  border:1px solid var(--line);border-radius:5px;padding:6px 10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
a{color:var(--txt)}
header.app{background:var(--ink);border-bottom:3px solid var(--accent);
  padding:8px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header.app h1{margin:0;font-size:19px;letter-spacing:.5px}
header.app .sp{flex:1}
header.app a{color:#c6c0d0;font-size:13px;text-decoration:none;margin-left:14px}
header.app a:hover{color:#fff}
header.app .brand{display:flex;align-items:center;gap:11px;margin-left:0;color:#ece8f0}
header.app .brand:hover{color:#fff}
.brandsig{height:40px;width:40px;filter:drop-shadow(0 0 6px #0008)}
.topsig{height:38px;width:38px;display:block;filter:drop-shadow(0 0 6px #0009);transition:filter .25s}
a:hover .topsig{filter:drop-shadow(0 0 10px var(--accent))}
header.app .brand b{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:19px;
  letter-spacing:2.5px;text-transform:uppercase;display:block;line-height:1.1}
header.app .brand small{color:#9b94a6;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase}

/* fundo da campanha (login e dashboard) */
body.bg-campanha::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url("img/fundo_campanha.jpg") center/cover no-repeat;opacity:.5}
body.bg-campanha::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 20%, var(--paper) 95%)}
body.bg-campanha.suave::before{opacity:.22}
.authlogo{display:block;width:min(240px,60vw);margin:0 auto 18px;
  filter:drop-shadow(0 4px 22px #000c)}
.authbox .panel{background:#1c1a21ef;backdrop-filter:blur(2px)}
main{max-width:1080px;margin:0 auto;padding:18px 14px 90px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:15px;letter-spacing:.8px;text-transform:uppercase;
  border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:2px}
.btn{border:1px solid var(--line);background:var(--chipbg);border-radius:6px;padding:7px 14px;font-size:14px}
.btn:hover{border-color:var(--line2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.note{background:var(--accent-t);border:1px solid var(--accent);border-radius:6px;
  padding:9px 12px;font-size:13px;margin:10px 0;max-width:80ch}
.muted{color:var(--txt2);font-size:12.5px}
.err{background:#e0555522;border:1px solid var(--bad);border-radius:6px;padding:8px 12px;margin:8px 0;font-size:13.5px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--txt2);
  text-align:left;padding:4px 8px;border-bottom:2px solid var(--line2)}
td{padding:5px 8px;border-bottom:1px solid var(--line)}
.tablewrap{overflow-x:auto}
.chip{border:1px solid var(--line);background:var(--chipbg);border-radius:999px;
  padding:2.5px 11px;font-size:12.5px;color:var(--txt2);display:inline-block}
.chip.on{border-color:var(--accent);color:var(--txt);background:var(--accent-t);font-weight:600}
.pill{font-size:11px;letter-spacing:.4px;border-radius:4px;padding:1.5px 7px;
  border:1px solid var(--line);color:var(--txt2);white-space:nowrap;display:inline-block}
.pill.el{background:var(--elt);border-color:var(--elc);color:var(--elc);font-weight:600}

/* login */
.authbox{max-width:380px;margin:9vh auto 0}
.authbox .panel{padding:22px}
.authbox h2{margin:0 0 4px;font-size:24px}
.authbox p.sub{margin:0 0 18px;color:var(--txt2);font-size:13px}
.authbox label{display:block;font-size:12px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--txt2);margin:12px 0 4px}
.authbox input{width:100%}
.authbox .btn{width:100%;margin-top:18px}
.authbox .alt{text-align:center;margin-top:14px;font-size:13px;color:var(--txt2)}

/* dashboard cards */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.fcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;display:block}
.fcard:hover{border-color:var(--accent)}
.fcard b{font-size:17px;font-family:Georgia,serif}
.fcard .meta{color:var(--txt2);font-size:12.5px;margin-top:4px}
.fcard .nex{float:right;font-weight:700;color:var(--accent)}

/* wizard */
.steps{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.steps span{font-size:12px;padding:4px 12px;border-radius:999px;background:var(--chipbg);
  border:1px solid var(--line);color:var(--txt2)}
.steps span.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.steps span.done{border-color:var(--ok);color:var(--ok)}
.attrrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.attrbox{width:104px;text-align:center;border:2px solid var(--line2);border-radius:10px;padding:10px 6px;background:var(--paper)}
.attrbox b{font-size:12px;letter-spacing:1.5px;color:var(--txt2);display:block}
.attrbox .v{font-size:26px;font-weight:700;margin:4px 0}
.attrbox button{width:28px;height:28px;border-radius:5px;border:1px solid var(--line);background:var(--chipbg)}

/* pentágono de atributos, como na ficha oficial (AGI em cima, FOR/INT dos lados, PRE/VIG embaixo) */
.penta{position:relative;width:340px;max-width:100%;height:330px;margin:10px auto}
.penta .blob{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle at 40% 35%, #241d2b 0%, #000 70%);
  box-shadow:0 0 26px #00000088, inset 0 0 18px #000}
.penta .pa{position:absolute;width:92px;height:92px;border-radius:50%;border:3px solid var(--line2);
  background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:border-color .15s}
.penta .pa.zero{border-style:dashed;opacity:.85}
.penta .pa b{font-size:11px;letter-spacing:1.6px;color:var(--txt2)}
.penta .pa .v{font-size:26px;font-weight:700;line-height:1.1}
.penta .pa .bt{display:flex;gap:5px;margin-top:2px}
.penta .pa .bt button{width:24px;height:22px;font-size:13px;line-height:1;border-radius:4px;
  border:1px solid var(--line);background:var(--chipbg);padding:0}


/* cartão visual da classe */
.visclasse{border:1px solid var(--line);border-left:4px solid var(--cor,var(--accent));border-radius:8px;
  background:var(--paper);padding:12px 14px;display:flex;gap:14px;align-items:flex-start}
.visclasse .emblema{width:64px;height:64px;flex:none;border-radius:50%;border:3px solid var(--cor,var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--card);box-shadow:var(--shadow)}
.visclasse p{margin:0 0 8px;font-size:13.5px;max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:430px;overflow-y:auto;padding:2px}
.pick{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper);cursor:pointer}
.pick:hover{border-color:var(--line2)}
.pick.on{border-color:var(--accent);background:var(--accent-t)}
.pick b{display:block;font-size:14.5px}
.pick .muted{display:block;margin-top:3px}
.wnav{display:flex;gap:10px;margin-top:18px}
.wnav .sp{flex:1}
.perlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.perlist label{display:flex;gap:7px;align-items:center;border:1px solid var(--line);
  border-radius:6px;padding:5px 9px;font-size:13px;background:var(--paper)}
.perlist label.fixed{border-color:var(--ok);opacity:.9}
.perlist label.dis{opacity:.4}

/* ficha */
#top{position:sticky;top:0;z-index:40;background:var(--ink);color:#ece8f0;
  border-bottom:3px solid var(--accent);box-shadow:var(--shadow);padding:8px 14px;}
#top .row1{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
#top h1{margin:0;font-size:20px}
#top h1 small{color:#9b94a6;font-size:12px;font-family:"Segoe UI",system-ui,sans-serif;
  letter-spacing:.8px;text-transform:uppercase}
.statline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:#c6c0d0;align-items:center}
.statline b{color:#fff;font-size:14px}
.trackers{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.trk{display:flex;align-items:center;gap:6px;background:#ffffff10;border:1px solid #ffffff22;
  border-radius:6px;padding:3px 8px;min-width:170px;flex:1;max-width:250px}
.trk .lbl{font-size:11px;letter-spacing:1.2px;color:#9b94a6;width:30px}
.trk .val{font-size:16px;font-weight:600;min-width:64px;text-align:center}
.trk button{background:#ffffff14;border:1px solid #ffffff2a;border-radius:4px;width:26px;height:26px;line-height:1;font-size:15px}
.bar{position:relative;height:4px;background:#ffffff1c;border-radius:2px;flex:1;min-width:30px}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:2px;display:block}
.trk.pv i{background:#e05555}.trk.pe i{background:#b06ef7}.trk.san i{background:#5b8ae0}
nav.tabs{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;gap:2px;overflow-x:auto;padding:0 10px}
nav.tabs button{background:none;border:none;border-bottom:3px solid transparent;padding:9px 13px;
  font-size:13.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--txt2)}
nav.tabs button.on{color:var(--txt);border-bottom-color:var(--accent);font-weight:600}
section.tab{display:none}section.tab.on{display:block}
.hab{border-bottom:1px dashed var(--line);padding:9px 0;max-width:76ch}
.hab:last-child{border-bottom:none}
.hab h4{margin:0 0 3px;font-size:14.5px}
.hab .tagline{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);font-weight:600}
.hab p{margin:4px 0;white-space:pre-line}
.rcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--elc,var(--line2));
  border-radius:7px;margin-bottom:8px;box-shadow:var(--shadow);overflow:hidden}
.rhead{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;flex-wrap:wrap}
.rhead:hover{background:var(--accent-t)}
.rhead .nm{font-weight:650;font-size:15.5px;font-family:Georgia,serif}
.rhead .meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-left:auto}
.rsub{font-size:12px;color:var(--txt2);width:100%;display:flex;gap:12px;flex-wrap:wrap}
.rbody{display:none;border-top:1px dashed var(--line);padding:11px 14px 13px}
.rcard.open .rbody{display:block}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px;
  font-size:13px;margin-bottom:10px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px 12px}
.statgrid b{display:block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--txt2)}
.rdesc{max-width:70ch;white-space:pre-line}
.formblk{border:1px solid var(--line);border-radius:6px;padding:9px 12px;margin-top:9px;background:var(--paper)}
.avail{font-size:11px;border-radius:4px;padding:1px 7px;font-weight:600}
.avail.ok{background:var(--ok);color:#fff}.avail.no{background:var(--bad);color:#fff}
.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.actions button{border:1px solid var(--line);background:var(--chipbg);border-radius:6px;padding:5px 11px;font-size:12.5px}
.actions button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.grphead{font-size:16px;letter-spacing:1.2px;text-transform:uppercase;margin:22px 0 9px;
  padding-bottom:4px;border-bottom:2px solid var(--line2)}
.grphead .num{color:var(--txt2);font-size:12px;font-weight:400}
.pill.tag-dano{color:#fff;background:var(--sa);border-color:var(--sa)}
.pill.tag-cura{color:#fff;background:var(--ok);border-color:var(--ok)}
.pill.tag-buff{color:#fff;background:#3f7fbf;border-color:#3f7fbf}
.pill.tag-debuff{color:#fff;background:#b0871f;border-color:#b0871f}
.pill.tag-controle{color:#fff;background:#7b5cd6;border-color:#7b5cd6}
.pill.tag-defesa{color:#fff;background:#4d8a72;border-color:#4d8a72}
.pill.tag-utilidade{color:#fff;background:#6d6a78;border-color:#6d6a78}
.pill.state{background:var(--accent-t);border-color:var(--accent);color:var(--txt);font-weight:600}
.pill.circ{background:var(--chipbg);font-weight:600;color:var(--txt)}

/* ===== dados (rolagens) ===== */
#diceTray{position:fixed;right:12px;bottom:12px;z-index:900;display:flex;flex-direction:column;
  gap:8px;width:min(330px,92vw);pointer-events:none}
.dtoast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:9px 12px;box-shadow:0 4px 22px #000a;font-size:13.5px;
  animation:fxin .22s ease-out;pointer-events:auto}
.dtoast.out{opacity:0;transition:opacity .4s}
.dtoast.crit{border-left-color:var(--warn);box-shadow:0 0 22px -4px var(--warn)}
.dtoast .dice{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 3px}
.die{min-width:26px;height:26px;padding:0 4px;border:1px solid var(--line2);border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;font-family:Consolas,monospace;
  font-weight:700;font-size:13px;background:var(--paper);opacity:.55}
.die.best{opacity:1;border-color:var(--accent);box-shadow:0 0 7px -2px var(--accent)}
.dice .die:only-child,.dtoast .dice .die{opacity:1}
.die.nat20{border-color:var(--ok);color:var(--ok);box-shadow:0 0 9px -2px var(--ok)}
.die.nat1{border-color:var(--bad);color:var(--bad)}
.dtotal{font-size:14px}.dtotal b{font-size:19px}
.roll{color:var(--accent);border-bottom:1px dotted var(--accent);cursor:pointer;font-weight:600;white-space:nowrap}
.roll:hover{background:var(--accent-t)}
.dbtn{border:1px solid var(--line);background:var(--chipbg);border-radius:5px;padding:1px 8px;
  cursor:pointer;font-size:13px;line-height:1.5}
.dbtn:hover{border-color:var(--accent)}
#rolador{position:fixed;right:12px;bottom:12px;z-index:901;background:var(--card);border:1px solid var(--line2);
  border-radius:10px;padding:12px;box-shadow:0 6px 30px #000c;display:none;width:min(300px,92vw)}
#rolador.on{display:block}
#rolador .quick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}

/* histórico lateral de rolagens */
#diceDrawerTab{position:fixed;right:0;top:46%;z-index:902;background:var(--card);border:1px solid var(--line2);
  border-right:none;border-radius:9px 0 0 9px;padding:9px 6px;cursor:pointer;font-size:16px;
  display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:-2px 2px 12px #0008}
#diceDrawerTab span{writing-mode:vertical-rl;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--txt2)}
#diceDrawerTab:hover{border-color:var(--accent)}
#diceDrawer{position:fixed;right:0;top:0;bottom:0;z-index:903;width:min(360px,94vw);
  background:var(--card);border-left:1px solid var(--line2);box-shadow:-8px 0 34px #000b;
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column}
#diceDrawer.on{transform:translateX(0)}
#diceDrawer .dhead{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:2px solid var(--accent)}
#dhList{overflow-y:auto;padding:10px 12px;flex:1}
.dhitem{border-bottom:1px dashed var(--line);padding:8px 0;font-size:13px;position:relative}
.dhitem .dhora{float:right;font-size:10.5px;color:var(--txt2);font-family:Consolas,monospace}
@media (prefers-reduced-motion: reduce){#diceDrawer{transition:none}}
.dlinha{margin-top:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dlinha b{font-size:16px}
.dlinha.critON{color:var(--warn);font-weight:600}
.dice.mini .die{min-width:20px;height:20px;font-size:11px}
.ameaca{color:var(--warn);font-weight:700}

/* modal nex */
dialog{background:var(--card);color:var(--txt);border:1px solid var(--line2);border-radius:10px;
  max-width:720px;width:94vw;padding:20px;box-shadow:0 8px 40px #000a}
dialog::backdrop{background:#000a}
dialog h2{margin:0 0 6px}
.escolha{border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin:10px 0;background:var(--paper)}
.escolha b.t{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- mesas (campanha compartilhada) ---------- */
.mesa-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;
  max-width:1280px;margin:24px auto;padding:0 20px}
@media (max-width:980px){.mesa-wrap{grid-template-columns:1fr}}
.mesa-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.agentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mcard{display:block;text-decoration:none;color:inherit}
.mbars{display:grid;grid-template-columns:auto 1fr auto;gap:3px 7px;align-items:center;
  margin:8px 0 4px;font-size:10.5px;letter-spacing:.6px;color:var(--txt2)}
.mesa-feed{position:sticky;top:14px;max-height:calc(100vh - 90px);overflow-y:auto}
.froll{border-bottom:1px solid var(--line);padding:8px 2px;font-size:13px}
.froll .fq{display:flex;gap:6px;align-items:baseline}
.froll .ftotal{margin-left:auto;font-weight:800;font-size:17px;color:var(--accent)}
.froll.nova{animation:frollin .5s ease}
@keyframes frollin{from{background:var(--elt,#ffffff14)}to{background:transparent}}
.blista{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow-y:auto}
.bitem{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;
  padding:7px 10px;font-size:13px}
.bitem b{font-family:Georgia,serif;font-size:14.5px}
.bitem .muted{flex:1}
.bitem .num{min-width:56px;font-weight:700}

/* ---------- ficha de ameaça (mestre) ---------- */
.monstro{max-width:1180px;margin:20px auto;padding:0 20px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.mgrid{grid-template-columns:1fr}}
.mtopo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mnome{font-family:Georgia,serif;font-size:24px;font-weight:700;background:transparent;
  border:none;border-bottom:1px dashed var(--line2);color:var(--txt);min-width:240px;flex:1}
.mnome:focus{outline:none;border-bottom-color:var(--accent)}
.msel{padding:6px}
.mvd{font-weight:700;color:var(--accent);display:flex;gap:5px;align-items:center}
.pvzona{display:flex;align-items:baseline;gap:6px}
.pvbig{font-size:38px;font-weight:800;width:130px;background:transparent;color:var(--txt);
  border:none;border-bottom:2px solid var(--accent)}
.pvbig:focus{outline:none}
.pvsep{font-size:26px;color:var(--txt2)}
.pvmax{font-size:19px;width:80px;background:transparent;color:var(--txt2);border:none;
  border-bottom:1px dashed var(--line2)}
.pvbtns{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.btn.mini{padding:3px 9px;font-size:12px}
.rline{display:flex;gap:4px;align-items:center}
.rline input{flex:1;min-width:60px}
.matribs{display:flex;gap:10px;flex-wrap:wrap}
.matrib{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px}
.matrib b{font-size:10.5px;letter-spacing:1px;color:var(--txt2)}
.matrib input{width:52px;text-align:center;font-size:19px;font-weight:700;background:transparent;
  border:none;color:var(--txt)}
.panel-sub{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px}
.acao-l1{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.acao-l2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--txt2)}
.acao-l2 label{display:flex;gap:5px;align-items:center}
.acao-txt{margin-top:7px;font-size:12.5px;line-height:1.5}
.ro-aviso{position:sticky;top:0;z-index:60;background:#2a2033;color:#d9c8f0;text-align:center;
  font-size:12.5px;padding:6px 10px;border-bottom:1px solid #6b4d8f}
.stpline{display:flex;gap:4px;align-items:center}
.btn.stp{padding:0 7px;font-size:13px;line-height:18px;border-radius:4px}
.stephas{grid-template-columns:auto 1fr}
.mcard.guardado{opacity:.55;filter:saturate(.4)}
.mcard.guardado:hover{opacity:.85}

/* ---------- mapa da mesa (VTT) ---------- */
.vtt-top{display:flex;align-items:center;gap:9px;padding:7px 14px;background:var(--card);
  border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative;z-index:20}
.vtt-top .brand{margin-right:6px}
.vsep{width:1px;height:22px;background:var(--line)}
.vtt-palco{position:relative;height:calc(100vh - 54px);overflow:hidden;background:#0b090c;
  touch-action:none;user-select:none}
#mundo{position:absolute;transform-origin:0 0}
#fundo{position:absolute;inset:0;pointer-events:none;-webkit-user-drag:none}
#grade{position:absolute;inset:0;pointer-events:none}
#camadaTokens{position:absolute;inset:0}
.vtok{position:absolute;cursor:default}
.vtok.meu{cursor:grab}
.vtok.meu:active{cursor:grabbing}
.vtok video{width:100%;height:100%;object-fit:contain;pointer-events:none}
.vtok img{width:100%;height:100%;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 4px 8px #000c)}
.vtok.sel{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.vtok .vtag{position:absolute;top:100%;left:50%;white-space:nowrap;
  transform:translateX(-50%) translateY(4px) scale(var(--invz,1));transform-origin:top center;
  font:600 11px system-ui,sans-serif;color:#e8e2dc;background:#000a;border:1px solid var(--line);
  border-radius:4px;padding:1px 7px;pointer-events:none}
#medidor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#medLinha{stroke:#e8c94a;stroke-width:2.5;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
#medIni{fill:none;stroke:#e8c94a;stroke-width:2;vector-effect:non-scaling-stroke}
.med-rotulo{position:absolute;z-index:15;background:#141114ee;border:1px solid #e8c94a;color:#e8c94a;
  font:700 13px Consolas,ui-monospace,monospace;padding:3px 10px;border-radius:5px;pointer-events:none;
  transform:translateX(-50%)}
.tok-tools{position:absolute;z-index:15;display:flex;gap:3px;background:#1d181cee;
  border:1px solid var(--line2);border-radius:7px;padding:4px;transform:translateX(-50%)}
.tok-tools button{border:none;background:none;color:var(--txt);font-size:14px;width:28px;height:26px;
  border-radius:5px;cursor:pointer}
.tok-tools button:hover{background:#ffffff18}
.tok-tools button.perigo:hover{background:#c22a3133;color:var(--bad)}
.sem-cena{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt2);font-size:15px}
.vtool.on{border-color:var(--accent);color:var(--accent2)}
.marquee{position:absolute;z-index:14;border:1.5px dashed var(--accent2);background:#c22a3115;
  pointer-events:none}
.vtok.oculta{opacity:.45}
.vtok.oculta img{filter:drop-shadow(0 4px 8px #000c) saturate(.5)}
.tkgal{display:flex;gap:8px;flex-wrap:wrap;min-height:10px}
.tkthumb{cursor:pointer}
.tkthumb input{display:none}
.tkthumb img{width:64px;height:80px;object-fit:contain;border:2px solid var(--line);border-radius:6px;
  background:#0d0a0e;padding:2px}
.tkthumb input:checked + img{border-color:var(--accent)}
.galficha{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.galficha .gtk{position:relative}
.galficha img{width:64px;height:80px;object-fit:contain;border:1px solid var(--line);border-radius:6px;
  background:#0d0a0e;padding:2px}
.galficha .gdel{position:absolute;top:-6px;right:-6px;border:1px solid var(--line2);background:var(--card);
  color:var(--bad);border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer}
.vtok .vhp{position:absolute;left:6%;right:6%;bottom:-6px;height:5px;background:#000b;
  border-radius:3px;overflow:hidden;pointer-events:none;border:1px solid #0008}
.vtok .vhp i{display:block;height:100%;background:#4caf50}
.vtok .vtag{transform:translateX(-50%) translateY(10px) scale(var(--invz,1));transform-origin:top center}
.tok-stats{position:absolute;z-index:15;display:flex;gap:5px;align-items:center;background:#1d181cee;
  border:1px solid var(--line2);border-radius:7px;padding:4px 8px;transform:translateX(-50%);
  font-size:12px}
.tok-stats .tsrot{font-size:10px;letter-spacing:.8px;font-weight:700;margin-left:4px}
.tok-stats .tsval{font-size:14px;font-weight:700;min-width:44px;text-align:center}
.tok-stats .tsval small{color:var(--txt2);font-weight:400}
.elenco{position:absolute;top:10px;right:10px;z-index:18;width:290px;max-height:70vh;overflow-y:auto;
  background:#1d181cf5;border:1px solid var(--line2);border-radius:9px;padding:12px}
.elenco h4{margin:0 0 4px;font-family:Georgia,serif}
.elitem{display:flex;gap:9px;align-items:center;border-top:1px solid var(--line);padding:7px 0}
.elitem img{width:40px;height:52px;object-fit:contain;background:#0d0a0e;border-radius:5px}
.elitem .elsem{width:40px;height:52px;display:grid;place-items:center;font-size:9px;color:var(--txt2);
  border:1px dashed var(--line);border-radius:5px;text-align:center}
.elitem b{font-family:Georgia,serif;font-size:13.5px}
#nevoa{position:absolute;inset:0;pointer-events:none;z-index:12}
.marquee.fogsel{border-color:#e8c94a;background:#e8c94a18}
.tok-picker{position:absolute;z-index:16;display:flex;gap:6px;background:#1d181cee;
  border:1px solid var(--line2);border-radius:8px;padding:7px;transform:translateX(-50%);
  max-width:340px;flex-wrap:wrap}
.tok-picker img{width:52px;height:66px;object-fit:contain;border:2px solid var(--line);
  border-radius:6px;background:#0d0a0e;cursor:pointer}
.tok-picker img:hover{border-color:var(--line2)}
.tok-picker img.atual{border-color:var(--accent)}
.fog-panel{position:absolute;top:10px;left:56px;z-index:18;width:270px;background:#1d181cf5;
  border:1px solid var(--line2);border-radius:9px;padding:12px;font-size:13px}
.fog-panel h4{margin:0 0 8px;font-family:Georgia,serif}
/* visor de item (documento em tela cheia) */
.visor{position:fixed;inset:0;z-index:200;background:#0b090ce8;display:flex;flex-direction:column;
  backdrop-filter:blur(3px)}
.visor-top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card);
  border-bottom:1px solid var(--line)}
.visor-top b{font-family:Georgia,serif;font-size:17px}
.visor-corpo{flex:1;overflow:hidden;display:grid;place-items:center;cursor:grab;touch-action:none}
.visor-corpo:active{cursor:grabbing}
.visor-corpo img{max-width:92vw;max-height:78vh;user-select:none;-webkit-user-drag:none;
  transition:transform .08s ease-out;box-shadow:0 20px 70px #000}
.visor-acoes{display:flex;gap:10px;align-items:center;padding:12px 16px;background:var(--card);
  border-top:1px solid var(--line);flex-wrap:wrap}
.vtok[data-eh-item]{filter:drop-shadow(0 0 6px #e8c94a55)}
.aviso-mapa{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:#2a2033f0;border:1px solid #6b4d8f;color:#d9c8f0;border-radius:8px;
  padding:8px 18px;font-size:13.5px;pointer-events:none}
.som-widget{position:absolute;bottom:12px;right:12px;z-index:18;display:flex;gap:9px;
  align-items:center;background:#1d181cee;border:1px solid var(--line2);border-radius:20px;
  padding:6px 14px;font-size:12.5px}
.som-widget input{width:90px;accent-color:var(--accent)}
.som-unlock{position:absolute;bottom:60px;right:12px;z-index:18}
.som-tocando{border:1px solid var(--line2);border-radius:8px;padding:9px 11px;background:var(--card)}
.som-tocando b{font-family:Georgia,serif;font-size:13.5px}
.sbar{height:8px;background:#ffffff18;border-radius:4px;margin:7px 0 5px;cursor:pointer;overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px}
.sfav{border:none;background:none;font-size:15px;color:var(--txt2);width:26px}
.sfav.on{color:#e8c94a}
.stema{font-size:10.5px;padding:1px 3px;background:transparent;color:var(--txt2);
  border:1px solid transparent;border-radius:4px}
.stema:hover{border-color:var(--line)}
.elitem.tocando{background:#c22a3112;border-radius:6px}
/* chat lateral do mapa */
.chat{position:fixed;top:54px;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;
  transform:translateX(268px);transition:transform .25s ease}
.chat.aberto{transform:none}
.chat-tab{width:26px;border:1px solid var(--line2);border-right:none;background:var(--card);
  color:var(--txt);border-radius:8px 0 0 8px;cursor:pointer;align-self:center;height:64px;font-size:14px}
.chat-corpo{width:268px;background:#17121600;display:flex;flex-direction:column;
  background:var(--card);border-left:1px solid var(--line)}
.chat-head{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-bottom:1px solid var(--line)}
#chatLista{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px}
#chatForm{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
#chatForm input{flex:1;min-width:0}
.cmsg{font-size:12.5px;line-height:1.45}
.cmsg.redigida{color:var(--txt2);font-size:12px}
.cq{font-size:10px;letter-spacing:.6px;color:var(--txt2);text-transform:uppercase;margin-bottom:2px}
.cq span{text-transform:none;letter-spacing:0}
/* card no padrãozinho da ficha do Roll20 (branco, borda preta, caixinhas amarelas) */
.opcard{background:#fff;color:#1b1b1b;border:2px solid #222;border-radius:10px;
  padding:8px 10px;text-align:center;font-family:Georgia,serif}
.opcard.oc{outline:2px dashed #b3232a55;outline-offset:2px}
.opcard .cq{color:#666}
.opcard .cnome{font-style:italic;font-size:13px;margin-bottom:6px}
.opcard .cnome2{font-size:12.5px;margin-top:3px}
.opcard .cnum{display:inline-block;min-width:34px;padding:3px 7px;background:#fdf3b0;
  border:1.5px solid #d8c86a;border-radius:4px;font-weight:800;font-size:17px;
  font-family:Consolas,ui-monospace,monospace}
.opcard .cnum.crit{border-color:#2e9b46;box-shadow:0 0 0 1.5px #2e9b46}
.opcard .cduplo{display:flex;justify-content:center;align-items:center;gap:12px}
.opcard .cduplo label{display:block;font-size:10.5px;margin-top:3px;letter-spacing:.4px}
.opcard .critlbl{color:#2e9b46;font-weight:700}
.opcard .csep{width:1px;height:34px;background:#0002}
.opcard .cdet{font-size:10px;color:#777;margin-top:5px;font-family:system-ui}
/* tracker de iniciativa */
.tracker{position:absolute;top:10px;left:56px;z-index:18;width:230px;background:#1d181cf5;
  border:1px solid var(--line2);border-radius:9px;padding:9px}
.tracker .thead{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.trow{display:flex;gap:7px;align-items:center;padding:4px 6px;border-radius:6px;font-size:13px}
.trow.vez{background:#c22a3122;outline:1px solid #c22a3166}
.trow.octk{opacity:.6}
.trow .tini{min-width:26px;font-weight:800;color:var(--accent2);text-align:right}
.trow .tnome{flex:1;font-family:Georgia,serif}
/* convocação */
.convoca{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:25;
  background:#1d181cf8;border:2px solid var(--accent);border-radius:12px;padding:16px 22px;
  text-align:center;box-shadow:0 20px 60px #000c}
.convoca h4{margin:0 0 4px;font-family:Georgia,serif;letter-spacing:2px;color:var(--accent2)}
.convoca button{display:block;width:100%;margin-top:8px}
.preview-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:22;
  background:#2a2033f0;border:1px solid #6b4d8f;color:#d9c8f0;border-radius:8px;padding:5px 16px;font-size:12.5px}
#btnOcultoMapa.on{border-color:var(--accent);color:var(--accent2)}
.som-widget{right:auto;left:56px}
.som-unlock{right:auto;left:56px}
.trow.anon .tnome{color:var(--conhec, #e8c94a)}
#tPend .btn.mini{padding:0 5px;font-size:10px}
.convoca{min-width:280px}
/* tooltip estilo Roll20 nos números dos cards do chat */
.opcard .cnum[data-tip]{position:relative;cursor:help}
.opcard .cnum[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#111;color:#fff;border:1px solid #444;border-radius:6px;padding:6px 10px;
  font:600 11.5px Consolas,ui-monospace,monospace;white-space:nowrap;z-index:50;
  box-shadow:0 6px 18px #000a;pointer-events:none}
.opcard .cnum[data-tip]:hover::before{
  content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111;z-index:50}
/* no mapa o chat substitui o histórico de dados */
.pagina-mapa #diceDrawerTab,.pagina-mapa #diceDrawer{display:none!important}
.chat-corpo{position:relative;width:var(--chatw, 268px)}
.chat{transform:translateX(var(--chatw, 268px))}
.chat.aberto{transform:none}
.chat-resize{position:absolute;left:-3px;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:5}
.chat-resize:hover{background:#c22a3144}
/* tooltip quebra linha em vez de estourar o chat */
.opcard .cnum[data-tip]:hover::after{white-space:pre-line;width:max-content;max-width:200px}
.tok-acoes{position:absolute;z-index:15;background:#1d181cee;border:1px solid var(--line2);
  border-radius:8px;padding:6px 9px;transform:translateX(-50%);width:270px;max-height:300px;
  overflow-y:auto;font-size:12.5px}
.tok-acoes summary{cursor:pointer;font-weight:700;font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--txt2);padding:3px 0}
.taRow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 2px;
  border-top:1px solid var(--line)}
.taRow.habs{display:block}
.taRow i{font-style:normal;font-size:11px}
/* tooltip de extrato (de onde veio o número) — mesma cara do tooltip do chat */
.tip[data-tip]{position:relative;cursor:help;border-bottom:1px dotted var(--txt2)}
.tipfix{position:fixed;display:none;background:#111;color:#eee;border:1px solid #444;
  border-radius:7px;padding:8px 12px;font:600 11.5px Consolas,ui-monospace,monospace;
  white-space:pre-line;width:max-content;max-width:340px;text-align:left;z-index:999;
  box-shadow:0 8px 22px #000c;pointer-events:none}
.btn.mini.stg{padding:0 5px;font-size:11px;opacity:.45}
.btn.mini.stg.on{opacity:1;border-color:var(--accent);color:var(--accent2)}

/* ---------- roda de atributos com a ARTE OFICIAL (números sobre os hexágonos) ---------- */
.penta{width:360px;height:363px;background:url("img/atributos_roda_num.png") center/contain no-repeat}
.penta .blob{display:none}
.penta .pa{border:none;background:none;box-shadow:none;width:76px;height:auto;border-radius:8px;
  justify-content:center;transform:translate(-50%,-50%)}
.penta .pa b{display:block;font-size:10px;letter-spacing:2px;color:var(--txt2)}  /* sigla na criação */
.penta.mini .pa b{display:none}                /* na ficha: só o número */
.penta .pa .v{font-size:32px;background:#141114d9;padding:0 12px;border-radius:9px;line-height:1.3;box-shadow:0 0 0 1px #ffffff22}
.penta .pa.zero .v{opacity:.55}
.penta .pa.agi{left:49.6%;top:20.4%;right:auto}
.penta .pa.for{left:18.4%;top:41.3%;right:auto}
.penta .pa.int{left:80.7%;top:41.3%;right:auto}
.penta .pa.pre{left:27.4%;top:79.2%;right:auto}
.penta .pa.vig{left:71.7%;top:79.2%;right:auto}
.penta .pa:hover .v{color:var(--accent2)}
.penta.mini{width:300px;height:303px}
.penta.mini .pa .v{font-size:26px}
/* personagem-exemplo do elemento: surge da sombra à direita */
.elpersona{position:fixed;right:2vw;bottom:0;z-index:5;width:min(30vw,420px);text-align:center;
  pointer-events:none;animation:persurge 1.1s cubic-bezier(.2,.8,.3,1) both .25s}
.elpersona img{width:100%;max-height:62vh;object-fit:contain;object-position:bottom;
  mix-blend-mode:lighten;   /* o fundo preto da arte some no escuro da página */
  /* derrete as 4 bordas na sombra (sem retângulo aparente) */
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 24%),
    linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 20%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to top,transparent 0,#000 24%),
    linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 20%);
          mask-composite:intersect}
.elpersona .pnome{font-family:Georgia,serif;font-size:26px;font-weight:700;color:var(--c);
  margin-top:-14px;text-shadow:0 2px 14px #000}
.elpersona .psub{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--txt2)}
@keyframes persurge{from{opacity:0;transform:translateY(70px);filter:brightness(0)}
  60%{filter:brightness(.6)}to{opacity:1;transform:none;filter:brightness(1)}}
@media (prefers-reduced-motion: reduce){.elpersona{animation:none}}
@media (max-width:900px){.elpersona{display:none}}

/* ---------- 📚 acervo do mestre ---------- */
.acervo{position:absolute;left:0;top:0;bottom:0;width:314px;max-width:86vw;z-index:70;
  background:#15111df2;border-right:1px solid var(--line);display:flex;flex-direction:column;
  backdrop-filter:blur(4px)}
.ac-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.ac-tabs{display:flex;border-bottom:1px solid var(--line)}
.ac-tabs button{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--txt2);
  font-size:17px;padding:7px 0;cursor:pointer}
.ac-tabs button.on{border-bottom-color:var(--accent);color:var(--txt)}
.ac-pane{flex:1;overflow:auto;padding:10px}
.ac-pane h5{margin:12px 0 6px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt2)}
.ac-dica{font-size:11px;margin-bottom:8px;line-height:1.45}
.acitem{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:7px;cursor:pointer}
.acitem:hover{background:#ffffff10}
.acitem img{width:34px;height:34px;object-fit:contain;flex:none}
.acitem .acic{font-size:24px;width:34px;text-align:center;flex:none}
.acitem .btn{flex:none;padding:2px 7px}
.acpasta{margin:2px 0}
.acpasta summary{cursor:pointer;padding:5px 4px;color:var(--txt2);user-select:none;list-style:none}
.acpasta summary::before{content:"▸ "}
.acpasta[open] summary::before{content:"▾ "}
.acpasta .acsub{margin-left:14px;border-left:1px solid var(--line);padding-left:6px}
.acpasta.dropalvo > summary{background:#c9a84c33;border-radius:6px;outline:1px dashed var(--accent)}
.ac-pane.dropraiz{outline:2px dashed #c9a84c66;outline-offset:-4px;border-radius:8px}
.acitem[draggable]{cursor:grab}
.acmenu{position:absolute;z-index:80;background:#201a2a;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px #000c;display:flex;flex-direction:column;min-width:180px;overflow:hidden}
.acmenu button{background:none;border:none;color:var(--txt);text-align:left;padding:8px 12px;cursor:pointer;font-size:12.5px}
.acmenu button:hover{background:#ffffff14}
.poi-icones{display:flex;flex-wrap:wrap;gap:4px}
.poiic{font-size:19px;padding:3px 7px;border-radius:7px;border:1px solid var(--line);
  background:var(--chipbg);cursor:pointer}
.poiic.img{padding:2px;width:46px;height:46px}
.poiic.img img{width:100%;height:100%;object-fit:contain;display:block}
.poiic.on{outline:2px solid var(--accent)}
.poi-faixas{display:flex;flex-direction:column;gap:8px}
.poifx{display:grid;grid-template-columns:56px 1fr 1fr;gap:6px;align-items:start}
.poifx textarea{min-height:56px;font-size:12px;width:100%}
.poifx [data-cat]{margin-top:3px;padding:1px 8px;font-size:11px}

/* ---------- 🧰 saque de ponto de interesse: telinha do player + painel do mestre ---------- */
.poitela{position:fixed;inset:0;z-index:200;background:#000000b8;display:flex;
  align-items:center;justify-content:center;animation:poifade .25s ease}
@keyframes poifade{from{opacity:0}}
.poicard{position:relative;width:min(92vw,360px);text-align:center;padding:22px 22px 18px;
  background:radial-gradient(circle at 50% 0%, #241d2e 0%, #15111d 70%);
  border:1px solid #c9a84c66;border-radius:14px;box-shadow:0 20px 70px #000, inset 0 0 40px #00000088;
  animation:poisurge .35s cubic-bezier(.2,.8,.3,1.15)}
@keyframes poisurge{from{transform:translateY(26px) scale(.92);opacity:0}}
.poifechar{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--txt2);
  font-size:15px;cursor:pointer}
.poiimg{width:84px;height:84px;object-fit:contain;margin:0 auto 4px;display:block;
  filter:drop-shadow(0 6px 14px #000)}
.poicard h3{margin:2px 0 4px;font-family:Georgia,serif;letter-spacing:.5px}
.poisub{margin:0 0 12px;color:var(--txt2);font-size:12.5px}
.poimiolo{min-height:118px;display:flex;align-items:center;justify-content:center}
.poidado{background:none;border:none;color:#c9a84c;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:2px;padding:6px 16px;border-radius:12px;
  transition:transform .15s, color .15s;animation:poigira 3.2s ease-in-out infinite}
.poidado:hover{transform:scale(1.12) rotate(8deg);color:#ffd977}
.poidado svg{width:74px;height:74px}
.poidado b{font-size:12px;letter-spacing:2px}
@keyframes poigira{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.poitotal{display:flex;flex-direction:column;align-items:center;animation:poisurge .3s ease}
.poitotal .num{font-size:52px;font-weight:700;color:#ffd977;text-shadow:0 0 24px #c9a84c66;line-height:1}
.poitotal small{color:var(--txt2);letter-spacing:2px;text-transform:uppercase;font-size:10px}
.poistatus{min-height:20px;font-size:12.5px}
.poistatus.pulsa i{animation:poipulsa 1.4s ease-in-out infinite}
@keyframes poipulsa{50%{opacity:.35}}
.poiachado ul{list-style:none;padding:0;margin:8px 0 12px}
.poiachado li{padding:4px 10px;margin:4px 0;background:#c9a84c1c;border:1px solid #c9a84c44;
  border-radius:8px;font-size:13.5px}
.poinada{font-size:44px;opacity:.75;animation:poisurge .4s ease}
.saques{position:absolute;right:14px;top:56px;z-index:65;width:290px;max-height:60vh;overflow:auto;
  background:#1a1424f2;border:1px solid #c9a84c55;border-radius:12px;padding:10px 12px;
  box-shadow:0 12px 40px #000c;backdrop-filter:blur(3px)}
.saques h4{margin:0 0 8px;font-size:13px;color:#ffd977}
.sqitem{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;
  padding:8px;border-radius:8px;background:#ffffff08;margin-bottom:6px;font-size:12.5px}
.sqachou{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.sqbts{display:flex;flex-direction:column;gap:4px}

/* alça de redimensionar (canto do grupo selecionado) */
.selhandle{position:absolute;width:15px;height:15px;border-radius:50%;z-index:40;
  background:#c9a84c;border:2px solid #15111d;box-shadow:0 0 0 1.5px #c9a84c88, 0 2px 6px #000c;
  transform:translate(-50%,-50%) scale(var(--invz,1));cursor:nwse-resize}
.selhandle:hover{background:#ffd977}

/* ---------- 🗂 gerenciador de cenas ---------- */
.cenamgr{position:fixed;inset:0;z-index:150;background:#000000a8;display:flex;
  align-items:center;justify-content:center;animation:poifade .2s ease}
.cm-box{width:min(94vw,880px);max-height:84vh;display:flex;flex-direction:column;
  background:#171221f6;border:1px solid #c9a84c55;border-radius:14px;box-shadow:0 24px 80px #000;
  overflow:hidden}
.cm-head{display:flex;align-items:center;gap:10px;padding:12px 16px}
.cm-trilha a{color:var(--txt2);text-decoration:none}
.cm-trilha a:hover{color:var(--accent2)}
.cm-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;padding:4px 16px 16px}
.cm-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;
  background:#ffffff06;display:flex;flex-direction:column;gap:4px;font-size:12.5px;min-width:0}
.cm-card:hover{border-color:#c9a84c88;background:#ffffff0d}
.cm-card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-thumb{height:84px;border-radius:7px;background:#0d0a12;display:flex;align-items:center;
  justify-content:center;font-size:34px;overflow:hidden}
.cm-thumb img{width:100%;height:100%;object-fit:cover}
.cm-badges{display:flex;gap:4px;min-height:16px}
.cm-acoes{display:flex;gap:4px;justify-content:flex-end}
.cm-pastacard .cm-thumb{background:#c9a84c14}
.cm-card.dropalvo{outline:2px dashed var(--accent);background:#c9a84c22}

/* miniaturas de token em vídeo (webm/mp4) herdam o tamanho do <img> equivalente */
.acitem video{width:34px;height:34px;object-fit:contain;flex:none}
.gtk video{width:74px;height:74px;object-fit:contain}
.tkthumb video{width:64px;height:64px;object-fit:contain}
.tok-picker .pkthumb{cursor:pointer;display:inline-flex;border-radius:8px;overflow:hidden}
.tok-picker .pkthumb img,.tok-picker .pkthumb video{width:56px;height:56px;object-fit:contain}
.tok-picker .pkthumb.atual{outline:2px solid var(--accent)}
.cm-thumb video{width:100%;height:100%;object-fit:cover}
.acvar{margin:0 0 4px 40px}
.acvar summary{cursor:pointer;font-size:11.5px;padding:2px 4px;list-style:none}
.acvar summary::before{content:"▸ "}
.acvar[open] summary::before{content:"▾ "}

/* árvore lateral do gerenciador de cenas */
.cm-corpo{flex:1;display:flex;overflow:hidden;min-height:280px}
.cm-arvore{width:200px;flex:none;overflow:auto;border-right:1px solid var(--line);
  padding:6px 4px 10px 0;font-size:12.5px}
.cm-no{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:0 14px 14px 0;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-no:hover{background:#ffffff0d}
.cm-no.on{background:#c9a84c22;color:#ffd977}
.cm-no.dropalvo{outline:2px dashed var(--accent);background:#c9a84c22}
.cm-exp{width:13px;flex:none;color:var(--txt2);cursor:pointer;text-align:center}
.cm-noico{flex:none}

/* barra de escopo do acervo (nesta mesa / meu acervo / bestiário) */
.ac-escopo{display:flex;gap:4px;margin-bottom:8px}
.ac-escopo button{flex:1;font-size:11px;padding:4px 2px;border-radius:7px;border:1px solid var(--line);
  background:var(--chipbg);color:var(--txt2);cursor:pointer}
.ac-escopo button.on{border-color:var(--accent);color:#ffd977;background:#c9a84c1a}
#cmMeus.on{border-color:var(--accent);color:#ffd977}
.taRow .roll{cursor:pointer;text-decoration:underline dotted;color:#ffd977}

/* alça de largura do acervo (igual o chat) */
.ac-resize{position:absolute;top:0;bottom:0;right:-5px;width:10px;cursor:ew-resize;z-index:5}
.ac-resize:hover{background:linear-gradient(90deg, transparent, #c9a84c55, transparent)}
.acervo{max-width:92vw}

/* edição rápida de PV/PE/SAN (digite -20 / +5 / 50) */
.tsedit{width:56px;background:#0d0a12;border:1px solid var(--accent);border-radius:5px;
  color:var(--txt);font-family:inherit;font-size:13px;padding:2px 6px;text-align:center}
.tsval{cursor:text;border-radius:5px;padding:0 3px}
.tsval:hover{background:#ffffff14;outline:1px dashed #c9a84c66}