/* The lesson stage: a fixed 1280x720 canvas, scaled to fit by the page (or recorded 1:1). */
.lw-stage { position: relative; width: 1280px; height: 720px; overflow: hidden; font-family: 'Fredoka', 'Varela Round', system-ui, sans-serif; color: #1E2A4A; direction: ltr; user-select: none; }
.lw-stage > * { position: absolute; }
.lw-bg { inset: 0; width: 100%; height: 100%; }
.lw-stage img { -webkit-user-drag: none; }

.lw-title { inset: 0; display: grid; place-items: center; }
.lw-title-main { display: flex; font-size: 132px; font-weight: 700; letter-spacing: 2px; color: #fff;
  paint-order: stroke; -webkit-text-stroke: 14px #1E2A4A; text-shadow: 0 10px 0 rgba(30,42,74,.25); margin-top: -90px; }
.lw-title-main span { display: inline-block; }
.lw-title-main span:nth-child(4n+1) { color: #FFC93C; }
.lw-title-main span:nth-child(4n+3) { color: #FF7A6B; }

/* the main picture stands on the grass / table */
.lw-pic { left: 520px; top: 200px; width: 380px; height: 380px; transform-origin: 50% 90%; }
.lw-pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(255,255,255,.6)); }
.lw-shadow { left: 560px; top: 556px; width: 300px; height: 34px; border-radius: 50%; background: rgba(20,60,20,.28); filter: blur(4px); transform-origin: 50% 50%; }
.scene-kitchen .lw-shadow { background: rgba(120,40,20,.25); }

/* the word types itself into a cloud, top left */
.lw-cloud { left: 40px; top: 56px; width: 560px; height: 230px; transform-origin: 50% 60%; display: grid; place-items: center; }
.lw-cloud svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 0 rgba(30,42,74,.12)); overflow: visible; }
.lw-word { position: relative; font-size: 104px; font-weight: 700; line-height: 1; margin-top: 18px; white-space: nowrap; }
.lw-word span { display: inline-block; transform-origin: 50% 80%; }
.lw-word span:first-child { color: #FF5A4E; }

.lw-caption { left: 50%; bottom: 34px; transform: translateX(-50%); white-space: nowrap; }
.lw-caption span { display: block; background: #1E2A4A; color: #fff; font-size: 46px; font-weight: 600; padding: 12px 34px 16px; border-radius: 999px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }

/* review: everyone together */
.lw-grid { left: 90px; top: 70px; width: 1100px; height: 560px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lw-gi { background: rgba(255,255,255,.9); border-radius: 36px; display: grid; justify-items: center; align-content: center; gap: 6px; box-shadow: 0 8px 0 rgba(30,42,74,.14); transform-origin: 50% 60%; }
.lw-gi img { width: 150px; height: 150px; object-fit: contain; }
.lw-gi b { font-size: 40px; font-weight: 700; opacity: 0; }
.lw-gi.on { background: #FFF6CC; box-shadow: 0 0 0 8px #FFC93C, 0 10px 0 rgba(30,42,74,.18); }
.lw-gi.named b { opacity: 1; }
.lw-gi.on b { color: #FF5A4E; }

/* quiz: three cards, a countdown, a star */
.lw-quiz { inset: 0; }
.lw-timer { left: 50%; top: 40px; width: 130px; height: 130px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 78px; font-weight: 700; color: #1E2A4A; box-shadow: 0 0 0 10px #FFC93C, 0 10px 0 10px rgba(30,42,74,.15); position: absolute; }
.lw-timer.win { background: #FFC93C; color: #fff; box-shadow: 0 0 0 10px #fff, 0 10px 0 10px rgba(30,42,74,.15); }
.lw-card { position: absolute; top: 250px; width: 310px; height: 310px; background: #fff; border-radius: 48px; display: grid; place-items: center; box-shadow: 0 10px 0 rgba(30,42,74,.16); }
.lw-card:nth-of-type(2) { left: 130px; } .lw-card:nth-of-type(3) { left: 485px; } .lw-card:nth-of-type(4) { left: 840px; }
.lw-card img { width: 230px; height: 230px; object-fit: contain; }
.lw-card.right { box-shadow: 0 0 0 12px #5CCB3A, 0 12px 0 12px rgba(30,42,74,.15); }

/* outro parade */
.lw-party { inset: 0; }
.lw-party img { position: absolute; width: 170px; height: 170px; object-fit: contain; top: 420px; }
.lw-party img:nth-of-type(1) { left: 40px; } .lw-party img:nth-of-type(2) { left: 190px; top: 450px; } .lw-party img:nth-of-type(3) { left: 340px; }
.lw-party img:nth-of-type(4) { left: 490px; top: 450px; } .lw-party img:nth-of-type(5) { left: 640px; } .lw-party img:nth-of-type(6) { left: 790px; top: 450px; }
.lw-party img:nth-of-type(7) { left: 940px; } .lw-party img:nth-of-type(8) { left: 1080px; top: 450px; }
.lw-party-text { position: absolute; left: 50%; top: 110px; font-size: 140px; font-weight: 700; color: #FFC93C; -webkit-text-stroke: 14px #1E2A4A; paint-order: stroke; white-space: nowrap; }

/* lesson progress */
.lw-dots { right: 36px; bottom: 32px; display: flex; gap: 10px; }
.lw-dots i { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 3px rgba(30,42,74,.18); }
.lw-dots i.on { background: #FFC93C; box-shadow: inset 0 0 0 3px #E0A800; }
.lw-dots i.now { background: #FF5A4E; box-shadow: 0 0 0 4px #fff; }

/* think: three question marks fill in while the child guesses */
.lw-think { position: relative; display: none; gap: 26px; margin-top: 18px; }
.lw-think b { font-size: 100px; font-weight: 700; color: #1C8FE0; line-height: 1; display: inline-block; }
/* your turn: microphone chip with a draining ring */
.lw-turn { left: 50%; bottom: 40px; display: flex; align-items: center; gap: 18px; background: #FF5A4E; color: #fff; border-radius: 999px; padding: 12px 40px 12px 14px; font-size: 52px; font-weight: 700; box-shadow: 0 8px 0 #C93A2E; transform-origin: 50% 100%; white-space: nowrap; }
.lw-turn svg { width: 84px; height: 84px; }
.lw-turn .trk { fill: rgba(0,0,0,.15); stroke: rgba(255,255,255,.35); stroke-width: 4; }
.lw-turn .ring { fill: none; stroke: #FFC93C; stroke-width: 4; stroke-dasharray: 126; transform: rotate(-90deg); transform-origin: 24px 24px; stroke-linecap: round; }