:root { --ink:#17364c; --muted:#5e7382; --sky:#e9f8ff; --yellow:#ffd766; --orange:#ff8b59; --blue:#4a8cff; --green:#45bf82; --red:#f05a67; --paper:#fffdf8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Nunito, "Arial Rounded MT Bold", Arial, sans-serif; background:linear-gradient(180deg, #f4fcff 0, #f4fcff 74%, #fffdf8 74%); }
button { font:inherit; cursor:pointer; }
.app-shell { min-height:100vh; overflow:hidden; }
.topbar, .home-screen, .game-picker, .parent-note, .game-screen { max-width:1120px; margin:auto; padding-left:32px; padding-right:32px; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:21px; font-weight:900; }
.brand-logo { width:42px; height:42px; object-fit:contain; }.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px max(32px, calc((100% - 1056px) / 2)); color:#d5e8ee; background:#17364c; }.site-footer div { display:grid; gap:4px; }.site-footer span { font-size:13px; }.site-footer nav { display:flex; flex-wrap:wrap; gap:18px; }.site-footer a { color:white; font-size:14px; text-decoration:none; }.site-footer a:hover { text-decoration:underline; }.info-page { max-width:760px; min-height:100vh; margin:auto; padding:48px 32px; }.info-page .brand { margin-bottom:70px; }.info-page h1 { font-size:42px; }.info-page p { max-width:690px; color:var(--muted); font-size:18px; line-height:1.65; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; color:white; background:var(--orange); border-radius:12px 12px 12px 5px; font-size:24px; transform:rotate(-5deg); }
.streak { display:flex; align-items:center; gap:4px; margin-left:auto; margin-right:16px; padding:8px 12px; color:#725200; background:#fff6cf; border-radius:99px; font-size:14px; }.streak span { color:#f3ad22; font-size:18px; }
.icon-button { border:0; width:40px; height:40px; border-radius:50%; background:white; box-shadow:0 3px 12px #1e6a8420; font-size:19px; }
.home-screen { min-height:440px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding-top:20px; padding-bottom:30px; }
.eyebrow { margin:0 0 10px; color:#4d85b1; font-weight:900; letter-spacing:1.4px; font-size:12px; }
h1 { margin:0; font-size:clamp(42px, 5vw, 67px); line-height:1.02; letter-spacing:0; } h1 span { color:var(--orange); }
.intro { max-width:490px; margin:18px 0; color:var(--muted); font-size:18px; line-height:1.55; }
.age-note { display:flex; align-items:center; gap:8px; margin-bottom:23px; font-weight:800; font-size:14px; }.age-note span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:white; background:var(--green); }
.primary-button { border:0; padding:14px 20px; color:white; background:var(--orange); border-radius:8px; box-shadow:0 5px 0 #db6840; font-weight:900; font-size:17px; }.primary-button:hover { transform:translateY(-2px); }.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 #db6840; }
.hero-art { position:relative; min-height:330px; display:grid; place-items:center; }.hero-art::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:#d5f3ff; }.hero-art img { position:relative; width:min(100%, 390px); border-radius:50%; mix-blend-mode:multiply; filter:drop-shadow(0 14px 13px #4a8cff22); }
.game-picker { padding-top:50px; padding-bottom:50px; }.section-heading h2 { margin:0; font-size:29px; }.game-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:23px; }.game-card { display:flex; align-items:center; min-height:115px; padding:18px; text-align:left; color:var(--ink); border:2px solid transparent; border-radius:8px; background:white; box-shadow:0 7px 20px #24577813; transition:transform .18s, border-color .18s; }.game-card:hover { transform:translateY(-4px); border-color:#a8ddea; }.game-icon { display:grid; place-items:center; flex:0 0 75px; height:75px; margin-right:16px; border-radius:50%; color:white; font-size:26px; font-weight:900; }.letters-card .game-icon { background:var(--red); }.numbers-card .game-icon { background:var(--blue); font-size:23px; }.game-info { display:grid; gap:6px; }.game-info strong { font-size:20px; }.game-info small { color:var(--muted); font-size:14px; }.play-arrow { margin-left:auto; font-size:27px; color:#8aa8ba; }
.parent-note { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:114px; padding-top:20px; padding-bottom:20px; }.parent-note div:first-child { display:grid; gap:6px; }.parent-note strong { font-size:17px; }.parent-note span { color:var(--muted); font-size:14px; }.note-icons { color:#9acbd0; font-size:25px; font-weight:900; letter-spacing:4px; }
.printables { display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:1120px; margin:0 auto 54px; padding:34px 32px; color:#24475d; background:#fff2bb; }.printables h2 { margin:0; font-size:26px; }.printables p { margin:8px 0 0; color:#55717f; }.printables .primary-button { flex:0 0 auto; text-decoration:none; }
.hidden { display:none !important; }.game-screen { padding-top:35px; padding-bottom:80px; }.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:23px; }.back-button { border:0; padding:8px 0; color:#3977a3; background:transparent; font-weight:900; }.progress-wrap { min-width:190px; text-align:center; color:var(--muted); font-size:13px; font-weight:800; }.progress-track { height:9px; margin-top:7px; overflow:hidden; border-radius:999px; background:#dceff4; }.progress-track i { display:block; height:100%; width:20%; border-radius:inherit; background:var(--green); transition:width .3s; }.score { color:#a37106; font-size:16px; }
.game-panel { max-width:760px; margin:auto; padding:42px 34px; text-align:center; border-radius:8px; background:white; box-shadow:0 10px 35px #24577817; }.game-label { margin:0 0 12px; color:#628699; font-size:14px; font-weight:900; letter-spacing:1px; }.game-prompt { margin:0; font-size:clamp(26px,4vw,38px); }.speaker { margin-top:16px; border:0; width:44px; height:44px; border-radius:50%; color:#3776a4; background:#e8f7ff; font-size:20px; }.answer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:35px auto 0; max-width:570px; }.answer { min-height:104px; border:2px solid #d8edf3; border-radius:8px; color:var(--ink); background:#faffff; font-size:clamp(40px,7vw,62px); font-weight:900; }.answer:hover { border-color:var(--blue); background:#edf8ff; }.count-stage { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; min-height:160px; margin:28px 0 22px; }.count-item { display:grid; place-items:center; width:69px; height:69px; border-radius:50%; color:white; font-size:34px; background:var(--count-color); box-shadow:0 6px 0 #00000015; }.number-answers { grid-template-columns:repeat(3,1fr); max-width:430px; }.number-answers .answer { min-height:82px; font-size:36px; }.celebration { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:24px; text-align:center; background:#15364c88; }.celebration > div { width:min(100%, 390px); padding:38px; border-radius:8px; background:var(--paper); box-shadow:0 18px 45px #0015224d; }.celebration span { color:#ffbd28; font-size:72px; }.celebration h2 { margin:4px 0 7px; font-size:37px; }.celebration p { margin:0 0 23px; color:var(--muted); }
@media (max-width:650px) { body { background:linear-gradient(180deg, #f4fcff 0, #f4fcff 68%, #fffdf8 68%); }.topbar,.home-screen,.game-picker,.parent-note,.game-screen { padding-left:20px; padding-right:20px; }.topbar { height:67px; }.brand { font-size:18px; }.brand-mark { width:31px; height:31px; font-size:21px; }.streak { margin-right:8px; padding:7px 9px; }.home-screen { min-height:auto; grid-template-columns:1fr; gap:5px; padding-top:28px; text-align:center; }.home-copy { display:grid; justify-items:center; }.intro { font-size:16px; }.hero-art { min-height:250px; order:-1; }.hero-art::before { width:235px; height:235px; }.hero-art img { width:280px; }.game-picker { padding-top:38px; }.section-heading h2 { font-size:25px; }.game-grid { grid-template-columns:1fr; }.game-card { min-height:94px; }.game-icon { flex-basis:60px; height:60px; margin-right:13px; font-size:22px; }.parent-note { align-items:flex-start; }.note-icons { display:none; }.game-toolbar { gap:10px; }.progress-wrap { min-width:120px; }.game-panel { padding:30px 16px; }.answer-grid { gap:10px; }.answer { min-height:85px; }.count-item { width:54px; height:54px; font-size:27px; } }
.game-grid { grid-template-columns:repeat(3, 1fr); }.balloon-card .game-icon { background:#a05eea; font-size:49px; line-height:.4; }.balloon-stage { position:relative; height:340px; margin:25px auto 0; overflow:hidden; border-radius:8px; background:linear-gradient(#c9f0ff 0%, #eafaff 75%, #b9e69a 75%); }.balloon { position:absolute; width:60px; height:76px; border:0; border-radius:50% 50% 47% 47%; color:white; font-size:29px; font-weight:900; background:var(--balloon-color); box-shadow:inset -8px -8px #00000016, inset 8px 9px #ffffff45; animation:floatUp var(--float-time) linear forwards; }.balloon::after { content:""; position:absolute; left:27px; bottom:-12px; width:6px; height:14px; background:var(--balloon-color); clip-path:polygon(0 0,100% 0,50% 100%); }.balloon::before { content:""; position:absolute; left:30px; top:75px; width:1px; height:45px; background:#668d73; }.balloon.popped { animation:pop .15s ease-out forwards; pointer-events:none; }@keyframes floatUp { from { transform:translateY(350px) rotate(-5deg); } to { transform:translateY(-120px) rotate(7deg); }}@keyframes pop { to { transform:scale(1.65); opacity:0; }}.balloon-score { margin:0; color:#3977a3; font-size:21px; font-weight:900; }@media (max-width:820px) { .game-grid { grid-template-columns:1fr; } } @media (max-width:650px) { .balloon-stage { height:335px; } }
.printables { margin:0 20px 38px; padding:26px 20px; border-radius:8px; } @media (max-width:650px) { .printables { display:grid; margin:0 0 35px; border-radius:0; }.printables .primary-button { justify-self:start; } }
@media (max-width:650px) { .brand-logo { width:34px; height:34px; }.site-footer { display:grid; padding:26px 20px; }.site-footer nav { gap:14px; }.info-page { padding:32px 20px; }.info-page .brand { margin-bottom:45px; }.info-page h1 { font-size:34px; } }