#opening-dice{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#green-opening-dice,#blue-opening-dice{display:flex;gap:7px;justify-content:center;min-width:0}
#opening-dice .battle-die{width:calc((100% - 14px)/3);max-width:56px;padding:6px;gap:3px;flex-shrink:0}
#blue-opening-dice .battle-die{background:linear-gradient(135deg,#447fe8,#2049b3);box-shadow:0 5px 0 #122d72,0 9px 14px #0005}
.game-card.battle .card-number{color:var(--metal,#edc65a)}
.game-card.battle.deal-face{animation-name:metalFlash}
@keyframes metalFlash{0%,36%,65%,100%{box-shadow:0 6px 25px #0006}45%,53%{box-shadow:0 0 0 5px var(--metal),0 0 40px var(--metal),0 0 75px var(--metal)}}
#battle-firework .rocket{left:50vw;top:96vh;animation:winnerRocket .7s ease-out both}
#battle-firework .battle-burst{left:var(--winner-x);top:38vh;transform:scale(1.9)}
#battle-firework .battle-burst span{font-size:36px;animation:winnerStars 2.2s calc(.68s + var(--star-delay)) both}
@keyframes winnerRocket{0%{opacity:0;transform:translate(0,0) scaleY(2)}15%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(calc(var(--winner-x) - 50vw),-58vh) scaleY(.2)}}
@keyframes winnerStars{0%{opacity:1;transform:scale(.2)}35%,85%{opacity:1;transform:translate(var(--star-x),var(--star-y)) scale(1)}100%{opacity:0;transform:translate(var(--star-x),var(--star-y)) scale(.8)}}
@media(prefers-reduced-motion:reduce){#battle-firework .rocket,#battle-firework .battle-burst span{display:none}.game-card.battle.deal-face{animation:none}}