:root { --ink: #16324f; --sky: #55bdf2; --deep: #1a6fc4; --cloud: #fffdf3; --lime: #a6e34e; --grass: #62c23c; --grass2: #3f9f35; --sand: #f7e2aa; --gold: #ffc928; --red: #e8402e; --teal: #6cc2bd; }
body { background: var(--sky); color: var(--ink); }
.nav { position: fixed; z-index: 20; top: 12px; right: 16px; display: flex; align-items: center; gap: 4px; background: rgba(255, 253, 243, .94); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 6px 5px 18px; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 5px 11px; border-radius: 99px; }
.nav a:hover { background: #d7f0ff; }
.nav a.play { background: var(--gold); border: 2px solid var(--ink); margin-left: 6px; font-weight: 700; }
.nav a.play:hover { background: #ffe066; }
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--sky); }
.stage { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: max(100vw, 150svh); aspect-ratio: 3 / 2; }
.stage > img { position: absolute; }
.back { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ldragon { left: 25.98%; top: 2.44%; width: 74.02%; animation: bob 7s ease-in-out infinite; }
.lpanda { left: 34.25%; top: 9.38%; width: 21.81%; animation: bob 4s ease-in-out infinite -1s; }
.lqilin { left: 63.8%; top: 44.24%; width: 36%; animation: bob 5s ease-in-out infinite -2s; }
@keyframes bob { 50% { transform: translateY(-1.4%); } }
.hero-copy { position: absolute; z-index: 3; left: clamp(16px, 4vw, 64px); top: 76px; width: min(36vw, 520px); }
.hero-copy .logo { width: 100%; filter: drop-shadow(0 8px 0 rgba(22, 50, 79, .18)); }
.line { display: inline-block; margin-top: 2px; background: var(--ink); color: #fff; font-weight: 600; padding: 4px 16px; border-radius: 99px; font-size: clamp(15px, 1.35vw, 20px); }
.cta { display: inline-block; margin-top: 16px; text-decoration: none; font-weight: 800; font-size: clamp(22px, 2.1vw, 30px); padding: 10px 44px 12px; color: var(--ink); background: linear-gradient(#ffe25a, #ffb81f); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); transition: translate .12s, box-shadow .12s; }
.cta:hover { translate: 0 -3px; box-shadow: 0 10px 0 var(--ink); }
.cta:active { translate: 0 6px; box-shadow: 0 1px 0 var(--ink); }
.small { display: table; font-size: 14px; margin-top: 16px; font-weight: 500; background: rgba(255, 253, 243, .88); padding: 1px 12px; border-radius: 99px; }
.puffs { display: block; width: 100%; height: clamp(50px, 8vw, 110px); position: absolute; left: 0; bottom: -1px; z-index: 4; }
footer { background: var(--ink); color: #cfe3f2; padding: 20px clamp(16px, 5vw, 64px); text-align: center; }
.ph { display: inline-block; border: 2px dashed #6f8ca6; border-radius: 10px; padding: 3px 12px; font-size: 14px; margin: 3px; color: #cfe3f2; }
@media (max-width: 900px) {
  .nav { position: absolute; }
  .nav a:not(.play):not(.brand) { display: none; }
  .nav { padding-left: 14px; }
}
@media (max-width: 760px) and (orientation: portrait), (max-width: 560px) {
  .hero { min-height: 700px; height: 100svh; background: url(img/sky.webp) center / cover; }
  .stage { width: 215vw; left: auto; right: -40vw; translate: none; bottom: 28px; }
  .back { display: none; }
  .hero-copy { left: 16px; right: 16px; width: auto; top: 64px; text-align: center; }
  .hero-copy .logo { width: min(82vw, 400px); margin: 0 auto; }
  .small { display: none; }
}