:root{
  --bg:#0f0c1a; --bg2:#171326; --card:#1d1830; --card2:#251f3d; --line:#33294f; --line2:#473a6e;
  --ink:#efe9ff; --mut:#a79fc4; --dim:#756c93;
  --gold:#f6c152; --gold2:#c98526; --acc:#8b6cff; --acc2:#6246ea;
  --good:#46c28a; --bad:#ef5b64; --warn:#f5a524; --info:#4fa3ff;
  --r:14px; --r2:10px; --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom); --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nav:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{overflow:hidden;position:fixed;inset:0}
#app{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(1200px 600px at 50% -10%,#241a47 0%,transparent 60%),var(--bg)}
h1,h2,h3,h4{font-family:var(--serif);margin:0;letter-spacing:.2px}
h1{font-size:28px} h2{font-size:21px} h3{font-size:17px} h4{font-size:14px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mut);font-family:var(--sans);font-weight:700}
a{color:var(--gold)} p{margin:.4em 0}
button,input,select,textarea{font:inherit;color:inherit}
.boot{margin:auto;text-align:center;color:var(--mut)} .boot img{border-radius:22px;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
.hide{display:none!important} .grow{flex:1;min-width:0} .row{display:flex;gap:10px;align-items:center} .col{display:flex;flex-direction:column;gap:10px}
.wrap{flex-wrap:wrap} .center{text-align:center} .mut{color:var(--mut)} .dim{color:var(--dim)} .small{font-size:12.5px} .tiny{font-size:11px}
.gold{color:var(--gold)} .good{color:var(--good)} .bad{color:var(--bad)} .warn{color:var(--warn)} .serif{font-family:var(--serif)} .b{font-weight:700} .up{text-transform:uppercase;letter-spacing:1px}
.gap4{gap:4px}.gap6{gap:6px}.gap14{gap:14px}.mt{margin-top:12px}.mb{margin-bottom:12px}.sp{justify-content:space-between}.jc{justify-content:center}.ac{align-items:center}.as{align-items:flex-start}
.nowrap{white-space:nowrap}.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- screens */
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;padding:14px max(14px,var(--sal)) calc(var(--nav) + var(--sab) + 18px) max(14px,var(--sar))}
.scroll.nonav{padding-bottom:calc(var(--sab) + 24px)}
.page{max-width:760px;margin:0 auto;width:100%}
.page.wide{max-width:1100px}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 10px) max(14px,var(--sar)) 10px max(14px,var(--sal));border-bottom:1px solid var(--line);background:rgba(15,12,26,.85);backdrop-filter:blur(10px);position:relative;z-index:5;min-height:56px}
.topbar h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;font-size:18px;flex:none}
.iconbtn:active{transform:scale(.94)}
.iconbtn.on{background:var(--acc2);border-color:var(--acc)}

/* ---------- buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;font-weight:600;min-height:44px;transition:transform .08s,background .15s;user-select:none}
.btn:active{transform:scale(.97)} .btn:disabled{opacity:.45;pointer-events:none}
.btn.pri{background:linear-gradient(180deg,#9d83ff,#6f50f5);border-color:#a791ff;box-shadow:0 6px 18px -6px #6f50f5aa}
.btn.gold{background:linear-gradient(180deg,#ffd57a,#e0a02f);color:#2a1c05;border-color:#ffe3a3;box-shadow:0 6px 18px -6px #e0a02faa}
.btn.bad{background:#4a1a22;border-color:#8b2c38;color:#ffc9ce} .btn.ghost{background:transparent} .btn.sm{padding:6px 11px;min-height:34px;font-size:13.5px;border-radius:10px} .btn.xs{padding:3px 9px;min-height:26px;font-size:12px;border-radius:8px}
.btn.block{display:flex;width:100%}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line2);background:#120e22;outline:none;min-height:44px;appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px #8b6cff33}
textarea{min-height:90px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.9px;font-weight:700}
label.f>input,label.f>select,label.f>textarea{text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;color:var(--ink)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--acc)}
input[type=range]{width:100%;accent-color:var(--acc)}
.num{width:64px!important;text-align:center;padding:8px 4px!important;min-height:38px!important}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.tap{cursor:pointer} .card.tap:active{background:var(--card2)}
.card.glow{border-color:var(--gold2);box-shadow:0 0 0 1px #f6c15233,0 10px 30px -14px #f6c15266}
.card h3{margin-bottom:6px}
.grid{display:grid;gap:10px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)}
.auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media(max-width:420px){.g6{grid-template-columns:repeat(3,1fr)}}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:var(--card2);border:1px solid var(--line2);font-size:12px;color:var(--mut);white-space:nowrap}
.chip.gold{color:var(--gold);border-color:#f6c15266}.chip.good{color:var(--good);border-color:#46c28a55}.chip.bad{color:var(--bad);border-color:#ef5b6455}.chip.acc{color:#c9bcff;border-color:#8b6cff77}
.chip.sel{background:var(--acc2);color:#fff;border-color:var(--acc)}
.chip.x{cursor:pointer}
.pill{display:inline-block;padding:1px 7px;border-radius:6px;background:#ffffff14;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.badge{min-width:20px;height:20px;border-radius:10px;background:var(--bad);display:inline-grid;place-items:center;font-size:11px;font-weight:800;padding:0 5px}
.empty{padding:34px 16px;text-align:center;color:var(--mut)}
.empty .big{font-size:42px;display:block;margin-bottom:6px}
.divider{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;margin:16px 0 8px}.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed #ffffff12}.kv:last-child{border:0}
.seg{display:flex;background:#120e22;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;overflow:auto}
.seg>button{flex:1;border:0;background:transparent;padding:8px 12px;border-radius:9px;color:var(--mut);cursor:pointer;font-weight:600;white-space:nowrap;min-height:36px}
.seg>button.on{background:var(--acc2);color:#fff}

/* ---------- auth */
.auth{margin:auto;width:min(420px,100%);padding:24px 18px calc(var(--sab) + 24px)}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
.logo img{width:92px;height:92px;border-radius:24px;box-shadow:0 14px 40px -10px #f6c15277}
.logo h1{font-size:36px;background:linear-gradient(180deg,#fff,#d9cdff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- bottom nav */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav) + var(--sab));padding:6px max(8px,var(--sar)) var(--sab) max(8px,var(--sal));background:rgba(18,14,32,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;z-index:20}
.nav button{flex:1;border:0;background:transparent;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:.4px;cursor:pointer;border-radius:12px;position:relative}
.nav button .ic{font-size:21px;line-height:1}
.nav button.on{color:var(--gold)} .nav button.on .ic{filter:drop-shadow(0 0 8px #f6c15288)}
.nav .dot{position:absolute;top:6px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid #120e20}
.fab{position:absolute;right:max(14px,var(--sar));bottom:calc(var(--nav) + var(--sab) + 14px);width:64px;height:64px;border-radius:50%;border:2px solid #ffe3a3;background:radial-gradient(circle at 30% 25%,#ffd98a,#d8921f);color:#2a1c05;font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 12px 30px -8px #f6c152aa,0 0 0 6px #f6c15222;cursor:pointer;z-index:25;touch-action:manipulation}
.fab:active{transform:scale(.92) rotate(-12deg)} .fab svg{width:34px;height:34px}

/* ---------- modal / sheet */
#layer-modal{position:fixed;inset:0;z-index:100;pointer-events:none}
.scrim{position:absolute;inset:0;background:rgba(5,3,12,.66);backdrop-filter:blur(3px);pointer-events:auto;animation:fade .18s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;background:var(--bg2);border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;pointer-events:auto;animation:up .24s cubic-bezier(.2,.9,.3,1);margin:0 auto;max-width:720px;box-shadow:0 -20px 60px -20px #000}
.sheet.full{height:96%;max-height:96%} .sheet.center{top:50%;bottom:auto;transform:translateY(-50%);border-radius:20px;border-bottom:1px solid var(--line2);left:12px;right:12px;animation:pop .2s}
.sheet .grab{width:42px;height:4px;border-radius:2px;background:var(--line2);margin:8px auto 0;flex:none}
.sheet header{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;flex:none}
.sheet header h3{flex:1;font-size:18px}
.sheet .body{overflow:auto;padding:4px 16px 16px;flex:1;-webkit-overflow-scrolling:touch}
.sheet footer{padding:10px 16px calc(var(--sab) + 12px);border-top:1px solid var(--line);display:flex;gap:10px;flex:none}
@keyframes up{from{transform:translateY(40px);opacity:0}} @keyframes fade{from{opacity:0}} @keyframes pop{from{transform:translateY(-46%) scale(.96);opacity:0}}
#layer-toast{position:fixed;left:0;right:0;top:calc(var(--sat) + 10px);z-index:200;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{background:#2b2150;border:1px solid var(--line2);padding:10px 16px;border-radius:14px;box-shadow:0 12px 30px -10px #000;animation:drop .25s;max-width:min(92vw,460px);pointer-events:auto;font-weight:600}
.toast.bad{background:#4a1a22;border-color:#8b2c38}.toast.good{background:#143a2b;border-color:#2b7a58}.toast.gold{background:#3d2b0a;border-color:#a8741b;color:#ffe3a3}
@keyframes drop{from{transform:translateY(-20px);opacity:0}}

/* ---------- list rows */
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid #ffffff10;cursor:pointer;min-height:54px}
.item:active{background:#ffffff08}.item .t{font-weight:600}.item .s{font-size:12.5px;color:var(--mut)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--card2);border:2px solid var(--line2);display:grid;place-items:center;font-family:var(--serif);font-weight:700;flex:none;overflow:hidden;background-size:cover;background-position:center}
.avatar.lg{width:64px;height:64px;font-size:24px}
.search{position:sticky;top:0;z-index:3;padding:6px 0 8px;background:var(--bg2)}

/* ---------- creator */
.steps{display:flex;gap:5px;padding:10px 14px 6px;flex:none}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}.steps i.done{background:var(--acc)}.steps i.cur{background:var(--gold)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);cursor:pointer;text-align:left;width:100%}
.opt.on{border-color:var(--gold);background:#2a2140;box-shadow:inset 0 0 0 1px #f6c15244}.opt .t{font-weight:700}
.opt:active{transform:scale(.99)}
.abil-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:8px 4px;text-align:center;min-width:0}
.abil-box .n{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--mut)}
.abil-box .m{font-size:24px;font-family:var(--serif);font-weight:700}
.abil-box .v{font-size:12px;color:var(--dim)}
.stepper{display:flex;align-items:center;justify-content:center;gap:6px}
.stepper button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);font-size:18px;cursor:pointer;line-height:1}
.stepper b{min-width:28px;text-align:center;font-size:18px}

/* ---------- character sheet */
.shead{display:flex;gap:12px;align-items:center}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:9px 6px;text-align:center;min-width:0}
.stat .l{font-size:10.5px;letter-spacing:1.1px;font-weight:800;color:var(--mut);text-transform:uppercase}
.stat .v{font-size:24px;font-family:var(--serif);font-weight:700;line-height:1.1}
.stat.tap{cursor:pointer}.stat.tap:active{transform:scale(.96);background:var(--card2)}
.hpbar{height:12px;border-radius:7px;background:#00000066;overflow:hidden;border:1px solid var(--line)}
.hpbar>i{display:block;height:100%;background:linear-gradient(90deg,#2fb57a,#5fe0a3);transition:width .4s,background .4s}
.hpbar.mid>i{background:linear-gradient(90deg,#d9941a,#f5c24c)}.hpbar.low>i{background:linear-gradient(90deg,#c22d3b,#ef5b64)}
.skill{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #ffffff0d;cursor:pointer;min-height:44px}
.skill:active{background:#ffffff0a}.skill .bn{min-width:40px;text-align:center;font-weight:800;font-family:var(--serif);font-size:17px;background:#120e22;border:1px solid var(--line2);border-radius:9px;padding:3px 0}
.prof{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none;display:inline-block}.prof.p1{background:var(--gold);border-color:var(--gold)}.prof.p2{background:var(--gold);border-color:#fff;box-shadow:0 0 0 2px var(--gold2)}
.prof.t{background:#6ee7b7;border-color:#6ee7b7}.prof.e{background:#60a5fa;border-color:#60a5fa}.prof.m{background:#c084fc;border-color:#c084fc}.prof.l{background:#fb923c;border-color:#fb923c}
.tabs{display:flex;gap:4px;overflow:auto;padding:0 2px 10px;scrollbar-width:none;position:sticky;top:0;z-index:4;background:linear-gradient(var(--bg) 70%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:1px solid var(--line);background:var(--card);color:var(--mut);padding:8px 14px;border-radius:99px;font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;min-height:36px}
.tabs button.on{background:var(--acc2);color:#fff;border-color:var(--acc)}
.slotrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.slot{width:26px;height:26px;border-radius:8px;border:2px solid var(--acc);background:var(--acc);cursor:pointer;transition:all .15s}.slot.used{background:transparent;border-color:var(--line2)}
.atk{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.atk .nm{font-weight:700}.atk .rbtn{padding:8px 12px;min-width:56px}
.rich{font-size:14px;color:#ddd5f5;line-height:1.5}.rich p{margin:.55em 0}.rich b,.rich strong{color:#fff}.rich ul{padding-left:18px}.rich hr{margin:8px 0}
.cond{display:flex;flex-wrap:wrap;gap:6px}
.dying{animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px #ef5b6433}}

/* ---------- map */
.mapwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#0a0814;touch-action:none}
.mapwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.maphud{position:absolute;left:0;right:0;top:0;padding:calc(var(--sat) + 8px) 10px 0;display:flex;gap:8px;align-items:flex-start;pointer-events:none;z-index:3}
.maphud>*{pointer-events:auto}
.mapbar{position:absolute;left:10px;bottom:calc(var(--nav) + var(--sab) + 12px);display:flex;flex-direction:column;gap:8px;z-index:3}
.mapbar .iconbtn{background:#1d1830ee;backdrop-filter:blur(6px)}
.tray{position:absolute;left:0;right:0;bottom:calc(var(--nav) + var(--sab));background:linear-gradient(transparent,#0a0814ee 40%);padding:30px 10px 8px;z-index:2;pointer-events:none}
.tray>*{pointer-events:auto}
.turnstrip{display:flex;gap:6px;overflow:auto;scrollbar-width:none;padding:2px}.turnstrip::-webkit-scrollbar{display:none}
.tchip{flex:none;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1d1830f0;border:1px solid var(--line2);font-size:12px;font-weight:700}
.tchip.cur{background:linear-gradient(180deg,#ffd57a,#e0a02f);color:#2a1c05;border-color:#ffe3a3;transform:scale(1.06)}
.tchip .tav{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff3;display:grid;place-items:center;font-size:11px;color:#fff}
.tokpanel{position:absolute;right:10px;top:calc(var(--sat) + 56px);width:min(300px,calc(100% - 20px));background:#1d1830f2;backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:var(--r);padding:12px;z-index:6;box-shadow:0 18px 40px -14px #000}
.ping{position:absolute;pointer-events:none;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--gold);animation:ping 1.1s ease-out forwards}
@keyframes ping{from{transform:scale(.3);opacity:1}to{transform:scale(2.6);opacity:0}}

/* ---------- combat */
.crow{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line);margin-bottom:8px;position:relative}
.crow.cur{border-color:var(--gold);background:linear-gradient(90deg,#3b2c0f55,var(--card) 60%);box-shadow:0 0 0 1px #f6c15244,0 10px 26px -14px #f6c152}
.crow .init{width:46px;height:46px;border-radius:12px;background:#120e22;border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:20px;flex:none}
.crow.dead{opacity:.5}.crow.dead .nm{text-decoration:line-through}

/* ---------- roll log */
.roll{display:flex;gap:12px;padding:11px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line);margin-bottom:8px;align-items:center}
.roll .tot{min-width:58px;height:58px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:26px;background:#120e22;border:1px solid var(--line2);flex:none}
.roll.crit .tot{background:linear-gradient(180deg,#ffd57a,#e0a02f);color:#2a1c05;border-color:#fff3c4;box-shadow:0 0 22px #f6c15277}
.roll.fumble .tot{background:#4a1a22;color:#ffc9ce;border-color:#8b2c38}
.roll.hidden{border-style:dashed;opacity:.8}
.dchip{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:7px;background:#ffffff14;font-weight:800;font-size:13px;margin:0 2px 2px 0}
.dchip.drop{opacity:.35;text-decoration:line-through}.dchip.max{background:#f6c15233;color:var(--gold)}.dchip.min{background:#ef5b6433;color:var(--bad)}

/* ---------- dice overlay */
#dice-layer{position:fixed;inset:0;z-index:150;pointer-events:none;display:none}
#dice-layer.on{display:block;pointer-events:auto}
#dice-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dice-result{position:absolute;left:0;right:0;top:12%;text-align:center;pointer-events:none;opacity:0;transform:scale(.6)}
.dice-result.show{animation:resultin .5s cubic-bezier(.2,1.6,.4,1) forwards}
.dice-result .who{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#d9cdff;text-shadow:0 2px 10px #000}
.dice-result .label{font-family:var(--serif);font-size:22px;text-shadow:0 2px 12px #000}
.dice-result .big{font-family:var(--serif);font-size:96px;font-weight:800;line-height:1;text-shadow:0 6px 30px #000,0 0 40px #8b6cff88}
.dice-result .brk{font-size:16px;color:#e6defc;text-shadow:0 2px 8px #000}
.dice-result.crit .big{color:var(--gold);text-shadow:0 0 50px #f6c152,0 6px 30px #000}.dice-result.fumble .big{color:var(--bad);text-shadow:0 0 50px #ef5b64,0 6px 30px #000}
.dice-result .verdict{display:inline-block;margin-top:6px;padding:4px 14px;border-radius:99px;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:13px}
.verdict.ok{background:#143a2b;color:#8cf0c0;border:1px solid #2b7a58}.verdict.no{background:#4a1a22;color:#ffc9ce;border:1px solid #8b2c38}.verdict.crit{background:#3d2b0a;color:var(--gold);border:1px solid #a8741b}
@keyframes resultin{to{opacity:1;transform:scale(1)}}
.dice-hint{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 26px);text-align:center;color:#d9cdff;font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.7;pointer-events:none}
.flash{position:fixed;inset:0;pointer-events:none;z-index:149;opacity:0}
.flash.gold{background:radial-gradient(circle at 50% 40%,#f6c152aa,transparent 60%);animation:flash 1s}.flash.red{background:radial-gradient(circle at 50% 40%,#ef5b64aa,transparent 65%);animation:flash .8s}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.shake{animation:shake .5s}@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- roller sheet */
.diebtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:var(--card);border:1px solid var(--line2);cursor:pointer;font-weight:800;min-height:62px;position:relative;touch-action:manipulation}
.diebtn:active{transform:scale(.94);background:var(--card2)} .diebtn svg{width:30px;height:30px;color:var(--gold)}
.diebtn .cnt{position:absolute;top:2px;right:6px;color:var(--gold);font-size:14px}
.tray-formula{font-family:var(--serif);font-size:24px;min-height:36px;text-align:center;padding:8px;background:#120e22;border-radius:12px;border:1px dashed var(--line2);word-break:break-all}

/* ---------- misc */
.statblock{border:1px solid var(--line2);border-radius:var(--r);background:linear-gradient(180deg,#2a1d20,#201621);overflow:hidden}
.statblock .sbh{padding:10px 14px;background:#4b1d28;border-bottom:2px solid #9b2c3c}
.statblock .sbb{padding:10px 14px}
.statblock .sbl{color:#ffb4bd;font-weight:700}
.sbline{padding:2px 0;font-size:14px}
.sbdiv{height:2px;background:linear-gradient(90deg,#9b2c3c,transparent);margin:8px 0}
.actname{font-weight:800;font-style:italic;color:#ffe3e6}
.tooltip{position:fixed;z-index:300;background:#2b2150;border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:12px;pointer-events:none}
.upload{display:grid;place-items:center;border:2px dashed var(--line2);border-radius:var(--r);padding:18px;color:var(--mut);cursor:pointer;text-align:center}
.codebox{font-family:ui-monospace,Menlo,monospace;font-size:26px;letter-spacing:6px;text-align:center;padding:12px;background:#120e22;border:1px dashed var(--gold2);border-radius:12px;color:var(--gold);user-select:all}
.warnbox{background:#3d2b0a;border:1px solid #a8741b;color:#ffe3a3;padding:10px 12px;border-radius:12px;font-size:13px}
.infobox{background:#16213f;border:1px solid #2c4584;color:#c8dbff;padding:10px 12px;border-radius:12px;font-size:13px}
.sticky-foot{position:sticky;bottom:0;padding:12px 0 2px;background:linear-gradient(transparent,var(--bg) 35%);display:flex;gap:10px;z-index:3}
@media(min-width:900px){
  .nav{left:50%;right:auto;width:min(560px,100%);transform:translateX(-50%);border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}