/* Whiskerwood: a tactile, illustrated world wrapped around calm math practice. */
:root { --cream:#fff9ec; --paper:#fffefa; --ink:#293e3a; --muted:#62716b; --teal:#238878; --teal-dark:#17675d; --coral:#e96a50; --coral-dark:#b94531; --shadow:0 12px 32px #4e593014; }
body { background:radial-gradient(ellipse at 0 30%,#e5f0d84d,transparent 45%),var(--cream); }
.topbar { background:#fffaf0ed; border-bottom:1px solid #dfdec6; }
.brand-paw { background:#f5ddb0; border-radius:50%; box-shadow:none; transform:none; width:48px; height:48px; overflow:hidden; }
.brand-paw img { width:48px; height:48px; object-fit:contain; transform:scale(1.25) translateY(3px); }
.brand small { color:var(--teal-dark); letter-spacing:.16em; }.brand strong { color:var(--ink); }
.stat-chip { border:1px solid #ede8d6; box-shadow:0 3px 8px #42562d08; }.round-button { border:1px solid #ede8d6; box-shadow:none; }
.village-hero { min-height:650px; background-image:linear-gradient(90deg,#243b2818,transparent 55%),url('/static/assets/village-v3.webp?v=20261002-art2'); background-position:center; }
.village-hero::after { height:85px; }.glass-card { width:min(460px,calc(100% - 36px)); border:1px solid #ffffffc9; border-radius:34px; background:linear-gradient(135deg,#fffdf5f5,#fffaeadd); padding:36px; box-shadow:0 20px 55px #1e392d26; backdrop-filter:blur(12px); }
.hero-eyebrow { font-size:11px; letter-spacing:.14em; margin-bottom:20px; color:var(--teal-dark); }.hero-eyebrow span { color:#c18e37; font-size:19px; padding-right:3px; }
#home-title { font-size:clamp(42px,5.4vw,58px); letter-spacing:-.05em; line-height:1.04; color:#254a3e; }
.hero-copy>p:not(.eyebrow,.mission-note) { color:#53694f; font-size:17px; line-height:1.6; margin:20px 0 24px; }
.primary-button { background:linear-gradient(#ed805f,#e46149); box-shadow:0 5px 0 #b84834,0 8px 18px #c75d3420; border:1px solid #fff3; border-radius:16px; }
.primary-button:hover { box-shadow:0 7px 0 #b84834,0 12px 24px #c75d3430; }.primary-button:active { box-shadow:0 1px 0 #b84834; }.primary-button:disabled { transform:none; box-shadow:0 3px 0 #b84834; }
.guide-bubble { width:min(355px,calc(100% - 36px)); padding:16px 20px 16px 94px; border-radius:24px; background:#fffdf7f5; border:1px solid #ffffffbc; box-shadow:0 12px 36px #244b332b; bottom:54px; min-height:98px; }
.guide-cat { position:absolute; left:-13px; bottom:0; width:110px; height:110px; object-fit:contain; filter:drop-shadow(0 5px 5px #9a662921); }.guide-bubble p { font-size:14px; color:#426448; }
.world-sparkles { pointer-events:none; position:absolute; inset:0; }.world-sparkles i { position:absolute; width:5px; height:5px; background:#fff6ae; border-radius:50%; box-shadow:0 0 14px 5px #fff39b55; animation:firefly 8s ease-in-out infinite; }.world-sparkles i:nth-child(1){left:56%;top:20%;}.world-sparkles i:nth-child(2){left:73%;top:49%;animation-delay:-2s;}.world-sparkles i:nth-child(3){left:86%;top:29%;animation-delay:-4s;}.world-sparkles i:nth-child(4){left:64%;top:74%;animation-delay:-6s;}.world-sparkles i:nth-child(5){left:93%;top:67%;animation-delay:-3s;}
@keyframes firefly { 0%,100% {opacity:.15;transform:translate(0,0);} 50% {opacity:.85;transform:translate(9px,-18px);} }
.content-wrap { padding:38px 0 28px; }.content-wrap:last-child { padding-bottom:72px; }.section-heading { margin-bottom:18px; }.section-heading h2 { color:#294b3f; font-size:clamp(28px,3.3vw,38px); letter-spacing:-.035em; }.content-wrap>p { color:var(--muted); line-height:1.6; }
.quest-choices { gap:18px; margin:22px 0; }.quest-choice { position:relative; padding:0; overflow:hidden; text-align:left; border:2px solid #e6e6d3; border-radius:23px; background:var(--paper); transition:transform .2s,box-shadow .2s; box-shadow:0 5px 15px #425e2520; }.quest-choice:hover { transform:translateY(-4px); }.quest-choice[aria-pressed="true"] { border-color:#368678; background:var(--paper); box-shadow:0 0 0 3px #36867819,0 6px 18px #35633c1c; }.quest-cover { position:relative; height:165px; overflow:hidden; }.quest-cover img { width:100%;height:100%;object-fit:cover;object-position:center 52%; transition:transform .5s; }.quest-choice:hover .quest-cover img { transform:scale(1.035); }.quest-choice-copy { padding:18px 20px; }.quest-choice strong { font-size:18px; display:block; }.quest-choice small { font-size:12px; color:#72816b; }.quest-selected { display:none!important; }.quest-choice[aria-pressed="true"] .quest-selected { display:grid!important; position:absolute; right:12px; top:12px; place-items:center; background:#267c68; color:white; border:2px solid white; border-radius:50%; width:30px; height:30px; font-size:17px; }
.quest-panel { display:grid; grid-template-columns:minmax(250px,360px) minmax(240px,1fr) auto; padding:16px; gap:28px; border:1px solid #e1e4ce; border-radius:28px; background:linear-gradient(120deg,#fffdfa,#f8f9eb); box-shadow:0 10px 25px #43532a0e; }
.quest-scene { position:relative; display:block; min-height:0; padding:0; margin:0; overflow:hidden; border-radius:20px; background:#dae6c9; aspect-ratio:4/3; width:100%; }
.quest-scene img { display:block; width:100%;height:100%;object-fit:cover; animation:art-appear .4s ease-out; }.quest-scene-label { position:absolute; left:12px; bottom:12px; padding:6px 10px; background:#fff9e9e8; backdrop-filter:blur(8px); border-radius:20px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:#3b6552; font-weight:900; }
.quest-copy .eyebrow { color:#7b875f; font-size:11px; }.quest-copy h3 { color:#2a5143; font-size:29px; letter-spacing:-.035em; margin:8px 0 12px; }.quest-copy>p:not(.eyebrow,.quest-status) { color:#66745e; line-height:1.65; max-width:500px; font-size:16px; }.quest-copy progress { height:10px; margin-top:12px; }.quest-status { font-size:13px; line-height:1.45; }.quest-steps { display:flex; gap:8px; margin-top:12px; }.quest-steps span { display:grid; place-items:center; width:27px; height:27px; border:1px solid #dedfc7; color:#8b957d; background:#fffdfa; border-radius:50%; font-size:12px; font-weight:800; }.quest-steps .done { color:white; border-color:#328675; background:#328675; }.quest-steps .current { border:2px solid #dbac4c; color:#927328; background:#fff2d1; }.quest-action { padding:13px 22px; min-height:50px; align-self:center; white-space:nowrap; }.quest-action:disabled { background:#e5a291; color:#fff; opacity:.65; box-shadow:0 3px 0 #c28e79; }
.stage-changed .quest-scene { animation:chapter-reveal .7s ease-out; }.stage-changed .quest-copy h3 { animation:art-appear .5s; }
@keyframes art-appear { from {opacity:.3;transform:translateY(3px);} to {opacity:1;transform:none;} } @keyframes chapter-reveal { 0%{box-shadow:0 0 0 0 #d9b95566;} 50%{box-shadow:0 0 0 8px #d9b95544;} 100%{box-shadow:0 0 0 0 #d9b95500;} }
.grade-picker { max-width:620px; gap:12px; }.grade-picker button { text-align:left; padding:20px 24px; border-width:2px; border-color:#e0e3cc; background:#fffefa; font-size:23px; color:#345143; border-radius:20px; }.grade-picker small { font-size:12px; }.grade-picker button[aria-pressed="true"] { color:#1e6153; background:#e9f3df; border-color:#6a9f76; }
.location-grid { gap:22px; }.location-card { min-height:338px; padding:0; display:block; border:1px solid #e2e3d0; box-shadow:0 6px 18px #48542a12; border-radius:23px; background:var(--paper); }.location-card::after { display:none; }.location-art { position:relative; height:155px; overflow:hidden; background:#e7eccf; }.location-art>img { width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block;transition:transform .4s; }.location-card:hover .location-art>img { transform:scale(1.04); }.location-art .location-icon { position:absolute; bottom:12px; left:15px; width:40px;height:40px; font-size:23px; margin:0; border-radius:13px; transform:none; background:#fff9ecf0; box-shadow:0 3px 8px #28391720; }.location-play { position:absolute; bottom:16px;right:15px; font-size:22px; color:#294936; background:#fff9ecdf; border-radius:50%;width:30px;height:30px;display:grid;place-items:center; }.location-copy { padding:18px 20px 20px; }.location-card h3 { font-size:20px; line-height:1.15; margin:0 0 9px; color:#34543f; letter-spacing:-.02em; }.location-card p { font-size:13px; min-height:35px; margin-bottom:16px; line-height:1.4; }.mastery-mini { height:5px; }.mastery-caption { font-size:11px; display:block; }
.game-screen { background:radial-gradient(ellipse at 15% 20%,#e5edda,transparent 55%),radial-gradient(ellipse at 95% 85%,#fbebc8,transparent 55%),#fff8e9; }.game-shell { width:min(920px,calc(100% - 28px)); }.game-head { margin-bottom:14px; }.score-pill { border:1px solid #e6e4ce; box-shadow:none; }.progress-track { background:#e0e4ca; height:9px; }
.compact-quest { display:grid; grid-template-columns:108px 1fr auto; gap:18px; padding:10px 14px 10px 10px; border-radius:22px; margin:12px 0 18px; box-shadow:none; }.compact-quest .quest-scene { display:block; width:108px;aspect-ratio:4/3;border-radius:15px; min-height:0; }.compact-quest .quest-scene-label { display:none; }.compact-quest .quest-copy { min-width:0; }.compact-quest .quest-copy h3 { font-size:18px;margin:2px 0 4px; }.compact-quest .quest-copy>p:not(.eyebrow,.quest-status),.compact-quest .quest-steps { display:none; }.compact-quest .quest-copy .eyebrow { font-size:10px;margin:0; }.compact-quest .quest-copy progress { height:6px;margin:5px 0 0; }.compact-quest .quest-status { font-size:12px; margin:4px 0 0; }.compact-quest .quest-action { font-size:13px;min-height:44px;padding:10px 14px; }
.play-card { min-height:555px; border:1px solid #dfdec9; border-radius:30px; background:#fffef9; box-shadow:0 16px 35px #54693212; padding-top:30px; transition:box-shadow .3s; }.pippin-game { position:absolute;right:18px;top:9px;width:70px;height:70px;object-fit:contain;pointer-events:none; }.activity-icon { top:22px;font-size:25px; }.activity-instruction { margin:4px 60px 20px; font-size:15px; }.answer-button { color:#3e5546;border-color:#e3e4ce; background:#fffffd; border-radius:18px; box-shadow:0 4px 0 #d4d9be; }.answer-button:hover { border-color:#80a58a;background:#f1f7e6; }.answer-button.correct { background:#def2d0; border-color:#72a66b; color:#316c37; box-shadow:0 4px 0 #72a66b; }.answer-button.wrong { animation:none;border-color:#d8b689;background:#fff7df;color:#8c7148; }.answer-glow { box-shadow:0 0 0 3px #8abc7355,0 16px 35px #54693212; }.cheering { animation:pippin-cheer .75s ease-out; }
@keyframes pippin-cheer { 0%,100%{transform:translateY(0) rotate(0);} 40%{transform:translateY(-8px) rotate(-8deg);} 70%{transform:translateY(-3px) rotate(5deg);} }
.results-wrap { background:radial-gradient(ellipse at 50% 10%,#e6f2d5,#fff1d8); }.celebration-card { width:min(810px,100%); padding:0 36px 36px; overflow:hidden; border:1px solid #dcdcc4; background:var(--paper); }.celebration-art { position:relative; margin:0 -36px 26px; aspect-ratio:16/9; background:#efe7c9; overflow:hidden; }.celebration-art>img,.celebration-art>video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }.celebration-art>video { opacity:0; }.celebration-art>video.playing { opacity:1; }.celebration-toggle { position:absolute;bottom:12px;right:12px;z-index:2;min-height:44px;padding:9px 14px;border:1px solid #fffc;background:#fff8eae8;color:#3d624c;font:inherit;font-size:12px;font-weight:850;border-radius:24px;cursor:pointer; }.celebration-card h1 { font-size:42px;color:#31543e; }.celebration-card .quest-panel { grid-template-columns:190px 1fr; gap:18px;margin-bottom:28px;padding:12px; }.celebration-card .quest-action { grid-column:2;justify-self:start; }.celebration-card .quest-copy h3 { font-size:23px; }.reward-row { margin:22px 0; }.reward-row div { border:1px solid #ecead5; background:#f5f7e9; }.reward-row strong { color:#356446; }.unlock-banner { background:#fcf1c7; color:#756528; }
.cafe-room { background:url('/static/assets/cafe-v3.webp') center/cover; border:1px solid #d7d5b9; border-radius:28px; }.cafe-room::before,.cafe-room>.window,.cafe-room>.shelf,.cafe-room>.rug { display:none; }.cafe-kittens { width:95%;justify-content:center;flex-wrap:wrap;bottom:20px;gap:0; }.cafe-kittens img { width:clamp(100px,12vw,130px);height:auto;max-width:33%;object-fit:contain;filter:drop-shadow(0 9px 5px #5a3c3226); }.shop-card,.parent-card { border:1px solid #e2e3ce; }.parent-card { margin-bottom:20px; }.parent-card a { color:var(--teal-dark); }
@media(max-width:1020px) { .quest-panel { grid-template-columns:minmax(240px,320px) 1fr; gap:22px; }.quest-panel>.quest-action { grid-column:2;justify-self:start; }.compact-quest { grid-template-columns:95px 1fr auto;gap:14px; }.compact-quest>.quest-action { grid-column:auto; }.compact-quest .quest-scene { width:95px; }.quest-panel:not(.compact-quest) .quest-scene { grid-row:1/3;align-self:stretch;aspect-ratio:auto; }.quest-cover { height:145px; } }
@media(max-width:900px) { .village-hero { min-height:620px;align-items:center;padding:25px 0 80px; }.glass-card { margin-left:22px; margin-right:auto; }.guide-bubble { bottom:34px; }.location-grid { grid-template-columns:repeat(2,1fr); }.location-art { height:180px; } }
@media(max-width:620px) { .topbar { min-height:64px;gap:5px;padding:8px 10px; }.brand { gap:5px;padding:0; }.brand-paw,.brand-paw img { width:36px;height:36px; }.brand strong { font-size:14px; }.round-button { width:44px;height:44px; }.stat-chip { padding:7px;font-size:12px; }.stats { gap:3px; }.village-hero { min-height:725px; padding:26px 0 110px; align-items:start; background-size:auto 500px;background-repeat:no-repeat;background-position:64% 0;background-color:#ebf0d3; }.village-hero::after { height:40px; }.glass-card { margin:258px auto 0;width:calc(100% - 30px);padding:24px;background:#fffbedf2;border-radius:27px; }.hero-eyebrow { font-size:9px;margin-bottom:12px; }#home-title { font-size:43px;line-height:1; }.hero-copy>p:not(.eyebrow,.mission-note) { margin:14px 0 18px;font-size:14px;line-height:1.5; }.primary-button.big { padding:12px 18px;min-height:48px;font-size:16px; }.guide-bubble { bottom:17px;left:18px;right:18px;width:auto;min-height:69px;padding:12px 15px 12px 72px;box-shadow:0 5px 12px #2b5b3217; }.guide-cat { width:83px;height:83px;left:-9px; }.guide-bubble p { font-size:12px; }.mission-note { font-size:11px; }.content-wrap,.page-wrap { width:calc(100% - 30px);padding-top:27px; }.section-heading { gap:10px; }.section-heading h2 { font-size:27px; }.section-heading .text-button { font-size:12px;padding:9px;white-space:nowrap; }.content-wrap>p { font-size:13px; }.quest-choices { grid-template-columns:1fr;gap:12px; }.quest-choice { display:grid;grid-template-columns:122px 1fr;min-height:105px; }.quest-cover { width:122px;height:105px; }.quest-choice-copy { padding:17px 14px;align-self:center; }.quest-choice strong { font-size:16px;line-height:1.25; }.quest-choice small { font-size:11px;line-height:1.4; }.quest-choice[aria-pressed="true"] .quest-selected { width:24px;height:24px;top:8px;right:8px;font-size:13px; }.quest-panel { grid-template-columns:1fr;padding:12px;gap:15px;border-radius:24px; }.quest-panel:not(.compact-quest) .quest-scene { grid-row:auto;aspect-ratio:4/3;align-self:auto; }.quest-copy { padding:0 8px; }.quest-copy h3 { font-size:25px; }.quest-copy>p:not(.eyebrow,.quest-status) { font-size:14px; }.quest-panel>.quest-action { grid-column:auto;justify-self:stretch;width:100%; }.quest-copy progress { margin-top:8px; }.quest-status { font-size:12px; }.grade-picker button { padding:17px 18px;font-size:21px;min-height:82px; }.grade-picker small { font-size:11px; }.location-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.location-card { min-height:284px;border-radius:19px; }.location-art { height:112px; }.location-art .location-icon { width:30px;height:30px;left:9px;bottom:9px;font-size:18px;border-radius:10px; }.location-play { width:25px;height:25px;right:9px;bottom:11px;font-size:18px; }.location-copy { padding:14px 12px; }.location-card h3 { font-size:16px;min-height:37px; }.location-card p { font-size:11px;min-height:45px;line-height:1.4;margin-bottom:12px; }.mastery-caption { font-size:10px; }.game-shell { width:calc(100% - 18px); }.game-head { gap:7px; }.game-head .back-button { min-height:44px;padding:8px; }.mission-label strong { font-size:14px; }.mission-label span { font-size:10px; }.score-pill { font-size:13px;padding:8px; }.compact-quest { grid-template-columns:68px 1fr;margin:10px 0 12px;gap:10px;padding:8px;border-radius:19px; }.compact-quest .quest-scene { display:block;width:68px;aspect-ratio:1/1;border-radius:12px; }.compact-quest .quest-copy { padding:0; }.compact-quest .quest-copy h3 { font-size:15px; }.compact-quest .quest-copy .eyebrow { font-size:8px;letter-spacing:.07em; }.compact-quest .quest-status { font-size:10px;line-height:1.35; }.compact-quest>.quest-action { grid-column:1/-1;min-height:44px;width:100%;padding:9px;font-size:12px; }.compact-quest>.quest-action:disabled { display:none; }.play-card { min-height:520px;border-radius:24px;padding:25px 13px; }.activity-icon { top:19px;left:14px;font-size:23px; }.pippin-game { right:6px;top:5px;width:55px;height:55px; }.activity-instruction { margin:0 42px 17px;font-size:12px;line-height:1.45; }.question { font-size:42px; }.story-question { font-size:24px; }.feedback { font-size:15px;min-height:36px; }.answer-button { min-height:64px; }.celebration-card { padding:0 16px 26px; }.celebration-art { margin:0 -16px 20px; }.celebration-card h1 { font-size:30px; }.celebration-card .quest-panel { grid-template-columns:1fr; }.celebration-card .quest-action { grid-column:auto;width:100%; }.celebration-toggle { min-height:44px;padding:8px 12px;font-size:11px;bottom:8px;right:8px; }.reward-row div { padding:12px 6px; }.reward-row strong { font-size:24px; }.reward-row small { font-size:11px; }.cafe-room { min-height:450px; }.world-sparkles { display:none; } }
@media(prefers-reduced-motion:reduce) { .world-sparkles { display:none; } .quest-scene img,.cheering,.stage-changed .quest-scene { animation:none; } }
body.reduce-motion .world-sparkles { display:none; }