/* Scoped presentation. These finite effects never drive care or save state. */
.game-motion-dialog {
  box-sizing: border-box;
  color: #213c2d;
  background: #fffdf6;
  border: 1px solid #9aae87;
  border-radius: 24px;
  box-shadow: 0 18px 55px #122c2545;
  font: inherit;
}
.game-motion-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(18px, 4vw, 30px);
  overflow: auto;
}
.game-motion-dialog::backdrop { background: #102a21b8; }
.game-motion-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.game-motion-dialog-header .game-motion-close { flex: 0 0 auto; }
.game-motion-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  background: #102a21b8;
  padding: 12px;
}
.game-motion-backdrop .game-motion-dialog { position: relative; display: block; }
.game-motion-dialog .game-motion-title { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; margin: .4rem 0 .8rem; color: #213c2d; }
.game-motion-dialog .game-motion-description { margin: .6rem 0; line-height: 1.5; color: #475b48; }
.game-motion-dialog .game-motion-eyebrow { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: #526542; }
.game-motion-stage {
  position: relative;
  isolation: isolate;
  height: clamp(200px, 45vh, 320px);
  height: clamp(200px, 45dvh, 320px);
  margin: 20px 0;
  background: radial-gradient(ellipse, #f3e9c8, #e4ebdc);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.game-motion-art { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; object-fit: contain; }
.game-motion-stage > .game-motion-art { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(.9); z-index: 1; }
.game-motion-egg {
  position: absolute;
  width: 150px;
  height: 190px;
  color: #395743;
}
.game-motion-shell {
  position: absolute;
  inset: 0;
  border-radius: 55% 55% 48% 48%;
  border: 4px solid #395743;
  background: radial-gradient(circle at 35% 53%, #bda568 0 5px, transparent 6px),
    radial-gradient(circle at 66% 71%, #bda568 0 7px, transparent 8px),
    linear-gradient(135deg, #fff9e6, #d4b476);
}
.game-motion-shell-top { clip-path: polygon(0 0, 100% 0, 100% 55%, 85% 58%, 70% 60%, 60% 68%, 50% 63%, 38% 68%, 25% 60%, 15% 58%, 0 58%); }
.game-motion-shell-bottom { clip-path: polygon(0 58%, 15% 58%, 25% 60%, 38% 68%, 50% 63%, 60% 68%, 70% 60%, 85% 58%, 100% 55%, 100% 100%, 0 100%); }
.game-motion-crack { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.game-motion-stage[data-phase="intact"] .game-motion-egg { animation: game-motion-rock .65s ease-in-out 1; }
.game-motion-stage[data-phase="crack"] .game-motion-egg { animation: game-motion-rock .6s ease-in-out 1; }
.game-motion-stage[data-phase="crack"] .game-motion-crack { opacity: 1; }
.game-motion-stage[data-phase="reveal"] .game-motion-shell-top { animation: game-motion-shell-top .55s ease-out forwards; }
.game-motion-stage[data-phase="reveal"] .game-motion-shell-bottom { animation: game-motion-shell-bottom .55s ease-out forwards; }
.game-motion-stage[data-phase="reveal"] > .game-motion-art { animation: game-motion-reveal .6s ease-out forwards; }
.game-motion-stage[data-phase="complete"] .game-motion-egg { display: none; }
.game-motion-stage[data-phase="complete"] > .game-motion-art { opacity: 1; transform: none; }
.game-motion-dialog .game-motion-fallback, .game-motion-companion .game-motion-fallback { margin: 0; padding: 1.5rem; max-width: 24rem; text-align: center; color: #475b48; font-size: .9rem; line-height: 1.5; }
.game-motion-dialog [hidden], .game-motion-companion [hidden] { display: none; }
.game-motion-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.game-motion-dialog .game-motion-button, .game-motion-companion .game-motion-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #859b78;
  border-radius: 12px;
  padding: .65rem .9rem;
  color: #213c2d;
  background: #e4eadb;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}
.game-motion-button:hover { background: #f1dbad; }
.game-motion-button:disabled { opacity: .65; cursor: default; }
.game-motion-dialog :focus-visible, .game-motion-companion :focus-visible { outline: 3px solid #865916; outline-offset: 3px; }
.game-motion-dialog .game-motion-close { background: #e6cb90; }
.game-motion-dialog .game-motion-fine, .game-motion-companion .game-motion-fine { margin: .9rem 0 0; font-size: .75rem; line-height: 1.5; color: #526542; }
.game-motion-companion {
  position: fixed;
  z-index: 80;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.game-motion-pet-hit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}
.game-motion-pet-hit:hover, .game-motion-pet-hit:active { background: transparent; box-shadow: none; }
.game-motion-pet-hit:active { cursor: grabbing; }
.game-motion-pet-hit:focus-visible { outline: 2px dashed #865916; outline-offset: -2px; }
.game-motion-companion-art {
  display: block;
  position: relative;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.game-motion-companion-art .game-motion-art { width: 100%; height: 100%; object-fit: contain; }
.game-motion-companion-art .game-motion-pet-atlas {
  display: block;
  position: absolute;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: fill;
  z-index: 1;
}
.game-motion-atlas-preview { position: relative; overflow: hidden; aspect-ratio: 1; }
.game-motion-atlas-preview .game-motion-preview-atlas {
  position: absolute; top: 0; left: 0; width: 600%; height: 400%;
  max-width: none; max-height: none; object-fit: fill; pointer-events: none;
}
.game-motion-stage > .game-motion-atlas-preview { width: min(100%, 320px); height: auto; }
.game-motion-golden-aura {
  display: block; position: absolute; left: 12%; width: 76%; top: 12%; height: 76%;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, #ffd64f70 0%, #edb81e40 42%, #e6a51218 65%, transparent 100%);
}
.game-motion-hit-clip { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.game-motion-atlas-preview[data-rarity="legendary"]::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, #ffd64f70, #edb81e30 55%, transparent 100%);
}
.game-motion-companion [hidden], .game-motion-pet-menu[hidden] { display: none !important; }
.game-motion-pet-missing { border: 1px dashed #859b78; border-radius: 50%; }
.game-motion-pet-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.game-motion-pet-menu {
  position: fixed;
  z-index: 81;
  box-sizing: border-box;
  width: 208px;
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #9aae87;
  border-radius: 12px;
  background: #fffdf6;
  color: #213c2d;
  box-shadow: 0 6px 22px #122c2533;
  font: inherit;
}
.game-motion-pet-availability { margin: 4px 7px 7px; font-size: .72rem; line-height: 1.4; }
.game-motion-pet-item {
  display: block;
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-size: .82rem;
  line-height: 1.35;
  cursor: pointer;
}
.game-motion-pet-item:hover, .game-motion-pet-item:focus-visible { background: #e4eadb; }
.game-motion-pet-item:focus-visible { outline: 2px solid #865916; outline-offset: -2px; }
.game-motion-pet-item:disabled { opacity: .5; cursor: default; }
.game-motion-greeting img, img.game-motion-greeting { animation: game-motion-hello .85s ease-in-out 1; transform-origin: 50% 88%; }
.game-motion-egg-tap svg { animation: game-motion-rock .38s ease-in-out 1; transform-origin: 50% 88%; }
.game-egg-art[data-egg-id] { position: relative; }
.game-egg-art .game-egg-peek {
  position: absolute;
  top: 47%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border: 2px solid #395743;
  border-radius: 50%;
  background: #fff9e6;
  box-shadow: 0 2px 5px #213c2d26;
  overflow: hidden;
  pointer-events: none;
}
.game-egg-art .game-egg-peek img { width: 100%; height: 100%; object-fit: contain; }
.game-egg-art[data-stage="nearly-ready"] .game-egg-peek { width: 50px; height: 50px; }
.game-egg-art[data-stage="final-cracks"] .game-egg-peek { width: 66px; height: 66px; border-radius: 45% 48% 40% 44%; }
@keyframes game-motion-rock { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
@keyframes game-motion-shell-top { to { opacity: 0; transform: translate(-25px, -38px) rotate(-15deg); } }
@keyframes game-motion-shell-bottom { to { opacity: 0; transform: translate(25px, 30px) rotate(12deg); } }
@keyframes game-motion-reveal { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes game-motion-hello { 0%, 100% { transform: none; } 30% { transform: translateY(-4px) rotate(-2deg); } 65% { transform: translateY(-2px) rotate(2deg); } }
@media (max-width: 380px) {
  .game-motion-dialog { border-radius: 18px; }
  .game-motion-dialog .game-motion-stage { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-motion-stage *, .game-motion-greeting img, img.game-motion-greeting, .game-motion-egg-tap svg { animation: none !important; transition: none !important; }
  .game-motion-stage .game-motion-egg { display: none; }
  .game-motion-stage > .game-motion-art { opacity: 1; transform: none; }
}