@font-face { font-family: "Grandstander"; src: url("fonts/grandstander.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("fonts/youngserif.woff2") format("woff2"); font-display: swap; }

/* Alderfold palette, Leo theme (site.css) */
:root {
  --navy: #13285a; --ink: #1b2233; --leo: #c4342c; --leo-deep: #8f201a; --leo-tint: #fbece9; --honey: #e3a03a;
  --paper: #fffaf3; --rule: #ecd3cc;
  --serif: "Young Serif", Georgia, serif;
  --hand: "Grandstander", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(var(--leo-tint), #f6dcd5) fixed; color: var(--ink);
  font-family: var(--hand); -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--navy); outline-offset: 3px; }
#app { max-width: 760px; margin: 0 auto; min-height: 100%; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.screen { min-height: calc(100dvh - 28px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.screen[hidden], [hidden] { display: none !important; }
h1 { font-family: var(--serif); font-weight: 400; color: var(--navy); text-align: center; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.08; margin: 0; }
.lead { font-size: 1.35rem; margin: 0; text-align: center; }

.big { min-height: 72px; min-width: 200px; padding: 10px 32px; border-radius: 40px; font-size: 1.8rem; font-weight: 800;
  border: 4px solid var(--leo-deep); background: var(--leo); color: #fff; box-shadow: 0 6px 0 var(--leo-deep); }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--leo-deep); }
.back { color: var(--navy); font-size: 1.1rem; margin-top: auto; padding: 12px; }

.leo-hero { width: min(52vw, 240px); height: auto; margin-top: 8px; animation: bob 3s ease-in-out infinite; }
.leo-end { width: min(80vw, 380px); height: auto; margin-top: 8px; animation: cheer .8s ease-out; }

/* round */
.dots { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.dots li { width: 28px; height: 28px; border-radius: 50%; background: #fff8; border: 2px solid #d9aaa2;
  font-size: .85rem; font-weight: 800; display: grid; place-items: center; color: #a9776e; }
.dots li.done { background: var(--leo); border-color: var(--leo-deep); color: #fff; }
.dots li.now { background: #fff; border-color: var(--leo-deep); color: var(--ink); transform: scale(1.15); }
.talk { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.leo-mini { width: 60px; height: auto; flex: none; }
.leo-mini.yay { animation: hop .6s ease-out 2; }
.bubble { flex: 1; margin: 0; background: #fff; border-radius: 22px; padding: 10px 16px; font-size: 1.4rem; font-weight: 700;
  border: 3px solid var(--rule); position: relative; min-height: calc(3.6em + 26px); display: flex; align-items: center; line-height: 1.2; }
.bubble::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 12px solid var(--rule); border-left: 0; }

.scene { position: relative; width: 100%; max-width: min(100%, calc(100dvh - 260px)); min-width: 280px; aspect-ratio: 1;
  border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 14px 30px -14px #6b2a2280; user-select: none; -webkit-user-select: none; }
.scene img { display: block; width: 100%; height: 100%; }
.scene.wiggle { animation: nudge .4s ease-in-out; }
.spot { position: absolute; transform: translate(-50%, -50%); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  min-width: 64px; min-height: 64px; border-radius: 50%; border: 0; padding: 0; background: none; }
.spot.hint { animation: hint 1.4s ease-in-out 3; }
.spot.found { background: radial-gradient(circle, #fff6 30%, #ffe9a066 60%, transparent 72%);
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--honey), 0 0 30px 12px #ffe7a0; animation: glow .7s ease-out; }
.ripple { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 4px solid #ffffffcc; pointer-events: none; animation: ripple .6s ease-out forwards; }
.spark { position: absolute; width: 18px; height: 18px; margin: -9px; pointer-events: none; color: var(--honey);
  font-size: 22px; line-height: 18px; text-align: center; animation: spark .9s ease-out forwards; }

@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes hop { 40% { transform: translateY(-14px) rotate(-6deg); } 70% { transform: translateY(2px) rotate(3deg); } }
@keyframes cheer { from { transform: scale(.6) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.06) rotate(2deg); opacity: 1; } }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes hint { 50% { box-shadow: 0 0 0 6px #ffffffcc, 0 0 26px 14px #ffe7a0cc; } }
@keyframes glow { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
@keyframes spark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spot.hint { box-shadow: 0 0 0 6px #ffffffcc, 0 0 26px 14px #ffe7a0cc; }
}
@media (min-width: 700px) { .leo-mini { width: 76px; } .bubble { font-size: 1.6rem; min-height: calc(2.4em + 26px); } }