@import url('../portal-assets/fonts.css');

:root { --ink:#244f46; --muted:#667d77; --paper:#fffaf0; --line:#e3d4ad; --coral:#f37461; --green:#3d9d7c; --gold:#f5bd42; --sky:#cdeae9; }
* { 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,.8) 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:27px; font-weight:950; }
.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,.96); box-shadow:0 12px 0 rgba(107,87,43,.11); }
.hero { display:grid; grid-template-columns:54% 46%; min-height:560px; overflow:hidden; border-radius:40px; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:62px 58px; }
.eyebrow,.stage-kicker { margin:0 0 12px; color:#a76a25; font-size:13px; font-weight:950; letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Lora",Georgia,serif; }
h1 { max-width:650px; margin-bottom:22px; font-size:clamp(48px,6vw,76px); line-height:.97; letter-spacing:-.035em; }
.hero-copy>p:not(.eyebrow) { max-width:580px; margin-bottom:32px; color:#5b7671; font-size:21px; line-height:1.55; }
.primary,.secondary,.route-card button,.feedback button,.hint-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:560px; overflow:hidden; background:linear-gradient(160deg,#d9efed 0 61%,#93c27f 61%); }
.hero-mascot { position:absolute; z-index:4; left:4%; bottom:78px; width:225px; height:225px; object-fit:contain; filter:drop-shadow(0 9px 5px rgba(44,67,53,.18)); }
.scene-road { position:absolute; z-index:1; left:-20px; right:43%; bottom:42px; height:95px; transform:skewY(5deg); background:#7c817d; border-top:10px solid #6fa25f; }
.scene-road::after { content:""; position:absolute; top:40px; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,#fff1bd 0 31px,transparent 31px 58px); }
.scene-water { position:absolute; z-index:1; right:-35px; bottom:0; width:62%; height:165px; border-radius:55% 0 0; background:repeating-radial-gradient(ellipse at 20% 5%,#6db9c2 0 5px,#87cbd0 6px 14px); }
.scene-cloud { position:absolute; width:105px; height:32px; border-radius:999px; background:rgba(255,255,255,.72); }.scene-cloud::before,.scene-cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.scene-cloud::before { left:17px; width:48px; height:48px; }.scene-cloud::after { right:14px; width:37px; height:37px; }
.scene-cloud--one { right:35px; top:83px; }.scene-cloud--two { left:38px; top:40px; transform:scale(.66); }
.scene-toy { position:absolute; z-index:5; object-fit:contain; filter:drop-shadow(0 8px 5px rgba(47,61,50,.18)); }.scene-toy--car { left:30%; bottom:55px; width:150px; height:130px; }.scene-toy--plane { right:7%; top:112px; width:185px; height:150px; transform:rotate(-6deg); }.scene-toy--boat { right:8%; bottom:42px; width:145px; height:145px; }
.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,.88); }.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-size:44px; }.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-card__visual { display:flex; align-items:flex-end; justify-content:center; gap:0; height:225px; padding:24px 18px 5px; background:linear-gradient(155deg,var(--route-color),#fffdf7); }
.route-card__visual img { width:31%; height:145px; object-fit:contain; filter:drop-shadow(0 7px 5px rgba(43,64,54,.15)); }
.route-card__body { min-height:300px; padding:26px; background:#fffdf8; }.route-card__body h3 { min-height:68px; margin-bottom:12px; font-size:26px; line-height:1.15; }.route-card__body>p:not(.eyebrow) { min-height:72px; color:#657a75; line-height:1.45; }
.route-card__footer { display:flex; align-items:center; gap:12px; margin-top:24px; }.route-card__footer button { flex:1; color:#fff; background:var(--route-accent); box-shadow:0 6px 0 color-mix(in srgb,var(--route-accent) 75%,#154b3f); }.route-card__footer span { min-width:52px; font-weight:950; text-align:center; }
.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; }
.travel-stage,.coach-card { border-radius:30px; }.travel-stage { min-width:0; padding:30px; border:2px solid #c9dfd2; background:#eef7f0; }.travel-stage h3 { max-width:760px; margin-bottom:18px; font-size:clamp(28px,3.6vw,43px); line-height:1.12; }.stage-help { margin:14px 0; color:#687d77; font-weight:800; }
.focus-card { display:flex; align-items:center; justify-content:center; gap:22px; min-height:180px; border:2px solid #e0d3ae; border-radius:25px; background:#fffdf8; }.focus-card--place { flex-direction:column; gap:0; }.focus-toy { width:220px; height:135px; object-fit:contain; filter:drop-shadow(0 8px 5px rgba(45,61,52,.15)); }.focus-card strong { font-size:18px; }.focus-card--vehicle { padding:26px 40px; }.focus-card--vehicle p { max-width:390px; margin:0; color:#5f7771; font-size:19px; font-weight:850; line-height:1.4; }.mission-badge,.clue-badge { display:grid; flex:0 0 auto; place-items:center; width:84px; height:84px; border-radius:27px; color:#fff; background:#ef765f; box-shadow:0 7px 0 #c75240; font-family:"Lora",Georgia,serif; font-size:48px; font-weight:950; }.clue-badge { background:#7768af; box-shadow:0 7px 0 #574a89; }
.answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.answer-card { position:relative; display:flex; min-height:155px; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:14px; overflow:hidden; border:2px solid #d9d1b9; border-radius:23px; cursor:pointer; background:#fffdf8; box-shadow:0 6px 0 #d5ceb7; transition:transform .16s,border-color .16s; }.answer-card:hover { transform:translateY(-3px); }.answer-card:disabled { cursor:default; }.answer-card strong { position:relative; z-index:2; font-size:16px; text-align:center; }.toy-answer img { width:100%; height:100px; object-fit:contain; filter:drop-shadow(0 6px 4px rgba(42,62,53,.13)); }.place-scene { position:relative; display:grid; place-items:center; width:100%; height:90px; overflow:hidden; border-radius:17px; font-size:52px; font-weight:900; }.place-answer--road .place-scene { font-size:0; background:linear-gradient(180deg,#ccebef 0 32%,#8fc37f 32% 46%,#e9cf8e 46% 100%); }.place-answer--road .place-scene::before { content:""; position:absolute; left:8%; right:8%; bottom:-1px; height:70%; background:#6e7773; clip-path:polygon(40% 0,60% 0,94% 100%,6% 100%); box-shadow:inset 0 0 0 3px rgba(255,255,255,.12); }.place-answer--road .place-scene::after { content:""; position:absolute; left:50%; bottom:8%; width:9%; height:48%; transform:translateX(-50%); background:repeating-linear-gradient(to bottom,#fff0ae 0 8px,transparent 8px 15px); clip-path:polygon(39% 0,61% 0,100% 100%,0 100%); }.place-answer--sky .place-scene { color:#fff; background:linear-gradient(#a9dcf1,#def4fa); text-shadow:0 4px 0 #91c9de; }.place-answer--water .place-scene { font-size:0; background:linear-gradient(180deg,#dff6f4 0 30%,#70c7d0 30% 100%); }.place-answer--water .place-scene::before { content:""; position:absolute; left:16%; top:34%; width:68%; height:13px; border-bottom:6px solid rgba(244,255,255,.96); border-radius:50%; box-shadow:0 18px 0 -1px rgba(230,253,255,.9),0 36px 0 -2px rgba(215,247,250,.78); transform:rotate(-2deg); }.place-answer--water .place-scene::after { content:""; position:absolute; left:9%; right:9%; bottom:5px; height:11px; border-top:4px solid rgba(43,157,170,.55); border-radius:50%; transform:rotate(2deg); }.place-answer--space .place-scene { color:#ffdc71; background:radial-gradient(circle at 20% 24%,#fff 0 2px,transparent 3px),radial-gradient(circle at 78% 65%,#fff 0 2px,transparent 3px),#273765; }
.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,.65); outline-offset:2px; }
@keyframes nudge { 50% { transform:translateX(5px); } }
.coach-card { display:flex; flex-direction:column; align-items:flex-start; padding:25px; border:2px solid #ead392; background:#fff4ce; }.coach-card img { align-self:center; width:150px; height:150px; margin:-2px 0 12px; object-fit:contain; }.coach-card h3 { margin-bottom:9px; 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:40px; }.result-card h2 { font-size:48px; }.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:94px; height:78px; 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-card__visual,.route-card__body { height:auto; min-height:260px; }.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-mascot { width:170px; height:170px; left:0; }.scene-toy--car { left:29%; width:105px; }.scene-toy--plane { right:2%; top:70px; width:135px; }.scene-toy--boat { width:105px; right:5%; }.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-card__visual { height:190px; min-height:0; }.route-card__body { min-height:0; }.route-card__body h3,.route-card__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%; }.travel-stage { padding:19px; }.focus-card--vehicle { padding:20px; }.answer-grid { grid-template-columns:1fr; }.answer-card { min-height:118px; flex-direction:row; }.toy-answer img { width:46%; height:92px; }.place-scene { width:46%; height:82px; }.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:38px; }.result-stats { grid-template-columns:1fr; }.result-actions { flex-direction:column; }.reward-note img { width:70px; } }
@media (max-width:410px) { h1 { font-size:43px; }.hero-copy { padding-inline:20px; }.focus-card { min-height:155px; }.focus-toy { width:180px; height:115px; }.travel-stage { padding:15px; }.answer-card { padding:10px; }.game-brand strong { max-width:190px; font-size:16px; } }