/* ================= DM Tavern — natural 20 / natural 1 moments, second pass ================= */
.tfx .rx { position: absolute; left: 0; top: 0; pointer-events: none; }
.tfx .rx svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tfx .db-jet { height: 0; transform-origin: 0 0; }
.tfx .db-hit { width: 0; height: 0; }
/* the old looks' own animations are replaced by the new moments */
.d3.skin-planar.nat1 .d3-anim, .d3.skin-planar.nat20 .d3-anim { animation: plHue 3.2s ease-in-out infinite alternate; }
.d3.skin-abyssal.nat1 .d3-anim, .d3.skin-tankard.nat1 .d3-anim { animation: none; }

/* ---------- Planar shift ---------- */
.pl-rift { width: 0; height: 0; }
.pl-rift > i { position: absolute; left: -46px; top: -76px; width: 92px; height: 152px; border-radius: 50%; animation: plRiftOpen .45s cubic-bezier(.3,1.4,.5,1) .2s both; }
.pl-rift .pl-swirl { background: conic-gradient(from 0deg, #0ff0d0, #1a0060, #ff3ad9, #050010, #6a2aff, #0ff0d0); filter: blur(3px); animation: plRiftOpen .45s cubic-bezier(.3,1.4,.5,1) .2s both, rxSpin 1.2s linear infinite; }
.pl-rift .pl-stars { background: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 60%), radial-gradient(1.5px 1.5px at 30% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 60%, #fff, transparent), radial-gradient(1px 1px at 45% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 22%, #c8fff4, transparent); }
.pl-rift .pl-edge { box-shadow: 0 0 0 3px #fff, 0 0 18px 6px #0ff0d0, 0 0 36px 12px rgba(255,58,217,.6); }
@keyframes plRiftOpen { from { transform: scaleX(0) scaleY(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.pl-rift.closing > i { animation: plRiftClose .45s ease-in forwards !important; }
@keyframes plRiftClose { from { transform: none; opacity: 1; } to { transform: scaleX(0) scaleY(1.3); opacity: 0; } }
.d3.pl-echo { filter: hue-rotate(var(--hue)) drop-shadow(0 0 8px rgba(255,255,255,.6)); pointer-events: none; }
.d3.pl-echo .d3-shadow { display: none; }
.pl-burst { width: 0; height: 0; }
.pl-burst > * { position: absolute; left: 0; top: 0; }
.pl-ring { width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid transparent; border-top-color: #0ff0d0; border-right-color: #ff3ad9; border-bottom-color: #6a2aff; border-left-color: #fff; animation: rxRing .8s ease-out forwards; }
.pl-ring.two { animation-delay: .12s; opacity: 0; transform: rotate(45deg); }
.pl-flash { width: 160px; height: 160px; margin: -80px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(15,240,208,.5) 30%, rgba(255,58,217,.3) 50%, transparent 70%); animation: rxBlast .6s ease-out forwards; }
.pl-shard { width: 9px; height: 12px; margin: -6px -4px; background: hsl(var(--h), 100%, 70%); clip-path: polygon(50% 0, 100% 100%, 0 80%); box-shadow: 0 0 6px hsl(var(--h), 100%, 60%); }
body.pl-chroma #app { filter: drop-shadow(3px 0 0 rgba(255,58,217,.55)) drop-shadow(-3px 0 0 rgba(15,240,208,.55)); }
.d3.pl-glitch .d3-anim { animation: plGlitch .14s steps(2) infinite !important; }
@keyframes plGlitch { 0% { transform: translate(-3px, 1px); filter: drop-shadow(3px 0 0 #ff3ad9) drop-shadow(-3px 0 0 #0ff0d0); } 50% { transform: translate(3px, -1px) skewX(8deg); filter: drop-shadow(-3px 0 0 #ff3ad9) drop-shadow(3px 0 0 #0ff0d0); } }
.pl-floor { width: 0; height: 0; }
.pl-floor > i { position: absolute; left: -48px; top: -14px; width: 96px; height: 28px; border-radius: 50%; animation: plRiftOpen .35s cubic-bezier(.3,1.4,.5,1) .4s both; }
.pl-floor .pl-swirl { background: radial-gradient(ellipse, #000 0 40%, transparent 70%), conic-gradient(from 0deg, #0ff0d0, #1a0060, #ff3ad9, #050010, #0ff0d0); animation: plRiftOpen .35s cubic-bezier(.3,1.4,.5,1) .4s both, rxSpin 1s linear infinite; }
.pl-floor .pl-edge { box-shadow: 0 0 0 2px #fff, 0 0 14px 4px #0ff0d0, 0 0 26px 8px rgba(255,58,217,.5); }
.pl-floor.sky > i { animation-delay: 0s; }
.pl-floor.sky.drop > i { animation: plRiftOpen .3s ease-out both, plRiftClose .4s ease-in .7s forwards; }
.pl-floor.closing > i { animation: plRiftClose .35s ease-in forwards !important; }
.pl-dizzy { width: 0; height: 0; }
.pl-dz { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; color: #fff3b0; filter: drop-shadow(0 0 4px #ffd24a); animation: plOrbit 1s linear infinite; animation-delay: calc(var(--i) * -.33s); }
@keyframes plOrbit { 0% { transform: translate(-24px, 0) scale(.8); } 25% { transform: translate(0, -7px) scale(.6); } 50% { transform: translate(24px, 0) scale(.8); } 75% { transform: translate(0, 7px) scale(1.1); } 100% { transform: translate(-24px, 0) scale(.8); } }

/* ---------- Abyssal ---------- */
.ab-dark { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(40,0,70,.25), rgba(10,0,25,.82) 70%); animation: abDark 4.4s ease forwards; }
@keyframes abDark { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
.ab-eye { width: 300px; height: 162px; margin: -81px 0 0 -150px; filter: drop-shadow(0 0 30px rgba(176,108,255,.7)); animation: abEyeOpen 4s ease forwards .3s; clip-path: ellipse(50% 0% at 50% 50%); }
@keyframes abEyeOpen { 0% { clip-path: ellipse(50% 0% at 50% 50%); } 15% { clip-path: ellipse(50% 50% at 50% 50%); } 52% { clip-path: ellipse(50% 50% at 50% 50%); } 56% { clip-path: ellipse(50% 4% at 50% 50%); } 61%, 82% { clip-path: ellipse(50% 50% at 50% 50%); } 100% { clip-path: ellipse(50% 0% at 50% 50%); } }
.ab-eye .ab-iris { animation: abLook 3.6s ease-in-out .5s both; }
@keyframes abLook { 0% { transform: translate(-30px, -6px); } 25% { transform: translate(20px, 4px); } 45%, 100% { transform: translate(0, 10px); } }
.ab-eye .ab-pupil { transform-box: fill-box; transform-origin: center; animation: abDilate 3.6s ease .5s both; }
@keyframes abDilate { 0%, 40% { transform: scaleX(1); } 60%, 100% { transform: scaleX(3.4) scaleY(.75); } }
.ab-tent { width: 80px; height: 300px; margin: -300px 0 0 -40px; transform-origin: 50% 100%; animation: abRise 3.6s cubic-bezier(.3,.8,.4,1) var(--d) both; }
.ab-tent svg { transform-origin: 50% 100%; animation: abSway 1.8s ease-in-out infinite alternate; }
.ab-tent.flip svg { transform: scaleX(-1); animation-name: abSwayFlip; }
@keyframes abRise { 0% { transform: translateY(100%) scale(var(--s)); } 25% { transform: translateY(10%) rotate(var(--r)) scale(var(--s)); } 75% { transform: translateY(14%) rotate(calc(var(--r) * -.6)) scale(var(--s)); } 100% { transform: translateY(100%) scale(var(--s)); } }
@keyframes abSway { from { transform: rotate(-6deg); } to { transform: rotate(8deg) skewX(4deg); } }
@keyframes abSwayFlip { from { transform: scaleX(-1) rotate(-6deg); } to { transform: scaleX(-1) rotate(8deg) skewX(4deg); } }
.ab-rune { font: 700 18px var(--display); color: #e0b8ff; text-shadow: 0 0 8px #b06cff, 0 0 16px #6a2aff; opacity: 0; animation: abRune 2s ease-out var(--d) both; }
@keyframes abRune { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
.ab-pool { width: 0; height: 0; }
.ab-pool::before, .ab-pool i { content: ""; position: absolute; left: -70px; top: -22px; width: 140px; height: 44px; border-radius: 50%; animation: abPool 3.8s ease forwards; }
.ab-pool::before { background: radial-gradient(ellipse, #000 0 45%, rgba(40,0,70,.9) 62%, transparent 72%); box-shadow: 0 0 0 2px rgba(176,108,255,.7), 0 0 20px rgba(176,108,255,.6); }
.ab-pool i { background: conic-gradient(from 0deg, transparent, rgba(176,108,255,.55), transparent 30%, rgba(176,108,255,.4) 55%, transparent 70%); -webkit-mask: radial-gradient(ellipse, transparent 40%, #000 60%, transparent 72%); mask: radial-gradient(ellipse, transparent 40%, #000 60%, transparent 72%); animation: abPool 3.8s ease forwards, rxSpin 1.4s linear infinite; }
@keyframes abPool { 0% { transform: scale(0); } 10%, 72% { transform: scale(1); } 80% { transform: scale(1.1); } 100% { transform: scale(0); } }
.ab-grab { width: 44px; height: 130px; margin: -130px 0 0 -22px; transform-origin: 50% 100%; animation: abGrab 3.4s cubic-bezier(.3,.8,.4,1) var(--d) both; }
.ab-grab.flip svg { transform: scaleX(-1); }
@keyframes abGrab { 0% { transform: translateY(40%) scaleY(0); } 18% { transform: translateY(0) scaleY(1) rotate(calc(var(--r) * -1)); } 32% { transform: rotate(var(--r)) scaleY(.9); } 42% { transform: rotate(calc(var(--r) * 1.4)) scaleY(.82); } 60% { transform: translateY(40px) rotate(var(--r)) scaleY(.7); } 72%, 100% { transform: translateY(140px) rotate(var(--r)) scaleY(.4); opacity: 0; } }
.ab-bubble { width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 1.5px solid rgba(200,150,255,.8); opacity: 0; animation: abBubble .7s ease-out var(--d) forwards; }
@keyframes abBubble { 0% { opacity: 1; transform: scale(.4); } 70% { opacity: 1; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-18px) scale(1.6); } }

/* ---------- Mimic dice ---------- */
.mim { width: 0; height: 0; }
.mim-run, .mim-bob { position: absolute; left: 0; top: 0; }
.mim-face { position: absolute; left: -44px; top: -52px; width: 88px; height: 84px; opacity: 0; transform-origin: 50% 80%; }
.mim.show .mim-face { animation: mimPop .3s cubic-bezier(.3,1.6,.5,1) forwards; opacity: 1; }
@keyframes mimPop { from { transform: scale(.4); opacity: 0; } to { opacity: 1; } }
.mim-face svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.mim .mim-legs { transform-box: view-box; transform-origin: 50px 64px; transform: scaleY(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.mim.legs .mim-legs { transform: scaleY(1); }
.mim.legs .mim-bob { animation: mimLift .25s ease-out forwards; }
@keyframes mimLift { to { transform: translateY(-12px); } }
.mim .mim-top { transform-box: view-box; transform-origin: 16px 50px; }
.mim .leg { transform-box: view-box; }
.mim .leg.a { transform-origin: 30px 64px; } .mim .leg.b { transform-origin: 58px 66px; }
.mim.walking .mim-bob { animation: mimScurry .14s ease-in-out infinite alternate; }
@keyframes mimScurry { from { transform: translateY(-12px) rotate(-3deg); } to { transform: translateY(-17px) rotate(3deg); } }
.mim.walking .leg.a { animation: legA .14s ease-in-out infinite alternate; }
.mim.walking .leg.b { animation: legA .14s ease-in-out infinite alternate-reverse; }
@keyframes legA { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.mim.happy .mim-brow { transform: translateY(-3px) rotate(-8deg); transform-box: fill-box; }
.mim.angry .mim-brow { transform: rotate(14deg) translateY(2px); transform-box: fill-box; transform-origin: center; }
.mim .mim-pupil { transform-box: fill-box; transform-origin: center; animation: mimLook 1.2s ease-in-out infinite; }
@keyframes mimLook { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
.mim-coin { width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 50%, #8a6414); box-shadow: 0 0 6px rgba(255,210,90,.7); }
.mim-gem { width: 11px; height: 13px; margin: -6px; background: linear-gradient(135deg, #a8ffe8, #1a9a7a); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); filter: drop-shadow(0 0 4px #8affd8); }
.mim-chomp { font: 900 26px var(--display); color: #ffb08a; text-shadow: 0 3px 0 #6a1a08, 0 0 12px rgba(255,90,40,.6); white-space: nowrap; transform: translate(-50%, -50%); animation: mimChomp .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes mimChomp { from { transform: translate(-50%, -50%) scale(2.4) rotate(-12deg); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-6deg); opacity: 1; } }
.mim-dust { width: 26px; height: 14px; margin: -7px -13px; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,180,150,.6), transparent 70%); animation: dustPuff .7s ease-out forwards; }

/* ---------- Tavern tankard ---------- */
.tk-foam { width: 70px; height: 90px; margin: -90px 0 0 -35px; border-radius: 50% 50% 40% 40%; transform-origin: 50% 100%;
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, transparent 22%), radial-gradient(circle at 65% 45%, #fff 0 18%, transparent 20%), radial-gradient(circle at 45% 65%, #fffaf0 0 26%, transparent 28%), radial-gradient(ellipse at 50% 70%, #fff6e0, #f0dcb0 70%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(255,240,200,.7)); animation: tkFoam 1.6s ease-out forwards; }
@keyframes tkFoam { 0% { transform: scale(.2, 0); opacity: 1; } 25% { transform: scale(1.1, 1.2); } 45% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, .6) translateY(20px); opacity: 0; } }
.tk-bub, .tk-drop { width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fff6e0 60%, #e8d0a0); }
.tk-drop { background: radial-gradient(circle at 35% 30%, #fff8d0, #f0b040 60%, #b8701a); }
.tk-mug { width: 64px; height: 72px; margin: -36px -32px; }
.tk-mug.left { animation: tkSwingL 1.4s cubic-bezier(.3,1.2,.5,1) forwards, tkFade 3.6s ease forwards; }
.tk-mug.right { animation: tkSwingR 1.4s cubic-bezier(.3,1.2,.5,1) forwards, tkFade 3.6s ease forwards; }
.tk-mug.right svg { transform: scaleX(-1); }
@keyframes tkSwingL { 0% { transform: translate(-260px, 40px) rotate(-40deg); } 55% { transform: translate(6px, 0) rotate(22deg); } 62% { transform: translate(-4px, 2px) rotate(10deg); } 100% { transform: translate(-10px, 4px) rotate(16deg); } }
@keyframes tkSwingR { 0% { transform: translate(260px, 40px) rotate(40deg); } 55% { transform: translate(-6px, 0) rotate(-22deg); } 62% { transform: translate(4px, 2px) rotate(-10deg); } 100% { transform: translate(10px, 4px) rotate(-16deg); } }
@keyframes tkFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.tk-clink { width: 54px; height: 54px; margin: -27px; color: #fff6c8; filter: drop-shadow(0 0 10px #ffd24a); animation: rxSparkPop .6s ease-out forwards; }
.tk-cheers { white-space: nowrap; transform: translateX(-50%); font: 400 46px "Pirata One", var(--display); color: #ffe39a; text-shadow: 0 3px 0 #5a3414, 0 0 18px rgba(255,190,80,.6); }
.tk-cheers span { display: inline-block; animation: tkLetter 2.6s cubic-bezier(.3,1.6,.5,1) calc(.85s + var(--i) * .05s) both; }
@keyframes tkLetter { 0% { transform: translateY(30px) scale(.3); opacity: 0; } 25% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.tk-tip { width: 70px; height: 80px; margin: -40px -35px; transform-origin: 70% 90%; animation: tkTip 4s ease forwards; }
.tk-tip.flip svg { transform: scaleX(-1); }
.tk-tip.flip { transform-origin: 30% 90%; animation-name: tkTipFlip; }
@keyframes tkTip { 0% { transform: translate(-120px, -60px) rotate(0); opacity: 0; } 12% { transform: translate(0, 0) rotate(0); opacity: 1; } 26% { transform: rotate(118deg); } 30% { transform: rotate(108deg); } 34%, 70% { transform: rotate(114deg); } 85% { transform: rotate(114deg); opacity: 1; } 100% { transform: rotate(114deg) translateY(-40px); opacity: 0; } }
@keyframes tkTipFlip { 0% { transform: translate(120px, -60px) rotate(0); opacity: 0; } 12% { transform: translate(0, 0) rotate(0); opacity: 1; } 26% { transform: rotate(-118deg); } 30% { transform: rotate(-108deg); } 34%, 70% { transform: rotate(-114deg); } 85% { transform: rotate(-114deg); opacity: 1; } 100% { transform: rotate(-114deg) translateY(-40px); opacity: 0; } }
.tk-stream { width: 14px; height: var(--len); margin-left: -7px; transform-origin: 50% 0; border-radius: 7px 7px 10px 10px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 4px, transparent 4px 14px), linear-gradient(90deg, #c8801a, #f0b040 45%, #b8701a); opacity: 0;
  animation: tkPour 4s ease forwards, tkFlow .3s linear infinite; }
@keyframes tkPour { 0%, 24% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1) scaleX(1); opacity: .95; } 62% { transform: scaleY(1) scaleX(.7); opacity: .95; } 72% { transform: scaleY(1) scaleX(.15); opacity: 0; } 100% { opacity: 0; } }
@keyframes tkFlow { to { background-position: 0 14px, 0 0; } }
.tk-puddle { width: 0; height: 0; }
.tk-puddle::before { content: ""; position: absolute; left: -90px; top: -20px; width: 180px; height: 40px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255,240,190,.5), transparent 25%), radial-gradient(ellipse, #e0a030 0 40%, #b8701a 65%, transparent 72%); opacity: .9; animation: tkPuddle 4s ease forwards; }
@keyframes tkPuddle { 0%, 30% { transform: scale(0); opacity: 0; } 55% { transform: scale(1); opacity: .9; } 88% { transform: scale(1.05); opacity: .85; } 100% { transform: scale(1.05); opacity: 0; } }
.tk-pop { width: 8px; height: 8px; margin: -4px; border-radius: 50%; border: 1.5px solid rgba(255,250,230,.85); opacity: 0; animation: abBubble .6s ease-out var(--d) forwards; }
.tk-hic { font: 400 26px "Pirata One", var(--display); color: #f0c070; text-shadow: 0 2px 0 #4a2a0e; transform: translate(-50%, -50%) rotate(-10deg); animation: tkHic 2s ease forwards; }
@keyframes tkHic { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-10deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-14deg); } 25% { transform: translate(-50%, -50%) rotate(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) rotate(-6deg); } }

/* ---------- the tavern crowd ---------- */
.crowd2 { overflow: hidden; }
.pat { position: absolute; bottom: -18px; width: 62px; height: 114px; margin-left: -31px; transform-origin: 50% 100%; animation: patIn .5s cubic-bezier(.3,1.4,.5,1) var(--j) both; }
.pat svg { width: 100%; height: 100%; overflow: visible; transform: scale(var(--s)); transform-origin: 50% 100%; filter: drop-shadow(0 -2px 6px rgba(255,140,60,.25)); }
@keyframes patIn { from { transform: translateY(110%); } }
.crowd2.cheer .pat { animation: patIn .5s cubic-bezier(.3,1.4,.5,1) var(--j) both, patJump .9s ease-in-out calc(.5s + var(--d)) 3; }
@keyframes patJump { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-26px) rotate(-3deg); } 55% { transform: translateY(-4px) rotate(2deg); } }
.crowd2 .arm { transform-box: fill-box; }
.crowd2.cheer .arm.l { transform-origin: 100% 100%; animation: armWave .3s ease-in-out infinite alternate; }
.crowd2.cheer .arm.r { transform-origin: 0 100%; animation: armWave .3s ease-in-out infinite alternate-reverse; }
@keyframes armWave { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
.crowd2.boo .pat { animation: patIn .5s cubic-bezier(.3,1.4,.5,1) var(--j) both, patBoo .35s ease-in-out .5s 8 alternate; }
@keyframes patBoo { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(3px); } }
.crowd2.boo .arm.l, .crowd2.boo .arm.r { transform-origin: 50% 0; animation: fist .18s ease-in-out infinite alternate; }
@keyframes fist { to { transform: translateY(-6px); } }
.crowd2-say { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%); white-space: nowrap; font: 800 clamp(34px, 6vw, 60px) var(--display); }
.crowd2.cheer .crowd2-say { color: #ffe39a; text-shadow: 0 4px 0 #6a3a0a, 0 0 22px rgba(255,180,60,.6); }
.crowd2.boo .crowd2-say { color: #ff8a7a; text-shadow: 0 4px 0 #5a0a04, 0 0 18px rgba(255,60,40,.5); }
.crowd2-say span { display: inline-block; animation: sayBounce 3s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i) * .06s) both; }
@keyframes sayBounce { 0% { transform: translateY(40px) scale(.2); opacity: 0; } 15% { transform: none; opacity: 1; } 25% { transform: translateY(-10px); } 35% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.crowd2.boo .crowd2-say span { animation: sayBounce 3s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i) * .06s) both, sayShake .12s linear 1s 10; }
@keyframes sayShake { 50% { transform: translateX(3px) rotate(2deg); } }
.crowd2-hat { width: 28px; height: 32px; margin: -16px -14px; }
.crowd2-conf { width: 7px; height: 11px; margin: -5px -3px; background: hsl(var(--h), 90%, 60%); }
.tomato2 { width: 0; height: 0; }
.tomato2 i { position: absolute; left: -11px; top: -11px; width: 22px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a8a 0 10%, #e8301e 40%, #8a0c06); box-shadow: inset -3px -3px 5px rgba(0,0,0,.3); }
.tomato2 i::after { content: ""; position: absolute; left: 7px; top: -4px; width: 9px; height: 7px; background: #3a8a2a; clip-path: polygon(50% 0, 65% 40%, 100% 35%, 70% 60%, 80% 100%, 50% 75%, 20% 100%, 30% 60%, 0 35%, 35% 40%); }
.splat2 { width: 80px; height: 90px; margin: -40px; animation: splat2 2.6s ease forwards; }
@keyframes splat2 { 0% { transform: scale(.2); } 12% { transform: scale(1.1); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.splat2 .sdrip { transform-box: fill-box; transform-origin: 50% 0; animation: dnDrip 2s ease-in .2s both; }

/* ---------- Cracked screen ---------- */
.crack2 svg { position: absolute; inset: 0; overflow: visible; }
.crack2 .cr { fill: none; stroke: rgba(240,248,255,.95); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 3px rgba(180,220,255,.6));
  stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: crDraw .45s cubic-bezier(.2,.8,.3,1) var(--d) forwards; }
.crack2 .cr.br { stroke-width: 1.2; }
.crack2 .cr.ring { stroke-width: 1.4; stroke: rgba(225,240,255,.75); }
@keyframes crDraw { to { stroke-dashoffset: 0; } }
.crack2 .cr-flash { animation: rxBlast .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.crack2 .cr-hole { fill: rgba(220,235,255,.35); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px #fff); }
.crack2 .cr-lines { animation: crFade 3.4s ease forwards; }
@keyframes crFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.cr-shard { background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(190,220,255,.25) 60%, rgba(255,255,255,.6)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }

/* ---------- Kraken grab ---------- */
.kr-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; animation: krSea 4.2s ease forwards; }
.kr-sea svg { width: 100%; height: 100%; display: block; }
.kr-sea .w1 { fill: rgba(20,60,90,.85); animation: krWave 2s linear infinite; }
.kr-sea .w2 { fill: rgba(10,35,60,.95); animation: krWave 3s linear infinite reverse; }
@keyframes krWave { to { transform: translateX(-150px); } }
@keyframes krSea { 0% { transform: translateY(100%); } 15%, 82% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.kr-svg { position: absolute; inset: 0; }
.kr-svg svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.kr-suckers circle { fill: #f0b8d0; stroke: #8a2a5a; stroke-width: 1; }
.kraken2.ebb .kr-svg { animation: krEbb .6s ease forwards; }
@keyframes krEbb { to { opacity: 0; } }
.kr-splash { width: 120px; height: 40px; margin: -20px -60px; border-radius: 50%; border: 3px solid rgba(200,230,255,.8); animation: rxRing .7s ease-out forwards; }
.kr-drop { width: 6px; height: 8px; margin: -4px -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(170,215,255,.9); }

/* ---------- Dragon roar ---------- */
.roar2-head { overflow: hidden; }
.roar2-head .rh-inner { width: 100%; height: 100%; transform: translateY(100%); }
.roar2-head.flip .rh-inner svg { transform: scaleX(-1); }
.roar2-head svg { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(255,80,20,.55)); }
.roar2-head .jaw { transform-box: view-box; transform-origin: 150px 118px; }
.roar2-head.eyes ellipse:nth-of-type(1) { animation: eyeFlare .8s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes eyeFlare { 0% { transform: scale(1); } 30% { transform: scale(2.4); filter: brightness(2); } 100% { transform: scale(1); } }
.roar2-smoke { width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(circle, rgba(60,50,48,.6), transparent 70%); filter: blur(4px); }
.roar2-rings { width: 0; height: 0; }
.roar2-rings .rr { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid rgba(255,200,120,.75); opacity: 0; animation: roarRing .9s ease-out forwards; }
@keyframes roarRing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(7); opacity: 0; border-width: 1px; } }
.roar2-jet i { animation-duration: 1.6s !important; }
.roar2-jet i + i { animation-duration: 1.5s !important; }
/* these sit along the bottom edge, not at the shared top-left anchor */
.crowd2 .pat, .kraken2 .kr-sea { top: auto; }
.crowd2 .crowd2-say { top: auto; left: 50%; }

/* ---------- the 3D mimic (the die itself opens up, grows legs and runs) ---------- */
.mm3-rig, .mm3-hinge { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.mm3-rig > *, .mm3-hinge > * { position: absolute; }
.mm3-maw { border-radius: 50%; background: radial-gradient(circle, #1a0204 0 30%, #5a0a10 62%, #8a1a1c 80%, #3a0806 100%); }
.mm3-maw.lid { background: radial-gradient(circle, #2a0406 0 40%, #6a1014 75%, #3a0806 100%); }
.mm3-tongue { border-radius: 45% 45% 50% 50% / 30% 30% 70% 70%; transform-origin: 50% 0; background: linear-gradient(180deg, #8a1a2a, #e2526a 60%, #c03850); box-shadow: inset 0 -3px 4px rgba(0,0,0,.35); }
.mm3-tooth { background: linear-gradient(180deg, #fffaf0, #d8ccae); }
.mm3-tooth.up { transform-origin: 50% 100%; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.mm3-tooth.down { transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(0deg, #fffaf0, #d8ccae); }
.mm3-eye { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbd0, #ffd23a 45%, #e08a10); box-shadow: 0 0 0 2px #3a1a06, 0 0 8px rgba(255,200,60,.7); }
.mm3-eye i { position: absolute; left: 44%; top: 8%; width: 14%; height: 84%; border-radius: 50%; background: #120600; }
.mm3-eye.mad { background: radial-gradient(circle at 40% 40%, #fff0c0, #ff8a2a 45%, #c02a10); }
.mm3-seg { transform-origin: 0 50%; border-radius: 99px; background: linear-gradient(180deg, #6a3a16, #2a1206 70%, #140802); transform-style: preserve-3d; }
.mm3-seg i { position: absolute; left: 0; top: 0; width: 100%; border-radius: 99px; background: linear-gradient(180deg, #5a3012, #1e0c04); transform: rotateX(90deg); }
.mm3-knee { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a5226, #2a1206 70%); }