:root { --ink:#294f4b; --muted:#6b827c; --paper:#fffdf7; --line:#ddd6b9; --green:#3e9c73; --gold:#f0ba42; --coral:#eb796b; --blue:#5f9fd0; --purple:#8875bc; --shadow:0 22px 45px rgba(48,76,64,.11); --soft-shadow:0 10px 21px rgba(48,76,64,.08); color:var(--ink); font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; } html,body { min-width:320px; overflow-x:hidden; } body { min-height:100vh; margin:0; background:radial-gradient(circle at 5% 7%,rgba(249,218,109,.25) 0 108px,transparent 109px),radial-gradient(circle at 96% 18%,rgba(118,185,212,.19) 0 156px,transparent 157px),radial-gradient(circle at 76% 95%,rgba(198,177,233,.16) 0 140px,transparent 141px),linear-gradient(122deg,#fbf9ed,#f4faf3 50%,#fdf8ef); } body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.18; background-image:radial-gradient(#80a998 1px,transparent 1.2px); background-size:19px 19px; pointer-events:none; } button { font:inherit; } button:not(:disabled) { cursor:pointer; } button:focus-visible { outline:4px solid rgba(239,182,57,.62); outline-offset:4px; } h1,h2,h3,p { margin:0; }
.app { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; }.page { padding:21px 0 63px; }.loading-card { width:min(430px,100%); margin:18vh auto; padding:39px 24px; border:3px solid var(--line); border-radius:31px; background:var(--paper); box-shadow:var(--shadow); font-size:20px; font-weight:900; text-align:center; }.loading-card span { margin-right:9px; font-size:30px; }

.topbar { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:24px; }.brand,.collection-button,.sound-button { border:0; color:var(--ink); background:transparent; }.brand { min-width:0; display:flex; align-items:center; gap:11px; padding:0; text-align:left; }.brand-mark { width:58px; height:53px; position:relative; display:flex; align-items:center; justify-content:center; padding:6px 3px; border:2px solid #d8c46f; border-radius:16px; background:#fff8d8; box-shadow:0 6px 12px rgba(56,78,66,.1); transform:rotate(-3deg); }.brand-mark i,.brand-mark b,.brand-mark em { display:grid; width:23px; height:30px; place-items:center; border-radius:8px; color:#fff; font-family:Georgia,serif; font-size:14px; font-style:normal; font-weight:800; }.brand-mark i { z-index:3; background:var(--coral); transform:rotate(-5deg); }.brand-mark b { z-index:2; margin-left:-5px; background:#e3ae3e; transform:rotate(4deg); }.brand-mark em { z-index:1; margin-left:-5px; background:var(--blue); transform:rotate(-2deg); }.brand strong { display:block; overflow:hidden; max-width:310px; font-size:24px; font-weight:1000; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.brand small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.top-actions { display:flex; align-items:center; gap:9px; }.collection-button,.sound-button { min-height:47px; display:flex; align-items:center; gap:8px; padding:7px 12px; border:2px solid #d9e6da; border-radius:15px; background:rgba(255,254,249,.84); box-shadow:0 5px 14px rgba(49,74,63,.06); font-size:12px; font-weight:900; }.collection-button>span:first-child,.sound-button>span:first-child { font-size:20px; }.collection-button>span:last-child { line-height:1.05; text-align:left; }.collection-button small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.sound-button { color:#688179; }.sound-button.is-on { color:#287658; border-color:#9fd3b1; background:#eff9f0; }

.eyebrow { display:block; color:#46846c; font-family:Georgia,serif; font-size:12px; font-weight:800; letter-spacing:1.5px; }.hero { position:relative; min-height:408px; display:grid; grid-template-columns:minmax(0,1fr) minmax(385px,1fr); align-items:center; gap:25px; overflow:hidden; padding:52px; border:2px solid #d9e8d7; border-radius:37px; background:linear-gradient(120deg,#fffaf0,#edf8ee 55%,#f0f4ff); box-shadow:var(--shadow); }.hero::before { content:""; position:absolute; top:-98px; left:44%; width:245px; height:245px; border-radius:50%; background:rgba(245,196,77,.17); }.hero::after { content:""; position:absolute; right:-96px; bottom:-117px; width:270px; height:270px; border:24px solid rgba(98,164,209,.14); border-radius:50%; }.hero-copy { position:relative; z-index:2; }.hero h1 { max-width:550px; margin:13px 0 12px; font-size:clamp(42px,5.1vw,59px); font-weight:1000; line-height:.98; letter-spacing:-2.4px; }.hero-copy>p:not(.eyebrow) { max-width:500px; color:var(--muted); font-size:17px; font-weight:700; line-height:1.51; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:27px; }.hero-actions small { color:#69837b; font-size:12px; font-weight:900; }.primary-button,.secondary-button { min-height:49px; padding:12px 19px; border-radius:15px; font-size:14px; font-weight:1000; transition:transform .16s ease,box-shadow .16s ease; }.primary-button { border:0; color:#fff; background:var(--green); box-shadow:0 8px 0 #287454,0 15px 22px rgba(38,115,78,.2); }.primary-button span { margin-left:7px; font-size:18px; }.primary-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 0 #287454,0 18px 24px rgba(38,115,78,.2); }.primary-button:active:not(:disabled) { transform:translateY(6px); box-shadow:0 3px 0 #287454; }.secondary-button { border:2px solid #9ed1b0; color:#317258; background:#f9fff8; box-shadow:0 5px 0 #d1e8d6; }.secondary-button:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #d1e8d6; }
.hero-scene { position:relative; z-index:2; width:370px; height:267px; margin:0 auto; transform:rotate(-2deg); }.path-card { position:absolute; z-index:3; top:13px; left:62px; width:252px; min-height:213px; padding:29px 19px; border:6px solid #fffef8; border-radius:25px; background:repeating-linear-gradient(to bottom,#fffdf8 0 35px,#d8eadc 36px 38px); box-shadow:0 18px 27px rgba(49,70,61,.18); }.path-card::before { content:""; position:absolute; top:0; bottom:0; left:27px; border-left:2px solid rgba(235,124,107,.35); }.path-card>small { position:relative; display:block; margin:24px 4px 0; color:#5f8b72; font-size:11px; font-weight:900; transform:rotate(-2deg); }.root-card { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 8px; border:2px dashed var(--accent); border-radius:15px; background:rgba(255,255,255,.76); }.root-card span,.root-card b,.root-card i { position:relative; z-index:1; }.root-card i { color:#d6a239; font-size:24px; font-style:normal; font-weight:900; }.root-card b { color:#34725b; font-family:Georgia,serif; font-size:25px; }.root-card b mark { color:#dc7659; background:transparent; }.target-word { color:#2e5e52; font-family:Georgia,serif; font-size:28px; font-weight:800; letter-spacing:.5px; white-space:nowrap; }.target-word mark { display:inline-grid; min-width:23px; place-items:center; color:#d3773f; background:#ffe39a; border-radius:5px; }.target-word.medium { font-size:25px; }.target-word.long { font-size:21px; letter-spacing:0; }.magnifier { position:absolute; z-index:4; right:12px; bottom:10px; display:grid; width:91px; height:91px; place-items:center; border:11px solid #5da77d; border-radius:50%; color:#5da77d; background:rgba(255,255,255,.38); font-family:Georgia,serif; font-size:70px; line-height:1; transform:rotate(-25deg); filter:drop-shadow(0 7px 6px rgba(47,72,61,.16)); }.magnifier::after { content:""; position:absolute; right:-36px; bottom:-28px; width:54px; height:14px; border-radius:9px; background:#5da77d; transform:rotate(45deg); }.leaf { position:absolute; z-index:4; font-style:normal; }.leaf-one { top:9px; left:11px; color:#e3ae38; font-size:31px; }.leaf-two { top:17px; right:4px; color:#57b184; font-size:24px; }.leaf-three { bottom:23px; left:17px; color:#e8796b; font-size:23px; }

.how,.levels { margin-top:48px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.section-heading h2 { margin-top:7px; font-size:clamp(31px,4vw,44px); line-height:1.05; letter-spacing:-1.4px; }.section-heading>p { max-width:375px; color:#6d8780; font-size:13px; font-weight:800; line-height:1.42; text-align:right; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:20px; }.step-card { min-height:132px; display:grid; grid-template-columns:46px 39px 1fr; align-items:center; gap:12px; padding:18px; border:2px solid #e0d9c4; border-radius:22px; background:rgba(255,254,249,.9); box-shadow:var(--soft-shadow); }.step-number { display:grid; width:43px; height:43px; place-items:center; padding-bottom:1px; border:3px solid var(--step); border-radius:50%; color:var(--step); font-family:Georgia,serif; font-size:25px; font-weight:800; line-height:1; }.step-icon { display:grid; width:37px; height:37px; place-items:center; border-radius:12px; background:#f0f7f0; font-size:20px; }.step-card h3 { font-size:17px; line-height:1.12; }.step-card p { margin-top:6px; color:#748a83; font-size:12px; font-weight:700; line-height:1.33; }.rule-strip { display:grid; grid-template-columns:151px 1fr; align-items:center; gap:24px; margin-top:47px; padding:24px 31px; border:2px solid #e6d8a9; border-radius:27px; background:linear-gradient(115deg,#fff7dc,#fcfcf3); box-shadow:var(--soft-shadow); }.rule-sign { position:relative; display:grid; min-height:92px; place-items:center; border:5px solid #fffdf7; border-radius:18px; color:#316a55; background:#bfe2c7; box-shadow:0 7px 13px rgba(51,89,65,.12); text-align:center; }.rule-sign b { font-size:13px; line-height:1.12; }.rule-sign span { position:absolute; right:8px; bottom:3px; color:#d47a4b; font-family:Georgia,serif; font-size:35px; font-weight:800; }.rule-strip h2 { max-width:780px; margin-top:7px; font-size:23px; line-height:1.21; letter-spacing:-.5px; }.rule-strip p { margin-top:8px; color:#6c857d; font-size:14px; font-weight:800; }.levels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:20px; }.level-card { min-height:255px; position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; overflow:hidden; padding:21px; border:3px solid color-mix(in srgb,var(--accent) 54%,white); border-radius:25px; color:var(--ink); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,white),#fffdf7 66%); text-align:left; box-shadow:var(--soft-shadow); transition:transform .16s ease,box-shadow .16s ease; }.level-card::after { content:""; position:absolute; right:-37px; bottom:-47px; width:134px; height:134px; border:17px solid color-mix(in srgb,var(--accent) 15%,white); border-radius:50%; }.level-card:hover { transform:translateY(-4px); box-shadow:0 16px 27px rgba(45,73,60,.13); }.level-top,.level-footer { position:relative; z-index:1; display:flex; width:100%; align-items:center; justify-content:space-between; }.level-icon { font-size:32px; }.age-pill { padding:6px 9px; border-radius:12px; color:var(--accent); background:rgba(255,255,255,.7); font-size:11px; font-weight:900; }.level-index { position:relative; z-index:1; margin-top:16px; color:var(--accent); font-family:Georgia,serif; font-size:11px; font-weight:800; letter-spacing:1.3px; }.level-card>strong { position:relative; z-index:1; margin-top:7px; font-size:22px; line-height:1.05; letter-spacing:-.4px; }.level-copy { position:relative; z-index:1; margin-top:10px; color:#6c8580; font-size:12px; font-weight:700; line-height:1.37; }.level-footer { margin-top:auto; padding-top:12px; color:#618077; font-size:11px; font-weight:900; }.stars { color:#e6b440; font-size:14px; letter-spacing:1px; }

.game-page { padding-bottom:50px; }.game-head { min-height:49px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:12px; }.back-link,.text-button { padding:5px 0; border:0; color:#568278; background:transparent; font-size:13px; font-weight:900; text-align:left; }.back-link:hover,.text-button:hover { text-decoration:underline; }.game-head>div { text-align:center; }.game-head>div span { display:block; font-size:17px; font-weight:1000; }.game-head>div small { display:block; margin-top:3px; color:#79918a; font-size:10px; font-weight:800; }.hint-button { justify-self:end; min-height:42px; padding:8px 12px; border:2px solid #eac66b; border-radius:13px; color:#8f6c1e; background:#fff8dc; font-size:12px; font-weight:900; }.hint-button:disabled { opacity:.45; cursor:default; }.progress-line { height:9px; overflow:hidden; border-radius:8px; background:#e1ece0; }.progress-line span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#65ba89,#eac44e); transition:width .25s ease; }.game-grid { display:grid; grid-template-columns:minmax(250px,.73fr) minmax(0,1.27fr); gap:21px; margin-top:22px; }.word-card,.answer-card { border:2px solid #dce5d8; border-radius:29px; background:rgba(255,254,249,.95); box-shadow:var(--shadow); }.word-card { min-height:502px; display:flex; flex-direction:column; align-items:center; padding:29px; text-align:center; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,white),#fffdf8 57%); }.word-emoji { display:grid; width:159px; height:159px; place-items:center; margin:27px 0 15px; border:9px solid rgba(255,255,255,.8); border-radius:50%; background:color-mix(in srgb,var(--accent) 20%,white); box-shadow:0 10px 18px rgba(48,73,62,.12); font-size:82px; }.sentence { min-height:44px; max-width:270px; color:#678078; font-size:14px; font-weight:800; line-height:1.4; }.focus-word { width:100%; margin:17px 0 12px; padding:13px 7px; border:2px dashed color-mix(in srgb,var(--accent) 55%,white); border-radius:16px; background:rgba(255,255,255,.68); }.focus-word .target-word { font-size:32px; }.word-card>small { width:100%; margin-top:auto; padding:10px; border-radius:13px; color:#688179; background:rgba(255,255,255,.65); font-size:11px; font-weight:800; line-height:1.35; }.answer-card { min-height:502px; padding:36px 43px; }.answer-card h1 { max-width:630px; margin:8px 0 11px; font-size:clamp(29px,3.5vw,41px); line-height:1.08; letter-spacing:-1.2px; }.answer-intro { color:#6c857e; font-size:14px; font-weight:700; line-height:1.43; }.choices { display:grid; gap:12px; margin-top:24px; }.choices-3 { grid-template-columns:repeat(3,1fr); }.choices-4 { grid-template-columns:repeat(2,1fr); }.check-choice { min-height:112px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; border:3px solid #cde1d2; border-radius:19px; color:#2e705a; background:#fff; box-shadow:0 6px 12px rgba(45,73,60,.07); transition:transform .16s ease,background .16s ease; }.check-choice strong { color:#2e6154; font-family:Georgia,serif; font-size:27px; letter-spacing:.5px; }.check-choice strong mark { padding:1px 3px; border-radius:5px; color:#cf7046; background:#ffe49a; }.check-choice small { margin-top:6px; color:#7c958d; font-size:10px; font-weight:800; }.choice-number { position:absolute; top:8px; left:9px; display:grid; width:25px; height:25px; place-items:center; padding-bottom:1px; border-radius:50%; color:#88a197; background:#ecf5ec; font-family:Georgia,serif; font-size:13px; font-weight:800; line-height:1; }.check-choice:hover:not(:disabled) { border-color:#77bd93; background:#effaf0; transform:translateY(-3px); }.check-choice.is-wrong { border-color:#efaaa1; background:#fff0ed; opacity:.78; }.check-choice.is-wrong strong { color:#b8625d; }.check-choice.is-good { border-color:#5db587; background:#e6f7e9; }.check-choice.is-hint { border-color:#e5b43e; background:#fff8d9; box-shadow:0 0 0 5px rgba(235,196,75,.16); }.feedback { min-height:73px; display:flex; align-items:flex-start; gap:10px; margin-top:21px; padding:13px 15px; border-radius:16px; font-size:13px; line-height:1.35; }.feedback>b { display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border-radius:50%; font-size:16px; }.feedback strong { font-size:14px; }.feedback p { margin-top:2px; font-weight:700; }.feedback p .target-word { font-size:15px; }.feedback p mark { padding:0 2px; color:#cf7046; background:#ffe39a; border-radius:3px; }.feedback.good { color:#287555; background:#e7f6e9; }.feedback.good>b { color:#fff; background:#4bae76; }.feedback.hint { color:#8c6b21; background:#fff8dc; }.feedback.hint>b { background:#f5dd7e; }.feedback.try { color:#a05853; background:#fff0ed; }.feedback.try>b { color:#fff; background:#e9867e; }.feedback.quiet { color:#647f76; background:#f0f7f0; }.feedback.quiet>b { color:#4b9270; background:#ddecdf; }.game-actions { min-height:49px; display:flex; align-items:end; justify-content:flex-end; margin-top:17px; }.game-actions .text-button { color:#a17b26; }

.result { position:relative; max-width:815px; overflow:hidden; margin:43px auto 0; padding:53px 42px 45px; border:3px solid color-mix(in srgb,var(--accent) 50%,white); border-radius:35px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 15%,white),#fffdf8 62%); box-shadow:var(--shadow); text-align:center; }.result::before { content:""; position:absolute; bottom:-112px; left:-82px; width:250px; height:250px; border:20px solid color-mix(in srgb,var(--accent) 14%,white); border-radius:50%; }.result>* { position:relative; z-index:1; }.result-confetti { position:absolute; top:23px; right:52px; color:#e4b23f; font-size:23px; font-style:normal; letter-spacing:12px; transform:rotate(12deg); }.result-icon { display:grid; width:96px; height:96px; place-items:center; margin:0 auto 15px; border:9px solid rgba(255,255,255,.78); border-radius:50%; background:color-mix(in srgb,var(--accent) 20%,white); font-size:47px; }.result h1 { margin:9px 0 9px; font-size:clamp(35px,5vw,51px); line-height:1.05; letter-spacing:-1.5px; }.result-stars { color:#e4b13c; font-size:42px; letter-spacing:7px; }.result>p { max-width:580px; margin:14px auto; color:#667f77; font-size:15px; font-weight:700; line-height:1.47; }.stats { display:flex; justify-content:center; gap:12px; margin:21px auto; }.stats span { display:flex; flex-direction:column; min-width:145px; padding:11px; border-radius:15px; color:#638078; background:rgba(255,255,255,.63); font-size:12px; font-weight:800; }.stats b { color:#2c6a55; font-size:24px; }.stats small { margin-top:2px; color:#7d948b; font-size:10px; }.result-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }.result-actions .text-button { padding:13px; }

.collection-hero { min-height:229px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:35px 50px; border:2px solid #e0e4d3; border-radius:30px; background:linear-gradient(120deg,#fffbea,#edf8ef 68%,#eef7ff); box-shadow:var(--soft-shadow); }.collection-hero .back-link { display:block; margin-bottom:20px; }.collection-hero h1 { margin:9px 0; font-size:clamp(34px,4.6vw,52px); letter-spacing:-1.5px; }.collection-hero p { max-width:600px; color:#678078; font-size:15px; font-weight:700; line-height:1.45; }.map-marker { position:relative; display:grid; width:148px; height:148px; flex:0 0 auto; place-items:center; border:10px solid rgba(255,255,255,.78); border-radius:50%; background:#d9eedc; box-shadow:0 11px 18px rgba(47,77,64,.1); font-size:68px; }.map-marker b { position:absolute; right:-8px; bottom:7px; display:grid; width:47px; height:47px; place-items:center; border:4px solid #fffdf7; border-radius:50%; color:#fff; background:#4a9f73; font-size:14px; }.map-section { margin-top:37px; }.map-group+.map-group { margin-top:43px; }.map-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; }.map-heading h2 { margin-top:5px; font-size:29px; letter-spacing:-.7px; }.map-heading>b { color:#678178; font-size:13px; }.map-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }.map-card { position:relative; min-height:202px; display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:14px 10px; border:2px solid #e2e0d6; border-radius:20px; background:#f9f8f3; text-align:center; }.map-card.opened { border-color:color-mix(in srgb,var(--accent) 52%,white); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 11%,white),#fffdf8 70%); box-shadow:0 7px 14px rgba(47,75,61,.06); }.card-number { position:absolute; top:9px; left:9px; display:grid; width:28px; height:28px; place-items:center; padding-bottom:1px; border:2px solid #d8d7ca; border-radius:50%; color:#77817d; background:#fffefa; font-family:Georgia,serif; font-size:14px; font-weight:800; line-height:1; }.map-emoji { display:grid; height:69px; place-items:center; color:#aeb8b1; filter:grayscale(1); opacity:.55; font-size:38px; }.opened .map-emoji { filter:none; opacity:1; }.map-card strong,.map-card b { min-height:24px; color:#99a39c; font-family:Georgia,serif; font-size:17px; }.opened strong,.opened b { color:#2c6253; }.map-card strong .target-word { font-size:17px; }.map-card strong mark { min-width:15px; padding:0 1px; color:#c97243; }.map-card i { min-height:17px; color:#a6b2aa; font-style:normal; font-weight:900; }.map-card b mark { padding:0 2px; border-radius:3px; color:#cf7046; background:#ffe39a; }.map-card small { margin-top:6px; color:#9ea9a2; font-size:10px; font-weight:800; line-height:1.28; }.opened small { color:#588573; }

@media (max-width:980px) { .hero { grid-template-columns:1fr .85fr; padding:42px 34px; }.hero h1 { font-size:45px; }.hero-scene { transform:scale(.84) rotate(-2deg); transform-origin:center; margin-left:-21px; }.section-heading>p { max-width:290px; }.steps-grid { grid-template-columns:1fr; }.step-card { min-height:104px; }.levels-grid { grid-template-columns:repeat(2,1fr); }.game-grid { grid-template-columns:1fr; }.word-card { min-height:0; display:grid; grid-template-columns:110px 1fr; gap:15px; align-items:center; text-align:left; }.word-card>.eyebrow { grid-column:1/-1; }.word-emoji { width:105px; height:105px; margin:0; font-size:56px; }.focus-word { grid-column:1/-1; margin:0; text-align:center; }.word-card>small { grid-column:1/-1; margin-top:0; text-align:center; }.answer-card { min-height:0; }.map-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:650px) { .app { width:min(1120px,calc(100% - 20px)); }.page { padding:12px 0 45px; }.topbar { align-items:flex-start; margin-bottom:19px; }.brand-mark { width:44px; height:43px; padding:5px 2px; border-radius:13px; }.brand-mark i,.brand-mark b,.brand-mark em { width:18px; height:25px; border-radius:6px; font-size:10px; }.brand strong { max-width:170px; font-size:18px; }.brand small { font-size:9px; }.top-actions { gap:6px; }.collection-button,.sound-button { min-height:42px; padding:7px 9px; border-radius:12px; font-size:0; }.collection-button small { display:none; }.collection-button>span:first-child,.sound-button>span:first-child { font-size:18px; }.hero { display:block; min-height:0; padding:34px 25px 17px; border-radius:27px; }.eyebrow { font-size:10px; letter-spacing:1.05px; }.hero h1 { margin-top:8px; font-size:38px; letter-spacing:-1.25px; }.hero-copy>p:not(.eyebrow) { font-size:15px; }.hero-actions { gap:10px; margin-top:22px; }.hero-scene { width:285px; min-height:178px; height:178px; margin:7px auto -5px; transform:scale(.66) rotate(-2deg); transform-origin:top center; }.how,.levels { margin-top:32px; }.section-heading { display:block; }.section-heading h2 { font-size:31px; }.section-heading>p { max-width:none; margin-top:9px; font-size:12px; text-align:left; }.steps-grid { gap:10px; margin-top:14px; }.step-card { grid-template-columns:40px 34px 1fr; gap:9px; padding:14px 12px; border-radius:18px; }.step-number { width:38px; height:38px; border-width:2px; font-size:21px; }.step-icon { width:32px; height:32px; font-size:18px; }.step-card h3 { font-size:16px; }.step-card p { margin-top:3px; font-size:12px; }.rule-strip { grid-template-columns:86px 1fr; gap:13px; margin-top:31px; padding:17px 14px; border-radius:21px; }.rule-sign { min-height:80px; border-width:4px; }.rule-sign b { font-size:10px; }.rule-sign span { font-size:29px; }.rule-strip h2 { font-size:17px; }.rule-strip p { font-size:12px; }.levels-grid { grid-template-columns:1fr; gap:12px; margin-top:16px; }.level-card { min-height:207px; padding:19px; border-radius:21px; }.level-index { margin-top:11px; }.level-card>strong { font-size:23px; }.game-head { grid-template-columns:1fr auto; gap:6px; }.game-head>div { grid-column:1/-1; grid-row:1; margin-bottom:8px; }.back-link { grid-column:1; grid-row:2; }.hint-button { grid-column:2; grid-row:2; padding:7px 9px; font-size:11px; }.game-grid { gap:14px; margin-top:14px; }.word-card { grid-template-columns:72px 1fr; gap:12px; padding:18px; border-radius:22px; }.word-card>.eyebrow { grid-column:1/-1; }.word-emoji { width:72px; height:72px; border-width:5px; font-size:38px; }.sentence { min-height:0; font-size:13px; }.focus-word { padding:10px; border-radius:13px; }.focus-word .target-word { font-size:28px; }.word-card>small { font-size:10px; }.answer-card { padding:25px 18px; border-radius:22px; }.answer-card h1 { margin:8px 0 11px; font-size:28px; }.answer-intro { font-size:13px; }.choices { gap:9px; margin-top:18px; }.choices-3,.choices-4 { grid-template-columns:1fr 1fr; }.check-choice { min-height:91px; border-radius:16px; }.check-choice strong { font-size:23px; }.check-choice small { font-size:9px; }.feedback { margin-top:18px; font-size:12px; }.game-actions { margin-top:12px; }.result { margin-top:24px; padding:38px 19px 30px; border-radius:26px; }.result-confetti { top:14px; right:16px; font-size:17px; letter-spacing:8px; }.result-icon { width:78px; height:78px; font-size:37px; }.result h1 { font-size:35px; }.result-stars { font-size:33px; }.result>p { font-size:14px; }.stats span { min-width:119px; }.result-actions { gap:7px; }.collection-hero { min-height:0; padding:27px 22px; border-radius:24px; }.collection-hero h1 { font-size:35px; }.collection-hero p { font-size:14px; }.map-marker { display:none; }.map-heading { flex-direction:column; align-items:flex-start; gap:5px; }.map-heading h2 { font-size:24px; }.map-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.map-card { min-height:185px; }.map-emoji { height:62px; font-size:35px; } }