/* A coloured resin die, with inset pips and a soft landing. */
.roll{min-height:116px;padding:18px;gap:20px;background:linear-gradient(135deg,#34435e,#23304a);color:#f3f6fd;border:1px solid #495976;box-shadow:inset 0 1px 0 #ffffff12,0 6px 18px #0002;perspective:500px}
.roll:hover:enabled{background:linear-gradient(135deg,#405371,#2b3954);transform:translateY(-2px)}
.roll:disabled{background:linear-gradient(135deg,#27354d,#1e2a40);color:#c2cde1;border-color:#35445f}
.dice-stage{position:relative;display:grid;place-items:center;width:78px;height:78px;flex-shrink:0;perspective:350px}
.dice-stage::after{content:"";position:absolute;width:52px;height:12px;border-radius:50%;background:#0007;filter:blur(5px);bottom:0;z-index:0}
.dice{position:relative;z-index:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:5px;padding:12px;width:64px;height:64px;border-radius:16px;direction:ltr;background:linear-gradient(145deg,color-mix(in srgb,var(--active),white 48%) 0%,color-mix(in srgb,var(--active),white 16%) 28%,var(--active) 65%,color-mix(in srgb,var(--active),#142039 28%) 100%);border:1px solid color-mix(in srgb,var(--active),white 65%);box-shadow:inset 2px 2px 3px #ffffff75,inset -3px -4px 5px #0002,0 5px 0 color-mix(in srgb,var(--active),#10192b 42%),0 9px 13px #0004;transform:rotate(-7deg);font-size:initial;line-height:1}
.dice::before{content:"";position:absolute;inset:3px 5px auto;height:24px;border-radius:12px 12px 20px 20px;background:linear-gradient(#ffffff42,#ffffff00);pointer-events:none}
.pip{visibility:hidden;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 65% 75%,#34405a,#10192b 80%);box-shadow:inset 0 1px 2px #0009,0 1px 0 #ffffff55;position:relative}
.dice[data-value="1"] .pip:nth-child(5),
.dice[data-value="2"] .pip:nth-child(1),.dice[data-value="2"] .pip:nth-child(9),
.dice[data-value="3"] .pip:nth-child(1),.dice[data-value="3"] .pip:nth-child(5),.dice[data-value="3"] .pip:nth-child(9),
.dice[data-value="4"] .pip:nth-child(1),.dice[data-value="4"] .pip:nth-child(3),.dice[data-value="4"] .pip:nth-child(7),.dice[data-value="4"] .pip:nth-child(9),
.dice[data-value="5"] .pip:nth-child(1),.dice[data-value="5"] .pip:nth-child(3),.dice[data-value="5"] .pip:nth-child(5),.dice[data-value="5"] .pip:nth-child(7),.dice[data-value="5"] .pip:nth-child(9),
.dice[data-value="6"] .pip:nth-child(1),.dice[data-value="6"] .pip:nth-child(3),.dice[data-value="6"] .pip:nth-child(4),.dice[data-value="6"] .pip:nth-child(6),.dice[data-value="6"] .pip:nth-child(7),.dice[data-value="6"] .pip:nth-child(9){visibility:visible}
.rolling .dice{animation:dice-tumble 1.2s both}
.rolling .dice-stage::after{animation:dice-shadow 1.2s both}
@keyframes dice-tumble{0%{transform:translateY(0) rotate(-7deg)}18%{transform:translateY(-16px) rotateX(25deg) rotateY(-24deg) rotate(-55deg);animation-timing-function:ease-in}43%{transform:translateY(-7px) rotateX(-20deg) rotateY(30deg) rotate(105deg);animation-timing-function:ease-out}67%{transform:translateY(-11px) rotateX(15deg) rotateY(-15deg) rotate(245deg)}85%{transform:translateY(2px) rotateX(0) rotateY(0) rotate(365deg)}94%{transform:translateY(-3px) rotate(350deg)}100%{transform:translateY(0) rotate(353deg)}}
@keyframes dice-shadow{0%,100%{transform:scale(1);opacity:1}18%,67%{transform:scale(.7);opacity:.4}85%{transform:scale(1.1);opacity:.9}}
@media(max-width:680px){.roll{padding:10px;gap:9px;min-height:126px}.dice-stage{height:76px;width:76px}.dice{width:60px;height:60px;padding:11px;border-radius:15px}}
@media(prefers-reduced-motion:reduce){.rolling .dice,.rolling .dice-stage::after{animation:none}}
[hidden]{display:none!important}.power-meter{grid-column:1/-1;margin-top:17px}.power-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}.power-heading strong{font-size:24px;color:var(--text);font-variant-numeric:tabular-nums}.power-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;direction:ltr;margin-top:7px}.power-steps span{display:grid;place-items:center;min-height:36px;border-radius:8px;background:#26344c;color:#aab5cc;font-weight:bold}.power-steps .selected{background:linear-gradient(145deg,color-mix(in srgb,var(--active),white 30%),var(--active));color:#10192b;box-shadow:0 0 0 2px #ffffff60,0 3px 10px #0003}.power-meter p{font-size:12px;color:var(--muted);margin:10px 0 0}.charging .dice{animation:meter-die 1.4s ease-in-out infinite alternate}@keyframes meter-die{to{transform:translateY(-5px) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.charging .dice{animation:none}}

.power-gauge{height:22px;margin-top:10px;padding:3px;border-radius:20px;background:#101b30;overflow:hidden;direction:ltr;box-shadow:inset 0 2px 4px #0004}#power-fill{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,#5086ba,#50c9b1 55%,#f1c660);transition:width .1s linear;box-shadow:0 0 12px #7bdcb54a}.power-labels{display:flex;justify-content:space-between;direction:ltr;color:var(--muted);font-size:12px;margin-top:5px}.power-heading strong{font-size:16px}.dice[data-value="0"]::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:#172138;font:bold 32px/1 Arial,sans-serif;text-shadow:0 1px 0 #ffffff55}