:root {
  color-scheme: light;
  --ink: #2f3028;
  --muted: #6d6b5c;
  --honey: #f6b81f;
  --honey-dark: #bd7110;
  --cream: #fffaf0;
  --teal: #147d79;
  --teal-dark: #0d5e5b;
  --coral: #df6246;
  --leaf: #5f8c42;
  --line: #e6d9b8;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #edf3d9; }
button { color: inherit; font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid rgba(20,125,121,.28); outline-offset: 4px; }
[hidden] { display: none !important; }

.lesson { width: 100%; height: 100%; min-width: 1050px; min-height: 700px; padding: 12px; }
.garden { position: relative; width: 100%; height: 100%; min-height: 676px; overflow: hidden; border-radius: 32px; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.world-art { position: absolute; z-index: -4; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: saturate(.9); }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(248,244,211,.68), rgba(255,252,233,.2) 35%, rgba(235,244,214,.54)); }
.world-wash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.32), rgba(255,250,224,.06) 58%, rgba(54,74,26,.11)); }

.garden-hud { position: absolute; z-index: 10; top: 22px; left: 24px; right: 24px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.mode-chip, .difficulty-card, .scoreboard { border: 1px solid rgba(103,83,35,.12); background: rgba(255,253,242,.9); box-shadow: 0 10px 30px rgba(75,65,24,.11); backdrop-filter: blur(12px); }
.mode-chip { display: grid; gap: 3px; min-width: 170px; padding: 10px 15px; border-radius: 17px; }
.mode-chip span, .difficulty-card span, .scoreboard span { color: var(--honey-dark); font-size: 10px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.mode-chip strong { font-size: 15px; }
.difficulty-card { width: 190px; padding: 9px 14px 10px; border-radius: 17px; }
.difficulty-card span { display: flex; justify-content: space-between; }
.difficulty-card > i { display: block; height: 7px; margin: 7px 0 5px; overflow: hidden; border-radius: 99px; background: #e9e1c8; }
.difficulty-card > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--honey), var(--coral)); transition: width 220ms ease-out; }
.difficulty-card > strong { display: block; font-size: 12px; }
.scoreboard { display: flex; padding: 6px; border-radius: 19px; }
.scoreboard > div { min-width: 78px; padding: 5px 10px; text-align: center; }
.scoreboard strong { display: block; margin-top: 2px; font-size: 21px; line-height: 1; }
.scoreboard strong i { color: var(--honey); font-style: normal; }
.scoreboard small { font-size: 9px; }

.spelling-board { position: absolute; z-index: 2; top: 94px; bottom: 24px; left: 50%; width: min(760px, calc(100% - 500px)); min-width: 650px; display: flex; flex-direction: column; align-items: center; padding: 26px 48px 24px; transform: translateX(-50%); border: 1px solid rgba(124,92,28,.17); border-radius: 34px; background: rgba(255,252,240,.95); box-shadow: 0 25px 70px rgba(66,61,28,.18), inset 0 2px 0 rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.challenge-heading { width: 100%; text-align: center; }
.challenge-heading > span { color: var(--teal); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 6px 0 0; font-size: clamp(29px, 2.7vw, 40px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.challenge-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; line-height: 1.35; }

.listen-button { position: relative; width: min(390px, 100%); min-height: 78px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; margin: 19px 0 14px; padding: 10px 20px; overflow: hidden; border: 2px solid var(--teal-dark); border-radius: 22px; color: white; background: linear-gradient(180deg, #299c94, var(--teal)); box-shadow: 0 6px 0 var(--teal-dark), 0 15px 28px rgba(20,125,121,.2); cursor: pointer; text-align: left; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.listen-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark), 0 18px 30px rgba(20,125,121,.22); }
.listen-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }
.listen-button svg { position: relative; z-index: 2; width: 45px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.listen-button strong, .listen-button small { position: relative; z-index: 2; display: block; }
.listen-button strong { font-size: 16px; }.listen-button small { margin-top: 2px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 750; }
.sound-rings { position: absolute; left: 33px; top: 39px; }
.sound-rings i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%); }
.listen-button.is-speaking .sound-rings i { animation: sound-ring 1.2s ease-out infinite; }
.listen-button.is-speaking .sound-rings i:nth-child(2) { animation-delay: .22s; }.listen-button.is-speaking .sound-rings i:nth-child(3) { animation-delay: .44s; }
.fallback-clue { max-width: 530px; min-height: 36px; margin: -2px 0 10px; padding: 8px 14px; border-radius: 12px; color: #705d2f; background: #fff1bd; font-size: 12px; font-weight: 750; text-align: center; }

.word-slots { min-height: 79px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.letter-slot { position: relative; width: 58px; height: 67px; display: grid; place-items: center; padding: 0; border: 0; border-bottom: 5px solid #b4a77e; border-radius: 13px 13px 7px 7px; color: var(--ink); background: rgba(238,230,204,.62); font-size: 30px; font-weight: 950; cursor: pointer; text-transform: uppercase; transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out; }
.letter-slot.is-filled { border: 2px solid #d2a42e; border-bottom: 6px solid #b97b15; background: linear-gradient(150deg,#fff7c9,#f6c84d); box-shadow: 0 6px 0 rgba(128,81,8,.13); }
.letter-slot.is-wrong { border-color: var(--coral); background: #ffe0d7; animation: wrong-pulse 420ms ease-out; }
.letter-slot.is-tricky { border-color: var(--teal); background: #d9f3ec; transform: translateY(-5px) rotate(-1deg); }
.letter-slot.is-drop-target { background: #d7f0e5; border-color: var(--teal); transform: translateY(-3px); }

.tile-tray { min-height: 76px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 14px; border-radius: 20px; background: rgba(224,215,181,.34); box-shadow: inset 0 2px 8px rgba(88,73,30,.06); }
.letter-tile { width: 57px; height: 57px; padding: 0; border: 2px solid #c99328; border-radius: 15px; color: #4c3514; background: linear-gradient(145deg,#fff6bd,#f6c44c); box-shadow: 0 5px 0 #b97718, 0 10px 16px rgba(108,71,13,.12); font-size: 25px; font-weight: 950; cursor: grab; text-transform: uppercase; transition: transform 130ms ease-out, box-shadow 130ms ease-out, opacity 130ms ease-out; }
.letter-tile:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 #b97718, 0 14px 18px rgba(108,71,13,.14); }
.letter-tile:active, .letter-tile.is-dragging { cursor: grabbing; transform: translateY(3px) scale(1.05); box-shadow: 0 2px 0 #b97718; }
.letter-tile.is-used { opacity: .16; pointer-events: none; transform: scale(.88); box-shadow: none; }

.feedback { min-height: 31px; max-width: 560px; margin: 10px 0 0; color: var(--coral); font-size: 13px; font-weight: 850; line-height: 1.35; text-align: center; }
.feedback.is-good { color: var(--teal-dark); }
.action-area { min-height: 62px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-top: auto; }
.primary, .explain-choice { min-height: 54px; border-radius: 16px; font-weight: 950; cursor: pointer; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.primary { width: min(350px,100%); padding: 12px 22px; border: 2px solid #b56116; color: white; background: linear-gradient(180deg,#ee8441,var(--coral)); box-shadow: 0 6px 0 #a94e13, 0 12px 24px rgba(178,77,25,.17); font-size: 16px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a94e13, 0 14px 26px rgba(178,77,25,.19); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #a94e13; }
.primary:disabled { cursor: not-allowed; opacity: .4; transform: none; box-shadow: 0 3px 0 #a94e13; }
.explain-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.explain-choice { padding: 10px 14px; border: 2px solid #d8ccaa; color: var(--ink); background: white; box-shadow: 0 4px 0 #d8ccaa; font-size: 12px; }
.explain-choice:hover { border-color: var(--teal); background: #eef9f5; transform: translateY(-2px); }

.bee-guide { position: absolute; z-index: 4; left: max(24px, calc(50% - 680px)); bottom: 34px; width: 205px; pointer-events: none; transform-origin: 50% 100%; }
.sticker-art { overflow: hidden; padding: 8px; border: 1px solid rgba(91,67,14,.13); border-radius: 28px; background: #fffdf5; box-shadow: 0 13px 34px rgba(63,53,19,.17); }
.sticker-art img { display: block; width: 100%; border-radius: 20px; }
.bee-guide p { position: absolute; top: -20px; left: 150px; width: 165px; margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 5px; color: var(--teal-dark); background: rgba(255,254,246,.96); box-shadow: 0 10px 28px rgba(64,53,17,.14); font-size: 12px; font-weight: 850; line-height: 1.3; }
.bee-guide.is-happy { animation: bee-pop 620ms cubic-bezier(.2,.85,.25,1.2); }.bee-guide.is-oops { animation: bee-wobble 350ms ease-out; }
.hive-progress { position: absolute; z-index: 3; right: max(28px, calc(50% - 680px)); bottom: 38px; width: 178px; pointer-events: none; transform: rotate(2deg); }
.hive-progress .sticker-art { opacity: .94; }
.honey-jar { position: absolute; right: -12px; bottom: -14px; width: 78px; height: 93px; overflow: hidden; border: 4px solid rgba(108,68,12,.7); border-radius: 15px 15px 23px 23px; background: rgba(255,253,235,.85); box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 9px 20px rgba(68,50,14,.16); }
.honey-jar i { position: absolute; left: 0; right: 0; bottom: 0; height: 5%; background: linear-gradient(#ffc928,#eaa113); transition: height 320ms ease-out; }
.honey-jar span { position: absolute; left: 5px; right: 5px; top: 34px; color: #714512; font-size: 7px; font-weight: 950; letter-spacing: .04em; text-align: center; }

.spelling-board.is-miss { animation: board-shake 320ms ease-out; }
.honey-drips { position: absolute; z-index: 20; left: 50%; top: 48%; pointer-events: none; }
.honey-drips i { position: absolute; width: 13px; height: 20px; opacity: 0; border-radius: 60% 40% 65% 35%; background: var(--honey); }
.honey-drips.is-showing i { animation: honey-burst 760ms ease-out forwards; }
.honey-drips i:nth-child(1){--x:-230px;--y:-170px}.honey-drips i:nth-child(2){--x:-135px;--y:-230px;animation-delay:40ms}.honey-drips i:nth-child(3){--x:-30px;--y:-210px;animation-delay:80ms}.honey-drips i:nth-child(4){--x:85px;--y:-235px;animation-delay:120ms}.honey-drips i:nth-child(5){--x:175px;--y:-175px;animation-delay:160ms}.honey-drips i:nth-child(6){--x:240px;--y:-95px;animation-delay:200ms}
.toast { position: absolute; z-index: 40; left: 50%; bottom: 27px; max-width: 460px; padding: 10px 18px; border-radius: 999px; color: white; background: #293f37; box-shadow: 0 12px 30px rgba(33,49,42,.2); opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: opacity 160ms ease-out, transform 160ms ease-out; font-size: 12px; font-weight: 850; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes sound-ring { 0%{opacity:.6;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)} }
@keyframes wrong-pulse { 30%{transform:translateX(-5px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)} }
@keyframes board-shake { 0%,100%{transform:translateX(-50%)}30%{transform:translateX(calc(-50% - 7px))}70%{transform:translateX(calc(-50% + 7px))} }
@keyframes bee-pop { 0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-22px) rotate(-4deg)}68%{transform:translateY(0) rotate(3deg)} }
@keyframes bee-wobble { 30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)} }
@keyframes honey-burst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(300deg) scale(1.2)} }

@media (max-width: 1220px) {
  .spelling-board { width: min(690px, calc(100% - 390px)); min-width: 630px; padding-inline: 38px; }
  .bee-guide { left: 17px; width: 145px; }.bee-guide p { top: -38px; left: 10px; width: 155px; border-radius: 16px 16px 5px 16px; }
  .hive-progress { right: 18px; width: 135px; }.honey-jar { width: 65px; height: 80px; }
}

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