/* Cora's Lessons: playful, chunky, warm. Board game, not worksheet.
   Everything sits in a bamboo grove: sky and clouds up top, a pond and grass
   down below, bamboo at the edges, a cat on the lawn. UI pieces are plush
   and thick, with a lit top edge and a solid underside, like game pieces. */

:root {
  --cream: #f6efe0;
  --cream-deep: #eadfc7;
  --ink: #2b2b2b;
  --white: #fdfcf9;
  --green: #5f8f4e;
  --green-deep: #3a5a40;
  --leaf: #8fbf6a;
  --brown: #8b5e3c;
  --tan: #c9a074;
  --tan-deep: #b08a5e;
  --blush: #e8b4a0;
  --sky: #e6efe4;
  --sky-low: #f3f0e2;
  --meadow: #eef0da;
  --grass: #a9cf86;
  --grass-deep: #79a95e;
  --edge: #d8ccb2;           /* the solid underside of a white piece */
  --shadow-soft: 0 14px 24px -10px rgba(58, 60, 40, 0.28);
  --piece: 0 7px 0 var(--edge), var(--shadow-soft), inset 0 2px 0 #fff, inset 0 -2px 0 rgba(0,0,0,0.04);
  --piece-down: 0 2px 0 var(--edge), 0 4px 8px -4px rgba(58, 60, 40, 0.3), inset 0 2px 0 #fff;
  --tile: clamp(72px, 12vmin, 120px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; -webkit-touch-callout: none; }
body {
  font-family: "Fredoka", "Nunito", "Segoe UI Rounded", system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; }

/* ---------- the world behind everything ---------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #dfeae0 0%, var(--sky) 22%, var(--sky-low) 48%, var(--meadow) 62%, #e4ead0 100%);
}
.scene .hills { position: absolute; left: 0; right: 0; top: 30%; height: 20%; width: 100%; opacity: 0.85; }
.scene .ground {
  position: absolute; left: 0; right: 0; top: 48%; bottom: 0;
  background: linear-gradient(180deg, rgba(238, 240, 218, 0) 0%, rgba(230, 236, 208, 0.7) 40%, #dfe7c6 100%);
}
.scene .grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-deep) 100%);
}
.scene .grass::before {
  /* scalloped tuft edge */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px;
  background: radial-gradient(circle at 50% 100%, var(--grass) 0 8px, transparent 9px) 0 0 / 22px 16px repeat-x;
}
.scene .grass::after {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 60%;
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.18) 0 6px, transparent 7px) 0 0 / 46px 30px repeat-x;
}

/* clouds: three soft lumps, drifting for minutes, never in a hurry */
.scene .cloud {
  position: absolute; top: var(--y); left: -30vw;
  width: 18vw; height: 4.6vw; border-radius: 50vw;
  background: #fbfcf8;
  transform: scale(var(--s));
  animation: drift var(--t) linear infinite;
  animation-delay: var(--d);
  will-change: transform;
}
.scene .cloud::before, .scene .cloud::after {
  content: ""; position: absolute; bottom: 30%; border-radius: 50%;
  background: #fbfcf8;
}
.scene .cloud::before { left: 16%; width: 38%; height: 150%; }
.scene .cloud::after { left: 46%; width: 30%; height: 115%; }
/* each cloud: height, size, lap time, head start, and where it sits in a frozen screenshot */
.scene .cloud:nth-child(1) { --y: 5%;  --s: 1;    --t: 95s;  --d: -20s;  --x: 62vw; }
.scene .cloud:nth-child(2) { --y: 13%; --s: 0.7;  --t: 130s; --d: -70s;  --x: 98vw; }
.scene .cloud:nth-child(3) { --y: 2%;  --s: 0.55; --t: 160s; --d: -110s; --x: 32vw; }
.scene .cloud:nth-child(4) { --y: 17%; --s: 0.85; --t: 115s; --d: -45s;  --x: 118vw; }
@keyframes drift { from { transform: translateX(0) scale(var(--s)); } to { transform: translateX(160vw) scale(var(--s)); } }

