*{box-sizing:border-box}body:has(.demo-board){margin:0;background:#102c32;color:#eee6cc;font-family:serif;overflow:hidden}.demo-board{height:100vh;background:radial-gradient(ellipse,#37614d88,transparent),linear-gradient(#071d29cc,#163b32dd),url('../assets/images/prototypes/rald-ending-background-v2.png') center/cover}.demo-board .hand{position:absolute;left:50%;transform:translateX(-50%);padding:15px 35px;border:1px solid #d8c88b77;background:#102a35;border-radius:9px;white-space:nowrap;z-index:2}.demo-board .opponent-hand{top:22px}.demo-board .player-hand{bottom:22px}.board-label{position:absolute;top:42%;width:100%;text-align:center;line-height:2;color:#c4cebb66}.demo-board .player-place{position:absolute;bottom:100px;right:25px;font:15px system-ui}.demo-board .place-rule-gauge{padding:15px;background:#253e51;border:1px solid #bdcfb6}.received{box-shadow:0 0 35px #efd97d}.heart-reward{color:#eee6cc;font-family:serif;position:fixed;inset:0;z-index:100000;background:radial-gradient(ellipse at center,#622080dd,#060d21ee 75%);overflow:hidden;opacity:0;transition:opacity .4s}.heart-reward.visible{opacity:1}.reward-copy{position:absolute;top:10%;width:100%;text-align:center;z-index:3;text-shadow:0 0 25px #dca2ff}.reward-copy small{letter-spacing:.3em;color:#dcc1ec}.reward-copy h1{font-size:clamp(20px,3.4vw,38px);margin:14px}.reward-copy p{color:#e5d1f1}.reward-crystal{position:absolute;left:50%;top:55%;width:min(280px,40vw);height:min(280px,40vw);object-fit:contain;transform:translate(-50%,-50%);border-radius:24%;filter:drop-shadow(0 0 34px #e5a7ff);animation:crystal-enter 2.5s ease-out both}.reward-rays{position:absolute;width:130vmax;height:130vmax;left:50%;top:55%;background:repeating-conic-gradient(from 0deg,transparent 0deg 13deg,#deb0ff18 15deg 20deg,transparent 23deg 30deg);animation:rays 18s linear infinite}.reward-ring{position:absolute;left:50%;top:55%;width:330px;height:330px;border:1px solid #ffdb95aa;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 50px #b783e366,inset 0 0 50px #b783e333}.reward-spark{position:absolute;left:50%;top:55%;width:5px;height:5px;background:#ffe5ac;border-radius:50%;box-shadow:0 0 15px #fff;animation:spark 2.5s var(--delay) ease-out infinite}.distribute .reward-crystal,.distribute .reward-ring{opacity:0;transition:opacity .25s}.reward-card{position:absolute;left:50%;top:50%;width:140px;height:195px;border:3px solid #e7c876;border-radius:12px;background:linear-gradient(135deg,#673884,#171629);box-shadow:0 0 35px #d396ee;text-align:center;display:flex;flex-direction:column;align-items:center;padding:9px}.reward-card img{width:100%;height:125px;object-fit:contain}.reward-card strong{font-size:14px}.reward-card small{font-size:9px;letter-spacing:.15em;margin-top:7px}.heart-reward.finished{opacity:0}@keyframes crystal-enter{from{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-15deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes rays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spark{from{opacity:0;transform:rotate(var(--angle)) translateX(60px)}30%{opacity:1}to{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance))}}@media(prefers-reduced-motion:reduce){.heart-reward *{animation:none!important}.reward-rays{transform:translate(-50%,-50%)} }
.reward-battle{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,#60817355,transparent 70%),linear-gradient(#10293b,#244c38);transition:opacity .5s}.reward-ground{position:absolute;top:69%;height:31%;width:100%;background:linear-gradient(#64815455,#182f29);border-top:2px solid #bed39155}.reward-hero{position:absolute;width:22%;height:auto;left:19%;bottom:31%;filter:drop-shadow(0 12px 6px #07130a77)}.reward-enemy{position:absolute;width:20%;height:35%;object-fit:contain;left:60%;bottom:30%;filter:drop-shadow(0 12px 6px #07130a77);transform-origin:50% 90%;transition:opacity .7s,filter .4s,transform .7s}.reward-battle-caption{position:absolute;top:12%;width:100%;text-align:center;font-size:clamp(20px,3vw,34px);color:#fff0ce;text-shadow:0 2px 12px #000}.reward-impact{position:absolute;left:64%;top:48%;font-size:100px;color:#fff3b9;opacity:0;text-shadow:0 0 30px #ffd35d}.battle-intro .reward-copy,.battle-intro .reward-rays,.battle-intro .reward-ring,.battle-intro .reward-spark{visibility:hidden}.battle-intro .reward-crystal{visibility:hidden;animation:none}.strike .reward-hero{animation:reward-strike 1s ease-in-out both}.defeated .reward-enemy{opacity:0;filter:brightness(3) drop-shadow(0 0 30px #f5d2ff);transform:rotate(16deg) scale(.65)}.defeated .reward-impact{animation:reward-impact .6s ease-out both}.drop .reward-crystal{visibility:visible;z-index:2;width:140px;height:140px;animation:reward-drop 1s ease-in-out both}.obtained .reward-crystal{animation:crystal-enter .7s ease-out both}@keyframes reward-strike{0%{transform:translate(0,0) scale(1.1,.85)}50%{transform:translate(160%,-35%) rotate(-12deg)}65%{transform:translate(165%,0) scale(1.1,.9)}100%{transform:translate(0,0)}}@keyframes reward-impact{0%{opacity:1;transform:scale(.4)}30%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2)}}@keyframes reward-drop{from{opacity:0;left:69%;top:61%;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;left:69%;top:45%;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;left:50%;top:55%;transform:translate(-50%,-50%) scale(1)}}
.reward-battle{--hero-width:clamp(64px,9.6vw,120px);--enemy-width:clamp(69px,10.3vw,129px)}.reward-battle .reward-hero{width:var(--hero-width);left:calc(37% - var(--hero-width)/2)}.reward-battle .reward-enemy{width:var(--enemy-width);height:auto;left:calc(68% - var(--enemy-width)/2);bottom:31%}.strike .reward-hero{animation:reward-sized-strike 1s ease-in-out both}@keyframes reward-sized-strike{0%{transform:scale(1.1,.85)}50%{transform:translate(calc(31vw - 55px),-35%) rotate(-12deg)}65%{transform:translate(calc(31vw - 50px),0) scale(1.1,.9)}100%{transform:translate(0,0)}}