:root {
  --cream: #fff4d4;
  --orange: #f7aa45;
  --brown: #4b301d;
  --paper: #fffaf0;
  --green: #90bf63;
  --bone-x: 0px;
  --bone-y: 0px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: var(--brown);
  background: var(--cream);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  overflow: hidden;
}

button, a { font: inherit; }

.scene {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream) url("assets/bg.png") center bottom / cover no-repeat;
}

.hero {
  position: relative;
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: clamp(18px, 2.6vh, 34px);
}

.logo {
  margin: 0;
  width: clamp(330px, 38vw, 650px);
  line-height: 0;
}
.logo img { display: block; width: 100%; height: auto; }

.corner-sign {
  position: absolute;
  z-index: 10;
  left: clamp(14px, 2vw, 30px);
  top: clamp(14px, 2vw, 30px);
  width: clamp(64px, 7vw, 105px);
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(75, 48, 29, .15));
}

.links {
  display: flex;
  gap: 10px;
  margin-top: -8px;
}
.token {
  border: 3px solid var(--brown);
  background: rgba(255, 250, 240, .94);
  box-shadow: 0 4px 0 rgba(75, 48, 29, .18);
}
.links a {
  display: block;
  width: clamp(126px, 10.5vw, 178px);
  line-height: 0;
  transition: transform .18s ease;
}
.links a img { display: block; width: 100%; height: auto; }
.links a:hover,
.links a:focus-visible { transform: translateY(-2px); outline: none; }

.token {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(310px, calc(100vw - 34px));
  height: 43px;
  padding-left: 18px;
  border-radius: 16px;
  font-size: .95rem;
  margin-top: -7px;
}
.token span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.token button {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 82px;
  border: 0;
  border-left: 2px solid var(--brown);
  border-radius: 0 12px 12px 0;
  color: var(--brown);
  background: #ffd792;
  cursor: pointer;
}
.token button:hover,
.token button:focus-visible { background: #ffc96e; outline: none; }

.playground { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.dog {
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 5.5vh, 66px);
  width: clamp(410px, 39vw, 650px);
  aspect-ratio: 930 / 763;
  transform: translateX(-50%);
  transform-origin: 50% 90%;
}
.dog-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dog-open { opacity: 0; }
.dog.is-open .dog-open { opacity: 1; }
.dog.is-open .dog-closed { opacity: 0; }
.dog.chomp { animation: chomp .3s ease-out; }

.flying-bone {
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: clamp(88px, 8vw, 136px);
  height: auto;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}
.flying-bone.fly { animation: bone-flight 1.5s cubic-bezier(.2, .63, .45, 1) forwards; }

.decor-bone { position: absolute; z-index: 2; opacity: .35; font-size: clamp(28px, 3vw, 48px); transform: rotate(-22deg); }
.decor-bone-one { left: 9%; top: 29%; }
.decor-bone-two { right: 11%; top: 26%; transform: rotate(28deg); }

.cloud { position: absolute; z-index: 1; width: 130px; height: 35px; border-radius: 999px; background: rgba(255,255,255,.55); animation: cloud-drift 18s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud::before { left: 25px; width: 54px; height: 54px; }
.cloud::after { right: 21px; width: 43px; height: 43px; }
.cloud-a { left: 17%; top: 23%; }
.cloud-b { right: 14%; top: 17%; transform: scale(.72); animation-delay: -9s; }

.marquee {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 4px solid var(--brown);
  background: #f6a849;
}
.marquee-track { display: flex; width: max-content; animation: ticker 17s linear infinite; }
.marquee-group { display: flex; flex-shrink: 0; align-items: center; min-width: 100vw; justify-content: space-around; gap: 26px; padding: 10px 18px 9px; }
.marquee-group span { font-size: 1.05rem; letter-spacing: .08em; }
.marquee-group b { font-size: 1.25rem; }

@keyframes bone-flight {
  0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) rotate(0deg) scale(.65); }
  8% { opacity: 1; }
  52% { opacity: 1; transform: translate(var(--mid-x), var(--mid-y)) rotate(190deg) scale(1); }
  88% { opacity: 1; transform: translate(var(--bone-x), var(--bone-y)) rotate(340deg) scale(.62); }
  100% { opacity: 0; transform: translate(var(--bone-x), var(--bone-y)) rotate(360deg) scale(0); }
}
@keyframes chomp { 45% { transform: translateX(-50%) scale(1.025, .97); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes cloud-drift { to { translate: 35px 0; } }

@media (max-width: 700px) {
  .scene { min-height: 560px; background-position: 61% bottom; }
  .hero { gap: 7px; padding-top: 12px; }
  .logo { width: min(76vw, 440px); }
  .corner-sign { width: 58px; left: 10px; top: 10px; }
  .links { gap: 7px; }
  .links a { width: min(35vw, 145px); }
  .token { height: 40px; font-size: .86rem; }
  .dog { width: min(125vw, 520px); bottom: 46px; }
  .decor-bone, .cloud { display: none; }
  .marquee-group { min-width: 170vw; gap: 18px; padding-block: 8px; }
  .marquee-group span { font-size: .9rem; }
}

@media (max-height: 760px) and (min-width: 701px) {
  .hero { padding-top: 8px; gap: 7px; }
  .logo { width: min(34vw, 470px); }
  .token { height: 38px; }
  .dog { width: min(36vw, 485px); bottom: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .cloud, .dog.chomp { animation: none; }
  .flying-bone { display: none; }
}