@font-face { font-family: Andika; src: url(/shared/fonts/andika-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: Andika; src: url(/shared/fonts/andika-700.woff2) format('woff2'); font-weight: 700; font-display: block; }
html, body { background: #7fd3ff; }
#app:not(.in-scene) { background: radial-gradient(circle at 20% 20%, #e8f7ff 0, #9fdcff 45%, #5cbcf5 100%); }
.word { font-family: Andika, sans-serif; font-weight: 700; letter-spacing: .02em; }

/* A Folkestone beach hut. The door has the word; the picture waits inside. */
.hut { position: relative; width: 58vh; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 1.5vh 1vh #0003); }
.roof { width: 0; height: 0; border-left: 32vh solid transparent; border-right: 32vh solid transparent; border-bottom: 16vh solid #fff; margin-bottom: -1px; }
.hut-body {
  position: relative; width: 52vh; height: 58vh; background: repeating-linear-gradient(90deg, var(--hut) 0 5vh, color-mix(in srgb, var(--hut) 82%, #000) 5vh 5.5vh);
  border-radius: 0 0 1.5vh 1.5vh; display: grid; place-items: center; perspective: 120vh;
}
.inside { position: absolute; inset: 5vh 7vh 3vh; background: #3a2a1a; border-radius: 1vh; display: grid; place-items: center; font-size: 26vh; }
.door {
  position: absolute; inset: 5vh 7vh 3vh; background: #fff; border-radius: 1vh; display: grid; place-items: center;
  transform-origin: left center; transition: transform .7s cubic-bezier(.3,.7,.3,1); box-shadow: inset 0 0 0 1vh #0001;
}
.door { grid-template-rows: 1fr auto; align-content: center; }
.door .word { font-size: 13vh; color: #2b1d00; position: relative; align-self: center; }
.door .word { white-space: nowrap; }
.door .ref { font-size: 1vh; display: grid; place-items: center; height: 14vh; }
.inside .pic { font-size: 26vh; line-height: 1; }
.inside .pic.many { font-size: 11vh; }
.hut.open .door { transform: rotateY(-105deg); }
.letter { display: inline-block; transition: color .2s, transform .2s; }
.letter.lit { color: #ff4f7b; transform: translateY(-1vh) scale(1.15); }
.letter.marked.lit { color: #9b5cff; }

/* Sound buttons, shown only in the reveal: a dot under a single letter, a bar
   under a digraph, a linked arc for a split digraph. */
.sound-buttons { position: absolute; left: 0; right: 0; bottom: -2.2vh; height: 3vh; pointer-events: none; }
.sb { position: absolute; top: 0; opacity: 0; transition: opacity .2s; }
.sb.on { opacity: 1; }
.sb.dot { width: 2.2vh; height: 2.2vh; margin-left: -1.1vh; border-radius: 50%; background: #ff4f7b; }
.sb.bar { height: 1.1vh; border-radius: 1vh; background: #ff4f7b; top: .5vh; }
.sb.arc { height: 3.4vh; top: -.6vh; border: .9vh solid #ff4f7b; border-top: 0; border-radius: 0 0 3vh 3vh; }
.word.whole .letter { color: #2fbf71; transform: none; }
.word.whole { animation: pop .5s ease; }

/* Answer cards: pictures for the huts, words for tricky words. */
.answers .num, .answers .num.c0, .answers .num.c1, .answers .num.c2, .answers .num.c3 { background: #fffdf6; color: #2b1d00; }
.answers .num.right { background: #2fbf71; }
.num .pic { font-size: 15vh; line-height: 1; }
.num .pic.many { font-size: 7vh; letter-spacing: -1vh; white-space: nowrap; }
.pic.size1 { font-size: 5vh; } .pic.size2 { font-size: 8vh; } .pic.size3 { font-size: 11vh; } .pic.size4 { font-size: 14vh; } .pic.size5 { font-size: 17vh; }
.pic.tower { display: flex; flex-direction: column; font-size: 5vh; line-height: 1; }
.pic.tower i { font-style: normal; display: block; }
.pic.train { font-size: 5vh; white-space: nowrap; letter-spacing: -.6vh; }
.answers.n4 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2.5vh; max-height: 78vh; align-self: center; }
.answers.n4 .num { max-height: none; min-height: 30vh; display: grid; place-items: center; }
.num .word { font-size: 10vh; }
.num.right { background: #2fbf71; }
.guess .pic { font-size: 22vh; }
.guess { color: #2b1d00; }

.listen { width: 48vh; height: 48vh; border-radius: 50%; background: #fff; font-size: 22vh; box-shadow: 0 1.4vh 0 #0002; animation: pulse 1.6s ease-in-out infinite; }


.found-bee img { width: 100%; filter: drop-shadow(0 1vh 1vh #0004); }
.found-bee .zzz { position: absolute; top: -2vh; right: -4vh; font: 700 6vh ui-rounded, sans-serif; color: #fff; text-shadow: 0 .4vh 0 #0003; animation: bob 2s ease-in-out infinite; }

/* Tricky words: the sentence with a gap, and the listening button. */
.gap-card { position: relative; max-width: 92%; padding: 4vh 5vh; border-radius: 4vh; background: #fffdf6; box-shadow: 0 1.2vh 0 #0002; }
.gap-card p { font-size: 12vh; line-height: 1.3; color: #2b1d00; text-align: center; }
.gap { display: inline-block; min-width: 22vh; height: 12vh; vertical-align: -1.5vh; border-bottom: 1vh solid #2b1d0066; }
.gap .fill { visibility: hidden; }
.gap.filled { border-color: transparent; }
.gap.filled .fill { visibility: visible; color: #2fbf71; animation: pop .5s ease; }
.gap-card .hear { position: absolute; right: -3vh; top: -4vh; width: 13vh; height: 13vh; border-radius: 50%; background: #fff; font-size: 7vh; box-shadow: 0 .8vh 0 #0002; }
.scene-listen { display: grid; place-items: center; gap: 3vh; }
.said { font-size: 16vh; color: #2b1d00; background: #fff; padding: 1vh 5vh; border-radius: 3vh; display: none; }
.said.show { display: block; animation: pop .5s ease; }

/* Endings: the -s, -est or un- shows in the reveal. */
.word.plain .letter { transition: color .2s; }

/* Finales: whoever she found at the end of the round. */
.finale { position: absolute; left: 50%; bottom: 6vh; width: 34vh; translate: -50% 0; }
.finale img { width: 100%; filter: drop-shadow(0 1vh 1vh #0004); }
.found-alien .saucer, .caught-gully .sign { position: absolute; top: -6vh; right: -8vh; font-size: 12vh; animation: bob 2s ease-in-out infinite; }