/* the pond, bottom left, with light on it */
.scene .pond { position: absolute; left: 9%; bottom: 3.5%; width: clamp(240px, 32vw, 460px); height: auto; }
.scene .ripple { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 7.5s ease-out infinite; animation-delay: var(--d); }
.scene .ripple:nth-child(1) { --d: 0s; } .scene .ripple:nth-child(2) { --d: 2.6s; } .scene .ripple:nth-child(3) { --d: 5.1s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(0.2); } 12% { opacity: 0.55; } 60% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } }
.scene .glint { opacity: 0; animation: glint 3.6s ease-in-out infinite; animation-delay: var(--d); }
.scene .glint:nth-child(1) { --d: 0s; } .scene .glint:nth-child(2) { --d: 1.1s; } .scene .glint:nth-child(3) { --d: 2.3s; } .scene .glint:nth-child(4) { --d: 3.4s; } .scene .glint:nth-child(5) { --d: 0.6s; }
@keyframes glint { 0%, 100% { opacity: 0; transform: translateX(0); } 50% { opacity: 0.75; transform: translateX(6px); } }
.scene .lily { transform-box: fill-box; transform-origin: center; animation: bob-lily 5s ease-in-out infinite; }
@keyframes bob-lily { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* bamboo at the edges, swaying from the root */
.scene .bamboo {
  position: absolute; bottom: 0; height: 92%; width: auto;
  transform-origin: 50% 100%;
  animation: sway 9s ease-in-out infinite;
  filter: drop-shadow(0 10px 8px rgba(40, 60, 30, 0.18));
  /* the tops fade into the sky so the art never shows a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  will-change: transform;
  transition: left 700ms ease, right 700ms ease;
}
.scene .bamboo-left { left: -9vw; }
.scene .bamboo-right { right: -8vw; transform: scaleX(-1); animation-name: sway-mirror; animation-duration: 11s; }
/* while she plays the grove steps aside so the tiles have air */
[data-screen="play"] .scene .bamboo-left { left: -19vw; }
[data-screen="play"] .scene .bamboo-right { right: -17vw; }
@keyframes sway { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
@keyframes sway-mirror { 0%, 100% { transform: scaleX(-1) rotate(0.8deg); } 50% { transform: scaleX(-1) rotate(-0.8deg); } }

/* ---------- Mochi the cat ---------- */
.cat { position: absolute; left: 0; bottom: 2.4%; width: clamp(84px, 9.5vw, 130px); margin-left: calc(clamp(84px, 9.5vw, 130px) / -2); }
.cat-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cat:not(.facing-right) .cat-svg { transform: scaleX(-1); }
.cat .cat-tail { transform-origin: 30px 78px; animation: swish 3.4s ease-in-out infinite; }
.cat .cat-lid { transform-origin: center 0; transform-box: fill-box; transform: scaleY(0); animation: blink 5.2s infinite; }
.cat .leg { transform-box: view-box; }
.cat .leg-back-far { transform-origin: 52.5px 78px; }
.cat .leg-front-far { transform-origin: 104.5px 78px; }
.cat .leg-back-near { transform-origin: 63px 82px; }
.cat .leg-front-near { transform-origin: 113px 82px; }
.cat.walking .leg-front-near, .cat.walking .leg-back-far { animation: step 520ms ease-in-out infinite; }
.cat.walking .leg-front-far, .cat.walking .leg-back-near { animation: step 520ms ease-in-out infinite reverse; }
.cat.walking .cat-body, .cat.walking .cat-head, .cat.walking .cat-tail { animation: trot 260ms ease-in-out infinite alternate; }
.cat.walking .cat-tail { animation: trot 260ms ease-in-out infinite alternate, swish 1.6s ease-in-out infinite; }
/* sitting: rump down, front legs straight, tail curled round */
.cat .cat-body, .cat .cat-head, .cat .leg-front-far, .cat .leg-front-near, .cat .leg-back-far, .cat .leg-back-near, .cat .cat-tail { transition: transform 420ms cubic-bezier(.3,.8,.4,1.1), opacity 300ms ease; }
.cat .cat-body, .cat .cat-head { transform-origin: 44px 104px; }
.cat.sitting .cat-body, .cat.sitting .cat-head { transform: rotate(-16deg); }
.cat.sitting .leg-front-far, .cat.sitting .leg-front-near { transform: translate(-9px, -17px) scaleY(1.55); }
.cat.sitting .leg-back-far, .cat.sitting .leg-back-near { transform: scaleY(0.2); opacity: 0; }
.cat.sitting .cat-tail { transform: rotate(38deg); }
.cat .cat-head { transform-origin: 44px 104px; }
.cat.tilt .cat-head { animation: cat-tilt 600ms ease 1; }
.cat.hop .cat-all { animation: cat-hop 700ms ease 1; }
@keyframes swish { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes step { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
@keyframes trot { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes cat-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg) translateY(2px); } }
@keyframes cat-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-22px) rotate(-3deg); } 70% { transform: translateY(0); } 85% { transform: translateY(-6px); } }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.is-active { display: flex; }

