:root {
  --sky: #d4e9ef;
  --sand: #ead9b4;
  --sand-deep: #d8c294;
  --sea: #2f9db2;
  --ink: #3a2f22;
  --ink-soft: #7c6a52;
  --paper: #fdf8ec;
  --gold: #e0a544;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: linear-gradient(180deg, var(--sky) 0%, #e4e6da 42%, var(--sand) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 1.75rem 1rem 3rem;
}

.app {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.scene-wrap {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(72, 58, 34, 0.22);
  background: var(--sky);
}

#scene {
  display: block;
  width: 100%;
  height: auto;
}

/* --- cookie --- */

#cookie { cursor: pointer; }
#cookie:focus { outline: none; }

#half-l, #half-r {
  transform-box: view-box;
  transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}

#half-l { transform-origin: 636px 464px; }
#half-r { transform-origin: 636px 464px; }

#cookie:hover:not(.cracked) #half-l { transform: translate(-1px, -2px) rotate(-3deg); }
#cookie:hover:not(.cracked) #half-r { transform: translate(1px, -2px) rotate(3deg); }

#cookie.cracked #half-l { transform: translate(-8px, -1px) rotate(-22deg); }
#cookie.cracked #half-r { transform: translate(8px, -1px) rotate(22deg); }

#cookie:focus-visible #half-l,
#cookie:focus-visible #half-r {
  filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 9px var(--gold));
}

/* the halo quietly points at the cookie until it has been opened once */
#halo {
  transform-box: view-box;
  transform-origin: 636px 430px;
  animation: halo 2.6s ease-in-out infinite;
}

#halo.done { animation: none; opacity: 0; transition: opacity 0.6s ease; }

@keyframes halo {
  0%, 100% { opacity: 0.28; transform: scale(0.9); }
  50%      { opacity: 0.7;  transform: scale(1.04); }
}

#flash {
  transform-box: view-box;
  transform-origin: 636px 428px;
  opacity: 0;
}

#flash.fire { animation: flash 0.55s ease-out; }

@keyframes flash {
  0%   { opacity: 0.85; transform: scale(0.5); }
  100% { opacity: 0;    transform: scale(9); }
}

#slip {
  transform-box: view-box;
  transform-origin: 636px 440px;
  opacity: 0;
  transform: translateY(6px) scale(0.35);
}

#slip.out { animation: slipOut 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes slipOut {
  0%   { opacity: 0; transform: translateY(8px) scale(0.35); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(-30px) scale(1); }
}

.spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}

.spark.pop { animation: spark 0.7s ease-out; }

@keyframes spark {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.2) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(40deg); }
}

#blink { opacity: 0; transition: opacity 70ms linear; }
#blink.shut { opacity: 1; }

/* --- hint --- */

.hint {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --- fortune card --- */

.fortune-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-top: 1rem;
  background:
    radial-gradient(130% 100% at 50% 0%, #fffdf6 0%, var(--paper) 55%, #f2e7d0 100%);
  border: 1px solid var(--sand-deep);
  border-radius: 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(72, 58, 34, 0);
  transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease 0.05s,
              transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.05s,
              box-shadow 0.5s ease;
}

.fortune-card.open {
  max-height: 440px;
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(72, 58, 34, 0.16);
}

.fortune-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(216, 194, 148, 0.85);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
}

.fortune-card.open::before { opacity: 1; }

.card-inner { padding: 1.5rem 1.6rem 1.4rem; }

.quote, .attribution, .sourcing { transition: opacity 0.18s ease; }

.fortune-card.swap .quote,
.fortune-card.swap .attribution,
.fortune-card.swap .sourcing { opacity: 0; }

.quote {
  margin: 0 0 0.95rem;
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.55;
  text-align: center;
  color: var(--ink);
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
}

.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sand-deep), transparent);
}

.divider i {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--sea);
  border-radius: 1px;
}

.attribution {
  margin: 0;
  font-size: 0.88rem;
  text-align: center;
  color: #8a6f4a;
}

.sourcing {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  font-style: italic;
  text-align: center;
  color: rgba(124, 106, 82, 0.75);
  min-height: 0.9rem;
}

@media (max-width: 460px) {
  body { padding: 1.25rem 0.75rem 2.5rem; }
  .quote { font-size: 1.1rem; }
  .card-inner { padding: 1.25rem 1.1rem 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  #halo { animation: none; opacity: 0.4; }
  #half-l, #half-r, .fortune-card { transition-duration: 0.01ms; }
  #flash.fire, .spark.pop { animation: none; }
  #slip.out { animation: none; opacity: 1; transform: translateY(-30px) scale(1); }
}