:root {
  color-scheme: light;
  --cream: #FAF8F4;
  --paper: #FFFFFF;
  --ink: #34313B;
  --muted: #716D79;
  --lavender: #A58BDD;
  --lavender-dark: #7157AA;
  --lavender-soft: #EEE7FA;
  --rose: #F5DDE6;
  --yellow: #F8E8AD;
  --mint: #DCEFE5;
  --line: rgba(52, 49, 59, .075);
  --heading: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; min-height: 100vh; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 15px; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
.svg-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { width: min(100%, 540px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom)); }

.brandbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 23px/1 var(--heading); letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 15px 15px 15px 7px; background: var(--lavender); color: white; transform: rotate(-3deg); }
.brand-mark svg { width: 19px; height: 19px; stroke-width: 1.8; }
.profile-button { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; min-width: 68px; min-height: 46px; padding: 5px 9px 5px 5px; border: 0; border-radius: 18px; background: white; }
.profile-button > svg { width: 17px; height: 17px; color: var(--muted); }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 14px; background: var(--rose); color: #8A5870; font: 800 14px var(--heading); }

.welcome { display: grid; gap: 18px; margin-bottom: 40px; }
.eyebrow { margin: 0 0 8px; color: #928D98; font-size: 10px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; max-width: 330px; font: 800 clamp(32px, 9.2vw, 42px)/1.02 var(--heading); letter-spacing: -.045em; }
h1 span:not(:empty)::before { content: ", "; }
.age-pill { display: flex; align-items: center; gap: 11px; justify-self: start; max-width: 100%; padding: 11px 15px; border-radius: 999px; background: var(--lavender-soft); color: var(--lavender-dark); }
.age-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 0 5px rgba(165,139,221,.16); }
.age-pill > span:last-child { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.age-pill strong { font: 800 13px var(--heading); }
.age-pill small { overflow: hidden; color: #73668B; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.section-heading { display: flex; align-items: end; justify-content: space-between; }
.hero-heading { margin: 0 4px 18px; }
.section-heading h2, .section-title-row h2 { margin: 0; font: 800 clamp(31px, 9vw, 40px)/1 var(--heading); letter-spacing: -.04em; }
.heading-note { margin: 5px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.heading-spark { width: 38px; height: 38px; margin: 0 5px 2px 0; color: var(--lavender); stroke-width: 1.5; }

.hero-card { position: relative; isolation: isolate; height: clamp(355px, 104vw, 450px); overflow: hidden; border-radius: 32px 32px 32px 14px; background: var(--lavender-soft); }
.hero-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 54%, rgba(40,31,51,.52) 100%); pointer-events: none; }
.hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 88px 24px 24px; color: white; }
.hero-label { display: inline-flex; margin: 0 0 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 9px; font-weight: 600; letter-spacing: .12em; backdrop-filter: blur(10px); }
.hero-overlay h3 { margin: 0 0 7px; max-width: 90%; font: 800 26px/1.07 var(--heading); letter-spacing: -.025em; }
.hero-overlay > p:last-child { display: -webkit-box; overflow: hidden; max-width: 92%; margin: 0; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-card.has-image::after { background: linear-gradient(180deg, transparent 72%, rgba(40,31,51,.30) 100%); }
.hero-card.has-image .hero-overlay { padding: 20px; }
.hero-card.has-image .hero-overlay h3, .hero-card.has-image .hero-overlay > p:last-child { display: none; }

.recommendation, .sections { margin-top: 52px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 4px 18px; }
.section-title-row h2 { font-size: clamp(27px, 7.7vw, 34px); }
.duration-pill { flex: 0 0 auto; margin-bottom: 2px; padding: 8px 12px; border-radius: 999px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: 11px; font-weight: 600; }

.game-card { padding: 22px; border-radius: 28px 28px 28px 12px; background: var(--paper); scroll-margin-top: 24px; }
.game-topline { display: flex; align-items: center; min-height: 44px; }
.card-type { color: var(--lavender-dark); font-size: 13px; font-weight: 600; }
.heart-action { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 16px; background: #F5F2F0; color: #96909A; transition: color .2s ease, background .2s ease, transform .2s ease; }
.heart-action svg { width: 21px; height: 21px; }
.heart-action.saved { background: var(--rose); color: #A55379; }
.heart-action.saved svg { fill: currentColor; animation: heart-pop .38s ease both; }
.game-illustration { position: relative; height: 132px; margin: 13px 0 23px; overflow: hidden; border-radius: 24px 24px 24px 10px; background: var(--lavender-soft); }
.game-blob { position: absolute; display: grid; place-items: center; width: 116px; height: 116px; left: 50%; top: 9px; border-radius: 46% 54% 55% 45% / 51% 42% 58% 49%; background: var(--lavender); color: white; transform: translateX(-50%) rotate(-6deg); }
.game-blob svg { width: 48px; height: 48px; stroke-width: 1.35; transform: rotate(6deg); }
.shape-dot { position: absolute; width: 18px; height: 18px; left: 30px; top: 27px; border-radius: 50%; background: var(--yellow); }
.shape-ring { position: absolute; width: 32px; height: 32px; right: 27px; bottom: 20px; border: 7px solid var(--rose); border-radius: 50%; }
.shape-star { position: absolute; right: 34px; top: 18px; color: white; }
.shape-star svg { width: 24px; height: 24px; stroke-width: 1.4; }
.game-card > h3 { margin: 0 0 10px; font: 800 clamp(21px, 6vw, 25px)/1.1 var(--heading); letter-spacing: -.025em; }
.game-description { margin: 0; color: #5F5A65; font-size: 14px; line-height: 1.55; }
.need-row { display: flex; align-items: center; gap: 12px; margin: 20px 0; padding: 14px 15px; border-radius: 18px; background: #F7F5F1; }
.need-row > svg { flex: 0 0 auto; width: 21px; color: var(--lavender-dark); }
.need-row > span { display: grid; gap: 3px; }
.need-row small { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.need-row strong { font-size: 12px; font-weight: 600; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 18px; background: var(--ink); color: white; font-size: 13px; font-weight: 600; transition: transform .18s ease, background .18s ease; }
.primary-action svg { width: 18px; }
.primary-action:disabled { opacity: .62; }
.primary-action:disabled svg { animation: spin .8s linear infinite; }
.reaction-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.reaction-row button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px; border: 0; border-radius: 16px; background: #F7F5F1; color: var(--muted); font-size: 11px; font-weight: 600; transition: color .2s ease, background .2s ease; }
.reaction-row svg { width: 15px; height: 15px; }
.reaction-row button.selected { background: var(--lavender-soft); color: var(--lavender-dark); }

.section-title-row.compact { margin-bottom: 18px; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.section-card { position: relative; display: grid; align-content: space-between; min-height: 148px; padding: 17px; overflow: hidden; border: 0; border-radius: 26px 26px 26px 10px; background: white; text-align: left; transition: transform .18s ease, background .18s ease; }
.section-card.lavender-card { background: var(--lavender-soft); }
.section-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; align-self: end; }
.section-card strong { font: 800 19px/1.05 var(--heading); letter-spacing: -.02em; }
.section-card small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.3; }
.icon-disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 18px; background: rgba(255,255,255,.8); color: var(--ink); }
.icon-disc svg { width: 22px; height: 22px; }
.yellow-disc { background: var(--yellow); color: #796327; }
.mint-disc { background: var(--mint); color: #47705B; }
.rose-disc { background: var(--rose); color: #8B5D73; }
.arrow { position: absolute; right: 17px; top: 17px; width: 17px; height: 17px; color: #A8A2AC; }

.support-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11px; margin-top: 11px; scroll-margin-top: 24px; }
.support-card { position: relative; min-height: 218px; padding: 18px; overflow: hidden; border-radius: 28px 28px 28px 11px; background: white; }
.development-card { background: var(--mint); }
.support-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 54px; border-radius: 16px; background: rgba(255,255,255,.76); }
.support-icon svg { width: 19px; height: 19px; }
.support-copy { position: relative; z-index: 2; }
.support-card > p, .support-copy > p { margin: 0 0 6px; color: var(--muted); font-size: 10px; font-weight: 600; }
.support-card h3 { margin: 0 0 8px; font: 800 18px/1.1 var(--heading); letter-spacing: -.02em; }
.support-card small { display: -webkit-box; overflow: hidden; color: #625E67; font-size: 11px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.development-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .23; mix-blend-mode: multiply; }
.development-card.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(220,239,229,.12), rgba(220,239,229,.92) 70%); }
.walk-card { background: var(--yellow); }

.mom-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; min-height: 164px; margin-top: 11px; padding: 24px; overflow: hidden; border-radius: 30px 30px 30px 12px; background: var(--rose); scroll-margin-top: 24px; }
.mom-symbol { display: grid; place-items: center; width: 68px; height: 92px; border-radius: 34px 34px 15px 15px; background: rgba(255,255,255,.65); color: #8E6075; transform: rotate(-4deg); }
.mom-symbol svg { width: 31px; height: 31px; }
.mom-copy { position: relative; z-index: 1; }
.mom-copy .eyebrow { margin-bottom: 7px; color: #93677B; }
.mom-copy h3 { margin: 0 0 8px; font: 800 21px/1.08 var(--heading); letter-spacing: -.025em; }
.mom-copy > p:last-child { margin: 0; color: #735A66; font-size: 12px; line-height: 1.45; }
.mom-spark { position: absolute; right: -12px; top: -12px; width: 82px; height: 82px; color: rgba(255,255,255,.4); stroke-width: 1; }

.status { position: fixed; z-index: 30; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: calc(100% - 36px); padding: 0; border-radius: 999px; background: var(--ink); color: white; font-size: 11px; font-weight: 600; text-align: center; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease, padding .2s ease; }
.status:not(:empty) { padding: 11px 15px; opacity: 1; transform: translate(-50%, 0); }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 540px); padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(52,49,59,.05); background: rgba(255,255,255,.92); backdrop-filter: blur(18px); transform: translateX(-50%); }
.bottom-nav button { display: grid; place-items: center; gap: 5px; min-height: 52px; border: 0; border-radius: 18px; background: transparent; color: #9C97A2; transition: color .18s ease, background .18s ease, transform .18s ease; }
.bottom-nav svg { width: 21px; height: 21px; }
.bottom-nav small { font-size: 9px; font-weight: 600; }
.bottom-nav button.active { background: var(--lavender-soft); color: var(--lavender-dark); }

button:focus-visible, a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
button:active { transform: scale(.975); }
.section-card:active { transform: translateY(1px) scale(.985); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heart-pop { 0% { transform: scale(.65); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 359px) {
  .app-shell { padding-inline: 14px; }
  .hero-card { height: 340px; border-radius: 28px 28px 28px 12px; }
  .section-card { min-height: 138px; padding: 14px; }
  .game-card { padding: 18px; }
  .game-illustration { height: 118px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card { min-height: 182px; }
}
@media (min-width: 430px) { .app-shell { padding-inline: 22px; } .game-card { padding: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .brandbar, .welcome, .hero-section, .recommendation, .sections, .support-grid, .mom-card { animation: rise .5s ease both; }
  .welcome { animation-delay: .04s; }
  .hero-section { animation-delay: .08s; }
  .recommendation { animation-delay: .13s; }
  .sections { animation-delay: .17s; }
  .support-grid, .mom-card { animation-delay: .21s; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }