/* Paws Multiverse finishing touches, shared by every page: springy buttons, menus that pop open, a soft vignette over
   the 3D view, a fade-in when a game opens, and confetti bursts. Uses the separate `scale`/`translate` properties so it
   never fights a button's own `transform` (some buttons are centered with one). */
button, .btn, .chip, .sw { transition: scale 0.14s cubic-bezier(.3, 1.8, .5, 1), filter 0.15s, box-shadow 0.15s; }
@media (hover: hover) { button:not(:disabled):hover, .btn:hover, .chip:hover { filter: brightness(1.06) saturate(1.05); } } /* (mouse only: a finger's tap would leave it stuck looking picked on an iPad) */
button:not(:disabled):active, .btn:active, .chip:active, .sw:active { scale: 0.94; filter: brightness(0.95); }
.modal.open > .box, .modal.open > .av-box, #av-modal.open > .av-box { animation: pm-pop 0.32s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pm-pop { from { opacity: 0; scale: 0.9; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.pm-vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20, 30, 70, 0.22) 100%); }
canvas.pm-fade { opacity: 0; transition: opacity 0.9s ease; }
canvas.pm-fade.pm-in { opacity: 1; }
.pm-confetti { position: fixed; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 50; will-change: transform, opacity; }
/* touch screens: compact menu buttons, color swatches and text links grow to a size a kid's finger can hit (36 px),
   without changing how menus look with a mouse */
@media (pointer: coarse) {
  button.small, .pm-slot button, .gfx button { min-height: 36px; min-width: 36px; }
  button.swatch { width: 34px; height: 34px; }
  a.home, button.link { display: inline-block; min-height: 36px; padding-block: 8px; box-sizing: border-box; }
}