:root{
  --bg:#0b100e;--bg2:#101715;--panel:#151f1b;--panel2:#1b2722;--line:#ffffff14;--line2:#ffffff22;
  --ink:#ece7d8;--muted:#98a496;--dim:#6d786f;
  --gold:#cfae66;--gold2:#e7cf93;--blood:#c9584a;--blood2:#e8776a;--san:#9f8ccc;--san2:#c3b2ea;--magic:#73b4ad;--magic2:#9fd8d1;--luck:#d9b35a;
  --ok:#9fbf86;
  --r:14px;--r2:22px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-h:64px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);overscroll-behavior:none}
body{min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:.01em}
.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);max-width:100vw;padding-bottom:calc(var(--nav-h) + var(--safe-b))}
.screen{min-width:0;animation:enter .32s cubic-bezier(.2,.8,.2,1) both;padding:0 14px 24px}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}.small{font-size:12.5px}
.hide{display:none!important}

/* ---------- topo ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + var(--safe-t)) 14px 8px;position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 70%,transparent)}
.top .who{display:flex;align-items:center;gap:10px;min-width:0}
.top .who strong{font-family:var(--serif);font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who small{display:block;color:var(--muted);font-size:11.5px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--panel2) center/cover;border:1.5px solid var(--gold);box-shadow:0 0 0 3px #cfae6622;flex-shrink:0;display:grid;place-items:center;color:var(--gold);font-family:var(--serif);font-size:18px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.save-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);display:inline-block;margin-right:6px}
.save-dot.warn{background:var(--blood);box-shadow:0 0 8px var(--blood)}

/* ---------- navegação inferior (única) ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--nav-h) + var(--safe-b));padding:6px 6px var(--safe-b);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  background:linear-gradient(#141d19ee,#0e1512f8);backdrop-filter:blur(14px);border-top:1px solid var(--line2)}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.02em;position:relative;transition:color .2s,transform .2s}
.nav button svg{width:24px;height:24px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nav button.on{color:var(--gold)}
.nav button.on svg{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 0 8px #cfae6688)}
.nav button.on::after{content:"";position:absolute;top:2px;width:22px;height:3px;border-radius:3px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.nav button:active{transform:scale(.92)}
.nav .badge{position:absolute;top:4px;right:calc(50% - 22px);min-width:16px;height:16px;border-radius:8px;background:var(--blood);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px}

/* ---------- cartões ---------- */
.card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r2);padding:16px;box-shadow:0 10px 30px #0006}
.card + .card,.card + .row,.row + .card{margin-top:12px}
.row{display:flex;gap:10px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:14px;font-weight:600;background:var(--panel2);border:1px solid var(--line2);transition:transform .15s,background .2s}
.btn:active{transform:scale(.96)}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a2210;border-color:#0000;box-shadow:0 6px 20px #cfae6633}
.btn.wide{width:100%}
.btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#ffffff0d;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.chip.on{background:#cfae6622;border-color:#cfae6655;color:var(--gold2)}
.chip.bad{background:#c9584a22;border-color:#c9584a66;color:var(--blood2)}

/* ---------- Herói: retrato ---------- */
.hero-card{position:relative;border-radius:var(--r2);overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;isolation:isolate;border:1px solid var(--line2);box-shadow:0 18px 50px #000a}
.hero-card .bg{position:absolute;inset:0;z-index:-2;background:url('../assets/investigator.webp') center 20%/cover;animation:breathe 14s ease-in-out infinite alternate}
.hero-card .bg.custom{background-size:cover;background-position:center}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-card .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b100e22 0%,#0b100e66 45%,#0b100ef2 100%)}
.hero-card .mist{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(60% 40% at 30% 80%,#8fb8bc22,transparent 70%),radial-gradient(50% 40% at 80% 30%,#cfae6618,transparent 70%);animation:mist 18s linear infinite alternate;pointer-events:none}
@keyframes mist{from{transform:translate(-3%,2%) rotate(0)}to{transform:translate(3%,-2%) rotate(3deg)}}
.hero-card h1{font-size:30px;line-height:1.05;text-shadow:0 2px 20px #000}
.hero-card .sub{color:#d9d4c4;font-size:13.5px;margin-top:6px;text-shadow:0 1px 8px #000}
.hero-card .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hero-card .edit{position:absolute;top:12px;right:12px}
.state-ring{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:#0b100ecc;border:1px solid var(--line2);font-size:12px;backdrop-filter:blur(6px)}
.state-ring i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.state-ring.hurt i{background:var(--blood);box-shadow:0 0 10px var(--blood);animation:pulse 1.2s infinite}
.state-ring.shaken i{background:var(--san);box-shadow:0 0 10px var(--san);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- Herói: barras de recurso ---------- */
.gauges{display:grid;gap:10px;margin-top:12px}
.gauge{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line)}
.gauge .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#ffffff08;border:1px solid var(--line)}
.gauge .ic svg{width:22px;height:22px}
.gauge .lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.gauge .lbl b{font:600 20px/1 var(--serif);color:var(--ink);letter-spacing:.02em}
.gauge .lbl b small{font:500 12px var(--sans);color:var(--muted)}
.gauge .bar{height:10px;border-radius:6px;background:#00000066;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px #000a}
.gauge .bar i{display:block;height:100%;width:calc(var(--pct) * 1%);border-radius:6px;background:var(--c);box-shadow:0 0 12px var(--c);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.gauge .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff33,transparent);transform:translateX(-100%);animation:shine 3.5s 1s infinite}
@keyframes shine{to{transform:translateX(100%)}}
.gauge .bar .ghost{position:absolute;top:0;bottom:0;left:0;width:calc(var(--prev) * 1%);background:#ffffff55;transition:width .9s .15s ease}
.gauge.hp{--c:var(--blood)}.gauge.san{--c:var(--san)}.gauge.mp{--c:var(--magic)}.gauge.luck{--c:var(--luck)}
.gauge .ic{color:var(--c)}
.gauge .ctl{display:flex;flex-direction:column;gap:4px}
.gauge .ctl button{width:36px;height:30px;border-radius:10px;background:#ffffff0c;border:1px solid var(--line2);font-size:18px;line-height:1;display:grid;place-items:center;transition:transform .12s,background .2s}
.gauge .ctl button:active{transform:scale(.9);background:#ffffff1f}
.gauge.low .bar i{animation:lowpulse 1.1s infinite}
@keyframes lowpulse{50%{filter:brightness(1.6)}}
.gauge.flash{animation:flash .5s}
@keyframes flash{30%{background:color-mix(in srgb,var(--c) 25%,var(--panel))}}
.gauge .hint{grid-column:2/4;font-size:11.5px;color:var(--dim);margin-top:-2px}

/* ---------- Herói: atributos e cartas ---------- */
.attrs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.attr{border-radius:16px;padding:10px 6px 8px;text-align:center;background:linear-gradient(170deg,#1c2823,#121a17);border:1px solid var(--line);position:relative;transition:transform .15s}
.attr:active{transform:scale(.95)}
.attr b{display:block;font:500 24px/1 var(--serif);color:var(--gold2)}
.attr span{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--muted);margin-top:4px;text-transform:uppercase}
.attr small{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:18px 2px 8px}
.sec h2{font-size:19px}
.sec a,.sec button.link{color:var(--gold);font-size:12.5px;font-weight:600}
.best{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skill-card{padding:12px;border-radius:16px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;text-align:left;transition:transform .15s}
.skill-card:active{transform:scale(.96)}
.skill-card .n{font-size:13px;font-weight:600;line-height:1.2}
.skill-card .v{font:500 26px/1 var(--serif);color:var(--gold2)}
.skill-card .m{height:4px;border-radius:2px;background:#0006;overflow:hidden}
.skill-card .m i{display:block;height:100%;width:calc(var(--pct)*1%);background:var(--gold)}
.skill-card .t{font-size:11px;color:var(--muted)}
.conds{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:16px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink)}
.quick button svg{width:22px;height:22px;color:var(--gold)}
.quick button:active{transform:scale(.95)}

/* ---------- vazio / boas-vindas ---------- */
.welcome{min-height:calc(100dvh - var(--nav-h) - 80px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:20px 14px 20px;position:relative;isolation:isolate;border-radius:var(--r2);overflow:hidden;margin-top:6px}
.welcome .bg{position:absolute;inset:0;z-index:-2;background:url('../assets/harbor.webp') center/cover;animation:breathe 16s ease-in-out infinite alternate}
.welcome .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b100e00 10%,#0b100ecc 55%,#0b100e 100%)}
.welcome h1{font-size:34px;line-height:1.05}
.welcome p{color:#d5d0c0;margin:0}

/* ---------- toast / overlay ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);transform:translate(-50%,20px);opacity:0;background:#1c2722;border:1px solid var(--line2);color:var(--ink);padding:10px 16px;border-radius:14px;font-size:13.5px;max-width:92vw;z-index:40;transition:.3s;pointer-events:none;box-shadow:0 10px 30px #000a}
.toast.show{transform:translate(-50%,0);opacity:1}
.overlay{position:fixed;inset:0;z-index:30;background:#060908cc;backdrop-filter:blur(8px);display:grid;place-items:end center;padding:0}
.overlay[hidden]{display:none}
.sheet{width:100%;max-height:92dvh;overflow:auto;background:var(--bg2);border-radius:26px 26px 0 0;border-top:1px solid var(--line2);padding:12px 16px calc(20px + var(--safe-b));animation:up .35s cubic-bezier(.2,.8,.2,1)}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:#ffffff33;margin:0 auto 12px}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h2{font-size:22px;margin-bottom:6px}
.list{display:grid;gap:8px;margin-top:10px}
.list button{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left}
.list button svg{width:20px;height:20px;color:var(--gold);flex-shrink:0}
.placeholder{padding:40px 10px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.reduce-motion *{animation:none!important;transition:none!important}

/* ---------- cinema do dado ---------- */
.cinema{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));overflow:hidden;animation:fadein .25s}
.cinema[hidden]{display:none}
@keyframes fadein{from{opacity:0}}
.cin-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 50% 40%,#1b2824,#070b09 80%);transition:background .4s}
.cinema.v-crit .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#5a4616,#0b0905 80%)}
.cinema.v-extreme .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#17433f,#060c0b 80%)}
.cinema.v-hard .cin-bg,.cinema.v-ok .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#23402a,#070b08 80%)}
.cinema.v-fail .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#4a2420,#0b0605 80%)}
.cinema.v-fumble .cin-bg,.cinema.v-horror .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#3b0f12,#050202 80%)}
.cin-top{text-align:center;position:absolute;top:calc(28px + var(--safe-t));left:20px;right:20px}
.cin-sub{color:var(--muted);font-size:13px;margin-top:4px}
.cin-die{position:relative;width:210px;height:210px;display:grid;place-items:center}
.cin-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #cfae6633;box-shadow:0 0 60px #cfae6622 inset,0 0 80px #cfae6611;animation:spin 6s linear infinite}
.cin-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;border:1px dashed #cfae6644}
@keyframes spin{to{transform:rotate(360deg)}}
.cin-num{font:500 112px/1 var(--serif);color:var(--ink);letter-spacing:-.02em;text-shadow:0 0 40px #cfae6655,0 4px 20px #000;transition:transform .08s;font-variant-numeric:tabular-nums}
.cin-die.land .cin-num{animation:slam .45s cubic-bezier(.2,1.4,.3,1)}
@keyframes slam{0%{transform:scale(1.8);opacity:.3}60%{transform:scale(.92)}100%{transform:scale(1)}}
.cin-verdict{font:700 44px/1 var(--sans);letter-spacing:.08em;opacity:0;transform:scale(.4);min-height:48px;text-align:center}
.cin-verdict.show{animation:verdict .55s cubic-bezier(.2,1.6,.3,1) forwards}
@keyframes verdict{0%{opacity:0;transform:scale(.4) rotate(-6deg)}70%{opacity:1;transform:scale(1.12) rotate(1deg)}100%{opacity:1;transform:scale(1)}}
.cin-verdict.crit{color:var(--gold2);text-shadow:0 0 30px var(--gold),0 0 60px var(--gold)}
.cin-verdict.extreme{color:var(--magic2);text-shadow:0 0 30px var(--magic)}
.cin-verdict.hard,.cin-verdict.ok{color:#c2e2a4;text-shadow:0 0 24px #9fbf86}
.cin-verdict.fail{color:var(--blood2);text-shadow:0 0 24px var(--blood)}
.cin-verdict.fumble,.cin-verdict.horror{color:#ff6b5c;text-shadow:0 0 30px #c9584a,0 0 60px #7a1f17}
.cin-detail{color:var(--muted);font-size:13.5px;text-align:center;max-width:320px;opacity:0;transition:opacity .4s .1s;line-height:1.5}
.cin-detail.show{opacity:1}
.cin-detail b{color:var(--ink)}
.cin-actions{position:absolute;left:16px;right:16px;bottom:calc(18px + var(--safe-b));display:grid;gap:8px;opacity:0;transform:translateY(12px);transition:.4s .2s}
.cin-actions.show{opacity:1;transform:none}
.cin-actions .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cinema.shake{animation:shake .5s}
.cinema.shake-s{animation:shake .3s}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}
.sparks{position:absolute;left:50%;top:45%;pointer-events:none}
.sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 10px var(--gold);animation:spark var(--t) ease-out forwards;transform:rotate(var(--a))}
@keyframes spark{to{transform:rotate(var(--a)) translateX(var(--d));opacity:0}}

/* ---------- Agir ---------- */
.search{display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.search input{flex:1;background:none;border:0;color:var(--ink);font:inherit;outline:0;min-width:0}
.search svg{width:18px;height:18px;color:var(--muted)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex-shrink:0;height:32px}
.skills{display:grid;gap:6px;margin-top:8px}
.skill{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left;transition:transform .12s}
.skill:active{transform:scale(.98)}
.skill .n{font-size:14px;font-weight:600;line-height:1.2;display:flex;align-items:center;gap:6px}
.skill .n .mk{width:16px;height:16px;border-radius:50%;background:var(--ok);display:inline-grid;place-items:center;color:#0b100e}
.skill .n .mk svg{width:11px;height:11px}
.skill .g{font-size:11px;color:var(--dim);margin-top:2px}
.skill .m{height:3px;border-radius:2px;background:#0006;margin-top:6px;overflow:hidden}
.skill .m i{display:block;height:100%;width:calc(var(--pct)*1%);background:var(--gold)}
.skill .v{font:500 24px/1 var(--serif);color:var(--gold2);min-width:48px;text-align:right}
.skill .v small{display:block;font:500 10px var(--sans);color:var(--dim);letter-spacing:.02em}
.skill .d{width:40px;height:40px;border-radius:12px;background:#cfae6618;border:1px solid #cfae6633;display:grid;place-items:center;color:var(--gold)}
.skill .d svg{width:20px;height:20px}
.grp{margin-top:8px}
.grp summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.grp summary::-webkit-details-marker{display:none}
.grp summary small{font-size:12px;letter-spacing:0;color:var(--gold);background:#cfae6618;border-radius:999px;padding:2px 9px}
.grp summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-left:10px;transition:transform .2s}
.grp[open] summary::after{transform:rotate(-135deg)}
.grp[open] summary{color:var(--gold2)}
.grp .skills{margin-top:6px;animation:enter .25s}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:#0008;border:1px solid var(--line);margin-top:8px}
.seg button{height:40px;border-radius:11px;font-size:13px;font-weight:600;color:var(--muted);transition:.2s}
.seg button.on{background:var(--panel2);color:var(--gold2);box-shadow:0 2px 10px #000a;border:1px solid var(--line2)}
.seg button small{display:block;font-size:10.5px;font-weight:500;color:var(--dim)}
.lbl2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.hint2{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.45}
.field{display:block;margin-top:10px}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);font:inherit;outline:0}
.field textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.weapon{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.weapon .n{font-weight:600}.weapon .g{font-size:12px;color:var(--muted);margin-top:2px}
.weapon .acts{display:flex;gap:6px}
.weapon .acts button{height:38px;padding:0 12px;border-radius:11px;background:#cfae6618;border:1px solid #cfae6633;color:var(--gold2);font-size:13px;font-weight:600}
.weapon .acts button.dim{background:#ffffff0a;border-color:var(--line);color:var(--muted)}
.ammo{display:flex;gap:3px;margin-top:6px}.ammo i{width:8px;height:12px;border-radius:2px;background:var(--gold);opacity:.9}.ammo i.off{background:#ffffff22}

/* ---------- sprites ---------- */
.sprite{display:block;width:100%;aspect-ratio:1;background-size:400% 400%;background-repeat:no-repeat;border-radius:12px;mask-image:radial-gradient(ellipse at center,#000 58%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 58%,transparent 80%);filter:drop-shadow(0 4px 10px #0008)}
.sprite.sm{width:44px;height:44px}.sprite.xs{width:40px;height:40px;flex-shrink:0}.sprite.lg{width:110px;height:110px;flex-shrink:0}

/* ---------- Mochila ---------- */
.doll{position:relative;border-radius:var(--r2);overflow:hidden;min-height:330px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px;padding:14px;isolation:isolate;border:1px solid var(--line2);box-shadow:0 18px 50px #000a}
.doll .bg{position:absolute;inset:0;z-index:-2;background:url('../assets/investigator.webp') center 30%/cover;animation:breathe 16s ease-in-out infinite alternate}
.doll .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b100ecc,#0b100e44 50%,#0b100ecc),linear-gradient(#0b100e22,#0b100ee6)}
.doll .col{display:grid;gap:8px}
.doll .col:last-child{justify-items:end}
.slot{width:112px;padding:10px 6px 8px;border-radius:16px;background:#0b100ea8;border:1px dashed #ffffff33;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);backdrop-filter:blur(4px);transition:transform .15s,border-color .2s,box-shadow .2s}
.slot svg{width:26px;height:26px;opacity:.6}
.slot.full{border-style:solid;border-color:#cfae6688;color:var(--ink);box-shadow:0 0 18px #cfae6633}
.slot.sug{border-color:var(--gold);box-shadow:0 0 14px #cfae6644}
.slot:active{transform:scale(.95)}
.slot .sl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.slot .sn{font-size:11px;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.slot .sn.dim{color:var(--dim)}
.slot.impact{animation:impact .5s}
@keyframes impact{30%{transform:scale(1.12);box-shadow:0 0 30px var(--gold)}}
.doll-cap{grid-column:1/3;text-align:center;margin-top:4px}
.doll-cap strong{font-family:var(--serif);font-size:20px;font-weight:500;text-shadow:0 2px 10px #000}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tile{position:relative;padding:8px 6px 8px;border-radius:16px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:center;transition:transform .15s,border-color .2s}
.tile:active{transform:scale(.94)}
.tile.eq{border-color:#cfae6666;box-shadow:0 0 16px #cfae6622 inset}
.tile.zero{opacity:.45}
.tile .q{position:absolute;top:6px;right:6px;font-size:11px;font-weight:700;background:#0b100ecc;border:1px solid var(--line2);border-radius:999px;padding:2px 7px;color:var(--gold2)}
.tile .e{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#0b100e;display:grid;place-items:center}
.tile .e svg{width:12px;height:12px}
.tile .n{font-size:11.5px;font-weight:600;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.tile.added{animation:impact .5s}
.item-hero{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.slots-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;justify-items:center}

/* ---------- Diário ---------- */
.quest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.quest-head h2{font-size:21px;margin:2px 0}
.ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--pct)*1%),#ffffff14 0);flex-shrink:0;position:relative}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;font:600 13px var(--sans);color:var(--gold2)}
.chips .chip svg{width:14px;height:14px}.chips .chip small{opacity:.7}
.notes{display:grid;gap:8px;margin-top:8px}
.note{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px;border-radius:16px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);position:relative}
.note.pin{border-color:#cfae6655}
.note.pista{background:linear-gradient(160deg,#1f2a25,#151d19);border-color:#cfae6633}
.note.done{opacity:.55}.note.done .t{text-decoration:line-through}
.note .chk{width:30px;height:30px;border-radius:9px;border:2px solid var(--gold);display:grid;place-items:center;color:#0b100e;margin-top:2px;transition:.2s}
.note.done .chk{background:var(--ok);border-color:var(--ok)}
.note .chk svg{width:18px;height:18px}
.note .ic{width:30px;height:30px;border-radius:9px;background:#cfae6618;display:grid;place-items:center;color:var(--gold)}
.note .ic svg{width:16px;height:16px}
.note .body{text-align:left;display:grid;gap:3px;min-width:0}
.note .t{font-weight:600;font-size:15px;line-height:1.25}
.note .x{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note .meta{font-size:11px;color:var(--dim);display:flex;gap:4px;align-items:center}.note .meta svg{width:12px;height:12px;color:var(--gold)}
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);width:56px;height:56px;border-radius:18px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a2210;display:grid;place-items:center;box-shadow:0 10px 30px #cfae6655;z-index:15;transition:transform .15s}
.fab svg{width:26px;height:26px}.fab:active{transform:scale(.92)}
.timeline{margin-top:10px;display:grid;gap:12px;padding-left:4px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.tl .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:6px;box-shadow:0 0 8px var(--gold)}
.tl b{display:block;font-size:14px}

/* ---------- Saber ---------- */
.spells{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.spell{padding:10px;border-radius:18px;background:linear-gradient(160deg,#1c1a26,#14121b);border:1px solid #9f8ccc33;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s}
.spell:active{transform:scale(.96)}
.spell.known{border-color:#9f8ccc88;box-shadow:0 0 18px #9f8ccc22}
.sprite.spellart{mask-image:linear-gradient(#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(#000 70%,transparent 100%);border-radius:12px}
.spell .t{font-weight:600;font-size:13.5px;text-align:center;line-height:1.2}
.spell .m{font-size:11px;color:var(--san2)}
.bignum{font:500 42px/1 var(--serif);color:var(--gold2);margin:10px 0 6px}.bignum small{font:500 13px var(--sans);color:var(--muted)}
.ach{display:grid;gap:8px}
.ach .a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);opacity:.55}
.ach .a.on{opacity:1;border-color:#cfae6655}
.ach .a svg{width:22px;height:22px;color:var(--gold);flex-shrink:0}
.ach .a b{display:block;font-size:14px}.ach .a span{font-size:12px;color:var(--muted)}
.dev{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.dev.up{border-color:#cfae6655}.dev.up b{color:var(--gold2)}.dev i{font-style:normal;color:var(--ok)}

/* ---------- criação ---------- */
.steps{display:flex;align-items:center;margin-top:8px}
.steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#ffffff0d;border:1px solid var(--line2);color:var(--muted);flex-shrink:0}
.steps span.on{background:var(--gold);color:#2a2210;border-color:var(--gold);box-shadow:0 0 14px #cfae6688}
.steps span.done{background:#cfae6633;color:var(--gold2);border-color:#cfae6666}
.steps span svg{width:14px;height:14px}
.steps i{flex:1;height:1px;background:var(--line2)}
.cr-title{font-size:26px;line-height:1.1;margin:6px 0 8px}
.err{margin-top:12px;padding:10px 12px;border-radius:12px;background:#c9584a22;border:1px solid #c9584a66;color:var(--blood2);font-size:13.5px;animation:shake .4s}
.occs{display:grid;gap:6px;margin-top:10px}
.occ{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left}
.occ.on{border-color:var(--gold);background:#cfae6614}
.occ>svg{width:20px;height:20px;color:var(--gold)}
.occ b{display:block;font-size:14px}.occ small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.attr.sel{border-color:var(--gold);box-shadow:0 0 16px #cfae6666;transform:scale(1.04)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.val{position:relative;padding:12px 8px 10px;border-radius:16px;background:linear-gradient(170deg,#1c2823,#121a17);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.val b{font:500 28px/1 var(--serif);color:var(--gold2)}
.val span{font-size:11px;line-height:1.2;color:var(--muted);min-height:2.4em}
.val.sel{border-color:var(--gold);box-shadow:0 0 16px #cfae6666}
.val.credit{border-style:dashed}
.val i{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;background:#ffffff14;display:grid;place-items:center;color:var(--muted)}
.val i svg{width:13px;height:13px}
.bgs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.bgc{padding:12px;border-radius:16px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.bgc.on{border-color:var(--gold);box-shadow:0 0 16px #cfae6644}
.bgc>svg{width:22px;height:22px;color:var(--gold)}
.bgc b{font-size:14px}.bgc small{font-size:11.5px;color:var(--muted);line-height:1.3}
.create{padding-bottom:40px}

/* ---------- dados 3D ---------- */
.dice-stage{position:absolute;inset:0;z-index:0}
.dice-canvas{width:100%;height:100%;display:block}
.cinema.three .cin-die{position:absolute;top:calc(84px + var(--safe-t));left:50%;transform:translateX(-50%);width:110px;height:110px;transition:opacity .3s}
.cinema.three .cin-die .cin-num{font-size:54px}
.cinema.three .cin-die.hide{opacity:0}
.cinema.three .cin-verdict,.cinema.three .cin-detail{position:relative;z-index:2;pointer-events:none;margin-top:46vh}
.cinema.three .cin-detail{margin-top:0}
.cinema.three .cin-top,.cinema.three .cin-actions{z-index:2}

/* ---------- topo: a mesa ---------- */
.top.party{align-items:flex-start;padding-bottom:4px;background:var(--bg)}
.party-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.party-row::-webkit-scrollbar{display:none}
.pavatar{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;opacity:.6;transition:.2s}
.pavatar.on{opacity:1}
.pavatar .pic{width:40px;height:40px;border-radius:50%;background:var(--panel2) center/cover;border:2px solid #ffffff22;display:grid;place-items:center;font-family:var(--serif);color:var(--gold);transition:.2s}
.pavatar.on .pic{border-color:var(--gold);box-shadow:0 0 0 3px #cfae6622,0 0 16px #cfae6655}
.pavatar.add .pic{border-style:dashed}.pavatar .pic svg{width:18px;height:18px}
.pavatar small{font-size:10px;color:var(--muted);max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- modos ---------- */
.nav.modes{grid-template-columns:1fr 1.3fr 1fr;align-items:end}
.nav.modes button{font-family:var(--serif);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.nav.modes button.center svg{width:30px;height:30px}
.nav.modes button.center.on svg{filter:drop-shadow(0 0 12px var(--gold))}
.pills{display:flex;gap:4px;padding:4px;margin:6px 14px 0;border-radius:14px;background:#0008;border:1px solid var(--line)}
.pills button{flex:1;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.pills button svg{width:15px;height:15px}
.pills button.on{background:var(--panel2);color:var(--gold2);border:1px solid var(--line2)}
.pager{animation:enter .3s}
/* ---------- AGIR: HUD + roda ---------- */
.wheel-screen{padding-bottom:10px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:calc(100dvh - 140px)}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin-top:4px}
.hud-side{display:flex;flex-direction:column;gap:6px}
.hud-side.l{align-items:flex-end}.hud-side.r{align-items:flex-start}
.badge{display:inline-flex;flex-direction:column;align-items:center;min-width:52px;padding:5px 8px;border-radius:12px;background:#0b100ecc;border:1px solid var(--line2);font-size:9px;letter-spacing:.14em;color:var(--muted)}
.badge b{font:500 17px/1 var(--serif);color:var(--ink)}
.badge.mp b{color:var(--magic2)}.badge.luck b{color:var(--luck)}
.portrait-ring{position:relative;width:150px;height:150px;display:grid;place-items:center}
.portrait-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.portrait-ring circle{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.portrait-ring .track{stroke:#ffffff10}
.portrait-ring .hp{stroke:var(--blood);filter:drop-shadow(0 0 6px var(--blood))}
.portrait-ring .san{stroke:var(--san);filter:drop-shadow(0 0 6px var(--san))}
.portrait-ring .pic{width:100px;height:100px;border-radius:50%;background:var(--panel2) center/cover;display:grid;place-items:center;font:500 44px var(--serif);color:var(--gold);border:2px solid #0b100e;box-shadow:0 0 30px #000}
.portrait-ring.hurt .pic{box-shadow:0 0 30px #c9584a88}
.portrait-ring.shaken .pic{box-shadow:0 0 30px #9f8ccc88;animation:pulse 2s infinite}
.hp-pill,.san-pill{position:absolute;bottom:4px;padding:3px 9px;border-radius:999px;background:#0b100ee6;border:1px solid var(--line2);font:600 13px var(--sans)}
.hp-pill{left:4px;color:var(--blood2)}.san-pill{right:4px;color:var(--san2)}
.hp-pill small,.san-pill small{font-size:10px;color:var(--muted);margin-left:2px}
.state-line{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.state-line i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.state-line.hurt i{background:var(--blood);box-shadow:0 0 8px var(--blood)}.state-line.shaken i{background:var(--san);box-shadow:0 0 8px var(--san)}
.wheel{position:relative;width:min(330px,92vw);aspect-ratio:1}
.wheel-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 20px 40px #000c)}
.wedge path{fill:#16201c;stroke:#cfae6633;stroke-width:1;transition:fill .2s}
.wedge text{fill:var(--ink);font:600 12.5px var(--sans);letter-spacing:.02em;pointer-events:none}
.wedge:active path,.wedge:hover path{fill:#243229}
.wedge:active text{fill:var(--gold2)}
.gem{position:absolute;left:50%;top:50%;width:104px;height:104px;transform:translate(-50%,-50%);display:grid;place-items:center}
.gem-core{position:relative;z-index:1;width:84px;height:84px;border-radius:26px;transform:rotate(45deg);background:linear-gradient(145deg,#2a3a33,#0e1613);border:1px solid #cfae6666;display:grid;place-items:center;box-shadow:inset 0 0 24px #7fb7b233,0 10px 30px #000a;transition:transform .15s}
.gem-core svg{width:40px;height:40px;transform:rotate(-45deg);color:var(--gold2);filter:drop-shadow(0 0 8px #cfae6688)}
.gem:active .gem-core{transform:rotate(45deg) scale(.92)}
.gem-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,#7fb7b244,transparent 70%);animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.4;transform:scale(1.15)}}
.dock{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;width:100%;align-items:end}
.dock-card{position:relative;padding:22px 10px 10px;border-radius:18px 18px 10px 10px;background:linear-gradient(180deg,#5a4a2a,#2d2415);border:1px solid #cfae6655;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);transition:transform .15s;min-height:118px;justify-content:center}
.dock-card:active{transform:translateY(2px) scale(.97)}
.dock-card .dock-l{position:absolute;top:6px;left:0;right:0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);opacity:.9}
.dock-card>svg{width:28px;height:28px;color:var(--gold2);opacity:.7}
.dock-card b{font-size:13px;text-align:center;line-height:1.15}
.dock-card small{font-size:11px;color:#e3d6b4;opacity:.85}
.dock-mid{width:52px;height:52px;border-radius:16px;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;color:var(--gold);margin-bottom:30px}
.dock-mid svg{width:22px;height:22px}
.best-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.best-row .chip{height:34px}.best-row .chip b{color:var(--gold2)}
/* ---------- MESA ---------- */
.table-screen{padding:0;position:relative}
.scene{position:relative;height:calc(100dvh - var(--nav-h) - var(--safe-b) - 74px - var(--safe-t));overflow:hidden;background:#07100c;touch-action:none;cursor:grab;border-top:1px solid var(--line)}
.scene-inner{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-origin:0 0;will-change:transform}
.scene .map{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.9);user-select:none;-webkit-user-drag:none}
.grid-ov{position:absolute;inset:0;background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);pointer-events:none}
.fog{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 56%,transparent 18%,#070b09cc 45%,#070b09 70%)}
.token{position:absolute;width:80px;height:80px;display:grid;place-items:center;transform:translate(0,0);transition:transform .15s}
.token .ring{position:absolute;inset:6px;border-radius:50%;border:3px solid var(--ok);box-shadow:0 0 14px var(--ok),0 6px 16px #000a;animation:tokenpulse 2.4s infinite}
@keyframes tokenpulse{50%{box-shadow:0 0 4px var(--ok),0 6px 16px #000a}}
.token .pic{width:56px;height:56px;border-radius:50%;background:var(--panel2) center/cover;display:grid;place-items:center;font:500 24px var(--serif);color:var(--gold);border:2px solid #0b100e}
.token .lbl{position:absolute;top:100%;margin-top:-6px;padding:2px 8px;border-radius:999px;background:#0b100ee6;border:1px solid var(--line2);font-size:11px;white-space:nowrap}
.token.lift{transform:scale(1.18);z-index:3}
.token.lift .ring{border-color:var(--gold);box-shadow:0 0 20px var(--gold)}
.scene-hud{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.scene-hud strong{font-family:var(--serif);font-size:20px;font-weight:500;text-shadow:0 2px 10px #000}
.scene-note{position:absolute;left:14px;right:14px;bottom:12px;padding:10px 12px;border-radius:12px;background:#0b100ecc;backdrop-filter:blur(6px);border:1px solid var(--line);pointer-events:none;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.scene-note svg{width:16px;height:16px;flex-shrink:0;color:var(--gold)}
/* crítico com arte em tela cheia */
.cinema.v-crit .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#5a4616cc,#0b0905 80%),url('../assets/investigator.webp') center 20%/cover}
.cinema.v-fumble .cin-bg,.cinema.v-horror .cin-bg{background:radial-gradient(70% 55% at 50% 40%,#3b0f12cc,#050202 85%),url('../assets/harbor.webp') center/cover}
.dossie{display:flex;flex-direction:column;min-height:0}
.pager>.screen{padding-top:6px}

/* ---------- cena compartilhada (mestre e jogador) ---------- */
.sv{position:relative;overflow:hidden;background:#07100c;touch-action:none;user-select:none;cursor:grab}
.sv-enter{animation:scenein .7s cubic-bezier(.2,.8,.2,1)}
@keyframes scenein{from{filter:brightness(0) blur(8px)}to{filter:none}}
.sv-inner{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.sv-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;filter:saturate(.9)}
.sv-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);pointer-events:none}
.sv-fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sv-objects,.sv-tokens{position:absolute;inset:0;pointer-events:none}
.sv-obj{position:absolute;pointer-events:auto;display:grid;place-items:center;padding:0;transition:transform .15s}
.sv-obj .sv-pic{width:72%;height:72%;border-radius:14px;mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 78%);filter:drop-shadow(0 6px 10px #000c)}
.sv-obj .sv-pic.ic{display:grid;place-items:center;color:var(--gold2);background:#0b100ecc;border:1px solid var(--line2);mask-image:none;-webkit-mask-image:none;border-radius:50%}
.sv-obj .sv-pic.ic svg{width:55%;height:55%}
.sv-obj .sv-pic.img{background:center/cover}
.sv-obj .sv-glow{position:absolute;inset:14%;border-radius:50%;box-shadow:0 0 18px 4px #cfae6666;animation:objglow 2s ease-in-out infinite alternate;pointer-events:none}
.sv-obj.note .sv-glow{box-shadow:0 0 18px 4px #c3b2ea66}
@keyframes objglow{to{box-shadow:0 0 6px 1px #cfae6622}}
.sv-obj.hidden-m{opacity:.4;filter:grayscale(1)}
.sv-tok{position:absolute;pointer-events:auto;display:grid;place-items:center;transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1),transform .15s}
.sv-tok .ring{position:absolute;inset:6%;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 14px var(--c),0 6px 16px #000a}
.sv-tok.me .ring{animation:tokenpulse 2.4s infinite}
.sv-tok .pic{width:70%;height:70%;border-radius:50%;background:#1b2722 center/cover;display:grid;place-items:center;font:500 1.6em var(--serif);color:var(--gold);border:2px solid #0b100e;overflow:hidden}
.sv-tok .pic .sv-pic{width:100%;height:100%;mask-image:none;-webkit-mask-image:none;border-radius:50%}
.sv-tok .lbl{position:absolute;top:92%;padding:2px 8px;border-radius:999px;background:#0b100ee6;border:1px solid var(--line2);font-size:11px;white-space:nowrap;max-width:200%;overflow:hidden;text-overflow:ellipsis}
.sv-tok.lift{transform:scale(1.15);z-index:5;transition:transform .15s}
.sv-tok.lift .ring{border-color:var(--gold);box-shadow:0 0 22px var(--gold)}
.sv-tok.sel .ring{border-color:var(--gold2);border-width:4px}
.sv-tok.hidden-m{opacity:.45}
.sv-tok .hpbar{position:absolute;bottom:-6px;left:15%;right:15%;height:5px;border-radius:3px;background:#0008;overflow:hidden}.sv-tok .hpbar i{display:block;height:100%;background:var(--blood)}
.sv-flash{position:absolute;border-radius:12px;background:#cfae6655;box-shadow:0 0 30px var(--gold);animation:cellflash .9s forwards;pointer-events:none}
@keyframes cellflash{to{opacity:0;transform:scale(1.5)}}
.sv-curtain[hidden]{display:none}
.sv-curtain{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(60% 50% at 50% 50%,#121b17,#06090800 100%),#070b09;text-align:center;overflow:hidden}
.sv-curtain h2{font-size:24px;animation:pulse 3s infinite}
.sv-smoke{position:absolute;inset:-30%;background:radial-gradient(40% 30% at 30% 60%,#8fb8bc22,transparent 70%),radial-gradient(35% 30% at 70% 40%,#cfae6618,transparent 70%);animation:mist 14s linear infinite alternate;pointer-events:none}

/* ---------- mesa ao vivo (jogador) ---------- */
.table-screen.live{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-h) - var(--safe-b) - 74px - var(--safe-t))}
.live-top{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 4px}
.live-top strong{font-family:var(--serif);font-size:19px;font-weight:500}
.party-live{display:flex;gap:10px;padding:4px 14px 8px;overflow-x:auto;scrollbar-width:none;align-items:center}
.party-live .pl{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;flex-shrink:0}
.party-live .pl.off{opacity:.45}
.party-live .pic{width:34px;height:34px;border-radius:50%;background:var(--panel2) center/cover;border:2px solid #9fbf8666;display:grid;place-items:center;font-family:var(--serif);color:var(--gold);font-size:14px}
.party-live small{font-size:10px;color:var(--muted)}
.party-live .hp{position:absolute;top:30px;left:4px;right:4px;height:3px;border-radius:2px;background:#0008;overflow:hidden}.party-live .hp::after{content:"";display:block;height:100%;width:calc(var(--p)*1%);background:var(--blood)}
.scene-live{flex:1;min-height:0;position:relative}
.scene-live .sv{height:100%}
.scene-note.live{bottom:8px}.scene-note.live .link{pointer-events:auto;color:var(--gold);margin-left:auto;font-weight:600}
.scene-note{pointer-events:auto}
.sprite.xl{width:180px;height:180px}
.item-full,.note-full,.ask-full,.cine-full{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:6px}
.item-art{position:relative;width:200px;height:200px;display:grid;place-items:center;margin-bottom:6px}
.item-art>svg{width:90px;height:90px;color:var(--gold)}
.item-rays{position:absolute;inset:-30px;border-radius:50%;background:conic-gradient(from 0deg,#cfae6600,#cfae6633,#cfae6600 25%,#cfae6600 50%,#cfae6633,#cfae6600 75%);animation:spin 9s linear infinite;z-index:-1;mask-image:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
.item-full h2,.note-full h2,.ask-full h2,.cine-full h2{font-size:28px}
.note-paper{width:100%;padding:18px 16px;border-radius:6px;background:linear-gradient(170deg,#efe6cf,#d9ccab);color:#2a2214;font-family:var(--serif);font-size:16px;line-height:1.5;text-align:left;box-shadow:0 10px 30px #000a;margin:8px 0 12px;position:relative}
.note-paper::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,#ffffff55,transparent 50%),radial-gradient(ellipse at 90% 90%,#8a6a3a33,transparent 45%);pointer-events:none;border-radius:6px}
.note-img,.cine-img{width:100%;max-height:48vh;object-fit:contain;border-radius:14px;margin:6px 0}
.cine-full p{color:var(--muted);line-height:1.5}
/* efeitos de tela empurrados pelo mestre */
.fx{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center;font:700 34px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.fx-horror{background:radial-gradient(circle,#3b0f12cc,#050202ee);animation:horror 3.2s forwards;color:#ff6b5c;text-shadow:0 0 30px #c9584a}
@keyframes horror{0%{opacity:0}10%{opacity:1}20%{transform:translate(-6px,3px)}30%{transform:translate(6px,-3px)}40%{transform:translate(-4px,2px)}50%{transform:none}85%{opacity:1}100%{opacity:0}}
.fx-flash{background:#fff;animation:flashw 1.2s forwards;color:#000}
@keyframes flashw{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.fx-shake{animation:shake .6s;background:#c9584a22;color:var(--blood2)}
.fx-whisper{background:#0b100e88;color:var(--san2);font:italic 500 26px var(--serif);letter-spacing:0;text-transform:none;animation:flashw 2.4s forwards}
.fx-calm{background:radial-gradient(circle,#9fbf8633,#0b100e00);animation:flashw 1.6s forwards;color:#c2e2a4}

/* ---------- criador: cada escolha responde ---------- */
.occ.on,.bgc.on,.attr.sel,.val.sel,.chip.on{animation:pick .35s cubic-bezier(.2,1.4,.3,1)}
@keyframes pick{0%{transform:scale(.96)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.cr-title{animation:enter .45s both}
.attr b,.val b{transition:transform .2s}.attr.sel b,.val.sel b{transform:scale(1.15)}
/* mochila: carta grande do item */
.item-full .sprite.xl{animation:pick .5s cubic-bezier(.2,1.4,.3,1)}
.qty-row{display:flex;align-items:center;gap:14px;margin:2px 0 6px}.qty-row b{font:500 22px var(--serif);color:var(--gold2)}.qbtn{width:40px;height:40px;border-radius:12px;background:#ffffff0c;border:1px solid var(--line2);font-size:22px;display:grid;place-items:center}

.sv-ruler{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.sv-ruler line{stroke:var(--gold2);stroke-width:4;stroke-dasharray:10 8;filter:drop-shadow(0 0 6px #cfae66)}
.sv-ruler circle{fill:#cfae6644;stroke:var(--gold2);stroke-width:3}
.sv-ruler rect{fill:#0b100ee6;stroke:#cfae6688;stroke-width:1.5}
.sv-ruler text{fill:var(--gold2);font:600 1em var(--sans)}
.live-tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:6}
.live-tools button{width:44px;height:44px;border-radius:14px;background:#0b100ed9;backdrop-filter:blur(6px);border:1px solid var(--line2);color:var(--ink);display:grid;place-items:center}
.live-tools button svg{width:20px;height:20px}.live-tools button.on{border-color:var(--gold);color:var(--gold2)}
.color-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.color-row button{width:42px;height:42px;border-radius:50%;border:3px solid #0000;box-shadow:0 0 0 2px var(--line2)}
.color-row button.on{border-color:#fff;box-shadow:0 0 16px var(--c)}

.turn-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:linear-gradient(90deg,#1b2722,#0b100e);border-top:1px solid var(--line);border-bottom:1px solid var(--line);animation:enter .3s}
.turn-bar strong{font-family:var(--serif);font-size:17px;font-weight:500;white-space:nowrap}
.turn-bar.me{background:linear-gradient(90deg,#5a4616,#0b100e);animation:turnme 1.4s infinite alternate}
@keyframes turnme{to{background:linear-gradient(90deg,#7a5e1a,#0b100e)}}
.turn-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.turn-list i{font-style:normal;font-size:11px;padding:3px 8px;border-radius:999px;background:#ffffff0c;border:1px solid var(--line);white-space:nowrap;color:var(--muted)}
.turn-list i.npc{border-color:#c9584a44}.turn-list i.on{background:var(--gold);color:#2a2210;border-color:var(--gold)}
.init-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);margin-bottom:6px}
.init-row.on{border-color:var(--gold);background:#cfae6614}
.init-row .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffffff0c;font-weight:700;font-size:12px}
.init-row.on .n{background:var(--gold);color:#2a2210}

/* ---------- tela de teste (check) ---------- */
.overlay:has(.check) .sheet{max-height:100dvh;height:100dvh;border-radius:0;padding:calc(14px + var(--safe-t)) 16px calc(16px + var(--safe-b));display:flex;flex-direction:column}
.check{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;isolation:isolate}
.check-bg{position:absolute;inset:-20px -16px;z-index:-1;background:url('../assets/investigator.webp') center 20%/cover;filter:blur(6px) brightness(.35) saturate(.7);mask-image:linear-gradient(#000 60%,transparent);-webkit-mask-image:linear-gradient(#000 60%,transparent)}
.check-title{font:500 30px/1.1 var(--serif);text-shadow:0 2px 20px #000}
.check-sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.check-frame{position:relative;width:min(300px,86vw);padding:18px 16px 22px;border-radius:30px 30px 60px 60px;background:linear-gradient(180deg,#1d2a35e6,#0d1218f0);border:1px solid #cfae6666;box-shadow:0 0 0 4px #0b100e,0 0 0 5px #cfae6633,0 20px 60px #000c;display:flex;flex-direction:column;align-items:center;gap:8px}
.check-frame::before,.check-frame::after{content:"";position:absolute;top:10px;width:28px;height:28px;border:2px solid #cfae6666;border-radius:50%;background:#0b100e}
.check-frame::before{left:-14px}.check-frame::after{right:-14px}
.check-dc{display:flex;flex-direction:column;align-items:center;gap:2px}
.check-dc span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.check-dc b{font:500 46px/1 var(--serif);color:var(--ink)}
.check-dc small{font-size:11px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.check-die{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px;transition:transform .15s}
.check-die:active{transform:scale(.94)}
.check-die .d10{position:relative;width:118px;height:118px;display:block;filter:drop-shadow(0 0 22px #9f8ccc88) drop-shadow(0 10px 20px #000)}
.check-die .d10 i{position:absolute;inset:0;background:linear-gradient(135deg,#d6cdee,#8c7bb8 55%,#5a4a8a);clip-path:polygon(50% 0,96% 36%,78% 100%,22% 100%,4% 36%);animation:dieidle 3.6s ease-in-out infinite}
.check-die .d10 i:last-child{clip-path:polygon(50% 0,96% 36%,50% 52%,4% 36%);background:linear-gradient(180deg,#f1ecff,#b8aadc);animation:none}
@keyframes dieidle{50%{transform:translateY(-5px) rotate(2deg)}}
.check-die em{font-style:normal;font-size:12.5px;color:var(--ink);padding:6px 14px;border-radius:999px;background:#0b100ecc;border:1px solid #cfae6655}
.check-diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(300px,86vw)}
.check-diffs button{padding:8px 4px;border-radius:14px;background:#0b100ecc;border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;gap:2px}
.check-diffs button b{font:500 20px/1 var(--serif);color:var(--muted)}.check-diffs button span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.check-diffs button.on{border-color:var(--gold);box-shadow:0 0 16px #cfae6655}.check-diffs button.on b{color:var(--gold2)}.check-diffs button.on span{color:var(--gold)}
.check-bonus{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(300px,86vw)}
.bcard{padding:10px 4px;border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,#2a2142,#141026);border:1px solid #9f8ccc44;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .15s}
.bcard.bad{background:linear-gradient(180deg,#3a1f1c,#1a0e0c);border-color:#c9584a44}
.bcard b{font:700 18px/1 var(--sans);color:var(--san2)}.bcard.bad b{color:var(--blood2)}.bcard span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bcard.on{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 0 18px #cfae6666}
.bcard:disabled{opacity:.35}
.check-total{display:flex;justify-content:space-between;width:min(300px,86vw);font-size:13px;color:var(--muted);padding:6px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.check-total b{color:var(--gold2)}
.check-hint{font-size:12px;color:var(--dim);max-width:320px;line-height:1.4;margin-top:auto}

/* ---------- combate: HUD vira de cor; splashes; reações nos tokens ---------- */
.splash{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;animation:splash 2.2s forwards;text-align:center}
.splash b{font:700 44px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.splash span{font:italic 500 18px var(--serif);color:var(--muted)}
.splash.battle{background:radial-gradient(circle,#4a1612cc,#0b0605f2)}.splash.battle b{color:#ff8a7a;text-shadow:0 0 30px #c9584a,0 0 60px #7a1f17}
.splash.calm{background:radial-gradient(circle,#1d3a26cc,#070b09f2)}.splash.calm b{color:#c2e2a4;text-shadow:0 0 24px #9fbf86}
.splash.scene{background:radial-gradient(circle,#1b2a35cc,#060908f4)}.splash.scene b{color:var(--gold2);text-shadow:0 0 30px var(--gold);font-family:var(--serif);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:40px}
@keyframes splash{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
.splash b{animation:verdict .6s cubic-bezier(.2,1.6,.3,1) both}
body.battle{--gold:#d98b7a;--gold2:#ffb3a8}
body.battle .nav.modes{background:linear-gradient(#2a1412ee,#120807f8);border-top-color:#c9584a66}
body.battle .wedge[data-w=combat] path{fill:#3a1c18;stroke:#c9584a88}
body.battle .gem-core{border-color:#c9584a88;box-shadow:inset 0 0 24px #c9584a44,0 10px 30px #000a}
.battle-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:14px;background:linear-gradient(90deg,#4a1612,#1a0b0a);border:1px solid #c9584a66;animation:enter .3s}
.battle-bar span{font-size:11px;letter-spacing:.18em;color:#ff8a7a;display:flex;align-items:center;gap:6px}.battle-bar span svg{width:14px;height:14px}
.battle-bar strong{font-family:var(--serif);font-weight:500;font-size:16px}
.battle-bar.me{animation:turnme 1.4s infinite alternate}
.sv-tok.hurt{animation:tokhurt .7s}.sv-tok.healed{animation:tokheal .7s}
@keyframes tokhurt{20%{transform:translateX(-6px);filter:drop-shadow(0 0 16px #c9584a)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}100%{transform:none}}
@keyframes tokheal{30%{transform:scale(1.15);filter:drop-shadow(0 0 16px #9fbf86)}100%{transform:none}}
.dmgnum{position:absolute;left:50%;top:-10px;transform:translateX(-50%);font:700 22px var(--sans);text-shadow:0 2px 8px #000;animation:dmgnum 1.2s forwards;pointer-events:none}
.dmgnum.bad{color:#ff6b5c}.dmgnum.good{color:#c2e2a4}
@keyframes dmgnum{to{transform:translate(-50%,-50px);opacity:0}}
.sv-tok{animation:tokpop .4s cubic-bezier(.2,1.4,.3,1) both}
@keyframes tokpop{from{transform:scale(.4);opacity:0}}