@charset "UTF-8";

/* The scene stays playful; controls share a quiet, legible visual language. */
:root {
  --ink:#263e38; --muted:#697a75; --green:#338569; --deep:#21634f;
  --paper:#f7faf9; --line:#dde8e3; --radius:8px;
  --garden-coral:#d56669; --garden-sky:#e8f2f9; --garden-lemon:#fbf5d7;
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:var(--paper); color:var(--ink);
}
body { background:var(--paper); padding:0 32px env(safe-area-inset-bottom); line-height:1.75; }
h1,h2,h3,button,.brand b,.brand small,.eyebrow,.entry-brand,.entry-kicker,.entry-section-label,
.care-card strong,.activity-dialog>.dialog-top h2,.entry-copy h2 { letter-spacing:0; }
button { transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #408fca; outline-offset:4px; }
button:not(:disabled):active { transform:translateY(1px); }
.site-header,#app,.main-nav,.page-footer { max-width:1240px; }
.site-header { min-height:88px; padding:20px 0 18px; gap:30px; }
.brand { gap:10px; flex:0 0 auto; }
.brand img { width:42px; height:42px; }
.brand>span { display:block; }
.brand b { font-size:21px; font-weight:800; line-height:1.5; }
.brand-green { color:var(--deep); display:inline; margin-left:3px; }
.brand small { display:block; font-size:10px; color:var(--muted); line-height:1.4; }
.header-actions { flex:0 1 auto; gap:8px; }
.player-button { flex:0 1 200px; min-width:100px; max-width:230px; min-height:44px; border:0; background:#eaf1ee; border-radius:8px; padding:10px 13px; gap:8px; }
.player-button b { font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.player-button>span { display:grid; place-items:center; }
.age-button { min-height:44px; border:0; background:transparent; padding:4px 12px; border-radius:8px; gap:0 9px; }
.age-button>span:first-child { font-size:9px; }
.age-button>b { font-size:13px; }
.age-button>span:last-child { display:grid; place-items:center; }
.header-actions .music-button,.header-actions .icon-button { display:grid; place-items:center; width:42px; min-width:42px; height:44px; flex:0 0 42px; background:transparent; border:1px solid var(--line); border-radius:8px; color:var(--ink); }
.header-actions .music-button[aria-pressed=false] { color:#8b9994; background:#f0f4f2; }
.header-actions button:hover { background:#e3eee8; }
.garden-ui-icon { flex:none; vertical-align:middle; stroke:currentColor; fill:none; }
.main-nav { display:flex; gap:30px; margin:0 auto 28px; padding:0; border-bottom:1px solid #d5e2dc; }
.main-nav>button { position:relative; flex:0 0 auto; gap:9px; min-height:56px; padding:12px 2px 15px; border-radius:0; font-size:13px; color:var(--muted); }
.main-nav>button>span:first-child { display:grid; place-items:center; width:22px; height:22px; }
.main-nav>button.active { color:var(--deep); background:transparent; }
.main-nav>button.active:after { content:""; position:absolute; inset:auto 0 -1px; height:3px; background:var(--deep); border-radius:3px 3px 0 0; }
.main-nav>button:hover { color:var(--deep); background:transparent; }
.tiny-count { display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; background:#e7eee9; color:var(--deep); font-size:10px; border-radius:6px; }
#app { min-height:65vh; }
.room-sr-title { position:static; width:auto; height:auto; padding:0; margin:0 0 18px; overflow:visible; clip-path:none; white-space:normal; font-size:24px; font-weight:800; line-height:1.55; }
.page-heading { margin:0 0 24px; }
.page-heading h1 { font-size:27px; }
.eyebrow { color:var(--green); font-size:11px; }
.daily-chip { border:0; border-radius:8px; background:var(--garden-lemon); }

/* Main room: an uninterrupted illustration and a separate reading column. */
.room-grid-focused { grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
.room-grid-focused .habitat-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.room-grid-focused .habitat { height:440px; border-radius:8px; box-shadow:0 1px 0 #1a503014; }
.pet-tag { top:18px; left:18px; min-height:42px; padding:8px 13px; border:1px solid #ffffffd9; border-radius:8px; background:#fffffff2; color:var(--ink); box-shadow:0 3px 12px #1c46350a; font-size:14px; }
.pet-tag small { background:#eaf2ed; color:var(--deep); border-radius:4px; font-size:10px; }
.habitat-weather { right:18px; top:18px; width:42px; height:42px; border-radius:8px; background:#fffffff2; }
.habitat .pet-speech { top:82px; width:max-content; border:0; border-radius:8px; background:#fffffff2; font-size:14px; line-height:1.8; padding:9px 18px; box-shadow:0 3px 16px #23402a0b; max-width:80%; }
.pet-speech:after { border-top-color:#fffffff2; }
.pet-floor-label { padding:3px 10px; background:#ffffffbd; color:#395f49; border-radius:4px; }
.room-grid-focused .place-strip { padding:7px 0; background:transparent; color:var(--muted); border-radius:0; font-size:12px; }
.place-strip button { padding:5px 0 5px 14px; background:transparent; border:0; border-radius:0; color:var(--deep); font-size:12px; }
.room-grid-focused .garden-care-actions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; background:transparent; }
.room-grid-focused .garden-care-actions button { min-height:72px; padding:10px 7px; border:1px solid #dfebe5; border-radius:8px; background:#edf5ef; color:#306b53; flex-direction:row; gap:10px; box-shadow:none; }
.room-grid-focused .garden-care-actions button[data-action=pet] { background:#fbeef0; border-color:#f2dfe3; color:#a85160; }
.room-grid-focused .garden-care-actions button[data-action=care-menu] { background:var(--deep); border-color:var(--deep); color:white; }
.room-grid-focused .garden-care-actions button[data-action=play-room] { background:#e8f2fa; border-color:#dceaf4; color:#3a6989; }
.room-grid-focused .garden-care-actions button[data-action=dress-room] { background:#faf4dc; border-color:#efe6c7; color:#786137; }
.garden-care-actions button svg,.garden-care-actions button img { width:29px; height:29px; flex-shrink:0; }
.pet-fun-actions button b { font-size:14px; font-weight:700; }
.room-grid-focused .garden-care-actions button:hover { transform:translateY(-2px); box-shadow:0 4px 12px #254f3310; }
.room-progress { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
.room-record { border-bottom:1px solid var(--line); padding:5px 0 21px; font-size:12px; }
.room-record span { color:var(--muted); }
.room-record b { font-size:26px; line-height:1.4; color:var(--deep); }
.room-progress>.friendship-meter { margin:0; padding:23px 0 20px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); }
.friendship-top { color:var(--muted); font-size:12px; }
.friendship-top b { color:var(--ink); font-size:13px; }
.friendship-hearts { gap:5px; color:#d5dfd9; font-size:21px; }
.friendship-hearts .filled { color:var(--garden-coral); }
.friendship-label { font-size:14px; color:var(--ink); margin:12px 0; }
.friendship-track { background:#f0e4e5; height:5px; }
.friendship-track span { background:#d98287; }
.friendship-hint { margin-top:10px; font-size:12px; color:var(--muted); line-height:1.9; }
.friendship-faces { margin:8px 0 -8px; padding-left:0; text-align:left; font-size:11px; color:var(--deep); }
.room-progress .reward-goal { margin:20px 0; padding:13px 12px; background:var(--garden-lemon); border:0; border-radius:8px; gap:12px; font-size:12px; }
.reward-goal img { width:47px; height:47px; flex:none; }
.reward-goal b { font-size:13px; color:#786132; }
.room-progress .progress-section { padding:3px 0 0; }
.progress-text { gap:12px; margin-bottom:12px; }
.progress-text b { font-size:13px; }
.progress-text span { color:var(--muted); font-size:10px; text-align:right; }
.progress-track { height:6px; background:#e0ece5; }
.progress-fill { background:var(--green); }
.room-progress .stage-path { margin:20px -3px 0; }
.stage-step { font-size:10px; gap:8px; color:#8a9991; }
.stage-step .stage-icon { width:25px; height:25px; background:#e9efeb; font-size:11px; }
.stage-step.done .stage-icon { background:#9cc5b0; }
.stage-step.current .stage-icon { background:var(--deep); box-shadow:0 0 0 4px #e0eee5; }
.growth-hint { padding:16px 0 0; margin:18px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; font-size:12px; color:var(--muted); line-height:1.9; }
.growth-hint b { color:var(--ink); margin-bottom:5px; }
.growth-focus li { border-radius:4px; border-color:var(--line); }
.bottom-row { grid-template-columns:minmax(0,1fr) 300px; gap:32px; margin-top:26px; border-top:1px solid var(--line); padding-top:21px; }
.journey-card,.little-fact { border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; gap:15px; }
.journey-card { text-align:left; }
.journey-copy h3 { font-size:14px; }
.journey-copy p { font-size:11px; line-height:1.85; margin-top:4px; }
.family-preview { margin-left:auto; gap:7px; }
.family-preview .mini-pet { width:62px; height:66px; }
.little-fact { align-items:flex-start; padding-top:4px; gap:10px; }
.little-fact>span { font-size:23px; }
.little-fact b { color:#527168; font-size:12px; }
.little-fact p { font-size:11px; line-height:1.85; }
.page-footer { margin:27px auto 20px; padding-top:17px; border-top:1px solid var(--line); color:#85958e; font-size:10px; }
.page-footer button { font-size:10px; color:#71857b; }

/* Shared dialogs and controls. */
dialog,dialog:has(.activity-dialog) { border:1px solid #e0e8e3; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 25px 100px #163d302c; }
dialog::backdrop { background:#1c3c3647; backdrop-filter:blur(7px); }
.dialog-shell,.activity-dialog { padding:30px; }
.dialog-top { margin-bottom:23px; gap:16px; }
.dialog-top h2,.activity-dialog>.dialog-top h2 { font-size:22px; font-weight:800; line-height:1.7; }
.close-button,.activity-dialog .close-button { display:grid; place-items:center; border:0; width:40px; height:40px; flex:0 0 40px; border-radius:8px; background:#f0f5f2; color:#597367; }
.dialog-sub { font-size:13px; color:var(--muted); line-height:1.9; }
.primary { background:var(--deep); border-color:var(--deep); border-radius:8px; min-height:48px; box-shadow:none; }
.primary:hover { background:#194d3d; border-color:#194d3d; }
.secondary { border-radius:8px; background:#edf4ef; border-color:#d7e5dc; color:var(--deep); min-height:46px; }
.text-button { color:var(--deep); font-size:12px; }
.name-input { border:1px solid #cadbd2; border-radius:8px; padding:12px 14px; min-height:48px; color:var(--ink); font-size:16px; }
.name-input:focus { border-color:var(--green); }
.age-option { background:#f6f9f7; border-color:var(--line); border-radius:8px; }
.age-option.active { border-color:var(--green); background:#e9f4ec; }
.settings-section { padding:20px 0; }
.settings-section h3 { font-size:15px; }
.settings-section p { font-size:13px; }
.sound-settings .settings-row { align-items:center; }
.sound-settings .settings-row h3 { flex:1; margin:0; }
.sound-settings .settings-row button { flex:0 0 75px; min-width:75px; }
.sound-settings button[aria-pressed=true] { color:white; background:var(--deep); border-color:var(--deep); }
#toast { border-radius:8px; background:#245d49; box-shadow:0 5px 24px #183d3024; }

/* Selection cards have stable pictures and a visible, consistent selected state. */
.activity-intro { margin-bottom:20px; }
.activity-intro p { font-size:14px; color:var(--ink); }
.activity-grid { gap:12px; }
.activity-card { min-height:163px; border-radius:8px; border-color:#dde7e1; background:#fff; padding:15px 10px; box-shadow:none; }
.activity-illustration { width:90px; height:83px; margin-bottom:9px; }
.activity-illustration:before { display:none; }
.activity-illustration img { width:90px; height:83px; }
.activity-card-copy strong { font-size:14px; color:var(--ink); }
.activity-card-copy small { font-size:11px; color:var(--muted); }
.activity-card.tone-apricot { background:#fff8eb; border-color:#f0e4cc; }
.activity-card.tone-rose { background:#fcf1f2; border-color:#f0dfe2; }
.activity-card.tone-sage { background:#eff7f2; border-color:#dcebe2; }
.activity-card.tone-meadow { background:#f5f8eb; border-color:#e5ebd8; }
.activity-card.tone-lilac { background:#f6f2fa; border-color:#e8dff0; }
.activity-card.tone-blue { background:#eef6fc; border-color:#dceaf4; }
.activity-card:hover:not(:disabled) { border-color:#75a38c; background:#f0f7f2; box-shadow:0 5px 16px #254a3110; }
.activity-card--locked,.activity-card--locked:hover { background:#f4f6f5; border-color:#e6ece8; }
.activity-card--locked .activity-card-copy strong { color:#8b9891; }
.activity-footnote { font-size:11px; color:var(--muted); }
.activity-count { border-radius:8px!important; }
.activity-notice { border-radius:8px; background:var(--garden-lemon); border-color:#ece5c6; }
.reward-tile { border:1px solid var(--line); border-radius:8px; background:#fff; min-height:144px; gap:6px; }
.reward-tile strong { font-size:12px; color:var(--ink); }
.reward-tile small { color:var(--muted); }
.reward-tile.selected { background:#eff8f2; border-color:#4d9976; box-shadow:inset 0 0 0 1px #4d9976; }
.reward-locked { background:#f4f6f5; }
.reward-locked strong { color:#7f8e86; }
.wardrobe-preview { background:#eff5f3; border:0; border-radius:8px; padding:18px 0; }
.wardrobe-preview>span:last-child { font-size:15px; color:#46695d; font-weight:700; }
.wardrobe-tabs { gap:0; margin:22px 0 16px; border-bottom:1px solid var(--line); }
.wardrobe-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; font-size:12px; min-height:50px; padding:8px 4px; color:var(--muted); }
.wardrobe-tabs button.selected { border-color:var(--deep); background:transparent; color:var(--deep); }
.reward-shelf { gap:10px; }
.new-rewards,.reward-spotlight { background:var(--garden-lemon); border-color:#ede6c8; border-radius:8px; }
.face-tile { background:#f6f9f7; border-radius:8px; border-color:var(--line); }
.place-option { border-radius:8px; border:1px solid var(--line); background:#fff; padding:6px; }
.place-preview { border-radius:5px; }
.place-option.selected { border-color:#4d9976; background:#eff8f2; box-shadow:inset 0 0 0 1px #4d9976; }

/* Learning surfaces use the same palette, with room for the reading aids. */
.quiz-subject { background:#eaf3ed; color:var(--deep); border-radius:5px; padding:7px 12px; }
.quiz-age { color:var(--muted); }
.quiz-buddy { background:#f2f7f4; border:0; border-radius:8px; }
.buddy-bubble { border-radius:8px; background:white; color:var(--ink); }
.question-prompt { color:#293f37; font-size:23px; line-height:2; margin:22px 0 25px; }
.choice-grid { gap:12px; }
.choice { border:1px solid #d7e2db; border-radius:8px; min-height:82px; padding:17px 15px; background:#fff; box-shadow:0 2px 0 #eaf0ed; font-size:18px; }
.choice .choice-index { border-radius:6px; width:27px; height:27px; flex-basis:27px; color:#688477; background:#edf3ef; }
.choice:hover { background:#f3f9f5; border-color:#77a88e; }
.choice.correct { background:#eaf6ee; border-color:#57966b; box-shadow:inset 0 0 0 1px #57966b; }
.choice.wrong { background:#fff0ee; border-color:#d2887e; box-shadow:none; }
.choice.dim { opacity:.55; }
.hint-box { background:#fff8df; border:1px solid #ece0b6; border-radius:8px; }
.result-banner { background:#edf7f0; border-radius:8px; }
.result-banner.try { background:#fff4e5; }
.explain-box { border-radius:8px; background:#f4f8f6; padding:22px; }
.explain-box h3 { color:var(--green); }
.visual-wrap { border-radius:8px; border-color:#dde8e1; }
.curriculum-note { border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 0 0; background:transparent; }
.reward-line { border-radius:8px; background:#eef6ef; }
.review-banner { background:#eef3fa; color:#587397; border-radius:5px; }
.evolution-naming { background:#f2f7f4; border-color:var(--line); border-radius:8px; }

/* Collections and the growth tree keep their illustrations on open white surfaces. */
.filter-btn { border-radius:7px; background:#fff; border-color:var(--line); font-size:12px; }
.filter-btn.active { color:var(--deep); background:#e4f0e8; border-color:#9bbda9; }
.collection-grid { gap:16px; }
.species-card { border-radius:8px; background:#fff; border:1px solid #e0e9e3; padding:18px 12px; }
.species-card:hover { border-color:#9cbda9; background:#f5faf7; }
.species-card.locked { background:#f0f4f1; }
.species-card .serial { color:#92a297; }
.empty-garden { border-radius:8px; background:#edf5f0; border-color:#bfd4c6; }
.collection-summary { gap:28px; color:var(--muted); }
.collection-summary b { font-size:28px; }
.tree-guide,.tree-overview,.family-tree,.your-path,.secret-branch { border:0; border-radius:0; background:transparent; padding:22px 0; box-shadow:none; }
.tree-guide { border-bottom:1px solid var(--line); padding-top:0; }
.family-tree,.secret-branch,.your-path { border-top:1px solid var(--line); }
.tree-node { border-radius:8px; background:#fff; border-color:var(--line); }
.tree-node.undiscovered { background:#eef3ef; }
.tree-node.current { border-color:#68a07e; box-shadow:0 0 0 2px #d9eddf; }
.tree-node.current:before { background:#dbeee1; border-radius:4px; color:var(--deep); }
.branch-select { border-radius:6px; background:#eaf3ed; color:var(--deep); }
.kid-branch.selected .branch-select { background:var(--deep); }
.tree-note { border-radius:8px; background:#edf5f0; }
.living-garden { border-radius:8px; border-color:var(--line); box-shadow:none; }
.living-garden-note { background:#f0f6f2; }
.living-pause { border-radius:6px; }
.living-pet-name,.living-activity { border-radius:5px; }

/* The player chooser is a small garden scene above the actual player controls. */
body.is-choosing-player { background:#eff5f2; }
body.is-choosing-player dialog::backdrop { background:#edf4f16b; backdrop-filter:none; }
dialog:has(.player-entry) { max-width:690px; width:calc(100vw - 32px); border-radius:12px; border:1px solid #dce7df; background:#fff; box-shadow:0 20px 75px #254f3212; }
.player-entry { padding:25px 30px 24px; }
.entry-brand { gap:10px; font-size:17px; color:var(--deep); }
.entry-brand img { width:32px; height:32px; }
.entry-intro { position:relative; display:block; isolation:isolate; min-height:224px; margin:22px -30px 24px; padding:27px 30px; overflow:hidden; background:#e9f2e9 url('./assets/habitats-four-v1.png') 0 0/200% 200%; }
.entry-copy { position:relative; z-index:2; width:60%; }
.entry-kicker { display:none; }
.entry-copy h2 { font-size:29px; line-height:1.65; white-space:normal; color:#264c39; text-shadow:0 1px 12px #fff,0 1px 5px #fff; }
.entry-copy>p:last-child { font-size:12px; line-height:1.9; margin-top:11px; color:#355842; text-shadow:0 1px 7px white; }
.entry-portrait { position:absolute; right:25px; bottom:1px; width:195px; min-height:208px; }
.entry-portrait>.creature-art { width:190px!important; height:190px!important; max-width:none; max-height:none; }
.entry-halo,.entry-spark { display:none; }
.entry-ground { width:115px; bottom:13px; background:#3c614722; }
.entry-section-label { color:var(--muted); font-size:12px; }
.player-entry .player-list { gap:10px; margin:12px 0 20px; }
.player-entry .player-choice { border:1px solid var(--line); background:#fff; min-height:82px; padding:13px; border-radius:8px; box-shadow:none; grid-template-columns:40px minmax(0,1fr) 17px; }
.player-entry .player-choice strong { font-size:17px; }
.player-entry .player-choice small { color:var(--muted); font-size:11px; }
.player-entry .player-avatar { background:var(--avatar-color); border-radius:8px; }
.player-entry .player-choice.selected { border-color:#79a78c; background:#f0f8f2; }
.player-entry .player-choice:hover { background:#eaf5ed; border-color:#77a48a; box-shadow:none; }
.entry-new-player { padding-top:10px; border-top-color:var(--line); }
.entry-new-player summary { color:var(--deep); font-size:13px; }
.entry-new-player .player-form { padding:0; background:transparent; border:0; border-radius:0; margin-top:8px; }
.entry-new-player .primary { background:var(--deep); border-radius:8px; box-shadow:none; }
.entry-age { margin:14px 0 16px; }
.entry-age legend { font-size:13px; margin-bottom:10px; }
.entry-age-options { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.entry-age-options label { padding:10px 6px; border:1px solid var(--line); border-radius:6px; min-height:61px; text-align:center; }
.entry-age-options strong { font-size:13px; }
.entry-age-options small { font-size:9px; }
.entry-age-options label:has(input:checked) { background:#edf6ef; border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.entry-footnote { font-size:10px; color:#83958a; margin-top:18px; }

@media(min-width:700px) {
  dialog:has(.garden-wardrobe) { width:min(900px,calc(100vw - 48px)); max-width:900px; }
  .garden-wardrobe { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:0 26px; align-items:start; }
  .garden-wardrobe>.dialog-top { grid-column:1/-1; grid-row:1; }
  .garden-wardrobe>.dialog-sub { display:none; }
  .garden-wardrobe>.wardrobe-preview { grid-column:1; grid-row:2/span 3; position:sticky; top:0; min-height:370px; justify-content:center; padding:18px 0; }
  .garden-wardrobe .wardrobe-preview>.dressed-pet { width:310px!important; height:auto!important; aspect-ratio:1; max-width:100%; }
  .garden-wardrobe>.wardrobe-tabs { grid-column:2; grid-row:2; margin:0 0 14px; }
  .garden-wardrobe>.reward-shelf { grid-column:2; grid-row:3; margin:0; max-height:390px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:1px 5px 1px 1px; }
  .garden-wardrobe>.kind-note { grid-column:2; font-size:11px; }
  .garden-wardrobe .reward-tile { min-height:126px; padding:9px 4px; }
  .garden-wardrobe .reward-tile img { width:60px; height:60px; }
  .garden-wardrobe .reward-tile strong { font-size:11px; }
  .garden-wardrobe .reward-tile small { font-size:10px; }
  .garden-wardrobe .remove-outfit>span { height:60px; font-size:45px; }
}
@media(min-width:1450px) {
  .room-grid-focused .habitat { height:480px; }
  .site-header,#app,.main-nav,.page-footer { max-width:1310px; }
}
@media(max-width:1100px) {
  body { padding-left:24px; padding-right:24px; }
  .site-header { gap:15px; }
  .brand b { font-size:17px; }
  .brand img { width:35px; height:35px; }
  .brand small { font-size:9px; }
  .header-actions { gap:5px; }
  .room-grid-focused { grid-template-columns:minmax(0,1fr) 260px; gap:24px; }
  .room-grid-focused .habitat { height:400px; }
  .room-grid-focused .garden-care-actions { gap:7px; }
  .room-grid-focused .garden-care-actions button { gap:6px; }
  .pet-fun-actions button b { font-size:12px; }
  .bottom-row { grid-template-columns:minmax(0,1fr) 260px; gap:24px; }
  .family-preview .mini-pet { width:46px; }
}
@media(max-width:850px) {
  .site-header { flex-wrap:wrap; padding:17px 0 10px; gap:12px; }
  .brand { flex:1; }
  .brand>span { display:block; }
  .brand b { font-size:18px; }
  .header-actions { flex:0 1 auto; }
  .player-button { min-width:95px; max-width:155px; }
  .age-button { padding:4px 7px; }
  .room-grid-focused { grid-template-columns:minmax(0,1fr) 230px; gap:22px; }
  .room-grid-focused .habitat { height:410px; }
  .room-grid-focused .garden-care-actions button { flex-direction:column; gap:5px; min-height:73px; }
  .bottom-row { grid-template-columns:minmax(0,1fr) 230px; gap:22px; }
  .family-preview .mini-pet { width:33px; }
  .room-record b { font-size:23px; }
}
@media(max-width:730px) {
  body { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .site-header { padding:16px 0 10px; min-height:unset; gap:12px; }
  .brand { flex:1 1 calc(100% - 100px); min-width:0; order:0; gap:8px; }
  .brand img { width:32px; height:32px; }
  .brand b { font-size:18px; }
  .brand small { display:none; }
  .brand-green { display:inline; }
  .header-actions { display:grid; grid-template-columns:minmax(0,1fr) auto 40px 40px; width:100%; flex:1 1 100%; gap:6px; order:1; }
  .player-button { width:100%; min-width:0; max-width:none; min-height:43px; padding:8px 10px; gap:7px; }
  .player-button>span:first-child { display:grid; }
  .player-button b { font-size:12px; }
  .header-actions .music-button,.header-actions .icon-button { width:40px; min-width:40px; height:43px; border-radius:8px; }
  .age-button { background:white; min-height:43px; padding:4px 9px; }
  .age-button>span:first-child { font-size:8px; }
  .age-button b { font-size:12px; }
  .main-nav { justify-content:space-between; gap:10px; margin-bottom:20px; padding:0; }
  .main-nav>button { padding:11px 0 13px!important; min-height:52px; flex:0 1 auto; font-size:11px; gap:5px; white-space:nowrap; }
  .main-nav>button>span:first-child { display:grid; width:17px; height:19px; }
  .main-nav .garden-ui-icon { width:17px; height:17px; }
  .tiny-count { min-width:16px; height:17px; font-size:9px; padding:0 3px; }
  .room-sr-title { font-size:20px; margin:0 0 13px; }
  .room-grid-focused { grid-template-columns:minmax(0,1fr); gap:26px; }
  .room-grid-focused .habitat-card { padding:0; border-radius:0; }
  .room-grid-focused .habitat { height:340px; border-radius:8px; }
  .room-grid-focused .habitat.room-play-active { height:340px; min-height:260px; }
  .pet-tag { top:12px; left:12px; min-height:37px; padding:6px 10px; font-size:12px; }
  .pet-tag small { font-size:10px; }
  .habitat-weather { top:12px; right:12px; min-width:38px; width:38px; min-height:38px; height:38px; }
  .habitat .pet-speech { top:63px; max-width:calc(100% - 36px); padding:7px 12px; font-size:12px; }
  .room-grid-focused .place-strip { padding:5px 0; font-size:11px; }
  .place-strip>span,.place-strip>button { font-size:11px; }
  .room-grid-focused .garden-care-actions { gap:8px; padding:0; }
  .room-grid-focused .garden-care-actions button { min-height:75px; padding:9px 4px; flex-direction:column; gap:5px; border-radius:8px; }
  .garden-care-actions button svg,.garden-care-actions button img { width:27px; height:27px; }
  .pet-fun-actions button b { font-size:12px; }
  .room-progress { padding:0; border-radius:0; display:grid; grid-template-columns:1fr 1fr; gap:0 23px; }
  .room-record { grid-column:1/-1; padding:0 0 16px; }
  .room-record span { font-size:13px; }
  .room-record b { font-size:23px; }
  .room-progress>.friendship-meter { grid-column:1; grid-row:2/span 2; margin:0; padding:20px 0 0; border:0; }
  .room-progress .reward-goal { grid-column:2; grid-row:2; margin:19px 0 12px; padding:10px; gap:8px; }
  .reward-goal img { width:34px; height:34px; }
  .reward-goal>div { font-size:10px; }
  .reward-goal b { font-size:11px; }
  .friendship-top { flex-wrap:wrap; gap:5px; }
  .friendship-top>span { font-size:12px; }
  .friendship-hearts { font-size:18px; gap:4px; }
  .room-progress .friendship-label { font-size:12px; margin:10px 0; }
  .room-progress .friendship-hint { font-size:11px; line-height:1.9; }
  .room-progress .progress-section { grid-column:2; grid-row:3; padding:0; }
  .progress-text { flex-wrap:wrap; gap:2px; margin-bottom:9px; }
  .progress-text b { font-size:11px; }
  .progress-text span { font-size:9px; text-align:left; }
  .room-progress .stage-path { margin:15px -5px 0; }
  .stage-step { gap:6px; }
  .stage-step .stage-icon { width:20px; height:20px; font-size:10px; }
  .room-progress .stage-step>span:last-child { font-size:8px; }
  .growth-hint { font-size:10px; margin:14px 0 0; padding-top:12px; }
  .bottom-row { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:19px; margin-top:24px; }
  .journey-card { padding:0; gap:10px; }
  .journey-copy { min-width:0; }
  .journey-copy h3 { font-size:12px; }
  .journey-copy p { font-size:10px; }
  .family-preview { gap:0; }
  .family-preview .mini-pet { width:38px; height:60px; }
  .little-fact { padding:13px 0 0; border-top:1px solid var(--line); }
  .little-fact p { font-size:11px; }
  .little-fact br { display:none; }
  .page-footer { margin-top:22px; gap:14px; align-items:flex-start; }
  .page-footer span,.page-footer button { font-size:9px; }
  .page-footer button { padding:0; text-align:right; }
  .page-heading h1 { font-size:23px; }
  .dialog-shell,.activity-dialog { padding:23px 20px; }
  dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:10px; }
  .dialog-top h2,.activity-dialog>.dialog-top h2 { font-size:19px; }
  .question-prompt { font-size:21px; line-height:2.1; }
  .choice { font-size:16px; padding:13px 10px; gap:8px; min-height:78px; }
  .choice-grid { gap:9px; }
  .choice .choice-index { width:23px; height:23px; flex-basis:23px; font-size:11px; }
  .activity-grid { gap:9px; }
  .activity-card { min-height:152px; padding:12px 6px; }
  .activity-illustration,.activity-illustration img { width:75px; height:73px; }
  .activity-card-copy strong { font-size:12px; }
  .activity-card-copy small { font-size:10px; }
  .toy-picker-card .activity-illustration,.toy-picker-card .activity-illustration img { width:80px; height:76px; }
  .wardrobe-tabs button { gap:5px; font-size:12px; }
  .wardrobe-tabs .garden-ui-icon { width:17px; height:17px; }
  .wardrobe-preview { padding:12px 0; }
  .wardrobe-preview .dressed-pet { width:240px!important; height:240px!important; }
  .reward-shelf { gap:9px; }
  .reward-tile { min-height:139px; }
  .reward-tile small { font-size:10px; }
  .tree-overview,.family-tree,.your-path { padding-left:0; padding-right:0; border-radius:0; }
  .tree-guide { padding:0 0 20px; }
  .secret-branch { padding-left:0; padding-right:0; }
  .player-entry { padding:22px 22px 20px; }
  .entry-brand { font-size:15px; }
  .entry-intro { min-height:208px; margin:20px -22px 22px; padding:27px 22px; }
  .entry-copy h2 { font-size:25px; }
  .entry-copy>p:last-child { font-size:11px; }
  .entry-portrait { right:12px; width:160px; min-height:185px; }
  .entry-portrait>.creature-art { width:160px!important; height:160px!important; }
  .entry-age-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .entry-age-options label { min-height:60px; }
  .entry-age-options strong { font-size:13px; }
  .entry-age-options small { font-size:10px; }
}
@media(max-width:380px) {
  body { padding-left:12px; padding-right:12px; }
  .brand b { font-size:17px; }
  .main-nav { gap:7px; }
  .main-nav>button { font-size:10px; gap:4px; }
  .main-nav>button>span:first-child { width:16px; }
  .tiny-count { display:none; }
  .room-grid-focused .habitat { height:300px; }
  .room-grid-focused .habitat.room-play-active { height:300px; }
  .room-progress { gap:0 16px; }
  .family-preview .mini-pet { width:30px; }
  .entry-copy { width:66%; }
  .entry-copy h2 { font-size:23px; }
  .entry-portrait { right:-3px; width:138px; min-height:173px; }
  .entry-portrait>.creature-art { width:143px!important; height:143px!important; }
  .entry-copy>p:last-child { font-size:10px; }
  .dialog-shell,.activity-dialog { padding:20px 16px; }
  .player-entry { padding:20px 22px; }
  .activity-grid { gap:7px; }
  .activity-card-copy strong { font-size:11px; }
  .wardrobe-tabs button { font-size:11px; gap:3px; }
  .wardrobe-tabs .garden-ui-icon { width:15px; height:15px; }
}
@media(max-width:730px) and (max-height:700px) {
  .site-header { padding:12px 0 7px; gap:8px; }
  .brand img { width:28px; height:28px; }
  .header-actions .music-button,.header-actions .icon-button { height:40px; }
  .player-button,.age-button { min-height:40px; }
  .main-nav { margin-bottom:14px; }
  .main-nav>button { min-height:46px; padding-top:9px!important; padding-bottom:11px!important; }
  .room-sr-title { font-size:18px; margin-bottom:10px; }
  .room-grid-focused .habitat { height:280px; }
  .room-grid-focused .habitat.room-play-active { height:280px; }
}
@media(max-width:699px) {
  dialog:has(.garden-wardrobe) { overflow:hidden; }
  .garden-wardrobe { display:flex; flex-direction:column; height:min(760px,calc(100dvh - 26px)); overflow:hidden; padding:20px 16px; }
  .garden-wardrobe>.dialog-top { flex:none; margin-bottom:12px; }
  .garden-wardrobe>.dialog-sub { display:none; }
  .garden-wardrobe>.wardrobe-preview { flex:none; height:247px; min-height:0; padding:0; justify-content:center; }
  .garden-wardrobe .wardrobe-preview>.dressed-pet { width:220px!important; height:220px!important; }
  .garden-wardrobe .wardrobe-preview>span:last-child { font-size:13px; line-height:24px; }
  .garden-wardrobe>.wardrobe-tabs { position:static; flex:none; margin:9px 0 12px; }
  .garden-wardrobe>.wardrobe-tabs button { min-height:44px; padding:6px 3px; }
  .garden-wardrobe>.reward-shelf { flex:1; min-height:0; align-content:start; grid-auto-rows:minmax(132px,max-content); margin:0; padding:1px 3px 6px 1px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .garden-wardrobe .reward-tile { min-height:132px; }
  .garden-wardrobe>.kind-note { flex:none; padding:4px 0 0; font-size:10px; }
  .garden-wardrobe>.kind-note:last-child { display:none; }
}
@media(max-width:699px) and (max-height:700px) {
  .garden-wardrobe { padding:15px 15px; }
  .garden-wardrobe>.dialog-top { margin-bottom:9px; }
  .garden-wardrobe>.wardrobe-preview { height:196px; }
  .garden-wardrobe .wardrobe-preview>.dressed-pet { width:174px!important; height:174px!important; }
  .garden-wardrobe .wardrobe-preview>span:last-child { font-size:12px; line-height:22px; }
  .garden-wardrobe>.wardrobe-tabs { margin:6px 0 9px; }
  .garden-wardrobe>.reward-shelf { grid-auto-rows:minmax(125px,max-content); }
  .garden-wardrobe .reward-tile { min-height:125px; }
  .garden-wardrobe .reward-tile img { width:60px; height:60px; }
  .garden-wardrobe .remove-outfit>span { height:60px; font-size:46px; }
}
@media(prefers-reduced-motion:reduce) {
  button { transition:none; }
  .room-grid-focused .garden-care-actions button:hover { transform:none; }
}