/* ---------- buttons ---------- */
.big-btn {
  width: clamp(120px, 22vmin, 200px); height: clamp(120px, 22vmin, 200px);
  border-radius: 40%;
  color: var(--white);
  transition: transform 120ms ease, box-shadow 120ms ease;
  display: grid; place-items: center;
}
.big-btn svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18)); }
.big-btn.green {
  background: linear-gradient(180deg, #74a660 0%, var(--green) 55%, #55813f 100%);
  box-shadow: 0 8px 0 #3d6431, var(--shadow-soft), inset 0 2px 0 rgba(255,255,255,0.35);
}
.big-btn.green:active { transform: translateY(6px); box-shadow: 0 2px 0 #3d6431, inset 0 2px 0 rgba(255,255,255,0.35); }
.big-btn.brown {
  background: linear-gradient(180deg, #a5714a 0%, var(--brown) 55%, #7a5033 100%);
  box-shadow: 0 8px 0 #5e3f27, var(--shadow-soft), inset 0 2px 0 rgba(255,255,255,0.3);
}
.big-btn.brown:active { transform: translateY(6px); box-shadow: 0 2px 0 #5e3f27, inset 0 2px 0 rgba(255,255,255,0.3); }
.icon-btn {
  width: 64px; height: 64px; border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, var(--white) 60%, #f1eadb 100%);
  color: var(--green-deep);
  box-shadow: var(--piece); display: grid; place-items: center;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.icon-btn:active { transform: translateY(5px); box-shadow: var(--piece-down); }
.row { display: flex; gap: 32px; margin-top: 24px; }

/* ---------- home ---------- */
.brand {
  font-size: clamp(28px, 6vmin, 56px); margin: 8px 0 24px; color: var(--green-deep); letter-spacing: 0.5px;
  text-shadow: 0 2px 0 #fff, 0 6px 14px rgba(58, 90, 64, 0.18);
}
.home-panda { width: clamp(180px, 34vmin, 320px); filter: drop-shadow(0 12px 10px rgba(40, 60, 30, 0.22)); }
.loading { margin-top: 24px; width: min(60vw, 420px); }
.bamboo-bar { height: 26px; border-radius: 13px; background: var(--cream-deep); overflow: hidden; border: 3px solid var(--green-deep); box-shadow: inset 0 3px 6px rgba(0,0,0,0.12); }
.bamboo-fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--leaf) 0 40px, var(--green) 40px 46px); transition: width 200ms; }

/* ---------- intro ---------- */
.intro-panda { width: clamp(220px, 44vmin, 420px); filter: drop-shadow(0 14px 12px rgba(40, 60, 30, 0.22)); }
.speech { display: flex; gap: 10px; margin-top: 12px; height: 20px; }
.speech .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green-deep); opacity: 0.35; animation: dotpulse 900ms infinite; }
.speech .dot:nth-child(2) { animation-delay: 150ms; }
.speech .dot:nth-child(3) { animation-delay: 300ms; }
@keyframes dotpulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.hint { color: var(--brown); font-size: 20px; opacity: 0.7; margin-top: 24px; }

