:root {
  --ink: #253b48;
  --cream: #fffdf4;
  --yellow: #ffd857;
  --orange: #ff8b5b;
  --green: #58bd77;
  --blue: #58bde8;
  --shadow: 0 8px 0 rgba(38, 72, 74, .16), 0 14px 30px rgba(35, 67, 75, .15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background: #a7db61 url("assets/meadow.png") center/cover fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,.06), rgba(255,247,191,.12));
  pointer-events: none;
}

button { font: inherit; touch-action: manipulation; cursor: pointer; }

.game { width: min(920px, 100%); min-height: 100vh; margin: auto; padding: 18px 22px 28px; position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.brand { color: white; font-size: clamp(1.25rem, 4vw, 1.75rem); text-shadow: 0 3px 0 rgba(30,87,95,.24); }
.brand span { background: var(--orange); border-radius: 50%; padding: 8px; display: inline-grid; place-items: center; }
.round-button { border: 4px solid white; background: var(--yellow); border-radius: 50%; width: 58px; height: 58px; font-size: 1.55rem; box-shadow: 0 5px 0 #d9a92f; }
.language-button { border: 4px solid white; background: #58bde8; color: white; border-radius: 18px; min-width: 58px; height: 52px; font-size: 1.15rem; box-shadow: 0 5px 0 #2b8cb5; }
.home-button { min-width: 50px; background: #ff8b5b; box-shadow: 0 5px 0 #d8623e; font-size: 1.55rem; }
.round-button:active, .language-button:active, .primary-button:active, .listen-button:active, .animal-card:active { transform: translateY(4px); box-shadow: none; }

.panel { background: rgba(255,253,244,.94); width: min(580px, 100%); margin: 7vh auto 0; padding: clamp(25px, 6vw, 50px); border: 7px solid white; border-radius: 42px; text-align: center; box-shadow: var(--shadow); }
.mascot { font-size: clamp(6rem, 25vw, 10rem); line-height: .9; filter: drop-shadow(0 8px 0 rgba(50,75,50,.12)); animation: bob 2s ease-in-out infinite; }
.home-mascot { display: block; width: clamp(150px, 34vw, 235px); height: clamp(180px, 38vh, 280px); margin: auto; object-fit: contain; }
h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); margin: 22px 0 8px; color: #f2674a; line-height: 1; }
.panel p { font-size: clamp(1.2rem, 4vw, 1.65rem); margin: 12px 0 28px; }
.rounds-label { display: block; margin: -8px 0 8px; color: #4b6972; font-size: 1.05rem; }
.player-input { display: block; width: min(280px, 90%); margin: 0 auto 22px; padding: 11px 16px; border: 4px solid #bce8f5; border-radius: 18px; background: white; color: var(--ink); text-align: center; font: inherit; font-size: 1.2rem; outline: none; }
.player-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(88,189,232,.2); }
.player-input.invalid { border-color: #ff806d; animation: wiggle .35s ease; }
.rounds-select { display: block; width: 120px; margin: 0 auto 24px; padding: 9px 18px; border: 4px solid #bce8f5; border-radius: 18px; background: white; color: var(--ink); text-align: center; font: inherit; font-size: 1.35rem; cursor: pointer; }
.primary-button { border: 5px solid white; border-radius: 999px; padding: 17px 34px; color: white; background: var(--green); font-size: clamp(1.35rem, 5vw, 1.85rem); box-shadow: 0 7px 0 #319655, var(--shadow); }
.game-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.game-choice { min-height: 185px; padding: 18px 12px; border: 6px solid white; border-radius: 30px; color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 1.25rem; }
.game-choice small { font-size: .86rem; font-family: "Trebuchet MS", sans-serif; font-weight: normal; }
.game-choice-icon { font-size: 3.8rem; }
.quiz-choice { background: #fff2a9; }
.hunt-choice { background: #d8f6c7; }
.rainbow-choice { background: linear-gradient(135deg, #ffd6d6, #fff0a8, #d7f6ca, #d5edff, #eadcff); grid-column: 1 / -1; }
.bubble-choice { background: linear-gradient(145deg, #d9f7ff, #bcecff); grid-column: 1 / -1; }
.honey-choice { background: linear-gradient(145deg, #fff1a8, #ffd474); grid-column: 1 / -1; }
.game-choice:active { transform: translateY(5px); box-shadow: none; }

.play-screen { animation: appear .35s ease-out; }
.progress { background: rgba(255,255,255,.9); border: 4px solid white; border-radius: 22px; padding: 10px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; box-shadow: 0 5px 0 rgba(41,95,96,.13); font-size: 1rem; }
.progress-track { height: 15px; background: #d9ead8; border-radius: 20px; overflow: hidden; }
.progress-fill { height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .35s ease; }
.stars { min-width: 42px; color: #efaf22; }
.question-card { text-align: center; margin: 19px auto 17px; }
.question-card p { margin: 0; font-size: .96rem; color: #4b6972; }
.question-card h2 { display: inline-block; background: var(--cream); border: 5px solid white; box-shadow: 0 6px 0 rgba(48,90,85,.13); border-radius: 25px; padding: 14px 26px; margin: 6px 0 10px; font-size: clamp(1.65rem, 6vw, 2.65rem); }
.listen-button { display: block; margin: auto; border: 0; background: #e8f7ff; color: #27799c; padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 0 #acd9e8; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 24px); }
.animal-card { min-height: clamp(165px, 28vw, 245px); background: rgba(255,253,244,.96); border: 7px solid white; border-radius: 35px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); transition: transform .15s, filter .15s; }
.animal-card .emoji { font-size: clamp(5.1rem, 14vw, 8.7rem); line-height: 1; filter: drop-shadow(0 7px 0 rgba(38,75,65,.1)); }
.animal-card .name { font-size: clamp(1.15rem, 3.4vw, 1.65rem); }
.animal-card.correct { background: #dff8c6; border-color: #fff8a8; animation: celebrate .55s ease; }
.animal-card.wrong { animation: wiggle .35s ease; filter: saturate(.65); }
.feedback { height: 38px; text-align: center; margin: 14px 0 0; font-size: clamp(1.25rem, 4vw, 1.7rem); color: #207c45; text-shadow: 0 2px white; }
.trophy { font-size: clamp(6rem, 24vw, 10rem); animation: celebrate 1s ease infinite alternate; }
.final-stars { font-size: clamp(1.8rem, 7vw, 2.8rem); margin: -5px 0 28px; letter-spacing: 4px; }
.game-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -8px 0 20px; }
.stat { background: white; border-radius: 16px; padding: 10px 5px; font-size: .95rem; }
.stat strong { display: block; color: #f2674a; font-size: 1.35rem; }
.ranking-box { margin: 26px auto 0; padding: 14px 18px; background: rgba(232,247,255,.72); border-radius: 22px; text-align: left; }
.ranking-box h2 { margin: 0 0 8px; text-align: center; font-size: 1.25rem; }
.ranking-list { margin: 0; padding-left: 30px; }
.ranking-list li { padding: 5px 2px; }
.ranking-list li::marker { color: #e8a416; font-weight: bold; }
.ranking-score { float: right; color: #27799c; }
.ranking-empty { list-style: none; margin-left: -25px; text-align: center; color: #66828a; }
.hunt-screen { position: relative; animation: appear .35s ease-out; }
.hunt-hud { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 20px; margin-bottom: 12px; background: rgba(255,253,244,.94); border: 5px solid white; border-radius: 26px; box-shadow: var(--shadow); }
.hunt-hud h1 { margin: 0 0 3px; font-size: clamp(1.55rem, 5vw, 2.35rem); }
.hunt-hud p { margin: 0; }
.hunt-counter { flex: 0 0 auto; padding: 12px 16px; border-radius: 18px; background: var(--yellow); font-size: 1.35rem; box-shadow: 0 4px 0 #d9a92f; }
.hunt-area { position: relative; width: 100%; height: min(67vh, 620px); min-height: 430px; overflow: hidden; border: 7px solid white; border-radius: 32px; background: #a7db61 url("assets/meadow.png") center/cover; box-shadow: var(--shadow); }
.hidden-animal { position: absolute; width: clamp(58px, 8vw, 82px); height: clamp(58px, 8vw, 82px); padding: 0; border: 0; background: transparent; font-size: clamp(2.7rem, 7vw, 4.5rem); filter: drop-shadow(0 3px 2px rgba(29,66,43,.35)); transition: transform .25s, opacity .25s; animation: tinyBob 2.8s ease-in-out infinite; }
.hidden-animal:hover, .hidden-animal:focus-visible { transform: scale(1.12); outline: 4px dashed rgba(255,255,255,.85); border-radius: 50%; }
.hidden-animal.found { animation: foundAnimal .7s ease both; pointer-events: none; }
.hidden-animal.found::after { content: "✓"; position: absolute; right: -5px; top: -5px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #58bd77; color: white; font-size: 1rem; border: 3px solid white; }
.hunt-complete { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-45%); z-index: 4; width: min(440px, 88%); padding: 28px; border: 7px solid white; border-radius: 35px; background: rgba(255,253,244,.97); text-align: center; box-shadow: var(--shadow); }
.hunt-complete > div { font-size: 5rem; }
.hunt-complete h2 { font-size: 1.8rem; }
.rainbow-screen { position: relative; animation: appear .35s ease-out; }
.rainbow-card { padding: 18px clamp(14px, 4vw, 34px) 28px; background: rgba(255,253,244,.95); border: 7px solid white; border-radius: 35px; box-shadow: var(--shadow); }
.rainbow-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.rainbow-heading h1 { margin: 0 0 5px; font-size: clamp(1.65rem, 5vw, 2.6rem); }
.rainbow-heading p { margin: 0; }
.rainbow-stage { position: relative; width: min(620px, 100%); margin: 4px auto -8px; }
#rainbowSvg { display: block; width: 100%; overflow: visible; }
.rainbow-band { fill: none; stroke: #e4e8e3; stroke-width: 23; stroke-linecap: round; transition: stroke .45s ease, filter .45s ease; }
.rainbow-band.filled { filter: drop-shadow(0 3px 2px rgba(42,70,65,.18)); animation: rainbowPop .55s ease; }
.rainbow-cloud { position: absolute; bottom: -8px; font-size: clamp(3.8rem, 12vw, 6.8rem); filter: drop-shadow(0 4px 2px rgba(50,80,100,.15)); }
.cloud-left { left: -3%; }
.cloud-right { right: -3%; }
.color-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 3vw, 22px); min-height: 105px; }
.color-choice { width: clamp(92px, 20vw, 145px); min-height: 92px; padding: 9px; border: 7px solid white; border-radius: 27px; box-shadow: var(--shadow); color: #24343c; font-size: clamp(1rem, 3.5vw, 1.35rem); text-shadow: 0 1px rgba(255,255,255,.65); }
.color-choice:active { transform: translateY(5px); box-shadow: none; }
.color-choice.wrong { animation: wiggle .35s ease; }
.rainbow-feedback { min-height: 34px; margin: 0 0 10px; text-align: center; color: #287c4a; font-size: 1.3rem; }
.bubble-screen { position: relative; animation: appear .35s ease-out; }
.bubble-legend { display: flex; justify-content: center; gap: 22px; margin: -12px 0 25px; }
.bubble-legend span { display: flex; align-items: center; gap: 7px; font-size: 1.25rem; }
.legend-bubble { width: 34px; height: 34px; border: 3px solid white; border-radius: 50%; background: #78d7ef; box-shadow: 0 2px 5px rgba(35,91,120,.25); }
.legend-bubble.green { background: #55d879; }
.legend-bubble.gold { background: #f4c52d; box-shadow: 0 0 8px #ffd94a; }
.bubble-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; margin-bottom: 10px; background: rgba(255,253,244,.95); border: 5px solid white; border-radius: 24px; box-shadow: var(--shadow); }
.bubble-hud strong { display: block; color: #27799c; font-size: clamp(1.25rem, 4vw, 2rem); }
.bubble-hud small { display: block; margin-top: 3px; color: #58737c; }
.bubble-arena { position: relative; height: min(72vh, 650px); min-height: 470px; overflow: hidden; border: 7px solid white; border-radius: 32px; background: #59cde4 url("assets/underwater-game.png") center/cover; box-shadow: var(--shadow); touch-action: manipulation; }
.bubble-arena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,150,183,.04), transparent 28% 72%, rgba(16,150,183,.04)); pointer-events: none; }
.falling-bubble { position: absolute; top: -90px; z-index: 2; display: grid; place-items: center; width: var(--bubble-size); height: var(--bubble-size); padding: 0; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; background: radial-gradient(circle at 30% 25%, white 0 7%, rgba(255,255,255,.25) 9% 23%, rgba(108,210,242,.28) 48%, rgba(90,154,231,.38) 100%); box-shadow: inset -7px -8px 13px rgba(87,133,220,.18), 0 4px 9px rgba(36,102,148,.17); animation: bubbleFall var(--fall-time) linear forwards, bubbleSway 2.2s ease-in-out infinite alternate; }
.falling-bubble::before { content: ""; width: 24%; height: 14%; border-radius: 50%; background: rgba(255,255,255,.8); transform: translate(-42%,-90%) rotate(-30deg); }
.falling-bubble.green { border-color: rgba(222,255,214,.96); background: radial-gradient(circle at 30% 25%, white 0 7%, rgba(238,255,231,.45) 9% 23%, rgba(82,224,125,.45) 48%, rgba(24,157,76,.58) 100%); box-shadow: inset -7px -8px 13px rgba(24,132,65,.22), 0 0 13px rgba(108,255,145,.5); }
.falling-bubble.gold { border-color: #fff4ad; background: radial-gradient(circle at 30% 25%, #fffde0 0 8%, rgba(255,250,190,.6) 10% 22%, rgba(255,211,52,.68) 48%, rgba(229,150,16,.78) 100%); box-shadow: inset -7px -8px 13px rgba(160,101,6,.24), 0 0 18px 4px rgba(255,222,69,.72); }
.falling-bubble.gold::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,225,.9); font-size: calc(var(--bubble-size) * .38); text-shadow: 0 2px 3px #d79616; }
.falling-bubble.popped { animation: bubblePop .28s ease-out forwards; pointer-events: none; }
.bubble-crab { position: absolute; z-index: 5; left: 50%; bottom: 2%; translate: -50% 0; font-size: clamp(6.3rem, 18vw, 10rem); line-height: 1; filter: drop-shadow(0 7px 3px rgba(95,53,20,.2)); }
.crab-arm { position: absolute; z-index: 4; left: 50%; bottom: 13%; width: 48px; height: 19px; border: 3px solid #bd382d; border-radius: 999px; background: radial-gradient(circle at 9px 50%, #ff8a63 0 5px, #da4737 6px 9px, transparent 10px) 0 0/20px 100%, #e9533f; box-shadow: 0 3px 0 rgba(118,43,31,.22); transform-origin: 7px 50%; opacity: 0; pointer-events: none; transition: width .17s ease-out, transform .17s ease-out, opacity .1s; }
.crab-claw { position: absolute; right: -25px; top: 50%; width: 36px; height: 32px; translate: 0 -50%; border: 3px solid #b93229; border-radius: 48% 52% 45% 48%; background: #f45d48; box-shadow: inset 4px 4px 0 rgba(255,154,121,.55); }
.crab-claw::before, .crab-claw::after { content: ""; position: absolute; right: -13px; width: 25px; height: 15px; border: 3px solid #b93229; background: #f45d48; }
.crab-claw::before { top: -8px; border-radius: 90% 70% 15% 50%; transform: rotate(-26deg); }
.crab-claw::after { bottom: -8px; border-radius: 50% 15% 70% 90%; transform: rotate(26deg); }
.crab-arm.strike { opacity: 1; }
.bubble-burst { position: absolute; z-index: 8; width: 10px; height: 10px; pointer-events: none; }
.bubble-burst::before { content: ""; position: absolute; inset: -12px; border: 4px solid rgba(235,253,255,.95); border-radius: 50%; animation: burstRing .38s ease-out forwards; }
.bubble-burst i { position: absolute; left: 1px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: #e8fbff; box-shadow: 0 0 0 2px rgba(91,204,236,.45); transform: rotate(var(--burst-angle)) translateX(4px); animation: burstDrop .48s ease-out forwards; }
.bubble-complete-score { font-size: 1.4rem; color: #27799c; }
.bubble-screen > .hunt-complete { z-index: 20; }
.honey-screen { position: relative; animation: appear .35s ease-out; }
.honey-hud { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 18px; margin-bottom: 10px; background: rgba(255,253,244,.95); border: 5px solid white; border-radius: 25px; box-shadow: var(--shadow); }
.honey-hud h1 { margin: 0 0 4px; font-size: clamp(1.45rem, 4.5vw, 2.3rem); }
.honey-hud p { margin: 0; }
.honey-garden { position: relative; height: min(70vh, 630px); min-height: 490px; overflow: hidden; border: 7px solid white; border-radius: 32px; background: #8fd8ed url("assets/honey-garden.png") center/cover; box-shadow: var(--shadow); }
.garden-bee { position: absolute; z-index: 4; width: clamp(46px, 6.5vw, 62px); height: clamp(46px, 6.5vw, 62px); padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); font-size: clamp(2rem, 5vw, 3rem); filter: drop-shadow(0 4px 2px rgba(87,69,16,.28)); animation: beeWander var(--bee-speed, 4s) ease-in-out infinite; will-change: transform; }
.garden-bee:focus-visible { outline: 5px dashed white; }
.garden-bee:disabled { opacity: 1; cursor: default; }
.garden-bee.flying { z-index: 10; animation: none; pointer-events: none; }
.honey-station { position: absolute; z-index: 3; right: 1%; bottom: 2%; width: clamp(175px, 27vw, 245px); display: flex; flex-direction: column; align-items: center; }
.honeycomb { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 3px; filter: drop-shadow(0 5px 3px rgba(121,78,13,.22)); }
.honey-row { display: flex; justify-content: center; margin-top: calc(clamp(43px, 6.5vw, 58px) * -.23); }
.honey-row:first-child { margin-top: 0; }
.honey-cell { display: grid; place-items: center; width: clamp(43px, 6.5vw, 58px); height: clamp(49px, 7.4vw, 66px); margin: 0 -1px; background: #ffe185; clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); box-shadow: inset 0 0 0 5px #d99b20; transition: background .3s; }
.honey-cell.filled { background: #f2a900; color: #704000; font-size: clamp(1.15rem, 2.8vw, 1.65rem); font-weight: 900; filter: drop-shadow(0 2px 1px #ba7813); animation: honeyCellPop .4s ease; }
.honey-drop { position: relative; z-index: 5; width: 17px; height: 23px; border-radius: 60% 40% 60% 40%; background: #efa800; opacity: 0; transform: rotate(45deg); filter: drop-shadow(0 2px 1px #a86a00); }
.honey-drop.dropping { animation: honeyDrip .5s ease-in forwards; }
.honey-jar { position: relative; width: 105px; height: 125px; overflow: visible; border: 7px solid rgba(241,252,255,.86); border-top: 13px solid #d9e6e8; border-radius: 12px 12px 29px 29px; background: linear-gradient(105deg, rgba(255,255,255,.58), rgba(205,242,250,.18) 45%, rgba(255,255,255,.48)); box-shadow: inset 8px 0 8px rgba(255,255,255,.32), 0 6px 0 rgba(81,103,94,.18); transition: background .4s, border-color .4s; }
.honey-jar::before { content: ""; position: absolute; z-index: 4; left: 10px; top: 12px; width: 9px; height: 75px; border-radius: 9px; background: rgba(255,255,255,.58); pointer-events: none; }
.honey-jar.full { background: #eca600; border-color: #ffd75c; box-shadow: 0 0 18px 5px rgba(255,199,35,.55), 0 6px 0 rgba(81,103,94,.18); }
.honey-jar.full::after { content: ""; position: absolute; z-index: 3; left: -9px; right: -9px; top: -18px; height: 28px; border-radius: 50% 50% 38% 42%; background: #ffc52b; box-shadow: -7px 13px 0 -3px #e99b00, 9px 10px 0 -4px #f4ae0b; animation: honeyOverflow .7s ease-out; }
.honey-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden; border-radius: 0 0 21px 21px; background: linear-gradient(#ffc928,#e99a00); transition: height .65s cubic-bezier(.2,.8,.3,1); }
.honey-fill::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; border-radius: 50%; background: #ffd94e; }
.honey-fill.eaten { height: 0 !important; transition-duration: 2.2s; }
.honey-bear { position: absolute; z-index: 8; left: 2%; bottom: 3%; font-size: clamp(7rem, 20vw, 12rem); line-height: 1; filter: drop-shadow(0 6px 3px rgba(83,65,28,.18)); }
.honey-bear b { position: absolute; right: -5%; bottom: 4%; font-size: .42em; }
.honey-bear.eating b { animation: honeyPotMunch .42s ease-in-out infinite alternate; }
.honey-screen > .hunt-complete { z-index: 20; }
@keyframes beeWander {
  0%, 100% { transform: translate(0,0) rotate(-4deg); }
  25% { transform: translate(var(--bee-x, 18px), var(--bee-y, -12px)) rotate(9deg); }
  52% { transform: translate(var(--bee-x2, -12px), calc(var(--bee-y, -12px) * -.45)) rotate(-8deg); }
  76% { transform: translate(calc(var(--bee-x, 18px) * .35), calc(var(--bee-y, -12px) * -1)) rotate(6deg); }
}
@keyframes honeyCellPop { 50% { transform: scale(1.22); } }
@keyframes honeyDrip { 0% { opacity: 1; translate: 0 -7px; } 100% { opacity: 0; translate: 0 35px; } }
@keyframes honeyOverflow { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); } }
@keyframes honeyPotMunch { to { transform: translate(-12px,-22px) rotate(-12deg) scale(1.08); } }
@keyframes rainbowPop { 50% { stroke-width: 30; } }
@keyframes bubbleFall { to { top: calc(100% + 95px); } }
@keyframes bubbleSway { from { margin-left: -12px; } to { margin-left: 12px; } }
@keyframes bubblePop { 45% { transform: scale(1.35); opacity: .8; } 100% { transform: scale(.1); opacity: 0; } }
@keyframes burstRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.7); opacity: 0; } }
@keyframes burstDrop { from { transform: rotate(var(--burst-angle)) translateX(5px) scale(1); opacity: 1; } to { transform: rotate(var(--burst-angle)) translateX(42px) scale(.25); opacity: 0; } }
.confetti span { position: absolute; font-size: 1.6rem; animation: fall 2.6s linear infinite; top: -30px; }
.hidden { display: none !important; }

@keyframes bob { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes appear { from { opacity: 0; transform: scale(.96); } }
@keyframes celebrate { 50% { transform: scale(1.08) rotate(2deg); } }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes fall { to { transform: translateY(105vh) rotate(500deg); } }
@keyframes tinyBob { 50% { translate: 0 -4px; } }
@keyframes foundAnimal { 45% { transform: scale(1.45) rotate(8deg); } 100% { opacity: .48; transform: scale(.9); } }

@media (max-width: 620px) {
  .game { padding: 12px 12px 22px; }
  .topbar { margin-bottom: 10px; }
  .choices { grid-template-columns: 1fr 1fr; }
  .animal-card { min-height: 155px; }
  .animal-card:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .game-menu { grid-template-columns: 1fr; }
  .game-choice { min-height: 140px; }
  .hunt-area { min-height: 480px; height: 68vh; }
  .progress { grid-template-columns: auto 1fr; }
  .stars { grid-column: 1 / -1; text-align: center; height: 19px; }
}

@media (max-height: 670px) and (orientation: landscape) {
  .game { padding-top: 8px; }
  .topbar { margin-bottom: 5px; }
  .question-card { margin: 5px auto 10px; }
  .question-card h2 { padding: 8px 22px; }
  .question-card p, .listen-button { display: none; }
  .animal-card { min-height: 150px; }
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 900px) {
  .game { width: min(1100px, 100%); padding: 8px 16px 12px; }
  .topbar { min-height: 52px; margin-bottom: 7px; }
  .round-button { width: 48px; height: 48px; border-width: 3px; font-size: 1.25rem; }
  .language-button { min-width: 50px; height: 46px; border-width: 3px; }

  .menu-screen { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 72px); margin: 0 auto; padding: 10px 18px 16px; border-width: 5px; border-radius: 30px; }
  .menu-screen .home-mascot { position: absolute; left: 22px; top: 5px; width: 105px; height: 105px; margin: 0; }
  .menu-screen h1 { margin: 2px 0 3px; font-size: clamp(1.8rem, 4vw, 2.7rem); }
  .menu-screen > p { margin: 2px 0 10px; font-size: 1.05rem; }
  .menu-screen .game-menu { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .menu-screen .game-choice { grid-column: auto; min-height: 116px; padding: 8px 10px; border-width: 4px; border-radius: 22px; gap: 2px; font-size: 1.03rem; }
  .menu-screen .game-choice-icon { font-size: 2.6rem; line-height: 1; }
  .menu-screen .game-choice small { font-size: .76rem; }
  .menu-screen .honey-choice { grid-column: 2 / 3; }

  .panel:not(.menu-screen) { margin-top: 0; padding: 18px 28px; }
  .start-screen .mascot { font-size: 5rem; }
  .start-screen h1 { margin-top: 8px; }
  .ranking-box { margin-top: 12px; }
  .hunt-area, .bubble-arena, .honey-garden { height: calc(100vh - 145px); min-height: 0; }
  .hunt-hud, .bubble-hud, .honey-hud { padding-block: 7px; margin-bottom: 7px; }
  .rainbow-card { padding-block: 10px 14px; }
  .rainbow-stage { width: min(520px, 64vw); margin-top: -10px; }
  .color-choice { min-height: 68px; }
  .animal-card { min-height: min(30vh, 190px); }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }