/* The Learning Garden — hub styles (loads after shared/gamekit.css) */

html, body { height: 100%; }

body {
    /* gamekit.css sets overflow:hidden for game boards; the hub may need to
       scroll vertically on short screens, but never horizontally. */
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #AEE7FF 0%, #D8F3FF 42%, #E9FBE3 100%);
}

/* ── decorative garden scene ─────────────────────────────────────────────── */

#scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

#sun {
    position: absolute;
    top: 4vh;
    left: 5vw;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #FFF0A6 0%, #FDCB4D 70%);
    box-shadow: 0 0 60px 24px rgba(252, 191, 73, 0.55);
    display: grid;
    place-items: center;
    animation: sun-rise 1s cubic-bezier(0.2, 1.35, 0.4, 1) both,
               sun-breathe 5s ease-in-out 1s infinite;
}
.sun-rays {
    position: absolute;
    inset: -36%;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 208, 74, 0.55) 0deg 6deg, transparent 6deg 21deg);
    -webkit-mask: radial-gradient(circle, #000 47%, transparent 63%);
            mask: radial-gradient(circle, #000 47%, transparent 63%);
    animation: sun-spin 30s linear infinite;
}
.sun-face { position: relative; width: 62%; height: 62%; }
.sun-face::before {   /* two eyes */
    content: ''; position: absolute; top: 30%; left: 24%;
    width: 8px; height: 10px; border-radius: 50%;
    background: #8a5a10; box-shadow: 22px 0 0 #8a5a10;
}
.sun-face::after {    /* smile */
    content: ''; position: absolute; top: 46%; left: 27%;
    width: 24px; height: 12px;
    border: 3px solid #8a5a10; border-top: 0;
    border-radius: 0 0 24px 24px;
}

@keyframes sun-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes sun-rise {
    from { transform: translate(-30px, -60px) scale(0.4); opacity: 0; }
    to   { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes sun-spin { to { transform: rotate(1turn); } }

.cloud {
    position: absolute;
    width: 130px;
    height: 42px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 40px;
    box-shadow: 28px -16px 0 6px rgba(255, 255, 255, 0.92),
                60px -6px 0 2px rgba(255, 255, 255, 0.92);
    animation: cloud-drift 60s linear infinite;
}

.cloud-a { top: 9vh; left: -160px; }
.cloud-b { top: 20vh; left: -160px; animation-delay: -32s; animation-duration: 80s; }

@keyframes cloud-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 320px)); }
}

#hill-far, #hill-near {
    position: absolute;
    bottom: -12vh;
    border-radius: 50%;
    animation: hill-grow 1s cubic-bezier(0.2, 1, 0.4, 1) both;
}

#hill-far {
    left: -22vw;
    width: 90vw;
    height: 34vh;
    background: #B7E28A;
    animation-delay: 0.15s;
}

#hill-near {
    right: -25vw;
    width: 100vw;
    height: 30vh;
    background: #9CD467;
    animation-delay: 0.28s;
}

@keyframes hill-grow {
    from { transform: translateY(40px) scaleX(0.9); opacity: 0; }
    to   { transform: translateY(0) scaleX(1); opacity: 1; }
}

.flower {
    position: absolute;
    bottom: 2vh;
    font-size: 30px;
    transform-origin: bottom center;
    /* sprout up (once), then gentle wiggle forever */
    animation: flower-sprout 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both,
               gk-wiggle 3s ease-in-out 0.7s infinite;
}

.f1 { left: 6%;  animation-delay: 0.55s, 0.9s; }
.f2 { left: 22%; bottom: 5vh; font-size: 26px; animation-delay: 0.7s, 1.4s; }
.f3 { right: 8%; font-size: 34px; animation-delay: 0.62s, 1.1s; }
.f4 { right: 24%; bottom: 5vh; font-size: 24px; animation-delay: 0.78s, 1.8s; }
.f5 { left: 46%; font-size: 24px; animation-delay: 0.85s, 2.1s; }
.f6 { left: 68%; bottom: 4vh; font-size: 28px; animation-delay: 0.72s, 1.6s; }