/* ---------- play ---------- */
#play { justify-content: flex-start; }
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.mini-panda { width: 72px; filter: drop-shadow(0 4px 4px rgba(40, 60, 30, 0.22)); }
.progress { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 60vw; }
.progress i {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0, var(--cream-deep) 70%);
  border: 2px solid var(--tan); box-shadow: 0 2px 0 var(--tan-deep);
}
.progress i.done { background: radial-gradient(circle at 40% 35%, #b6d89a 0, var(--leaf) 70%); border-color: var(--green-deep); box-shadow: 0 2px 0 var(--green-deep); }
.progress i.now { background: radial-gradient(circle at 40% 35%, #fff 0, var(--white) 70%); border-color: var(--green-deep); box-shadow: 0 2px 0 var(--green-deep); transform: scale(1.25); }

.stage { position: relative; flex: 1; width: 100%; }

.picture-card {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(64vmin, 56vw); aspect-ratio: 16 / 9;
  background: #fbf7ec; border-radius: 28px;
  border: 7px solid var(--white); overflow: hidden;
  box-shadow: 0 0 0 3px var(--edge), 0 9px 0 var(--edge), 0 22px 30px -12px rgba(58, 60, 40, 0.35), inset 0 0 0 2px rgba(0,0,0,0.04);
  display: grid; place-items: center;
  transition: transform 200ms ease;
}
.picture-card:active { transform: translate(-50%, -50%) scale(0.97); }
.picture-card img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fbf7ec; pointer-events: none; -webkit-touch-callout: none; }
.picture-card img[hidden] { display: none; }
.picture-fallback { font-size: 20vmin; color: var(--tan); }
.picture-card.pop { animation: pop 500ms ease; }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.08) rotate(-2deg); } 100% { transform: translate(-50%, -50%) scale(1); } }

.answer {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, calc(min(64vmin, 56vw) * 9 / 32 + 18px));
  display: flex; gap: 14px;
}
.slot {
  width: var(--tile); height: var(--tile); border-radius: 24px;
  border: 4px dashed var(--tan); background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 4px 10px rgba(80, 60, 30, 0.14), 0 1px 0 rgba(255,255,255,0.7);
  transition: background 200ms, border-color 200ms;
}
.slot.filled { border-style: solid; border-color: var(--green-deep); background: var(--white); box-shadow: inset 0 3px 8px rgba(58, 90, 64, 0.18); }

.tiles { position: absolute; inset: 0; pointer-events: none; }
.tile {
  position: absolute; pointer-events: auto;
  width: var(--tile); height: var(--tile);
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  border-radius: 24px; color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--white) 55%, #f0e9d9 100%);
  font-size: calc(var(--tile) * 0.5); font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  box-shadow: var(--piece);
  transition: left 420ms cubic-bezier(.2,.9,.3,1.2), top 420ms cubic-bezier(.2,.9,.3,1.2), transform 120ms ease, box-shadow 120ms ease, opacity 220ms ease, filter 220ms ease;
  animation: land 420ms cubic-bezier(.2,.9,.3,1.2) backwards;
}
.tile.rime { color: var(--green-deep); }
.tile:active { transform: translateY(5px) scale(0.97); box-shadow: var(--piece-down); }
.tile.locked { pointer-events: none; box-shadow: none; z-index: 2; }
.tile.wrong { animation: shake 360ms ease; }
.tile.hit { animation: bump 240ms ease; }
/* after a miss every tile naps: dimmer, flatter, and it ignores taps */
.tiles.cooling .tile:not(.locked) { pointer-events: none; opacity: 0.55; filter: saturate(0.6); transform: translateY(4px); box-shadow: var(--piece-down); }
.tiles.cooling .tile.wrong { opacity: 0.8; }
@keyframes land { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(4deg); } }
@keyframes bump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(3deg); } }

