/* Environment-owned safe area; overrides are useful for device conformance tests. */
:root {
  --game-safe-top: env(safe-area-inset-top, 0px);
  --game-safe-right: env(safe-area-inset-right, 0px);
  --game-safe-bottom: env(safe-area-inset-bottom, 0px);
  --game-safe-left: env(safe-area-inset-left, 0px);
  --touch-target-size: 48px;
}
#safe-viewport {
  position: fixed;
  top: var(--game-safe-top);
  right: var(--game-safe-right);
  bottom: var(--game-safe-bottom);
  left: var(--game-safe-left);
}
.game-paused .flying-card { visibility: hidden; }
#hand .card.pending { opacity: .4; filter: saturate(.6); pointer-events: none; }
.primary, .home-actions>.primary { min-height: max(52px, var(--touch-target-size)); }
.secondary, .plain, .panel .plain { min-height: var(--touch-target-size); }
.icon-button, .switch { width: var(--touch-target-size); height: var(--touch-target-size); }
.switch:before { left: calc(50% - 22px); top: calc(50% - 13px); }
.switch:after { left: calc(50% - 18px); top: calc(50% - 9px); }
.switch[aria-checked=true]:after { left: calc(50% + 1px); }
.no-motion *, .no-motion *:before, .no-motion *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.no-motion button:active, .no-motion .card:hover, .no-motion #jump.held,
.no-motion #drag-ghost .card { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  button:active, .card:hover, #jump.held, #drag-ghost .card { transform: none !important; }
}