.royal-rain{perspective:650px;pointer-events:none;z-index:10;contain:layout paint;background:0 0;height:100%;position:absolute;top:0;left:0;overflow:hidden}.royal-drop{top:0;left:var(--x);width:44px;height:66px;filter:blur(var(--blur)) brightness(var(--dim,1));animation:royal-fall var(--dur) linear var(--delay) infinite;transform-style:preserve-3d;will-change:transform;position:absolute}.royal-card{width:44px;height:66px;transform-style:preserve-3d;animation:royal-flip var(--flip) ease-in-out var(--phase) infinite alternate;position:relative}.royal-face{box-sizing:border-box;backface-visibility:hidden;color:#28232b;background:linear-gradient(135deg,#fff0cc,#e1c797 55%,#c2a373);border:2px solid #ae8745;border-radius:4px;font-family:Georgia,serif;position:absolute;inset:0;box-shadow:inset 0 0 0 2px #f7e4b5,0 3px 9px #0008}.royal-face:before{content:"";border:1px solid #9d7336;border-radius:2px;position:absolute;inset:4px}.royal-face:after{content:"";border:1px solid #c29a54;border-radius:1px;position:absolute;inset:7px}.royal-face.red{color:#962d3c}.royal-face .rank{font-size:11px;font-weight:700;line-height:1;position:absolute;top:3px;left:5px}.royal-face .rank.bottom{inset:auto 5px 3px auto;transform:rotate(180deg)}.royal-face .suit{text-shadow:0 1px 1px #fff9;justify-content:center;align-items:center;font-size:23px;display:flex;position:absolute;inset:0}.royal-face .crown{text-align:center;color:#ad803b;font-size:11px;position:absolute;top:9px;left:0;right:0}.royal-face .flourish{text-align:center;color:#ad803b;font-size:11px;position:absolute;bottom:9px;left:0;right:0}.royal-face .side{color:#b38b4c;font-size:8px;position:absolute;top:25px}.royal-face .side.left{left:4px}.royal-face .side.right{right:4px}.royal-back{color:#e5bd72;background:linear-gradient(135deg,#5b1927,#240a12 65%,#5c2030);border-color:#d2a85e;transform:rotateY(180deg);box-shadow:inset 0 0 0 2px #9b6d36,0 3px 9px #0009}.royal-back:before{border:2px solid #c69a52}.royal-back:after{border:1px solid #9e7138}.royal-back .crest{text-shadow:0 1px 4px #000;justify-content:center;align-items:center;font-size:24px;display:flex;position:absolute;inset:0}.royal-back .orn-top,.royal-back .orn-bottom{text-align:center;font-size:12px;position:absolute;left:0;right:0}.royal-back .orn-top{top:7px}.royal-back .orn-bottom{bottom:7px}@keyframes royal-fall{0%{transform:translate3d(0,-110px,-75px) rotateZ(-24deg) scale(var(--scale));opacity:0}8%{opacity:1}35%{transform:translate3d(calc(var(--drift)*.4),30vh,65px) rotateZ(13deg) scale(var(--scale));opacity:1}65%{transform:translate3d(calc(var(--drift)*.7),68vh,-40px) rotateZ(-13deg) scale(var(--scale));opacity:1}90%{opacity:1}to{transform:translate3d(var(--drift),calc(100vh + 110px),35px) rotateZ(19deg) scale(var(--scale));opacity:0}}@keyframes royal-flip{0%{transform:rotateY(-35deg)rotateX(18deg)rotate(-12deg)}50%{transform:rotateY(95deg)rotateX(-28deg)rotate(9deg)}to{transform:rotateY(215deg)rotateX(20deg)rotate(-10deg)}}@media (prefers-reduced-motion:reduce){.royal-drop,.royal-card{animation:none}.royal-drop{display:none}}.has-card-back .royal-back{background:var(--card-back) center / cover}.has-card-back .royal-back>span{display:none}.royal-front{background:0 0;border:none;border-radius:4px;box-shadow:0 3px 9px #0008}.royal-front:before,.royal-front:after{display:none}.royal-front .card{--w:44px;cursor:default;pointer-events:none;border-radius:4px;height:66px;transition:none}.top-screen .royal-rain.front{z-index:12}.royal-rain.front .royal-drop{animation-name:royal-fall-front}@keyframes royal-fall-front{0%{transform:translate3d(0, -140px, 0) rotateZ(-20deg) scale(var(--scale));opacity:0}4%{opacity:1}42%{transform:translate3d(calc(var(--drift) * .6), 60vh, 30px) rotateZ(12deg) scale(var(--scale));opacity:1}55%{transform:translate3d(var(--drift), calc(100vh + 140px), 20px) rotateZ(20deg) scale(var(--scale));opacity:1}56%,to{transform:translate3d(var(--drift), calc(100vh + 140px), 20px) rotateZ(20deg) scale(var(--scale));opacity:0}}