:root {
  color-scheme: light;
  --surround-sky: #3299fd; --surround-ground: #3d7f42; --ink: #153d36; --cream: #fffde8;
  background: var(--surround-sky);
  font-family: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex]:focus-visible { outline: 7px solid #ffdc7c; outline-offset: 10px; }
button:disabled { cursor: default; }
.viewport {
  width: 100%; height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(to bottom, var(--surround-sky) 50%, var(--surround-ground) 50%);
}
.scene-frame {
  width: min(100%, calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1039 / 1513));
  width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1039 / 1513));
  aspect-ratio: 1039 / 1513; position: relative; flex: none;
}
.scene-frame::before, .scene-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; pointer-events: none; }
.scene-frame::before { right: 100%; background: linear-gradient(to bottom, #3299fd 0%, #89c1fc 12%, #7dc1fc 25%, #4babe0 32%, #71809b 40%, #638c71 50%, #2675b1 60%, #649c3a 80%, #246247 90%, #3d7f42 100%); }
.scene-frame::after { left: 100%; background: linear-gradient(to bottom, #3299fd 0%, #3da2fd 12%, #62bafd 25%, #6e8cbc 32%, #5085c9 40%, #586f9e 50%, #75a252 60%, #709b4b 80%, #559a36 90%, #3d7f42 100%); }
.scene-frame.in-park::before, .scene-frame.in-park::after { background: linear-gradient(#258ce6 0%, #68b4e1 28%, #326950 39%, #9abf4f 60%, #588744 100%); }
.scene-frame.capture-layout {
  width: min(100%, calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1039 / 2258));
  width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1039 / 2258));
  aspect-ratio: 1039 / 2258;
  background-image: linear-gradient(#092e4c30, transparent 34%, transparent 66%, #143b2b65), var(--capture-background);
  background-position: center; background-size: cover; image-rendering: pixelated;
}
.scene-frame.capture-fullscreen { width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; }
.scene-frame.capture-fullscreen::before, .scene-frame.capture-fullscreen::after { display: none; }
.capture-fullscreen .scene { overflow: visible; }
.capture-layout .park-background, .capture-layout .park-shade { visibility: hidden; }
.capture-backdrop-clip { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.capture-layout .capture-backdrop-clip { display: block; }
.capture-backdrop { position: absolute; inset: 0; background-image: linear-gradient(#092e4c30, transparent 34%, transparent 66%, #143b2b65), var(--capture-background); background-position: center; background-size: cover; transform-origin: 0 0; will-change: transform; }
.capture-camera { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.capture-effects { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.scene-fallback { display: block; width: 100%; height: 100%; }
.scene-frame.is-ready .scene-fallback { visibility: hidden; }
.game-sound {
  display: none; position: fixed; z-index: 20;
  top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; padding: 6px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); touch-action: manipulation;
}
.is-ready .game-sound { display: block; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .game-sound {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  }
}
.game-sound-disc {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgb(255 253 232 / 30%);
  transition: background-color 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.game-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-sound-muted, .game-sound[aria-pressed="false"] .game-sound-waves { display: none; }
.game-sound[aria-pressed="false"] .game-sound-muted { display: block; }
@media (hover: hover) {
  .game-sound:hover .game-sound-disc { background: rgb(255 253 232 / 45%); }
}
.game-sound:active .game-sound-disc { background: rgb(255 253 232 / 55%); transform: scale(.94); }
.game-sound:focus-visible { outline-width: 3px; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .game-sound-disc { transition: none; }
  .game-sound:active .game-sound-disc { transform: none; }
}
.scene { position: absolute; inset: 0 auto auto 0; width: 1039px; height: 1513px; transform: scale(var(--scene-scale, 1)); transform-origin: top left; isolation: isolate; overflow: hidden; }
.scene img, .scene-fallback { image-rendering: pixelated; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hatch-view, .park-view, .capture-view { position: absolute; inset: 0; }
.scene-background, .park-background { display: block; width: 1039px; height: 1513px; object-fit: cover; }
.egg-actor { position: absolute; inset: 0; pointer-events: none; }
.egg-button { position: absolute; padding: 0; border: 0; background: transparent; pointer-events: auto; touch-action: manipulation; transform-origin: 50% 96%; }
.egg-sprite { width: 100%; height: 100%; display: block; }
.egg-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crack { fill: none; stroke: #26312a; stroke-width: 3.5; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(2px 1px 0 #ffefbb); }
.crack-two { stroke-width: 6; }
.motion-mark { position: absolute; display: block; opacity: 0; }
.shell-pieces { position: absolute; inset: 0; pointer-events: none; }
.shell-piece { position: absolute; width: 300px; height: 387px; background: url('./assets/scene/egg.png') center / 100% 100%; }
.hatch-creature { position: absolute; left: 359px; top: 660px; width: 320px; height: 350px; object-fit: contain; }
.hatch-caption { position: absolute; top: 1150px; left: 60px; right: 60px; text-align: center; color: white; text-shadow: 0 3px 0 #143c2c, 0 1px 15px #153d36; }
.hatch-caption p { font-size: 34px; font-weight: 800; letter-spacing: 3px; margin: 24px 0 12px; }
.hatch-caption span { font-size: 25px; letter-spacing: 2px; }
.step-dots { display: flex; justify-content: center; gap: 22px; }
.step-dots i { width: 15px; height: 15px; background: #fff8; box-shadow: 0 3px 0 #153d3680; }
.step-dots i.filled { background: #fff6a3; }
.park-shade { position: absolute; inset: 0; background: linear-gradient(#092e4c65, transparent 34%, transparent 66%, #143b2b9e); pointer-events: none; }
.eyebrow { font-size: 21px; font-weight: 800; letter-spacing: 5px; }
.creature-name { position: absolute; top: var(--creature-name-y); left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 28px; width: 660px; padding: 34px 36px; border-radius: 90px; background: #153a42b8; font-size: 60px; line-height: 1.2; font-weight: 400; color: white; white-space: nowrap; }
.creature-name small { font-size: 44px; }
.name-divider { color: #ffffff80; font-size: 46px; }
.capture-creature { position: absolute; left: calc(var(--target-x) - var(--creature-width) / 2); top: calc(var(--target-y) - var(--creature-height) / 2); width: var(--creature-width); height: var(--creature-height); object-fit: contain; transform-origin: 50% 50%; }
.creature-shadow { position: absolute; left: calc(var(--target-x) - 177px); top: calc(var(--capture-ground-y) - 34px); width: 354px; height: 44px; border-radius: 50%; background: #193e3b57; filter: blur(4px); }
.target-ring { position: absolute; left: calc(var(--target-x) - var(--target-radius)); top: calc(var(--target-y) - var(--target-radius)); width: calc(var(--target-radius) * 2); height: calc(var(--target-radius) * 2); border: 5px solid #fff9; border-radius: 50%; box-shadow: inset 0 0 0 15px #fff2; pointer-events: none; }
.target-ring::after { content: ""; position: absolute; inset: 20px; border: 5px solid #e5ff9e; border-radius: 50%; box-shadow: 0 0 24px #c9ff7780; }
.capture-ball { position: absolute; left: 0; top: 0; width: var(--ball-size); height: var(--ball-size); border: 0; border-radius: 50%; padding: 0; background: transparent; touch-action: none; z-index: 3; transform-origin: center; will-change: transform; }
.capture-ball:focus-visible { outline: none; }
.capture-ball img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 0 #153d3650); }
.ball-art { position: absolute; inset: 0; display: block; transform-origin: 50% 94%; pointer-events: none; }
.ball-shell { position: absolute; inset: 0; background: var(--ball-image) center / 100% 100%; opacity: 0; }
.ball-shell-top { clip-path: polygon(0 0, 100% 0, 100% 51%, 66% 58%, 61% 44%, 55% 39%, 45% 39%, 39% 44%, 34% 58%, 0 51%); transform-origin: 18% 55%; }
.ball-shell-bottom { clip-path: polygon(0 51%, 34% 58%, 39% 44%, 45% 39%, 55% 39%, 61% 44%, 66% 58%, 100% 51%, 100% 100%, 0 100%); }
.ball-core { position: absolute; left: 24%; top: 40%; width: 52%; height: 28%; border-radius: 50%; background: #edfbff; box-shadow: 0 0 35px 12px #b9f5ff; opacity: 0; }
.ball-button-light { position: absolute; left: 43%; top: 47%; width: 14%; height: 16%; border-radius: 50%; background: #fff7bc; box-shadow: 0 0 28px 12px #ffe987; opacity: 0; }
.capture-flare { position: absolute; width: 1px; height: 1px; }
.capture-flare-glow, .capture-flare-ring, .capture-flare-ray { position: absolute; display: block; opacity: 0; }
.capture-flare-glow { width: 150px; height: 150px; left: -75px; top: -75px; border-radius: 50%; background: radial-gradient(circle, #fff 0 10%, #defaffd9 28%, #8bdfff66 48%, transparent 72%); }
.capture-flare-ring { width: 120px; height: 120px; left: -60px; top: -60px; border: 5px solid #c6f5ff; border-radius: 50%; box-shadow: 0 0 15px #9ae7ff; }
.capture-flare-ray { left: 0; top: -9px; width: 170px; height: 18px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, #c6f5ffb3 45%, transparent); clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 64%); }
.capture-star { position: absolute; width: 22px; height: 22px; background: #fff5a1; clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); }
.capture-ball:focus-visible:not(:disabled) img { filter: drop-shadow(0 0 12px #ffdc7c) drop-shadow(0 10px 0 #153d3650); }
.capture-ball.spinning img { filter: drop-shadow(0 0 18px #fff5a1) drop-shadow(0 10px 0 #153d3650); }
.capture-ball.in-flight img { filter: none; }
.capture-ball.in-flight.spinning img { filter: drop-shadow(0 0 10px #fff5a180); }
.throw-shadow { position: absolute; left: 0; top: 0; width: 120px; height: 28px; border-radius: 50%; background: #173c3199; opacity: 0; }
.ground-impact { position: absolute; border: 4px solid #d9d7a0; border-radius: 50%; pointer-events: none; }
.effects, .transition-veil { position: absolute; inset: 0; pointer-events: none; }
.effects { z-index: 5; overflow: hidden; }
.transition-veil { z-index: 6; background: #fffce3; opacity: 0; }
.particle { position: absolute; width: 12px; height: 12px; background: #fff0a2; box-shadow: 0 0 0 3px #fffecc55; }
.panel-layer { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 80px; background: #123e365c; }
.panel { width: 100%; padding: 57px 46px 53px; background: var(--cream); color: var(--ink); text-align: center; border: 5px solid #244b3d; border-radius: 28px; box-shadow: 0 15px 0 #123e3659, inset 0 0 0 8px #e8edc9; }
.panel-kicker { color: #6a8b52; font-size: 19px; letter-spacing: 4px; }
.panel-creature { width: 230px; height: 250px; object-fit: contain; display: block; margin: 30px auto 10px; }
.panel h2 { font-size: 55px; margin: 22px 0; letter-spacing: 3px; outline: none; }
#panel-title { outline: none; }
.panel-copy { font-size: 32px; line-height: 1.8; white-space: pre-line; margin: 0 0 32px; color: #4b6654; }
.panel-note { display: block; font-size: 23px; color: #637d65; margin: -12px 0 26px; }
.panel-actions { display: grid; gap: 22px; }
.primary-action, .secondary-action { min-height: 144px; border-radius: 14px; font-size: 36px; font-weight: 800; letter-spacing: 2px; padding: 22px; }
.primary-action { border: 3px solid #1b5845; background: #286c50; color: #fffde8; box-shadow: 0 6px 0 #143e30; }
.primary-action:hover { background: #347f5b; }
.primary-action:active { transform: translateY(3px); box-shadow: 0 3px 0 #143e30; }
.secondary-action { border: 3px solid #becba3; background: #f4f6db; color: #3d624b; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }