:root {
  --ink: #173f46;
  --sky: #b9eff0;
  --teal: #138c90;
  --yellow: #ffd95a;
  --coral: #ff6f72;
  --purple: #8056c7;
  --leaf: #3d9b58;
  --cream: #fff8dc;
  --white: #fffef8;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(#9be2e8 0 42%, #dff4c2 74%, #9fd072 100%);
  overflow-x: hidden;
}

button { font: inherit; }
.sky { position: fixed; inset: 0 0 auto; height: 52vh; pointer-events: none; overflow: hidden; }
.cloud, .cloud::before, .cloud::after { position: absolute; display: block; background: rgba(255,255,255,.72); border-radius: 999px; }
.cloud { width: 150px; height: 45px; top: 18%; filter: blur(.2px); }
.cloud::before, .cloud::after { content: ""; }
.cloud::before { width: 72px; height: 72px; left: 25px; bottom: 0; }
.cloud::after { width: 88px; height: 88px; right: 20px; bottom: -3px; }
.cloud-a { left: 4%; }
.cloud-b { right: 5%; top: 34%; transform: scale(.72); }

.app-shell { position: relative; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 56px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.title-lockup { display: flex; align-items: center; gap: 12px; }
.tiny-flower { display: grid; place-items: center; width: 58px; height: 58px; color: #bd3c67; background: var(--yellow); border: 4px solid var(--ink); border-radius: 50%; font-size: 2rem; transform: rotate(-8deg); box-shadow: 0 5px 0 rgba(23,63,70,.2); }
.eyebrow { margin: 0 0 2px; color: #22666a; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.85rem, 4vw, 3.1rem); line-height: .95; letter-spacing: -.04em; }
.status-row { display: flex; align-items: center; gap: 12px; }
.score-pill, .progress-wrap { background: rgba(255,254,248,.92); border: 3px solid var(--ink); box-shadow: 0 5px 0 rgba(23,63,70,.18); }
.score-pill { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 18px; font-size: 1.05rem; white-space: nowrap; }
.progress-wrap { width: min(290px, 32vw); padding: 9px 12px 11px; border-radius: 18px; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: .78rem; font-weight: 900; }
.progress-track { height: 12px; background: #d8e7df; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; }
.progress-track span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #ff9f43, var(--yellow)); border-radius: inherit; transition: width .5s cubic-bezier(.34,1.56,.64,1); }

.game-card { padding: 20px; background: rgba(255,254,248,.95); border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 12px 0 rgba(23,63,70,.2); }
.play-area { display: grid; grid-template-columns: minmax(190px,1fr) 180px minmax(190px,1fr); align-items: center; gap: 12px; }
.character-panel { padding: 14px; text-align: center; border-radius: 24px; }
.pollinator-panel { background: #fff1aa; }
.plant-panel { background: #ffd9e4; }
.panel-kicker { margin-bottom: 4px; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.character-frame { position: relative; height: 190px; display: grid; place-items: center; }
.character-frame::after { content:""; position:absolute; left:17%; right:17%; bottom:10px; height:18px; border-radius:50%; background:rgba(23,63,70,.12); filter:blur(4px); }
.character-panel h2 { position: relative; margin: 0; font-size: 1.35rem; }
.sprite { position: relative; z-index: 1; width: 180px; height: 180px; background-image: url('assets/partner-sprites.png'); background-repeat: no-repeat; background-size: 300% 400%; filter: drop-shadow(0 4px 2px rgba(23,63,70,.15)); }
.sprite-bee { background-position: 0% 0%; }
.sprite-butterfly { background-position: 50% 0%; }
.sprite-moth { background-position: 100% 0%; }
.sprite-beetle { background-position: 0% 33.333%; }
.sprite-hummingbird { background-position: 50% 33.333%; }
.sprite-bat { background-position: 100% 33.333%; }
.sprite-sunflower { background-position: 0% 66.666%; }
.sprite-bellflower { background-position: 50% 66.666%; }
.sprite-moonflower { background-position: 100% 66.666%; }
.sprite-bowlflower { background-position: 0% 100%; }
.sprite-trumpet { background-position: 50% 100%; }
.sprite-cactus { background-position: 100% 100%; }

.connection-zone { position: relative; height: 120px; }
.connection-zone svg { width: 100%; height: 100%; overflow: visible; }
#connectionLine { fill: none; stroke: #efa900; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 5px #ffd12a) drop-shadow(0 0 10px #ffec7a); }
.connected #connectionLine { opacity: 1; animation: draw-line .75s ease forwards; }
.partner-badge { position: absolute; inset: 50% auto auto 50%; z-index: 3; width: max-content; max-width: 180px; padding: 9px 12px; color: #643c02; background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px; font-size: 1rem; font-weight: 900; text-align: center; opacity: 0; transform: translate(-50%,-50%) scale(.45) rotate(-4deg); box-shadow: 0 4px 0 rgba(23,63,70,.22); }
.connected .partner-badge { animation: pop-badge .65s .35s cubic-bezier(.34,1.56,.64,1) forwards; }
.pollen-dot { position:absolute; left:5%; top:50%; width:11px; height:11px; background:#ffb800; border:2px solid #7b5300; border-radius:50%; opacity:0; }
.connected .pollen-dot { animation: pollen-fly 1.1s ease-in-out forwards; }
.connected .dot-2 { animation-delay:.14s; top:37%; }
.connected .dot-3 { animation-delay:.28s; top:64%; }
.correct-bounce { animation: happy-bounce .7s ease; }

.challenge { max-width: 850px; margin: 16px auto 0; padding: 18px 22px 10px; text-align: center; border-top: 3px dashed #9bc0b5; }
.challenge-count { display: inline-block; margin-bottom: 7px; padding: 4px 10px; color: #fff; background: var(--teal); border-radius: 99px; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.challenge h2 { margin-bottom: 14px; font-size: clamp(1.35rem, 2.7vw, 2rem); line-height: 1.15; }
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.answer-button { min-height: 66px; padding: 12px 14px; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 #9bc0b5; font-size: 1.08rem; font-weight: 900; cursor: pointer; transition: transform .12s, box-shadow .12s, background .2s; touch-action: manipulation; }
.answer-button:hover { background: #e9fbf6; transform: translateY(-2px); box-shadow: 0 7px 0 #9bc0b5; }
.answer-button:focus-visible, .play-again:focus-visible { outline: 5px solid #2b7fff; outline-offset: 3px; }
.answer-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #9bc0b5; }
.answer-button.wrong { background: #ffd1d1; animation: shake .32s ease; }
.answer-button.right { color: #144925; background: #bff3b2; }
.answer-button:disabled { cursor: default; }
.feedback { min-height: 26px; margin: 12px 0 0; font-size: 1rem; font-weight: 800; }
.feedback.good { color: #197238; }
.feedback.try { color: #a83c3c; }

.garden { margin-top: 22px; padding: 20px 20px 0; background: rgba(255,254,248,.9); border: 4px solid var(--ink); border-radius: 30px; box-shadow: 0 9px 0 rgba(23,63,70,.2); overflow: hidden; }
.garden-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.garden-heading h2 { margin-bottom: 12px; font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
.garden-count { padding: 7px 12px; background: #c6efb5; border: 2px solid var(--ink); border-radius: 99px; font-weight: 900; white-space: nowrap; }
.garden-scene { position: relative; height: 245px; margin: 0 -20px; overflow: hidden; background: linear-gradient(#8ed7e8 0 58%, #72bd62 58% 74%, #4f9b49 74%); border-top: 3px solid var(--ink); }
.garden-scene::before { content:""; position:absolute; inset:auto 0 25%; height:26px; background:linear-gradient(135deg, transparent 20px,#6ab45a 0) 0 0/40px 100%; }
.sun { position:absolute; right:6%; top:18px; width:55px; height:55px; background:#ffe873; border:3px solid var(--ink); border-radius:50%; box-shadow:0 0 0 12px rgba(255,232,115,.25); }
.soil { position:absolute; inset:auto 0 0; height:27%; background:#7c4e2f; border-top:3px solid #4a311e; }
.garden-items { position:absolute; z-index:2; inset:0; }
.garden-item { position:absolute; width:108px; height:108px; opacity:0; transform:translateY(75px) scale(.3) rotate(var(--tilt,0deg)); animation: garden-grow .75s cubic-bezier(.34,1.56,.64,1) forwards; }
.garden-item.pollinator { animation-name:garden-fly; }

.celebration { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(23,63,70,.74); backdrop-filter: blur(5px); }
.celebration[hidden] { display:none; }
.celebration-card { width:min(560px, 100%); padding:34px 28px; text-align:center; background:var(--cream); border:5px solid var(--ink); border-radius:32px; box-shadow:0 14px 0 rgba(0,0,0,.22); animation: final-pop .55s cubic-bezier(.34,1.56,.64,1); }
.celebration-card h2 { margin-bottom:12px; font-size:clamp(2rem, 6vw, 3.5rem); line-height:.98; }
.celebration-card > p:not(.eyebrow) { font-size:1.3rem; font-weight:800; }
.celebration-sparkles { color:#c34777; font-size:2rem; letter-spacing:.25em; }
.final-score { display:inline-block; margin:10px 0 20px; padding:10px 18px; background:#fff; border:3px solid var(--ink); border-radius:18px; font-size:1.25rem; }
.play-again { min-height:58px; padding:12px 28px; color:#fff; background:var(--coral); border:3px solid var(--ink); border-radius:18px; box-shadow:0 5px 0 #a53d48; font-weight:900; font-size:1.15rem; cursor:pointer; }

@keyframes draw-line { to { stroke-dashoffset:0; } }
@keyframes pop-badge { to { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg); } }
@keyframes pollen-fly { 0%{opacity:0;transform:translate(0,0)} 18%{opacity:1} 100%{opacity:0;transform:translate(155px,-8px)} }
@keyframes happy-bounce { 35%{transform:translateY(-18px) rotate(-3deg)} 65%{transform:translateY(3px) rotate(2deg)} }
@keyframes shake { 25%{transform:translateX(-7px)} 50%{transform:translateX(7px)} 75%{transform:translateX(-4px)} }
@keyframes garden-grow { to {opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt,0deg))} }
@keyframes garden-fly { 0%{opacity:0;transform:translate(-40px,35px) scale(.3) rotate(-8deg)} 65%{transform:translate(8px,-8px) scale(1.08) rotate(5deg)} 100%{opacity:1;transform:translate(0,0) scale(1) rotate(var(--tilt,0deg))} }
@keyframes final-pop { from{opacity:0;transform:scale(.65) rotate(-4deg)} }

@media (max-width: 760px) {
  .app-shell { width:min(100% - 20px, 620px); padding-top:14px; }
  .topbar { align-items:stretch; flex-direction:column; gap:12px; }
  .status-row { display:grid; grid-template-columns:auto 1fr; }
  .progress-wrap { width:100%; }
  .game-card { padding:13px; border-radius:24px; }
  .play-area { grid-template-columns:1fr 64px 1fr; gap:4px; }
  .character-panel { padding:8px 4px; border-radius:18px; }
  .character-frame { height:128px; }
  .sprite { width:126px; height:126px; }
  .character-panel h2 { font-size:1.05rem; }
  .connection-zone { height:86px; }
  .partner-badge { max-width:130px; padding:7px; font-size:.75rem; }
  .connected .pollen-dot { display:none; }
  .challenge { padding:15px 4px 5px; }
  .answer-grid { grid-template-columns:1fr; gap:10px; }
  .answer-button { min-height:58px; }
  .garden { padding:16px 14px 0; }
  .garden-scene { height:210px; margin:0 -14px; }
  .garden-item { width:84px; height:84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}