/* Layout of the three screens: hub, learn, find. */
.chara-box { width: 100%; aspect-ratio: 1; display: block; }

/* ---------- Learn ---------- */
#learn { grid-template-rows: auto 1fr auto; }
#learn.has-board .nav { visibility: hidden; }
#learnTitle { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#learnStage { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 6px 16px; min-height: 0; }
#learnStage .hero { width: var(--g); aspect-ratio: 1; display: grid; place-items: center; transition: transform .5s var(--spring); }
#learnStage .hero .sticker { width: 100%; height: 100%; font-size: var(--g); }
#learnStage.revealed .hero { transform: translateY(10%) scale(.8); }
.reveal { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); width: calc(var(--g) * .72); aspect-ratio: 1; display: grid; place-items: center; visibility: hidden; }
#learnStage.revealed .reveal { visibility: visible; }
.reveal .sticker { width: 100%; height: 100%; font-size: calc(var(--g) * .72); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5%) rotate(3deg); } }
.count { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 92vw; }
.count .sticker { width: clamp(42px, 12vw, 62px); aspect-ratio: 1; font-size: clamp(42px, 12vw, 62px); }
.examples { display: flex; gap: 14px; }
.examples .sticker { width: clamp(56px, 16vw, 80px); aspect-ratio: 1; font-size: clamp(56px, 16vw, 80px); }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 520px; }
.board .sticker { width: 100%; aspect-ratio: 1; font-size: min(27vw, 150px); }
#learnStage.board-mode .word { min-width: 40vw; text-align: center; }

/* ---------- Find ---------- */
#find { grid-template-rows: auto 1fr; }
#findStage { display: grid; justify-items: center; align-content: center; gap: 22px; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 560px; }
.asker { width: min(34vw, 150px); aspect-ratio: 1; position: relative; }
.asker .q { position: absolute; right: -14%; top: -10%; width: 44%; aspect-ratio: 1; border-radius: 50% 50% 50% 10%; background: #fff; color: var(--ink); font-size: clamp(22px, 7vw, 36px); display: grid; place-items: center; box-shadow: 0 4px 0 #0002; animation: bob 1.6s ease-in-out infinite; }
[dir="rtl"] .asker .q { right: auto; left: -14%; border-radius: 50% 50% 10% 50%; }
.choice { aspect-ratio: .86; border-radius: 24px; background: #fff; border: 4px solid #fff; box-shadow: 0 6px 0 #0002, 0 12px 20px #0003; display: grid; place-items: center; padding: 8%; overflow: visible; transition: transform .12s; }
.choice:active { transform: scale(.94); }
.choice .chara-box, .choice .sticker { width: 100%; aspect-ratio: 1; font-size: min(26vw, 150px); }
.choice.yes { animation: jumpy .55s var(--spring) 2; box-shadow: 0 0 0 5px #ffd600, 0 6px 0 5px #c99a00; }
.choice.no { animation: shake .4s ease; }
@keyframes jumpy { 50% { transform: translateY(-26px) scale(1.08); } }
@keyframes shake { 25% { transform: translateX(-12px) rotate(-4deg); } 75% { transform: translateX(12px) rotate(4deg); } }
#celebrate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #2b246699; }
#celebrate .box { background: #fff; border-radius: 34px; padding: 26px 34px; text-align: center; display: grid; gap: 8px; justify-items: center; box-shadow: 0 10px 0 #0002, 0 20px 40px #0004; animation: popin .6s var(--spring); }
#celebrate .box b { font-size: 64px; line-height: 1; }
#celebrate .box span { font-size: 24px; color: var(--ink); }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }