: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; }
.chapter-medal-button {
  position: relative;
  overflow: visible;
  border-color: #f9e18c;
  background: radial-gradient(circle at 34% 25%,#fff7b1 0 8%,#f7c84c 38%,#d89320 72%,#a95d14 100%);
  color: #744611;
  box-shadow: inset 0 0 0 3px #ffe892aa,0 5px 16px rgba(91,58,18,.24);
  font-family: Georgia,serif;
  font-size: 22px;
  text-shadow: 0 1px #fff2a8;
}
.chapter-medal-button[hidden] { display:none; }
.chapter-medal-button:before { content:"";position:absolute;inset:7px;border:1.5px solid #fff0a0;border-radius:50%; }
.chapter-medal-button:after { content:"★";position:absolute;right:-3px;bottom:-2px;display:grid;width:18px;height:18px;place-items:center;border:2px solid #fff6cd;border-radius:50%;background:#295b36;color:#ffe47d;font:900 10px/1 system-ui,sans-serif; }
.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; }
.start-overlay { align-items:flex-start;overflow-y:auto; }
.start-overlay > .panel { margin-block:max(40px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-bottom)); }
.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); }
.panel.chapter-finale-panel { width:calc(100% - 24px);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; }
.chapter-path .finale-hot-air-balloon-icon { position:relative;display:inline-block;flex:0 0 32px;width:32px;height:43px;filter:drop-shadow(0 3px 3px #334f5838); }
.finale-hot-air-balloon-icon:before { content:"";position:absolute;left:2px;top:0;width:28px;height:31px;box-sizing:border-box;border:1.5px solid #58473d;border-radius:50% 50% 44% 44% / 43% 43% 57% 57%;background:conic-gradient(from 255deg at 50% 108%,#4f6968 0 20deg,#b45e4d 20deg 43deg,#d6a858 43deg 67deg,#557b69 67deg 91deg,#c4774e 91deg 115deg,#e0bd68 115deg 139deg,#506466 139deg 163deg,#aa5747 163deg 180deg);box-shadow:inset 4px 1px 5px #fff7cc40,inset -4px 2px 6px #33292955; }
.finale-hot-air-balloon-icon:after { content:"";position:absolute;left:10px;top:32px;width:12px;height:8px;box-sizing:border-box;border:1.5px solid #65452d;border-radius:1px 1px 3px 3px;background:repeating-linear-gradient(90deg,#bd8950 0 3px,#805635 4px 5px);box-shadow:-4px -5px 0 -3px #58473d,4px -5px 0 -3px #58473d; }
.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; }
.finale-proof-card { margin:3px 0 15px;padding:11px;border:1px solid #dfc77e;border-radius:18px;background:linear-gradient(135deg,#fff9df,#f5e8ba);box-shadow:inset 0 1px #fff,0 5px 14px #76551b14; }
.finale-proof-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.finale-proof-stats span { display:grid;gap:2px;min-height:67px;place-content:center;padding:7px;border-radius:13px;background:#fffdf5;color:#6a582d; }
.finale-proof-stats strong { color:#285a35;font-size:24px;line-height:1;font-variant-numeric:tabular-nums; }
.finale-proof-stats small { font-size:11px;font-weight:850;line-height:1.2; }
.finale-proof-text { margin:10px 3px 1px;color:#5d512d;font-size:14px;font-weight:780;line-height:1.42; }
.finale-proof-honor { margin:9px 0 0;padding:9px 11px;border-radius:12px;background:#e4f1cf;color:#315c38;font-size:13px;font-weight:850;line-height:1.35; }
.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[hidden],.balloon-flight-scene[hidden],.propeller-flight-scene[hidden],.finale-city-preview[hidden] { display:none!important; }
.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)} }
.chapter-two-finale-panel { background:linear-gradient(180deg,#fffdf6,#f4f8f2); }
.chapter-two-finale-panel h2 { font-size:clamp(28px,7.7vw,38px);overflow-wrap:anywhere; }
.chapter-two-finale-panel .eyebrow { font-size:clamp(12px,3.5vw,15px); }
.chapter-two-finale-panel .chapter-path { background:linear-gradient(90deg,#b8d8e6,#edf1e8 48%,#f0d49e); }
.propeller-flight-scene { position:relative;height:300px;margin:5px -24px 12px;overflow:hidden;background:linear-gradient(#557d9b 0%,#9fc2cf 52%,#f4c58d 100%); }
.plane-sunrise { position:absolute;right:8%;top:21%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#fff9d2 0 8%,#ffd88b66 22%,#f5ae6b38 42%,transparent 70%); }
.plane-cloud { position:absolute;width:112px;height:23px;border-radius:50%;background:#f8ffffaa;box-shadow:25px -12px 0 2px #f8ffffaa,57px -3px 0 #f8ffff99;filter:blur(.2px); }
.plane-cloud-one { left:-12%;top:24%;animation:plane-cloud-drift 8.2s linear both; }
.plane-cloud-two { right:-8%;top:48%;transform:scale(.72);animation:plane-cloud-drift 8.2s linear -3.8s both; }
.alpine-runway { position:absolute;left:-8%;right:-8%;bottom:-34px;height:124px;background:linear-gradient(#f8fbf5,#b9ced0);clip-path:polygon(0 51%,9% 42%,17% 52%,27% 28%,36% 46%,46% 20%,58% 48%,69% 24%,79% 45%,91% 31%,100% 52%,100% 100%,0 100%);filter:drop-shadow(0 -4px 2px #425e6b44); }
.alpine-runway:after { content:"";position:absolute;left:22%;right:9%;bottom:27px;height:12px;border-top:3px dashed #829da3aa;border-radius:50%;transform:rotate(-2deg); }
.vintage-propeller-plane { position:absolute;z-index:5;left:50%;top:104px;width:208px;height:105px;margin-left:-104px;filter:drop-shadow(0 10px 8px #304b5d55);transform-origin:50% 55%;animation:propeller-plane-arrives 8.2s ease-in-out both; }
.plane-body { position:absolute;left:33px;top:35px;width:136px;height:39px;border:3px solid #493f39;border-radius:55% 48% 42% 50%;background:linear-gradient(#dfb66f 0 28%,#b9674e 30% 66%,#694c48 68%);box-shadow:inset 0 5px #fff3c535; }
.plane-body:after { content:"";position:absolute;right:-21px;top:8px;width:35px;height:17px;border:3px solid #493f39;border-left:0;border-radius:0 72% 72% 0;background:linear-gradient(#d9b36d,#9f6551); }
.plane-wing { position:absolute;z-index:4;left:46px;width:118px;height:17px;border:3px solid #493f39;border-radius:55%;background:linear-gradient(90deg,#536d6f,#d9ae68 43%,#b05f4b 72%,#52666a); }
.plane-wing-top { top:22px;transform:skewX(-12deg); }.plane-wing-bottom { z-index:6;top:63px;transform:skewX(10deg); }
.plane-wing-top:before,.plane-wing-top:after { content:"";position:absolute;top:14px;width:2px;height:30px;background:#574840; }.plane-wing-top:before{left:20px;transform:rotate(-9deg)}.plane-wing-top:after{right:20px;transform:rotate(9deg)}
.plane-tail { position:absolute;z-index:3;left:20px;top:13px;width:47px;height:40px;border:3px solid #493f39;border-radius:70% 15% 12% 35%;background:linear-gradient(135deg,#536b6d,#bd684f);transform:rotate(-15deg); }
.plane-cockpit { position:absolute;z-index:7;left:105px;top:26px;width:30px;height:24px;border:3px solid #493f39;border-radius:70% 70% 18% 18%;background:linear-gradient(135deg,#d8f1ed,#60869a); }
.plane-engine-cowl { position:absolute;z-index:8;right:4px;top:41px;width:21px;height:26px;box-sizing:border-box;border:3px solid #493f39;border-radius:42% 74% 74% 42%;background:linear-gradient(90deg,#b96d51,#d6ad68);box-shadow:inset 0 4px #f4d59655; }
.plane-propeller { position:absolute;z-index:9;right:-25px;top:19px;width:67px;height:67px;transform-origin:50% 50%;animation:plane-propeller-spin .22s linear infinite; }
.plane-propeller:before,.plane-propeller:after { content:"";position:absolute;left:29px;top:1px;width:9px;height:65px;border:2px solid #493f39;border-radius:80% 25% 80% 25%;box-sizing:border-box;background:linear-gradient(#4c423d 0 15%,#d8b06a 17% 46%,#a5654e 48% 79%,#4c423d 82%); }
.plane-propeller:after { transform:rotate(90deg); }
.plane-propeller b { position:absolute;z-index:2;left:25px;top:25px;width:17px;height:17px;box-sizing:border-box;border:3px solid #493f39;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4d38c,#9e5f4c 68%); }
.plane-ski { position:absolute;z-index:8;top:84px;width:64px;height:8px;border-bottom:4px solid #493f39;border-radius:0 0 60% 60%; }.plane-ski-left{left:42px}.plane-ski-right{left:105px}
.plane-sauti { position:absolute;z-index:6;left:9%;bottom:50px;width:67px;height:97px;object-fit:contain;filter:drop-shadow(0 5px 4px #314c5b55);animation:sauti-boards-plane 8.2s ease-in-out both; }
.finale-city-preview { position:relative;height:240px;margin:8px -24px 15px;overflow:hidden;background:linear-gradient(#547c9d,#a6c2cb 58%,#e9bd86); }
.city-sun { position:absolute;right:13%;top:12%;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#fff5c7,#f4b66b55 35%,transparent 70%); }
.city-skyline { position:absolute;left:-3%;right:-3%;bottom:0;background:repeating-linear-gradient(90deg,#45606b 0 32px,#536f78 32px 57px,#314e5b 57px 88px);clip-path:polygon(0 100%,0 56%,7% 56%,7% 28%,13% 28%,13% 68%,20% 68%,20% 39%,27% 39%,27% 16%,34% 16%,34% 63%,42% 63%,42% 35%,50% 35%,50% 72%,57% 72%,57% 25%,65% 25%,65% 51%,73% 51%,73% 10%,81% 10%,81% 66%,89% 66%,89% 32%,96% 32%,96% 58%,100% 58%,100% 100%); }
.city-back { height:156px;opacity:.42;transform:scale(1.08);transform-origin:bottom; }.city-front { height:124px;background:repeating-linear-gradient(90deg,#243f4d 0 36px,#36545d 36px 66px,#293d49 66px 101px); }
.city-front:after { content:"";position:absolute;inset:21px 0 0;background:repeating-linear-gradient(90deg,transparent 0 12px,#f7d78177 13px 17px,transparent 18px 31px),repeating-linear-gradient(0deg,transparent 0 18px,#f7d78155 19px 23px,transparent 24px 37px); }
.preview-plane { position:absolute;z-index:5;left:22%;top:57px;width:112px;height:23px;border-radius:58% 72% 48% 50%;background:linear-gradient(#2d4653,#1f3541);filter:drop-shadow(0 5px 4px #20333e42);transform:rotate(6deg);animation:preview-plane-trouble 3.8s ease-in-out infinite alternate; }
.preview-plane:after { content:"";position:absolute;right:-17px;top:5px;width:23px;height:13px;border-radius:0 85% 85% 0;background:#243b47; }
.preview-plane-wing { position:absolute;z-index:2;left:29px;top:-17px;width:68px;height:14px;border-radius:70% 36% 65% 35%;background:#263f4b;transform:skewX(-13deg);box-shadow:0 38px 0 -1px #1d3440; }
.preview-plane-wing:before,.preview-plane-wing:after { content:"";position:absolute;top:12px;width:2px;height:28px;background:#1b303a; }.preview-plane-wing:before{left:14px;transform:rotate(-8deg)}.preview-plane-wing:after{right:14px;transform:rotate(8deg)}
.preview-plane-tail { position:absolute;left:-9px;top:-18px;width:31px;height:25px;background:#203844;clip-path:polygon(0 100%,36% 0,100% 72%,100% 100%); }
.preview-plane-propeller { position:absolute;z-index:3;right:-35px;top:-10px;width:48px;height:48px;animation:preview-propeller-falter .7s steps(5,end) infinite; }
.preview-plane-propeller:before,.preview-plane-propeller:after { content:"";position:absolute;left:21px;top:1px;width:6px;height:46px;border-radius:90% 30%;background:#1b303a; }.preview-plane-propeller:after{transform:rotate(90deg)}
.plane-smoke { position:absolute;z-index:4;left:15%;top:47px;display:flex;gap:8px;transform:rotate(-10deg); }.plane-smoke i{width:15px;height:15px;border-radius:50%;background:#3d515b52;animation:plane-smoke-puff 1.7s ease-out infinite}.plane-smoke i:nth-child(2){animation-delay:.45s}.plane-smoke i:nth-child(3){animation-delay:.9s}
@keyframes propeller-plane-arrives { 0%{transform:translate(360px,-45px) scale(.58) rotate(-5deg)} 30%{transform:translate(42px,8px) scale(.88) rotate(2deg)} 50%,66%{transform:translate(18px,35px) scale(.93) rotate(0)} 76%{transform:translate(0,4px) scale(.9) rotate(-3deg)} 100%{transform:translate(-330px,-155px) scale(.45) rotate(-8deg);opacity:.85} }
@keyframes plane-propeller-spin { to{transform:rotate(360deg)} }
@keyframes preview-propeller-falter { 0%,35%{transform:rotate(0)}55%{transform:rotate(118deg)}75%,100%{transform:rotate(205deg)} }
@keyframes sauti-boards-plane { 0%,33%{left:9%;bottom:50px;opacity:1;transform:scaleX(-1)} 48%{left:43%;bottom:116px;opacity:1;transform:scaleX(-1) rotate(-8deg)} 57%{left:56%;bottom:104px;opacity:.9;transform:scale(.62) scaleX(-1)} 58%,100%{left:56%;bottom:104px;opacity:0;transform:scale(.62) scaleX(-1)} }
@keyframes plane-cloud-drift { from{transform:translateX(-70px)}to{transform:translateX(520px)} }
@keyframes preview-plane-trouble { to{transform:translate(52px,19px) rotate(11deg)} }
@keyframes plane-smoke-puff { from{transform:scale(.35);opacity:.7}to{transform:translate(-28px,-12px) scale(1.35);opacity:0} }
@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)}.vintage-propeller-plane{animation:none;transform:translate(12px,24px) scale(.9)}.plane-sauti{display:none}.plane-cloud,.preview-plane,.plane-smoke i{animation:none}}
.profile-panel .subtitle,.level-intro-panel .subtitle { max-width:350px;padding:13px 15px;border-radius:15px;background:#f2f7e8;color:#3e5c42;font-size:18px;font-weight:620;line-height:1.5; }
.profile-panel .subtitle { margin-bottom:18px; }
.profile-panel .primary-button { min-height:54px;font-size:18px; }
.profile-panel .danger-button { min-height:49px;margin-top:13px;font-size:15px;box-shadow:none; }
.profile-panel .text-button { margin-top:10px; }
.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.proof-work-choice { border-color:#6aa56a;background:linear-gradient(135deg,#edf8df,#dff2d7);box-shadow:inset 0 0 0 2px #fff8; }
.fall-choice-button.proof-work-choice strong { color:#285b37; }
.fall-choice-button.proof-work-choice span { max-width:118px;color:#4f7748;text-align:right;line-height:1.25; }
.fall-choice-button.proof-work-choice.recommended { position:relative;margin-top:20px;border-color:#e66f2f;background:linear-gradient(135deg,#fff4c8,#ffd08c);box-shadow:inset 0 0 0 2px #fff9,0 0 0 3px #ffb34e55,0 7px 17px #bd542d3d;animation:proofWorkRecommendedPulse 1.65s ease-in-out infinite; }
.fall-choice-button.proof-work-choice.recommended::before { content:attr(data-recommendation);position:absolute;right:12px;top:-12px;padding:4px 9px;border-radius:999px;background:#df6030;color:#fff;font-size:10px;font-weight:950;letter-spacing:.08em;box-shadow:0 3px 7px #8d371f45; }
.fall-choice-button.proof-work-choice.recommended strong { color:#77341e; }
.fall-choice-button.proof-work-choice.recommended span { color:#88451f; }
@keyframes proofWorkRecommendedPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.015);box-shadow:inset 0 0 0 2px #fff9,0 0 0 5px #ffb34e66,0 9px 20px #bd542d4d} }
.fall-choice-button.joker-choice { border-color:#e2bd3c;background:linear-gradient(135deg,#fff9ce,#e9f5dd);box-shadow:inset 0 0 0 2px #fff8; }
.fall-choice-button.joker-choice strong { color:#715313; }
.fall-choice-button.joker-choice span { color:#487040; }
.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; }
@media (prefers-reduced-motion:reduce) { .fall-choice-button.proof-work-choice.recommended { animation:none; } }
.fall-hint { min-height: 18px; margin: 12px 0 0; color: #8b594c; font-size: 13px; font-weight: 750; }
.proof-work-overlay { z-index:14;overflow-y:auto;background:linear-gradient(#73a98ed9,#dff2cce8); }
.proof-work-panel { max-width:430px;margin-block:max(14px,env(safe-area-inset-top));padding-top:22px;background:linear-gradient(180deg,#fffdf4,#f5f7df);overflow:hidden; }
.proof-work-panel h2 { margin:3px auto 8px;font-size:clamp(27px,7vw,36px);line-height:1.08; }
.proof-work-message { max-width:340px;margin:0 auto 12px;color:#456047;font-size:14px;font-weight:720;line-height:1.4; }
.proof-work-stats { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 9px; }
.proof-work-stats span { display:grid;gap:2px;min-height:58px;place-content:center;border-radius:14px;background:#e8f3dc;color:#315d39; }
.proof-work-stats small { font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.07em; }
.proof-work-stats strong { font-size:24px;line-height:1;font-variant-numeric:tabular-nums; }
.proof-work-stats strong b { font:inherit; }
.proof-work-progress { height:8px;margin:0 2px 12px;overflow:hidden;border-radius:999px;background:#d6e2c7; }
.proof-work-progress i { display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#77b660,#e8c94c);transform-origin:left;transition:transform .1s linear; }
.proof-work-start-button { margin:2px 0 13px!important; }
.proof-work-garden { position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 -5px;padding:17px 12px 12px;border-radius:22px;background:linear-gradient(#bde2e2 0 40%,#9bc96d 41% 56%,#72994c 57%);box-shadow:inset 0 2px #ffffff88; }
.proof-work-garden.waiting { opacity:.58;filter:saturate(.72); }
.proof-work-garden:before { content:"";position:absolute;left:-4%;right:-4%;top:42%;height:28px;background:#7fb15c;clip-path:polygon(0 70%,6% 26%,13% 71%,21% 15%,30% 67%,39% 22%,48% 72%,57% 17%,66% 64%,76% 20%,86% 72%,94% 30%,100% 68%,100% 100%,0 100%); }
.proof-work-garden button { position:relative;min-height:74px;border:2px solid #dceacb;border-radius:17px;background:#fffaf0dd;box-shadow:0 4px 0 #54783f38;transition:transform .15s,background .15s; }
.proof-work-garden button i { position:absolute;left:50%;bottom:10px;width:5px;height:35px;border-radius:5px;background:#4d8a45;transform:translateX(-50%); }
.proof-work-garden button i:before { content:"";position:absolute;left:-14px;top:-15px;width:33px;height:33px;border-radius:50%;background:radial-gradient(circle,#f3b835 0 18%,transparent 20%),radial-gradient(circle at 50% 3px,#f07f9c 0 8px,transparent 9px),radial-gradient(circle at 30px 50%,#f07f9c 0 8px,transparent 9px),radial-gradient(circle at 50% 30px,#f07f9c 0 8px,transparent 9px),radial-gradient(circle at 3px 50%,#f07f9c 0 8px,transparent 9px);filter:drop-shadow(0 2px 1px #6d704744); }
.proof-work-garden button:nth-child(2n) i:before { filter:hue-rotate(62deg) drop-shadow(0 2px 1px #6d704744); }
.proof-work-garden button:nth-child(3n) i:before { filter:hue-rotate(162deg) drop-shadow(0 2px 1px #6d704744); }
.proof-work-garden button.thirsty { border-color:#3b8862;background:#f7ffe9;transform:translateY(-4px) scale(1.03);box-shadow:0 7px 0 #3f6e3938,0 0 0 3px #d7efb8; }
.proof-work-garden button.thirsty:after { content:"💧";position:absolute;right:6px;top:3px;font-size:23px;filter:drop-shadow(0 2px 1px #34687c55);animation:proof-drop-bounce .65s ease-in-out infinite alternate; }
.proof-work-garden button.watered { background:#dff4c7;transform:scale(.93); }
.proof-work-garden button.watered:after { content:"✓";position:absolute;right:7px;top:3px;color:#2b7540;font-size:23px;font-weight:950; }
.proof-work-garden button.missed { animation:proof-flower-miss .28s ease; }
.proof-work-garden.mode-3 { background:linear-gradient(#bce5ec 0 35%,#67b6c2 36% 55%,#307d88 56%); }
.proof-work-garden.mode-3:before { top:auto;bottom:0;height:24px;background:#316f62;clip-path:polygon(0 100%,0 80%,7% 20%,10% 82%,18% 36%,22% 85%,31% 9%,35% 84%,46% 30%,50% 86%,61% 14%,65% 84%,77% 35%,82% 87%,93% 18%,96% 83%,100% 50%,100% 100%); }
.proof-work-garden.mode-3 button { border-color:#9bcfd0;background:#eaf8f2d9; }
.proof-work-garden.mode-3 button i { left:50%;bottom:16px;width:52px;height:18px;border-radius:50%;background:#5da85d;transform:translateX(-50%) rotate(-3deg);box-shadow:inset -8px -4px #397c4c55; }
.proof-work-garden.mode-3 button i:before { left:16px;top:-9px;width:21px;height:17px;background:radial-gradient(circle,#f0bc48 0 18%,transparent 21%),radial-gradient(ellipse at 50% 15%,#f8d9e5 0 6px,transparent 7px),radial-gradient(ellipse at 85% 58%,#f4a9c2 0 6px,transparent 7px),radial-gradient(ellipse at 15% 58%,#f4a9c2 0 6px,transparent 7px);filter:drop-shadow(0 2px 1px #315b5855); }
.proof-work-garden.mode-3 button.thirsty:after { content:"💧";right:calc(50% - 12px);top:2px;animation:proof-drop-fall .85s linear infinite; }
.proof-work-garden.mode-4 { background:linear-gradient(#cbe2bc 0 24%,#548248 25% 54%,#335f3d 55%); }
.proof-work-garden.mode-4:before { inset:15% -2% 0;height:auto;background:repeating-linear-gradient(135deg,transparent 0 13px,#496f43 14px 21px,transparent 22px 34px);clip-path:none;opacity:.55; }
.proof-work-garden.mode-4 button { border-color:#8fae7f;background:#f1f4dfdc; }
.proof-work-garden.mode-4 button i { left:50%;bottom:27px;width:55px;height:11px;border-radius:50%;background:#52763e;transform:translateX(-50%) rotate(-8deg);box-shadow:inset 0 3px #769b58; }
.proof-work-garden.mode-4 button i:before { left:21px;top:-17px;width:15px;height:19px;border-radius:0;background:#8ead63;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 1px #314e31); }
.proof-work-garden.mode-4 button.thirsty i:before { background:#d94b54;filter:drop-shadow(0 0 4px #ff9a91);transform:scale(1.25); }
.proof-work-garden.mode-4 button.thirsty:after { content:"✂";font-size:22px; }
.proof-work-garden.mode-5 { background:linear-gradient(#b9dcdf 0 28%,#6d9b4f 29% 52%,#5d7d3f 53%); }
.proof-work-garden.mode-5:before { inset:41% -4% auto;height:15px;background:#70482e;border-radius:50%;clip-path:none;transform:rotate(-2deg); }
.proof-work-garden.mode-5 button { border-color:#b9ca92;background:#fff8e4dc; }
.proof-work-garden.mode-5 button i { left:50%;bottom:19px;width:34px;height:34px;border-radius:48% 52% 55% 45%;background:radial-gradient(circle at 36% 28%,#b7df72 0 10%,#75aa47 42%,#4b7e37 100%);transform:translateX(-50%);box-shadow:inset -5px -4px #345f2c55,0 3px 2px #4b542c55; }
.proof-work-garden.mode-5 button i:before { left:17px;top:-10px;width:4px;height:12px;border-radius:4px;background:#66432d;filter:none;transform:rotate(13deg); }
.proof-work-garden.mode-5 button i:after { content:"";position:absolute;left:20px;top:-7px;width:14px;height:7px;border-radius:80% 20%;background:#528640;transform:rotate(-24deg); }
.proof-work-garden.mode-5 button.thirsty i { background:radial-gradient(circle at 36% 28%,#ffb082 0 9%,#e65745 43%,#a82f35 100%);box-shadow:inset -5px -4px #7f293455,0 0 8px #ffb35c; }
.proof-work-garden.mode-5 button.thirsty:after { content:"✓";color:#fff;background:#3d713a;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:17px; }
.proof-work-garden.mode-6 { background:linear-gradient(#73b9d8,#bddfe8 68%,#f7d59e); }
.proof-work-garden.mode-6:before { inset:auto -4% 0;height:25px;background:#8ba1a7;clip-path:polygon(0 100%,0 72%,10% 20%,20% 77%,32% 11%,43% 73%,55% 30%,67% 78%,80% 17%,91% 72%,100% 37%,100% 100%);opacity:.42; }
.proof-work-garden.mode-6 button { border-color:#b4d5db;background:#f5fcffcf; }
.proof-work-garden.mode-6 button i { left:50%;bottom:25px;width:48px;height:18px;border-radius:50%;background:#f8fdff;transform:translateX(-50%);box-shadow:-15px 4px 0 -2px #eef8fb,14px 5px 0 -1px #e4f1f5,0 5px 5px #47778b44; }
.proof-work-garden.mode-6 button i:before { left:5px;top:-10px;width:25px;height:20px;border-radius:50%;background:#f8fdff;filter:none;box-shadow:13px 4px #edf7fa; }
.proof-work-garden.mode-6 button i:after { content:"";position:absolute;left:3px;right:3px;bottom:-10px;height:8px;border-radius:50%;opacity:0;background:linear-gradient(90deg,#d75b65 0 17%,#e7a14a 17% 34%,#e7d75c 34% 51%,#67a86a 51% 68%,#5d91b8 68% 84%,#8a6fa9 84%); }
.proof-work-garden.mode-6 button.thirsty i:after { opacity:1;box-shadow:0 0 8px #fff5a2; }
.proof-work-garden.mode-6 button.thirsty:after { content:"🌈";font-size:21px; }
.proof-work-garden.mode-7 { background:linear-gradient(#8cc8dd 0 62%,#dfe7c9 63%); }
.proof-work-garden.mode-7:before { inset:auto -4% 0;height:30px;background:#81917b;clip-path:polygon(0 100%,0 72%,8% 28%,16% 75%,25% 12%,36% 77%,47% 24%,58% 80%,69% 5%,81% 76%,91% 25%,100% 72%,100% 100%);opacity:.48; }
.proof-work-garden.mode-7 button { border-color:#b5d2cb;background:#f8f3dfde; }
.proof-work-garden.mode-7 button i { left:50%;bottom:15px;width:30px;height:32px;border-radius:7px 7px 12px 12px;background:linear-gradient(90deg,#9b6037,#d09657,#89502f);transform:translateX(-50%);box-shadow:inset 0 -5px #633d2d55; }
.proof-work-garden.mode-7 button i:before { left:7px;top:-28px;width:16px;height:30px;border-radius:50% 50% 35% 35%;background:linear-gradient(#ffe97c,#f69b35 48%,#dc4c2e);filter:drop-shadow(0 0 5px #ffc44a);transform:scale(.45);transform-origin:bottom; }
.proof-work-garden.mode-7 button.thirsty i:before { animation:proof-flame .36s ease-in-out infinite alternate;transform:scale(1); }
.proof-work-garden.mode-7 button.thirsty:after { content:"🔥";font-size:20px; }
.proof-work-garden.mode-8 { background:linear-gradient(#c7e6e8 0 22%,#578b78 23% 51%,#315c5d 52%); }
.proof-work-garden.mode-8:before { inset:18% 2% 0;height:auto;background:repeating-linear-gradient(90deg,transparent 0 15px,#8fd1dc 16px 23px,transparent 24px 39px);clip-path:none;opacity:.48; }
.proof-work-garden.mode-8 button { border-color:#91c7ca;background:#edf8f2df; }
.proof-work-garden.mode-8 button i { left:50%;bottom:16px;width:54px;height:24px;border:5px solid #7d7862;border-top:0;border-radius:0 0 17px 17px;background:linear-gradient(90deg,#66b9d1 0 35%,#d7e9df 36%);transform:translateX(-50%);box-shadow:inset 0 -5px #386f8055; }
.proof-work-garden.mode-8 button i:before { display:none; }
.proof-work-garden.mode-8 button.thirsty i { background:#4baed0;box-shadow:inset 0 -6px #247d9b88,0 0 8px #86e9ff; }
.proof-work-garden.mode-8 button.thirsty:after { content:"↘";color:#fff;font-size:24px;font-weight:950;text-shadow:0 1px 2px #286a7f; }
.proof-work-garden.mode-9 { background:radial-gradient(circle at 50% 18%,#43506c,#171d2f 65%,#101522); }
.proof-work-garden.mode-9:before { inset:auto -3% 0;height:27px;background:#293046;clip-path:polygon(0 100%,0 57%,8% 18%,16% 68%,24% 12%,33% 72%,43% 25%,53% 75%,64% 8%,75% 69%,86% 20%,94% 67%,100% 33%,100% 100%); }
.proof-work-garden.mode-9 button { border-color:#4c5873;background:#222b42dd; }
.proof-work-garden.mode-9 button i { left:50%;bottom:17px;width:30px;height:48px;background:linear-gradient(135deg,#69cfe1,#5c77dd 48%,#7855b2);clip-path:polygon(50% 0,100% 35%,82% 100%,20% 100%,0 35%);transform:translateX(-50%);filter:brightness(.55);box-shadow:none; }
.proof-work-garden.mode-9 button i:before { display:none; }
.proof-work-garden.mode-9 button.thirsty i { filter:brightness(1.3);box-shadow:0 0 15px #85eeff; }
.proof-work-garden.mode-9 button.thirsty:after { content:"✦";color:#e8ffff;font-size:23px;text-shadow:0 0 8px #64e7ff; }
.proof-work-garden.mode-10 { background:linear-gradient(#b9d9e4,#edf5f2 50%,#aabdc5); }
.proof-work-garden.mode-10:before { inset:auto -2% 0;height:28px;background:#718895;clip-path:polygon(0 100%,0 69%,11% 30%,21% 73%,33% 9%,45% 72%,58% 25%,70% 76%,82% 12%,92% 70%,100% 34%,100% 100%);opacity:.55; }
.proof-work-garden.mode-10 button { border-color:#b8d0d5;background:#f8fcfbe8; }
.proof-work-garden.mode-10 button i { left:50%;bottom:16px;width:53px;height:32px;border-radius:52% 42% 48% 39%;background:linear-gradient(145deg,#e9fbff,#9dd4e6);transform:translateX(-50%) rotate(-5deg);box-shadow:inset -7px -6px #6599ac55,0 3px 3px #4e647444; }
.proof-work-garden.mode-10 button i:before { display:none; }
.proof-work-garden.mode-10 button.thirsty i:after { content:"";position:absolute;inset:5px 8px;background:#4e7186;clip-path:polygon(48% 0,56% 42%,100% 28%,59% 55%,83% 100%,49% 64%,20% 100%,39% 55%,0 39%,43% 43%); }
.proof-work-garden.mode-10 button.thirsty:after { content:"✚";color:#d56847;font-size:21px;font-weight:950; }
.proof-work-garden.mode-11 { background:linear-gradient(#b9d6da 0 22%,#706c64 23% 100%); }
.proof-work-garden.mode-11:before { inset:16% -2% 0;height:auto;background:repeating-linear-gradient(155deg,transparent 0 23px,#4d4d49 24px 30px,transparent 31px 46px);clip-path:none;opacity:.58; }
.proof-work-garden.mode-11 button { border-color:#9d9a8d;background:#ece8dcdf; }
.proof-work-garden.mode-11 button i { left:50%;bottom:23px;width:38px;height:28px;background:#68665f;clip-path:polygon(20% 8%,85% 0,100% 72%,65% 100%,0 83%);transform:translateX(-50%);box-shadow:inset -5px -4px #46454066; }
.proof-work-garden.mode-11 button i:before { left:16px;top:4px;width:7px;height:15px;border-radius:4px 4px 1px 1px;background:#b0b4b1;filter:none;transform:rotate(28deg); }
.proof-work-garden.mode-11 button.thirsty i:before { background:#efb63e;box-shadow:0 0 7px #ffe090; }
.proof-work-garden.mode-11 button.thirsty:after { content:"🔨";font-size:20px; }
.proof-work-garden.mode-12 { background:linear-gradient(#77b5d4 0 35%,#c7dce4 36% 53%,#f4f8f5 54%); }
.proof-work-garden.mode-12:before { inset:auto -3% 0;height:34px;background:#7e8b91;clip-path:polygon(0 100%,0 78%,8% 32%,17% 79%,28% 5%,39% 76%,50% 28%,61% 80%,72% 10%,83% 74%,93% 25%,100% 72%,100% 100%);opacity:.65; }
.proof-work-garden.mode-12 button { border-color:#a8c5cd;background:linear-gradient(150deg,#fff,#eaf5f7); }
.proof-work-garden.mode-12 button:nth-child(2n) { background:linear-gradient(150deg,#fff,#edf3e2); }
.proof-work-garden.mode-12 button i { left:50%;bottom:13px;width:5px;height:47px;border-radius:4px;background:#586a6b;transform:translateX(-50%);box-shadow:1px 1px #fff8; }
.proof-work-garden.mode-12 button i:before { content:"";display:block;position:absolute;left:-19px;bottom:-4px;top:auto;width:43px;height:13px;border-radius:50%;background:#dbe9e9;filter:none;box-shadow:inset -6px -3px #9cb9c055; }
.proof-work-garden.mode-12 button i:after { content:"";position:absolute;left:4px;top:2px;width:30px;height:22px;background:#819195;clip-path:polygon(0 0,100% 10%,76% 52%,100% 92%,0 82%);opacity:.28;transform-origin:left; }
.proof-work-garden.mode-12 button:nth-child(3n+1).thirsty i:after { background:#ee5d55; }
.proof-work-garden.mode-12 button:nth-child(3n+2).thirsty i:after { background:#f2c84d; }
.proof-work-garden.mode-12 button:nth-child(3n).thirsty i:after { background:#3e91d0; }
.proof-work-garden.mode-12 button.thirsty { border-color:#e3a53b;background:#fffbe6;box-shadow:0 7px 0 #806b3938,0 0 0 3px #ffe28b; }
.proof-work-garden.mode-12 button.thirsty i { background:#354e52;box-shadow:0 0 8px #fff; }
.proof-work-garden.mode-12 button.thirsty i:after { opacity:1;animation:proof-flag-wave .38s ease-in-out infinite alternate;box-shadow:0 0 7px #fff; }
.proof-work-garden.mode-12 button.thirsty:after { content:"➤";color:#d24c46;font-size:21px;font-weight:950; }
.proof-work-garden.mode-12 button.watered i:after { background:#55a85c;opacity:1; }
.proof-work-status { min-height:22px;margin:11px 0 5px;color:#365f3b;font-size:14px;font-weight:850; }
.proof-work-panel .primary-button { margin-top:9px; }
@keyframes proof-drop-bounce { to{transform:translateY(5px) scale(.9)} }
@keyframes proof-drop-fall { from{transform:translateY(-8px) scale(.85)}to{transform:translateY(35px) scale(1.05);opacity:.35} }
@keyframes proof-flower-miss { 25%{transform:translateX(-5px)}75%{transform:translateX(5px)} }
@keyframes proof-flame { from{transform:scale(.82) rotate(-4deg)}to{transform:scale(1.15) rotate(4deg)} }
@keyframes proof-flag-wave { from{transform:skewY(-4deg) scaleX(.9)}to{transform:skewY(5deg) scaleX(1.08)} }
#levelIntroMessage { white-space: pre-line; }

.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(220px, 58vw);
  height: min(235px, 31vh);
  margin: 0 auto 3px;
}

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

.welcome-options {
  width: min(310px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.welcome-language-heading {
  margin: 0 auto 15px;
  text-align: center;
}
.welcome-language-heading h2 {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 900;
  letter-spacing: .01em;
}
.welcome-language-heading p {
  max-width: 330px;
  margin: 5px auto 0;
  color: #597055;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.welcome-options .language-choice,
.welcome-options .language-choice.active {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: #c9553c;
  background: var(--coral);
  color: white;
  font-size: 17px;
  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;
}
.community-progress-card {
  margin: -7px 0 12px;
  padding: 8px 11px 9px;
  border: 1px solid #c4dcae;
  border-radius: 13px;
  background: linear-gradient(135deg,#f2f9e8,#e7f3dc);
  color: #47713b;
}
.community-progress-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}
.community-progress-heading strong {
  color: var(--green-dark);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.community-progress-icon { color: var(--coral); font-size: 17px; line-height: 1; }
.community-progress-track {
  position: relative;
  display: block;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #cfe1c0;
}
.community-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#74a850,#e5b540);
  transition: width .7s ease;
}
.community-milestone-marker {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 11px;
  border-radius: 3px;
  background: #fffaf0;
  box-shadow: 0 0 0 1px #9b7a29;
  transform: translate(-50%,-50%);
}
.community-milestone {
  display: block;
  margin-top: 6px;
  color: #8b651c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .01em;
  text-align: left;
}
.community-milestone[hidden] { display: none; }
.community-goal-milestone {
  margin-top: 3px;
  color: #6f5017;
}
.community-progress-card.milestone-reached {
  border-color: #dfbd62;
  background: linear-gradient(135deg,#f8f6dc,#f3edbd);
  box-shadow: inset 0 0 0 1px #fffbe8;
}
.community-progress-card.milestone-reached .community-progress-icon {
  color: #bd7a18;
}
.community-progress-card.goal-reached {
  border-color: #d6a62f;
  background:
    radial-gradient(circle at 13% 20%,#fff5a8 0 3px,transparent 4px),
    radial-gradient(circle at 87% 25%,#f6c956 0 2px,transparent 3px),
    linear-gradient(135deg,#fff7c9,#f2df8d);
  box-shadow: 0 5px 16px #b98b2430, inset 0 0 0 1px #fff8c5;
  animation: community-goal-arrives .75s ease-out both;
}
.community-progress-card.goal-reached .community-progress-icon {
  color: #bd7a18;
  text-shadow: 0 1px #fff;
}
.community-progress-card.goal-reached .community-progress-track {
  background: #dfca79;
}
.community-progress-card.goal-reached .community-progress-track i {
  background: linear-gradient(90deg,#62a250,#efbb35);
  box-shadow: 0 0 7px #dc9f21;
}
@keyframes community-goal-arrives {
  0% { transform: scale(.97); }
  55% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .community-progress-card.goal-reached { animation: none; }
}

.community-celebration {
  position: absolute;
  z-index: 25;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%,rgba(255,250,210,.28),transparent 55%);
  transition: opacity .3s ease, visibility .3s;
}
.community-celebration[hidden] { display: none; }
.community-celebration.visible { visibility: visible; opacity: 1; }
.celebration-balloon {
  position: absolute;
  display: block;
  width: 48px;
  height: 59px;
  border: 2px solid rgba(70,62,42,.28);
  border-radius: 50% 50% 47% 47% / 45% 45% 55% 55%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.82) 0 7%,transparent 8%),
    linear-gradient(135deg,rgba(255,255,255,.3),transparent 48%),
    var(--balloon-color,#e66d4e);
  box-shadow: inset -7px -6px 9px rgba(75,47,31,.17),0 7px 9px rgba(48,65,42,.15);
}
.celebration-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 9px;
  height: 9px;
  background: var(--balloon-color,#e66d4e);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform: translateX(-50%);
}
.celebration-balloon i {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: 1px;
  height: 72px;
  background: rgba(79,69,55,.55);
  transform-origin: top;
}
.loose-balloon {
  left: var(--balloon-left);
  bottom: -100px;
  transform: scale(var(--balloon-scale,1));
  animation: community-loose-balloon var(--balloon-duration,6.8s) var(--balloon-delay,0s) ease-in both;
}
.balloon-one { --balloon-left:7%;--balloon-color:#ec6b56;--balloon-duration:6.3s;--balloon-delay:.15s;--balloon-scale:.82; }
.balloon-two { --balloon-left:25%;--balloon-color:#efbd3f;--balloon-duration:7.1s;--balloon-delay:.7s;--balloon-scale:.66; }
.balloon-three { --balloon-left:72%;--balloon-color:#529bc9;--balloon-duration:6.6s;--balloon-delay:.3s;--balloon-scale:.76; }
.balloon-four { --balloon-left:88%;--balloon-color:#72aa5a;--balloon-duration:7.4s;--balloon-delay:1s;--balloon-scale:.62; }
.balloon-five { --balloon-left:55%;--balloon-color:#c676ba;--balloon-duration:6.1s;--balloon-delay:1.35s;--balloon-scale:.58; }
.celebration-banner-flight {
  position: absolute;
  left: 50%;
  top: 100%;
  width: min(88%,420px);
  height: 235px;
  transform: translateX(-50%);
  animation: community-banner-flight 7.5s .15s ease-in-out both;
}
.banner-balloons {
  position: relative;
  width: 250px;
  height: 92px;
  margin: 0 auto -5px;
}
.banner-balloon { top: 0; width: 48px; height: 58px; }
.banner-balloon i {
  height: 91px;
  transform: rotate(var(--string-angle,0deg));
}
.balloon-red { left: 6px;--balloon-color:#ec6b56;--string-angle:-12deg;transform:rotate(-5deg); }
.balloon-yellow { left: 66px;top:-22px;--balloon-color:#f1bd3e;--string-angle:-4deg;transform:rotate(3deg); }
.balloon-blue { right: 66px;top:-17px;--balloon-color:#559dca;--string-angle:4deg;transform:rotate(-3deg); }
.balloon-green { right: 6px;--balloon-color:#70a956;--string-angle:12deg;transform:rotate(5deg); }
.celebration-banner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 17px 15px;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: linear-gradient(135deg,#fff7ca,#ffe99d);
  color: var(--green-dark);
  text-align: center;
  box-shadow: 0 10px 28px rgba(48,65,42,.28),inset 0 0 0 2px #d69b34;
  transform: rotate(-1deg);
}
.celebration-banner::before,.celebration-banner::after {
  content: "";
  position: absolute;
  top: -31px;
  width: 1px;
  height: 31px;
  background: rgba(79,69,55,.62);
}
.celebration-banner::before { left: 19%; transform: rotate(-9deg); }
.celebration-banner::after { right: 19%; transform: rotate(9deg); }
.celebration-banner small {
  color: var(--coral);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
}
.celebration-banner strong {
  margin-top: 2px;
  font-size: clamp(25px,7.5vw,36px);
  line-height: 1.05;
}
.celebration-banner span {
  max-width: 310px;
  margin-top: 6px;
  color: #506849;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}
@keyframes community-loose-balloon {
  0% { transform: translate3d(0,0,0) scale(var(--balloon-scale,1)) rotate(-3deg); }
  35% { transform: translate3d(20px,-42vh,0) scale(var(--balloon-scale,1)) rotate(5deg); }
  70% { transform: translate3d(-14px,-82vh,0) scale(var(--balloon-scale,1)) rotate(-4deg); }
  100% { transform: translate3d(10px,-125vh,0) scale(var(--balloon-scale,1)) rotate(3deg); }
}
@keyframes community-banner-flight {
  0% { transform: translate3d(-50%,20px,0) rotate(1deg); }
  27% { transform: translate3d(-50%,-63vh,0) rotate(-1deg); }
  67% { transform: translate3d(-50%,-66vh,0) rotate(1deg); }
  100% { transform: translate3d(-50%,-128vh,0) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .community-celebration .loose-balloon { display:none; }
  .celebration-banner-flight {
    top: 31%;
    animation: community-banner-reduced 7s ease both;
  }
  @keyframes community-banner-reduced {
    0%,100% { opacity:0;transform:translateX(-50%); }
    10%,90% { opacity:1;transform:translateX(-50%); }
  }
}

.community-goal-celebration {
  position: absolute;
  z-index: 26;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(rgba(91,164,208,.28),rgba(255,237,176,.3) 55%,rgba(66,104,60,.28));
  transition: opacity .35s ease,visibility .35s;
}
.community-goal-celebration[hidden] { display:none; }
.community-goal-celebration.visible { visibility:visible;opacity:1; }
.goal-sunburst {
  position:absolute;
  left:50%;
  top:43%;
  width:620px;
  height:620px;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,239,127,.34) 0 8deg,transparent 8deg 17deg);
  transform:translate(-50%,-50%) scale(.2);
  animation:goal-sunburst-arrives 8s ease-out both;
}
.goal-sunburst::after {
  content:"";
  position:absolute;
  inset:34%;
  border-radius:50%;
  background:radial-gradient(circle,#fff8c8 0 18%,#f7cc5c99 45%,transparent 72%);
}
.goal-stars i {
  position:absolute;
  top:-12%;
  color:var(--star-color,#f5c542);
  font-style:normal;
  font-size:var(--star-size,22px);
  text-shadow:0 2px 5px #fff8b9,0 5px 8px #4d663e44;
  animation:goal-star-fall var(--star-duration,5.8s) var(--star-delay,0s) ease-in both;
}
.goal-stars i:nth-child(1){left:8%;--star-color:#f2b83d;--star-duration:5.4s;--star-delay:.2s;--star-size:25px}
.goal-stars i:nth-child(2){left:22%;--star-color:#e86f55;--star-duration:6.2s;--star-delay:1.1s;--star-size:18px}
.goal-stars i:nth-child(3){left:38%;--star-color:#fff08a;--star-duration:5.8s;--star-delay:.65s;--star-size:29px}
.goal-stars i:nth-child(4){left:57%;--star-color:#68a8cb;--star-duration:6.4s;--star-delay:.15s;--star-size:20px}
.goal-stars i:nth-child(5){left:70%;--star-color:#dc75b3;--star-duration:5.5s;--star-delay:1.35s;--star-size:27px}
.goal-stars i:nth-child(6){left:84%;--star-color:#76aa58;--star-duration:6.1s;--star-delay:.8s;--star-size:19px}
.goal-stars i:nth-child(7){left:94%;--star-color:#f1bd45;--star-duration:5.7s;--star-delay:.35s;--star-size:24px}
.goal-summit-scene {
  position:absolute;
  inset:30% -12% 0;
  transform:translateY(72%);
  animation:goal-summit-rises 8.2s cubic-bezier(.2,.75,.2,1) both;
}
.goal-mountain {
  position:absolute;
  left:50%;
  bottom:-5%;
  transform:translateX(-50%);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.goal-mountain-back {
  width:118%;
  height:72%;
  background:linear-gradient(135deg,#8aa98e,#547c69 65%,#3e6859);
  opacity:.72;
}
.goal-mountain-front {
  width:94%;
  height:61%;
  background:
    linear-gradient(148deg,transparent 0 41%,#eaf3dd 42% 48%,transparent 49%),
    linear-gradient(132deg,#7fa16d 0 43%,#527a5d 44% 70%,#345d50 71%);
  filter:drop-shadow(0 -8px 14px #274d3d28);
}
.goal-flag {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:58%;
  width:142px;
  height:145px;
  transform:translateX(-7px);
}
.goal-flag i {
  position:absolute;
  left:0;
  bottom:0;
  width:7px;
  height:140px;
  border-radius:5px;
  background:linear-gradient(90deg,#68452b,#b88649,#5c3d29);
  box-shadow:2px 3px 5px #304f3c55;
  transform:scaleY(0);
  transform-origin:bottom;
  animation:goal-flagpole 1s 1.8s ease-out forwards;
}
.goal-flag strong {
  position:absolute;
  left:5px;
  top:5px;
  width:126px;
  height:69px;
  display:grid;
  place-items:center;
  border:3px solid #fff6d2;
  border-radius:3px 12px 12px 3px;
  background:linear-gradient(135deg,#ec6d4e,#d9503c);
  color:white;
  box-shadow:0 7px 12px #304f3c44,inset 0 0 0 2px #c34131;
  font-size:26px;
  font-weight:950;
  text-shadow:0 2px #a73427;
  transform:scaleX(0);
  transform-origin:left;
  animation:goal-flag-unfurls 1.05s 2.55s cubic-bezier(.2,.8,.25,1.2) forwards;
}
.goal-celebration-message {
  position:absolute;
  z-index:5;
  top:max(15%,calc(env(safe-area-inset-top) + 78px));
  left:50%;
  width:min(88%,410px);
  padding:15px 18px 17px;
  border:3px solid rgba(255,255,255,.92);
  border-radius:20px;
  background:linear-gradient(135deg,#fff9ddf2,#ffe69cee);
  color:var(--green-dark);
  text-align:center;
  box-shadow:0 13px 32px #284f3d4d,inset 0 0 0 2px #d7a23d;
  opacity:0;
  transform:translate(-50%,-24px) scale(.88);
  animation:goal-message-arrives 5.2s 2.8s ease both;
}
.goal-celebration-message small {
  display:block;
  color:var(--coral);
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
}
.goal-celebration-message strong {
  display:block;
  margin-top:3px;
  font-size:clamp(26px,8vw,38px);
  line-height:1.05;
}
.goal-celebration-message span {
  display:block;
  margin-top:7px;
  color:#506849;
  font-size:14px;
  font-weight:800;
}
@keyframes goal-sunburst-arrives {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(12deg)}
  100%{opacity:.75;transform:translate(-50%,-50%) scale(1.08) rotate(42deg)}
}
@keyframes goal-star-fall {
  0%{opacity:0;transform:translateY(0) rotate(0) scale(.5)}
  12%{opacity:1}
  78%{opacity:1}
  100%{opacity:0;transform:translateY(112vh) rotate(330deg) scale(1.15)}
}
@keyframes goal-summit-rises {
  0%{transform:translateY(72%)}
  27%,100%{transform:translateY(0)}
}
@keyframes goal-flagpole { to{transform:scaleY(1)} }
@keyframes goal-flag-unfurls { to{transform:scaleX(1)} }
@keyframes goal-message-arrives {
  0%{opacity:0;transform:translate(-50%,-24px) scale(.88)}
  18%,82%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}
@media (prefers-reduced-motion:reduce) {
  .goal-sunburst,.goal-stars i,.goal-summit-scene,.goal-flag i,.goal-flag strong,.goal-celebration-message{animation:none}
  .goal-sunburst{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  .goal-stars{display:none}
  .goal-summit-scene{transform:none}
  .goal-flag i{transform:scaleY(1)}
  .goal-flag strong{transform:scaleX(1)}
  .goal-celebration-message{opacity:1;transform:translate(-50%,0)}
}
.level-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: -5px 0 13px;
}
.level-picker[hidden] { display:none; }
.chapter-picker { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 10px; }
.chapter-picker[hidden] { display:none; }
.chapter-choice { display:flex;align-items:center;gap:9px;min-height:68px;padding:8px 10px;border:2px solid #a9c99a;border-radius:16px;background:linear-gradient(145deg,#f3fae9,#dceec9);color:var(--green-dark);text-align:left;box-shadow:0 4px 11px #3f663018; }
.chapter-choice-number { display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:12px;background:#5d913f;color:#fff;font:950 19px/1 system-ui,sans-serif;box-shadow:inset 0 1px #ffffff66; }
.chapter-choice > span:last-child { display:grid;gap:2px;min-width:0; }
.chapter-choice small { color:#5d7659;font-size:9px;font-weight:950;letter-spacing:.12em; }
.chapter-choice strong { font-size:12px;line-height:1.2; }
.chapter-choice.selected { border-color:#477d33;box-shadow:inset 0 0 0 1px #477d33,0 6px 13px #3f663025;transform:translateY(-1px); }
.chapter-choice.chapter-two-choice { position:relative;overflow:visible;border-color:#9cbfc9;background:linear-gradient(145deg,#e0f2f5,#fae8b8); }
.chapter-choice.chapter-two-choice .chapter-choice-number { background:linear-gradient(145deg,#397e91,#c78b32); }
.chapter-choice.chapter-two-choice small { color:#55747c; }
.chapter-choice.chapter-two-choice.selected { border-color:#397f91;box-shadow:inset 0 0 0 1px #397f91,0 6px 13px #315d6728; }
.chapter-choice.chapter-two-choice.chapter-attention::before,
.chapter-choice.chapter-two-choice.chapter-attention::after { content:"❄  ❄";position:absolute;z-index:3;color:#f7ffff;font-size:13px;letter-spacing:20px;pointer-events:none;text-shadow:-1px -1px 0 #285a76,1px -1px 0 #285a76,-1px 1px 0 #285a76,1px 1px 0 #285a76,0 0 7px #68b9d5;animation:chapterSnowSparkle 1.8s ease-in-out infinite; }
.chapter-choice.chapter-two-choice.chapter-attention::before { top:-10px;left:14px; }
.chapter-choice.chapter-two-choice.chapter-attention::after { right:-6px;bottom:-9px;animation-delay:.72s; }
@keyframes chapterSnowSparkle {
  0%,100% { opacity:.18;transform:scale(.7) rotate(-7deg); }
  45% { opacity:1;transform:scale(1.08) rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-choice.chapter-two-choice.chapter-attention::before,
  .chapter-choice.chapter-two-choice.chapter-attention::after { animation:none;opacity:.75; }
}
@media (min-width:700px) {
  .chapter-choice.chapter-two-choice.chapter-attention::before,
  .chapter-choice.chapter-two-choice.chapter-attention::after { font-size:16px;letter-spacing:22px; }
}
.start-overlay.chapter-selection-pending .player-name-field,
.start-overlay.chapter-selection-pending #playButton,
.start-overlay.chapter-selection-pending #installHint { display:none; }
.chapter-level-group { margin:0 0 12px;padding:9px;border:2px solid #bfd6b2;border-radius:18px;background:#f4faed;transition:border-color .2s,background .2s; }
.chapter-level-group.chapter-two-levels { border-color:#acd0d7;background:linear-gradient(145deg,#edf9f8,#fff8df); }
.chapter-levels-heading { display:flex;align-items:center;gap:9px;margin:0 2px 9px;text-align:left; }
.chapter-levels-heading[hidden] { display:none; }
.chapter-levels-heading > span { display:grid;width:31px;height:31px;place-items:center;border-radius:10px;background:#5d913f;color:white;font-weight:950; }
.chapter-two-levels .chapter-levels-heading > span { background:#397f91; }
.chapter-levels-heading div { display:grid;gap:1px; }
.chapter-levels-heading strong { font-size:11px;letter-spacing:.1em; }
.chapter-levels-heading small { color:#72836e;font-size:10px;font-weight:750; }
.chapter-level-group .level-picker { margin:0; }
.chapter-two-start-preview { display:flex;align-items:center;gap:12px;margin:5px 0 12px;padding:12px 14px;border:2px solid #b8d5d2;border-radius:17px;background:linear-gradient(135deg,#e4f4f1,#fff0cf);text-align:left; }
.chapter-two-start-preview[hidden] { display:none; }
.chapter-two-preview-balloon { flex:0 0 auto;width:39px;height:51px;filter:drop-shadow(0 4px 3px #48635d33); }
.chapter-two-start-preview div { display:grid;gap:3px; }
.chapter-two-start-preview strong { font-size:16px; }
.chapter-two-start-preview span:not(.chapter-two-preview-balloon) { color:#57705c;font-size:12px;font-weight:700;line-height:1.3; }
.hot-air-balloon-icon { position:relative;display:inline-block;line-height:1; }
.hot-air-balloon-icon:before { content:"";position:absolute;z-index:2;left:17%;top:0;width:66%;height:72%;box-sizing:border-box;border:2px solid #60493d;border-radius:50% 50% 43% 43% / 39% 39% 61% 61%;background:conic-gradient(from 254deg at 50% 108%,#4e5d5e 0 24deg,#b15c48 24deg 51deg,#d6a655 51deg 77deg,#557667 77deg 103deg,#c7794d 103deg 129deg,#dfb966 129deg 155deg,#53696a 155deg 180deg);box-shadow:inset 6px 1px 8px #fff4bd3d,inset -6px 2px 9px #342b2a55; }
.hot-air-balloon-icon:after { content:"";position:absolute;z-index:3;left:36%;bottom:0;width:28%;height:17%;box-sizing:border-box;border:2px solid #65452d;border-radius:2px 2px 5px 5px;background:repeating-linear-gradient(90deg,#ba8750 0 4px,#8c6039 5px 6px); }
.hot-air-balloon-icon > i { position:absolute;z-index:1;left:30%;top:69%;width:40%;height:18%;box-sizing:border-box;border-left:1.5px solid #5b493c;border-right:1.5px solid #5b493c;transform:perspective(20px) rotateX(-7deg); }
.chapter-two-preview-balloon > i:before,.chapter-two-preview-balloon > i:after { content:"";position:absolute;top:78%;width:8px;height:8px;border:1px solid #8b611e;border-radius:50%;background:#e3a52b;box-shadow:inset 0 0 0 1px #ffe49a; }
.chapter-two-preview-balloon > i:before { left:-10px; }.chapter-two-preview-balloon > i:after { right:-10px; }
.objective-pill .hot-air-balloon-icon { width:25px;height:34px;flex:0 0 25px;font-size:initial; }
.intro-leaf.hot-air-balloon-icon:before { left:21%;top:12%;width:58%;height:54%; }
.intro-leaf.hot-air-balloon-icon:after { left:37%;bottom:11%;width:26%;height:16%; }
.intro-leaf.hot-air-balloon-icon > i { left:32%;top:64%;width:36%;height:19%; }
.goal-flower.hot-air-balloon-icon { display:block;width:74px;height:98px;margin:0 auto 10px;font-size:initial; }

.chapter-reward-overlay { z-index:18;align-items:flex-start;overflow-y:auto;background:radial-gradient(circle at 50% 12%,#fff6bfdd,#52784ee8 72%); }
.chapter-reward-panel { max-width:520px;margin-block:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-bottom));text-align:center; }
.chapter-medal-award { position:relative;width:112px;height:112px;margin:-8px auto 8px;animation:chapter-medal-arrives .9s cubic-bezier(.2,.9,.25,1.22) both; }
.chapter-medal-award:before,.chapter-medal-award:after { content:"";position:absolute;z-index:0;top:77px;width:36px;height:52px;background:linear-gradient(#295c39,#79a34a);clip-path:polygon(0 0,100% 0,82% 100%,50% 78%,18% 100%); }
.chapter-medal-award:before { left:21px;transform:rotate(12deg); }.chapter-medal-award:after { right:21px;transform:rotate(-12deg); }
.chapter-medal-award span { position:absolute;z-index:1;inset:0 0 auto;display:grid;width:92px;height:92px;margin:auto;place-items:center;border:5px solid #9a5a14;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff7b1 0 8%,#ffd34f 37%,#e59b22 70%,#aa5e14 100%);color:#724610;box-shadow:inset 0 0 0 4px #ffe990aa,0 10px 20px #49340e42;font:950 43px/1 Georgia,serif;text-shadow:0 2px #fff2a0; }
.chapter-medal-award span:before { content:"";position:absolute;inset:10px;border:2px solid #fff0a0;border-radius:50%; }
.chapter-reward-panel h2 { margin:4px 0 9px; }
.chapter-reward-panel > .subtitle { margin:0 auto 14px;max-width:430px;padding:11px 14px;border-radius:14px;background:#f3f7e9;font-size:17px;font-weight:650;line-height:1.45; }
.reward-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 17px; }
.reward-summary span { display:grid;gap:4px;place-items:center;padding:9px 5px;border-radius:14px;background:#edf5df;color:#52674b; }
.reward-summary b { font-size:25px; }.reward-summary small { font-size:10px;font-weight:850; }
.gadget-choice-label { margin:0 0 9px;font-weight:900; }
.gadget-picker { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.gadget-choice { display:grid;gap:5px;min-height:88px;place-items:center;padding:8px 5px;border:2px solid #c9d9bd;border-radius:15px;background:#fffdf8;color:var(--green-dark); }
.gadget-choice strong { font-size:11px;line-height:1.15; }
.gadget-preview { position:relative;display:block;width:48px;height:39px; }
.gadget-preview-scarf:before { content:"";position:absolute;left:7px;top:7px;width:25px;height:10px;border:2px solid #225a73;border-radius:50%;background:#3b86a7;transform:rotate(-7deg); }
.gadget-preview-scarf:after { content:"";position:absolute;left:27px;top:14px;width:19px;height:16px;border:2px solid #225a73;border-radius:3px 10px 3px 8px;background:#3b86a7;transform:rotate(22deg); }
.gadget-preview-cap:before { content:"";position:absolute;left:9px;top:8px;width:29px;height:18px;border:2px solid #583a2a;border-radius:50% 50% 35% 35%;background:linear-gradient(90deg,#8f5736,#b97945,#8f5736); }
.gadget-preview-cap:after { content:"";position:absolute;left:5px;top:23px;width:39px;height:7px;border:2px solid #583a2a;border-radius:50%;background:#b97945; }
.gadget-preview-satchel:before { content:"";position:absolute;left:8px;top:2px;width:31px;height:31px;border:4px solid #315e77;border-bottom-color:transparent;border-radius:50%;transform:rotate(-25deg); }
.gadget-preview-satchel:after { content:"";position:absolute;right:3px;bottom:2px;width:28px;height:23px;border:2px solid #6d452c;border-radius:6px;background:linear-gradient(#e5ad68 0 38%,#c98948 39%);box-shadow:inset 0 2px #f5cc91; }
.gadget-choice.selected { border-color:#df9f2c;background:#fff5c9;box-shadow:inset 0 0 0 2px #ffe58b;transform:translateY(-2px); }
.gadget-choice[hidden] { display:none; }
.chapter-reward-status { min-height:20px;margin:10px 0 5px;color:#55704e;font-size:13px;font-weight:850; }
.chapter-reward-panel > .primary-button { margin-top:4px; }
.chapter-reward-panel > .primary-button:disabled { opacity:.48;box-shadow:0 4px 0 #a77b6d; }
.chapter-two-preview-overlay { z-index:17;background:linear-gradient(#9fd2e9dd,#e9d7a7e8); }
.chapter-two-preview-panel { overflow:hidden; }
.chapter-two-preview-sky { position:relative;height:160px;margin:-34px -28px 17px;overflow:hidden;background:linear-gradient(#80c5e7,#e7eee1 68%,#f3d28f); }
.preview-mountain { position:absolute;bottom:-20px;width:190px;height:105px;background:#78977f;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.72; }
.preview-mountain:after { content:"";position:absolute;left:39%;top:0;width:22%;height:35%;background:#f7f4e9;clip-path:polygon(50% 0,100% 100%,65% 79%,50% 100%,34% 77%,0 100%); }
.mountain-left { left:-25px; }.mountain-right { right:-38px;bottom:-5px;transform:scale(1.2);opacity:.5; }
.preview-balloon { position:absolute;top:18px;left:50%;width:58px;height:78px;filter:drop-shadow(0 7px 5px #3c596748);animation:preview-balloon-float 2.8s ease-in-out infinite; }
@keyframes chapter-medal-arrives { from{opacity:0;transform:translateY(-70px) rotate(-16deg) scale(.5)} to{opacity:1;transform:none} }
@keyframes preview-balloon-float { 50%{transform:translate(8px,-9px) rotate(2deg)} }
.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-choice[hidden] { display: none; }
.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; }
.community-result {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 13px;
  background: linear-gradient(135deg,#edf7df,#fff4c9);
  color: #527047;
}
.community-result strong,.community-result span { display: block; }
.community-result strong { color: var(--green-dark); font-size: 14px; }
.community-result span { margin-top: 2px; font-size: 12px; font-weight: 750; }
.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; }
.win-panel .share-button { background:#3f91b3;box-shadow:0 7px 0 #286783; }
.win-panel .share-button { margin-top:18px; }
.developer-heart-box { margin-top:18px;padding:11px 12px 13px;border:2px solid #b8acd9;border-radius:18px;background:#f2effc; }
.developer-heart-box p { margin:0 4px 10px;color:#51496d;font-size:13px;font-weight:750;line-height:1.35; }
.developer-heart-button { width:100%;min-height:55px;border:0;border-radius:16px;background:linear-gradient(135deg,#f6a342,#ee7b2f);color:#fff;box-shadow:0 6px 0 #b85a25;font:850 18px system-ui;cursor:pointer; }
.developer-heart-button:disabled { opacity:.72;cursor:default; }
.developer-heart-box.heart-sent { padding:13px;border-color:#9d8bc9;background:#eee9fa; }
.developer-heart-box.heart-sent p { margin:0;color:#55447c;font-size:14px;font-weight:850; }
.win-panel #replayButton { margin-top:18px; }
.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); }
.toast.ridge-toast { top:auto;max-width:min(340px,calc(100% - 32px));background:rgba(36,75,45,.86);box-shadow:0 5px 16px #263e3530; }

.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; }
  .community-progress-card { margin-bottom: 7px; padding-block: 6px; }
  .community-progress-track { margin-top: 4px; }
  .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: 145px; width: 165px; margin-bottom: 0; }
  .welcome-language-heading { margin-bottom: 9px; }
  .welcome-language-heading h2 { font-size: 31px; }
  .welcome-language-heading p { margin-top: 2px; font-size: 11px; }
  .welcome-options { gap: 7px; }
  .welcome-options .language-choice { min-height: 48px; }
}

@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; }
}

/* Chapter medals and Sauti's medal cabinet */
.chapter-medal-button { border-color:#f8e19a;background:linear-gradient(145deg,#fff9db,#ead795);box-shadow:inset 0 1px #fff,0 5px 16px #5b3a123d; }
.chapter-medal-button:before { content:none; }
.chapter-medal-button:after { content:"✦";left:3px;right:auto;top:1px;bottom:auto;width:auto;height:auto;border:0;background:none;color:#fff8b1;font:950 13px/1 system-ui;text-shadow:0 0 6px #fff;animation:hudMedalSpark 4.8s ease-in-out infinite; }
.chapter-medal-button > i { position:absolute;z-index:1;left:9px;top:6px;width:31px;height:31px;border:3px solid #925410;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff8b5 0 9%,#ffd54e 38%,#dd8e1d 73%,#9f5511 100%);box-shadow:inset 0 0 0 2px #ffea86,0 3px 5px #7043114a; }
.chapter-medal-button > i:before,.chapter-medal-button > i:after { content:"";position:absolute;z-index:0;top:23px;width:13px;height:20px;background:linear-gradient(#2c6380,#64a6b2);clip-path:polygon(0 0,100% 0,83% 100%,50% 72%,17% 100%); }
.chapter-medal-button > i:before { left:2px;transform:rotate(10deg); }.chapter-medal-button > i:after { right:2px;transform:rotate(-10deg); }
.chapter-medal-button > i b { position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:#fff3a1;font:950 17px/1 Georgia,serif;text-shadow:0 1px #81500f;animation:hudMedalGleam 4.8s ease-in-out infinite; }
.chapter-medal-button > span { position:absolute;right:-4px;bottom:-3px;display:grid;width:20px;height:20px;place-items:center;border:2px solid #fff6cd;border-radius:50%;background:#295b36;color:#ffe47d;font:950 11px/1 system-ui,sans-serif;box-shadow:0 2px 5px #31502e55; }
@keyframes hudMedalGleam { 0%,68%,100%{filter:none;transform:scale(1)} 76%{filter:brightness(1.35);transform:scale(1.12)} }
@keyframes hudMedalSpark { 0%,65%,83%,100%{opacity:0;transform:scale(.4) rotate(0)} 73%{opacity:1;transform:scale(1.25) rotate(90deg)} }

.chapter-medal-award { width:126px;height:126px;perspective:480px; }
.chapter-medal-award:before,.chapter-medal-award:after { top:79px;width:39px;height:54px; }
.chapter-medal-award:before { left:25px; }.chapter-medal-award:after { right:25px; }
.chapter-medal-award[data-chapter="2"]:before,.chapter-medal-award[data-chapter="2"]:after { background:linear-gradient(#285d79,#73b2c0); }
.chapter-medal-award > span { width:100px;height:100px;border-width:6px;transform-style:preserve-3d;animation:medalGrandTurn 5.8s ease-in-out infinite; }
.chapter-medal-award > span b { color:#7b4910;font:950 44px/1 system-ui;text-shadow:0 2px #fff2a0; }
.chapter-medal-award[data-chapter="2"] > span { border-color:#b7781b;background:radial-gradient(circle at 30% 22%,#fffde0 0 8%,#e7f5f1 24%,#83c9d5 53%,#337b96 78%,#174c67 100%);box-shadow:inset 0 0 0 4px #dffcffcc,inset -8px -9px 12px #164c704d,0 11px 21px #263e4f42; }
.chapter-medal-award[data-chapter="2"] > span:before { border-color:#eaffff; }.chapter-medal-award[data-chapter="2"] > span b { color:#fff8bf;text-shadow:0 2px #1f6178; }
.chapter-medal-award > em { position:absolute;z-index:3;right:2px;top:8px;color:#fff7a8;font:950 24px/1 system-ui;text-shadow:0 0 8px #fff;animation:medalAwardSpark 1.8s ease-in-out infinite; }
@keyframes medalGrandTurn { 0%,35%,100%{transform:rotateY(0)} 66%{transform:rotateY(360deg)} }
@keyframes medalAwardSpark { 0%,100%{opacity:.2;transform:scale(.55) rotate(0)} 50%{opacity:1;transform:scale(1.3) rotate(90deg)} }

.gadget-preview-headlamp:before { content:"";position:absolute;left:5px;top:15px;width:38px;height:8px;border:2px solid #355c62;border-radius:8px;background:#5ca6ae;transform:rotate(-4deg); }
.gadget-preview-headlamp:after { content:"";position:absolute;left:18px;top:7px;width:16px;height:16px;border:3px solid #8a631c;border-radius:50%;background:radial-gradient(circle,#fffbd0 0 22%,#f4c84b 45%,#d58a1d 100%);box-shadow:0 0 11px #ffd95b; }
.gadget-preview-toolbelt:before { content:"";position:absolute;left:3px;top:15px;width:42px;height:9px;border:2px solid #67432d;border-radius:7px;background:linear-gradient(#d4944f,#985e32); }
.gadget-preview-toolbelt:after { content:"";position:absolute;right:5px;top:18px;width:17px;height:17px;border:2px solid #62402b;border-radius:3px 3px 6px 6px;background:#d9a25b;box-shadow:-24px -2px 0 -5px #f0c66d; }
.gadget-preview-armband:before { content:"";position:absolute;left:17px;top:3px;width:15px;height:32px;border:3px solid #264c62;border-radius:50%;background:linear-gradient(90deg,#2d8399,#83dcea,#2d8399);transform:rotate(29deg);box-shadow:0 0 9px #62d9ef99; }
.gadget-preview-armband:after { content:"✦";position:absolute;left:20px;top:10px;color:#edffff;font:950 12px/1 system-ui;text-shadow:0 0 6px #fff; }

.medal-cabinet-overlay { z-index:19;align-items:flex-start;overflow-y:auto;background:radial-gradient(circle at 50% 8%,#fff3bce8,#294d52ee 70%); }
.medal-cabinet-panel { max-width:540px;margin-block:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-bottom));padding-top:25px;text-align:center;background:linear-gradient(180deg,#fffdf4,#f4ecd4); }
.medal-cabinet-panel h2 { margin:4px 0 7px;font-size:clamp(29px,8vw,40px); }.medal-cabinet-panel > .subtitle { margin:0 auto 14px;max-width:410px;font-size:14px;line-height:1.4; }
.medal-shelf { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 17px; }
.medal-card { display:grid;place-items:center;align-content:start;min-width:0;padding:12px 7px 10px;border:2px solid #d9c995;border-radius:19px;background:linear-gradient(145deg,#fffdf4,#eadfbf);box-shadow:inset 0 1px #fff,0 6px 13px #5e481d1c; }
.medal-card > strong { margin-top:3px;color:#31583b;font-size:14px; }.medal-card > p { min-height:32px;margin:3px 0;color:#6a654e;font-size:11px;font-weight:750;line-height:1.3; }.medal-card > small { min-height:18px;color:#8b6d2f;font-size:10px;font-weight:900; }
.display-medal { position:relative;width:108px;height:116px;perspective:420px; }
.display-medal > i:before,.display-medal > i:after { content:"";position:absolute;z-index:0;top:69px;width:34px;height:47px;background:linear-gradient(#295c39,#79a34a);clip-path:polygon(0 0,100% 0,82% 100%,50% 78%,18% 100%); }.display-medal > i:before { left:21px;transform:rotate(12deg) }.display-medal > i:after { right:21px;transform:rotate(-12deg) }
.display-medal.medal-two > i:before,.display-medal.medal-two > i:after { background:linear-gradient(#285d79,#73b2c0); }
.display-medal > span { position:absolute;z-index:2;left:9px;top:0;display:grid;width:88px;height:88px;place-items:center;border:5px solid #914f10;border-radius:50%;background:radial-gradient(circle at 30% 22%,#fffbc0 0 8%,#ffd34f 36%,#e49420 69%,#9d5210 100%);box-shadow:inset 0 0 0 4px #ffe990cc,0 10px 17px #49340e3d;transform-style:preserve-3d;animation:medalGrandTurn 6.4s ease-in-out infinite; }
.display-medal > span:before { content:"";position:absolute;inset:11px;border:2px dotted #fff1a6;border-radius:50%; }.display-medal > span b { color:#79480f;font:950 39px/1 system-ui;text-shadow:0 2px #fff2a0; }
.display-medal.medal-two > span { border-color:#b7781b;background:radial-gradient(circle at 30% 22%,#fffde0 0 8%,#e7f5f1 24%,#83c9d5 53%,#337b96 78%,#174c67 100%);box-shadow:inset 0 0 0 4px #dffcffcc,0 10px 17px #263e4f42;animation-delay:-1.7s; }.display-medal.medal-two > span:before { border-color:#eaffff }.display-medal.medal-two > span b { color:#fff8bf;text-shadow:0 2px #1f6178; }
.display-medal > em { position:absolute;z-index:4;color:#fff8a6;font:950 20px/1 system-ui;text-shadow:0 0 7px #fff;animation:medalShelfSpark 2.1s ease-in-out infinite; }.display-medal > em:nth-of-type(1){right:1px;top:4px}.display-medal > em:nth-of-type(2){left:0;top:48px;animation-delay:-1.05s}
.medal-card.locked { filter:saturate(.12);background:#e9e7dd; }.medal-card.locked .display-medal > span { animation:none;filter:brightness(.65); }.medal-card.locked .display-medal > em { display:none; }.medal-card.earned { border-color:#d5a83a;box-shadow:inset 0 0 0 2px #fff7c8,0 7px 16px #7c571f2b; }
@keyframes medalShelfSpark { 0%,100%{opacity:.15;transform:scale(.5) rotate(0)} 50%{opacity:1;transform:scale(1.25) rotate(90deg)} }
.medal-cabinet-panel h3 { margin:3px 0 3px;color:#31583b;font-size:17px; }.medal-cabinet-hint { margin:0 0 9px;color:#6b765f;font-size:12px;font-weight:700; }
.cabinet-gadget-picker { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.cabinet-gadget-choice { display:grid;gap:3px;min-width:0;min-height:76px;place-items:center;padding:6px 3px;border:2px solid #c8d4bc;border-radius:14px;background:#fffdf8;color:#31583b; }.cabinet-gadget-choice strong { font-size:9px;line-height:1.15; }.cabinet-gadget-choice .gadget-preview { transform:scale(.8);margin:-3px 0; }
.cabinet-gadget-choice:disabled { opacity:.35;filter:grayscale(1); }.cabinet-gadget-choice.selected { border-color:#df9f2c;background:#fff3bd;box-shadow:inset 0 0 0 2px #ffe58b;transform:translateY(-2px); }
.cabinet-gadget-none { grid-column:1/-1;display:flex;min-height:43px;justify-content:center;gap:8px; }.cabinet-gadget-none > span { font-size:23px; }.cabinet-gadget-none strong { font-size:11px; }
.medal-cabinet-panel > .primary-button { margin-top:8px; }

@media (prefers-reduced-motion:reduce) {
  .chapter-medal-button:after,.chapter-medal-button > i b,.chapter-medal-award > span,.chapter-medal-award > em,.display-medal > span,.display-medal > em { animation:none!important; }
}