@import url('../portal-assets/fonts.css');
:root { --ink:#244f46; --muted:#667d77; --paper:#fffaf0; --line:#e1d2aa; --coral:#f37461; --green:#3d9d7c; --gold:#f5bd42; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); font-family:"Nunito Sans",Arial,sans-serif; background:#f7f0dc radial-gradient(circle at 13px 13px,rgba(255,255,255,.82) 1.5px,transparent 2px) 0 0/27px 27px; }
button,a { font:inherit; } button { color:inherit; }
.app { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:26px 0 58px; }
.game-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.game-brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:52px; height:52px; border:2px solid #d7c58e; border-radius:17px; background:#ffdf77; box-shadow:0 5px 0 #e5bd4e; font-size:25px; }.game-brand strong,.game-brand small { display:block; }.game-brand strong { font-size:20px; }.game-brand small { margin-top:2px; color:#7b8c86; font-weight:800; }.age-pill { padding:10px 17px; border:2px solid #cbded4; border-radius:999px; background:#fffdf7; font-weight:950; }
.screen { display:none; }.screen.is-active { display:block; }
.hero,.play-card,.result-card,.route-card { border:2px solid var(--line); background:rgba(255,252,245,.97); box-shadow:0 12px 0 rgba(107,87,43,.11); }
.hero { display:grid; grid-template-columns:53% 47%; min-height:540px; overflow:hidden; border-radius:40px; }.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:58px; }.eyebrow,.stage-kicker { margin:0 0 11px; color:#a76a25; font-size:13px; font-weight:950; letter-spacing:.16em; }.hero h1,.play-card h2,.result-card h2,.route-card h3,.animal-stage h3 { font-family:"Lora",Georgia,serif; }.hero h1 { max-width:570px; margin:0 0 22px; font-size:clamp(46px,5.2vw,68px); line-height:1; letter-spacing:-.035em; }.hero-copy>p:not(.eyebrow) { max-width:570px; margin:0 0 31px; color:#5b7671; font-size:20px; line-height:1.55; }.primary,.secondary,.route-body button,.hint-button,.feedback button,.play-actions button { min-height:56px; border:0; border-radius:18px; padding:13px 24px; cursor:pointer; font-weight:950; }.primary { color:#fff; background:var(--coral); box-shadow:0 7px 0 #c9503e; }.primary:hover { transform:translateY(-2px); }.primary:active { transform:translateY(3px); box-shadow:0 3px 0 #c9503e; }
.hero-scene { position:relative; min-height:540px; overflow:hidden; background:linear-gradient(160deg,#d8efec 0 62%,#9bc684 62%); }.hero-path { position:absolute; left:-20%; bottom:-55px; width:96%; height:190px; transform:rotate(-7deg); border-radius:50%; background:#efd18d; }.hero-water { position:absolute; right:-15%; bottom:-30px; width:73%; height:190px; border-radius:52% 0 0; background:repeating-radial-gradient(ellipse at 30% 5%,#65b9c5 0 5px,#8ed0d4 6px 15px); }.hero-cloud { position:absolute; right:30px; top:56px; width:110px; height:35px; border-radius:50px; background:#fff9; }.hero-cloud::before,.hero-cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.hero-cloud::before { left:14px; width:53px; height:53px; }.hero-cloud::after { right:13px; width:40px; height:40px; }.hero-hedgehog,.hero-animal { position:absolute; object-fit:contain; filter:drop-shadow(0 8px 5px rgba(43,64,54,.16)); }.hero-hedgehog { z-index:4; left:1%; bottom:70px; width:210px; height:210px; }.hero-animal--hare { z-index:4; left:36%; bottom:120px; width:190px; height:160px; transform:rotate(-7deg); }.hero-animal--dolphin { z-index:3; right:0; bottom:4px; width:190px; height:160px; }.hero-animal--owl { z-index:3; right:4%; top:66px; width:155px; height:145px; transform:rotate(8deg); }
.rule-card { display:flex; align-items:center; gap:18px; margin:30px 0 62px; padding:22px 28px; border:2px dashed #d7c18a; border-radius:26px; background:rgba(255,252,244,.9); }.rule-card>span { font-size:34px; }.rule-card strong { font-size:19px; }.rule-card p { margin:4px 0 0; color:#667d77; line-height:1.5; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:0 4px 22px; }.section-head h2 { margin:0; font-family:"Lora",Georgia,serif; font-size:43px; }.section-head>p { margin:0 0 6px; color:#657b75; }.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.route-card { overflow:hidden; border-radius:31px; background:var(--route-color); }.route-visual { display:flex; align-items:flex-end; justify-content:center; gap:0; height:220px; padding:22px 15px 6px; background:linear-gradient(155deg,var(--route-color),#fffdf7); }.route-visual img { width:33%; height:145px; object-fit:contain; filter:drop-shadow(0 7px 5px rgba(43,64,54,.15)); }.route-body { min-height:315px; padding:25px; background:#fffdf8; }.route-body h3 { min-height:66px; margin:0 0 12px; font-size:26px; line-height:1.14; }.route-body>p:not(.eyebrow) { min-height:70px; margin:0; color:#657a75; line-height:1.45; }.route-progress { display:block; height:11px; margin:22px 0 16px; overflow:hidden; border-radius:999px; background:#e7eadf; }.route-progress i { display:block; height:100%; border-radius:inherit; background:var(--route-accent); }.route-body button { display:flex; width:100%; align-items:center; justify-content:space-between; color:#fff; background:var(--route-accent); box-shadow:0 6px 0 color-mix(in srgb,var(--route-accent) 75%,#154b3f); }
.play-card { padding:32px; border-radius:38px; }.play-head { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:25px; padding:0 7px; }.play-head h2 { margin:0; font-size:36px; }.round-progress { display:flex; align-items:center; gap:14px; min-width:270px; }.round-progress>span { flex:1; height:12px; overflow:hidden; border-radius:999px; background:#e4eadc; }.round-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#45a888,#58a4c8); }.round-progress b { font-size:19px; }.round-progress em { font-style:normal; }.lesson-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; }.animal-stage { min-width:0; padding:29px; border:2px solid #c9dfd2; border-radius:30px; background:#eef7f0; }.animal-stage h3 { margin:0 0 18px; font-size:clamp(27px,3vw,39px); line-height:1.12; }.animal-portrait { position:relative; display:grid; place-items:center; min-height:290px; margin-bottom:20px; overflow:hidden; border:2px solid #dfd3b1; border-radius:27px; background:linear-gradient(180deg,#fffdf7 0 72%,#dceccb 72%); }.animal-portrait::before { content:""; position:absolute; top:28px; right:42px; width:74px; height:28px; border-radius:50px; background:#dcefed; box-shadow:-320px 38px 0 -5px #e7efdf; }.portrait-ground { position:absolute; bottom:36px; width:62%; height:30px; border-radius:50%; background:rgba(84,119,84,.15); filter:blur(2px); }.animal-portrait img { position:relative; z-index:2; width:min(66%,360px); height:260px; object-fit:contain; filter:drop-shadow(0 9px 6px rgba(45,63,52,.16)); }.answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }.answer-card { display:flex; min-height:112px; align-items:center; justify-content:center; flex-direction:column; gap:6px; border:2px solid #d9d1b9; border-radius:22px; cursor:pointer; background:#fffdf8; box-shadow:0 6px 0 #d5ceb7; transition:transform .16s,border-color .16s; }.answer-card:hover { transform:translateY(-3px); }.answer-card>span { display:grid; place-items:center; width:58px; height:42px; border-radius:15px; color:#fff; background:#63a58c; font-size:29px; font-weight:950; }.movement-jump>span { background:#e89c3d; }.movement-swim>span { background:#4ca6bd; }.movement-fly>span { background:#786db4; }.movement-crawl>span { background:#d1715c; }.movement-climb>span { background:#5d9160; }.answer-card strong { font-size:16px; }.answer-card.is-wrong { border-color:#ef7764; animation:nudge .25s 2; }.answer-card.is-correct { border-color:#2f9a76; background:#daf3e6; box-shadow:0 6px 0 #83baa2; }.answer-card.is-hint { outline:5px solid rgba(245,188,65,.66); outline-offset:2px; }@keyframes nudge { 50% { transform:translateX(5px); } }
.coach-card { display:flex; flex-direction:column; align-items:flex-start; padding:24px; border:2px solid #ead392; border-radius:30px; background:#fff4ce; }.coach-card img { align-self:center; width:150px; height:150px; margin:-3px 0 10px; object-fit:contain; }.coach-card h3 { margin:0 0 9px; font-family:"Lora",Georgia,serif; font-size:24px; }.coach-card>p:not(.eyebrow) { color:#677b75; line-height:1.5; }.hint-button { width:100%; margin-top:auto; border:2px solid #e5c361; background:#fff1b6; box-shadow:0 5px 0 #d3a83b; }.feedback { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-top:22px; padding:18px 20px; border:2px solid #b4d8c4; border-radius:24px; background:#e3f5eb; }.feedback[hidden] { display:none; }.feedback.is-error { border-color:#efad9f; background:#fff0ec; }.feedback.is-hint { border-color:#e9c96f; background:#fff5cd; }.feedback>span { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:#fff; font-size:25px; }.feedback strong { font-size:18px; }.feedback p { margin:4px 0 0; color:#617771; }.feedback button { color:#fff; background:var(--green); box-shadow:0 5px 0 #23775d; }.play-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }.play-actions button { border:2px solid #dccca4; background:#fffdf8; }.play-actions span { color:#75857f; font-size:13px; font-weight:850; }
.result-card { max-width:850px; margin:45px auto; padding:55px; border-radius:40px; text-align:center; }.result-star { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 18px; border-radius:28px; color:#fff; background:#efb836; box-shadow:0 8px 0 #d4981c; font-size:39px; }.result-card h2 { margin:0 0 16px; font-size:45px; }.result-card>p:not(.eyebrow) { color:#607972; font-size:19px; }.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:28px 0; }.result-stats div { padding:18px; border:2px solid #ded3b5; border-radius:22px; background:#fffdf8; }.result-stats b,.result-stats span { display:block; }.result-stats b { font-size:30px; }.result-stats span { color:#71817c; font-size:12px; font-weight:850; }.reward-note { display:flex; align-items:center; gap:18px; padding:18px 22px; border:2px dashed #dbc47d; border-radius:24px; background:#fff4cd; text-align:left; }.reward-note.is-unlocked { border-style:solid; border-color:#8dc6ad; background:#e4f5eb; }.reward-note img { width:100px; height:82px; object-fit:contain; }.reward-note strong,.reward-note small { display:block; }.reward-note small { margin-top:4px; color:#697d76; line-height:1.35; }.result-actions { display:flex; justify-content:center; gap:15px; margin-top:28px; }.secondary { border:2px solid #d9caa4; background:#fffdf8; }
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{padding:48px 40px}.hero-scene{min-height:390px}.route-grid{grid-template-columns:1fr}.route-card{display:grid;grid-template-columns:40% 60%}.route-visual,.route-body{height:auto;min-height:265px}.lesson-layout{grid-template-columns:1fr}.coach-card{display:grid;grid-template-columns:130px 1fr;column-gap:18px}.coach-card img{grid-row:1/5}.hint-button{grid-column:2}.round-progress{min-width:210px}}
@media(max-width:650px){.app{width:min(100% - 18px,1120px);padding-top:14px}.game-head{align-items:flex-start}.game-brand small{display:none}.age-pill{padding:8px 12px;font-size:13px}.hero{border-radius:29px}.hero-copy{padding:38px 25px 42px}.hero-copy>p:not(.eyebrow){font-size:17px}.hero-scene{min-height:330px}.hero-hedgehog{width:155px;height:155px;bottom:57px}.hero-animal--hare{left:31%;bottom:95px;width:135px;height:125px}.hero-animal--dolphin{width:135px;height:120px}.hero-animal--owl{width:110px;height:105px}.rule-card{margin-bottom:42px;padding:18px}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:36px}.route-card{display:block}.route-visual{height:190px;min-height:0}.route-body{min-height:0}.route-body h3,.route-body>p:not(.eyebrow){min-height:0}.play-card{padding:17px;border-radius:28px}.play-head{align-items:flex-start;flex-direction:column}.play-head h2{font-size:30px}.round-progress{width:100%}.animal-stage{padding:17px}.animal-portrait{min-height:235px}.animal-portrait img{height:210px}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-card{min-height:102px}.coach-card{display:block}.coach-card img{display:none}.hint-button{margin-top:15px}.feedback{grid-template-columns:auto 1fr}.feedback button{grid-column:1/-1;width:100%}.play-actions{align-items:flex-start;flex-direction:column}.result-card{padding:36px 20px}.result-card h2{font-size:37px}.result-stats{grid-template-columns:1fr}.result-actions{flex-direction:column}.reward-note img{width:72px}}
@media(max-width:410px){.hero h1{font-size:42px}.hero-copy{padding-inline:20px}.answer-grid{gap:10px}.answer-card{padding:8px}.game-brand strong{max-width:190px;font-size:16px}.animal-stage h3{font-size:26px}}