.topbar-actions { display: flex; align-items: center; gap: 8px; }
.soundbtn {
  position: relative; width: 44px; height: 44px; border: 1px solid #ffffff26;
  border-radius: 12px; background: #ffffff0a; color: var(--gold); font-size: 24px; cursor: pointer;
}
.soundbtn[data-enabled="false"] { color: var(--muted); }
.soundbtn[data-enabled="false"]::after { content: ''; position: absolute; width: 25px; height: 2px; background: currentColor; left: 9px; top: 20px; transform: rotate(-45deg); }
.juice-layer { position: fixed; inset: var(--pp-safe-top) var(--pp-safe-right) var(--pp-safe-bottom) var(--pp-safe-left); z-index: 105; pointer-events: none; overflow: hidden; }
.juice-particle { position: absolute; font-size: 20px; line-height: 1; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  .hero-card { animation: card-arrival 750ms cubic-bezier(.15,.8,.3,1.15) both; }
  .card-right { animation-delay: 110ms; }
  .card-spark { animation: spark-arrival 850ms 180ms both; }
  .mode-card { transition: border-color .2s, background .2s, box-shadow .2s; }
  .mode-card.selected .m-emoji { animation: mode-cheer 480ms cubic-bezier(.2,.8,.25,1); }
  .mode-card.selected::after { animation: check-pop 320ms cubic-bezier(.2,.8,.2,1.5); }
  .slot.active { animation: card-ready 2.4s ease-in-out 3; }
  .card { animation: card-slide 340ms cubic-bezier(.16,.8,.3,1); transition: transform .58s cubic-bezier(.2,.75,.25,1.1); }
  .card.flipped .front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 15%, #fff9 45%, transparent 70%); animation: card-shine 650ms both; pointer-events: none; }
  .choice.is-picked { opacity: 1; outline: 3px solid var(--gold); outline-offset: 4px; animation: choice-lock 320ms ease-out; }
  .choices:has(.is-picked) .choice:not(.is-picked) { opacity: .22; transition: opacity .2s; }
  .panel { animation: result-arrival 480ms cubic-bezier(.16,.85,.3,1.18); }
  #overlay .panel.lose { animation: loss-arrival 440ms cubic-bezier(.2,.8,.3,1); }
  #scr-end:not(.hidden) .logo { animation: winner-arrival 650ms cubic-bezier(.2,.9,.2,1.15); }
  #btn-play { position: relative; overflow: hidden; }
  #btn-play::after { content: ''; position: absolute; inset: -100% -30%; background: linear-gradient(110deg, transparent 35%, #fff6 48%, transparent 61%); transform: translateX(-100%); animation: play-shine 4.5s 1.2s 2; pointer-events: none; }
}
@keyframes card-arrival { from { translate: 0 30px; scale: .8; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes spark-arrival { from { rotate: -100deg; scale: 0; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }
@keyframes mode-cheer { 0% { transform: rotate(-15deg) scale(.75); } 60% { transform: rotate(12deg) scale(1.2); } 100% { transform: none; } }
@keyframes check-pop { from { scale: 0; } to { scale: 1; } }
@keyframes card-ready { 0%,100% { box-shadow: 0 0 0 4px #ffd36a17; } 50% { box-shadow: 0 0 0 7px #ffd36a08, 0 0 22px #ffd36a30; } }
@keyframes card-slide { from { translate: 0 -35px; rotate: -9deg; scale: .8; opacity: 0; } to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; } }
@keyframes card-shine { from { opacity: .8; clip-path: inset(0 100% 0 0); } to { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes choice-lock { 50% { scale: 1.06; } }
@keyframes result-arrival { from { translate: 0 32px; scale: .86; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes loss-arrival { 0% { translate: 0 18px; opacity: 0; } 45% { translate: -7px 0; } 70% { translate: 6px 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes winner-arrival { from { scale: .65; rotate: -9deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes play-shine { 0%,70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .juice-layer { display: none; } }