/* Small, interruptible transitions. Never animate the canvas or polled room SVG. */
:root {
  --motion-quick: 120ms;
  --motion-control: 180ms;
  --motion-panel: 240ms;
  --ease-settle: cubic-bezier(.2, .8, .2, 1);
}

:is(button, .navstrip a, .community-button, .community-filter) {
  transition: background-color var(--motion-control) ease,
    border-color var(--motion-control) ease, color var(--motion-control) ease,
    box-shadow var(--motion-control) ease;
}
:is(.btn-claim, .btn-buy, .btn-ghost, .icon-btn, .community-button, .room-game-head button) {
  transition: background-color var(--motion-control) ease,
    border-color var(--motion-control) ease, color var(--motion-control) ease,
    box-shadow var(--motion-control) ease, scale var(--motion-quick) var(--ease-settle);
}
:is(.btn-claim, .btn-buy, .btn-ghost, .icon-btn, .community-button, .room-game-head button):active:not(:disabled) {
  scale: .97;
}
:is(input, select, textarea) {
  transition: border-color var(--motion-control) ease, box-shadow var(--motion-control) ease;
}
.mini-cabinet {
  transition: background-color var(--motion-control) ease, border-color var(--motion-control) ease,
    color var(--motion-control) ease;
}

/* display stays visible during the fade, but closed overlays stop taking input immediately. */
.modal {
  opacity: 1;
  transition: opacity var(--motion-control) ease, display var(--motion-control) allow-discrete;
}
.modal.hidden { opacity: 0; pointer-events: none; }
.modal-box {
  translate: 0 0;
  scale: 1;
  transition: translate var(--motion-panel) var(--ease-settle), scale var(--motion-panel) var(--ease-settle);
}
.modal.hidden .modal-box { translate: 0 8px; scale: .99; }

/* The native cabinet closes immediately so disposed games cannot linger on screen. */
.room-game-window[open] { animation: cabinet-enter var(--motion-panel) var(--ease-settle); }
@keyframes cabinet-enter {
  from { opacity: 0; scale: .98; }
  to { opacity: 1; scale: 1; }
}
@starting-style {
  .modal:not(.hidden) { opacity: 0; }
  .modal:not(.hidden) .modal-box { translate: 0 8px; scale: .99; }
}

.modal-body, .room-game-body { overscroll-behavior: contain; }
@media (max-width: 820px) {
  .side { transition: transform var(--motion-panel) var(--ease-settle); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-quick: 0ms; --motion-control: 0ms; --motion-panel: 0ms; }
  .modal, .modal-box, .side, .room-game-window[open] { transition: none; animation: none; }
  .modal.hidden .modal-box { translate: none; scale: 1; }
  :is(.btn-claim, .btn-buy, .btn-ghost, .icon-btn, .community-button, .room-game-head button):active:not(:disabled) { scale: 1; }
}