/* ============ DM Tavern — dice that roll across the screen ============ */
.dice-throw { position: fixed; z-index: 160; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .45s, transform .45s; }
.dice-throw.out { opacity: 0; transform: translateY(-14px) scale(.96); }
.dt-dice { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 320px; }
.dt-die { position: relative; width: 58px; height: 58px; display: grid; place-items: center; animation: dieThrow .95s cubic-bezier(.25,.9,.35,1) calc(var(--i) * 60ms) backwards; }
.dt-die svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.dt-die svg > :not(.edge) { fill: #5a1410; stroke: #d4b06a; stroke-width: 3; stroke-linejoin: round; }
.dt-die svg .edge { fill: none; stroke: rgba(212,176,106,.55); stroke-width: 1.6; stroke-linejoin: round; }
.dt-die b { position: relative; z-index: 1; font: 700 20px/1 var(--display); color: #fff3d6; text-shadow: 0 1px 2px #000; }
.dt-die.d4 b { margin-top: 14px; font-size: 17px; }
.dt-die.d6 svg > rect { fill: #f2e6cc; stroke: #8a6a3a; } .dt-die.d6 b { color: #3a1410; text-shadow: none; }
@keyframes dieThrow {
  0% { transform: translate(var(--fx), var(--fy)) rotate(var(--rot)) scale(.5); opacity: 0; }
  12% { opacity: 1; }
  65% { transform: translate(0, 0) rotate(calc(var(--rot) * -0.06)) scale(1.06); }
  78% { transform: translate(0, -14px) rotate(4deg) scale(1); }
  90% { transform: translate(0, 0) rotate(-2deg); }
  100% { transform: none; }
}
.dice-throw.dt-landed .dt-die.dropped { opacity: .4; filter: grayscale(.7); transition: opacity .3s .2s; }
.dt-more { align-self: center; font-weight: 700; color: #ffe39a; text-shadow: 0 1px 3px #000; }
.dt-label { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(14,12,13,.92); border: 1px solid var(--border-2, #3a3335);
  box-shadow: 0 8px 20px rgba(0,0,0,.5); font-size: 13.5px; color: var(--muted, #b8ada0); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.dt-label b { color: var(--ink, #f3e8d2); } .dt-label i { color: var(--dim); }
.dt-label strong { margin-left: 4px; font: 700 20px/1 var(--display); color: #ffe39a; }
.dice-throw.dt-landed .dt-label { opacity: 1; transform: none; }
.dt-burst { position: absolute; left: 50%; top: 29px; width: 0; height: 0; }


/* ---------- natural 20 / natural 1: shared parts (each look sets its colours with --nat, --glow, --ray) ---------- */
.dice-throw { --nat: #ffe39a; --nat-sh: rgba(255,190,60,.9); --glow: rgba(255,200,80,.9); --ray: rgba(255,220,120,.45); --nat1: #ff6a5a; --glow1: rgba(220,40,20,.7); }
.dt-nat { font: 700 26px/1 var(--display); letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: scale(.4); }
.dt-flavor { margin-top: -4px; font: italic 500 14px/1.2 var(--prose); color: var(--muted); text-shadow: 0 1px 3px #000; white-space: nowrap; opacity: 0; transition: opacity .4s .35s; }
.dice-throw.dt-n20 .dt-flavor, .dice-throw.dt-n1 .dt-flavor { opacity: 1; }
.dice-throw.dt-n20 .dt-nat { color: var(--nat); text-shadow: 0 0 14px var(--nat-sh), 0 3px 0 rgba(0,0,0,.7); animation: natPop .7s cubic-bezier(.2,1.6,.4,1) forwards; }
.dice-throw.dt-n20 .dt-die:not(.dropped) { animation: none; filter: drop-shadow(0 0 16px var(--glow)); }
.dice-throw.dt-n20 .dt-burst::before { content: ""; position: absolute; width: 360px; height: 360px; left: -180px; top: -180px; border-radius: 50%;
  background: repeating-conic-gradient(var(--ray) 0 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 15%, transparent 100%); mask: radial-gradient(circle closest-side, #000 15%, transparent 100%);
  animation: natRays 3s ease-out forwards; }
@keyframes natRays { 0% { transform: scale(.2) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.1) rotate(60deg); opacity: 0; } }
@keyframes natPop { to { opacity: 1; transform: scale(1); } }
.dice-throw.dt-n1 .dt-nat { color: var(--nat1); text-shadow: 0 0 10px var(--glow1), 0 2px 0 rgba(0,0,0,.8); animation: natPop .5s ease-out forwards; }
.dice-throw.dt-n1 .dt-die:not(.dropped) { filter: drop-shadow(0 0 12px var(--glow1)); }
.dice-throw.dt-n1 .dt-dice { animation: natShudder .45s ease-in-out; }
.dice-throw.dt-n1 .dt-burst::before { content: ""; position: absolute; width: 260px; height: 260px; left: -130px; top: -130px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow1), transparent 65%); opacity: .6; animation: natRays 1.6s ease-out forwards; }
@keyframes natShudder { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* cracks (used by several looks on a 1) */
.dt-n1:is(.skin-classic, .skin-frost, .skin-arcane) .dt-die:not(.dropped)::after { content: ""; position: absolute; inset: 8% 20%; z-index: 2;
  background: linear-gradient(115deg, transparent 46%, #0c0a0a 47% 50%, transparent 51%), linear-gradient(60deg, transparent 58%, #0c0a0a 59% 61%, transparent 62%); }
.dt-n1.skin-frost .dt-die:not(.dropped)::after { filter: invert(1); opacity: .8; }

/* particles and extra pieces sit at the centre of the dice */
.dt-anchor { position: absolute; left: 50%; top: 29px; width: 0; height: 0; pointer-events: none; }
.dt-fx i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px; border-radius: 50%; opacity: 0; }
.dt-ex { position: absolute; opacity: 0; pointer-events: none; }
@keyframes pBurst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(calc(var(--r) * 360deg)); } }
@keyframes pRise { 0% { opacity: 0; transform: translate(calc(var(--sx) * 30px), 10px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--sx) * 80px), calc(-90px - var(--r) * 100px)) scale(1.1); } }
@keyframes pFall { 0% { opacity: 0; transform: translate(calc(var(--sx) * 150px), calc(-170px - var(--r) * 60px)) rotate(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--sx) * 160px), 70px) rotate(540deg); } }
@keyframes pSink { 0% { opacity: .9; transform: translate(calc(var(--sx) * 20px), 0); } 100% { opacity: 0; transform: translate(calc(var(--sx) * 45px), calc(40px + var(--r) * 30px)); } }
.dt-n20 .dt-fx i, .dt-n1 .dt-fx i { animation: pBurst 1s ease-out calc(var(--i) * 25ms) forwards; }

/* full-screen washes */
.dt-screen { position: fixed; inset: 0; z-index: 155; pointer-events: none; animation: scrFade 2.6s ease-out forwards; }
@keyframes scrFade { 0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- previews (profile + shop) ---------- */
.die-preview { display: inline-grid; place-items: center; }
.die-preview .dt-die { animation: none; width: 50px; height: 50px; }
.die-preview .dt-die b { font-size: 16px; }
.dice-tries { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.dice-tries .fx-try { padding: 1px 8px; font-size: 11px; }
.si-preview:has(.die-preview) { display: flex; flex-direction: column; gap: 4px; }

/* ================= the looks ================= */
/* Classic */
.skin-classic.dt-n20 .dt-die:not(.dropped) svg > :not(.edge) { fill: #c9962e; stroke: #fff3c4; }
.skin-classic.dt-n20 .dt-die:not(.dropped) b { color: #fff; text-shadow: 0 0 8px #ffb02e, 0 1px 2px #5a2a00; }
.skin-classic.dt-n1 .dt-die:not(.dropped) svg > :not(.edge) { fill: #4a3634; stroke: #ff5a4a; }
.skin-classic.dt-n1 .dt-die:not(.dropped) b { color: #ff6a5a; }
.skin-classic .dt-fx { display: none; }

/* Frostforged */
.skin-frost { --nat: #dff4ff; --nat-sh: rgba(150,210,255,.95); --glow: rgba(170,225,255,.95); --ray: rgba(200,235,255,.45); --nat1: #9fd4ff; --glow1: rgba(120,190,255,.7); }
.skin-frost .dt-die svg > :not(.edge) { fill: url(#dg-frost); stroke: #ffffff; }
.skin-frost .dt-die svg .edge { stroke: rgba(255,255,255,.7); }
.skin-frost .dt-die b { color: #0a2a48; text-shadow: 0 0 4px #fff; }
.skin-frost .dt-die { filter: drop-shadow(0 0 8px rgba(160,220,255,.6)); }
.skin-frost .dt-fx i { width: 6px; height: 16px; margin: -8px -3px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(#fff, #9fd4ff); }
.skin-frost.dt-n1 .dt-fx i { display: none; }
.scr-frost { box-shadow: inset 0 0 160px 50px rgba(190,230,255,.45); background: radial-gradient(circle, transparent 55%, rgba(200,235,255,.15)); }

/* Arcane glass */
.skin-arcane { --nat: #e2d0ff; --nat-sh: rgba(170,120,255,.95); --glow: rgba(160,110,255,.95); --ray: rgba(190,150,255,.4); --nat1: #c7b2ff; --glow1: rgba(140,90,220,.6); }
.skin-arcane .dt-die svg > :not(.edge) { fill: url(#dg-arcane); stroke: #c7b2ff; }
.skin-arcane .dt-die svg .edge { stroke: rgba(199,178,255,.5); }
.skin-arcane .dt-die b { color: #f0e6ff; text-shadow: 0 0 6px #9a6aff; }
.skin-arcane .dt-fx i { width: 6px; height: 6px; background: #e2d0ff; box-shadow: 0 0 8px 2px #9a6aff; }
.skin-arcane.dt-n1 .dt-fx i { width: 10px; height: 12px; border-radius: 0; clip-path: polygon(50% 0, 100% 70%, 30% 100%); background: rgba(200,180,255,.7); box-shadow: none; }
.skin-arcane.dt-n1 .dt-die:not(.dropped) { opacity: .45; transition: opacity .4s .2s; }
.dt-ex.runes { left: -75px; top: -75px; width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(199,178,255,.85); box-shadow: 0 0 18px rgba(154,106,255,.6), inset 0 0 18px rgba(154,106,255,.4);
  color: #e2d0ff; font-size: 12px; letter-spacing: 4px; display: grid; place-items: center; text-align: center; padding: 18px; line-height: 1.6; z-index: -1; }
.skin-arcane.dt-n20 .dt-ex.runes { animation: runesOpen 3s ease-out forwards; }
@keyframes runesOpen { 0% { opacity: 0; transform: scale(.3) rotate(-90deg); } 20% { opacity: 1; transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(60deg); } }

/* Goldhoard */
.skin-gold { --nat: #fff3b0; --glow: rgba(255,210,90,1); --ray: rgba(255,225,120,.5); --nat1: #c08a5a; --glow1: rgba(120,70,30,.6); }
.skin-gold .dt-die svg > :not(.edge) { fill: url(#dg-gold); stroke: #fff6c8; }
.skin-gold .dt-die svg .edge { stroke: rgba(122,84,16,.55); }
.skin-gold .dt-die b { color: #4a2c04; text-shadow: 0 1px 0 rgba(255,250,220,.7); }
.skin-gold .dt-fx i { width: 13px; height: 13px; margin: -6px; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 45%, #8a6414); }
.skin-gold.dt-n20 .dt-fx i { animation: pFall 1.6s cubic-bezier(.3,.1,.6,1) calc(var(--i) * 45ms) forwards; }
.skin-gold.dt-n1 .dt-fx i { display: none; }
.skin-gold.dt-n1 .dt-die:not(.dropped) svg > :not(.edge) { fill: #5a3418; stroke: #8a5a2a; transition: fill .6s; }
.skin-gold.dt-n1 .dt-die:not(.dropped) b { color: #c08a5a; text-shadow: none; }
.skin-gold.dt-n1 .dt-die:not(.dropped) { animation: melt 1.4s ease-in .2s forwards; transform-origin: 50% 100%; }
@keyframes melt { to { transform: scale(1.12, .7) translateY(8px); } }

/* Feywild bloom */
.skin-fey { --nat: #ffd6ea; --nat-sh: rgba(255,120,190,.85); --glow: rgba(160,255,140,.9); --ray: rgba(255,190,220,.35); --nat1: #b0a080; --glow1: rgba(120,100,60,.5); }
.skin-fey .dt-die svg > :not(.edge) { fill: url(#dg-fey); stroke: #d8ffb0; }
.skin-fey .dt-die svg .edge { stroke: #1f5a2a; stroke-dasharray: 4 3; }
.skin-fey .dt-die b { color: #f6ffe8; text-shadow: 0 1px 2px #0a3010; }
.skin-fey .dt-fx i { width: 12px; height: 12px; margin: -6px; border-radius: 50% 0; background: #ff8ac4; }
.skin-fey .dt-fx i:nth-child(3n) { background: #ffe06a; } .skin-fey .dt-fx i:nth-child(3n+1) { background: #c08aff; }
.skin-fey.dt-n20 .dt-fx i { animation: pRise 1.8s ease-out calc(var(--i) * 40ms) forwards; }
.skin-fey.dt-n1 .dt-fx i { background: #8a7a4a; width: 8px; height: 8px; animation: pSink 1.4s ease-in calc(var(--i) * 40ms) forwards; }
.skin-fey.dt-n1 .dt-die:not(.dropped) { animation: wilt 1.2s ease-in .1s forwards; transform-origin: 50% 100%; }
.skin-fey.dt-n1 .dt-die:not(.dropped) svg { filter: grayscale(.8) sepia(.6) brightness(.8); transition: filter .8s; }
@keyframes wilt { to { transform: rotate(18deg) scaleY(.88); } }

/* Tavern tankard */
.skin-tankard { --nat: #fff6e0; --nat-sh: rgba(255,210,120,.8); --glow: rgba(255,220,150,.8); --ray: rgba(255,240,200,.35); --nat1: #e0a050; --glow1: rgba(200,120,30,.5); }
.skin-tankard .dt-die svg > :not(.edge) { fill: url(#dg-wood); stroke: #3a2210; stroke-width: 4; }
.skin-tankard .dt-die svg .edge { stroke: rgba(40,20,5,.5); }
.skin-tankard .dt-die b { color: #f8e6c0; text-shadow: 0 1px 2px #2a1404; }
.skin-tankard .dt-fx i { width: 14px; height: 14px; margin: -7px; background: radial-gradient(circle at 35% 30%, #fff, #fffaf0 55%, rgba(255,240,210,.6)); box-shadow: 0 0 4px rgba(255,255,255,.5); }
.skin-tankard.dt-n20 .dt-fx i { animation: pRise 1.6s ease-out calc(var(--i) * 30ms) forwards; }
.skin-tankard.dt-n1 .dt-fx i { display: none; }
.dt-ex.puddle { left: -70px; top: 26px; width: 140px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(230,150,40,.85), rgba(180,100,20,.5) 60%, transparent 72%); z-index: -1; }
.skin-tankard.dt-n1 .dt-ex.puddle { animation: puddle 3s ease-out forwards; }
@keyframes puddle { 0% { opacity: 0; transform: scale(.1, .3); } 25% { opacity: 1; } 80% { opacity: 1; transform: scale(1.2, 1); } 100% { opacity: 0; transform: scale(1.3, 1); } }
.skin-tankard.dt-n1 .dt-die:not(.dropped) { animation: tip .5s ease-out forwards; }
@keyframes tip { to { transform: rotate(-35deg) translate(-4px, 6px); } }

/* Dragonbone */
.skin-dragonbone { --nat: #ffb070; --nat-sh: rgba(255,90,20,.95); --glow: rgba(255,120,30,.95); --ray: rgba(255,140,60,.45); --nat1: #d8c8a8; --glow1: rgba(160,140,110,.5); }
.skin-dragonbone .dt-die svg > :not(.edge) { fill: url(#dg-bone); stroke: #7a6040; }
.skin-dragonbone .dt-die svg .edge { stroke: rgba(122,96,64,.6); }
.skin-dragonbone .dt-die b { color: #4a2c10; text-shadow: 0 1px 0 rgba(255,255,255,.5); font-family: "Uncial Antiqua", var(--display); }
.skin-dragonbone .dt-fx i { width: 14px; height: 14px; margin: -7px; background: radial-gradient(circle, #fff3b0, #ff8a1f 45%, rgba(255,40,10,0) 70%); }
.skin-dragonbone.dt-n20 .dt-fx i { animation: pRise 1.3s ease-out calc(var(--i) * 30ms) forwards; }
.skin-dragonbone.dt-n1 .dt-fx i { width: 5px; height: 5px; margin: -2px; background: #cbb894; animation: pSink 1.6s ease-in calc(var(--i) * 35ms) forwards; }
.skin-dragonbone.dt-n1 .dt-die:not(.dropped) { animation: crumble 1.6s ease-in .2s forwards; }
@keyframes crumble { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(.8) translateY(14px); filter: blur(3px); } }
.scr-dragonbone { background: radial-gradient(ellipse at 50% 120%, rgba(255,110,30,.55), rgba(200,40,10,.25) 40%, transparent 70%); }

/* Molten core */
.skin-molten { --nat: #ffe070; --nat-sh: rgba(255,120,20,1); --glow: rgba(255,130,30,1); --ray: rgba(255,160,60,.5); --nat1: #b8aaa0; --glow1: rgba(140,130,120,.5); }
.skin-molten .dt-die svg > :not(.edge) { fill: url(#dg-molten); stroke: #ffe070; }
.skin-molten .dt-die svg .edge { stroke: rgba(255,240,180,.55); }
.skin-molten .dt-die b { color: #fff; text-shadow: 0 0 6px #ff6a1f, 0 1px 2px #5a0a00; }
.skin-molten .dt-die { filter: drop-shadow(0 0 10px rgba(255,110,30,.7)); }
.skin-molten .dt-fx i { width: 5px; height: 5px; margin: -2px; background: #ffd24a; box-shadow: 0 0 6px 2px #ff6a1f; }
.skin-molten.dt-n20 .dt-fx i { animation: pBurst 1.1s ease-out calc(var(--i) * 15ms) forwards; }
.skin-molten.dt-n1 .dt-fx i { width: 20px; height: 20px; margin: -10px; background: radial-gradient(circle, rgba(220,220,220,.6), transparent 70%); box-shadow: none; filter: blur(2px); animation: pRise 2s ease-out calc(var(--i) * 50ms) forwards; }
.skin-molten.dt-n1 .dt-die:not(.dropped) { filter: none; }
.skin-molten.dt-n1 .dt-die:not(.dropped) svg > :not(.edge) { fill: #2c2624; stroke: #5a4c46; transition: fill 1s, stroke 1s; }
.skin-molten.dt-n1 .dt-die:not(.dropped) b { color: #9a8a80; text-shadow: none; transition: color 1s; }
.scr-molten { background: radial-gradient(circle, rgba(255,140,40,.28), rgba(255,60,10,.12) 50%, transparent 75%); }

/* Necrotic */
.skin-necrotic { --nat: #b6ffd6; --nat-sh: rgba(80,255,150,.9); --glow: rgba(110,255,170,.9); --ray: rgba(140,255,190,.3); --nat1: #7dffb0; --glow1: rgba(60,180,110,.6); }
.skin-necrotic .dt-die svg > :not(.edge) { fill: url(#dg-necro); stroke: #7dffb0; }
.skin-necrotic .dt-die svg .edge { stroke: rgba(125,255,176,.45); }
.skin-necrotic .dt-die b { color: #c8ffe0; text-shadow: 0 0 8px #3aff8a; }
.skin-necrotic .dt-die { filter: drop-shadow(0 0 8px rgba(80,255,150,.45)); }
.skin-necrotic .dt-fx i { width: 18px; height: 28px; margin: -14px -9px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 30%, rgba(210,255,230,.9), rgba(125,255,176,.25) 60%, transparent 75%); filter: blur(1px); }
.skin-necrotic.dt-n20 .dt-fx i { animation: pRise 2s ease-out calc(var(--i) * 60ms) forwards; }
.skin-necrotic.dt-n1 .dt-fx i { display: none; }
.dt-ex.hand { left: -24px; top: 30px; width: 48px; height: 72px; z-index: 3; }
.skin-necrotic.dt-n1 .dt-ex.hand { animation: handGrab 2.4s ease-in-out forwards; }
@keyframes handGrab { 0% { opacity: 0; transform: translateY(60px); } 25% { opacity: 1; transform: translateY(-14px); } 45% { transform: translateY(-14px) scaleY(.92); } 100% { opacity: 0; transform: translateY(70px); } }
.skin-necrotic.dt-n1 .dt-die:not(.dropped) { animation: sinkDown 1.6s ease-in .7s forwards; }
@keyframes sinkDown { to { opacity: 0; transform: translateY(60px) scale(.8); } }
.scr-necrotic { box-shadow: inset 0 0 180px 40px rgba(40,200,110,.35); }

/* Mimic dice */
.skin-mimic { --nat: #ffe39a; --glow: rgba(255,210,90,.9); --ray: rgba(255,220,120,.4); --nat1: #ff8a5a; --glow1: rgba(200,60,20,.6); }
.skin-mimic .dt-die svg > :not(.edge) { fill: url(#dg-mimic); stroke: #d8b46a; stroke-width: 4; }
.skin-mimic .dt-die svg .edge { stroke: rgba(216,180,106,.6); }
.skin-mimic .dt-die b { color: #ffe39a; text-shadow: 0 1px 2px #1a0c00; }
.skin-mimic .dt-die::before { content: ""; position: absolute; left: 24%; right: 24%; bottom: 14%; height: 7px; z-index: 2;
  background: repeating-linear-gradient(90deg, #f3ead8 0 4px, transparent 4px 7px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-mask: linear-gradient(#000, #000); }
.skin-mimic .dt-fx i { width: 11px; height: 11px; margin: -5px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #8affd8, #1a9a7a); }
.skin-mimic .dt-fx i:nth-child(odd) { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 45%, #8a6414); }
.skin-mimic .dt-fx i:nth-child(4n) { background: linear-gradient(135deg, #ff8aa8, #b3263e); }
.skin-mimic.dt-n1 .dt-fx i { display: none; }
.dt-ex.jaws { left: -50px; top: -46px; width: 100px; height: 92px; z-index: 3; }
.dt-ex.jaws i { position: absolute; left: 0; right: 0; height: 46%; background: linear-gradient(#6a4220, #3a200c); border: 3px solid #d8b46a; box-shadow: inset 0 0 0 2px #3a200c, 0 4px 10px rgba(0,0,0,.6); }
.dt-ex.jaws i:first-child { top: 0; border-radius: 50px 50px 6px 6px; transform-origin: 50% 0; }
.dt-ex.jaws i:last-child { bottom: 0; border-radius: 6px 6px 50px 50px; transform-origin: 50% 100%; }
.dt-ex.jaws i::after { content: ""; position: absolute; left: 4px; right: 4px; height: 13px;
  background: linear-gradient(45deg, transparent 50%, #f6eedc 50%) 0 0 / 12px 12px repeat-x, linear-gradient(-45deg, transparent 50%, #f6eedc 50%) 0 0 / 12px 12px repeat-x; }
.dt-ex.jaws i::before { content: ""; position: absolute; left: 50%; width: 14px; height: 8px; margin-left: -7px; background: #d8b46a; border-radius: 2px; }
.dt-ex.jaws i:first-child::before { bottom: 4px; } .dt-ex.jaws i:last-child::before { display: none; }
.dt-ex.jaws i:first-child::after { bottom: -15px; transform: scaleY(-1); }
.dt-ex.jaws i:last-child::after { top: -15px; }
.skin-mimic.dt-n1 .dt-ex.jaws { animation: jawsShow 2.2s ease-in-out forwards; }
.skin-mimic.dt-n1 .dt-ex.jaws i:first-child { animation: jawTop 2.2s ease-in-out forwards; }
.skin-mimic.dt-n1 .dt-ex.jaws i:last-child { animation: jawBot 2.2s ease-in-out forwards; }
@keyframes jawsShow { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jawTop { 0% { transform: translateY(-40px); } 30% { transform: translateY(-30px); } 45%, 70% { transform: translateY(0); } 100% { transform: translateY(-40px); } }
@keyframes jawBot { 0% { transform: translateY(40px); } 30% { transform: translateY(30px); } 45%, 70% { transform: translateY(0); } 100% { transform: translateY(40px); } }
.skin-mimic.dt-n1 .dt-label { animation: natShudder .4s ease-in-out 1s 2; }

/* Celestial */
.skin-celestial { --nat: #fffbe8; --nat-sh: rgba(255,240,180,1); --glow: rgba(255,250,210,1); --ray: rgba(255,250,220,.55); --nat1: #e0c070; --glow1: rgba(220,190,110,.5); }
.skin-celestial .dt-die svg > :not(.edge) { fill: url(#dg-celestial); stroke: #e8c060; }
.skin-celestial .dt-die svg .edge { stroke: rgba(200,160,60,.45); }
.skin-celestial .dt-die b { color: #8a6414; text-shadow: 0 0 4px #fff; }
.skin-celestial .dt-die::before { content: ""; position: absolute; left: 22%; right: 22%; top: -14px; height: 9px; border-radius: 50%; border: 2px solid #ffe39a; box-shadow: 0 0 8px rgba(255,230,140,.9); z-index: 2; }
.skin-celestial .dt-fx i { width: 5px; height: 5px; margin: -2px; background: #fff; box-shadow: 0 0 8px 2px #ffe39a; }
.skin-celestial.dt-n20 .dt-fx i { animation: pRise 1.8s ease-out calc(var(--i) * 40ms) forwards; }
.skin-celestial.dt-n1 .dt-fx i { display: none; }
.dt-ex.beam { left: -45px; bottom: -40px; width: 90px; height: 120vh; background: linear-gradient(to top, rgba(255,250,220,.75), rgba(255,240,190,.35) 40%, transparent); filter: blur(4px); z-index: -1; transform-origin: 50% 100%; }
.skin-celestial.dt-n20 .dt-ex.beam { animation: beamDown 2.8s ease-out forwards; }
@keyframes beamDown { 0% { opacity: 0; transform: scaleX(.1); } 20% { opacity: 1; transform: scaleX(1); } 75% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1.4); } }
.skin-celestial.dt-n1 .dt-die:not(.dropped)::before { animation: haloFall 1.4s cubic-bezier(.5,0,.7,1) .2s forwards; }
@keyframes haloFall { 40% { transform: translateY(20px) rotate(20deg); } 60% { transform: translateY(52px) rotate(-10deg); } 75% { transform: translateY(44px) rotate(5deg); } 100% { transform: translateY(54px) rotate(0); opacity: .4; } }
.scr-celestial { background: radial-gradient(ellipse at 50% 0%, rgba(255,250,220,.35), transparent 60%); }

/* Abyssal */
.skin-abyssal { --nat: #e2c8ff; --nat-sh: rgba(176,108,255,.95); --glow: rgba(176,108,255,.9); --ray: rgba(150,80,220,.35); --nat1: #b06cff; --glow1: rgba(90,20,140,.7); }
.skin-abyssal .dt-die svg > :not(.edge) { fill: url(#dg-abyss); stroke: #b06cff; }
.skin-abyssal .dt-die svg .edge { stroke: rgba(176,108,255,.45); }
.skin-abyssal .dt-die b { color: #ecdcff; text-shadow: 0 0 6px #7a3cff; }
.skin-abyssal .dt-fx { display: none; }
.dt-ex.eye { left: -100px; top: -62px; width: 200px; height: 110px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, #0a0010 0 14%, #c03aff 15% 30%, #3a0a5a 31% 48%, #e8d8f0 49% 70%, transparent 71%); filter: drop-shadow(0 0 20px rgba(150,60,255,.8)); }
.dt-ex.eye i { position: absolute; inset: 0; }
.skin-abyssal.dt-n20 .dt-ex.eye { animation: eyeOpen 3.2s ease-in-out forwards; }
@keyframes eyeOpen { 0% { opacity: 0; transform: scaleY(0); } 25% { opacity: 1; transform: scaleY(1); } 50% { transform: scaleY(.1); } 58%, 85% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } }
.dt-ex.tentacles { left: -60px; top: 0; width: 120px; height: 100px; z-index: 3; }
.dt-ex.tentacles i { position: absolute; bottom: 0; width: 22px; height: 90px; border-radius: 50% 50% 0 0 / 80% 80% 0 0; background: linear-gradient(90deg, #3a0a5a, #8a3aff 50%, #3a0a5a); }
.dt-ex.tentacles i:first-child { left: 18px; transform-origin: 50% 100%; } .dt-ex.tentacles i:last-child { right: 18px; transform-origin: 50% 100%; }
.skin-abyssal.dt-n1 .dt-ex.tentacles { animation: jawsShow 2.6s ease-in-out forwards; }
.skin-abyssal.dt-n1 .dt-ex.tentacles i:first-child { animation: tentL 2.6s ease-in-out forwards; }
.skin-abyssal.dt-n1 .dt-ex.tentacles i:last-child { animation: tentR 2.6s ease-in-out forwards; }
@keyframes tentL { 0% { transform: translateY(90px) rotate(0); } 35% { transform: translateY(0) rotate(25deg); } 60% { transform: translateY(0) rotate(30deg); } 100% { transform: translateY(100px) rotate(30deg); } }
@keyframes tentR { 0% { transform: translateY(90px) rotate(0); } 35% { transform: translateY(0) rotate(-25deg); } 60% { transform: translateY(0) rotate(-30deg); } 100% { transform: translateY(100px) rotate(-30deg); } }
.skin-abyssal.dt-n1 .dt-die:not(.dropped) { animation: sinkDown 1.4s ease-in 1.1s forwards; }
.scr-abyssal { background: radial-gradient(circle, transparent 40%, rgba(40,0,70,.55)); }

/* Stormcaller */
.skin-storm { --nat: #eef6ff; --nat-sh: rgba(140,190,255,1); --glow: rgba(160,200,255,1); --ray: rgba(200,225,255,.45); --nat1: #8a9aaa; --glow1: rgba(100,110,130,.5); }
.skin-storm .dt-die svg > :not(.edge) { fill: url(#dg-storm); stroke: #9fd4ff; }
.skin-storm .dt-die svg .edge { stroke: #cfe8ff; stroke-dasharray: 6 10; animation: crackle .4s linear infinite; }
@keyframes crackle { to { stroke-dashoffset: -16; } }
.skin-storm .dt-die b { color: #fff; text-shadow: 0 0 6px #6ab4ff; }
.skin-storm .dt-die { filter: drop-shadow(0 0 6px rgba(140,200,255,.6)); }
.skin-storm .dt-fx i { width: 4px; height: 4px; margin: -2px; background: #fff; box-shadow: 0 0 6px 2px #9fd4ff; }
.skin-storm.dt-n1 .dt-fx i { width: 20px; height: 20px; margin: -10px; background: radial-gradient(circle, rgba(140,140,150,.6), transparent 70%); box-shadow: none; animation: pRise 1.8s ease-out calc(var(--i) * 50ms) forwards; }
.skin-storm.dt-n1 .dt-die:not(.dropped) { filter: grayscale(.8) brightness(.6); transition: filter .5s .2s; }
.skin-storm.dt-n1 .dt-die svg .edge { animation: none; }
.dt-ex.bolt { left: -30px; bottom: -10px; width: 60px; height: 320px; z-index: 3; filter: drop-shadow(0 0 10px #9fc4ff) drop-shadow(0 0 3px #fff); }
.skin-storm.dt-n20 .dt-ex.bolt { animation: boltStrike .9s ease-out forwards; }
@keyframes boltStrike { 0% { opacity: 0; } 8%, 20% { opacity: 1; } 28% { opacity: .2; } 36%, 50% { opacity: 1; } 100% { opacity: 0; } }
.scr-storm { background: rgba(225,235,255,.4); animation: stormFlash 1.2s ease-out forwards; }
@keyframes stormFlash { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: .1; } 30% { opacity: .8; } 100% { opacity: 0; } }

/* Blood moon (Mythic) */
.skin-bloodmoon { --nat: #ffb0a8; --nat-sh: rgba(255,40,30,1); --glow: rgba(255,50,30,.95); --ray: rgba(255,60,40,.4); --nat1: #ff6a5a; --glow1: rgba(160,10,10,.7); }
.skin-bloodmoon .dt-die svg > :not(.edge) { fill: url(#dg-blood); stroke: #ff6a5a; }
.skin-bloodmoon .dt-die svg .edge { stroke: rgba(255,120,100,.45); }
.skin-bloodmoon .dt-die b { color: #ffe0da; text-shadow: 0 0 6px #ff2a1a; }
.skin-bloodmoon .dt-fx i { width: 7px; height: 10px; margin: -5px -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #c0180e; }
.skin-bloodmoon.dt-n1 .dt-fx i { display: none; }
.scr-bloodmoon.n20 { background: radial-gradient(circle at 78% 22%, #ff9a72 0 30px, #e0462a 66px, #b01e14 72px, rgba(200,30,20,.45) 110px, rgba(120,0,0,.35) 45%, rgba(60,0,0,.45)); mix-blend-mode: normal; animation-duration: 3.2s; }
.scr-bloodmoon.n1 { background: radial-gradient(circle, transparent 35%, rgba(0,0,0,.6)); }
.dt-ex.eclipse { left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle, #050000 60%, rgba(5,0,0,.85) 70%, transparent 72%); box-shadow: 0 0 24px 6px rgba(255,40,20,.6); z-index: 3; }
.skin-bloodmoon.dt-n1 .dt-ex.eclipse { animation: eclipseOver 2.8s ease-in-out forwards; }
@keyframes eclipseOver { 0% { opacity: 0; transform: translateX(-90px); } 20% { opacity: 1; } 45%, 75% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(40px); } }

/* Planar shift (Mythic) */
.skin-planar { --nat: #c8fff4; --nat-sh: rgba(15,240,208,.95); --glow: rgba(15,240,208,.9); --ray: rgba(255,58,217,.35); --nat1: #ff8ae8; --glow1: rgba(160,40,200,.6); }
.skin-planar .dt-die svg > :not(.edge) { fill: url(#dg-planar); stroke: #fff; }
.skin-planar .dt-die svg .edge { stroke: rgba(255,255,255,.5); }
.skin-planar .dt-die svg { animation: planarHue 2.4s linear infinite; }
@keyframes planarHue { to { filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)) hue-rotate(360deg); } }
.skin-planar .dt-die b { color: #fff; text-shadow: 0 0 6px #6a2aff, 0 1px 2px #000; }
.skin-planar .dt-fx i { width: 6px; height: 6px; background: #0ff0d0; box-shadow: 0 0 8px 2px #ff3ad9; }
.skin-planar.dt-n1 .dt-fx i { display: none; }
.dt-ex.portal { left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from var(--ang), #0ff0d0, #1a0040, #ff3ad9, #000, #0ff0d0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 38%, #000 42%, #000 100%); mask: radial-gradient(circle closest-side, transparent 38%, #000 42%, #000 100%); }
.skin-planar:is(.dt-n20, .dt-n1) .dt-ex.portal { animation: portalOpen 3.2s ease-in-out forwards, angSpin 1s linear infinite; }
@keyframes portalOpen { 0% { opacity: 0; transform: scale(.1); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(.1); } }
.skin-planar.dt-n1 .dt-ex.portal { -webkit-mask: none; mask: none; background: radial-gradient(circle, #000 0 40%, transparent 41%), conic-gradient(from var(--ang), #0ff0d0, #1a0040, #ff3ad9, #000, #0ff0d0); border-radius: 50%; }
.skin-planar.dt-n1 .dt-die:not(.dropped) { animation: fallIn 1.4s ease-in .6s forwards; }
@keyframes fallIn { to { opacity: 0; transform: scale(.05) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) { .dt-die, .dt-fx i, .dt-ex, .dt-die svg { animation: none !important; } .dice-throw .dt-burst::before { animation: none; } }

/* ================= 3D dice ================= */
#dice-layer { position: fixed; inset: 0; z-index: 158; pointer-events: none; overflow: hidden; }
#dice-layer, .die-preview3 { --d3-face: linear-gradient(135deg, #8a2018, #4a0c08); --d3-edge: #d4b06a; --d3-num: #fbecc8; --d3-glow: rgba(255,200,80,.9); }
.d3 { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .45s; }
#dice-layer .d3, #dice-layer .d3-hop, #dice-layer .d3-body { will-change: transform; } /* moved by the GPU, without repainting */
.d3.out { opacity: 0; }
.d3-shadow { position: absolute; left: -32px; top: 6px; width: 64px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,.22) 45%, transparent 72%); will-change: transform, opacity; } /* no blur filter: it was redrawn every frame */
.d3-anim { position: absolute; left: 0; top: 0; }
.d3-hop { position: absolute; left: 0; top: 0; perspective: 640px; }
.d3-body, .d3-wob { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.d3-face { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; display: grid; place-items: center; background: var(--d3-edge); }
.d3-face::before { content: ""; position: absolute; inset: 0; clip-path: inherit; background: var(--d3-face); transform: scale(.86); }
.d3-face::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: var(--sh, .2); pointer-events: none; }
.d3-face span { position: relative; z-index: 1; font: 700 var(--fs, 15px)/1 var(--display); color: var(--d3-num); text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.d3.d4 .d3-face span, .die-preview3 .d4 .d3-face span { transform: translateY(10%); }
.d3-face span.u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }
.d3-face span.sm { font-size: calc(var(--fs, 15px) * .75); }
.d3.dropped.landed { opacity: .4; filter: grayscale(.7); }
.d3.nat20 .d3-anim { filter: drop-shadow(0 0 14px var(--d3-glow)) drop-shadow(0 0 4px var(--d3-glow)); }
.d3-halo { position: absolute; left: -16px; top: -52px; width: 32px; height: 10px; border-radius: 50%; border: 2px solid #ffe39a; box-shadow: 0 0 8px rgba(255,230,140,.9); }

/* still previews in the shop and on the profile */
.die-preview3 { position: relative; display: inline-block; width: 78px; height: 78px; }
.die-preview3 .d3 { left: 50%; top: 50%; }
.die-preview3 .d3, .die-preview3 .d3 > span, .die-preview3 .d3-hop, .die-preview3 .d3-wob { display: block; }
.die-preview3 .d3-anim { display: block; transform: scale(.92); }
.die-preview3 .d3-wob { transform: rotateY(-14deg) rotateX(6deg); } /* still by default: each die is 20 clipped 3D faces, and dozens wobbling at once was very heavy */
:is(.shop-item, .pick):hover .die-preview3 .d3-wob, .die-preview3:hover .d3-wob { animation: d3wob 5s ease-in-out infinite; }
@keyframes d3wob { 0%, 100% { transform: rotateY(-14deg) rotateX(6deg); } 50% { transform: rotateY(14deg) rotateX(-6deg); } }
.die-preview3 .d3-halo { top: -48px; }
@media (prefers-reduced-motion: reduce) { .die-preview3 .d3-wob { animation: none; } }

/* ---------- looks: face, edge and number colours ---------- */
.skin-frost { --d3-face: linear-gradient(135deg, #f2faff, #a8d8f5 50%, #4a88c0); --d3-edge: #ffffff; --d3-num: #0a2a48; --d3-glow: rgba(170,225,255,.95); }
.skin-arcane { --d3-face: radial-gradient(circle at 35% 30%, #8a5ae8, #2a1060 55%, #08031a); --d3-edge: #c7b2ff; --d3-num: #f0e6ff; --d3-glow: rgba(160,110,255,.95); }
.skin-gold { --d3-face: linear-gradient(135deg, #fff3b0, #e0b03a 45%, #7a5410); --d3-edge: #fff6c8; --d3-num: #4a2c04; --d3-glow: rgba(255,210,90,1); }
.skin-fey { --d3-face: linear-gradient(135deg, #a8f0a0, #4fa84a 50%, #1f5a2a); --d3-edge: #d8ffb0; --d3-num: #f6ffe8; --d3-glow: rgba(160,255,140,.9); }
.skin-tankard { --d3-face: repeating-linear-gradient(100deg, #9a6630 0 5px, #8a5a2a 5px 8px, #7a4c22 8px 10px); --d3-edge: #3a2210; --d3-num: #f8e6c0; --d3-glow: rgba(255,220,150,.8); }
.skin-dragonbone { --d3-face: linear-gradient(135deg, #fffaee, #e6d8b8 60%, #b8a07a); --d3-edge: #7a6040; --d3-num: #4a2c10; --d3-glow: rgba(255,120,30,.95); }
.skin-molten { --d3-face: radial-gradient(circle at 35% 30%, #ffe070, #ff7a1f 40%, #6a0c04); --d3-edge: #ffe070; --d3-num: #fff; --d3-glow: rgba(255,130,30,1); }
.skin-necrotic { --d3-face: radial-gradient(circle at 40% 35%, #2e4e38, #040806); --d3-edge: #7dffb0; --d3-num: #c8ffe0; --d3-glow: rgba(110,255,170,.9); }
.skin-mimic { --d3-face: linear-gradient(135deg, #9a6a34, #3e220c); --d3-edge: #d8b46a; --d3-num: #ffe39a; --d3-glow: rgba(255,210,90,.9); }
.skin-celestial { --d3-face: linear-gradient(135deg, #ffffff, #fbf0d0 60%, #e0c070); --d3-edge: #e8c060; --d3-num: #8a6414; --d3-glow: rgba(255,250,210,1); }
.skin-abyssal { --d3-face: radial-gradient(circle at 35% 30%, #7a3a9a, #2a0840 60%, #0c0214); --d3-edge: #b06cff; --d3-num: #ecdcff; --d3-glow: rgba(176,108,255,.9); }
.skin-storm { --d3-face: linear-gradient(135deg, #4a6a9a, #0c1628); --d3-edge: #9fd4ff; --d3-num: #ffffff; --d3-glow: rgba(160,200,255,1); }
.skin-bloodmoon { --d3-face: radial-gradient(circle at 35% 30%, #d8301e, #6a0808 60%, #2a0202); --d3-edge: #ff6a5a; --d3-num: #ffe0da; --d3-glow: rgba(255,50,30,.95); }
.skin-planar { --d3-face: linear-gradient(135deg, #0ff0d0, #6a2aff 50%, #ff3ad9); --d3-edge: #ffffff; --d3-num: #ffffff; --d3-glow: rgba(15,240,208,.9); }
/* glows switch on once the die lands: a filter on a tumbling 3D die is redrawn every frame */
.d3.landed.skin-necrotic .d3-anim, .d3.landed.skin-molten .d3-anim { filter: drop-shadow(0 0 8px var(--d3-glow)); }
.d3.landed.skin-planar .d3-anim, :is(.shop-item, .pick):hover .die-preview3.skin-planar .d3-anim { animation: planarHue3 2.4s linear infinite; }
@keyframes planarHue3 { to { filter: hue-rotate(360deg); } }
.d3.landed.skin-storm .d3-face::before { animation: stormFlicker 1.6s steps(1) infinite; }
@keyframes stormFlicker { 0%, 86%, 100% { filter: none; } 88% { filter: brightness(1.8); } 92% { filter: brightness(1.3); } }

/* ---------- natural 20 / natural 1 on the dice themselves ---------- */
.d3.skin-classic.nat20 { --d3-face: linear-gradient(135deg, #ffe9a0, #c9962e 55%, #7a5410); --d3-edge: #fff3c4; --d3-num: #fff; }
.d3.skin-classic.nat1 { --d3-face: linear-gradient(135deg, #4a3634, #1e1414); --d3-edge: #ff5a4a; --d3-num: #ff6a5a; }
.d3.skin-frost.nat1 { --d3-face: linear-gradient(135deg, #ffffff, #d6ecf8); --d3-num: #4a88c0; }
.d3.skin-frost.nat1 .d3-anim { filter: drop-shadow(0 0 10px rgba(160,220,255,.9)); }
.d3.skin-arcane.nat1 .d3-anim { opacity: .4; transition: opacity .5s .2s; }
.d3.skin-gold.nat1 { --d3-face: linear-gradient(135deg, #7a4a24, #4a2a10); --d3-edge: #8a5a2a; --d3-num: #c08a5a; }
.d3.skin-gold.nat1 .d3-anim { animation: melt 1.4s ease-in .2s forwards; }
.d3.skin-fey.nat1 .d3-anim { filter: grayscale(.8) sepia(.6) brightness(.8); animation: wilt 1.2s ease-in .1s forwards; transition: filter .8s; }
.d3.skin-tankard.nat1 .d3-anim { animation: tip .5s ease-out forwards; }
.d3.skin-dragonbone.nat1 .d3-anim { animation: crumble 1.6s ease-in .2s forwards; }
.d3.skin-molten.nat1 { --d3-face: linear-gradient(135deg, #3a3230, #1a1614); --d3-edge: #5a4c46; --d3-num: #9a8a80; }
.d3.skin-molten.nat1 .d3-anim { filter: none; }
.d3.skin-necrotic.nat1 .d3-anim { animation: sinkDown 1.6s ease-in .7s forwards; }
.d3.skin-celestial.nat1 .d3-halo { animation: haloFall3 1.4s cubic-bezier(.5,0,.7,1) .2s forwards; }
@keyframes haloFall3 { 40% { transform: translateY(26px) rotate(20deg); } 60% { transform: translateY(78px) rotate(-10deg); } 75% { transform: translateY(70px) rotate(5deg); } 100% { transform: translateY(80px) rotate(0); opacity: .4; } }
.d3.skin-abyssal.nat1 .d3-anim { animation: sinkDown 1.4s ease-in 1.1s forwards; }
.d3.skin-storm.nat1 .d3-anim { filter: grayscale(.8) brightness(.6); transition: filter .5s .2s; }
.d3.skin-storm.nat1 .d3-face::before { animation: none; }
.d3.skin-planar.nat1 .d3-anim { animation: fallIn 1.4s ease-in .6s forwards; }

/* ---------- performance: previews scrolled out of view stop animating and skip drawing ---------- */

.anim-off, .anim-off * { animation-play-state: paused !important; }

/* flat dice previews (shop and inventory): front faces only, no 3D layers */
.die-preview3.flat .d3-flat { position: absolute; left: 0; top: 0; }
.die-preview3.flat .d3-face { backface-visibility: visible; }
.die-preview3.flat .d3-anim { transition: transform .25s ease; }
:is(.shop-item, .pick):hover .die-preview3.flat .d3-anim, .die-preview3.flat:hover .d3-anim { transform: scale(1) rotate(-8deg); }