/* Action feedback stays local, so the layout and click targets stay stable. */
button, .menu-button { position: relative; overflow: hidden; }
.round-chip > span:not(.action-ripple) { position: relative; z-index: 1; }
.round-chip .action-ripple { padding: 0; border: 0; }
.action-ripple { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; background: currentColor; }
.play .action-ripple { background: #ffffff; }
.quick-sound[aria-pressed='false'] .sound-waves { display: none; }
.quick-sound[aria-pressed='false'] .sound-off { display: block; }
.quick-sound[aria-pressed='false'] { color: var(--muted); }
.quick-sound .icon, .menu-button .icon { transition: transform .22s ease-out; }
.quick-sound[aria-pressed='true']:hover .icon { transform: scale(1.15); }
.game-menu[open] .menu-button .icon { transform: rotate(90deg); }
.game-menu[open] .menu-panel { transform-origin: top right; animation: menu-enter .2s cubic-bezier(.2,.8,.3,1) both; }
dialog[open] { animation: dialog-enter .24s cubic-bezier(.2,.8,.3,1) both; }
dialog[open]::backdrop { animation: backdrop-enter .2s ease-out both; }
.fair-panel:not([hidden]) { animation: menu-enter .2s ease-out both; transform-origin: top; }
.game-loader { transition: opacity .24s ease-out; }
.game-loader.is-leaving { opacity: 0; pointer-events: none; }
.loader-mark { animation: loader-pop 1.4s cubic-bezier(.3,.7,.3,1) infinite; }
.app:not([aria-busy]) .num-block { animation: board-enter .44s cubic-bezier(.2,.8,.3,1) both; }
.app:not([aria-busy]) .num-block.casino { animation-delay: .08s; }
.app:not([aria-busy]) .focus-row { animation: board-enter .44s .04s cubic-bezier(.2,.8,.3,1) both; }
.app:not([aria-busy]) .controls { animation: board-enter .4s .12s cubic-bezier(.2,.8,.3,1) both; }
.num-block::before { content: ''; position: absolute; top: -1px; left: -1px; width: 24px; height: 24px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); border-radius: 8px 0 0; pointer-events: none; }
.num-block.casino::before { left: auto; right: -1px; border-left: 0; border-right: 2px solid var(--coral); border-top-color: var(--coral); border-radius: 0 8px 0 0; }
.num-block::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: -1px; height: 2px; background: var(--accent); opacity: 0; transform: scaleX(0); transform-origin: center; }
.num-block.casino::after { background: var(--coral); }
.revealing .num-block.casino::after { animation: draw-charge 2.2s ease-out forwards; }
.revealing .casino .number-underline { animation: draw-beat .45s ease-in-out infinite alternate; }
.revealing .indicator { animation: needle-glow .45s ease-in-out infinite alternate; }
.play[aria-busy='true'] { opacity: 1; padding-left: 28px; color: var(--accent-light); border-color: #6ae6ff66; border-bottom-color: #36536a; background: #213e56; }
.play[aria-busy='true']::before { content: ''; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin: -5px 16px 0 -28px; border: 2px solid #6ae6ff44; border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 3px; animation: drawing-spin .7s linear infinite; }
.play[aria-busy='true']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 35%,#6ae6ff18 50%,transparent 65%); animation: drawing-sweep 1.15s ease-in-out infinite; pointer-events: none; }
.distance-label:not(:empty) { animation: status-enter .24s ease-out both; }
.win-banner.visible { animation: banner-enter .3s cubic-bezier(.2,.8,.3,1) both; }
.random-button:active:enabled .icon { transform: rotate(180deg); }
.random-button .icon { transition: transform .28s cubic-bezier(.2,.8,.3,1); }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes loader-pop { 0%,100% { transform: scale(1) rotate(0); } 35% { transform: scale(1.14) rotate(-8deg); } 65% { transform: scale(.95) rotate(5deg); } }
@keyframes board-enter { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draw-charge { from { opacity: .5; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes draw-beat { from { opacity: .35; transform: scaleX(.7); } to { opacity: 1; transform: scaleX(1.5); } }
@keyframes needle-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes drawing-spin { to { transform: rotate(360deg); } }
@keyframes drawing-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes status-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes banner-enter { 0% { opacity: 0; transform: translateY(8px) scale(.88); } 70% { opacity: 1; transform: translateY(-2px) scale(1.035); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 420px) { .header-actions { gap: 4px; } .balance-block { padding: 0 7px; gap: 5px; } .logo { font-size: 18px; } .brand { gap: 5px; } }
@media (max-width: 350px) { .logo { display: none; } .brand-mark { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark, .revealing .casino .number-underline, .revealing .indicator, .play::before, .play::after { animation: none !important; }
  .action-ripple { display: none; }
  .play[aria-busy='true']::before { border-color: var(--accent); }
}