/* Shared motion language for the game chooser and both game formats. */
@keyframes jg-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jg-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes jg-pop {
  0% { opacity: 0; transform: scale(.88) rotate(-5deg); }
  65% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes jg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,117,226,.24); }
  50% { box-shadow: 0 0 0 6px rgba(74,117,226,0); }
}
@keyframes jg-wiggle {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(3px); }
}
@keyframes jg-swap {
  from { opacity: .35; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-art img, .start-mark { animation: jg-float 5.5s ease-in-out infinite; }
.start-panel, .game-panel, .side, .choice-panel { animation: jg-enter .48s ease-out backwards; }
.side { animation-delay: .1s; }
.type-grid:not([hidden]) .type-card { animation: jg-enter .42s ease-out backwards; }
.type-grid:not([hidden]) .type-card:nth-child(2) { animation-delay: .1s; }
.type-grid.is-changing .type-card { animation: jg-swap .3s ease-out backwards; }
.type-grid.is-changing .type-card:nth-child(2) { animation-delay: .06s; }
.choice-selected:not([hidden]), .paper-card:not([hidden]), .question:not([hidden]),
.explanation:not([hidden]), .reward:not([hidden]), .discovery:not([hidden]),
.success:not([hidden]), .final-panel:not([hidden]) { animation: jg-enter .36s ease-out backwards; }
.reward:not([hidden]) img, .discovery:not([hidden]) .found-letter,
.success:not([hidden]) .seal { animation: jg-pop .55s cubic-bezier(.2,.8,.25,1.2) both; }
.step-change { animation: jg-enter .38s ease-out backwards; }
.progress li.active span, .route-list li.current b { animation: jg-pulse 2.6s ease-in-out infinite; }
.code-strip .open { animation: jg-pop .42s ease-out both; }
.answer.is-wrong, .answer.jg-wrong { animation: jg-wiggle .3s ease-in-out; }

.button, .answer, .type-card, .type-card img, .place-stamp,
.progress li span, .route-list li b { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.button:active, .answer:active { transform: scale(.975); }
@media (hover:hover) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,54,66,.16); }
  .answer:not(:disabled):hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(20,54,66,.1); }
  .type-card:hover, .type-card:focus-within { transform: translateY(-5px); box-shadow: 0 19px 34px rgba(20,54,66,.14); }
  .type-card:hover img, .type-card:focus-within img { transform: rotate(-9deg) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art img, .start-mark, .start-panel, .game-panel, .side, .choice-panel,
  .type-grid:not([hidden]) .type-card, .choice-selected:not([hidden]),
  .type-grid.is-changing .type-card,
  .paper-card:not([hidden]), .question:not([hidden]), .explanation:not([hidden]),
  .reward:not([hidden]), .reward:not([hidden]) img, .discovery:not([hidden]),
  .discovery:not([hidden]) .found-letter, .success:not([hidden]),
  .success:not([hidden]) .seal, .final-panel:not([hidden]), .step-change,
  .progress li.active span, .route-list li.current b, .code-strip .open,
  .answer.is-wrong, .answer.jg-wrong { animation: none !important; }
  .button, .answer, .type-card, .type-card img, .place-stamp,
  .progress li span, .route-list li b, .meter span { transition: none !important; }
  .button:active, .answer:active { transform: none; }
  .button:hover, .answer:not(:disabled):hover, .type-card:hover,
  .type-card:focus-within, .type-card:hover img, .type-card:focus-within img { transform: none; }
}