/* Standard transforms keep feedback consistent without enlarging the controls. */
html.glass-design .primary,
html.glass-design .quiet,
html.glass-design .mode-card,
html.glass-design .online-start {
  transform-origin: center;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  html.glass-design .primary:not(:disabled):hover,
  html.glass-design #game .primary:not(:disabled):hover {
    scale: 1;
    transform: translateY(-1px);
  }
  html.glass-design .quiet:not(:disabled):hover,
  html.glass-design .mode-card:not(:disabled):hover,
  html.glass-design .online-start:not(:disabled):hover { transform: translateY(-1px); }
}
html.glass-design .primary:not(:disabled):active,
html.glass-design #game .primary:not(:disabled):active,
html.glass-design .quiet:not(:disabled):active,
html.glass-design .mode-card:not(:disabled):active,
html.glass-design .online-start:not(:disabled):active {
  scale: 1;
  transform: translateY(1px);
}

/* The reel is stable while the identities change inside it. */
#game .auction[data-phase="spinning"] #card-zone,
#game .auction[data-phase="free-spinning"] #card-zone {
  animation: hbw-slot-reel .2s linear infinite;
  will-change: transform, filter;
}
#game .auction[data-phase="spinning"] .spinning,
#game .auction[data-phase="free-spinning"] .spinning { animation: none; }
@keyframes hbw-slot-reel {
  0%, 100% { transform: translateY(-4px); filter: blur(.3px); }
  45% { transform: translateY(4px); filter: blur(1.2px); }
}