:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --green-dark: #244b2d;
  --green: #5f963e;
  --cream: #fffaf0;
  --coral: #e66d4e;
  --shadow: 0 16px 50px rgba(42, 70, 39, 0.22);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #bedfa2;
  color: var(--green-dark);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(#ccecff, #eaf8d7 60%, #bddd8e);
  box-shadow: 0 0 40px rgba(34, 65, 32, 0.18);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

.hud {
  position: absolute;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.score-card {
  min-width: 100px;
  padding: 9px 14px 10px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 18px;
  background: rgba(255, 250, 240, .9);
  box-shadow: 0 5px 16px rgba(42,70,39,.14);
}

.score-card span { display: block; font-size: 14px; font-weight: 700; }
.score-card strong { display: flex; gap: 4px; align-items: baseline; font-size: 24px; line-height: 1; }
.score-card strong span { font-size: inherit; }

.hud-stats { width: 132px; }
.run-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 7px;
}
.time-chip, .coin-chip {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 15px;
  background: rgba(255,250,240,.92);
  box-shadow: 0 4px 13px rgba(42,70,39,.13);
}
.time-chip {
  min-width: 84px;
  padding: 5px 9px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.time-chip span { font-size: 10px; font-weight: 800; line-height: 1; }
.time-chip strong { margin-top: 3px; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.coin-chip { min-width: 45px; padding: 5px 7px; gap: 5px; justify-content: center; }
.coin-chip strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.coin-chip.coin-credited { animation: coin-credit-pop .38s ease-out; }
.coin-badge {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #b47818;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff29a, #f5bd32 58%, #d89017);
  color: #795016;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8);
}

@keyframes coin-credit-pop {
  0% { transform: scale(1); background: rgba(255,250,240,.92); }
  45% { transform: scale(1.16); background: #fff1a8; }
  100% { transform: scale(1); background: rgba(255,250,240,.92); }
}

.hud-actions { display: flex; gap: 9px; pointer-events: auto; }
.objective-pill {
  position: absolute;
  top: 2px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  max-width: 190px;
  padding: 7px 13px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 18px;
  background: rgba(255,250,240,.92);
  box-shadow: 0 5px 16px rgba(42,70,39,.14);
  font-size: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.objective-pill span { font-size: 23px; line-height: 1; }
.objective-pill strong { overflow: hidden; text-overflow: ellipsis; }
.round-button {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,250,240,.92);
  color: var(--green-dark);
  font-weight: 900;
  font-size: 17px;
  box-shadow: 0 5px 16px rgba(42,70,39,.14);
}

.round-button:active, button:active { transform: scale(.96); }

.overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(53, 89, 42, .3);
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility .22s;
}

.overlay.visible { visibility: visible; opacity: 1; }
.profile-overlay { z-index: 12; background: rgba(36,75,45,.48); }
.privacy-overlay { z-index: 15; background: rgba(36,75,45,.62); align-items: flex-start; overflow-y: auto; }
.privacy-panel { max-width: 560px; margin-block: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-bottom)); text-align: left; }
.privacy-panel h2,.privacy-panel > .eyebrow { text-align: center; }
.privacy-intro { margin: 0 0 17px; font-weight: 700; line-height: 1.5; }
.privacy-section { padding: 11px 14px; border-radius: 13px; background: rgba(226,241,206,.55); }
.privacy-section + .privacy-section { margin-top: 9px; }
.privacy-section h3 { margin: 0 0 4px; font-size: 16px; }
.privacy-section p { margin: 0; color: #4c654d; font-size: 14px; line-height: 1.45; }
.privacy-link { margin-top: 5px; border: 0; background: transparent; color: var(--green-dark); text-decoration: underline; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.privacy-statistics-button { min-height: 48px; margin-top: 14px; font-size: 15px; }
.privacy-status { min-height: 18px; margin: 9px 0; color: #527047; text-align: center; font-size: 13px; font-weight: 800; }
.privacy-panel > .primary-button { min-height: 52px; font-size: 17px; }
.chapter-finale-overlay { z-index: 16; overflow-y: auto; background: linear-gradient(#8ecceaee,#fff3d5f2); }
.chapter-finale-panel { max-width: 560px; margin-block: max(18px,env(safe-area-inset-top)); text-align: center; overflow: hidden; }
.chapter-finale-panel h2 { margin: 4px 0 12px; }
.chapter-finale-panel > button:disabled { opacity:.5; cursor:wait; }
.finale-text { min-height: 54px; color: #456047; font-weight: 650; line-height: 1.5; }
.chapter-path { display: flex; justify-content: space-between; align-items: center; margin: 22px 0; padding: 17px 14px; border-radius: 35px; background: linear-gradient(90deg,#ddebaf,#a7d9e9); font-size: clamp(24px,7vw,36px); }
.chapter-path span { filter: drop-shadow(0 3px 3px #42632d33); animation: finale-pop 2.4s ease-in-out infinite; }
.chapter-path span:nth-child(2n) { animation-delay: .35s; }
.finale-coins { display:flex; align-items:center; justify-content:center; gap:24px; height:67px; margin:-5px 0 8px; perspective:500px; }
.finale-coin { display:block; width:49px; height:49px; animation:finale-coin-float 1.8s ease-in-out infinite; filter:drop-shadow(0 7px 5px #80551435); }
.finale-coin:nth-child(2) { width:59px; height:59px; animation-delay:-.55s; }
.finale-coin:nth-child(3) { animation-delay:-1.05s; }
.finale-coin > i { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; animation:finale-coin-spin 2.15s linear infinite; }
.finale-coin:nth-child(2) > i { animation-delay:-.72s; }
.finale-coin:nth-child(3) > i { animation-delay:-1.43s; }
.finale-coin b { position:absolute; inset:0; display:grid; place-items:center; box-sizing:border-box; border:3px solid #975b12; border-radius:50%; backface-visibility:hidden; background:radial-gradient(circle at 32% 25%,#fff5aa 0 8%,#ffd753 35%,#eda626 70%,#bc7013 100%); color:#805016; box-shadow:inset 0 0 0 3px #ffe891aa,inset -5px -6px 8px #9d591833; font:950 25px/1 system-ui,sans-serif; }
.finale-coin:nth-child(2) b { font-size:30px; }
.finale-coin b:before { content:""; position:absolute; inset:7px; border:1.5px solid #fff1a6d9; border-radius:50%; }
.finale-coin-front:after { content:"+"; position:absolute; top:6px; right:7px; color:#fff1a0; font:950 14px/1 Arial,sans-serif; text-shadow:0 1px #9a5c13; }
.finale-coin-back { transform:rotateY(180deg); color:#fff1a0!important; background:radial-gradient(circle at 32% 25%,#f6c958,#d8891e 45%,#a75a12 100%)!important; text-shadow:0 1px 1px #74400e; }
.balloon-flight-scene { position:relative; height:300px; margin:5px -24px 12px; overflow:hidden; background:linear-gradient(#75b9dc 0%,#c9e2df 57%,#f1bd7d 100%); }
.balloon-flight-scene:after { content:""; position:absolute; z-index:2; inset:auto -10% -55px; height:105px; background:#91af9a; clip-path:polygon(0 100%,8% 45%,17% 76%,28% 20%,38% 70%,49% 30%,61% 78%,75% 12%,88% 67%,100% 30%,100% 100%); opacity:.5; }
.flight-sunset { position:absolute; z-index:1; right:3%; bottom:16px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,#fff8d3aa 0 7%,#f7c98055 18%,#e99c6940 32%,transparent 68%); opacity:.58; }
.flight-rainbow { position:absolute; z-index:1; left:0; right:0; top:0; height:235px; overflow:hidden; opacity:.18; filter:saturate(.7) blur(.2px); }
.flight-rainbow i { position:absolute; left:50%; border-style:solid; border-bottom-color:transparent!important; border-left-color:transparent!important; border-right-color:transparent!important; border-radius:50%; transform:translateX(-50%); }
.flight-rainbow i:nth-child(1){top:42px;width:720px;height:720px;border-width:8px;border-color:#b67e78}.flight-rainbow i:nth-child(2){top:50px;width:704px;height:704px;border-width:8px;border-color:#c79a73}.flight-rainbow i:nth-child(3){top:58px;width:688px;height:688px;border-width:8px;border-color:#c9b77c}.flight-rainbow i:nth-child(4){top:66px;width:672px;height:672px;border-width:8px;border-color:#829d7e}.flight-rainbow i:nth-child(5){top:74px;width:656px;height:656px;border-width:8px;border-color:#7897a6}.flight-rainbow i:nth-child(6){top:82px;width:640px;height:640px;border-width:8px;border-color:#8c839d}
.flight-cloud { position:absolute; z-index:3; left:3%; bottom:43px; width:140px; height:38px; border-radius:50%; background:#fff; box-shadow:32px -17px 0 4px #fff,72px -5px 0 1px #f8fdff,18px 9px 17px #6b9ab544; animation:flight-cloud-fade 8.2s ease both; }
.flight-sauti { position:absolute; z-index:6; left:8%; bottom:61px; width:68px; height:95px; object-fit:contain; filter:drop-shadow(0 5px 4px #395d6644); transform:scaleX(-1); animation:sauti-boards-balloon 8.2s ease-in-out both; }
.vintage-balloon { position:absolute; z-index:5; left:50%; top:4px; width:194px; height:285px; margin-left:-97px; transform-origin:50% 45%; filter:drop-shadow(0 10px 9px #39566745); animation:vintage-balloon-flight 8.2s ease-in-out both; }
.vintage-envelope { position:relative; width:194px; height:205px; overflow:hidden; border:3px solid #634b3d; border-radius:50% 50% 45% 45% / 42% 42% 58% 58%; background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(74,45,35,.22) 25px 27px),conic-gradient(from 254deg at 50% 108%,#594f50 0 9deg,#b05d48 9deg 22deg,#d6a756 22deg 35deg,#577c68 35deg 48deg,#c47a4d 48deg 61deg,#e0bd68 61deg 74deg,#536c69 74deg 87deg,#a65343 87deg 100deg,#d09a51 100deg 113deg,#45595e 113deg 126deg,#b86c4f 126deg 139deg,#d8ad5d 139deg 152deg,#557a69 152deg 165deg,#a65243 165deg 180deg); box-shadow:inset 24px 2px 26px #fff5c12b,inset -26px 4px 30px #342b2a66,inset 0 -20px 25px #3b2d2966; }
.vintage-envelope:before { content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-conic-gradient(from 0deg at 50% 104%,transparent 0 11deg,rgba(255,244,194,.2) 11deg 12deg); mix-blend-mode:screen; }
.vintage-envelope:after { content:""; position:absolute; left:15%; right:15%; top:44%; height:23%; opacity:.28; background:repeating-linear-gradient(135deg,#f3d994 0 13px,#78574b 14px 16px,#b5674e 17px 29px,#78574b 30px 32px); clip-path:polygon(0 0,9% 45%,18% 0,27% 45%,36% 0,45% 45%,54% 0,63% 45%,72% 0,81% 45%,90% 0,100% 45%,100% 100%,0 100%); }
.balloon-neck { position:absolute; left:72px; top:194px; width:50px; height:24px; background:linear-gradient(90deg,#5a4134,#c49a58,#5a4134); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.balloon-rigging { position:absolute; left:47px; top:207px; width:100px; height:44px; }
.balloon-rigging i { position:absolute; top:0; width:1.5px; height:53px; background:#5b493c; transform-origin:top; }.balloon-rigging i:first-child { left:22px; transform:rotate(-8deg); }.balloon-rigging i:nth-child(2) { right:22px; transform:rotate(8deg); }
.balloon-burner { position:absolute; left:39px; top:15px; width:22px; height:16px; border:2px solid #594337; background:linear-gradient(#dda23a,#68452e); }
.vintage-basket { position:absolute; z-index:1; left:65px; top:245px; width:65px; height:43px; border:3px solid #65452d; border-radius:4px 4px 11px 11px; background:repeating-linear-gradient(0deg,transparent 0 6px,#6e4b2f88 7px 8px),repeating-linear-gradient(90deg,#ba8750 0 7px,#8c6039 8px 10px); box-shadow:inset 0 4px 7px #f1c47a66; }
.vintage-basket:before,.vintage-basket:after { content:""; position:absolute; z-index:-1; bottom:39px; width:1.5px; height:48px; background:#5b493c; transform-origin:bottom; }
.vintage-basket:before { left:4px; transform:rotate(10deg); }.vintage-basket:after { right:4px; transform:rotate(-10deg); }
.basket-sauti { position:absolute; left:12px; bottom:21px; width:40px; height:61px; object-fit:contain; opacity:0; transform:scaleX(-1); animation:basket-sauti-appears 8.2s linear both; }
.coin-weight { position:absolute; top:52px; display:grid; place-items:center; width:25px; height:25px; border:2px solid #8b611e; border-radius:50%; background:radial-gradient(circle at 35% 28%,#ffe894,#d59b2c 65%,#9b6318); color:#654315; font-size:13px; font-weight:950; box-shadow:inset 0 0 0 2px #ffe69b88; animation:coin-weight-swing 1.2s ease-in-out infinite alternate; }
.coin-weight:before { content:""; position:absolute; left:10px; bottom:23px; width:1px; height:19px; background:#59473a; }
.weight-left { left:-10px; transform-origin:50% -20px; }.weight-right { right:-10px; transform-origin:50% -20px; animation-delay:.35s; }
.finale-mountains { position:relative; display:grid; place-items:center; height:230px; margin:8px -24px 15px; overflow:hidden; background:linear-gradient(#8fd2ef,#e7f4f1); font-size:160px; }
.finale-mountains span { position:absolute; right:23%; bottom:28px; font-size:48px; }
.feedback-choices { display:grid; gap:10px; margin:20px 0 12px; }
.feedback-choices button { min-height:50px; border:2px solid #a9c79b; border-radius:15px; background:#fff; color:var(--green-dark); font:inherit; font-weight:850; }
.feedback-choices button:disabled { opacity:.62; }
.finale-thanks { min-height:22px; color:#47743e; font-weight:850; }
@keyframes finale-pop { 50% { transform:translateY(-7px) scale(1.08); } }
@keyframes finale-coin-spin { to { transform:rotateY(360deg); } }
@keyframes finale-coin-float { 50% { transform:translateY(-7px); } }
@keyframes vintage-balloon-flight { 0%{transform:translate(350px,18px) scale(.82) rotate(2deg)} 24%{transform:translate(62px,1px) scale(.9) rotate(-1deg)} 55%{transform:translate(62px,1px) scale(.9) rotate(1deg)} 64%{transform:translate(45px,-22px) scale(.88)} 100%{transform:translate(-245px,-210px) scale(.16);opacity:.72} }
@keyframes sauti-boards-balloon { 0%,28%{left:8%;bottom:61px;transform:scaleX(-1) rotate(0);opacity:1} 39%{left:40%;bottom:166px;transform:scaleX(-1) rotate(-12deg);opacity:1} 49%{left:59%;bottom:55px;transform:scaleX(-1) rotate(4deg);opacity:1} 50%,100%{left:59%;bottom:55px;opacity:0} }
@keyframes basket-sauti-appears { 0%,49%{opacity:0} 50%,100%{opacity:1} }
@keyframes flight-cloud-fade { 0%,48%{opacity:1} 65%,100%{opacity:.22} }
@keyframes coin-weight-swing { to{transform:rotate(10deg)} }
@media (prefers-reduced-motion:reduce){.vintage-balloon{animation:none;transform:translateX(35px) scale(.88)}.flight-cloud{animation:none}.flight-sauti{display:none}.basket-sauti{animation:none;opacity:1}.coin-weight,.finale-coin,.finale-coin>i{animation:none}.finale-coin:nth-child(2)>i{transform:rotateY(180deg)}}
.profile-panel .subtitle { margin-bottom: 21px; }
.fall-overlay { z-index: 13; background: rgba(36,75,45,.55); }
.level-intro-overlay { z-index: 13; background: rgba(36,75,45,.52); }
.level-intro-panel { max-width: 390px; }
.level-intro-panel h2 { margin-bottom: 12px; font-size: clamp(30px, 8vw, 38px); }
.level-intro-panel .subtitle { margin-top: 8px; }
.intro-leaf {
  width: 76px;
  height: 76px;
  display: grid;
  margin: -15px auto 7px;
  place-items: center;
  border-radius: 50%;
  background: #edf7df;
  font-size: 46px;
  box-shadow: inset 0 0 0 2px #c5dcae;
}
.intro-leaf.coin-intro {
  color: #805016;
  background: radial-gradient(circle at 35% 30%, #fff6ad 0 12%, #ffd953 38%, #efa925 72%, #bd7414 100%);
  border: 4px solid #9a5c13;
  font-size: 38px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255,247,169,.85), 0 7px 14px rgba(93,65,20,.18);
}
.intro-hazard-preview {
  position: relative;
  width: 190px;
  height: 58px;
  margin: -2px auto 15px;
  border: 2px solid #e2b6bb;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg,#f8f3df,#e6f0d6);
  box-shadow: inset 0 0 18px rgba(105,52,67,.08);
}
.intro-hazard-preview[hidden] { display: none; }
.preview-vine {
  position: absolute;
  left: 24px;
  top: 25px;
  width: 142px;
  height: 13px;
  border-radius: 50%;
  background: #79384b;
  box-shadow: inset 0 3px #a96070;
  transform: rotate(-4deg);
}
.preview-thorn {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 27px solid #d94b54;
  filter: drop-shadow(0 1px #7c2437);
  transform-origin: 50% 100%;
  animation: preview-thorn-move 1.8s ease-in-out infinite alternate;
}
.thorn-a { left: 43px; top: 3px; }.thorn-b { left: 78px; top: 27px; transform: rotate(180deg); animation-delay: -.45s; }
.thorn-c { left: 112px; top: 2px; animation-delay: -.9s; }.thorn-d { left: 139px; top: 26px; transform: rotate(180deg); animation-delay: -1.3s; }
@keyframes preview-thorn-move { from { scale: .45; opacity: .55; } to { scale: 1; opacity: 1; } }
.fall-panel h2 { margin-bottom: 8px; }
.fall-panel .subtitle { margin: 8px auto 13px; }
.fall-balance {
  width: fit-content;
  margin: 0 auto 16px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff3be;
  color: #72571e;
  font-weight: 850;
}
.fall-choice-button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 14px;
  border: 2px solid #b8cfac;
  border-radius: 17px;
  background: white;
  color: var(--green-dark);
  text-align: left;
}
.fall-choice-button strong { font-size: 17px; }
.fall-choice-button span { flex: 0 0 auto; color: #8a641c; font-size: 13px; font-weight: 900; }
.fall-choice-button.rescue-choice { border-color: #e0a453; background: #fff8df; }
.fall-choice-button.free-choice { border-color: #75aa65; background: #eef8e8; }
.fall-choice-button:disabled { opacity: .43; filter: grayscale(.35); }
.fall-choice-button[hidden] { display: none; }
.fall-hint { min-height: 18px; margin: 12px 0 0; color: #8b594c; font-size: 13px; font-weight: 750; }

.welcome-overlay {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.98) 0 24%, rgba(255,250,240,.96) 58%, rgba(226,241,206,.98) 100%);
}

.welcome-panel {
  max-width: 470px;
  padding: 12px 25px 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.welcome-sauti {
  width: min(240px, 64vw);
  height: min(280px, 37vh);
  margin: 0 auto 10px;
}

.welcome-sauti img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scaleX(-1);
}

.welcome-options {
  width: min(370px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 4vw, 22px);
}

.welcome-language-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 17px;
}

.welcome-language-card h2 {
  align-self: end;
  margin: 0;
  color: var(--green-dark);
  font-family: inherit;
  font-size: clamp(23px, 6.4vw, 31px);
  font-weight: 850;
  line-height: 1.08;
}

.welcome-options .language-choice,
.welcome-options .language-choice.active {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: #c9553c;
  background: var(--coral);
  color: white;
  font-size: 18px;
  box-shadow: 0 7px 0 #b94e36, 0 12px 20px rgba(85,55,37,.12);
}

.welcome-options .language-choice span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.panel {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  padding: 27px 24px 22px;
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 30px;
  text-align: center;
  background: rgba(255,250,240,.97);
  box-shadow: var(--shadow);
}

.panel.compact { padding-block: 34px; }
.mini-sauti {
  width: 106px;
  height: 112px;
  margin: -42px auto -4px;
  filter: drop-shadow(0 8px 8px rgba(60,80,30,.18));
}
.mini-sauti img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scaleX(-1);
}
.eyebrow { margin: 9px 0 -3px; color: var(--coral); font-size: 15px; font-weight: 900; letter-spacing: .2em; }
h1, h2 { margin: 0; color: var(--green-dark); line-height: 1.08; }
h1 { font-size: clamp(35px, 10vw, 50px); }
h2 { margin-bottom: 26px; font-size: 38px; }
.subtitle { max-width: 330px; margin: 13px auto 19px; font-size: 18px; line-height: 1.38; }
.level-name {
  width: fit-content;
  margin: -7px auto 17px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #edf7df;
  color: #47713b;
  font-size: 14px;
  font-weight: 850;
}
.level-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: -5px 0 13px;
}
.level-picker .level-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
.level-choice {
  min-width: 0;
  min-height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 2px solid #c3d5b8;
  border-radius: 15px;
  background: white;
  color: var(--green-dark);
  text-align: left;
}
.level-choice > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 50%;
  background: #eaf4e1;
  font-weight: 950;
}
.level-choice strong { overflow: hidden; font-size: 13px; line-height: 1.1; text-overflow: ellipsis; }
.level-choice.selected { border-color: var(--green); background: #eef8e8; box-shadow: inset 0 0 0 1px var(--green); }
.level-choice:disabled { opacity: .55; background: #f2f1ed; }
.level-lock { position: absolute; top: 3px; right: 5px; font-size: 11px; }
.player-name-field {
  margin: 0 0 12px;
  text-align: left;
}
.player-name-field label {
  display: block;
  margin: 0 4px 6px;
  color: #496545;
  font-size: 14px;
  font-weight: 850;
}
.player-name-field input {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 2px solid #b8cfac;
  border-radius: 15px;
  outline: none;
  background: white;
  color: var(--green-dark);
  font-family: inherit;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
  touch-action: manipulation;
}
.player-name-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(95,150,62,.17);
}
.player-name-field input::placeholder { color: #91a28c; font-weight: 600; }
.coin-hint {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 9px 11px;
  border-radius: 15px;
  background: #fff5cf;
  color: #6e5722;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
}
.coin-hint .coin-badge { flex: 0 0 25px; width: 25px; height: 25px; }
.goal-flower { margin-bottom: 10px; font-size: 74px; line-height: 1; filter: drop-shadow(0 7px 5px rgba(70,70,30,.16)); }
.bird-reward-scene {
  position: relative;
  width: 210px;
  height: 112px;
  margin: -19px auto 4px;
}
.bird-reward-scene[hidden], .pond-reward-scene[hidden], .hedge-reward-scene[hidden], .orchard-reward-scene[hidden] { display: none; }
.reward-bath { position: absolute; left: 38px; bottom: 0; width: 134px; height: 75px; }
.reward-water, .reward-rim, .reward-column, .reward-foot { position: absolute; display: block; }
.reward-water {
  z-index: 3; left: 8px; top: 7px; width: 118px; height: 20px;
  border: 3px solid #66716b; border-radius: 50%;
  background: radial-gradient(ellipse at 42% 35%, #d9f5ed 0 18%, #75c3ca 52%, #3f8c99 100%);
  box-shadow: inset 0 -4px 6px rgba(34,91,99,.28);
}
.reward-rim {
  z-index: 2; left: 2px; top: 11px; width: 130px; height: 31px;
  border: 3px solid #626863; border-radius: 8px 8px 55% 55%;
  background: linear-gradient(100deg,#777d76,#d4cdb5 34%,#aaa58f 64%,#68706b);
  box-shadow: 0 5px 7px rgba(47,61,50,.18);
}
.reward-column {
  left: 55px; top: 34px; width: 25px; height: 35px;
  border: 2px solid #696e68; border-radius: 5px 5px 9px 9px;
  background: linear-gradient(90deg,#777d76,#d0cab4 45%,#85877b);
}
.reward-foot {
  left: 40px; bottom: 0; width: 55px; height: 12px;
  border: 2px solid #686d67; border-radius: 50% 50% 7px 7px;
  background: linear-gradient(90deg,#737a73,#c3bda8 48%,#6e746e);
}
.reward-bird { position: absolute; z-index: 5; left: 0; top: 0; width: 58px; height: 43px; opacity: 0; transform-origin: 35px 34px; }
.reward-bird i { position: absolute; display: block; }
.reward-body { left: 20px; top: 14px; width: 35px; height: 25px; border: 2px solid #315a61; border-radius: 58% 48% 55% 50%; background: linear-gradient(145deg,#71c4c0,#3c8d9d 70%); }
.reward-belly { left: 23px; top: 25px; z-index: 1; width: 24px; height: 12px; border-radius: 50%; background: #f2d9a3; transform: rotate(9deg); }
.reward-head { left: 8px; top: 8px; width: 24px; height: 24px; border: 2px solid #315a61; border-radius: 50%; background: #65b7b5; }
.reward-eye { left: 14px; top: 14px; z-index: 2; width: 4px; height: 4px; border-radius: 50%; background: #24372e; box-shadow: 1px -1px 0 1px white; }
.reward-beak { left: 0; top: 20px; width: 13px; height: 7px; background: #e5a63b; clip-path: polygon(100% 0,100% 100%,0 55%); }
.reward-tail { left: 47px; top: 25px; width: 20px; height: 12px; background: #397985; clip-path: polygon(0 8%,100% 0,60% 50%,100% 100%,0 78%); }
.reward-wing { left: 31px; top: 14px; z-index: 3; width: 25px; height: 17px; border: 2px solid #315a61; border-radius: 70% 35% 70% 30%; background: #4aa0a5; transform-origin: 4px 12px; }
.win-panel.celebrating .reward-bird { animation: bird-arrives-and-drinks 5.2s .2s both; }
.win-panel.celebrating .reward-wing { animation: bird-wing 5.2s .2s both; }
.reward-butterfly, .reward-spark { position: absolute; z-index: 7; opacity: 0; }
.reward-butterfly { font-size: 21px; }
.butterfly-one { left: 10px; top: 18px; }
.butterfly-two { right: 1px; top: 27px; font-size: 17px; }
.reward-spark { color: #f4bb38; font-size: 25px; text-shadow: 0 0 7px #fff3a7; }
.spark-one { left: 51px; top: 4px; }.spark-two { right: 31px; top: 3px; }.spark-three { right: 2px; top: 66px; font-size: 17px; }
.win-panel.celebrating .reward-butterfly { animation: reward-pop 1.8s 3.25s ease-out both; }
.win-panel.celebrating .butterfly-two { animation-delay: 3.6s; }
.win-panel.celebrating .reward-spark { animation: sparkle-pop 1.5s 3.05s ease-out both; }
.win-panel.celebrating .spark-two { animation-delay: 3.35s; }.win-panel.celebrating .spark-three { animation-delay: 3.65s; }
@keyframes bird-arrives-and-drinks {
  0% { opacity: 0; transform: translate(225px,-48px) rotate(-12deg) scale(.82); }
  12% { opacity: 1; }
  39% { opacity: 1; transform: translate(111px,30px) rotate(0) scale(1); }
  49% { transform: translate(111px,30px) rotate(0); }
  58% { transform: translate(102px,38px) rotate(18deg); }
  66% { transform: translate(111px,30px) rotate(0); }
  74% { transform: translate(102px,38px) rotate(18deg); }
  83%,100% { opacity: 1; transform: translate(111px,30px) rotate(0); }
}
@keyframes bird-wing {
  0%,8%,16%,24%,32% { transform: rotate(-28deg) scaleY(.75); }
  4%,12%,20%,28%,36% { transform: rotate(26deg) scaleY(1); }
  42%,100% { transform: rotate(3deg); }
}
@keyframes reward-pop {
  0% { opacity: 0; transform: translateY(13px) scale(.3) rotate(-18deg); }
  35% { opacity: 1; transform: translateY(-7px) scale(1.15) rotate(8deg); }
  100% { opacity: .9; transform: translateY(-15px) scale(1) rotate(-5deg); }
}
@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(.1) rotate(0); }
  45% { opacity: 1; transform: scale(1.35) rotate(120deg); }
  100% { opacity: .8; transform: scale(.85) rotate(210deg); }
}
.pond-reward-scene {
  position: relative;
  width: 220px;
  height: 124px;
  margin: -18px auto 4px;
  overflow: visible;
}
.pond-ripple {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 5px;
  width: 145px;
  height: 27px;
  border: 2px solid rgba(72,155,169,.62);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(.35);
}
.ripple-two { width: 184px; height: 38px; border-color: rgba(104,188,190,.45); }
.reward-lily {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1px;
  width: 144px;
  height: 104px;
  opacity: 0;
  transform: translateX(-50%) scale(.35) rotate(-24deg);
  transform-origin: 50% 82%;
}
.reward-lily-pad {
  position: absolute;
  z-index: 1;
  left: 4px;
  bottom: 0;
  width: 136px;
  height: 40px;
  border: 3px solid #296c4b;
  border-radius: 52% 48% 50% 46%;
  background: radial-gradient(circle at 35% 30%,#c8e98c 0 8%,#72ba63 37%,#388855 72%,#226a4b 100%);
  box-shadow: inset 0 3px 0 rgba(225,246,172,.7), 0 5px 8px rgba(31,89,72,.2);
  transform: rotate(-2deg);
}
.reward-lily-pad::after {
  content: '';
  position: absolute;
  left: 63px;
  top: -3px;
  border-top: 19px solid #f8faf0;
  border-right: 13px solid transparent;
  border-left: 2px solid transparent;
}
.lily-petal {
  --petal-angle: 0deg;
  position: absolute;
  z-index: 3;
  left: 57px;
  top: 10px;
  width: 30px;
  height: 48px;
  border: 2px solid #a94d8e;
  border-radius: 75% 75% 58% 58%;
  background: linear-gradient(90deg,#cc6bb0 0,#ffd9eb 48%,#f29dcc 78%,#ad4c91 100%);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.48);
  transform-origin: 50% 92%;
  transform: rotate(var(--petal-angle)) scale(.15);
}
.petal-one { --petal-angle: 0deg; }.petal-two { --petal-angle: 45deg; }
.petal-three { --petal-angle: 90deg; }.petal-four { --petal-angle: 135deg; }
.petal-five { --petal-angle: 180deg; }.petal-six { --petal-angle: 225deg; }
.petal-seven { --petal-angle: 270deg; }.petal-eight { --petal-angle: 315deg; }
.reward-lily-heart {
  position: absolute;
  z-index: 5;
  left: 56px;
  top: 38px;
  width: 32px;
  height: 22px;
  border: 2px solid #9c6721;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,#fff8a8 0 12%,#f4c64e 55%,#b87823 100%);
  transform: scale(0);
}
.reward-dragonfly {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 2px;
  width: 64px;
  height: 48px;
  opacity: 0;
}
.reward-dragonfly i { position: absolute; display: block; }
.dragonfly-body { left: 28px; top: 12px; width: 8px; height: 34px; border-radius: 60%; background: linear-gradient(#56c5c3,#296e91); box-shadow: inset 2px 0 rgba(255,255,255,.2); }
.dragonfly-head { left: 25px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #3b8e9e; box-shadow: -2px -1px 0 #324f55, 2px -1px 0 #324f55; }
.dragonfly-wing { width: 29px; height: 11px; border: 1.5px solid rgba(63,126,151,.65); border-radius: 80% 20% 80% 25%; background: linear-gradient(120deg,rgba(255,255,255,.88),rgba(147,218,225,.33)); }
.wing-left-top { left: 1px; top: 11px; transform-origin: 100% 50%; transform: rotate(18deg); }.wing-right-top { left: 34px; top: 11px; border-radius: 20% 80% 25% 80%; transform-origin: 0 50%; transform: rotate(-18deg); }
.wing-left-bottom { left: 2px; top: 25px; transform-origin: 100% 50%; transform: rotate(-18deg); }.wing-right-bottom { left: 33px; top: 25px; border-radius: 20% 80% 25% 80%; transform-origin: 0 50%; transform: rotate(18deg); }
.pond-spark { position: absolute; z-index: 9; color: #f4c94d; font-size: 22px; opacity: 0; text-shadow: 0 0 7px #fff6a7; }
.pond-spark-one { left: 24px; top: 34px; }.pond-spark-two { right: 27px; top: 16px; font-size: 27px; }.pond-spark-three { right: 7px; top: 69px; font-size: 17px; }
.win-panel.celebrating .reward-lily { animation: lily-celebration 4.8s .1s ease-in-out both; }
.win-panel.celebrating .lily-petal { animation: lily-petal-open 1.5s .45s cubic-bezier(.2,.9,.25,1.25) both; }
.win-panel.celebrating .reward-lily-heart { animation: lily-heart-pop .8s 1.25s ease-out both; }
.win-panel.celebrating .reward-dragonfly { animation: dragonfly-arrives 4.8s .25s ease-in-out both; }
.win-panel.celebrating .dragonfly-wing { animation: dragonfly-flutter .18s .25s ease-in-out 18 alternate; }
.win-panel.celebrating .ripple-one { animation: pond-ripple 2.2s .45s ease-out both; }
.win-panel.celebrating .ripple-two { animation: pond-ripple 2.5s 1.15s ease-out both; }
.win-panel.celebrating .pond-spark { animation: sparkle-pop 1.5s 2.35s ease-out both; }
.win-panel.celebrating .pond-spark-two { animation-delay: 2.65s; }.win-panel.celebrating .pond-spark-three { animation-delay: 2.95s; }
@keyframes lily-celebration {
  0% { opacity: 0; transform: translateX(-50%) scale(.35) rotate(-24deg); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(9deg); }
  48% { transform: translateX(-50%) scale(1) rotate(-6deg); }
  70% { transform: translateX(-50%) scale(1.03) rotate(4deg); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
}
@keyframes lily-petal-open { from { transform: rotate(var(--petal-angle)) scale(.12); } to { transform: rotate(var(--petal-angle)) scale(1); } }
@keyframes lily-heart-pop { 0% { transform: scale(0); } 65% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes dragonfly-arrives {
  0% { opacity: 0; transform: translate(220px,-20px) rotate(-12deg) scale(.75); }
  14% { opacity: 1; }
  42% { transform: translate(105px,13px) rotate(5deg) scale(1); }
  62% { transform: translate(128px,2px) rotate(-4deg) scale(.96); }
  82%,100% { opacity: 1; transform: translate(82px,8px) rotate(2deg) scale(1); }
}
@keyframes dragonfly-flutter { from { opacity: .58; } to { opacity: 1; } }
@keyframes pond-ripple { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 35% { opacity: .7; } 100% { opacity: 0; transform: translateX(-50%) scale(1.25); } }
.hedge-reward-scene {
  position: relative;
  width: 220px;
  height: 122px;
  margin: -18px auto 4px;
  overflow: visible;
}
.reward-rose-arch { position: absolute; inset: 4px 28px 0; opacity: 0; transform: scale(.55); transform-origin: 50% 100%; }
.arch-vine { position: absolute; display: block; border: 9px solid #557d42; box-shadow: inset 2px 0 #91b666, 0 3px 7px rgba(47,82,45,.18); }
.arch-vine-left { left: 8px; bottom: 0; width: 20px; height: 83px; border-width: 0 0 0 9px; border-radius: 50% 0 0; }
.arch-vine-right { right: 8px; bottom: 0; width: 20px; height: 83px; border-width: 0 9px 0 0; border-radius: 0 50% 0 0; }
.arch-vine-top { left: 17px; top: 0; width: 112px; height: 70px; border-width: 9px 9px 0; border-radius: 60px 60px 0 0; }
.arch-rose { position: absolute; z-index: 3; font-size: 28px; line-height: 1; opacity: 0; filter: drop-shadow(0 3px 2px rgba(94,46,57,.2)); }
.rose-one { left: 0; bottom: 20px; }.rose-two { left: 6px; top: 24px; }.rose-three { left: 67px; top: -11px; }
.rose-four { right: 5px; top: 24px; }.rose-five { right: 0; bottom: 20px; }
.arch-butterfly { position: absolute; z-index: 5; left: 9px; top: 5px; font-size: 22px; opacity: 0; }
.arch-spark { position: absolute; z-index: 6; color: #f4c84b; font-size: 25px; opacity: 0; text-shadow: 0 0 8px #fff5a0; }
.arch-spark-one { left: 40px; top: 18px; }.arch-spark-two { right: 35px; top: 4px; font-size: 19px; }
.win-panel.celebrating .reward-rose-arch { animation: rose-arch-grow 4.8s .1s ease-out both; }
.win-panel.celebrating .arch-rose { animation: rose-wake .75s 1.1s cubic-bezier(.2,.9,.25,1.35) both; }
.win-panel.celebrating .rose-two { animation-delay: 1.35s; }.win-panel.celebrating .rose-three { animation-delay: 1.6s; }
.win-panel.celebrating .rose-four { animation-delay: 1.85s; }.win-panel.celebrating .rose-five { animation-delay: 2.1s; }
.win-panel.celebrating .arch-butterfly { animation: arch-butterfly-flight 3.9s .55s ease-in-out both; }
.win-panel.celebrating .arch-spark { animation: sparkle-pop 1.5s 2.35s ease-out both; }
.win-panel.celebrating .arch-spark-two { animation-delay: 2.7s; }
@keyframes rose-arch-grow {
  0% { opacity: 0; transform: translateY(18px) scale(.55); }
  26% { opacity: 1; transform: translateY(-4px) scale(1.06); }
  52%,100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rose-wake { 0% { opacity: 0; transform: scale(.15) rotate(-25deg); } 65% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes arch-butterfly-flight {
  0% { opacity: 0; transform: translate(190px,18px) rotate(-12deg) scale(.7); }
  15% { opacity: 1; } 45% { transform: translate(108px,48px) rotate(8deg) scale(1); }
  72%,100% { opacity: 1; transform: translate(78px,16px) rotate(-5deg) scale(1); }
}
.orchard-reward-scene {
  position: relative;
  width: 224px;
  height: 126px;
  margin: -18px auto 4px;
  overflow: visible;
}
.reward-tree-branch {
  position: absolute;
  left: 9px;
  top: 27px;
  width: 162px;
  height: 17px;
  border: 3px solid #593821;
  border-radius: 50%;
  background: linear-gradient(#b17a42,#70472a 65%,#4f321f);
  box-shadow: 0 4px 5px rgba(70,47,27,.18);
  transform: rotate(5deg);
}
.reward-tree-branch::before,.reward-tree-branch::after {
  content: '';
  position: absolute;
  width: 43px;
  height: 17px;
  border: 2px solid #47743e;
  border-radius: 70% 30% 70% 35%;
  background: linear-gradient(135deg,#a9ce69,#599443);
}
.reward-tree-branch::before { left: 27px; top: -17px; transform: rotate(-23deg); }
.reward-tree-branch::after { right: 25px; top: 10px; transform: rotate(19deg) scaleX(-1); }
.reward-golden-apple {
  position: absolute;
  z-index: 5;
  left: 91px;
  top: 39px;
  width: 47px;
  height: 43px;
  border: 3px solid #96651f;
  border-radius: 48% 52% 52% 48%;
  opacity: 0;
  background: radial-gradient(circle at 31% 25%,#fff6aa 0 8%,#f3cf45 34%,#d49324 75%,#a9651e 100%);
  box-shadow: inset -5px -5px 8px rgba(132,76,20,.2),0 5px 7px rgba(70,50,24,.18);
}
.reward-golden-apple::before { content:''; position:absolute; left:21px; top:-14px; width:5px; height:17px; border-radius:4px; background:#614125; transform:rotate(9deg); }
.reward-golden-apple i { position:absolute; left:25px; top:-13px; width:20px; height:9px; border-radius:70% 30% 70% 30%; background:#65a248; transform:rotate(-19deg); }
.reward-apple-basket { position:absolute; z-index:4; left:67px; bottom:1px; width:96px; height:46px; }
.reward-apple-basket i { position:absolute; display:block; }
.basket-rim { z-index:2; left:2px; top:0; width:92px; height:15px; border:3px solid #805324; border-radius:50%; background:#d6a355; }
.basket-body { left:9px; top:8px; width:78px; height:36px; border:3px solid #805324; border-radius:8px 8px 25px 25px; background:repeating-linear-gradient(90deg,#c68b3f 0 8px,#e2b663 8px 15px); box-shadow:inset 0 -5px 5px rgba(108,67,24,.18); }
.reward-wind-leaf,.orchard-spark { position:absolute; z-index:8; opacity:0; }
.reward-wind-leaf { font-size:22px; }.leaf-one { left:13px; top:10px; }.leaf-two { right:4px; top:32px; font-size:19px; }
.orchard-spark { color:#f4c744; font-size:24px; text-shadow:0 0 7px #fff5a5; }
.orchard-spark-one { left:47px; top:48px; }.orchard-spark-two { right:36px; top:4px; font-size:19px; }
.win-panel.celebrating .reward-tree-branch { animation: orchard-branch-bend 4.8s .1s ease-in-out both; }
.win-panel.celebrating .reward-golden-apple { animation: golden-apple-drop 4.8s .15s cubic-bezier(.25,.75,.35,1) both; }
.win-panel.celebrating .reward-wind-leaf { animation: orchard-leaf-flight 3.4s .25s ease-in-out both; }
.win-panel.celebrating .leaf-two { animation-delay:.55s; }
.win-panel.celebrating .orchard-spark { animation:sparkle-pop 1.5s 2.55s ease-out both; }
.win-panel.celebrating .orchard-spark-two { animation-delay:2.85s; }
@keyframes orchard-branch-bend {
  0%,18% { transform:rotate(5deg); }
  38% { transform:rotate(10deg) translateY(5px); }
  57%,100% { transform:rotate(5deg); }
}
@keyframes golden-apple-drop {
  0%,22% { opacity:1; transform:translateY(-23px) rotate(-7deg) scale(1); }
  45% { opacity:1; transform:translateY(-11px) rotate(7deg) scale(1.04); }
  67%,100% { opacity:1; transform:translateY(52px) rotate(20deg) scale(.9); }
}
@keyframes orchard-leaf-flight {
  0% { opacity:0; transform:translate(-35px,-12px) rotate(-30deg) scale(.7); }
  22% { opacity:1; }
  68%,100% { opacity:.9; transform:translate(145px,42px) rotate(240deg) scale(1); }
}
.win-panel h2 { margin-bottom: 8px; }
.win-panel .eyebrow { margin-bottom: 5px; }
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 17px 0 8px;
}
.result-grid div {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  background: #edf6e4;
}
.result-grid span { color: #55734e; font-size: 13px; font-weight: 800; }
.result-grid strong { margin-top: 4px; color: var(--green-dark); font-size: 22px; font-variant-numeric: tabular-nums; }
.best-time { min-height: 20px; margin: 4px 0 15px; color: var(--coral); font-size: 14px; font-weight: 850; }

.language-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 auto 19px; }
.language-choice {
  min-height: 50px;
  border: 2px solid #b8cfac;
  border-radius: 15px;
  background: white;
  color: var(--green-dark);
  font-weight: 800;
}
.language-choice.active { border-color: var(--green); background: #e7f5db; box-shadow: inset 0 0 0 1px var(--green); }

.primary-button, .secondary-button {
  width: 100%;
  min-height: 58px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 20px;
}
.primary-button { border: 0; background: var(--coral); color: white; box-shadow: 0 7px 0 #b94e36; }
.secondary-button { margin-top: 17px; border: 2px solid #aac69b; background: white; color: var(--green-dark); }
.danger-button {
  width: 100%;
  min-height: 54px;
  margin-top: 17px;
  border: 2px solid #d79a8d;
  border-radius: 17px;
  background: #fff6f2;
  color: #9f3f31;
  font-weight: 850;
  font-size: 18px;
}
.text-button {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: #55734e;
  font-weight: 800;
}
.share-button::before { content: '↗'; margin-right: 8px; }
#nextLevelButton:not([hidden]) + .share-button { margin-top: 12px; }
.primary-button[hidden] { display: none; }
.install-hint { margin: 17px 0 0; color: #60735c; font-size: 14px; }

.touch-guide {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.touch-guide div {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  color: rgba(42, 76, 41, .2);
  font: 700 70px/1 system-ui;
  opacity: 0;
  transition: opacity .1s;
}
.touch-guide div.pressed { opacity: 1; }

.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 23%;
  max-width: calc(100% - 40px);
  padding: 11px 18px;
  border-radius: 18px;
  background: rgba(36,75,45,.9);
  color: white;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: .25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.test-complete-button {
  position: absolute;
  z-index: 50;
  right: 12px;
  bottom: max(14px, env(safe-area-inset-bottom));
  min-height: 36px;
  padding: 7px 12px;
  border: 2px dashed rgba(255,255,255,.9);
  border-radius: 12px;
  background: rgba(36,75,45,.9);
  color: white;
  box-shadow: 0 3px 10px rgba(27,61,37,.25);
  font: 800 13px/1 system-ui, sans-serif;
}
.test-complete-button[hidden] { display: none; }

@media (max-height: 660px) {
  .panel { padding-block: 18px 15px; }
  .mini-sauti { width: 76px; height: 76px; margin-top: -25px; }
  .subtitle { margin-block: 8px 12px; font-size: 16px; }
  .level-name { margin-bottom: 10px; padding-block: 5px; }
  .level-picker { margin-bottom: 8px; }
  .level-choice { min-height: 42px; padding-block: 5px; }
  .language-picker { margin-bottom: 12px; }
  .install-hint { display: none; }
  .player-name-field { margin-bottom: 8px; }
  .player-name-field input { min-height: 44px; }
  .coin-hint { min-height: 40px; margin-bottom: 11px; padding-block: 6px; font-size: 12px; }
  .welcome-panel { padding-block: 4px 12px; }
  .welcome-sauti { height: 180px; width: 190px; margin-bottom: 8px; }
  .welcome-language-card { gap: 12px; }
  .welcome-language-card h2 { font-size: clamp(21px, 5.8vw, 27px); }
  .welcome-options .language-choice { min-height: 56px; }
}

@media (max-width: 470px) {
  .objective-pill { width: 50px; min-width: 50px; justify-content: center; padding-inline: 8px; }
  .objective-pill strong { display: none; }
}

@media (min-width: 621px) {
  body { padding-block: 10px; }
  .game-shell { height: calc(100% - 20px); border-radius: 28px; }
}

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