@import url('/design-tokens.css');

:root { font-family: system-ui, sans-serif; color: var(--color-text); background: var(--color-pink-soft); }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px; }
main { max-width: 760px; margin: auto; }
h1 { margin-bottom: 8px; }
h2 { font-size: 1.15rem; }
.eyebrow { font-size: .75rem; letter-spacing: .14em; color: #42675a; }
section { margin: 20px 0; padding: 24px; border: 1px solid #d7e2d5; border-radius: 16px; background: white; }
label { display: block; margin: 12px 0; }
input, select { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #8b9e91; border-radius: 6px; font: inherit; }
button { background: var(--color-brand-dark); color: white; padding: 10px 14px; border: 0; border-radius: 7px; font: inherit; cursor: pointer; margin: 4px 6px 4px 0; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ca8c25; outline-offset: 2px; }
.row { border-top: 1px solid #e0e8dc; padding: 14px 0; margin-top: 12px; }
#status { min-height: 24px; }
#pair-code { display: block; white-space: pre-line; font-size: 1.15rem; }
[hidden] { display: none !important; }
dialog { width: min(440px, calc(100% - 32px)); border: 1px solid #e0ccd6; border-radius: 18px; padding: 24px; color: var(--color-text); }
dialog::backdrop { background: #12283888; }
.child-profile { display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: center; gap: 12px; }
.child-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.child-actions button { margin: 0; }
.child-profile output { grid-column: 1 / -1; }
@media (max-width: 700px) { .child-profile { grid-template-columns: 1fr; } }

#child { background: #fffdf8; padding: clamp(16px, 4vw, 28px); }
#game h3 { font-size: 1.35rem; margin: 12px 0; }
.muted { color: #53695f; font-size: .9rem; line-height: 1.5; }
.pet-hero { display: flex; align-items: center; gap: 24px; padding: 12px; }
.pet-hero h3 { font-size: 2rem !important; }
.pet-hero > div:last-child { flex: 1; }
progress { width: 100%; height: 16px; accent-color: #eb3899; }
.game-stats { padding: 12px 16px; background: #eaf2e5; border-radius: 12px; font-weight: 600; }
.lesson-panel { border: 2px solid #dfebd9; background: white; border-radius: 20px; padding: 24px; margin: 24px 0; }
.game-feedback { min-height: 28px; color: #25593e; font-weight: 650; line-height: 1.5; }
.equation { font-size: clamp(2rem, 7vw, 3rem); font-weight: 750; text-align: center; }
#game-answer { max-width: 160px; margin: 12px auto; text-align: center; font-size: 2rem; border: 2px solid #8ca990; border-radius: 14px; }
.lesson-panel form { text-align: center; }
.lesson-panel button { min-height: 48px; padding-inline: 24px; }
.question-dots { display: flex; justify-content: center; gap: 10px; }
.question-dots span { display: grid; place-items: center; width: 30px; height: 30px; background: #edf1e8; border-radius: 50%; }
.question-dots .done { background: #245c49; color: white; }
.pet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pet-card { text-align: center; border: 1px solid #dae3d3; background: white; border-radius: 18px; padding: 16px 8px; }
.pet-card h4 { margin: 8px 0; font-size: 1.15rem; }
.pet-card button { margin: 4px 0; width: 100%; min-height: 44px; }
.pet-card[data-locked="true"] .pet-art { filter: grayscale(1); opacity: .55; }
.locked-label { font-size: .85rem; color: #677465; }
.pet-art { --fur: #b6a1df; position: relative; width: 130px; height: 144px; margin: 0 auto; display: grid; place-items: end center; flex-shrink: 0; }
.pet-body { position: relative; width: 108px; height: 100px; border-radius: 48% 48% 42% 42%; background: var(--fur); box-shadow: inset -8px -8px 0 #0000000c, 0 8px 0 #213f2310; animation: pet-breathe 3s ease-in-out infinite; transform-origin: bottom; }
.pet-ear { position: absolute; top: -19px; width: 36px; height: 42px; background: var(--fur); border-radius: 6px 80% 0 0; }
.pet-ear.left { left: 6px; transform: rotate(-16deg); }
.pet-ear.right { right: 6px; transform: scaleX(-1) rotate(-16deg); }
.pet-face { position: absolute; inset: 22px 12px 12px; background: #ffffff3b; border-radius: 45%; display: flex; gap: 26px; justify-content: center; padding-top: 18px; }
.pet-eye { width: 8px; height: 11px; border-radius: 50%; background: #173b3d; animation: pet-blink 5s infinite; }
.pet-mouth { position: absolute; top: 33px; left: calc(50% - 7px); width: 14px; height: 9px; border-bottom: 3px solid #173b3d; border-radius: 50%; }
.pet-art[data-skin="fox"] { --fur: #efa261; }
.pet-art[data-skin="bunny"] { --fur: #efb9cf; }
.pet-art[data-skin="bunny"] .pet-ear { height: 64px; width: 25px; top: -47px; border-radius: 70% 70% 10% 10%; }
.pet-art[data-stage="baby"] .pet-body { scale: .78; }
.pet-art[data-stage="young"] .pet-body { scale: .9; }
.pet-art[data-mood="happy"] .pet-body { animation: pet-hop .45s ease-in-out 3; }
@keyframes pet-breathe { 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes pet-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes pet-hop { 50% { transform: translateY(-12px) rotate(-4deg); } }
@media (max-width: 520px) {
  .pet-grid { grid-template-columns: 1fr; }
  .pet-card { display: grid; grid-template-columns: 108px 1fr; align-items: center; column-gap: 10px; text-align: left; padding: 14px; }
  .pet-card .pet-art { grid-row: span 4; width: 100px; scale: .85; }
  .pet-hero { flex-direction: column; gap: 8px; text-align: center; }
  .pet-hero > div:last-child { width: 100%; }
  .lesson-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pet-body, .pet-eye { animation: none !important; } }