.word-reveal {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, calc(min(64vmin, 56vw) * 9 / 32 + 18px));
  height: var(--tile); padding: 0 28px; border-radius: 24px;
  background: linear-gradient(180deg, #74a660 0%, var(--green) 55%, #55813f 100%);
  color: var(--white);
  font-size: calc(var(--tile) * 0.55); font-weight: 700; line-height: var(--tile);
  box-shadow: 0 7px 0 #3d6431, var(--shadow-soft), inset 0 2px 0 rgba(255,255,255,0.35);
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
  animation: reveal-pop 500ms ease;
  z-index: 3;
}
@keyframes reveal-pop {
  0% { transform: translate(-50%, calc(min(64vmin, 56vw) * 9 / 32 + 18px)) scale(0.6); opacity: 0; }
  60% { transform: translate(-50%, calc(min(64vmin, 56vw) * 9 / 32 + 18px)) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, calc(min(64vmin, 56vw) * 9 / 32 + 18px)) scale(1); }
}

/* ---------- done ---------- */
.done-panda { width: clamp(200px, 40vmin, 380px); filter: drop-shadow(0 14px 12px rgba(40, 60, 30, 0.22)); }
.time { font-size: clamp(48px, 12vmin, 120px); color: var(--green-deep); line-height: 1; margin-top: 8px; text-shadow: 0 3px 0 #fff, 0 8px 16px rgba(58, 90, 64, 0.2); }
.best { font-size: clamp(18px, 3.5vmin, 32px); color: var(--brown); margin-top: 8px; min-height: 1.4em; }
.best.new { color: var(--green); }

/* ---------- falling leaves ---------- */
.leaves { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.leaf {
  position: absolute; top: -40px; width: 26px; height: 14px; border-radius: 100% 0 100% 0;
  background: var(--leaf); opacity: 0.9;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; } }

/* screenshots and reduced motion: no animation at all */
.no-fx *, .no-fx *::before, .no-fx *::after { animation: none !important; transition: none !important; }
.no-fx .scene .cloud { transform: translateX(var(--x)) scale(var(--s)) !important; }
.no-fx .scene .glint { opacity: 0.6 !important; }
.no-fx .scene .ripple { opacity: 0.4 !important; transform: scale(1) !important; }
.no-fx .cat { transform: translateX(62vw) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ---------- panda ---------- */
.panda { width: 100%; height: auto; display: block; overflow: visible; }
.panda .head { transform-origin: 100px 120px; animation: idle-tilt 6s ease-in-out infinite; }
.panda .ear-l, .panda .ear-r { transform-origin: center; }
.panda .ear-l { animation: twitch-l 7s ease-in-out infinite; }
.panda .ear-r { animation: twitch-r 9s ease-in-out infinite 2s; }
.panda .lid-l, .panda .lid-r { transform-origin: center 0; transform: scaleY(0); animation: blink 4.5s infinite; }
.panda .lid-r { animation-delay: 60ms; }
.panda .body { transform-origin: 100px 190px; animation: breathe 3.2s ease-in-out infinite; }
.panda .mouth-open { opacity: 0; }
.panda.talking .mouth-open { animation: talk 220ms steps(1) infinite; }
.panda.talking .mouth { animation: talk-hide 220ms steps(1) infinite; }
.panda.happy { animation: bounce 700ms ease 2; }
.panda.happy .head { animation: happy-tilt 700ms ease 2; }
.panda.roll { animation: roll 1.4s ease-in-out 1; }
.panda.oops .head { animation: oops 500ms ease 1; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } }
@keyframes idle-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes twitch-l { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-12deg); } 96% { transform: rotate(6deg); } }
@keyframes twitch-r { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(12deg); } 96% { transform: rotate(-6deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02, 1.03); } }
@keyframes talk { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talk-hide { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8%); } }
@keyframes happy-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } }
@keyframes roll { 0% { transform: rotate(0) translateX(0); } 50% { transform: rotate(360deg) translateX(0); } 100% { transform: rotate(360deg); } }
@keyframes oops { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }

/* ---------- portrait fallback (she should be in landscape, but be kind) ---------- */
@media (orientation: portrait) {
  .picture-card { top: 36%; width: min(84vw, 64vmin); }
  .answer, .word-reveal { transform: translate(-50%, calc(min(84vw, 64vmin) * 9 / 32 + 18px)); }
  .scene .bamboo { height: 60%; }
  .scene .bamboo-left { left: -22vw; }
  .scene .bamboo-right { right: -22vw; }
  .scene .cloud { width: 40vw; height: 11vw; }
}