:root{color-scheme:light;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;--ink:#304c49;--muted:#71817d;--paper:#fffdf8;--line:#ddd4b8;--green:#58a77a;--gold:#e1a34e;--coral:#df725e;--purple:#8875af;--shadow:0 19px 46px rgba(58,75,68,.14)}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#f2f7ed}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);background:radial-gradient(circle at 8% 11%,rgba(225,163,78,.2) 0 145px,transparent 147px),radial-gradient(circle at 95% 30%,rgba(103,159,190,.13) 0 175px,transparent 177px),linear-gradient(145deg,#f1f7ec,#fff8ed 55%,#f2eef9)}body:before{position:fixed;inset:0;z-index:-1;opacity:.12;background-image:radial-gradient(#738e86 1.2px,transparent 1.2px);background-size:29px 29px;content:""}button{color:inherit;font:inherit}button:not(:disabled){cursor:pointer}button:focus-visible{outline:4px solid rgba(225,163,78,.72);outline-offset:4px}h1,h2,p{margin-top:0}.app{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:20px 0 48px}.loading-card{display:grid;min-height:320px;place-items:center;align-content:center;gap:12px;margin-top:60px;background:var(--paper);border:3px solid var(--line);border-radius:42px;box-shadow:var(--shadow)}.loading-card span{font-size:64px}.loading-card p{color:var(--muted);font-weight:900}.topbar,.brand,.top-actions,.section-heading,.game-head,.question-head,.feedback,.animal-note{display:flex;align-items:center}.topbar{min-height:68px;justify-content:space-between;gap:16px;margin-bottom:20px}.brand{gap:12px;padding:0;text-align:left;background:none;border:0}.brand-mark{display:grid;width:56px;height:56px;place-items:center;font-size:29px;background:#fff0c8;border:3px solid #dac790;border-radius:19px;box-shadow:0 7px 16px rgba(65,84,76,.12);transform:rotate(-4deg)}.brand strong,.brand small{display:block}.brand strong{font-size:23px;font-weight:900}.brand small{margin-top:3px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.top-actions{gap:10px}.top-stars{color:var(--coral);font-size:23px}.sound-button,.back-button{min-width:48px;min-height:48px;font-weight:900;background:rgba(255,253,248,.95);border:2px solid var(--line);border-radius:17px}.sound-button{display:flex;align-items:center;gap:8px;padding:0 16px;font-size:13px}.back-button{padding:0;font-size:22px}.eyebrow{margin:0 0 8px;color:#3d7e64;font-family:Georgia,serif;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.primary-button,.secondary-button,.hint-button{min-width:44px;min-height:52px;border-radius:17px;font-weight:900}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;color:white;background:#409775;border:0;box-shadow:0 8px 0 #2e795e}.primary-button:active{transform:translateY(4px);box-shadow:0 4px 0 #2e795e}.primary-button.compact{min-height:46px;box-shadow:none}.secondary-button{padding:0 20px;background:white;border:2px solid var(--line)}.hint-button{padding:0 17px;background:#fff1c5;border:2px solid #dbc36e}
.hero{display:grid;min-height:520px;align-items:center;grid-template-columns:1.05fr .95fr;gap:45px;padding:clamp(40px,6vw,68px);overflow:hidden;background:rgba(255,253,248,.97);border:3px solid var(--line);border-radius:46px;box-shadow:var(--shadow)}.hero h1{max-width:620px;margin-bottom:19px;font-size:clamp(47px,5.6vw,67px);font-weight:900;letter-spacing:-.055em;line-height:.98}.hero-copy>p:not(.eyebrow){max-width:560px;margin-bottom:27px;color:var(--muted);font-size:18px;font-weight:800;line-height:1.52}.hero-facts{display:flex;flex-wrap:wrap;gap:18px;margin-top:29px}.hero-facts span{color:var(--muted);font-size:13px;font-weight:900}.hero-facts strong{margin-right:4px;color:var(--ink);font-size:24px}.hero-art{min-height:390px}.hero-stage{position:relative;height:380px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#fff4bd 0 28%,#554271 65%);border:4px solid #483b54;border-radius:30px 30px 12px 12px;box-shadow:14px 15px 0 rgba(62,78,71,.13)}.hero-stage:after{position:absolute;right:0;bottom:0;left:0;height:54px;background:#a76e4f;content:""}.hero-stage img{position:absolute;right:27px;bottom:34px;z-index:3;width:190px;height:190px;object-fit:contain}.curtain{position:absolute;top:0;bottom:0;z-index:4;width:70px;background:linear-gradient(90deg,#a6404a,#d85f64,#8d3441)}.curtain.left{left:0;border-radius:0 0 80% 0}.curtain.right{right:0;border-radius:0 0 0 80%}.speech-demo{position:absolute;top:75px;left:82px;z-index:3;width:190px;padding:20px;text-align:center;background:white;border:4px solid #473e4e;border-radius:50%}.speech-demo:after{position:absolute;right:20px;bottom:-15px;width:25px;height:25px;background:white;border-right:4px solid #473e4e;border-bottom:4px solid #473e4e;content:"";transform:rotate(45deg)}.speech-demo b,.speech-demo span{display:block}.speech-demo b{font-size:20px}.speech-demo span{margin-top:9px;font-size:28px}.stage-light{position:absolute;top:-15px;left:50%;width:250px;height:360px;background:rgba(255,242,172,.2);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);transform:translateX(-50%)}
.how-section,.levels-section{margin-top:30px;padding:38px;background:rgba(255,253,248,.84);border:2px solid rgba(221,212,184,.86);border-radius:36px}.section-heading{justify-content:space-between;gap:30px;margin-bottom:24px}.section-heading h2{margin:0;font-size:31px}.section-heading>p{max-width:440px;margin:0;color:var(--muted);font-size:14px;font-weight:800;text-align:right}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.steps-grid article{display:flex;min-height:112px;align-items:center;gap:15px;padding:19px;background:white;border:2px solid var(--line);border-radius:24px}.steps-grid article>b{display:grid;flex:0 0 42px;height:42px;place-items:center;color:white;background:var(--green);border-radius:14px}.steps-grid strong,.steps-grid small{display:block}.steps-grid strong{margin-bottom:5px;font-size:17px}.steps-grid small{color:var(--muted);font-size:13px;font-weight:800;line-height:1.35}.levels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.level-card{display:flex;min-height:385px;padding:19px;text-align:left;background:white;border:3px solid var(--line);border-radius:29px;box-shadow:0 10px 0 #ded6bc;flex-direction:column}.level-card.green{--card:var(--green)}.level-card.gold{--card:var(--gold)}.level-card.purple{--card:var(--purple)}.level-top{display:flex;align-items:center;justify-content:space-between}.level-top>b{display:grid;width:45px;height:45px;place-items:center;color:white;background:var(--card);border-radius:15px}.level-top small{color:var(--card);font-weight:900}.level-art{position:relative;display:grid;height:140px;place-items:center;margin:14px 0;background:color-mix(in srgb,var(--card) 16%,white);border-radius:22px}.level-art img{width:130px;height:130px;object-fit:contain}.level-art i{position:absolute;top:10px;right:10px;display:grid;width:43px;height:43px;place-items:center;font-size:25px;background:white;border-radius:14px;font-style:normal}.level-copy{flex:1}.level-copy small,.level-copy strong,.level-copy span{display:block}.level-copy small{color:var(--card);font-size:11px;font-weight:900;text-transform:uppercase}.level-copy strong{margin:7px 0;font-size:22px}.level-copy span{color:var(--muted);font-size:14px;font-weight:800;line-height:1.4}.level-go{display:flex;min-height:48px;align-items:center;justify-content:space-between;margin-top:14px;padding:0 15px;color:white;font-weight:900;background:var(--card);border-radius:15px}.animal-note{gap:22px;margin:28px auto 0;padding:17px 27px;background:#e9f2e6;border:2px solid #b9d1b7;border-radius:28px}.animal-note img{width:88px;height:88px;object-fit:contain}.animal-note strong,.animal-note span{display:block}.animal-note strong{margin-bottom:5px;font-size:18px}.animal-note span{color:var(--muted);font-size:14px;font-weight:800;line-height:1.4}
.game-shell{padding:clamp(22px,3.5vw,39px);background:var(--paper);border:3px solid var(--line);border-radius:40px;box-shadow:var(--shadow)}.game-head{justify-content:space-between;gap:24px}.game-head h1{margin-bottom:7px;font-size:clamp(37px,5vw,54px);letter-spacing:-.045em;line-height:1}.game-head>div:first-child>p:last-child{margin:0;color:var(--muted);font-weight:900}.round-badge{display:grid;flex:0 0 82px;height:82px;place-items:center;align-content:center;color:white;background:var(--accent);border:7px solid color-mix(in srgb,var(--accent) 24%,white);border-radius:50%}.round-badge strong{font-size:25px;line-height:1}.round-badge span{font-size:10px;font-weight:900}.progress-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px 0 18px}.progress-dots span{height:8px;background:#e8e3d4;border-radius:8px}.progress-dots .done{background:var(--green)}.progress-dots .current{background:var(--accent)}.stage-workspace{display:grid;align-items:start;grid-template-columns:minmax(320px,.82fr) minmax(430px,1.18fr);gap:18px}.actor-stage,.action-panel{min-width:0;border:3px solid var(--line);border-radius:28px}.actor-stage{position:relative;min-height:520px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#fff2ba 0 25%,#6a567b 68%);border-color:#4e4456}.actor-stage:after{position:absolute;right:0;bottom:0;left:0;height:80px;background:#a56d50;content:""}.stage-curtain{position:absolute;top:0;bottom:0;z-index:4;width:53px;background:linear-gradient(90deg,#963d48,#d65d62,#85333e)}.stage-curtain.left{left:0;border-radius:0 0 90% 0}.stage-curtain.right{right:0;border-radius:0 0 0 90%}.actor-stage img{position:absolute;bottom:52px;left:50%;z-index:2;width:245px;height:245px;object-fit:contain;transform:translateX(-50%)}.actor-name{position:absolute;bottom:24px;left:50%;z-index:5;padding:6px 12px;background:white;border-radius:10px;transform:translateX(-50%)}.scene-context{position:absolute;top:20px;right:66px;left:66px;z-index:5;padding:12px 15px;background:rgba(255,255,255,.94);border-radius:17px}.scene-context small{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}.scene-context p{margin:4px 0 0;font-size:13px;font-weight:800;line-height:1.35}.phrase-bubble{position:absolute;top:155px;left:50%;z-index:5;width:min(250px,70%);padding:15px;text-align:center;font-size:18px;font-weight:900;background:white;border:4px solid #493f50;border-radius:50%;transform:translateX(-50%)}.phrase-bubble:after{position:absolute;right:35px;bottom:-13px;width:22px;height:22px;background:white;border-right:4px solid #493f50;border-bottom:4px solid #493f50;content:"";transform:rotate(45deg)}.action-panel{padding:22px;background:#fffaf0;border-color:#e3d6ad}.instruction-card{display:flex;align-items:center;gap:13px;padding:14px;background:#f0eee5;border-radius:18px}.instruction-card>span{display:grid;flex:0 0 50px;height:50px;place-items:center;font-size:28px;background:white;border-radius:15px}.instruction-card p{margin:0}.instruction-card strong,.instruction-card p>span{display:block}.instruction-card p>span{margin-top:3px;color:var(--muted);font-size:13px;font-weight:800;line-height:1.35}.perform-box{display:grid;min-height:335px;place-items:center;align-content:center;text-align:center}.perform-box p{margin-bottom:9px;color:var(--muted);font-weight:900}.perform-box blockquote{margin:0 0 25px;font-family:Georgia,serif;font-size:clamp(27px,4vw,40px);font-weight:900;line-height:1.25}.perform-box small{margin-top:15px;color:var(--muted);font-weight:800}.question-head{justify-content:space-between;gap:15px;margin:20px 0 13px}.question-head h2{margin:0;font-size:26px}.answer-list{display:grid;gap:10px}.answer-list button{display:grid;min-height:72px;align-items:center;grid-template-columns:42px 1fr;gap:12px;padding:11px 15px;text-align:left;background:white;border:3px solid #ded7bf;border-radius:18px;box-shadow:0 5px 0 #ddd5bc}.answer-list button>span{display:grid;width:38px;height:38px;place-items:center;color:white;font-weight:900;background:#728b84;border-radius:12px}.answer-list strong{font-size:14px;line-height:1.35}.answer-list button.wrong{color:#92564d;background:#fff0ec;border-color:#df8b7f;box-shadow:none}.answer-list button.correct{background:#e8f4e9;border-color:var(--green);box-shadow:none}.answer-list button.hinted{border-color:var(--gold);box-shadow:0 0 0 5px rgba(225,163,78,.23)}.feedback{min-height:82px;gap:12px;margin-top:15px;padding:12px 14px;background:#eef4eb;border:2px solid #c7d7c2;border-radius:19px}.feedback>span{display:grid;flex:0 0 43px;height:43px;place-items:center;background:white;border-radius:13px}.feedback p{flex:1;margin:0}.feedback strong,.feedback small{display:block}.feedback small{margin-top:2px;color:var(--muted);font-weight:800;line-height:1.35}.feedback.retry{background:#fff0ec;border-color:#e2a299}.feedback.success{background:#e8f4e9;border-color:#9fc5a8}.feedback .primary-button{margin-left:auto}
.result-card{max-width:880px;margin:35px auto;padding:clamp(28px,4.5vw,50px);text-align:center;background:var(--paper);border:3px solid var(--line);border-radius:42px;box-shadow:var(--shadow)}.result-art{position:relative;width:155px;height:140px;margin:auto}.result-art img{width:150px;height:150px;object-fit:contain}.result-art span{position:absolute;top:0;right:-10px;display:grid;width:45px;height:45px;place-items:center;background:#fff0c6;border-radius:50%}.result-card h1{margin-bottom:12px;font-size:clamp(39px,5vw,56px);letter-spacing:-.045em}.result-card>p:not(.eyebrow){color:var(--muted);font-weight:800}.result-stars{margin:16px 0;color:var(--gold);font-size:36px;letter-spacing:5px}.result-stars span{color:#ddd6c1}.emotion-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.emotion-strip>span{display:grid;min-width:0;min-height:100px;place-items:center;align-content:center;padding:9px;font-size:32px;background:#f3f1e7;border-radius:17px}.emotion-strip small{display:-webkit-box;margin-top:5px;overflow:hidden;color:var(--muted);font-size:10px;font-weight:800;-webkit-box-orient:vertical;-webkit-line-clamp:2}.result-stats,.result-actions{display:flex;justify-content:center;gap:13px}.result-stats{margin:22px 0}.result-stats>span{min-width:125px;padding:12px;background:#f0f4eb;border-radius:17px}.result-stats strong,.result-stats small{display:block}.result-stats strong{font-size:25px}.result-stats small{color:var(--muted);font-weight:800}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p,.hero h1{margin-right:auto;margin-left:auto}.hero-facts{justify-content:center}.hero-art{width:min(100%,520px);margin:auto}.steps-grid,.levels-grid{grid-template-columns:1fr}.stage-workspace{grid-template-columns:1fr}.actor-stage{min-height:470px}}
@media(max-width:700px){.app{width:min(100% - 20px,1120px);padding-top:10px}.topbar{min-height:58px;margin-bottom:10px}.brand-mark{width:48px;height:48px;font-size:24px;border-radius:16px}.brand strong{font-size:17px}.brand small,.sound-button span:last-child,.top-stars{display:none}.sound-button{width:48px;padding:0;justify-content:center}.hero{min-height:0;gap:24px;padding:34px 20px;border-radius:31px}.hero h1{font-size:clamp(39px,12vw,55px)}.hero-copy>p:not(.eyebrow){font-size:16px}.hero-facts{gap:8px}.hero-facts span{padding:8px 9px;background:#f5f3e9;border-radius:12px}.hero-art{min-height:320px}.hero-stage{height:315px}.hero-stage img{right:12px;bottom:28px;width:150px;height:150px}.speech-demo{top:55px;left:48px;width:155px;padding:14px}.how-section,.levels-section{margin-top:18px;padding:24px 15px;border-radius:28px}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.section-heading>p{text-align:left}.animal-note{align-items:flex-start;padding:15px}.animal-note img{width:70px;height:70px}.game-shell{padding:21px 12px;border-radius:29px}.game-head{align-items:flex-start}.game-head h1{font-size:34px}.round-badge{flex-basis:64px;height:64px;border-width:5px}.actor-stage{min-height:430px}.scene-context{right:43px;left:43px}.phrase-bubble{top:155px}.actor-stage img{width:205px;height:205px}.action-panel{padding:15px}.perform-box{min-height:280px}.question-head{align-items:flex-start;flex-direction:column}.hint-button{width:100%}.feedback{align-items:flex-start;flex-wrap:wrap}.feedback .primary-button{width:100%;margin-left:0}.result-card{margin:22px auto;padding:28px 14px;border-radius:29px}.emotion-strip{grid-template-columns:repeat(3,1fr)}.result-stats{flex-wrap:wrap}.result-stats>span{min-width:95px;flex:1}.result-actions{flex-direction:column-reverse}}
@media(max-width:420px){.brand{gap:8px}.brand strong{font-size:15px}.scene-context p{font-size:12px}.phrase-bubble{font-size:16px}.answer-list button{grid-template-columns:36px 1fr;padding:9px}.answer-list button>span{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}