:root {
  color-scheme: light;
  --ink: #163f38;
  --muted: #55736a;
  --leaf: #2f7a55;
  --leaf-dark: #1d5b43;
  --mint: #dff2d5;
  --cream: #fffaf0;
  --gold: #f6c849;
  --coral: #ef765a;
  --soil: #8d5431;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1100px; height: 100%; margin: 0; overflow: hidden; }
body { font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; color: var(--ink); background: #b7e4c7; }
button { font: inherit; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #174f43 !important; }
.lesson, .garden-world { width: 100%; height: 100%; }
.garden-world { position: relative; isolation: isolate; overflow: hidden; padding: 22px 28px 24px; background: #98d9c0 url("art/garden-backdrop-01.webp") center/cover no-repeat; }
.garden-world::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(14,81,70,.08), rgba(9,65,52,.17)); }
.sun-wash { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 36% 4%, rgba(255,249,190,.62), transparent 34%); pointer-events: none; }
.garden-hud { position: relative; z-index: 10; height: 70px; display: grid; grid-template-columns: 190px 1fr minmax(210px, 250px) 306px; align-items: center; gap: 18px; max-width: 1384px; margin: 0 auto; padding: 10px 14px; border: 1px solid rgba(255,255,255,.65); border-radius: 20px; background: rgba(255,253,240,.9); box-shadow: 0 8px 28px rgba(19,75,59,.18); backdrop-filter: blur(10px); }
.garden-sign span, .scoreboard span, .difficulty-card span { display: block; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.garden-sign strong { display: block; margin-top: 2px; font-size: 17px; }
.plot-track { display: flex; align-items: center; justify-content: center; }
.plot-track i { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #6c9a7b; border-radius: 50%; color: #38664d; background: #edf7df; font-style: normal; font-size: 10px; font-weight: 1000; transition: transform 180ms ease-out, background 180ms ease-out; }
.plot-track i.is-current { color: white; border-color: var(--leaf-dark); background: var(--leaf); transform: scale(1.12); }
.plot-track i.is-complete { color: #6c4100; border-color: #dba732; background: var(--gold); }
.plot-track b { width: 12px; height: 3px; background: #bdd1b6; }
.difficulty-card i { display: block; height: 8px; margin: 6px 0 4px; overflow: hidden; border-radius: 999px; background: #d4e5d1; }
.difficulty-card i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #68ad5d, #f5c647); transition: width 260ms ease-out; }
.difficulty-card strong { font-size: 11px; }
.scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scoreboard div { min-height: 46px; padding: 6px 9px; border-left: 1px solid #cfddca; }
.scoreboard strong { display: block; margin-top: 1px; font-size: 18px; }.scoreboard strong:first-letter { color: #e6a91d; }
.game-card { position: relative; z-index: 3; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; max-width: 1260px; height: calc(100% - 94px); min-height: 610px; margin: 24px auto 0; padding: 22px 24px 24px 14px; border: 2px solid rgba(255,255,255,.72); border-radius: 34px; background: rgba(247,253,231,.86); box-shadow: 0 14px 0 rgba(48,105,64,.18), 0 28px 55px rgba(16,67,52,.2); backdrop-filter: blur(8px); }
.mascot-grove { position: relative; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 38px; }
.mascot { position: relative; z-index: 3; width: 245px; max-height: 440px; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(29,75,54,.24)); transform-origin: 50% 90%; transition: transform 170ms ease-out, filter 170ms ease-out; }
.mascot-shadow { position: absolute; z-index: 1; left: 44px; right: 34px; bottom: 34px; height: 29px; border-radius: 50%; background: rgba(32,73,52,.2); filter: blur(4px); }
.speech-bubble { position: absolute; z-index: 4; top: 22px; left: 10px; right: 8px; min-height: 72px; display: grid; place-items: center; padding: 14px 17px; border: 2px solid #7f9d73; border-radius: 22px 22px 22px 7px; background: #fffdf2; box-shadow: 0 6px 0 rgba(72,111,70,.13); font-size: 14px; font-weight: 850; line-height: 1.3; text-align: center; }
.game-card.is-happy .mascot { animation: mascot-hop 620ms cubic-bezier(.2,.8,.3,1.25); }.game-card.is-miss .mascot { transform: rotate(-5deg); }.game-card.is-level-up .mascot { animation: mascot-party 900ms ease-out; }
.sentence-patch { min-width: 0; display: grid; grid-template-rows: auto minmax(285px, 1fr) 34px minmax(86px, auto); padding: 18px 26px 22px; border: 1px solid #d7d8bd; border-radius: 26px; background: rgba(255,252,241,.96); box-shadow: inset 0 0 0 5px rgba(255,255,255,.5), 0 8px 22px rgba(42,77,55,.1); }
.challenge-header { min-height: 112px; text-align: center; }.challenge-header span { color: #b4513e; font-size: 11px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.challenge-header h1 { margin: 6px 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -.035em; }.challenge-header p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.plot-stage { position: relative; min-height: 290px; display: grid; place-items: center; padding: 28px 208px 34px 30px; overflow: hidden; border: 2px solid #a9c385; border-radius: 24px; background: linear-gradient(180deg, rgba(224,245,206,.78) 0 72%, #9f7147 72% 76%, #855334 76%); box-shadow: inset 0 -8px rgba(72,44,27,.12); }
.plot-stage::before { content: ""; position: absolute; inset: auto 0 21% 0; height: 7px; background: rgba(255,255,255,.22); }
.soil-label { position: absolute; top: 13px; left: 18px; padding: 6px 11px; border-radius: 999px; color: #245b45; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.sentence-card { width: min(650px, 100%); padding: 25px 28px 23px; border: 2px solid #90a97b; border-radius: 20px; background: #fffefa; box-shadow: 0 8px 0 rgba(80,104,64,.14), 0 16px 30px rgba(61,91,55,.1); text-align: center; transition: transform 150ms ease-out; }
.sentence { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3vw, 42px); line-height: 1.2; letter-spacing: -.02em; }.sentence .blank { display: inline-block; min-width: 82px; color: #b5513f; border-bottom: 4px solid #dc9b73; }.sentence .fixed { color: var(--leaf-dark); background: #e4f3d8; border-radius: 8px; box-shadow: 0 0 0 5px #e4f3d8; }.clue { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 850; }
.plant-pot { position: absolute; right: 18px; bottom: 8px; width: 210px; height: 245px; transform-origin: 50% 90%; }.flower { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 5px rgba(48,57,32,.22)); transition: opacity 190ms ease-out, transform 420ms cubic-bezier(.2,.9,.25,1.2); }.flower-bloom { opacity: 0; transform: translateY(26px) scale(.35) rotate(-8deg); }.plot-stage.is-bloomed .flower-bud { opacity: 0; transform: scale(.7); }.plot-stage.is-bloomed .flower-bloom { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
.bloom-burst { position: absolute; left: 50%; top: 42%; }.bloom-burst i { position: absolute; width: 12px; height: 12px; opacity: 0; border-radius: 50% 0 50% 0; background: var(--gold); }.plot-stage.is-celebrating .bloom-burst i { animation: petal-pop 720ms ease-out both; }.bloom-burst i:nth-child(1){--x:-100px;--y:-80px}.bloom-burst i:nth-child(2){--x:-30px;--y:-120px;animation-delay:50ms}.bloom-burst i:nth-child(3){--x:65px;--y:-100px;animation-delay:90ms}.bloom-burst i:nth-child(4){--x:104px;--y:-28px;animation-delay:130ms}.bloom-burst i:nth-child(5){--x:84px;--y:62px;animation-delay:170ms}.bloom-burst i:nth-child(6){--x:12px;--y:98px;animation-delay:210ms}.bloom-burst i:nth-child(7){--x:-78px;--y:66px;animation-delay:250ms}.bloom-burst i:nth-child(8){--x:-110px;--y:4px;animation-delay:290ms}
.game-card.is-miss .sentence-card { animation: gentle-shake 330ms ease-out; border-color: var(--coral); }
.feedback { min-height: 34px; display: grid; place-items: center; color: var(--leaf-dark); font-size: 14px; font-weight: 900; text-align: center; }.feedback.is-error { color: #b44738; }
.action-area { min-height: 86px; display: flex; align-items: center; justify-content: center; }.choice-grid { width: min(760px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.choice-grid.two { grid-template-columns: repeat(2,1fr); }.choice, .primary { min-height: 66px; border: 2px solid #9db894; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 6px 0 #c9d9be; font-weight: 1000; cursor: pointer; transition: transform 130ms ease-out, box-shadow 130ms ease-out, border-color 130ms ease-out; }.choice { padding: 10px 14px; font-size: 18px; line-height: 1.15; }.choice small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }.choice:hover, .primary:hover { transform: translateY(-3px); border-color: var(--leaf); box-shadow: 0 9px 0 #bdd4b1; }.choice:active, .primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #bdd4b1; }.primary { min-width: 230px; padding: 0 25px; color: white; border-color: var(--leaf-dark); background: var(--leaf); box-shadow: 0 6px 0 var(--leaf-dark); font-size: 16px; }.primary.is-gold { color: #5a3a09; border-color: #b87a18; background: var(--gold); box-shadow: 0 6px 0 #b87a18; }
.toast { position: absolute; z-index: 40; left: 50%; bottom: 28px; max-width: 70%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border-radius: 999px; color: white; background: #123f37; pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out, transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.leaf-drift { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }.leaf-drift i { position: absolute; top: -30px; width: 16px; height: 10px; opacity: 0; border-radius: 100% 0 100% 0; background: #f5cc54; }.garden-world.is-party .leaf-drift i { animation: leaf-fall 1200ms ease-in both; }.leaf-drift i:nth-child(1){left:12%;animation-delay:0ms}.leaf-drift i:nth-child(2){left:28%;animation-delay:90ms;background:#ef7958}.leaf-drift i:nth-child(3){left:45%;animation-delay:170ms;background:#fff3a5}.leaf-drift i:nth-child(4){left:61%;animation-delay:240ms}.leaf-drift i:nth-child(5){left:76%;animation-delay:310ms;background:#ef7958}.leaf-drift i:nth-child(6){left:90%;animation-delay:390ms}
@keyframes mascot-hop { 0%,100%{transform:translateY(0) rotate(0)} 42%{transform:translateY(-25px) rotate(5deg)} 70%{transform:translateY(0) rotate(-3deg)} }
@keyframes mascot-party { 0%,100%{transform:rotate(0) scale(1)} 28%{transform:rotate(-8deg) scale(1.08)} 55%{transform:rotate(8deg) scale(1.12)} 78%{transform:rotate(-4deg) scale(1.05)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px) rotate(-.5deg)} 55%{transform:translateX(6px) rotate(.5deg)} 78%{transform:translateX(-3px)} }
@keyframes petal-pop { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)} 30%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(220deg) scale(1.1)} }
@keyframes leaf-fall { 0%{opacity:0;transform:translateY(0) rotate(0)} 15%{opacity:1} 100%{opacity:0;transform:translate(110px,900px) rotate(580deg)} }
@media (max-width: 1250px) { .garden-hud { grid-template-columns: 160px 1fr 180px 260px; gap: 10px; }.plot-track i { width: 20px; height: 20px; border-width: 1px; font-size: 8px; }.plot-track b { width: 3px; }.scoreboard { gap: 3px; }.scoreboard div { padding-inline: 6px; } }
@media (max-height: 760px) { .garden-world { padding-top: 14px; }.garden-hud { height: 62px; }.game-card { height: calc(100% - 78px); min-height: 570px; margin-top: 16px; }.speech-bubble { top: 10px; }.mascot { width: 220px; }.sentence-patch { padding-top: 12px; }.challenge-header { min-height: 94px; }.plot-stage { min-height: 260px; }.plant-pot { width: 185px; height: 215px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }