/* The kid-friendly layer over app.css (loaded right after it, on every page):
   a round display font, softer and sunnier colours, bouncier buttons, and Gấu
   the mascot (templates/_mascot.html).

   Friendly, not noisy: nothing here flashes or loops fast, and all movement is
   switched off for people who ask for reduced motion. */

:root {
    --font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    --sun: #ffc93c;
    --sun-50: #fff6d9;
    --pink: #ff8fab;
    --pink-50: #ffeef3;
    --mint: #4fd1a5;
    --mint-50: #e6faf3;
    --sky-50: #e6f3fb;
    --radius: 24px;
    --radius-sm: 16px;
}

body {
    background:
        radial-gradient(900px 480px at 105% -8%, rgba(255, 201, 60, 0.22), transparent 60%),
        radial-gradient(760px 460px at -12% 4%, rgba(255, 143, 171, 0.2), transparent 60%),
        radial-gradient(900px 520px at 50% 115%, rgba(79, 209, 165, 0.16), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

h1, h2, h3,
.appbar h1, .brand-mark, .btn, .chip, .tab-label,
.auth-card button[type="submit"] { font-family: var(--font-display); }

.appbar h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: 0; }
.brand-mark b { color: var(--pink); }
.card h2, .card h3 { font-size: 1.2rem; font-weight: 700; }

/* Buttons you want to press: chunky, with a "floor" that gives way under the finger */
.btn { font-size: 1.02rem; font-weight: 700; padding: 12px 20px; }
.btn.primary-btn,
.btn-brand,
.auth-card button[type="submit"] {
    background: linear-gradient(180deg, #6f8bff, var(--brand));
    box-shadow: 0 4px 0 var(--brand-700), 0 10px 20px rgba(79, 109, 245, 0.28);
}
.btn.primary-btn:hover,
.btn-brand:hover { background: linear-gradient(180deg, #7f98ff, var(--brand)); }
.btn.primary-btn:active,
.btn-brand:active,
.auth-card button[type="submit"]:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--brand-700), 0 4px 10px rgba(79, 109, 245, 0.25);
}
.btn-brand:disabled, .btn-brand:disabled:hover { box-shadow: none; transform: none; }

.chip { font-size: 0.95rem; font-weight: 600; }
.chip.is-on { box-shadow: 0 3px 0 var(--brand-700); }

.tab.active .tab-icon { background: var(--sun-50); }
.tab.active { color: var(--brand-600); }

/* ---------- Child avatars: an animal on a pastel tile ---------- */
span.child-avatar { font-size: 1.7rem; border-radius: 18px; line-height: 1; }   /* span.: over the letter-sized rule in pages.css */
.child-avatar.tone-0 { background: var(--sun-50); }
.child-avatar.tone-1 { background: var(--pink-50); }
.child-avatar.tone-2 { background: var(--mint-50); }
.child-avatar.tone-3 { background: var(--sky-50); }

/* ---------- Gấu ---------- */
.mascot { display: inline-block; width: 140px; line-height: 0; }
.mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.mascot.small { width: 84px; }
.mascot.big { width: 190px; }

/* Every face part is drawn; the mood picks which ones show */
.mascot .m-eyes-open, .mascot .m-eyes-happy, .mascot .m-eyes-sleep,
.mascot .m-mouth-smile, .mascot .m-mouth-cheer, .mascot .m-mouth-o, .mascot .m-mouth-sleep,
.mascot .m-brows, .mascot .m-zzz, .mascot .m-sparkles { display: none; }

.mascot[data-mood="calm"] .m-eyes-open,
.mascot[data-mood="calm"] .m-mouth-smile,
.mascot[data-mood="remind"] .m-eyes-open,
.mascot[data-mood="remind"] .m-brows,
.mascot[data-mood="remind"] .m-mouth-o,
.mascot[data-mood="cheer"] .m-eyes-happy,
.mascot[data-mood="cheer"] .m-mouth-cheer,
.mascot[data-mood="cheer"] .m-sparkles,
.mascot[data-mood="sleep"] .m-eyes-sleep,
.mascot[data-mood="sleep"] .m-mouth-sleep,
.mascot[data-mood="sleep"] .m-zzz { display: inline; }

@media (prefers-reduced-motion: no-preference) {
    .mascot .m-body { transform-origin: 50% 90%; animation: gau-breathe 4.5s ease-in-out infinite; }
    .mascot[data-mood="calm"] .m-eyes-open,
    .mascot[data-mood="remind"] .m-eyes-open { transform-box: fill-box; transform-origin: center; animation: gau-blink 5.5s infinite; }
    .mascot[data-mood="remind"] .m-body { animation: gau-tilt 2.6s ease-in-out infinite; }
    .mascot[data-mood="cheer"] .m-body { animation: gau-hop 0.9s ease-in-out 3; }
    .mascot[data-mood="cheer"] .m-sparkles { transform-box: fill-box; transform-origin: center; animation: gau-twinkle 1.6s ease-in-out infinite; }
    .mascot[data-mood="sleep"] .m-body { animation-duration: 6.5s; }
    .mascot[data-mood="sleep"] .m-zzz { animation: gau-zzz 3s ease-in-out infinite; }
}

@keyframes gau-breathe { 50% { transform: scale(1.025, 0.985); } }
@keyframes gau-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes gau-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes gau-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
@keyframes gau-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@keyframes gau-zzz { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* ---------- Speech bubble (what Gấu says) ---------- */
.bubble {
    position: relative; display: inline-block; max-width: 22em; padding: 12px 20px; border-radius: 22px;
    background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    line-height: 1.3; text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
}
.bubble::before {
    content: ""; position: absolute; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px;
    background: inherit; border-radius: 4px; transform: rotate(45deg);
}

/* ---------- Stars: something to collect for sitting well ---------- */
.stars { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 1.6rem; line-height: 1; }
.stars .star-new { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .stars .star-new { animation: star-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }
}
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* ---------- Pages with Gấu on them ---------- */
.auth-brand .mascot { margin-bottom: 4px; }
.error-page .mascot { margin-bottom: 8px; }
.hello { display: flex; align-items: center; gap: 14px; }
.hello .mascot { flex: none; }
.hello p { margin: 0; line-height: 1.45; }
.hello strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }