.roll-feedback-layer{position:fixed;inset:0;z-index:80;pointer-events:none;isolation:isolate}
.roll-flash{--roll-color:var(--gold);position:absolute;left:50%;top:47%;width:min(490px,calc(100vw - 34px));transform:translate(calc(-50% + var(--roll-x)),calc(-50% + var(--roll-y))) scale(var(--roll-scale,1));transition:transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.roll-flash-content{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 24px 20px;color:var(--text);max-height:calc(100dvh - 60px);overflow-x:hidden;overflow-y:auto;pointer-events:auto;animation:roll-stage-enter .55s cubic-bezier(.16,1.3,.35,1) both;text-align:center;isolation:isolate;scrollbar-width:thin}
.roll-flash-content:before{content:'';position:absolute;inset:2% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--panel) 98%,transparent) 12%,color-mix(in srgb,var(--panel) 90%,transparent) 43%,transparent 73%);filter:blur(10px)}
.roll-flash header{position:relative;z-index:2;display:flex;justify-content:center;width:100%;margin-bottom:10px}
.roll-flash-author{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:100%}
.roll-flash-author strong{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;background:var(--panel);border:1px solid var(--line);border-radius:30px;color:var(--text);font:700 13px/1.3 Arial,sans-serif;overflow-wrap:anywhere;box-shadow:0 5px 20px var(--overlay)}
.roll-author-mark{color:var(--roll-color);font-size:17px;line-height:1}
.roll-flash-author>span{font:9px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:1.7px;color:var(--muted);text-shadow:0 1px 5px var(--panel)}
.roll-flash-comment{font:700 17px/1.4 Arial,sans-serif;color:var(--text);margin:0 0 5px;max-width:100%;max-height:72px;overflow:auto;overflow-wrap:anywhere;text-shadow:0 1px 2px var(--bg),0 0 15px var(--panel)}
.roll-flash-total{position:relative;flex:0 0 144px;width:160px;height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:7px 0 3px;color:var(--roll-color);isolation:isolate}
.roll-flash-total:before,.roll-flash-total:after{content:'';position:absolute;inset:8px 16px;border:1px solid color-mix(in srgb,var(--roll-color) 38%,transparent);border-radius:50%;z-index:-1;pointer-events:none}
.roll-flash-total:before{inset:0 8px;border-style:dashed;opacity:.5;animation:roll-orbit 16s linear infinite}
.roll-flash-total:after{background:radial-gradient(circle,color-mix(in srgb,var(--roll-color) 17%,var(--panel)),transparent 72%);box-shadow:0 0 30px var(--soft-accent);animation:roll-ring-impact .8s ease-out both}
.roll-total-sigil{position:absolute;inset:12px 20px;width:120px;height:120px;z-index:-1;fill:none;stroke:var(--roll-color);stroke-width:.6;opacity:.23}
.roll-flash-total b{font:900 82px/.95 Arial,sans-serif;letter-spacing:-5px;padding-right:5px;text-shadow:0 3px 0 var(--input),0 0 26px color-mix(in srgb,var(--roll-color) 35%,transparent);animation:roll-total-impact .7s cubic-bezier(.15,1.4,.3,1) both}
.roll-flash-total small{font:700 9px/1.5 Arial,sans-serif;letter-spacing:3.5px;color:var(--roll-color);margin-top:8px;margin-left:3px}
.roll-flash-dice{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px;max-width:100%;max-height:180px;overflow:auto;padding:8px 6px 12px;scrollbar-width:thin}
.roll-flash-die{--die-color:var(--roll-color);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 63px;width:63px;height:71px;color:var(--text);filter:drop-shadow(0 5px 3px var(--overlay));animation:roll-die-throw .8s cubic-bezier(.18,1.3,.35,1) both;animation-delay:calc(var(--die-index)*45ms);isolation:isolate}
.roll-flash-die svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;fill:var(--raised);stroke:var(--die-color);stroke-width:1.15;stroke-linejoin:round}
.roll-flash-die b{font:800 23px/1.2 Arial,sans-serif;color:var(--text);text-shadow:0 2px 2px var(--bg)}
.roll-flash-die small{font:700 9px/1.4 Arial,sans-serif;color:var(--die-color);margin-top:1px}
.roll-flash-die.die-maximum{--die-color:var(--green)}.roll-flash-die.die-maximum svg{fill:var(--success-bg)}
.roll-flash-die.die-negative{--die-color:var(--danger)}.roll-flash-die.die-negative svg{fill:var(--danger-bg)}
.roll-flash-bonus{display:flex;flex-direction:column;align-items:center;gap:3px;margin-left:8px;padding:6px 0;color:var(--roll-color)}
.roll-flash-bonus small{font:9px Arial,sans-serif;color:var(--muted)}.roll-flash-bonus b{font:800 22px Arial,sans-serif}
.roll-flash footer{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;font:9px/1.4 Arial,sans-serif;color:var(--muted);text-shadow:0 1px 5px var(--panel)}
.roll-flash footer code{font:11px/1.4 monospace;letter-spacing:.5px;color:var(--text);overflow-wrap:anywhere;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--panel) 85%,transparent)}
.roll-flash footer>span{font-size:8px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.roll-flash-lifetime{width:62px;height:2px;margin-top:9px;background:var(--roll-color);opacity:.45;transform-origin:center;animation:roll-lifetime var(--roll-duration) linear both}
.roll-flash.natural-twenty{--roll-color:var(--green)}.roll-flash.natural-twenty .roll-flash-total:after{box-shadow:0 0 50px color-mix(in srgb,var(--green) 35%,transparent)}
.roll-flash.natural-one .roll-flash-author>span{color:var(--danger)}
.roll-flash-sparks{position:absolute;inset:0;pointer-events:none}
.roll-flash-sparks i{position:absolute;left:50%;top:47%;width:10px;height:3px;border-radius:2px;background:var(--roll-color);animation:roll-spark .9s ease-out both;transform:rotate(calc(var(--spark)*45deg))}
.roll-flash.leaving{transition:none}.roll-flash.leaving .roll-flash-content{animation:roll-stage-leave .2s ease-in both}
@keyframes roll-stage-enter{0%{opacity:0;transform:translateY(30px) scale(.7)}65%{opacity:1;transform:translateY(-5px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes roll-stage-leave{to{opacity:0;transform:scale(1.08);filter:blur(5px)}}
@keyframes roll-total-impact{0%,12%{opacity:0;transform:scale(1.7) rotate(-8deg)}55%{opacity:1;transform:scale(.9) rotate(2deg)}75%{transform:scale(1.08) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes roll-die-throw{0%{opacity:0;transform:translate(calc((var(--die-index) - 2)*28px),-65px) rotate(-70deg) scale(.5)}60%{opacity:1;transform:translate(0,5px) rotate(7deg) scale(1.08)}80%{transform:translate(0,-3px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes roll-ring-impact{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes roll-orbit{to{transform:rotate(360deg)}}
@keyframes roll-lifetime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes roll-spark{0%{opacity:0;transform:rotate(calc(var(--spark)*45deg)) translateX(30px) scale(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--spark)*45deg)) translateX(245px) scale(0)}}
@media(max-width:520px){.roll-flash{width:calc(100vw - 22px)}.roll-flash-content{padding:12px 10px}.roll-flash-total{flex-basis:122px;height:122px;width:138px}.roll-total-sigil{width:100px;height:100px;inset:11px 19px}.roll-flash-total b{font-size:68px}.roll-flash-die{flex-basis:50px;width:50px;height:58px}.roll-flash-die b{font-size:20px}.roll-flash-comment{font-size:15px}.roll-flash-dice{max-height:140px;gap:1px}}
@media(prefers-reduced-motion:reduce){.roll-flash{transition:none}.roll-flash-content,.roll-flash-total b,.roll-flash-total:before,.roll-flash-total:after,.roll-flash-die,.roll-flash-sparks i,.roll-flash-lifetime,.resource-trail,.resource-change,.resource-track.resource-loss,.resource-track.resource-gain{animation:none}.roll-flash-sparks,.resource-change{display:none}.roll-flash.leaving .roll-flash-content{animation:roll-stage-leave .1s linear both}}

.resource-track{position:relative}.resource-track>i{position:relative;z-index:1}
.resource-trail{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:var(--danger);opacity:.6;animation:resource-trail-fade .7s ease-out both}
.resource-track.resource-loss{animation:resource-loss-glow .65s ease-out}.resource-track.resource-gain{animation:resource-gain-glow .65s ease-out}
.player-resource>.resource-change{position:absolute;right:0;top:-13px;z-index:3;width:auto;min-width:20px;font:bold 11px/1.2 Arial,sans-serif;pointer-events:none;animation:resource-change-float .85s ease-out both;text-shadow:0 1px 3px var(--bg)}
.resource-change.loss{color:var(--danger)}.resource-change.gain{color:var(--green)}
@keyframes resource-trail-fade{0%,20%{opacity:.6}100%{opacity:0}}
@keyframes resource-change-float{0%{opacity:0;transform:translateY(5px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes resource-loss-glow{0%{box-shadow:0 0 8px var(--danger)}100%{box-shadow:none}}
@keyframes resource-gain-glow{0%{box-shadow:0 0 8px var(--green)}100%{box-shadow:none}}