@font-face { font-family: 'Andika'; src: url('/shared/fonts/andika-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none;
  background: #ffd84d; color: #2b1d00;
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
#app {
  position: absolute; inset: 0;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(circle at 20% 20%, #fff3a8 0, #ffd84d 45%, #ffb938 100%);
}

/* Upright phone: ask to turn it. iPhone web apps can't lock landscape. */
.turn { display: none; }
@media (orientation: portrait) {
  .turn { display: grid; place-items: center; position: fixed; inset: 0; background: #ffd84d; z-index: 99; }
  .turn .phone { font-size: 40vw; animation: turn 2s ease-in-out infinite; }
  #app { visibility: hidden; }
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* Start + end */
.start, .end { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8vw; }
.end { flex-direction: column; gap: 4vh; }
.end-row { display: flex; align-items: center; gap: 8vw; }
.play {
  width: 38vh; height: 38vh; border-radius: 50%; display: grid; place-items: center; padding-left: 2.5vh;
  background: #ff4f7b; box-shadow: 0 1.4vh 0 #c22a52, 0 2vh 4vh rgba(0,0,0,.2);
  animation: pulse 1.6s ease-in-out infinite;
}
.play:active { transform: translateY(1vh); box-shadow: 0 .4vh 0 #c22a52; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.guide { font-size: 14vh; line-height: 1; }
.guide.big { font-size: 30vh; }
.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2vh) rotate(-4deg); } }
.guide.jump { animation: jump .6s ease; }
@keyframes jump { 40% { transform: translateY(-5vh) scale(1.15) rotate(8deg); } }

.shelf { display: flex; gap: 2.5vw; padding: 2vh 3vw; background: #fff8; border-radius: 4vh; }
.shelf-item { position: relative; width: 16vh; height: 16vh; border-radius: 3vh; background: #fff; display: grid; place-items: center; font-size: 9vh; opacity: .55; box-shadow: 0 .8vh 0 #0001; }
.shelf-item.learned { opacity: 1; }
.shelf-item .star { position: absolute; top: -3vh; right: -2vh; font-size: 6vh; }
.shelf-item.new { animation: newskill 1s ease 3; }
@keyframes newskill { 50% { transform: scale(1.3) rotate(6deg); } }

/* Play */
.play-screen { position: relative; height: 100%; }
.play-area { position: relative; height: 100%; }
/* A format fills the play area: the scene on the left, answers on the right. */
.fmt { height: 100%; display: grid; grid-template-columns: 1fr 30vw; gap: 3vw; }
.fmt.wide { grid-template-columns: 1fr 0; gap: 0; }
.stage { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 4vh; }
.stage > .guide { position: absolute; left: 0; bottom: 0; z-index: 2; }
.scene-slot { width: 100%; height: 100%; display: grid; place-items: center; }
.answers { display: flex; flex-direction: column; justify-content: center; gap: 2.5vh; }
.num {
  flex: 1; max-height: 28vh; border-radius: 4vh; font-size: 17vh; font-weight: 800; color: #fff;
  box-shadow: 0 1.2vh 0 rgba(0,0,0,.18); transition: transform .1s, opacity .3s;
}
.num.c0 { background: #2f8cff; } .num.c1 { background: #9b5cff; } .num.c2 { background: #2fbf71; } .num.c3 { background: #ff7a2f; }
/* Four choices: a 2x2 grid, every button well over 88pt. */
.answers.n4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2.5vh 1.5vw; align-content: center; height: 100%; max-height: 84vh; margin: auto 0; }
.answers.n4 .num { max-height: none; height: 100%; min-height: 30vh; font-size: 13vh; }
.num:active:not(:disabled) { transform: translateY(.8vh); box-shadow: 0 .4vh 0 rgba(0,0,0,.18); }
.num:disabled { filter: saturate(.5); opacity: .7; }
.num.right, .pick.right { background: #2fbf71; opacity: 1; animation: pop .4s ease; }
.num.wrong { animation: wobble .4s ease; filter: grayscale(1); opacity: .35; }
.answers:has(.glow) .num:not(.glow) { filter: grayscale(1); opacity: .3; }
.glow { opacity: 1 !important; animation: glow 1s ease-in-out infinite !important; outline: 1.2vh solid #fff; }
@keyframes pop { 50% { transform: scale(1.12); } }
@keyframes wobble { 25% { transform: translateX(-1.5vh); } 75% { transform: translateX(1.5vh); } }
@keyframes glow { 50% { transform: scale(1.07); box-shadow: 0 0 0 2vh #fff8; } }

.progress { position: absolute; left: 20%; right: 20%; bottom: max(4px, env(safe-area-inset-bottom)); height: 1.4vh; border-radius: 1vh; background: #fff6; overflow: hidden; }
.progress::after { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: #ff4f7b; border-radius: 1vh; transition: width .4s; }

/* Scenes */
.card { position: relative; background: #fff; border-radius: 5vh; box-shadow: 0 1.4vh 0 #0001; }
.scene-dots .card { width: 72vh; height: 72vh; }
.scene-dots svg { width: 100%; height: 100%; }
.dot { transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.dot.lit, .counter.lit, .thing.lit, .block.lit, .bee.lit, .bird.lit { animation: lit .5s ease forwards; }
@keyframes lit { 50% { transform: scale(1.35); } 100% { transform: scale(1.1); filter: drop-shadow(0 0 1vh #ffb000); } }
.cover { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40vh; background: #fff; border-radius: 5vh; opacity: 0; pointer-events: none; transition: opacity .25s; }
.cover.on { opacity: 1; }

.frame { padding: 3vh; }
.grid10 { display: grid; grid-template-columns: repeat(5, 17vh); grid-template-rows: repeat(2, 17vh); gap: 1.5vh; }
.cell { border: .6vh solid #e5d7b5; border-radius: 2vh; display: grid; place-items: center; }
.counter { width: 12vh; height: 12vh; border-radius: 50%; }
.counter.red { background: #ff4f7b; } .counter.blue { background: #2f8cff; }

.scene-plates { width: 100%; display: flex; justify-content: center; gap: 6vw; }
.pick { border-radius: 50%; transition: transform .15s; }
.pick:active { transform: scale(.96); }
.plate {
  width: 62vh; height: 62vh; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5vh #f0e6d0, 0 1.4vh 0 #0001;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1vh; padding: 9vh; font-size: 10vh;
}
.plate.big { font-size: 17vh; }
.numcard { width: 50vh; height: 50vh; border-radius: 5vh; background: #fff; display: grid; place-items: center; font-size: 30vh; font-weight: 800; box-shadow: 0 1.4vh 0 #0001; }
.pick.glow { outline-offset: 1vh; }

.train { display: flex; align-items: flex-end; gap: .8vw; padding: 5vh 3vw; background: #fff; border-radius: 4vh; }
.block { width: min(16vh, 4.6vw); aspect-ratio: 1; border-radius: 1.4vh; box-shadow: inset 0 -1vh 0 #0002; transition: opacity .5s, transform .5s; }
.block.ghost { border: .6vh dashed; background: transparent; box-shadow: none; animation: ghost 1.2s ease-in-out infinite; }
.block.leaving { animation: ghost 1.2s ease-in-out infinite; }
.block.gone { opacity: 0; transform: translateY(-6vh); }
@keyframes ghost { 50% { opacity: .35; } }

.hivebox { display: flex; align-items: center; gap: 4vw; }
.hive {
  position: relative; width: 44vh; height: 50vh; border-radius: 50% 50% 18% 18%;
  background: repeating-linear-gradient(#ffc93c 0 7vh, #e8a317 7vh 8.5vh); box-shadow: 0 1.4vh 0 #0002;
}
.hive::after { content: ''; position: absolute; left: 50%; bottom: 6vh; width: 10vh; height: 8vh; margin-left: -5vh; border-radius: 5vh 5vh 0 0; background: #6b3f00; }
.hive .total { position: absolute; top: -6vh; right: -6vh; width: 16vh; height: 16vh; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10vh; font-weight: 800; box-shadow: 0 .8vh 0 #0002; }
.bee { font-size: 9vh; display: inline-block; }
.peek { position: absolute; inset: 14vh 3vh 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; opacity: 0; transition: opacity .5s; }
.peek .bee { font-size: 7vh; }
.peek.out { opacity: 1; }
.outside { display: flex; flex-wrap: wrap; width: 40vh; gap: 1vh; }

.branchbox { position: relative; width: 100%; height: 70vh; }
.branch { position: absolute; left: 0; right: 0; bottom: 18vh; height: 4vh; border-radius: 2vh; background: #8b5a2b; }
.perch { position: absolute; left: 4vw; right: 4vw; bottom: 21vh; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 0 1vw; }
.bird { font-size: 10vh; display: inline-block; transition: transform 1.2s ease, opacity 1.2s ease; }
.bird.flyin { transform: translate(60vw, -50vh) rotate(-20deg); opacity: 0; }
.moved .bird.flyin { transform: none; opacity: 1; }
.moved .bird.flyaway { transform: translate(60vw, -60vh) rotate(20deg); opacity: 0; }

.confetti::after {
  content: '🎉 ⭐ 🎈 ✨ 🎉 ⭐ 🎈 ✨'; position: absolute; left: 0; right: 0; top: -10vh; text-align: center; font-size: 10vh;
  animation: fall 2.5s ease-in forwards; pointer-events: none;
}
@keyframes fall { to { transform: translateY(120vh) rotate(20deg); } }
.scene-birds { width: 100%; }

/* ---- Story, cast and stars ---- */
.start, .story { position: absolute; inset: 0; background-size: cover; background-position: center; }
.start { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4vh; padding-bottom: 6vh; }
.title {
  position: absolute; top: max(4vh, env(safe-area-inset-top)); left: 0; right: 0; text-align: center;
  font-size: 16vh; font-weight: 900; color: #fff; letter-spacing: .02em;
  -webkit-text-stroke: 1.2vh #7b2cbf; paint-order: stroke; text-shadow: 0 1.2vh 0 #4a148c55;
}
.title .hat { height: 17vh; vertical-align: -3vh; margin-right: 1vw; transform: rotate(-12deg); }
.start .play { position: absolute; right: max(4vw, env(safe-area-inset-right)); bottom: 6vh; width: 26vh; height: 26vh; }
/* Tap a toy in the photo to choose the round's host. */
.toy-zone { position: absolute; bottom: 4vh; height: 62vh; border-radius: 40%; }
.zone-dragonee { left: 19%; width: 25%; }
.zone-flop { left: 44%; width: 12%; }
.zone-bee { left: 56%; width: 27%; }
.toy-zone.chosen { box-shadow: 0 0 0 .8vh #fff, 0 0 6vh 2vh #ffd000; background: radial-gradient(#fff3, #fff0 70%); }
.toy-zone.picked { animation: picked .6s ease; }
@keyframes picked { 40% { transform: translateY(-4vh) scale(1.05); } }
.book-btn, .music-btn { position: absolute; bottom: 6vh; width: 18vh; height: 18vh; border-radius: 50%; background: #7b2cbf; box-shadow: 0 1vh 0 #4a148c; display: grid; place-items: center; }
.book-btn { left: max(4vw, env(safe-area-inset-left)); }
.book-btn img { width: 70%; transform: rotate(-12deg); }
.music-btn { left: calc(max(4vw, env(safe-area-inset-left)) + 21vh); width: 12vh; height: 12vh; font-size: 7vh; font-weight: 900; color: #fff; background: #7b2cbf; box-shadow: 0 .8vh 0 #4a148c; }
.music-btn.off { opacity: .45; text-decoration: line-through; }

.story.dark { filter: brightness(.55) saturate(.8); animation: dusk 1s ease; }
@keyframes dusk { from { filter: none; } }
.story.dark .host { filter: brightness(1.8); }
.story .host { position: absolute; left: max(2vw, env(safe-area-inset-left)); bottom: -2vh; width: 82vh; height: 82vh; }
.end-panel { position: absolute; right: max(4vw, env(safe-area-inset-right)); top: 6vh; bottom: 6vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.end-panel .play { width: 28vh; height: 28vh; }

/* The host toy: a cut-out of the real toy standing in the scene. */
.host { width: 44vh; height: 44vh; cursor: pointer; filter: drop-shadow(0 1.5vh 1.2vh #0005); }
.host img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; }
.play-screen > .host { position: absolute; left: -3vw; bottom: -6vh; z-index: 3; width: 40vh; height: 40vh; }
/* The buddy peeks in from the right edge of the scene; Purrrr narrates from the top corner. */
.play-screen > .host.buddy { left: auto; right: calc(30vw + 1vw); bottom: -21vh; width: 28vh; height: 28vh; z-index: 1; rotate: -10deg; transition: translate .35s cubic-bezier(.3,1.4,.5,1); }
.play-screen > .host.buddy.talking { translate: 0 -14vh; z-index: 4; }
.play-area:has(.fmt.wide) ~ .host.buddy { right: -2vw; }
.play-screen > .host.narrator { left: -1vw; top: -4vh; bottom: auto; width: 17vh; height: 17vh; z-index: 3; scale: 0; transition: scale .25s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.play-screen > .host.narrator.talking { scale: 1; }
.host.talking { z-index: 4; }
.host.bounce { animation: hostbounce .7s ease; }
.host.wobble { animation: hostwobble .8s ease; }
.host.flop { animation: hostflop .9s ease; }
@keyframes hostbounce { 30% { transform: translateY(-5vh) scale(1.08); } 60% { transform: translateY(0) scale(.97); } }
@keyframes hostwobble { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes hostflop { 40% { transform: rotate(18deg) translateY(2vh); } }

.stars { position: absolute; top: max(4px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 1vw; font-size: 6vh; pointer-events: none; }
.stars span { width: 6vh; height: 6vh; transition: transform .3s; }
.stars svg { width: 100%; height: 100%; fill: #fff8; }
.stars span.on svg { fill: #ffd000; filter: drop-shadow(0 0 1vh #fff) drop-shadow(0 .4vh 0 #b8860b); }
.stars span.on { transform: scale(1.25); animation: pop .5s ease; }
.stars.big { position: static; flex-wrap: wrap; max-width: 46vw; }
.stars.big span { width: 8vh; height: 8vh; }
.play-screen { padding-top: 6vh; }

.guess { flex: 1; max-height: 34vh; border-radius: 4vh; background: #fff; display: grid; place-items: center; font-size: 22vh; font-weight: 800; color: #7b2cbf; border: 1vh dashed #7b2cbf; }
.yesno { display: flex; gap: 2vw; height: 30vh; }
.yesno button { flex: 1; border-radius: 4vh; font-size: 14vh; box-shadow: 0 1.2vh 0 rgba(0,0,0,.18); }
.yesno .yes { background: #2fbf71; } .yesno .no { background: #ff4f7b; }
.yesno button:disabled { filter: saturate(.5); opacity: .7; }
.yesno .right { animation: pop .4s ease; opacity: 1; filter: none; }
.yesno .wrong { filter: grayscale(1); opacity: .4; }

/* Questions sit in a soft, blurred Folkestone scene. */
/* Questions sit on the real Folkestone scene: no blur, just darkened a touch. */
#app.in-scene::before { content: ''; position: absolute; inset: 0; background: var(--scene) center / cover; filter: brightness(.85); transition: filter .6s; }
#app.in-scene > * { position: relative; }
#app.in-scene > .stars { position: absolute; }

/* Gully swoops in from the right for one late question. */
.gully { position: absolute; right: 26vw; top: 2vh; width: 34vh; height: 34vh; z-index: 5; pointer-events: none; filter: drop-shadow(0 1.5vh 1.2vh #0005); }
.gully img { width: 100%; height: 100%; object-fit: contain; }
.gully-emoji { font-size: 24vh; display: block; transform: scaleX(-1); }
.gully.arriving { animation: swoopin .6s cubic-bezier(.2,.7,.3,1.2); }
.gully.leaving { animation: swoopout .7s ease-in forwards; }
@keyframes swoopin { from { transform: translate(60vw, -40vh) rotate(-25deg); } }
@keyframes swoopout { to { transform: translate(70vw, -60vh) rotate(20deg); opacity: 0; } }

/* The deciding word, big, before the question ("Smallest!"). */
.decider { position: absolute; left: 0; right: 30vw; top: 9vh; text-align: center; z-index: 4; pointer-events: none;
  font-family: 'Andika', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; font-size: 10vh; font-weight: 700; color: #fff; -webkit-text-stroke: 1.2vh #7b2cbf; paint-order: stroke; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.decider.on { opacity: 1; transform: none; }

/* The Dare: dusk-purple scene, a ribbon with 3 flames to light. */
.dare-ribbon { display: none; }
#app.dare::before { background: linear-gradient(#2a145070, #7b2cbf40), var(--scene) center / cover; filter: none; }
#app.dare { background: #2a1450; }
#app.dare .dare-ribbon { display: flex; position: absolute; top: -1vh; left: 50%; translate: -50% 0; z-index: 6; align-items: center; gap: 1.2vw; padding: 1vh 3vw; border-radius: 0 0 3vh 3vh;
  background: #7b2cbf; color: #fff; font-family: 'Andika', ui-rounded, system-ui, sans-serif; font-size: 6vh; font-weight: 700; box-shadow: 0 1vh 0 #4a148c; }
.dare-ribbon i { width: 5vh; height: 5vh; border-radius: 50%; background: #fff3; }
.dare-ribbon i.on { background: radial-gradient(#ffd000, #ff4f7b); box-shadow: 0 0 2vh #ffb000; }
.dare-ribbon i.off { background: #0003; }
#app.dare .stars { visibility: hidden; }
.dare-offer { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 5vw; background: #2a145099; border-radius: 4vh; animation: fadein .3s ease; }
.dare-offer .dare-face { width: 44vh; height: 44vh; object-fit: contain; filter: drop-shadow(0 1.5vh 1.2vh #0006); }
.dare-offer button { width: 34vh; height: 34vh; border-radius: 50%; font-size: 18vh; box-shadow: 0 1.2vh 0 #0004; }
.dare-offer .flame { background: radial-gradient(#ffd000, #ff4f7b 75%); }
.dare-offer .pillow { width: 24vh; height: 24vh; font-size: 12vh; background: #c9d6ff; }
@keyframes fadein { from { opacity: 0; } }

/* Fallback end screen (before the Spellbook loads). */
.end-buttons { display: flex; align-items: center; gap: 3vw; }
.dare-btn { position: relative; width: 20vh; height: 20vh; border-radius: 50%; background: #7b2cbf; box-shadow: 0 1vh 0 #4a148c; font-size: 7vh; display: grid; place-items: center; }
.dare-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .9; }
.spark { position: fixed; z-index: 50; border-radius: 50%; pointer-events: none; box-shadow: 0 0 8px currentColor; }