:root {
  color-scheme: light;
  --ink: #294f4c;
  --muted: #6c807a;
  --paper: #fffdf7;
  --cream: #f7efd9;
  --green: #4a9b73;
  --green-dark: #34775c;
  --yellow: #efb63e;
  --coral: #ed7467;
  --blue: #58a8d2;
  --purple: #8971b8;
  --shadow: 0 18px 42px rgba(74,62,38,.12), 0 5px 0 rgba(151,124,71,.13);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 0; background: var(--cream); }
body { margin: 0; min-width: 0; color: var(--ink); background: radial-gradient(circle at 17px 17px, rgba(255,255,255,.72) 0 2px, transparent 2.5px) 0 0 / 34px 34px, linear-gradient(145deg,#fbf4de,#f2e5c3); }
button { font: inherit; }
button:focus-visible { outline: 4px solid rgba(88,168,210,.42); outline-offset: 3px; }
.app { width: min(1120px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 20px 0 48px; }
.paper-card { border: 2px solid rgba(188,161,103,.36); border-radius: 38px; background: rgba(255,253,247,.96); box-shadow: var(--shadow); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: var(--purple); border: 4px solid #fff8e8; border-radius: 18px; box-shadow: 0 5px 0 rgba(76,59,123,.22); transform: rotate(-3deg); }
.brand-mark svg { width: 31px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand b { display: block; font-size: 20px; letter-spacing: -.35px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; gap: 8px; }
.top-button { min-height: 46px; padding: 10px 16px; border: 2px solid rgba(134,119,83,.19); border-radius: 15px; background: rgba(255,253,247,.78); color: var(--ink); font-weight: 900; cursor: pointer; }
.top-button span { margin-left: 5px; color: var(--green-dark); }
.top-button:hover,.top-button.is-active { border-color: rgba(137,113,184,.5); background: #fff; transform: translateY(-1px); }
.eyebrow { margin: 0 0 8px; color: #9d6b1b; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
h1,h2,h3,p { overflow-wrap: anywhere; }
h1,h2,h3 { margin-top: 0; color: #214b49; letter-spacing: -.8px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; border: 0; border-radius: 16px; font-weight: 900; cursor: pointer; transition: transform .15s ease,background .15s ease,box-shadow .15s ease; }
.button svg,.card-link svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.button.primary { color: #fff; background: var(--green); box-shadow: 0 6px 0 var(--green-dark); }
.button.primary:hover { background: #418b68; transform: translateY(-2px); }
.button.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--green-dark); }
.button.secondary { color: var(--ink); border: 2px solid #d8cbaa; background: #fffaf0; box-shadow: 0 4px 0 #dfd2b2; }
.button.secondary:hover { background: #fff; transform: translateY(-2px); }
.button.hint { color: #654814; background: #ffe39a; box-shadow: 0 5px 0 #d5a335; }
.button.hint:hover { background: #ffda73; transform: translateY(-2px); }
.button:disabled { opacity: .56; cursor: default; transform: none !important; }

.hero { min-height: 470px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); overflow: hidden; }
.hero-copy { padding: 58px 25px 45px 56px; }
.hero h1 { max-width: 650px; margin-bottom: 17px; font-size: clamp(40px,5vw,63px); line-height: .98; }
.hero-text { max-width: 610px; margin: 0; color: #58716d; font-size: 19px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats { display: flex; gap: 25px; margin: 34px 0 0; padding: 0; list-style: none; }
.hero-stats li { display: flex; align-items: baseline; gap: 6px; }
.hero-stats b { color: var(--coral); font: 900 28px Georgia,serif; }
.hero-stats span { color: var(--muted); font-size: 14px; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 470px; padding: 32px 24px 82px; background: linear-gradient(155deg,#e8e1f0 0 66%,#f4cf83 66%); overflow: hidden; }
.hero-scenes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; width: 100%; }
.big-arrow { color: var(--coral); font-size: 34px; font-weight: 900; }
.animal-scene { min-width: 0; position: relative; height: 210px; border-radius: 50% 45% 48% 44%; background: #fff7dc; overflow: hidden; }
.scene-sun { position: absolute; inset: -20%; opacity: .5; background: repeating-conic-gradient(from -9deg,rgba(239,182,62,.3) 0 12deg,transparent 12deg 25deg); }
.animal-scene img { position: absolute; z-index: 1; width: 90%; height: 86%; left: 5%; top: 2%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(45,53,38,.16)); }
.animal-scene b { position: absolute; z-index: 3; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 5px 9px; border: 2px solid #fff; border-radius: 8px; color: #fff; background: var(--coral); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.many-scene img { width: 58%; height: 60%; top: calc(18% + var(--animal) * 7%); left: calc(-3% + var(--animal) * 23%); }
.many-scene img:nth-of-type(2) { transform: scaleX(-1); }
.many-scene.waiting img { opacity: .23; filter: grayscale(1); }
.many-scene.waiting b { background: #8c9d98; }
.transformation { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 13px 17px; border: 3px solid #fff8e9; border-radius: 17px; background: rgba(255,253,247,.95); box-shadow: 0 7px 0 rgba(92,71,41,.14); }
.hero-art > .transformation { position: absolute; left: 7%; right: 7%; bottom: 6%; }
.transformation span,.transformation strong { font-size: 21px; letter-spacing: 1px; }
.transformation i { color: var(--coral); font-size: 25px; font-style: normal; }
.transformation strong { color: var(--ink); }
.transformation em { padding: 2px 5px; border-radius: 7px; color: #fff; background: var(--coral); font-style: normal; }
.transformation small { padding: 4px 7px; border-radius: 7px; color: #fff; background: var(--purple); font-size: 10px; font-weight: 900; text-transform: uppercase; }

.how { display: grid; grid-template-columns: .8fr 2.2fr; align-items: center; gap: 27px; margin-top: 22px; padding: 29px 35px; }
.how h2 { margin-bottom: 0; font-size: 28px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.steps article { min-width: 0; position: relative; padding: 16px 12px 14px 52px; border: 2px dashed #dfd0ad; border-radius: 17px; background: #fff9eb; }
.steps article > span { position: absolute; left: 11px; top: 15px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font: 900 17px Georgia,serif; }
.steps b { display: block; margin-bottom: 3px; }
.steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.section-heading { margin: 35px 0 19px; }
.section-heading h2 { margin-bottom: 0; font-size: 31px; }
.level-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.level-card { min-width: 0; min-height: 360px; position: relative; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 2px solid rgba(97,76,39,.16); border-radius: 29px; box-shadow: 0 11px 0 rgba(104,82,40,.13); }
.level-card.coral { background: #fde2da; }
.level-card.blue { background: #deedf2; }
.level-card.green { background: #e2eddc; }
.level-number { position: absolute; right: 16px; top: 7px; color: rgba(39,78,74,.13); font: 900 86px Georgia,serif; line-height: 1; }
.level-card > p { position: relative; margin: 2px 0 6px; color: #8b744d; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.level-card h3 { position: relative; margin-bottom: 7px; font-size: 27px; }
.level-note { position: relative; color: #607570; line-height: 1.4; }
.level-card .transformation { min-height: 83px; margin: 24px 0 19px; padding: 11px 9px; }
.transformation.compact span,.transformation.compact strong { font-size: 16px; }
.transformation.compact i { font-size: 20px; }
.level-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; color: #5f736f; font-size: 13px; font-weight: 900; }
.level-meta span:last-child { color: #af791c; }
.card-link { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; margin-top: 14px; padding: 11px 15px; border: 0; border-radius: 14px; color: #fff; background: var(--green); font-weight: 900; cursor: pointer; }
.card-link:hover { background: var(--green-dark); transform: translateY(-1px); }
.grownup-note { max-width: 850px; margin: 28px auto 0; color: var(--muted); text-align: center; line-height: 1.55; }

.game-shell { padding: 26px 30px 32px; }
.game-topline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.round-button { width: 48px; height: 48px; border: 2px solid #dbcdaa; border-radius: 16px; background: #fff9e9; color: var(--ink); font-size: 36px; line-height: 1; cursor: pointer; }
.round-button:hover { background: #fff; transform: translateX(-2px); }
.progress-copy span { display: block; color: #a27425; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; }
.progress-copy b { display: block; margin-top: 3px; }
.progress-count { display: flex; align-items: baseline; gap: 4px; color: #788984; }
.progress-count b { color: var(--coral); font: 900 28px Georgia,serif; }
.progress-track { height: 8px; margin: 15px 0 24px 62px; border-radius: 9px; background: #ede4cc; overflow: hidden; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--yellow),var(--coral)); }
.challenge { display: grid; grid-template-columns: minmax(380px,.9fr) minmax(0,1.1fr); gap: 28px; }
.picture-board { min-width: 0; padding: 18px; border-radius: 29px; background: #eee9f3; }
.scene-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; }
.scene-row .animal-scene { height: 230px; }
.scene-arrow { color: var(--coral); font-size: 31px; font-weight: 900; }
.singular-strip { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 12px; padding: 11px; border-radius: 15px; background: #fffdf7; }
.singular-strip small { color: var(--muted); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.singular-strip strong { color: var(--ink); font-size: 28px; letter-spacing: 1px; }
.choice-panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 13px 2px; }
.choice-panel h1 { margin-bottom: 20px; font-size: clamp(32px,4vw,45px); }
.options-grid { display: grid; gap: 10px; }
.options-grid.count-3 { grid-template-columns: repeat(3,1fr); }
.options-grid.count-4,.options-grid.count-5 { grid-template-columns: repeat(2,1fr); }
.options-grid.count-5 .word-option:last-child { grid-column: 1 / -1; }
.word-option { min-width: 0; min-height: 88px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 9px; border: 3px solid #fff; border-radius: 19px; color: var(--ink); background: #fff7e6; box-shadow: 0 6px 0 #d9c69d; cursor: pointer; }
.word-option > span { position: absolute; left: 8px; top: 8px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #a5b4af; font-size: 11px; font-weight: 900; }
.word-option b { font-size: clamp(18px,2vw,24px); letter-spacing: .5px; }
.word-option small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.word-option:hover { background: #fff; transform: translateY(-3px); }
.word-option.wrong { color: #913f3a; background: #fde0da; box-shadow: 0 6px 0 #d58b82; animation: nudge .34s ease; }
.word-option.wrong > span { background: var(--coral); }
.word-option.correct { color: #2c7054; background: #dff2e5; box-shadow: 0 6px 0 #8bc4a3; }
.word-option.correct > span { background: var(--green); }
.message { min-height: 59px; display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 11px 14px; border-radius: 16px; color: #60736f; background: #f5f0e4; }
.message > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #98aaa4; font-weight: 900; }
.message p { margin: 0; line-height: 1.35; }
.message.error { color: #874a43; background: #fde2dd; }
.message.error > span { background: var(--coral); }
.message.hinted { color: #745519; background: #fff0c2; }
.message.hinted > span { background: var(--yellow); }
.message.success { color: #2f7256; background: #dff2e5; }
.message.success > span { background: var(--green); }
.hint-box { min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
.hint-box.visible { min-height: 67px; margin: 11px 0 14px; padding: 10px 13px; border: 2px dashed #dfbd61; border-radius: 14px; background: #fff8df; }
.hint-box b { color: #9a6b18; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.hint-box p { margin: 3px 0 0; color: #695528; line-height: 1.35; }
.choice-panel > .hint { align-self: flex-start; margin-top: 14px; }
.hint-box.visible + .hint { margin-top: 0; }

.success-panel { display: grid; grid-template-columns: minmax(200px,.8fr) minmax(240px,.9fr) 200px auto; align-items: center; gap: 22px; margin-top: 22px; padding: 24px 27px; overflow: hidden; }
.success-copy h2 { margin-bottom: 5px; font-size: 31px; }
.success-copy p { margin: 0 0 5px; color: var(--muted); line-height: 1.4; }
.success-copy small { color: #7b8d87; line-height: 1.35; }
.success-panel .transformation { padding: 12px; }
.success-family { position: relative; height: 125px; }
.success-family img { position: absolute; width: 125px; height: 120px; left: -5px; top: 0; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(42,53,39,.15)); }
.success-family img:nth-child(2) { width: 87px; height: 87px; left: 78px; top: 28px; }
.success-family img:nth-child(3) { width: 73px; height: 73px; left: 120px; top: 4px; transform: scaleX(-1); }

.result { min-height: 520px; display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; }
.result-art { position: relative; display: grid; place-items: center; padding: 36px; background: #e8e1f0; }
.result-art .animal-scene { width: min(390px,95%); height: 390px; }
.result-stamp { position: absolute; right: 7%; bottom: 11%; padding: 10px 15px; border: 3px solid #fff; border-radius: 9px; color: #fff; background: var(--coral); font-weight: 900; transform: rotate(-4deg); }
.result-copy { align-self: center; padding: 46px 44px; }
.result-copy h1 { margin-bottom: 9px; font-size: clamp(38px,5vw,57px); line-height: 1.02; }
.result-copy > p { color: var(--muted); font-size: 18px; line-height: 1.5; }
.stars { display: flex; gap: 7px; margin: 15px 0; }
.stars span { color: #e0d8c3; font-size: 46px; text-shadow: 0 3px 0 #c4baa0; }
.stars span.earned { color: var(--yellow); text-shadow: 0 3px 0 #c28720; }
.result dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 22px 0; }
.result dl div { padding: 12px; border-radius: 14px; background: #f6f0e2; text-align: center; }
.result dt { color: var(--muted); font-size: 12px; }
.result dd { margin: 4px 0 0; font: 900 25px Georgia,serif; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.text-button { padding: 8px 4px; border: 0; background: transparent; color: var(--green-dark); font-weight: 900; text-decoration: underline; cursor: pointer; }

.album-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 35px 42px; }
.album-head h1 { margin-bottom: 8px; font-size: 44px; }
.album-head p:last-child { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.5; }
.album-counter { flex: 0 0 auto; width: 140px; height: 140px; display: grid; place-content: center; border: 9px solid #c8b8df; border-radius: 50%; background: #f5f0fa; text-align: center; box-shadow: inset 0 0 0 3px #fff; }
.album-counter b { color: var(--coral); font: 900 40px Georgia,serif; }
.album-counter span { color: var(--muted); font-size: 12px; }
.album-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; margin-top: 22px; }
.album-card { min-width: 0; min-height: 350px; position: relative; display: flex; flex-direction: column; padding: 20px; border: 2px solid rgba(181,155,98,.34); border-radius: 25px; background: #fffdf7; box-shadow: 0 8px 0 rgba(109,90,55,.11); overflow: hidden; }
.album-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; border-top: 2px dashed #e7dac0; }
.page-number { position: absolute; right: 14px; top: 19px; z-index: 2; color: #b29360; font: 900 14px Georgia,serif; }
.album-family { height: 178px; position: relative; margin-top: 13px; border-radius: 50%; background: #eee9f3; overflow: hidden; }
.album-family img { position: absolute; width: 66%; height: 96%; left: 0; top: 0; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(44,54,38,.13)); }
.album-family img:nth-child(2) { width: 43%; height: 61%; left: 50%; top: 38%; }
.album-family img:nth-child(3) { width: 36%; height: 51%; left: 67%; top: 10%; transform: scaleX(-1); }
.album-card .transformation { min-height: 62px; margin: 12px 0 9px; padding: 8px; box-shadow: none; border-color: #eee3ca; }
.album-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.album-card.locked { display: grid; place-content: center; text-align: center; background: rgba(255,253,247,.7); }
.lock-mark { width: 96px; height: 96px; display: grid; place-items: center; margin: 0 auto 15px; border: 3px dashed #cfbea0; border-radius: 50%; color: #c0ae8b; background: #f5efdf; font: 900 43px Georgia,serif; }
.album-actions { display: flex; justify-content: center; margin-top: 28px; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-5px); } 66% { transform: translateX(5px); } }

@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 43px 38px 35px; }
  .hero-art { min-height: 410px; }
  .how { grid-template-columns: 1fr; }
  .level-grid { grid-template-columns: 1fr; }
  .level-card { min-height: 0; }
  .challenge { grid-template-columns: 1fr; }
  .success-panel { grid-template-columns: 1fr 1fr; }
  .success-family { display: none; }
  .success-panel .button { grid-column: 1 / -1; }
  .result { grid-template-columns: 1fr; }
  .result-art { min-height: 400px; }
  .album-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  .app { width: min(100% - 18px,1120px); padding-top: 9px; }
  .topbar { align-items: flex-start; gap: 7px; }
  .brand-mark { width: 45px; height: 45px; border-radius: 15px; }
  .brand b { font-size: 16px; }
  .brand small { display: none; }
  .top-actions { gap: 5px; }
  .top-button { min-height: 44px; padding: 8px 9px; font-size: 13px; }
  .paper-card { border-radius: 26px; }
  .hero-copy { padding: 31px 22px 27px; }
  .hero h1 { font-size: 39px; }
  .hero-text { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-stats { justify-content: space-between; gap: 10px; }
  .hero-stats li { display: block; text-align: center; }
  .hero-stats span { display: block; }
  .hero-art { min-height: 390px; padding: 25px 10px 86px; }
  .animal-scene { height: 165px; }
  .hero-art > .transformation { left: 3%; right: 3%; }
  .transformation span,.transformation strong { font-size: 17px; }
  .how { padding: 24px 17px; }
  .how h2 { font-size: 24px; }
  .steps { grid-template-columns: 1fr; }
  .level-card { padding: 23px 19px; }
  .game-shell { padding: 18px 11px 22px; }
  .game-topline { gap: 9px; }
  .progress-copy b { font-size: 14px; }
  .progress-track { margin-left: 0; }
  .picture-board { padding: 10px; }
  .scene-row .animal-scene { height: 185px; }
  .animal-scene b { font-size: 9px; }
  .singular-strip strong { font-size: 25px; }
  .choice-panel { padding-top: 20px; }
  .choice-panel h1 { font-size: 30px; }
  .options-grid.count-3,.options-grid.count-4,.options-grid.count-5 { grid-template-columns: 1fr 1fr; }
  .options-grid.count-5 .word-option:last-child { grid-column: 1 / -1; }
  .word-option { min-height: 79px; }
  .word-option b { font-size: 18px; }
  .message { font-size: 14px; }
  .choice-panel > .hint { width: 100%; }
  .success-panel { grid-template-columns: 1fr; padding: 23px 17px; text-align: center; }
  .success-panel .button { grid-column: auto; width: 100%; }
  .success-panel .transformation { flex-wrap: wrap; }
  .result-art { min-height: 345px; padding: 25px; }
  .result-art .animal-scene { width: min(300px,90vw); height: 300px; }
  .result-copy { padding: 34px 21px; }
  .result-copy h1 { font-size: 39px; }
  .result dl { gap: 5px; }
  .result dl div { padding: 9px 5px; }
  .result dt { font-size: 10px; }
  .result-actions .button,.result-actions .text-button { width: 100%; }
  .album-head { align-items: flex-start; padding: 28px 20px; }
  .album-head h1 { font-size: 34px; }
  .album-counter { width: 94px; height: 94px; border-width: 6px; }
  .album-counter b { font-size: 30px; }
  .album-counter span { font-size: 9px; }
  .album-grid { grid-template-columns: 1fr; gap: 13px; }
  .album-card { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }