: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}
.ok-box{background:#4caf7d22;border:1px solid var(--ok);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}
/* olho aberto / olho fechado — estado "oculto" (substituiu o emoji do macaquinho).
   Desenho em SVG mascarado, então pega a cor do texto de onde estiver. */
.ico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:var(--i);mask-image:var(--i)}
.ico.olho{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E")}
.ico.olhoff{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 9.6c2.5 3.6 5.6 5.4 9.4 5.4s6.9-1.8 9.4-5.4'/%3E%3Cpath d='M4.6 13.4 3.1 15.5'/%3E%3Cpath d='M9 15.4 8.4 17.9'/%3E%3Cpath d='M15 15.4 15.6 17.9'/%3E%3Cpath d='M19.4 13.4 20.9 15.5'/%3E%3C/svg%3E")}

/* wizard — passo da Classe: a escolhida ocupa o topo, as outras descem menores
   e o exemplo de personagem entra pela direita */
.classe-palco{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.passoclasse.comarte .classe-palco{grid-template-columns:minmax(0,1fr) clamp(200px,25vw,320px)}
.passoclasse .pick{transition:opacity .35s ease,background .25s ease,border-color .25s ease}
.passoclasse .pick.on{animation:none}                       /* quem manda na animação é o FLIP */
.passoclasse.escolhido #cardsC{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.passoclasse.escolhido .pick.on{grid-column:1/-1;order:-1;box-shadow:var(--shadow)}
.passoclasse.comarte .classe-palco .grid2{grid-template-columns:1fr}   /* coluna estreita: texto empilha */
.passoclasse.escolhido .pick:not(.on){opacity:.62;font-size:12.5px}
.passoclasse.escolhido .pick:not(.on):hover{opacity:1}
.classe-arte:empty{display:none}
.classe-fig{margin:0;position:relative;text-align:center}
.classe-fig::before{content:"";position:absolute;inset:8% 2% 14%;border-radius:50%;filter:blur(20px);opacity:.3;
  background:radial-gradient(ellipse at 50% 55%,var(--cor,var(--accent)) 0%,transparent 68%)}
.classe-fig img{position:relative;display:block;width:100%;max-height:min(58vh,540px);object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));animation:arte-entra .6s cubic-bezier(.2,.8,.25,1)}
.classe-fig figcaption{position:relative;margin-top:6px;font-size:12.5px;display:flex;gap:6px;
  align-items:baseline;justify-content:center;flex-wrap:wrap}
.classe-fig figcaption .emb{font-size:15px}
@keyframes arte-entra{from{opacity:0;transform:translateX(44px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.classe-fig img{animation:none}}
@media (max-width:860px){.passoclasse.comarte .classe-palco{grid-template-columns:1fr}
  .classe-fig img{max-height:44vh}}
.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}
/* gruda logo ABAIXO do #top (que também é sticky); --topH é medido em JS porque o topo quebra
   linha em telas estreitas e a altura muda */
nav.tabs{position:sticky;top:var(--topH,0px);z-index:35;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;gap:2px;overflow-x:auto;padding:0 10px;box-shadow:0 6px 10px -8px rgba(0,0,0,.55)}
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)}
/* painel da mesa: cada bloco esconde as próprias barras no 👁 do título dele */
body.st-off-agentes #membros .mbars{display:none}
body.st-off-npcs #npcs .mbars{display:none}
body.st-off-ameacas #monstros .mbars,
body.st-off-ameacas #guardados .mbars{display:none}
.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)}
/* o atributo é EDITÁVEL: tem que parecer campo (antes era transparente e todo mundo achava
   que era número fixo — e o clique ia pro 🎲 do lado) */
.matrib input{width:56px;text-align:center;font-size:19px;font-weight:700;color:var(--txt);
  background:var(--bg2,#15141a);border:1px solid var(--line);border-radius:6px;padding:2px 4px}
.matrib input:focus{border-color:var(--accent);outline:none}
.npcatr{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:8px 0 2px;font-size:12px}
.npcatr label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;
  letter-spacing:1px;color:var(--txt2)}
.npcatr label input{width:52px;text-align:center;font-size:16px;font-weight:700;color:var(--txt);
  background:var(--bg2,#15141a);border:1px solid var(--line);border-radius:6px;padding:2px}
.npcatr label input:focus{border-color:var(--accent);outline:none}
.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)}
/* o botão do MENU de luz acende junto: com parede/pincel/porta na mão dá pra ver de
   onde veio a ferramenta que está ativa */
#btnLuz.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}
/* névoa fica no topo: quando o mestre esconde uma área, esconde pra valer.
   left/top fixos SEM inset: o canvas tem tamanho próprio (união imagem+tokens, cap 12000) */
#nevoa{position:absolute;left:0;top:0;right:auto;bottom:auto;pointer-events:none;z-index:15}
/* iluminação: acima dos tokens (quem está no escuro não é visto)… */
/* width/height 100%: canvas é elemento "replaced" — inset:0 NÃO estica o bitmap, e com
   o teto de resolução o bitmap ficou menor que o mundo (a escuridão encolhia pro canto) */
#luzes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:11}
/* …MENOS o seu próprio token: você sempre se vê, mesmo no breu (z entre a escuridão e a névoa) */
.vtok.euluz{z-index:12}
/* paredes: só o mestre vê, e por cima da escuridão pra ele conseguir desenhar */
#paredesC{position:absolute;inset:0;pointer-events:none;z-index:13}
.luzlista{display:flex;gap:6px;align-items:center;padding:2px 0;border-bottom:1px dashed var(--line)}
.luzlista b{flex:1;font-weight:400}
/* alcinha de mirar a lanterna */
/* a artezinha da luz É a alça de mirar (a bolinha só aparece quando não tem arte) */
/* z 14: acima da escuridão (#luzes 11) e das paredes (13), ABAIXO da névoa (15) —
   senão a artezinha de um token escondido apareceria por cima do escondido */
/* a artezinha da lanterna vive ABAIXO da escuridão (z11), igual ao corpo do token —
   só a MINHA (e a do mestre) sobe pra cima, porque é a alça de mirar */
.luzarte{position:absolute;z-index:9;cursor:grab;filter:drop-shadow(0 0 5px #ffd98a55);
  touch-action:none;image-rendering:auto}
.luzarte.minha{z-index:14}
.luzarte:active{cursor:grabbing}
.luzarte.semmira{cursor:default;pointer-events:none}
.luzmira{position:absolute;width:18px;height:18px;border-radius:50%;background:#ffd98a;
  border:2px solid #6b5a2a;box-shadow:0 0 10px #ffd98a99;cursor:grab;z-index:26;transform:translate(-50%,-50%)}
.luzmira:active{cursor:grabbing}
.luzlinha{position:absolute;height:2px;background:linear-gradient(90deg,#ffd98a00,#ffd98acc);
  transform-origin:0 50%;pointer-events:none;z-index:25}
.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)}
/* max-height + rolagem: os painéis cresceram (luz, dados, tamanho) e o fim ficava
   inalcançável embaixo da tela */
.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;
  /* 116px = barra do topo (até 2 linhas quando ela quebra) + folga em cima e embaixo */
  max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain}
.fog-panel::-webkit-scrollbar{width:9px}
.fog-panel::-webkit-scrollbar-thumb{background:#ffffff22;border-radius:9px}
.fog-panel::-webkit-scrollbar-thumb:hover{background:#ffffff35}
.fog-panel,.fog-panel *{box-sizing:border-box}
/* select e slider dentro do painel não podem estourar a largura dele
   (item flex não encolhe abaixo do min-content sem isto) */
.fog-panel select,.fog-panel input,.fog-panel label{min-width:0;max-width:100%}
.fog-panel h4{margin:0 0 8px;font-family:Georgia,serif}
/* grade de dados estilo Roll20: linha por dado, 1..6 e ⋯ pra quantidade maior */
.dgrade{display:flex;flex-direction:column;gap:3px}
.dlinha{display:flex;gap:3px;align-items:center}
.dlinha .dnome{flex:1;min-width:62px;color:var(--txt2);font-size:12px;letter-spacing:.5px}
.dlinha .btn.mini{padding:1px 0;width:23px;text-align:center;font-variant-numeric:tabular-nums}
/* 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}
/* tocador recolhido = pílula com o nome da faixa; aberto = mesma pílula com os controles */
.som-widget{position:absolute;bottom:12px;right:12px;z-index:18;display:block;
  background:#1d181cee;border:1px solid var(--line2);border-radius:16px;
  padding:6px 12px;font-size:12.5px;min-width:210px;max-width:320px}
.som-widget input[type=range]{width:100px;accent-color:var(--accent)}
.som-widget .sw-linha{display:flex;gap:8px;align-items:center}
.som-widget #somNome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.som-widget #somCorpo{margin-top:5px}
.som-widget .btn.mini{padding:0 6px}
.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}
/* rituais no chat: conjuração (Custo do Paranormal embutido) e texto do ritual */
.opcard.ritual{border-color:#6b4ea8}
.opcard.ritual .cnome{font-style:normal;font-weight:700;font-size:14.5px;margin-bottom:2px}
.opcard .cnum.falha{background:#f6d6d6;border-color:#c0575c}
.opcard .okl{color:#2e9b46;font-weight:700}
.opcard .falhoul{color:#b3232a;font-weight:700}
/* card de ritual conjurado no padrão da ficha do Roll20: campos rotulados + blocos amarelos */
.opcard.ritual{text-align:left}
.opcard.ritual .cnome{text-align:center;font-style:italic;font-weight:700;font-size:15px;margin-bottom:7px}
.opcard .rcampos{font-family:system-ui;font-size:12px;line-height:1.7}
.opcard .rlin b{color:#111;font-weight:700}
.opcard .rlin span{color:#333}
.opcard .cnum.mini{min-width:0;padding:1px 6px;font-size:13px;vertical-align:baseline}
.opcard .rverd{margin:7px 0 2px;text-align:center;font-size:12px;font-weight:700;font-family:system-ui}
.opcard .rverd.ok{color:#2e9b46}
.opcard .rverd.no{color:#b3232a}
.opcard .rbloco{background:#fdf3b0;border:1px solid #d8c86a;border-radius:5px;padding:7px 9px;
  margin-top:7px;font-size:12.5px;line-height:1.5;text-align:left}
.opcard .rbloco b{display:block;font-family:system-ui;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:#6b5a12;margin-bottom:3px}
.opcard .rbloco.conj{border-width:2px;border-color:#b58900}
.opcard.ritualtxt{text-align:left;border-color:#6b4ea8}
.opcard.ritualtxt .cnome{font-style:normal;font-weight:700;font-size:14.5px;text-align:center}
.opcard.ritualtxt .cdet{text-align:center}
.opcard .rtxb{border-top:1px dashed #0002;margin-top:7px;padding-top:6px}
.opcard .rtxb b{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#5a4a86}
.opcard .rtxb p{margin:3px 0 0;font-size:12.5px;line-height:1.45}
/* 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 .tini[data-tini]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.trow .tmov{padding:0 4px;font-size:9px;line-height:16px}
.trow .tmov[disabled]{opacity:.25;cursor:default}
.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)}
#convocaBtns .btn{display:block;width:100%;margin-top:8px}
.convoca h4{padding:0 26px}
#convocaFechar{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;opacity:.7}
#convocaFechar:hover{opacity:1}
.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 */
/* na ficha a sigla fica EMBAIXO do número (a arte dos hexágonos não traz os nomes) */
.penta.mini .pa b{display:block;order:2;font-size:9.5px;letter-spacing:2px;margin-top:3px;
  padding:1px 7px;background:#141114d9;border-radius:6px;box-shadow:0 0 0 1px #ffffff22}
.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}
/* risco mostrando onde a linha arrastada vai encaixar (ordem manual do acervo) */
.dropantes,.dropdepois{position:relative}
.dropantes::after,.dropdepois::after{content:"";position:absolute;left:0;right:0;height:3px;
  background:var(--accent2, #e8c94a);border-radius:2px;box-shadow:0 0 6px #e8c94a99;pointer-events:none}
.dropantes::after{top:-2px}
.dropdepois::after{bottom:-2px}
/* mesma ideia no gerenciador de cenas, que é em grade: o risco fica em pé, na lateral */
.dropesq,.dropdir{position:relative}
.dropesq::after,.dropdir::after{content:"";position:absolute;top:0;bottom:0;width:3px;
  background:var(--accent2, #e8c94a);border-radius:2px;box-shadow:0 0 6px #e8c94a99;pointer-events:none}
.dropesq::after{left:-3px}
.dropdir::after{right:-3px}
.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}
/* bônus extra que o player declara ao revistar um ponto (o mestre vê antes de aprovar) */
.poiextra{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:0 0 12px;font-size:12px;color:var(--txt2)}
.poiextra input{padding:3px 6px}
.poiextra input#poiExM{width:min(220px,52vw)}
.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)}
/* 176px é o mínimo pros 5 botões do card (🖼 📡 ☁ ✎ 🗑) caberem numa linha só */
.cm-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,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;flex-wrap:wrap}
/* 5 botões não cabem em 150px de card: quebram a linha em vez de vazar pra fora */
.cm-acoes{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;margin-top:auto}
.cm-acoes .btn.mini{padding:1px 6px;flex:none}
.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}

/* temporários (buffs): selo ao lado do número e destaque na roda de atributos */
.tmp{color:#5bc8f5;font-weight:700;font-size:.82em}
.penta .pa.buff{outline:2px solid #5bc8f5aa;outline-offset:2px;border-radius:50%}
.penta .pa .tmp{display:block;font-size:11px;line-height:1}
#btnTemp.on{border-color:#5bc8f5;color:#5bc8f5}
/* papel na mesa: chip do construtor (ajudante que monta) */
.papelbar{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:12px}

/* escolhas em lote (NPC): tabela por nível + lista de rituais */
.lotehead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
table.lotetab td{vertical-align:top}
table.lotetab select{max-width:min(420px,52vw)}
.lotesub{margin-top:4px;display:flex;gap:6px;align-items:center;font-size:12px}
.loteRit{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.loteRit .perlist{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:6px}
/* card de ficha no dashboard com barra de ações (excluir) */
.fcard-wrap{display:block}
.fcard-wrap .pill{vertical-align:middle}
/* blocos de consulta (catálogo de poderes, futuro da trilha): fechados por padrão */
.dobra>summary{cursor:pointer;list-style:none;padding:4px 0;font-size:13px;letter-spacing:.5px}
.dobra>summary::-webkit-details-marker{display:none}
.dobra>summary::before{content:"▸ ";color:var(--accent);font-weight:700}
.dobra[open]>summary::before{content:"▾ "}
.dobra>summary:hover{color:var(--accent)}
.dobra>summary b{text-transform:uppercase;font-size:12.5px;letter-spacing:1px}
/* menus da barra do mapa: os controles do mestre agrupados (a barra tinha 20 itens) */
.vgrp{position:relative}
.vgrp-b::after{content:" ▾";opacity:.6}
.vgrp.open>.vgrp-b{border-color:var(--accent);color:var(--txt);background:var(--accent-t)}
.vgrp-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:270px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px;
  box-shadow:0 14px 34px #000a}
.vgrp.open>.vgrp-menu{display:block}
.vgrp-lin{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vgrp-lin + .vgrp-lin{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
/* painel de PV/PE/SAN recolhido: fica só o olhinho ao lado do token */
.tok-stats.recolhido{padding:2px 4px;gap:0;opacity:.75}
.tok-stats.recolhido:hover{opacity:1}

/* ---------- ☉ transcender narrativo ---------- */
/* o ponto no mapa: o MESTRE vê um círculo tracejado com ☉; o jogador não vê nada
   (o duplo clique acha por coordenada, então invisível continua clicável) */
.pagina-mapa .vtok.vtransc{opacity:0;pointer-events:none}
.pagina-mapa.sou-mestre .vtok.vtransc{opacity:1;pointer-events:auto}
.vtok.vtransc img{display:none}
.vtok.vtransc::before{content:"☉";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:26px;color:#c9a84c;border:2px dashed #c9a84c88;
  border-radius:50%;background:#c9a84c14;text-shadow:0 0 8px #c9a84c66}

/* A CENA DO DESPERTAR (~8.5s): escurece -> névoa girando -> símbolo acende na frente do
   personagem -> "Fulano escutou o chamado" -> o elemento desperta e tinge a escuridão -> desfaz */
.transc-ov{position:fixed;inset:0;z-index:5000;pointer-events:none;background:#050308;
  opacity:1;animation:tv-entra 1.3s ease}
.transc-ov.some{animation:tv-sai 1.1s ease forwards}
@keyframes tv-entra{from{opacity:0}to{opacity:1}}
@keyframes tv-sai{from{opacity:1}to{opacity:0}}
.transc-ov .tfog{position:absolute;inset:-30%;opacity:0;filter:blur(34px);
  animation:tv-fog 8.4s ease-in-out forwards}
.transc-ov .tfog.a{background:
  radial-gradient(38% 30% at 28% 38%, #ffffff26, transparent 70%),
  radial-gradient(30% 26% at 72% 60%, #ffffff1c, transparent 70%)}
.transc-ov .tfog.b{background:
  radial-gradient(34% 30% at 62% 30%, #ffffff21, transparent 70%),
  radial-gradient(28% 24% at 34% 72%, #ffffff19, transparent 70%);
  animation-delay:.25s;animation-direction:alternate}
@keyframes tv-fog{
  0%{opacity:0;transform:rotate(0deg) scale(1)}
  18%{opacity:.9}
  70%{opacity:.85}
  100%{opacity:.55;transform:rotate(14deg) scale(1.18)}}
.transc-ov .ttint{position:absolute;inset:0;background:var(--tc);opacity:0;
  mix-blend-mode:screen;animation:tv-tinta 8.4s ease-in-out forwards}
@keyframes tv-tinta{0%,56%{opacity:0}76%{opacity:.42}100%{opacity:.30}}
.transc-ov .tcentro{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.transc-ov .tsimb{width:min(200px,26vmin);height:min(200px,26vmin);object-fit:contain;
  opacity:0;animation:tv-simb 6.8s ease-in-out 1.3s forwards;
  filter:drop-shadow(0 0 18px var(--tc)) drop-shadow(0 0 44px var(--tc))}
@keyframes tv-simb{
  0%{opacity:0;transform:scale(.35) rotate(-14deg)}
  12%{opacity:1;transform:scale(1.06) rotate(0)}
  20%{transform:scale(.98)}
  44%{transform:scale(1.04)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.24)}}
.transc-ov .tnome{font-family:Georgia,serif;font-size:clamp(18px,3vmin,30px);color:#f2ecf5;
  letter-spacing:2px;text-align:center;opacity:0;animation:tv-nome 5.4s ease 2.2s forwards;
  text-shadow:0 0 14px var(--tc),0 2px 4px #000}
.transc-ov .tnome small{display:block;font-size:.55em;letter-spacing:5px;
  text-transform:uppercase;color:#d8cfe4;margin-top:3px}
@keyframes tv-nome{0%{opacity:0;transform:translateY(14px)}16%{opacity:1;transform:none}
  84%{opacity:1}100%{opacity:0}}
/* o ELEMENTO desperta: entra depois do nome, na cor dele, junto da tinta na escuridão */
.transc-ov .telem{font-family:Georgia,serif;font-style:italic;
  font-size:clamp(17px,2.8vmin,28px);line-height:1.4;letter-spacing:1.5px;
  max-width:min(40ch,84vw);text-align:center;color:var(--tc);opacity:0;
  animation:tv-elem 3.9s ease 4.6s forwards;
  text-shadow:0 0 16px var(--tc),0 0 36px var(--tc),0 2px 4px #000}
@keyframes tv-elem{0%{opacity:0;transform:translateY(10px) scale(.94)}
  20%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .transc-ov .tfog,.transc-ov .tsimb,.transc-ov .tnome,.transc-ov .telem{animation-duration:.01s}}

/* a pergunta do chamado: telinha do jogo com o símbolo do ritual (nada de popup) */
dialog.transc-ask{background:#0b0810f6;border:1px solid #4a3c58;border-radius:14px;color:#f2ecf5;
  max-width:360px;text-align:center;padding:24px 28px;box-shadow:0 30px 90px #000}
dialog.transc-ask::backdrop{background:#050308cc;backdrop-filter:blur(3px)}
dialog.transc-ask img{width:150px;height:150px;object-fit:contain;opacity:.94;
  filter:drop-shadow(0 0 14px #ffffff40);animation:ta-gira 40s linear infinite}
@keyframes ta-gira{to{transform:rotate(360deg)}}
dialog.transc-ask h3{font-family:Georgia,serif;letter-spacing:2.5px;margin:12px 0 4px;font-size:19px}
dialog.transc-ask p{color:#bfb3cc;font-size:13px;margin:0 0 16px}
@media (prefers-reduced-motion: reduce){dialog.transc-ask img{animation:none}}

/* aura do despertar: nasce do personagem, pulsa e recolhe pro centro do token */
.vtok.com-aura{isolation:isolate}
.vaura{position:absolute;inset:-64%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, #ffffff 0%, var(--tc) 24%, transparent 72%);
  opacity:0;filter:blur(7px);
  animation:vaura-entra 1.4s ease forwards, vaura-pulsa 3s ease-in-out 1.4s infinite}
@keyframes vaura-entra{to{opacity:.96}}
@keyframes vaura-pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.vaura.recolhe{animation:vaura-some 1.6s ease forwards}
@keyframes vaura-some{to{transform:scale(.03);opacity:0}}
/* véu do despertar: TUDO apagado por igual; a única luz é a aura do elemento
   (a clareira é do tamanho dela, com borda esfumada — nada de círculo claro no mapa) */
.vspot{position:fixed;inset:0;pointer-events:none;z-index:4000;opacity:0;
  background:radial-gradient(circle var(--sr, 160px) at var(--sx, 50%) var(--sy, 50%),
    transparent 0, rgba(5,3,8,.38) 55%, rgba(5,3,8,.72) 100%);
  animation:vspot-entra 1.2s ease forwards}
@keyframes vspot-entra{to{opacity:1}}
.vspot.some{animation:vspot-sai 1.3s ease forwards}
@keyframes vspot-sai{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion: reduce){.vaura,.vspot{animation-duration:.01s}}

/* 🎬 cinemática do transcender: a imagem no escuro (abaixo da animação do elemento) */
.cine-ov{position:fixed;inset:0;z-index:4500;background:#050308;display:flex;align-items:center;
  justify-content:center;opacity:1;animation:tv-entra 1.5s ease}
.cine-ov.some{animation:tv-sai 1s ease forwards}
.cine-ov img{max-width:90vw;max-height:84vh;object-fit:contain;opacity:1;
  box-shadow:0 34px 120px #000;transition:opacity .5s ease}
.cine-ov img.troca{opacity:0}
.cine-ov .cine-ctrl{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;background:#15111df2;border:1px solid #4a3c58;
  border-radius:12px;padding:8px 14px;box-shadow:0 12px 40px #000a}

/* thumbs da cinemática: quadrado FIXO, ✕ pra tirar e clique abre grande */
.cinethumb{position:relative;display:inline-flex;width:72px;height:72px;flex:none;
  border-radius:8px;overflow:hidden;border:1px solid var(--line2);background:#0d0a12;cursor:zoom-in}
.cinethumb img{width:100%;height:100%;object-fit:cover;display:block}
.cinethumb .cinenum{position:absolute;left:3px;bottom:2px;font-size:10px;font-weight:800;
  background:#0b0810d0;border-radius:5px;padding:0 5px;color:#e8c94a;pointer-events:none}
.cinethumb .cinedel{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:1;
  border:1px solid var(--line2);background:#0b0810e0;color:#ff8080;border-radius:6px;
  cursor:pointer;font-size:11px;padding:0}
.cinethumb .cinedel:hover{background:#3a1216}
/* ver a imagem grande (por cima do dialog de config — dialog em cima de dialog) */
dialog.verimg{background:#0b0810;border:1px solid #4a3c58;border-radius:12px;padding:8px;cursor:zoom-out}
dialog.verimg::backdrop{background:#050308d8}
dialog.verimg img{max-width:86vw;max-height:82vh;object-fit:contain;display:block;border-radius:7px}

/* 👁 aparição de NPC: background temporário + efeitos de tela */
/* a imagem CABE INTEIRA no retângulo da cena (contain), SEM fundo próprio:
   imagem transparente deixa o mapa aparecer por trás — quem quiser preto põe na imagem */
#fundoReveal{position:absolute;left:0;top:0;object-fit:contain;opacity:0;
  transition:opacity 1s ease;pointer-events:none}
#fundoReveal.on{opacity:1}
#efeitoReveal{position:absolute;inset:0;pointer-events:none;z-index:16;opacity:0;
  transition:opacity 1.1s ease;overflow:hidden}
#efeitoReveal.on{opacity:1}
/* membrana: mais escura e com movimento de verdade — névoas vagando em caminhos
   diferentes + a vinheta respirando (box-shadow interpola suave, gradient não) */
.reveal-membrana{background:rgba(6,3,10,.20);
  box-shadow:inset 0 0 24vmax 5vmax rgba(6,3,10,.82);
  animation:memb-respira 6.5s ease-in-out infinite}
@keyframes memb-respira{50%{box-shadow:inset 0 0 32vmax 10vmax rgba(6,3,10,.92)}}
.reveal-membrana::before{content:"";position:absolute;inset:-28%;
  background:radial-gradient(44% 36% at 28% 36%, rgba(150,110,190,.30), transparent 68%),
             radial-gradient(38% 32% at 74% 66%, rgba(110,150,190,.24), transparent 68%),
             radial-gradient(30% 26% at 54% 16%, rgba(205,205,225,.18), transparent 70%);
  filter:blur(22px);animation:memb-vaga1 9s ease-in-out infinite}
.reveal-membrana::after{content:"";position:absolute;inset:-28%;
  background:radial-gradient(36% 42% at 62% 30%, rgba(130,95,175,.24), transparent 70%),
             radial-gradient(30% 30% at 22% 70%, rgba(95,125,170,.20), transparent 70%);
  filter:blur(28px);animation:memb-vaga2 12s ease-in-out infinite}
@keyframes memb-vaga1{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  33%{transform:translate(3.5%,-2.5%) rotate(7deg) scale(1.12)}
  66%{transform:translate(-3%,3%) rotate(-5deg) scale(1.2)}}
@keyframes memb-vaga2{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1.06)}
  40%{transform:translate(-3.5%,2.5%) rotate(-8deg) scale(1.18)}
  75%{transform:translate(2.5%,-3%) rotate(5deg) scale(1)}}
/* glitch PRETO E BRANCO: brilho nas LATERAIS piscando em cortes secos + fatias leves */
.reveal-glitch::before{content:"";position:absolute;inset:0;mix-blend-mode:difference;
  background:repeating-linear-gradient(0deg, transparent 0 16px, rgba(230,230,230,.12) 16px 17px);
  animation:gl-desloca 1.1s steps(2) infinite}
.reveal-glitch::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.06) 16%,
             transparent 30%, transparent 70%, rgba(255,255,255,.06) 84%, rgba(255,255,255,.30));
  opacity:0;animation:gl-brilho 2.1s steps(1) infinite}
@keyframes gl-desloca{50%{transform:translateX(5px)}}
/* steps(1): o brilho APARECE de repente e some igual — corte seco, sem fade */
@keyframes gl-brilho{
  0%,54%{opacity:0;transform:none}
  56%{opacity:1}
  62%{opacity:0}
  64%{opacity:.55;transform:translateX(-6px)}
  67%{opacity:0;transform:none}
  84%{opacity:.8;transform:scaleX(-1)}
  90%{opacity:0;transform:none}
  100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .reveal-membrana::before,.reveal-membrana::after,
  .reveal-glitch::before,.reveal-glitch::after{animation-duration:.01s}}

/* 🎬 vídeo da mesa: tela cheia por cima de tudo do mapa (abaixo só da animação do despertar) */
.video-ov{position:fixed;inset:0;z-index:4800;background:#000;display:flex;align-items:center;
  justify-content:center;opacity:1;animation:tv-entra 0.8s ease}
.video-ov.some{animation:tv-sai .8s ease forwards;pointer-events:none}
.video-ov video{max-width:100vw;max-height:100vh;width:100%;height:100%;object-fit:contain}
.video-ov .video-ctrl{position:fixed;bottom:20px;right:20px;display:flex;gap:8px;align-items:center}
.video-ov .video-ctrl input[type=range]{width:110px;accent-color:#c0392b}
.video-ov .video-aviso{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#000d;
  border:1px solid #4a4a4a;border-radius:8px;padding:7px 14px;color:#ddd;font-size:13px;cursor:pointer}
/* MESTRE: cinemática e vídeo cobrem só o MAPA (z 15 fica sob os painéis z18, acervo z70,
   chat) — a música muda no meio da cena e ele precisa alcançar acervo e mixer */
.pagina-mapa.sou-mestre .cine-ov, .pagina-mapa.sou-mestre .video-ov{position:absolute;z-index:15}

/* 📍 ping no mapa: anel que pulsa onde alguém apontou (Alt+clique ou clique duplo no vazio) */
.vping{position:absolute;width:120px;height:120px;pointer-events:none;z-index:920}
.vping i{position:absolute;inset:0;border:3px solid #e8c94a;border-radius:50%;opacity:0;
  animation:vping-onda 1.5s ease-out 2;box-shadow:0 0 18px #e8c94a66}
.vping i:nth-child(2){animation-delay:.35s}
.vping.mestre i{border-color:#b98aff;box-shadow:0 0 18px #b98aff66}
.vping b{position:absolute;top:100%;width:100%;text-align:center;font-size:12px;color:#ffe9a8;
  font-weight:600;text-shadow:0 1px 4px #000}
.vping.mestre b{color:#dcc7ff}
@keyframes vping-onda{0%{transform:scale(.12);opacity:1}100%{transform:scale(1.12);opacity:0}}

/* 👤 online: bolinha discreta na barra; a lista desce num painel */
#btnOnline{opacity:.45;font-size:11px;padding:0 8px;letter-spacing:.5px}
#btnOnline.tem{opacity:.8;color:#7ee2a0}
.onl{padding:4px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.onl:last-child{border-bottom:none}

/* abas do painel 💡 (cena x fontes de luz) */
.luz-abas{display:flex;gap:4px;margin:2px 0 9px;border-bottom:1px solid var(--line)}
.luz-abas button{flex:1;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--txt2);font-size:12px;padding:6px 2px;cursor:pointer}
.luz-abas button.on{border-bottom-color:var(--accent);color:var(--txt)}
.luzfonte{border-bottom:1px dashed var(--line);padding:7px 0}
.luzfonte:last-child{border-bottom:none}
.luzfonte .lf-top{display:flex;gap:6px;align-items:center}
.luzfonte .lf-top b{flex:1;font-weight:500;font-size:12.5px}
.luzfonte .lf-top{cursor:pointer}
.luzfonte .lf-top .lf-seta{color:var(--txt2);font-size:10px;width:11px;transition:transform .15s}
.luzfonte.aberta .lf-top .lf-seta{transform:rotate(90deg)}
.luzfonte .lf-corpo{display:none}
.luzfonte.aberta .lf-corpo{display:block}
.luzfonte .lf-resumo{font-size:11px;color:var(--txt2);white-space:nowrap}
.luzfonte.aberta .lf-resumo{display:none}
.luzfonte .lf-cfg{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px}
.luzfonte .lf-cfg label{display:flex;gap:4px;align-items:center;font-size:11.5px;color:var(--txt2)}
.luzfonte .lf-cfg input[type=number]{width:60px}
.luzfonte .lf-art{width:26px;height:26px;object-fit:contain;background:#0d0a0e;border-radius:5px;
  border:1px solid var(--line)}
.luzfonte .lf-fonte{font-size:11px;color:var(--txt2);margin-top:4px;opacity:.85}
.luzfonte.mudou .lf-top b::after{content:" •";color:var(--accent)}

/* movimento vindo DOS OUTROS desliza (o poll rápido chega a cada ~300ms);
   o próprio arrasto (.pego) é cru, grudado no mouse */
.vtok.liso{transition:left .32s linear, top .32s linear}
.vtok.pego{transition:none!important}


/* ⚠️ 'reduzir movimento' (Windows/macOS/navegador) mata TODA animação pela regra
   global lá em cima. Overlay que dependia da animação pra ficar visível virava uma
   camada INVISÍVEL cobrindo a tela inteira — a mesa parecia travada (relato de um
   jogador: o vídeo tocava e nada mais respondia). O estado base agora já é visível;
   isto aqui é a rede de segurança pro caso de a animação não rodar por outro motivo. */
@media (prefers-reduced-motion: reduce){
  .transc-ov, .cine-ov, .video-ov, .doc-ov{opacity:1!important}
  .transc-ov.some, .cine-ov.some, .video-ov.some, .doc-ov.some{opacity:0!important;pointer-events:none!important}
  .transc-ov .tsimb, .transc-ov .tnome, .transc-ov .telem{opacity:1!important}
}

/* pedido de porta: pisca de leve pro mestre não perder no canto da tela */
#portaPedidos{border-color:#c98c4a;box-shadow:0 0 0 1px #c98c4a55, 0 0 22px #c98c4a33;
  animation:pp-chama 1.6s ease-in-out infinite}
@keyframes pp-chama{50%{box-shadow:0 0 0 1px #c98c4a99, 0 0 30px #c98c4a66}}
@media (prefers-reduced-motion: reduce){#portaPedidos{animation:none}}

/* 📝 nota do mestre no mapa: pin translúcido, só na tela dele */
/* marcador DISCRETO de propósito: quase invisível em cima do mapa (é anotação escondida),
   acende no hover. Tamanho e posição vêm do JS — o mestre arrasta e regula como token. */
.vnota{position:absolute;z-index:16;width:26px;height:26px;margin:-13px 0 0 -13px;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:grab;
  touch-action:none;background:#12101488;border:1px dashed #ffffff33;border-radius:50%;
  box-shadow:none;opacity:.3;filter:grayscale(1);
  transition:opacity .15s, transform .15s, filter .15s, border-color .15s}
.vnota:hover{opacity:.95;filter:none;transform:scale(1.14);border-color:#e8c94a99;
  border-style:solid;background:#1d181cd0}
.vnota:active{cursor:grabbing}
.vnota.cheia{border-color:#ffffff4d}
.notapop{position:absolute;z-index:70;max-width:290px;pointer-events:none;
  background:#14111aee;border:1px solid var(--line2,#4a4356);border-radius:8px;
  color:#e8e2dc;font:400 12.5px/1.45 system-ui,sans-serif;padding:7px 10px;
  white-space:pre-wrap;box-shadow:0 6px 20px #000000bb;animation:notapop-e .12s ease-out}
@keyframes notapop-e{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* 👁 modo visão do jogador: o mestre PRECISA saber que está de óculos, senão acha que
   o app quebrou (token oculto sumiu, parede invisível, etc.) */
#visaoBanner{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:60;
  background:#2a1420ee;border:1px solid #b3232a;color:#ffd9dd;border-radius:9px;
  padding:6px 14px;font-size:12.5px;cursor:pointer;box-shadow:0 4px 18px #000000aa;
  display:flex;gap:8px;align-items:center}
#visaoBanner b{color:#fff}
#visaoBanner:hover{background:#3a1a28ee}
.pagina-mapa.visao-jogador .vnota,
.pagina-mapa.visao-jogador #paredesC{display:none!important}

/* 🏠 cômodo: ícone translúcido no ponto que o mestre marcou (só ele vê) */
.vcomodo{position:absolute;z-index:16;width:26px;height:26px;margin:-13px 0 0 -13px;
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;
  background:#101820d0;border:1px solid #6fd3ff88;border-radius:7px;opacity:.7;
  box-shadow:0 2px 8px #000000aa;transition:opacity .15s, transform .15s}
.vcomodo:hover{opacity:1;transform:scale(1.1)}
.vcomodo.furado{border-color:#ff8080;color:#ff8080}
.comodolin{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:4px 0;
  border-bottom:1px dashed var(--line)}
.comodolin:last-child{border-bottom:none}
.comodolin .cnome{flex:1;min-width:90px}
.comodolin input[type=number]{width:56px}

/* caixinha do cômodo, ancorada no ícone 🏠 */
.comodopop{position:absolute;z-index:30;width:210px;background:#1d181cf7;border:1px solid var(--line2);
  border-radius:9px;padding:9px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 6px 22px #000000bb;font-size:12px}
.comodopop input[type=text],.comodopop [data-pnome]{width:100%}
.comodopop label{display:flex;gap:5px;align-items:center;color:var(--txt2)}
.comodopop [data-pniv]{width:62px}
.comodopop .pacoes{display:flex;gap:6px;justify-content:space-between}
.comodolin.auto .cnome{opacity:.75}

/* 🔦 régua do tamanho das artes: campo de DIGITAR (a barrinha não cabia no painel) */
.lf-geral{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:11.5px;flex-wrap:wrap}
.lf-geral input{width:74px;text-align:right}
.lf-geral .btn.mini{padding:2px 8px;line-height:1.3}
.luzfonte .lf-cfg label input[type=number]{width:64px}

/* variações de item (dialog do mestre): abas em cima do formulário */
.itvars{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.itvars:empty{display:none}
.itvars .vaba{border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:4px 12px;font-size:12px;cursor:pointer;display:flex;gap:6px;align-items:center}
.itvars .vaba.on{border-color:var(--accent);background:var(--accent-t);font-weight:600}
.itvars .vaba .ativa{color:#e8c94a;font-size:11px}
.itvars .vaba .vdel{opacity:.55;cursor:pointer;font-size:11px}
.itvars .vaba .vdel:hover{opacity:1;color:var(--danger,#e06)}
.itvars .vmais{border:1px dashed var(--line2);border-radius:16px;background:none;
  padding:4px 12px;font-size:12px;cursor:pointer;color:var(--muted,#999)}
.itvars .vmais:hover{border-color:var(--accent);color:inherit}
#dlgItem2 .actions{display:flex;gap:8px;align-items:center}

/* miniatura do arquivo já anexado no item (campo de arquivo NUNCA vem preenchido:
   o navegador não deixa, por segurança — então a gente mostra o que já está lá) */
.itprev{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--muted,#9a94a6);margin-top:-4px}
.itprev:empty{display:none}
.itprev img,.itprev video{width:62px;height:62px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);background:#0b0910}
.itprev .itprev-x{cursor:pointer;text-decoration:underline;opacity:.8}
.itprev .itprev-x:hover{opacity:1;color:var(--danger,#e06)}

/* item trocou de forma na frente do jogador (o mestre mudou a variação): brilho curto
   pra ele perceber que o que está na mão dele mudou */
@keyframes item-mudou{0%{box-shadow:0 0 0 0 #e8c94a00}
  25%{box-shadow:0 0 46px 10px #e8c94a99}100%{box-shadow:0 0 0 0 #e8c94a00}}
#visorCorpo.mudou{animation:item-mudou 1.5s ease-out}
@media (prefers-reduced-motion: reduce){#visorCorpo.mudou{animation:none}}

/* descrição do item no inventário (abre embaixo da linha) */
.itdesc{padding:1px 7px;font-size:11px;vertical-align:1px;opacity:.75}
.itdesc:hover{opacity:1}
.itdesc-linha td{border-top:none;padding-top:0}
.itdesc-txt{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;
  color:var(--muted,#a49dae);background:var(--paper);border-left:3px solid var(--accent);
  border-radius:0 7px 7px 0;padding:8px 11px;margin:0 0 6px}
.itdesc-txt img{width:54px;height:54px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:none}

/* extras da iniciativa (dados a mais / bônus avulso) */
.ini-extra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 8px;
  font-size:11.5px;color:var(--muted,#a49dae)}
.ini-extra label{display:flex;gap:4px;align-items:center}
.ini-extra input[type=number]{width:58px;padding:3px 6px}
.ini-extra input[type=text]{flex:1;min-width:120px;padding:3px 8px;font-size:12px}

/* 📚 botão flutuante do acervo (pedido do Pedro): esquerda, embaixo da barra, maior e
   meio transparente. z acima do vídeo do mestre (15) — durante o vídeo ele continua
   abrindo o acervo; o drawer (z70) também já fica por cima. */
.ac-flutua{position:fixed;left:10px;top:64px;z-index:40;width:46px;height:46px;
  font-size:22px;line-height:1;padding:0;border-radius:12px;cursor:pointer;
  background:#15111d99;border:1px solid var(--line);color:var(--txt);
  opacity:.55;backdrop-filter:blur(3px);transition:opacity .15s,border-color .15s}
.ac-flutua:hover{opacity:1;border-color:var(--accent);background:#15111dd9}
.ac-flutua-2{top:118px}                         /* embaixo do 📚; o JS reposiciona os dois */
.ac-flutua-2.on{opacity:.95;border-color:var(--accent);box-shadow:0 0 0 2px #c22a3155}
@media (max-width:900px){.ac-flutua{top:auto;bottom:12px}.ac-flutua-2{bottom:66px}}
/* a biblioteca de músicas como POPUP ao lado do 🎵: fixa, acima do vídeo de cena (15) e dos
   painéis (18) e do tracker de iniciativa, abaixo do drawer do acervo (70). Fecha no ✕ ou no 🎵. */
#somPanel.som-pop{position:fixed;left:64px;right:auto;top:118px;z-index:60;width:330px;
  max-height:min(70vh,560px);box-shadow:0 10px 30px #000b}

/* soltar objeto de luz (aba Fontes) */
.lf-solta{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px}
.lf-solta b{display:block;margin-bottom:6px;font-size:12px}
.lf-solta-b{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.lf-solta .muted{font-size:11px;line-height:1.4;display:block}

/* 🎥 câmeras — tile básico (mapa e página só-câmeras) */
.rtc-tile{position:relative;border-radius:10px;overflow:hidden;background:#0b0910;
  border:1px solid var(--line);flex:none}
.rtc-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#0b0910}
.rtc-rot{position:absolute;left:0;right:0;bottom:0;padding:2px 7px;font-size:11px;
  background:linear-gradient(transparent,#000c);color:#fff;display:flex;gap:6px;align-items:baseline}
.rtc-rot b{font-size:12px}
.rtc-rot span{opacity:.75;font-size:10px}
/* BARRA de câmeras no mapa: linha completa abaixo do menu, recolhível pelo cabeçalho */
/* z14: atrás dos painéis (18), do topo/dropdowns (20) e do 📚 flutuante (40) */
.cam-barra{position:fixed;left:64px;right:12px;top:48px;z-index:14;
  background:#15111dd9;border:1px solid var(--line);border-radius:0 0 12px 12px;
  backdrop-filter:blur(4px);box-shadow:0 10px 26px #000a}
.cam-cab{display:flex;gap:8px;align-items:center;padding:4px 10px;font-size:12px}
.cam-cab b{font-size:12px;letter-spacing:.4px}
.cam-cab .sp{flex:1}
.cam-cab .muted{font-size:11px}
.cam-trilho{display:flex;gap:8px;padding:0 10px 8px;overflow-x:auto;align-items:center}
/* o tamanho vem da ALÇA de arrastar (--camh); proporção 3:2 igual ao tile original */
.cam-trilho .rtc-tile{width:calc(var(--camh,100px)*1.5);height:var(--camh,100px);flex:none}
.cam-resize{position:absolute;left:0;right:0;bottom:-4px;height:9px;cursor:ns-resize;z-index:5}
.cam-resize:hover{background:#c22a3144}
.cam-barra.recolhida .cam-resize{display:none}
.cam-barra.recolhida .cam-trilho{display:none}
.cam-barra.recolhida{border-radius:0 0 9px 9px}
/* chat aberto: a barra abre espaço e os quadrados encolhem */
.cam-barra.curta{right:360px}
/* chat aberto: encolhe pra caber, mas RESPEITANDO a altura escolhida na alça */
.cam-barra.curta .cam-trilho .rtc-tile{width:calc(var(--camh,100px)*1.05);height:calc(var(--camh,100px)*0.7)}
/* página só-câmeras: estilo DISCORD — os cartões dividem a tela inteira, a última
   linha fica centralizada, e quem está sem câmera vira cartão colorido com avatar */
.pagina-cameras{background:#0b0910;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.cams-top{display:flex;gap:10px;align-items:center;padding:10px 14px;color:var(--txt);flex:none}
.cams-top .sp{flex:1}
.cams-grade{flex:1;display:flex;flex-wrap:wrap;gap:14px;align-content:center;
  justify-content:center;align-items:center;padding:14px;min-height:0}
.cams-grade .rtc-tile{width:var(--tw,420px);aspect-ratio:16/9;flex:none;border-radius:12px}
.cams-grade .rtc-tile.escondida{display:none!important}
.cams-grade .rtc-rot b{font-size:16px}
.cams-grade .rtc-rot{font-size:13px;padding:6px 10px}
.cams-grade .rtc-tile{cursor:pointer}
.cams-grade .rtc-tile.foco{order:-1;cursor:zoom-out}
/* seletor de câmera (só aparece quando o navegador enxerga mais de uma) */
#camDisp,#camsDisp,#camMic,#camsMic{background:#141020;color:#cfc8dd;border:1px solid #ffffff26;
  border-radius:8px;font-size:12px;padding:2px 6px;max-width:180px}
.aus-fundo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.aus-avatar{width:22%;aspect-ratio:1;border-radius:50%;background:#00000055;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--tw,420px)*.09);
  font-weight:700;text-shadow:0 2px 6px #0009}

/* ⚠ aba de pendências: só aparece quando tem algo, e chama atenção */
#tabPend{color:#ffd98a}
#tabPend.on{color:var(--txt)}

/* acervo: ➕ na linha da pasta cria subpasta */
.acpasta > summary{position:relative}
.acpasta-mais{visibility:hidden;border:0;background:none;color:var(--txt2);cursor:pointer;font-size:11px;padding:0 4px;margin-left:4px;border-radius:4px}
.acpasta > summary:hover .acpasta-mais{visibility:visible}
.acpasta-mais:hover{background:var(--chipbg);color:var(--txt)}