* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #fff3da; font-family: system-ui, sans-serif; background: #77caff url('images/city-day.svg') center bottom / cover no-repeat; }
main { width: min(100vw, 66.6667vh); width: min(100vw, 66.6667dvh); height: 100vh; height: 100dvh; margin: 0 auto; }
.stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.heart { position: absolute; width: 35%; top: 5%; left: 9%; opacity: .88; animation: drift 9s ease-in-out infinite; }
.ginny-cloud { position: absolute; right: 7%; top: 7%; width: 35%; height: auto; opacity: .94; animation: drift 11s ease-in-out infinite reverse; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gold-cloud { opacity: 0; pointer-events: none; }
.heart, .ginny-cloud { transition: opacity .18s ease; }
.stage.gold .heart:not(.gold-cloud), .stage.gold .ginny-cloud:not(.gold-cloud) { opacity: 0; }
.stage.gold .gold-cloud { opacity: 1; }
#celebration { pointer-events: none; }
#replay { position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); width: 76px; height: 76px; border: 2px solid #fff3c4; border-radius: 50%; color: #78501b; background: #fff3c4ef; box-shadow: 0 5px 24px #72552e40; font-size: 58px; line-height: 1; cursor: pointer; }
#replay[hidden] { display: none; }
.preview { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: clamp(88px, 26vw, 160px); aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid #ffffffb3; border-radius: 12px; background: #173c4b; box-shadow: 0 3px 14px #173c4b40; z-index: 5; pointer-events: none; }
.preview[hidden] { display: none; }
.preview video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#status.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
#status { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; margin: 0; padding: 10px 15px; border-radius: 12px; background: #173c4bd9; font-size: 13px; line-height: 1.5; text-align: center; pointer-events: none; }
@keyframes drift { 50% { transform: translate(8px, 6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .heart, .ginny-cloud { animation: none; } }