@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.scroll-card { animation: riseIn 0.55s ease; }
.btn:active { transform: scale(0.98); }
.chip, .icon-btn, .btn { transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
#toast { transition: opacity 0.25s ease, transform 0.25s ease; }
.seat-avatar { transition: box-shadow 0.25s ease; }
.hand-card {
  transition: transform 0.2s cubic-bezier(.22,.8,.3,1), opacity 0.18s ease, box-shadow 0.18s ease;
  will-change: auto;
}
.hand-card.is-dragging,
.hand-card.is-leaving { will-change: transform; }
.hand-card.is-leaving {
  transform: translateY(-20px) rotate(var(--rot, 0deg)) scale(1.06);
  z-index: 20;
}
.hand-card.is-dealt {
  opacity: 0;
  transform: translateY(18px) rotate(var(--rot, 0deg)) scale(0.92);
}
.hand-card.is-dealt.is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
}
body.is-card-animating .hand-card { pointer-events: none; }

@keyframes homeElementIn {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes crestBreathe {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 3px rgba(228,193,106,.2)); }
  50% { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 0 9px rgba(246,226,162,.44)); }
}

@keyframes titleGoldShimmer {
  0%, 72%, 100% { background-position: 100% 50%; }
  82% { background-position: 0 50%; }
}

@keyframes playBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: none; }
  50% { transform: scale(1.012); filter: brightness(1.07); box-shadow: none; }
}

@keyframes buttonShimmer {
  0%, 72% { transform: translateX(-170%) skewX(-18deg); opacity: 0; }
  76% { opacity: .26; }
  88%, 100% { transform: translateX(190%) skewX(-18deg); opacity: 0; }
}

.screen[data-screen="home"] .brand-crest {
  animation: crestBreathe 5.2s ease-in-out infinite;
}

.screen[data-screen="home"] .brand h1 {
  color: transparent;
  background: linear-gradient(105deg, #d8ad52 12%, #fff1b6 34%, #c89231 52%, #f8dfa0 72%, #d8ad52 88%);
  background-size: 280% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: titleGoldShimmer 7.2s ease-in-out infinite;
}

body.is-home-entering .screen[data-screen="home"] .brand,
body.is-home-entering .screen[data-screen="home"] .brand-kicker,
body.is-home-entering .screen[data-screen="home"] .brand h1,
body.is-home-entering .screen[data-screen="home"] .tagline,
body.is-home-entering .screen[data-screen="home"] .menu .btn {
  animation: homeElementIn .52s cubic-bezier(.22,.8,.3,1) both;
}
body.is-home-entering .screen[data-screen="home"] .brand { animation-delay: .04s; }
body.is-home-entering .screen[data-screen="home"] .brand-kicker { animation-delay: .13s; }
body.is-home-entering .screen[data-screen="home"] .brand h1 { animation-delay: .2s; }
body.is-home-entering .screen[data-screen="home"] .tagline { animation-delay: .28s; }
body.is-home-entering .screen[data-screen="home"] .menu .btn:nth-child(1) { animation-delay: .34s; }
body.is-home-entering .screen[data-screen="home"] .menu .btn:nth-child(2) { animation-delay: .41s; }
body.is-home-entering .screen[data-screen="home"] .menu .btn:nth-child(3) { animation-delay: .47s; }

.screen[data-screen="home"] .menu-primary {
  position: relative;
  isolation: isolate;
  box-shadow: none;
  animation: playBreathe 3.1s ease-in-out infinite;
}
.screen[data-screen="home"] .menu-primary::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,244,191,.72), transparent);
  pointer-events: none;
  animation: buttonShimmer 7s ease-in-out infinite;
}
.screen[data-screen="home"] .menu-primary.is-launching {
  animation: none;
  transform: scale(.985);
  filter: brightness(1.16);
  box-shadow: none;
}
.launch-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff0aa;
  box-shadow: 0 0 7px rgba(246,226,162,.9);
  pointer-events: none;
  animation: launchSpark .4s ease-out var(--spark-delay) both;
}
@keyframes launchSpark {
  from { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), -25px) scale(.35); }
}

@media (hover: hover) and (pointer: fine) {
  .screen[data-screen="home"] .menu .btn:hover {
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.1);
  }
  .hand-card:not(.is-dragging):hover {
    transform: translateY(-6px) rotate(0deg) scale(1.035);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 40 !important;
  }
}

body.is-home-exiting .screen[data-screen="home"] {
  animation: homeSceneOut .42s cubic-bezier(.4,0,.7,1) both;
}
body.is-game-entering .screen[data-screen="game"] {
  animation: gameSceneIn .5s cubic-bezier(.22,.8,.3,1) both;
}

@keyframes homeSceneOut {
  to { opacity: 0; filter: brightness(.58); transform: scale(1.012); }
}
@keyframes gameSceneIn {
  from { opacity: 0; filter: brightness(.62); }
  to { opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="home"] .brand-crest,
  .screen[data-screen="home"] .brand h1,
  .screen[data-screen="home"] .menu-primary,
  .screen[data-screen="home"] .menu-primary::after,
  .launch-spark,
  body.is-home-entering .screen[data-screen="home"] .brand,
  body.is-home-entering .screen[data-screen="home"] .brand-kicker,
  body.is-home-entering .screen[data-screen="home"] .brand h1,
  body.is-home-entering .screen[data-screen="home"] .tagline,
  body.is-home-entering .screen[data-screen="home"] .menu .btn,
  body.is-home-exiting .screen[data-screen="home"],
  body.is-game-entering .screen[data-screen="game"] {
    animation: none;
  }
}
