/* Live talk: the "Talk to Bea" button, Bea's words under the prompt, the word card. */
.game-talk { position: relative; gap: 8px; }
.game-talk[hidden] { display: none; }
.game-talk .talk-mic { width: 20px; height: 20px; flex: none; }
.game-talk[data-state="starting"] { color: #7a6a2f; }
.game-talk[data-state="listening"], .game-talk[data-state="thinking"], .game-talk[data-state="speaking"] { color: #2a6b5f; background: #e4f2e6; border-color: #b6d6bd; }
.game-talk[data-state="listening"]::before, .game-talk[data-state="thinking"]::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #4cae8c88; animation: talk-ring 1.6s ease-out infinite; pointer-events: none; }
.game-talk[data-state="speaking"] .talk-mic { animation: talk-bob .9s ease-in-out infinite; }
.game-talk[data-state="resting"] { opacity: .65; }
.game-talk[data-state="handoff"] { color: #8a2f45; background: #ffecef; border-color: #f0bcc6; }
@keyframes talk-ring { 0% { opacity: .8; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes talk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.08); } }
body.immersive .game-talk[data-state="listening"], body.immersive .game-talk[data-state="thinking"], body.immersive .game-talk[data-state="speaking"] { background: #4cae8c66; border-color: #9fe0c6aa; color: #fff9e9; }
body.immersive .game-talk .talk-mic { width: 21px; height: 21px; }
body.immersive #talk-label { display: none; }

/* The same button on the bookshelf (a round tool in the book header). */
.book-talk { position: relative; color: #2f5148; }
.book-talk[data-state="listening"], .book-talk[data-state="thinking"], .book-talk[data-state="speaking"] { background: #dff0e3; border-color: #9fc9a9; color: #226b57; }
.book-talk[data-state="listening"]::before, .book-talk[data-state="thinking"]::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #4cae8c88; animation: talk-ring 1.6s ease-out infinite; pointer-events: none; }
.book-talk[data-state="speaking"] .ui-icon { animation: talk-bob .9s ease-in-out infinite; }
.book-talk[data-state="resting"] { opacity: .65; }
.book-talk[data-state="handoff"] { color: #8a2f45; background: #ffecef; border-color: #f0bcc6; }
.book-words .guide-caption { margin-top: 10px; }
.cover-copy .guide-caption { margin: 12px 0 0; }

/* Bea's words, as she says them, under the host's instruction. */
.guide-caption { margin: 8px 0 0; padding: 8px 12px 8px 40px; position: relative; font-size: 15px; line-height: 1.35; color: #2f5148; background: #eaf4ec; border: 1px solid #cfe3d3; border-radius: 14px; min-height: 0; }
.guide-caption[hidden] { display: none; }
.guide-caption::before { content: ""; position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #d8a86a radial-gradient(circle at 35% 35%, #f3d3a3, #b9834b); box-shadow: inset 0 0 0 2px #fff6e3; }
.guide-caption.is-done { color: #3c6157; }

/* A spoken answer: the picture the child named lights up as if a finger had tapped it. */
.choice.spoken, .book-ask .choice.spoken { animation: spoken-tap .9s ease; box-shadow: 0 0 0 5px #4cae8c99, 0 0 0 12px #4cae8c33 !important; }
@keyframes spoken-tap { 0% { transform: scale(1); } 30% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* The word card Bea can put on the screen ("Bb", "moon"). */
.guide-word { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: baseline; gap: 2px; padding: 10px 22px; border-radius: 22px; background: #fffdf5; color: #24464b; border: 3px solid #f4d27a; box-shadow: 0 6px 0 #e3c06a, 0 12px 26px #2c3a2a2e; font-size: clamp(36px, 7vw, 64px); font-weight: 600; letter-spacing: -1px; line-height: 1; animation: word-pop .45s cubic-bezier(.34,1.56,.64,1) both; pointer-events: none; }
.guide-word-first { color: #d9534f; }
.guide-word-lower { font-size: .7em; color: #4b8272; margin-left: 6px; }
@keyframes word-pop { from { opacity: 0; transform: translate(-50%, -12px) scale(.6); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.quiet .guide-word, .quiet .game-talk::before, .quiet .game-talk .talk-mic, .quiet .book-talk::before, .quiet .book-talk .ui-icon { animation: none; }
@media (prefers-reduced-motion: reduce) { .guide-word, .game-talk::before, .game-talk .talk-mic, .book-talk::before, .book-talk .ui-icon { animation: none !important; } }

/* The voice gate on the play page (Little Days has its own copy of these rules). */
.voice-setup { max-width: min(92vw, 520px); border: 1px solid #e0e3d7; border-radius: 22px; padding: 22px 24px 20px; color: #24464b; background: #fffdf6; box-shadow: 0 20px 50px #1c2f2a33; }
.voice-setup::backdrop { background: #0e211fa8; }
.voice-setup form { position: absolute; top: 8px; right: 8px; }
.voice-setup .dialog-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dfe2d5; background: #f4f4ec; font-size: 22px; line-height: 1; }
.voice-setup h2 { font-size: 24px; margin: 6px 0 10px; }
.voice-setup p { font-size: 14px; line-height: 1.45; color: #4d675f; margin: 0 0 10px; }
.voice-setup .eyebrow { font-size: 10px; letter-spacing: 1.8px; color: #578178; font-weight: 600; }
.voice-setup label { display: block; font-size: 14px; margin: 10px 0; }
.voice-setup input[type="text"] { width: 70px; margin-left: 8px; padding: 8px 10px; border: 1px solid #cfd4c5; border-radius: 10px; font-size: 16px; }
.voice-setup .consent-row { display: flex; gap: 10px; align-items: flex-start; }
.voice-setup .consent-row input { margin-top: 3px; width: 20px; height: 20px; }
.voice-setup #voice-setup-error { color: #a52b49; min-height: 18px; }
.voice-setup .btn { margin-top: 6px; }
@media (max-width: 600px) {
  .game-talk #talk-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .game-talk { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .guide-caption { font-size: 14px; }
}