:root {
  --pink: #ef7faf;
  --pink-dark: #bd4c82;
  --pink-soft: #ffd9ea;
  --pink-pale: #fff0f7;
  --pink-lightest: #fff9fc;
  --lavender: #ddceff;
  --yellow: #ffe991;
  --ink: #63344d;
  --white: #fff;
  --shadow: 0 14px 34px rgba(213, 91, 148, .14);
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; overflow-x: hidden; overflow-y: visible; touch-action: pan-y; overscroll-behavior-y: auto; background: var(--pink-lightest); color: var(--ink); font: 16px/1.65 "Nunito", sans-serif; }
main { display: block; min-height: 100vh; }
a { color: inherit; }
button { font: inherit; }

.site-header {
  min-height: 82px; display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(22px, 6vw, 92px); background: #fff; border-bottom: 3px dashed #ffd2e5;
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; font: 700 1.45rem "Fredoka", sans-serif; color: #a94274; }
.brand-mark { color: var(--pink); font-size: 2rem; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { text-decoration: none; font-weight: 800; color: #8e4669; }
.site-header nav a:hover { color: var(--pink); }
.menu-button { display: none; background: var(--pink-pale); border: 2px solid var(--pink-soft); border-radius: 999px; padding: 8px 16px; color: var(--pink-dark); font-weight: 800; }

.hero {
  min-height: 620px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(35px, 6vw, 86px); align-items: center; padding: 65px clamp(22px, 6vw, 92px) 76px;
  background-color: #fff5fa;
  background-image: radial-gradient(#ffc9df 2px, transparent 2px), linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,224,239,.8));
  background-size: 28px 28px, auto;
}
.hero-copy { max-width: 620px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 900; color: var(--pink-dark); margin: 0 0 12px; }
.hero h1, .section-heading h2, .latest h2, .about h2 {
  font-family: "Fredoka", sans-serif; line-height: 1.02; margin: 0; letter-spacing: -.025em;
}
.hero h1 { font-size: clamp(3.3rem, 6.5vw, 6.2rem); color: #9e4770; }
.hero h1 em { display: block; color: var(--pink); font-style: normal; }
.intro { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 560px; margin: 24px 0 32px; }
.primary-button {
  display: inline-flex; align-items: center; gap: 14px; background: var(--pink); color: #fff;
  text-decoration: none; font-weight: 900; padding: 14px 23px; border: 3px solid #fff; outline: 2px solid var(--pink);
  border-radius: 18px; box-shadow: 0 8px 20px rgba(218, 101, 155, .22);
}
.primary-button:hover { background: #df6a9e; transform: translateY(-2px) rotate(-1deg); }
.hero-image-wrap { position: relative; }
.hero-image-wrap:before { content: ""; position: absolute; inset: -13px; background: #fff; border: 3px solid #ffd0e3; border-radius: 34px; box-shadow: var(--shadow); z-index: 0; transform: rotate(1deg); }
.hero-image-wrap img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 24px; position: relative; }
.image-note { position: absolute; left: 22px; bottom: -16px; background: var(--yellow); color: #814161; padding: 9px 18px; border: 3px solid #fff; border-radius: 14px; font: 700 1rem "Fredoka", sans-serif; box-shadow: var(--shadow); transform: rotate(-2deg); }

.marquee { background: #f8a9ca; color: #72324f; padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px); font-weight: 900; }
.marquee i { color: #fff; font-style: normal; }
.favorites { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(38px, 7vw, 100px); align-items: center; padding: 88px clamp(22px, 6vw, 92px); background: #fff; }
.favorite-intro h2 { font: 700 clamp(2.45rem, 4.5vw, 4.2rem)/1.04 "Fredoka", sans-serif; color: #9d4770; margin: 0 0 20px; }
.favorite-intro > p:last-child { max-width: 520px; color: #7a5268; }
.favorite-bubbles { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 180px); gap: 15px; }
.favorite-bubble { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 18px; border: 4px solid #fff; box-shadow: var(--shadow); }
.favorite-bubble span { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.favorite-bubble strong { font: 700 1.15rem "Fredoka", sans-serif; }
.favorite-bubble small { font-size: .82rem; font-weight: 800; margin-top: 4px; }
.favorite-bubble.vanity { grid-column: span 2; background: #ffd7e8; border-radius: 38px 16px 38px 18px; transform: rotate(-2deg); }
.favorite-bubble.unicorn { grid-column: span 2; background: #ded0ff; border-radius: 18px 42px 20px 38px; transform: rotate(2deg); }
.favorite-bubble.rainbow { grid-column: span 2; background: #cfefff; border-radius: 42px 18px 38px 20px; transform: rotate(-1deg); }
.favorite-bubble.faith { grid-column: span 3; background: #fff0a8; border-radius: 22px 42px 20px 42px; }
.favorite-bubble.bows { grid-column: span 3; background: #ffbddd; border-radius: 42px 20px 42px 22px; transform: rotate(1deg); }
.discover, .latest { padding: 92px clamp(22px, 6vw, 92px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.section-heading h2, .latest h2, .about h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); color: #9d4770; }
.section-heading > p { max-width: 430px; margin: 0; color: #82526a; }

.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.category-card { min-height: 330px; border-radius: 32px; padding: 27px; display: flex; flex-direction: column; position: relative; border: 3px solid #fff; box-shadow: var(--shadow); }
.category-card:nth-child(n) { grid-column: span 2; }
.category-card.raspberry { background: #ffc8df; }
.category-card.blush { background: #fce4f0; }
.category-card.cherry { background: #f8add0; }
.category-card.rose { background: #f7d1e5; }
.category-card.petal { background: #eadfff; }
.category-card.sunshine { background: #fff0aa; }
.category-card .number { font-size: .8rem; font-weight: 900; color: #a45178; }
.category-card .symbol { width: 76px; height: 76px; display: grid; place-items: center; margin: auto 0 18px; background: #fff; border-radius: 22px; font: 700 2.5rem "Fredoka", sans-serif; color: var(--pink-dark); transform: rotate(-3deg); }
.category-card h3 { font: 700 1.6rem/1.15 "Fredoka", sans-serif; margin: 0 0 8px; color: #8c3d64; }
.category-card p { margin: 0 0 20px; }
.category-card a { font-weight: 900; text-underline-offset: 4px; margin-top: auto; color: #9f4470; }
.routine-resource-card { padding: 17px 17px 25px; background: #fff2b8; }
.routine-resource-card .post-tag { top: 29px; left: 30px; }
.routine-resource-card h3 { margin: 20px 10px 8px; }
.routine-resource-card p { margin: 0 10px 18px; }
.routine-resource-card .post-actions { margin-top: auto; }
.coloring-resource-card { background: #f8add0; }
.seasonal-resource-card { background: #eadfff; }
.activity-video-card { background: #f7d1e5; }
.activity-video { display: block; width: 100%; aspect-ratio: 1398 / 1080; margin: 0 0 18px; border-radius: 22px; background: #fff; object-fit: cover; }

.latest {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 231, 135, .5) 0 8%, transparent 8.4%),
    radial-gradient(circle at 92% 82%, rgba(195, 226, 255, .62) 0 10%, transparent 10.4%),
    linear-gradient(135deg, #fff2f8 0%, #f3edff 52%, #edf8ff 100%);
}
.latest-title { text-align: center; margin-bottom: 42px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-grid.has-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 950px; margin-inline: auto; }
.post-grid article { padding: 17px 17px 28px; border: 3px solid #fff; border-radius: 30px; box-shadow: var(--shadow); position: relative; }
.post-grid article:nth-child(1) { background: #fff2b8; }
.post-grid article:nth-child(2) { background: #e8dcff; }
.post-grid article:nth-child(3) { background: #dff3ff; }
.post-tag { position: absolute; top: 29px; left: 30px; background: #fff; color: var(--pink-dark); padding: 6px 13px; border: 2px solid #ffd1e3; border-radius: 99px; font-size: .8rem; font-weight: 900; z-index: 1; }
.post-art { height: 230px; border-radius: 22px; display: grid; place-items: center; font: 700 3rem "Fredoka", sans-serif; color: #a84775; }
.post-preview-link { display: block; margin: 0 !important; border-radius: 22px; overflow: hidden; background: #fff; }
.post-preview { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top center; transition: transform .25s ease; }
.post-preview-link:hover .post-preview { transform: scale(1.025); }
.art-one { background: repeating-linear-gradient(45deg, #ffd3e4 0 22px, #fff3f8 22px 44px); font-size: 6rem; }
.art-two { background: #ffc2dc; color: #914164; letter-spacing: .12em; }
.art-three { background: radial-gradient(circle, #fff 0 12%, transparent 12.5%), #d9c8ff; font-size: 6rem; }
.post-grid h3 { font: 700 1.5rem/1.2 "Fredoka", sans-serif; margin: 22px 10px 8px; color: #8c3f64; }
.post-grid p { margin: 0 10px 20px; color: #785269; }
.post-grid a { margin: 0 10px; color: var(--pink-dark); font-weight: 900; }
.post-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 10px; }
.post-actions a { margin: 0; }
.post-actions .download-button { padding: 9px 15px; border-radius: 999px; background: #c51f63; color: #fff; text-decoration: none; }

.games { padding: 62px clamp(22px, 6vw, 92px) 68px; background: linear-gradient(135deg, #fff0f7, #edf8ff); }
.games-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.games-heading h2 { font: 700 clamp(2.7rem, 5vw, 4.6rem)/1 "Fredoka", sans-serif; color: #903d68; margin: 0; }
.games-heading > p:last-child { max-width: 390px; margin: 0; font-weight: 700; }
.games-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.game-card { min-height: 276px; display: flex; flex-direction: column; padding: 17px; border: 3px solid #fff; border-radius: 25px; box-shadow: var(--shadow); }
.game-card:nth-child(1) { background: #cfeeff; }
.game-card:nth-child(2) { background: #e4d7ff; }
.game-card:nth-child(3) { background: #fff0a8; }
.game-icon { height: 90px; display: grid; place-items: center; margin-bottom: 14px; background: rgba(255,255,255,.7); border-radius: 19px; font-size: 3.2rem; }
.game-faith .game-icon { color: #e474a8; font: 700 3.6rem "Fredoka", sans-serif; }
.game-routine { background: linear-gradient(145deg, #ffd7e8, #fff0a8); }
.game-card span { color: #b2517c; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 900; }
.game-card h3 { font: 700 1.2rem/1.15 "Fredoka", sans-serif; color: #8e3f66; margin: 3px 0 5px; }
.game-card p { margin: 0 0 14px; font-size: .93rem; line-height: 1.35; }
.game-card button { width: 100%; margin-top: auto; border: 0; border-radius: 999px; padding: 10px 14px; background: #fff; color: #71334f; font-weight: 900; opacity: 1; }
.game-card .play-game-button { background: #ed73aa; color: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(193,70,128,.2); }
.game-card .play-game-button:hover { background: #d95f98; transform: translateY(-2px); }

.memory-dialog { width: min(900px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 34px; overflow: auto; color: var(--ink); background: transparent; box-shadow: 0 24px 80px rgba(77, 31, 55, .3); }
.memory-dialog::backdrop { background: rgba(88, 42, 68, .5); backdrop-filter: blur(5px); }
.memory-shell { position: relative; padding: clamp(24px, 5vw, 48px); background: linear-gradient(145deg, #fff8fc, #eef8ff); }
.game-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #9c4871; font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.memory-top { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 0 42px 28px 0; }
.memory-top h2 { margin: 0; color: #914368; font: 700 clamp(2rem, 5vw, 3.5rem)/1 "Fredoka", sans-serif; }
.memory-top p:last-child { margin: 10px 0 0; }
.memory-stats { display: flex; gap: 10px; flex-shrink: 0; }
.memory-stats span { min-width: 105px; padding: 9px 13px; border: 3px solid #fff; border-radius: 18px; background: #ffe0ee; text-align: center; font-size: .9rem; font-weight: 800; }
.memory-stats strong { display: block; color: #a14470; font: 700 1.45rem "Fredoka", sans-serif; }
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.memory-card { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer; perspective: 700px; }
.memory-card-inner { position: absolute; inset: 0; transition: transform .42s ease; transform-style: preserve-3d; }
.memory-card.is-flipped .memory-card-inner, .memory-card.is-matched .memory-card-inner { transform: rotateY(180deg); }
.memory-card-face { position: absolute; inset: 0; display: grid; place-items: center; border: 4px solid #fff; border-radius: 22px; backface-visibility: hidden; box-shadow: 0 7px 16px rgba(143, 67, 104, .14); }
.memory-card-front { background: linear-gradient(135deg, #f58bbb, #d9c5ff); color: #fff; font: 700 2.8rem "Fredoka", sans-serif; }
.memory-card-back { transform: rotateY(180deg); background: var(--card-color, #fff); font-size: clamp(2.3rem, 6vw, 4rem); }
.memory-card.is-matched .memory-card-back { outline: 4px solid #fff; box-shadow: 0 0 0 7px #f3b6d3; }
.memory-finish { margin: 20px 0 0; padding: 18px; border: 3px solid #fff; border-radius: 24px; background: linear-gradient(90deg, #fff1a8, #ffd2e5, #d9ceff, #cfedff); text-align: center; }
.memory-finish span { font-size: 3rem; }
.memory-finish h3 { margin: 2px 0; color: #904165; font: 700 1.7rem "Fredoka", sans-serif; }
.memory-finish p { margin: 0; }
.restart-game { display: block; margin: 22px auto 0; padding: 11px 20px; border: 0; border-radius: 999px; background: #ed73aa; color: #fff; font-weight: 900; cursor: pointer; }
.word-shell { background: linear-gradient(145deg, #fff5fb, #f0eaff 55%, #e6f7ff); }
.word-prompt { width: fit-content; margin: 0 auto 22px; padding: 12px 24px; border: 3px solid #fff; border-radius: 999px; background: #fff0a8; color: #764064; font: 700 1.2rem "Fredoka", sans-serif; box-shadow: var(--shadow); }
.word-prompt strong { color: #b73e7b; font-size: 1.7rem; }
.bubble-board { min-height: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: center; }
.word-bubble { position: relative; min-height: 105px; padding: 18px 10px; border: 4px solid #fff; border-radius: 50%; background: var(--bubble-color); color: #713a59; font: 700 clamp(1rem, 2.3vw, 1.35rem) "Fredoka", sans-serif; cursor: pointer; box-shadow: 0 9px 18px rgba(113,58,89,.14); animation: bubble-float 2.6s ease-in-out infinite alternate; }
.word-bubble:nth-child(2n) { animation-delay: -.8s; }
.word-bubble:nth-child(3n) { animation-delay: -1.5s; }
.word-bubble::after { content: ''; position: absolute; left: 19%; top: 17%; width: 18%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-28deg); }
.word-bubble:hover, .word-bubble:focus-visible { transform: scale(1.06); outline: 4px solid #f19bc2; outline-offset: 3px; }
.word-bubble.is-popped { animation: bubble-pop .35s ease-out forwards; }
.word-bubble.is-wrong { animation: bubble-wiggle .35s ease-in-out; }
.word-feedback { min-height: 28px; margin: 16px 0 0; color: #954469; text-align: center; font-weight: 900; }
@keyframes bubble-float { from { transform: translateY(8px); } to { transform: translateY(-8px); } }
@keyframes bubble-pop { to { opacity: 0; transform: scale(1.45); } }
@keyframes bubble-wiggle { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.fruit-shell { background: linear-gradient(145deg, #fff9cf, #fff0f7 48%, #e7f8ee); }
.fruit-top { margin-bottom: 20px; }
.fruit-basket { min-height: 76px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 7px; margin-bottom: 20px; padding: 12px 18px; border: 4px solid #fff; border-radius: 22px; background: #e7b86d; box-shadow: inset 0 -8px 0 rgba(133,77,36,.12); }
.fruit-basket span { display: grid; place-items: center; min-width: 0; border-radius: 15px; background: rgba(255,255,255,.5); font-size: clamp(1.4rem, 4vw, 2.4rem); filter: grayscale(1); opacity: .32; transition: transform .35s ease, filter .35s ease, opacity .35s ease; }
.fruit-basket span.is-collected { filter: none; opacity: 1; animation: fruit-drop .5s ease-out; }
.fruit-question { padding: 20px; border: 4px solid #fff; border-radius: 25px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.fruit-question span { display: block; color: #b2517c; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 900; }
.fruit-question strong { display: block; margin-top: 7px; color: #7c3c5c; font: 700 clamp(1.35rem, 3.5vw, 2rem) "Fredoka", sans-serif; }
.fruit-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 18px; }
.fruit-choice { min-height: 118px; padding: 14px; border: 4px solid #fff; border-radius: 25px; background: var(--fruit-color); color: #753b59; font: 700 1.2rem "Fredoka", sans-serif; cursor: pointer; box-shadow: 0 8px 16px rgba(117,59,89,.12); }
.fruit-choice span { display: block; margin-bottom: 4px; font-size: 2.6rem; }
.fruit-choice:hover, .fruit-choice:focus-visible { transform: translateY(-4px) rotate(-1deg); outline: 4px solid #ed88b5; outline-offset: 2px; }
.fruit-choice.is-correct { background: #cdeecf; animation: fruit-correct .55s ease-out; }
.fruit-choice.is-wrong { animation: bubble-wiggle .35s ease-in-out; }
.fruit-feedback { margin-bottom: 0; }
@keyframes fruit-drop { 0% { transform: translateY(-28px) rotate(-18deg) scale(.5); } 70% { transform: translateY(5px) rotate(5deg) scale(1.15); } 100% { transform: none; } }
@keyframes fruit-correct { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,255,255,.7); } }
.routine-dialog { width: min(1180px, calc(100% - 28px)); }
.routine-game-shell { padding: clamp(28px, 4vw, 42px); background: linear-gradient(145deg, #fff5fb, #ffe4f0 52%, #fff3b9); }
.routine-game-top { margin-bottom: 22px; }
.routine-play-area { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(245px, .55fr); gap: 24px; align-items: stretch; }
.vanity-scene { position: relative; min-height: 420px; display: grid; place-items: center; padding: 34px; border: 4px solid #fff; border-radius: 34px; overflow: hidden; background: linear-gradient(#ffdbea, #f7ccdf 72%, #e8b7cc 72%); box-shadow: inset 0 0 0 8px rgba(255,255,255,.25); }
.vanity-scene::before { content: '♡  ✦  ♡'; position: absolute; top: 18px; left: 22px; color: #d46b9c; font: 700 1.4rem "Fredoka", sans-serif; letter-spacing: .4em; }
.vanity-bow { position: absolute; top: 14px; right: 22px; font-size: 2.6rem; transform: rotate(8deg); }
.vanity-mirror { position: relative; width: min(310px, 82%); aspect-ratio: .88; display: grid; place-items: center; border: 13px solid #fff5ad; border-radius: 48% 48% 38% 38%; background: radial-gradient(circle at 50% 36%, #f9fdff, #dff3ff 72%); box-shadow: 0 14px 28px rgba(121,61,91,.2), inset 0 0 0 5px #fff; }
.girl-face { font-size: clamp(7.5rem, 19vw, 11rem); filter: drop-shadow(0 8px 7px rgba(113,58,89,.15)); transition: transform .3s ease; }
.care-effect { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; pointer-events: none; }
.care-effect.is-acting { animation: care-sparkle .65s ease-out; }
.vanity-counter { position: absolute; left: 8%; right: 8%; bottom: 17px; display: flex; justify-content: space-around; padding: 12px 18px; border: 4px solid #fff; border-radius: 18px; background: #f7b7d2; font-size: 2rem; box-shadow: var(--shadow); }
.routine-controls { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 4px solid #fff; border-radius: 30px; background: rgba(255,255,255,.62); }
.routine-prompt { margin: 0 0 5px; padding: 12px; border-radius: 17px; background: #fff0a9; color: #8e3f66; text-align: center; font: 700 1.25rem "Fredoka", sans-serif; }
.routine-controls button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 3px solid #fff; border-radius: 18px; background: #ffd4e6; color: #713a59; font: 800 1rem "Nunito", sans-serif; cursor: pointer; box-shadow: 0 5px 12px rgba(113,58,89,.1); }
.routine-controls button:nth-of-type(2) { background: #dff1ff; }
.routine-controls button:nth-of-type(3) { background: #e7dcff; }
.routine-controls button:nth-of-type(4) { background: #fff0ad; }
.routine-controls button span { font-size: 1.65rem; }
.routine-controls button:hover:not(:disabled), .routine-controls button:focus-visible { transform: translateX(-3px); outline: 3px solid #ec7eb0; outline-offset: 2px; }
.routine-controls button.is-done { background: #d6f4df; color: #3d7650; }
.routine-controls button.is-done::after { content: '✓'; margin-left: auto; font-size: 1.4rem; }
.routine-controls button.is-wrong { animation: bubble-wiggle .35s ease-in-out; }
@keyframes care-sparkle { 0% { opacity: 0; transform: scale(.5); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4); } }
.care-stage { position: relative; min-height: 520px; border: 5px solid #fff; border-radius: 32px; overflow: hidden; background: #f3dce7; cursor: none; touch-action: none; box-shadow: var(--shadow); }
.care-stage img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center 42%; user-select: none; pointer-events: none; }
.care-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.care-cursor { position: absolute; left: 0; top: 0; z-index: 2; display: none; pointer-events: none; font-size: 2.8rem; transform: translate(-50%, -50%) rotate(-12deg); filter: drop-shadow(0 4px 3px rgba(82,38,59,.25)); }
.care-stage.has-tool .care-cursor { display: block; }
.care-cursor.is-using { animation: care-tool-move .28s ease-in-out infinite alternate; }
.care-particle { position: absolute; z-index: 1; pointer-events: none; color: #fff; font: 900 1.6rem "Fredoka", sans-serif; text-shadow: 0 2px 4px rgba(73,42,58,.2); transform: translate(-50%, -50%); animation: care-particle-rise .9s ease-out forwards; }
.care-particle-wash { width: 18px; height: 18px; border: 2px solid #9ee3f7; border-radius: 50%; color: transparent; background: rgba(233,251,255,.6); }
.care-particle-brush { color: #fff7a3; }
.care-particle-comb { color: #ffe06b; }
.care-particle-moisturize { color: #ff8fbd; }
@keyframes care-tool-move { from { transform: translate(-50%, -50%) rotate(-18deg) scale(.96); } to { transform: translate(-50%, -50%) rotate(8deg) scale(1.08); } }
@keyframes care-particle-rise { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.55); } 100% { opacity: 0; transform: translate(calc(-50% + var(--particle-drift)), -55px) scale(1.35); } }
.routine-controls button.is-selected { outline: 4px solid #df5f9a; outline-offset: 2px; transform: translateX(-3px); }
.routine-controls small { color: #80526a; text-align: center; font-weight: 800; }
.care-meter { height: 14px; margin-top: 4px; border: 3px solid #fff; border-radius: 999px; overflow: hidden; background: #f2dce7; }
.care-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f47fb4, #ffd85c, #a98cff); transition: width .18s ease; }
.confetti-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.confetti-piece { position: absolute; top: -24px; width: 11px; height: 18px; border-radius: 3px; opacity: 0; animation: confetti-fall 3s ease-in forwards; }
.confetti-piece.is-round { width: 13px; height: 13px; border-radius: 50%; }
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate3d(0, -4vh, 0) rotate(0deg); }
  100% { opacity: .9; transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); }
}

.about { margin: 82px clamp(22px, 6vw, 92px); border: 3px dashed #f4a9c9; border-radius: 36px; padding: clamp(38px, 6vw, 72px); display: grid; grid-template-columns: .35fr 1fr 1.1fr; gap: 38px; align-items: center; background: linear-gradient(120deg, #ffe4f0 0 34%, #fff2b8 34% 57%, #e6dcff 57% 78%, #dff3ff 78%); box-shadow: var(--shadow); }
.about-ribbon { font: 700 7rem/1 "Fredoka", sans-serif; color: var(--pink); text-align: center; }
.about > p { font-size: 1.05rem; color: #765066; }
footer { background: linear-gradient(90deg, #ffd2e6, #fff0a9, #ded0ff, #cfeeff); color: #6f3451; padding: 54px clamp(22px, 6vw, 92px); display: flex; align-items: center; gap: 35px; border-top: 4px solid #fff; }
.footer-brand { margin-right: auto; }
.copyright { opacity: .75; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-image-wrap { max-width: 720px; }
  .category-card:nth-child(n) { grid-column: span 3; }
  .favorites { grid-template-columns: 1fr; }
  .games-heading { text-align: center; display: block; }
  .games-heading > p:last-child { margin: 16px auto 0; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routine-play-area { grid-template-columns: 1fr; }
  .care-stage, .care-stage img { min-height: 430px; }
  .about { grid-template-columns: 1fr; text-align: center; }
  .about-ribbon { font-size: 5rem; }
  .post-grid { grid-template-columns: 1fr; }
  .post-grid.has-two { grid-template-columns: 1fr; }
  .post-art { height: 290px; }
  .post-preview { height: 290px; }
  footer { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  .site-header { min-height: 72px; }
  .brand { font-size: 1.15rem; }
  .menu-button { display: block; }
  .site-header nav { display: none; position: absolute; top: 70px; left: 16px; right: 16px; background: #fff; padding: 18px; border: 3px solid #ffd3e5; border-radius: 20px; box-shadow: var(--shadow); flex-direction: column; gap: 14px; }
  .site-header nav.open { display: flex; }
  .hero { display: block; min-height: 0; padding-top: 52px; }
  .hero h1 { font-size: 3.35rem; }
  .hero-image-wrap { margin: 52px 10px 10px; }
  .image-note { left: 10px; bottom: -18px; }
  .marquee span:nth-of-type(even) { display: none; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 18px; }
  .category-grid { display: block; }
  .favorite-bubbles { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .favorite-bubble:nth-child(n) { grid-column: span 1; min-height: 160px; }
  .favorite-bubble.bows { grid-column: span 2; }
  .category-card { margin-bottom: 16px; min-height: 300px; }
  .discover, .latest { padding-top: 72px; padding-bottom: 72px; }
  .post-art { height: 220px; }
  .post-preview { height: 220px; }
  .game-card { text-align: center; }
  .games-grid { grid-template-columns: 1fr; }
  .game-icon { height: 100px; }
  .memory-shell { padding: 58px 17px 24px; }
  .memory-top { display: block; margin-right: 0; }
  .memory-stats { margin-top: 18px; }
  .memory-stats span { flex: 1; min-width: 0; }
  .memory-board { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .memory-card, .memory-card-face { border-radius: 16px; }
  .memory-card-face { border-width: 3px; }
  .routine-play-area { grid-template-columns: 1fr; }
  .vanity-scene { min-height: 360px; }
  .care-stage, .care-stage img { min-height: 360px; }
  .bubble-board { min-height: 390px; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fruit-basket { grid-template-columns: repeat(5, 1fr); }
  .fruit-choices { grid-template-columns: 1fr; }
  .fruit-choice { min-height: 82px; }
  .word-bubble { min-height: 95px; }
  .about { margin-top: 62px; margin-bottom: 62px; padding: 36px 24px; }
  footer { display: block; text-align: center; }
  .footer-brand { justify-content: center; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary-button:hover { transform: none; }
  .post-preview-link:hover .post-preview { transform: none; }
  .word-bubble { animation: none; }
  .care-effect.is-acting, .routine-controls button.is-wrong { animation: none; }
  .care-cursor.is-using, .care-particle { animation: none; }
  .confetti-piece { display: none; animation: none; }
}