@keyframes flower-sprout {
    from { transform: translateY(24px) scale(0); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.spark { position: absolute; font-size: 20px; }
.s1 { top: 14vh; right: 12vw; }
.s2 { top: 30vh; left: 10vw; animation-delay: 0.8s; }
.s3 { top: 8vh;  left: 42vw; animation-delay: 1.4s; }
.s4 { top: 22vh; right: 26vw; font-size: 16px; animation-delay: 1.1s; }
.s5 { top: 40vh; right: 8vw; animation-delay: 0.4s; }

/* ── layout ──────────────────────────────────────────────────────────────── */

#hub {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 3vh, 34px);
    padding: clamp(12px, 3vh, 32px) clamp(12px, 4vw, 48px) clamp(28px, 5vh, 56px);
}

#hub-head { text-align: center; }

#hub-title {
    font-size: clamp(2rem, 5.4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: 1px;
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.85), 0 6px 14px rgba(90, 60, 130, 0.2);
    animation: title-sway 6s ease-in-out 1.1s infinite;
}

#hub-title span {
    display: inline-block;
    /* each letter springs in, staggered by --i (set in hub.js) */
    animation: letter-pop 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) calc(0.45s + var(--i, 0) * 0.04s) both;
}

/* rainbow letters */
#hub-title span:nth-child(6n+1) { color: #E63946; }
#hub-title span:nth-child(6n+2) { color: #F77F00; }
#hub-title span:nth-child(6n+3) { color: #E8A828; }
#hub-title span:nth-child(6n+4) { color: #7CB518; }
#hub-title span:nth-child(6n+5) { color: #00B4D8; }
#hub-title span:nth-child(6n+6) { color: #B565D8; }

@keyframes title-sway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
}
@keyframes letter-pop {
    from { transform: translateY(18px) scale(0); opacity: 0; }
    60%  { transform: translateY(-4px) scale(1.15); opacity: 1; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

#hub-tagline {
    margin-top: 6px;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    font-weight: bold;
    color: #4A3B5C;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
    animation: rise-in 0.6s ease-out 1.0s both;
}

.tap-hint { display: inline-block; }

/* ── rainbow + ambient life ──────────────────────────────────────────────── */

#rainbow {
    position: absolute;
    top: -9vh;
    left: 50%;
    width: min(430px, 70vw);
    height: auto;
    transform: translateX(-50%);
    opacity: 0.6;
    transform-origin: bottom center;
    animation: rainbow-arc 1.2s cubic-bezier(0.2, 1, 0.4, 1) 0.35s both;
}
@keyframes rainbow-arc {
    from { transform: translateX(-50%) translateY(26px) scale(0.7); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.6; }
}

.cloud-c { top: 5vh; left: -160px; animation-delay: -50s; animation-duration: 92s; opacity: 0.8; }

.bug { position: absolute; font-size: 26px; will-change: transform; }
.b1 { top: 34vh; left: -6vw; animation: fly-a 26s linear infinite; }
.b2 { top: 48vh; left: -6vw; font-size: 22px; animation: fly-b 34s linear 6s infinite; }
@keyframes fly-a {
    0%   { transform: translate(0, 0) rotate(6deg); }
    25%  { transform: translate(30vw, -10vh) rotate(-6deg); }
    50%  { transform: translate(58vw, 4vh) rotate(6deg); }
    75%  { transform: translate(84vw, -8vh) rotate(-6deg); }
    100% { transform: translate(112vw, 2vh) rotate(6deg); }
}
@keyframes fly-b {
    0%   { transform: translate(0, 0) rotate(-5deg); }
    33%  { transform: translate(38vw, 8vh) rotate(5deg); }
    66%  { transform: translate(72vw, -6vh) rotate(-5deg); }
    100% { transform: translate(112vw, 6vh) rotate(5deg); }
}

.balloon { position: absolute; bottom: -12vh; right: 12vw; font-size: 34px; animation: balloon-up 22s ease-in 4s infinite; }
@keyframes balloon-up {
    0%   { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(-6vw, -122vh) rotate(4deg); opacity: 0; }
}

@keyframes rise-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── grade-band jump bar (a playful, non-blocking "menu") ─────────────────── */

#band-nav {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    animation: rise-in 0.6s ease-out 1.1s both;
}
.band-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    color: #4A3B5C;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    padding: 12px 18px;
    min-height: 48px;
    box-shadow: 0 5px 14px rgba(90, 60, 130, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.band-chip:hover  { transform: translateY(-2px) scale(1.04); box-shadow: 0 9px 20px rgba(90, 60, 130, 0.22); }
.band-chip:active { transform: translateY(0) scale(0.97); }
.band-chip .chip-emoji { font-size: 1.15rem; }
.band-chip.chip-sprouts { box-shadow: 0 5px 14px rgba(255, 123, 172, 0.28); }
.band-chip.chip-buds    { box-shadow: 0 5px 14px rgba(0, 180, 216, 0.26); }
.band-chip.chip-bigkids { box-shadow: 0 5px 14px rgba(181, 101, 216, 0.28); }

/* ── Star Garden (cross-game meta-progression) ────────────────────────────── */

#star-garden {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 840px;
    background: rgba(255, 255, 255, 0.62);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    padding: 12px 18px 12px;
    box-shadow: 0 8px 22px rgba(90, 60, 130, 0.12);
    animation: rise-in 0.6s ease-out 1.25s both;
}
.sg-head {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    font-weight: 800;
    color: #4A3B5C;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
}
.sg-count {
    font-size: 0.85em;
    color: #7A6F92;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 2px 10px;
}
#sg-bed {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    min-height: 38px;
    margin-top: 4px;
}
.sg-flower {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    padding: 3px;
    cursor: pointer;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sg-flower:hover { transform: scale(1.25) rotate(-8deg); }
.sg-new { animation: sg-bloom 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.sg-pop { animation: sg-pop 0.4s ease-out; }
.sg-more { font-weight: 800; color: #7A6F92; padding-left: 6px; }
.sg-hint {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #7A6F92;
    margin: 4px 0 0;
}
@keyframes sg-bloom {
    from { transform: scale(0) rotate(-40deg); }
    to   { transform: scale(1) rotate(0); }
}
@keyframes sg-pop {
    40% { transform: scale(1.4) rotate(10deg); }
}

/* ── arrival: bands + tiles bloom up in a staggered cascade ───────────────── */

.band { animation: rise-in 0.6s ease-out both; }
.band-sprouts { animation-delay: 1.05s; --band-delay: 1.2s; }
.band-buds    { animation-delay: 1.15s; --band-delay: 1.3s; }
.band-bigkids { animation-delay: 1.25s; --band-delay: 1.4s; }

.card {
    /* 'backwards' hides the card during its delay but releases transform after
       so the :hover / :active lift still works once bloomed in. */
    animation: card-bloom 0.5s cubic-bezier(0.2, 1.5, 0.4, 1)
               calc(var(--band-delay, 1.8s) + var(--i, 0) * 0.05s) backwards;
}
@keyframes card-bloom {
    from { transform: translateY(26px) scale(0.85); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── game cards ──────────────────────────────────────────────────────────── */

/* ── grade-band sections ─────────────────────────────────────────────────── */

.band {
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.8vh, 20px);
}

.band-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 40px;
    padding: 8px 26px;
    box-shadow: 0 4px 14px rgba(90, 60, 130, 0.12);
}

.band-emoji { font-size: clamp(1.6rem, 3.2vw, 2.1rem); align-self: center; }

.band-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: bold;
    color: #4A3B5C;
}

.band-age {
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    font-weight: bold;
    color: #8A5FBF;
    background: #F4EDFB;
    border-radius: 30px;
    padding: 3px 14px;
}

.band-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(14px, 2.2vw, 26px);
    width: 100%;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: clamp(146px, 18vw, 196px);
    min-height: 208px;
    padding: 10px 10px 12px;
    background: var(--gk-white);
    border-radius: 26px;
    box-shadow: var(--gk-shadow);
    text-decoration: none;
    color: var(--gk-text);
    text-align: center;
    transition: transform 0.18s, box-shadow 0.18s;
}

.card:hover  { transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 36px rgba(90, 60, 130, 0.26); }
.card:active { transform: translateY(0) scale(0.97); }

.card-art {
    width: 100%;
    height: clamp(88px, 12vh, 110px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid #E7DCF3;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(90, 60, 130, 0.16);
}

.card-art.has-poster { padding: 0; }
.poster-svg { display: block; width: 100%; height: 100%; }

.art-emoji { font-size: clamp(52px, 7vh, 64px); line-height: 1; }

/* band-coloured frames — like an arcade cabinet marquee */
.band-sprouts .card-art { border-color: #FF8FB0; }
.band-buds    .card-art { border-color: #4FA3E8; }
.band-bigkids .card-art { border-color: #B06BDD; }

/* age label pill at the foot of each tile */
.card-grade {
    font-size: 0.82rem;
    font-weight: bold;
    color: #6B5B80;
    letter-spacing: 0.3px;
    margin-top: -2px;
}

.art-bakery   { background: linear-gradient(135deg, #FFD9A0 0%, #FF9F68 100%); }
.art-picnic   { background: linear-gradient(135deg, #C3F0FF 0%, #8AD9A2 100%); }
.art-meadow   { background: linear-gradient(135deg, #D9F7C0 0%, #7CB518 100%); }
.art-sparkle  { background: linear-gradient(135deg, #E7C6FF 0%, #FF7BAC 100%); }
.art-toycatch { background: linear-gradient(135deg, #BDE8FF 0%, #5FB0E8 100%); }
.art-berry    { background: linear-gradient(135deg, #F5C6FF 0%, #B565D8 100%); }
.art-sun      { background: linear-gradient(135deg, #FFE59E 0%, #FF8C6B 100%); }
.art-sky      { background: linear-gradient(135deg, #CFEDFF 0%, #7FB8F0 100%); }
.art-space    { background: linear-gradient(135deg, #6E7BE0 0%, #3A3E7A 100%); }
.art-lagoon   { background: linear-gradient(135deg, #A6F0E0 0%, #2BB3C0 100%); }

/* co-op / play-together badge */
.card-coop {
    position: absolute;
    top: -10px;
    left: -8px;
    background: #E7F7D0;
    border: 2px solid #7CB518;
    border-radius: 30px;
    font-size: 0.95rem;
    line-height: 1;
    padding: 5px 9px;
    box-shadow: 0 3px 8px rgba(90, 60, 130, 0.18);
    z-index: 2;
}

.card-name {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-weight: bold;
    line-height: 1.2;
}

.card-skill {
    font-size: 0.92rem;
    font-weight: bold;
    color: #6B5B80;
    background: #F4EDFB;
    border-radius: 30px;
    padding: 4px 14px;
}

.card-stars {
    position: absolute;
    top: -10px;
    right: -8px;
    background: #FFF3B0;
    border: 2px solid #E8A828;
    color: #7A5A00;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 30px;
    padding: 4px 10px;
    box-shadow: 0 4px 10px rgba(90, 60, 130, 0.2);
    transform: rotate(6deg);
}

/* ── grown-ups info ──────────────────────────────────────────────────────── */

.hub-controls {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s;
    flex: none;
}

.info-btn:hover  { transform: scale(1.1); }
.info-btn:active { transform: scale(0.92); }

/* labelled "Grown-ups" pill so parents know where progress & settings live */
.grownups-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 56px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
    color: #4A3B5C;
    font: inherit;
    font-weight: 800;
    font-size: clamp(0.9rem, 2.4vw, 1.05rem);
    cursor: pointer;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.grownups-btn .gu-emoji { font-size: 1.3rem; }
.grownups-btn:hover  { transform: scale(1.05); }
.grownups-btn:active { transform: scale(0.94); }
/* signed-in indicator: a small green dot when a parent account is active */
.grownups-btn { position: relative; }
.grownups-btn.gu-signedin::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 13px; height: 13px;
    background: #34A853; border: 2.5px solid #fffdf8; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* parent tools: road-trip mode + the trust proof */
.gu-links { display: grid; gap: 8px; margin: 0 0 14px; }
.gu-link {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    text-decoration: none; font-weight: 700; color: var(--gk-text, #4A3B5C);
    background: rgba(124, 181, 24, 0.10); border: 1.5px solid rgba(124, 181, 24, 0.28);
    border-radius: 12px; padding: 10px 14px; font-size: 0.98rem;
    transition: transform 0.12s, background 0.12s;
}
.gu-link span { font-weight: 500; font-size: 0.82rem; color: #7A6F92; }
.gu-link:hover { transform: translateY(-1px); background: rgba(124, 181, 24, 0.16); }

/* signed-in variant of the parent-account entry (a calm "connected" blue) */
.gu-link.is-signedin { background: rgba(0, 180, 216, 0.10); border-color: rgba(0, 180, 216, 0.32); }
.gu-link.is-signedin:hover { background: rgba(0, 180, 216, 0.16); }
.gu-link.is-signedin b { font-weight: 800; word-break: break-word; }
.gu-link.is-signedin span { color: #2E7D32; }
.gu-signout {
    display: block; width: 100%; box-sizing: border-box; margin: 0; min-height: 48px;
    padding: 12px 14px; border: 1.5px solid rgba(124, 181, 24, 0.22); border-radius: 12px;
    background: rgba(0, 0, 0, 0.02); color: #7A6F92; font-family: inherit; font-weight: 700;
    font-size: 0.92rem; text-align: center; cursor: pointer; transition: background 0.12s;
}
.gu-signout:hover { background: rgba(0, 0, 0, 0.05); }
.gu-signout:focus-visible { outline: 3px solid var(--gk-purple, #7a5cff); outline-offset: 2px; }

/* changeable child-age control in the grown-ups panel */
.gu-age {
    display: block; width: 100%; box-sizing: border-box; margin: -4px 0 14px; min-height: 48px;
    padding: 11px 14px; border: 1.5px dashed rgba(124, 181, 24, 0.38); border-radius: 12px;
    background: transparent; color: #7A6F92; font-family: inherit; font-weight: 700;
    font-size: 0.92rem; text-align: center; cursor: pointer; transition: background 0.12s;
}
.gu-age span { font-weight: 600; }
.gu-age:hover { background: rgba(124, 181, 24, 0.08); }
.gu-age:focus-visible { outline: 3px solid var(--gk-purple, #7a5cff); outline-offset: 2px; }

/* first-run age flower (one-tap, no typing, no account) */
.ob-scrim {
    position: fixed; inset: 0; z-index: 98000; display: flex; align-items: center;
    justify-content: center; padding: 20px; background: rgba(24, 20, 40, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ob-card {
    width: min(94vw, 420px); background: #fffdf8; color: #2c2140; border-radius: 26px;
    padding: 26px 24px 22px; box-shadow: 0 24px 64px rgba(30, 20, 60, 0.4); text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; animation: ob-in 0.32s ease both;
}
.ob-art { font-size: 2.4rem; line-height: 1.1; }
.ob-title { margin: 6px 0 2px; font-size: 1.42rem; font-weight: 800; letter-spacing: -0.01em; }
.ob-sub { margin: 0 0 16px; color: #6d6382; font-size: 0.96rem; line-height: 1.45; }
.ob-ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 12px; }
.ob-age {
    -webkit-appearance: none; appearance: none; border: 0; border-radius: 16px; cursor: pointer;
    background: #efeaff; color: #3b2d63; font-family: inherit; min-height: 76px; padding: 12px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transition: transform 0.08s, background 0.12s;
}
.ob-age .e { font-size: 1.7rem; line-height: 1; }
.ob-age .n { font-size: 1.15rem; font-weight: 800; }
.ob-age:hover { background: #e4dcff; }
.ob-age:active { transform: scale(0.94); }
.ob-age:focus-visible { outline: 3px solid #3b2d63; outline-offset: 2px; }
.ob-skip {
    margin-top: 4px; min-height: 48px; background: none; border: 0; color: #8a7fa6;
    font-size: 0.92rem; font-weight: 600; text-decoration: underline; cursor: pointer;
    font-family: inherit; padding: 8px 10px;
}
.ob-skip:focus-visible { outline: 3px solid #3b2d63; outline-offset: 2px; }
@keyframes ob-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* brief highlight of the band a parent's chosen age points to */
.band.ob-hi > .band-head { animation: ob-pulse 1.3s ease-out 2; border-radius: 16px; }
@keyframes ob-pulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 181, 24, 0.45); }
    100% { box-shadow: 0 0 0 20px rgba(124, 181, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-card, .ob-age { animation: none; transition: none; }
    .band.ob-hi > .band-head { animation: none; }
}

/* progress call-to-action: the first, most prominent action in the panel */
.progress-cta {
    display: block;
    text-decoration: none;
    text-align: center;
    margin: 4px 0 14px;
    background: linear-gradient(135deg, #7CB518, #00B4D8);
    color: #fff;
    font-size: 1.1rem;
}
.music-btn:not(.music-off) { animation: hub-music-bob 1.5s ease-in-out infinite; }
.music-btn.music-off { opacity: 0.5; filter: grayscale(0.75); }
@keyframes hub-music-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .music-btn { animation: none !important; } }

#info-pop {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 59, 92, 0.45);
    animation: gk-fade-in 0.25s ease-out;
    padding: 20px;
}

#info-card {
    max-width: min(92vw, 520px);
    max-height: 86vh;
    overflow-y: auto;
    animation: gk-pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

#info-card h2 { color: var(--gk-purple); margin-bottom: 10px; }
#info-card p  { margin: 10px 0; font-size: 1rem; line-height: 1.45; }
#info-card ul { margin: 10px 0 10px 6px; list-style: none; }
#info-card li { margin: 6px 0; font-size: 0.98rem; }
#info-card .gk-btn { display: block; margin: 14px auto 2px; }

/* ── viewport tuning ─────────────────────────────────────────────────────── */

/* Portrait tablet (768x1024): 2 columns, roomier cards */
@media (max-width: 860px) {
    .card { width: clamp(200px, 42vw, 300px); }
}

/* Short landscape screens: shrink art so all 5 cards fit without scrolling */
@media (max-height: 820px) and (min-width: 861px) {
    .card { min-height: 190px; }
    .card-art { height: 80px; }
    .art-emoji { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    /* No motion: skip the "wake up" sequence and ambient drift; every element
       falls back to its (visible) base style so the garden is simply there. */
    #hub-title, #hub-title span, #hub-tagline, #sun, .sun-rays, .cloud, .flower,
    #hill-far, #hill-near, #rainbow, .bug, .balloon, .spark,
    #band-nav, .band, .card, #star-garden, .sg-new, .sg-pop,
    #garden-path, .gp-step, .sg-golden {
        animation: none !important;
    }
}

/* ── Today's Garden Path (shared/path.js) ─────────────────────────────────── */

#garden-path {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 840px;
    background: linear-gradient(135deg, rgba(255, 250, 235, 0.9), rgba(240, 250, 255, 0.85));
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
    padding: 12px 16px 12px;
    box-shadow: 0 8px 22px rgba(90, 60, 130, 0.12);
    animation: rise-in 0.6s ease-out 1.1s both;
}
#garden-path.gp-all-done {
    border-color: #FFD700;
    box-shadow: 0 8px 26px rgba(240, 180, 30, 0.3);
}
.gp-path-head {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    font-weight: 800;
    color: #4A3B5C;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
}
.gp-vine {
    font-size: 0.82em;
    color: #4C7A11;
    background: rgba(234, 249, 214, 0.95);
    border-radius: 999px;
    padding: 2px 10px;
}
.gp-path-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}
@media (min-width: 620px) { .gp-path-row { grid-template-columns: repeat(3, 1fr); } }
.gp-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.1);
    transition: transform 0.12s, box-shadow 0.12s;
    position: relative;
}
.gp-step:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(90, 60, 130, 0.18); }
.gp-step-kind {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #7A6F92;
    text-transform: uppercase;
}
.gp-step-name {
    font-weight: 800;
    color: #4A3B5C;
    font-size: 0.98rem;
    line-height: 1.25;
    padding-right: 28px;
}
.gp-step-stamp {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
}
.gp-step.gp-done { background: rgba(234, 249, 214, 0.95); }
.gp-step.gp-done .gp-step-name { text-decoration: line-through; text-decoration-thickness: 2px; color: #6B8E4E; }
.gp-path-hint {
    text-align: center;
    font-size: 0.88rem;
    color: #7A6F92;
    margin-top: 8px;
}
.gp-path-gold { color: #B8860B; font-weight: 800; }

/* golden path flowers inside the Star Garden bed */
.sg-golden { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85)); }

/* Explore-by-topic footer — parent-facing internal links (SEO + discovery). */
.hub-footer { max-width: 760px; margin: 44px auto 10px; padding: 22px 18px 6px; text-align: center; border-top: 1px solid rgba(124,181,24,.18); }
.hub-footer-title { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a7fa6; margin: 0 0 12px; }
.hub-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 0 14px; padding: 0; }
.hub-footer-links a { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; font-size: .9rem; font-weight: 700; color: #4c7a11; text-decoration: none; background: rgba(255,253,248,.92); border: 1px solid rgba(124,181,24,.28); border-radius: 999px; padding: 8px 16px; transition: transform .08s ease, background .15s ease; }
.hub-footer-links a:hover { background: #eaf9d6; transform: translateY(-1px); }
.hub-footer-links a:focus-visible { outline: 3px solid #7CB518; outline-offset: 2px; }
.hub-footer-note { font-size: .8rem; color: #a99fb8; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hub-footer-links a { transition: none; } }

/* ── "Tell a friend" copy-link toast ─────────────────────────────────────── */
#gu-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    z-index: 3000;
    max-width: min(90vw, 420px);
    background: #4A3B5C;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: 12px 20px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(40, 25, 70, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    text-align: center;
    word-break: break-word;
}
#gu-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #gu-toast { transition: opacity .2s ease; } }