/* Sprout — warm wellness palette, mobile-first, system fonts only (offline). */
:root{
  --cream:#fdf8ef;
  --paper:#fffdf8;
  --leaf:#2e7d5b;
  --leaf-dark:#1f5c41;
  --leaf-soft:#dcefe2;
  --sage:#7fb069;
  --sun:#f4b942;
  --sun-soft:#fdeed3;
  --peach:#f6c9a0;
  --ink:#2f3a33;
  --ink-soft:#5c6b60;
  --line:#e6ddc9;
  --radius:18px;
  --shadow:0 4px 18px rgba(46,90,64,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Letterbox: the page around the app column is one flat tone; the
     warm gradient lives on the column itself (main, below). */
  background-color:var(--cream);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  min-height:100vh;
  min-height:100dvh;
  /* The shell is exactly one screen tall, so the flex column below can
     hand the tab region only the space its content needs (see main and
     #main-view): short screens hug their content instead of stretching
     an empty background to the bottom of the display. */
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{
  max-width:480px;width:100%;margin:0 auto;padding:0 16px 40px;
  background:linear-gradient(180deg,var(--sun-soft) 0,var(--cream) 220px,var(--cream) 100%);
  box-shadow:0 0 24px rgba(0,0,0,0.06);
  /* flex:0 1 auto — the column wraps its content (it may shrink when a
     tab is taller than the screen, never grows past its content). With
     flex:1 here, the gradient panel filled the whole screen height and
     short screens showed a slab of empty background (Daniel, 2026-10-18). */
  flex:0 1 auto;min-height:0;display:flex;flex-direction:column;
}

/* Header */
.app-header{
  max-width:480px;width:100%;margin:0 auto;padding:18px 16px 6px;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{font-size:2.125rem;line-height:1}
.app-header h1{margin:0;font-size:1.625rem;color:var(--leaf-dark);letter-spacing:.2px}
.tagline{margin:0;font-size:0.7812rem;color:var(--ink-soft)}
.sunshine-badge{
  background:var(--paper);border:1.5px solid var(--sun);color:#8a5a00;
  border-radius:999px;padding:6px 14px;font-weight:700;font-size:1rem;box-shadow:var(--shadow);
  white-space:nowrap;
}

/* Cards */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-top:16px;
}
.gentle{color:var(--ink-soft)}
.gentle.small{font-size:0.875rem;margin:4px 2px 0}
.fineprint{font-size:0.7812rem;color:var(--ink-soft);margin-top:14px}

/* Buttons & inputs */
.btn{
  font:inherit;font-weight:600;border-radius:999px;border:1.5px solid transparent;
  padding:11px 20px;cursor:pointer;min-height:48px;touch-action:manipulation;
}
:focus-visible{
  outline:3px solid var(--leaf-dark);outline-offset:2px;
}
.btn-primary{background:var(--leaf);color:#fff}
.btn-primary:active{background:var(--leaf-dark)}
.btn-soft{background:var(--leaf-soft);color:var(--leaf-dark);border-color:var(--sage)}
.btn-choice{background:var(--cream);border-color:var(--line);color:var(--ink);flex:1}
.btn-choice.selected{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-dark)}
.btn-chip{background:var(--cream);border-color:var(--line);color:var(--ink-soft);padding:8px 13px;min-height:44px;font-size:0.875rem}
.btn-chip.selected{background:var(--sun-soft);border-color:var(--sun);color:#8a5a00}
.btn-ghost{background:none;color:var(--ink-soft);border-color:var(--line);font-size:0.8438rem;min-height:44px;padding:8px 14px}
input[type="text"]{
  font:inherit;width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);margin:6px 0 12px;min-height:50px;
}
label{font-weight:600}

/* Adopt */
.adopt-card{text-align:center}
.adopt-card form{text-align:left;margin-top:14px}
.adopt-card .btn{width:100%}
.adopt-img{margin-top:4px}

/* Pet */
.pet-card{text-align:center}
.pet-stage-wrap{
  background:radial-gradient(circle at 50% 38%,#fff7df 0,#eef7ec 62%,#e2f0e0 100%);
  border-radius:50%;width:216px;height:216px;margin:2px auto 8px;
  display:flex;align-items:center;justify-content:center;
}
.pet-img{width:190px;height:190px;object-fit:contain}
.pet-img.bounce{animation:bounce .6s ease}
.pet-img.sway{animation:sway 3.2s ease-in-out infinite}
@keyframes bounce{0%{transform:translateY(0)}35%{transform:translateY(-14px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.pet-img.bounce,.pet-img.sway{animation:none}.progress-fill{transition:none}}
.pet-card h2{margin:6px 0 2px;font-size:1.5rem;color:var(--leaf-dark)}
.stage-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--leaf-dark);letter-spacing:.4px;text-transform:uppercase;margin-top:2px}
.pet-message{font-size:1.0312rem;margin:10px 6px 4px;min-height:1.5em}
.growth{margin:14px auto 4px;max-width:420px;text-align:left}
.growth-row{font-size:0.8438rem;color:var(--ink-soft);margin-bottom:5px}
.progress{height:12px;background:var(--leaf-soft);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--sage),var(--sun));border-radius:999px;transition:width .5s ease}
.stats{display:flex;gap:10px;margin:16px 0 4px;padding:0}
.stat{flex:1;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:10px 4px}
.stat dt{font-size:0.75rem;color:var(--ink-soft);font-weight:600}
.stat dd{margin:2px 0 0;font-size:1.25rem;font-weight:700;color:var(--leaf-dark)}
.rest-note{background:var(--sun-soft);border:1px solid var(--peach);border-radius:12px;padding:10px 12px;font-size:0.9062rem;margin:12px 0 2px}

/* Check-ins */
.section-title{margin:26px 2px 0;font-size:1.25rem;color:var(--leaf-dark)}
.checkin-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.checkin-card h3{margin:0;font-size:1.125rem}
.checkin-card .q{color:var(--ink-soft);margin:6px 0 12px;font-size:0.9062rem}
.done-badge{background:var(--leaf-soft);color:var(--leaf-dark);font-size:0.7812rem;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.checkin-card.done{border-color:var(--sage)}
.mood-row{display:flex;gap:6px;justify-content:space-between}
.mood-btn{
  flex:1;background:var(--cream);border:1.5px solid var(--line);border-radius:14px;
  padding:10px 2px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:74px;font:inherit;
}
.mood-btn .face{font-size:1.75rem;line-height:1.15}
.mood-btn .mood-word{font-size:0.7188rem;color:var(--ink-soft);font-weight:600}
.mood-btn.selected{background:var(--sun-soft);border-color:var(--sun)}
.water-row{text-align:center}
.glasses{font-size:1.375rem;letter-spacing:3px;min-height:30px}
.glasses .glass-empty{opacity:.28;filter:grayscale(1)}
.water-count{margin:4px 0 10px;font-weight:600}
.water-actions{display:flex;gap:10px;justify-content:center}
.choice-row{display:flex;gap:10px}
.sleep-label{display:block;margin-bottom:6px}
.sleep-label output{font-weight:700;color:var(--leaf-dark)}
input[type="range"]{width:100%;accent-color:var(--leaf);height:44px}
.sleep-quick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
#sleep-save{width:100%}
.all-done{background:var(--leaf-soft);border:1px solid var(--sage);color:var(--leaf-dark);border-radius:14px;padding:13px 14px;font-weight:600;text-align:center;margin-top:16px}
.app-footer{text-align:center;margin-top:26px;color:var(--ink-soft);font-size:0.875rem}
.app-footer p{margin:0 0 12px}

@media (min-width:640px){
  .pet-stage-wrap{width:248px;height:248px}
  .pet-img{width:218px;height:218px}
  .app-header h1{font-size:1.875rem}
}

/* ---- Phase 1/2 additions: picker, profiles, grounding, learned, calm ---- */
select{
  font:inherit;width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);margin:6px 0 12px;min-height:50px;color:var(--ink);
}
.picker{border:none;margin:0 0 8px;padding:0}
.picker legend{font-weight:600;margin-bottom:8px}
.picker-row{display:flex;gap:10px}
.picker-btn{
  flex:1;background:var(--cream);border:2px solid var(--line);border-radius:14px;cursor:pointer;
  padding:12px 6px;font:inherit;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:48px;
}
.picker-btn.selected{border-color:var(--leaf);background:var(--leaf-soft)}
.picker-btn:focus-visible{outline:3px solid var(--leaf-dark);outline-offset:2px}
.check-row{
  display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:0.9062rem;
  margin:8px 0 14px;cursor:pointer;text-align:left;
}
.check-row input{width:24px;height:24px;margin-top:2px;accent-color:var(--leaf);flex:none}
.hint{
  background:var(--sun-soft);border:1px solid var(--peach);border-radius:10px;
  padding:8px 10px;font-size:0.8438rem;margin:0 0 10px;color:var(--ink);
}
.preview-list{list-style:none;margin:8px 0 0;padding:0;font-size:0.9375rem}
.preview-list li{padding:5px 0;border-bottom:1px dashed var(--line)}
.preview-list li:last-child{border-bottom:none}
.grounding-text{font-size:1.0312rem;margin:14px 0;min-height:1.5em}
.learned-list{margin:8px 0 14px;padding-left:20px;font-size:0.9062rem;color:var(--ink)}
.learned-list li{margin:5px 0}
.support-box{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:14px;text-align:left;font-size:0.8438rem;color:var(--ink-soft);margin:0 0 14px;
}
.support-box p{margin:0 0 8px}
.support-box p:last-child{margin:0}
#learned-toggle{width:100%;margin-top:12px}
/* Calm mode (sensory control): no motion, muted palette. User-chosen, always reversible. */
body.calm{--sun:#d9c9a0;--sun-soft:#efe9d8;--sage:#8aa88e;--leaf:#4a7a5f;--leaf-dark:#3c5f4c}
body.calm .pet-img{animation:none !important}
/* Pet-energy "still" (wellbeing toggle): the pet rests — no sway, no bounce. */
body.well-still .pet-img,.well-still .pet-img{animation:none !important}
body.calm .progress-fill{transition:none}
body.calm *,body.calm *::before,body.calm *::after{animation:none !important;transition:none !important}
/* Calm must also mute the hard-coded surfaces the variable palette cannot reach. */
body.calm .pet-stage-wrap{background:radial-gradient(circle at 50% 38%,#f4f1e6 0,#edf2ea 62%,#e6eee3 100%)}
body.calm .progress-fill{background:var(--leaf)}

/* ---- Research-addition prototypes (UX & Sensory slice, 2026-10-15) ----
   Functional today: quick-actions jump links (plain anchors, no JS needed).
   Ready for Condition/app.js wiring: text-roomy density channel and the
   Regular/Low day-switch segmented control (reuse .btn-choice.selected). */
.quick-actions{display:flex;gap:10px;margin-top:16px}
.quick-actions a{text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center}
.settings-group{border:none;margin:0 0 6px;padding:0}
.settings-group legend{font-weight:700;color:var(--leaf-dark);margin-bottom:4px;padding:0}
body.text-roomy{line-height:1.75}
body.text-roomy .card{padding:26px 22px}
body.text-roomy .fineprint,body.text-roomy .support-box{font-size:0.9062rem}
body.text-roomy .checkin-card .q,body.text-roomy .gentle.small{font-size:1rem}
.day-switch{display:flex;gap:10px}
.changes-list{margin:8px 0 0;padding-left:20px;font-size:0.9062rem;color:var(--ink)}

/* Pause / quiet view (coordinator D1 fix, per UX spec) */
#quiet-view{max-width:480px;width:100%;margin:48px auto;padding:0 16px 40px;text-align:center}
#quiet-view .pet-img{animation:none}
#quiet-colour{height:140px;border-radius:14px;background:var(--leaf-soft);margin-bottom:16px}
.quiet-text{font-size:1.0312rem;color:var(--ink);margin:0 0 18px}
#pause-btn{flex:none}

/* ---- Appearance: themes, word size, letter shapes, calm motion, space ----
   Worker 1 (Accessibility and Appearance). All picks are the user's own,
   saved on this device only, and never change on their own. The look stays
   in the same place with the same words in every theme (safety through
   sameness). */
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("assets/fonts/atkinson-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("assets/fonts/atkinson-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* Skip link: hidden until it is reached by keyboard, then plainly visible. */
.skip-link{
  position:absolute;left:8px;top:-80px;z-index:60;
  background:var(--paper);color:var(--leaf-dark);
  border:2px solid var(--leaf-dark);border-radius:999px;
  padding:12px 20px;font-weight:700;text-decoration:none;
}
.skip-link:focus{top:8px}

/* Word size: root steps. All word sizes in this sheet are in rem, so these
   steps scale the words and leave the layout bones in place. */
html[data-text-size="large"]{font-size:18px}
html[data-text-size="xlarge"]{font-size:20px}
/* At the biggest size, rows wrap instead of squeezing words off the edge. */
html[data-text-size="xlarge"] .mood-row,
html[data-text-size="xlarge"] .choice-row,
html[data-text-size="xlarge"] .water-actions,
html[data-text-size="xlarge"] .sleep-quick,
html[data-text-size="xlarge"] .quick-actions,
html[data-text-size="xlarge"] .stats{flex-wrap:wrap}
html[data-text-size="xlarge"] .mood-btn{min-width:3.5rem}
html[data-text-size="xlarge"] .stat{min-width:5.5rem}
html[data-text-size="xlarge"] .btn,
html[data-text-size="large"] .btn{overflow-wrap:break-word;height:auto}

/* Easy to read letters: same-origin font when it loads, plain wide stack
   behind it, plus a little more room between letters and words. */
html[data-font="reading"] body{
  font-family:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  letter-spacing:.02em;word-spacing:.06em;
}

/* Space between things: compact packs the same cards a little tighter.
   Comfortable is the plain default above; nothing moves to a new place. */
html[data-density="compact"] .card{padding:12px;margin-top:10px}
html[data-density="compact"] main{padding-bottom:24px}
html[data-density="compact"] .section-title{margin-top:18px}
html[data-density="compact"] .pet-img{width:150px;height:150px}
html[data-density="compact"] .pet-stage-wrap{width:172px;height:172px}

/* Calm motion: one class on the page stops every move and fade, app-wide.
   This sits next to the reduced-motion media rule above and does the same
   job when the user picks it by hand. */
html.calm-motion *,html.calm-motion *::before,html.calm-motion *::after{
  animation:none !important;transition:none !important;
}

/* Dark theme: calm dark colours. Words on cards and on the page both stay
   at strong contrast (body words are light on near-black green). */
html[data-theme="dark"]{
  --cream:#131916;--paper:#1d2620;--leaf:#2e7d5b;--leaf-dark:#a9dcbc;
  --leaf-soft:#2a3d31;--sage:#5f8a6e;--sun:#f4b942;--sun-soft:#2c2c1c;
  --peach:#7a5c3e;--ink:#f4f7f2;--ink-soft:#ccd8cc;--line:#44544a;
  --shadow:0 4px 18px rgba(0,0,0,.45);
}
html[data-theme="dark"] .pet-stage-wrap{background:radial-gradient(circle at 50% 38%,#33453a 0,#26332b 62%,#1f2b23 100%)}
html[data-theme="dark"] .sunshine-badge{color:var(--sun)}
html[data-theme="dark"] .btn-chip.selected{color:var(--sun)}
html[data-theme="dark"] body.calm .pet-stage-wrap{background:radial-gradient(circle at 50% 38%,#2c3830 0,#232d26 62%,#1e2721 100%)}

/* High contrast theme: black, white and yellow only. Body words are black
   on white (the strongest pair there is). */
html[data-theme="contrast"]{
  --cream:#ffffff;--paper:#ffffff;--leaf:#000000;--leaf-dark:#000000;
  --leaf-soft:#ffff00;--sage:#000000;--sun:#ffff00;--sun-soft:#ffffcc;
  --peach:#000000;--ink:#000000;--ink-soft:#1a1a1a;--line:#000000;
  --shadow:none;
}
html[data-theme="contrast"] .pet-stage-wrap{background:#ffffff;border:2px solid #000000}
html[data-theme="contrast"] .progress-fill{background:#000000}
html[data-theme="contrast"] .sunshine-badge{color:#000000;border-color:#000000}
html[data-theme="contrast"] .btn-chip.selected{color:#000000;border-color:#000000}
html[data-theme="contrast"] .mood-btn.selected,
html[data-theme="contrast"] .picker-btn.selected,
html[data-theme="contrast"] .btn-choice.selected{border-color:#000000}
html[data-theme="contrast"] .card{border-width:2px}
html[data-theme="contrast"] :focus-visible{outline:4px solid #000000;outline-offset:2px}
html[data-theme="dark"] :focus-visible{outline:3px solid var(--leaf-dark);outline-offset:2px}

/* Listen and voice-typing controls (added by the appearance code only when
   the browser can really do them; they are never shown as greyed teases). */
.listen-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.voice-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.voice-note{
  border:1.5px solid var(--line);background:var(--sun-soft);color:var(--ink);
  border-radius:12px;padding:12px;margin-top:8px;font-size:0.9375rem;
}
.voice-note p{margin:0 0 10px}

/* ===== 2026-10-15 collection rebuild: cards, home buttons, shelf, gate =====
   Pick cards (personality / kind / species / adventures): big, labeled,
   one tap. Every target is at least 44px; the cards are far bigger. */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:12px 0}
.pick-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-height:96px;padding:14px 10px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--cream);color:var(--ink);font:inherit;cursor:pointer;text-align:center;
}
.pick-card:hover{border-color:var(--sage)}
.pick-card.selected{border-color:var(--leaf);background:var(--leaf-soft)}
.pick-card:focus-visible{outline:3px solid var(--leaf-dark);outline-offset:2px}
.pick-card[disabled]{opacity:.65;cursor:default}
.pick-card .pick-emoji{font-size:2.375rem;line-height:1.1}
.pick-card .pick-name{font-weight:700;font-size:1rem}
.pick-card .pick-sub{font-size:0.8125rem;color:var(--ink-soft)}
.pick-card .pick-ribbon{
  position:absolute;top:8px;right:8px;background:var(--sun);color:#8a5a00;
  font-size:0.6875rem;font-weight:700;border-radius:999px;padding:2px 8px;
}
.species-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.adopt-step h3{margin-top:18px}
.adopt-nav{margin-top:16px}
.adopt-nav .btn{flex:1}

/* Home: the four giant buttons */
.dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.dash-btn{
  min-height:64px;font-size:1.1875rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;text-align:center;
}

/* Collection shelf */
.shelf-card{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--cream);padding:14px;margin:10px 0;
}
.shelf-card .pick-emoji{font-size:2.5rem;line-height:1.1}
.shelf-words{flex:1}
.shelf-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.shelf-badge{
  background:var(--sun-soft);border:1px solid var(--sun);color:#8a5a00;
  border-radius:999px;padding:2px 9px;font-size:0.75rem;font-weight:600;
}
.shelf-badge.main{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-dark)}
.shelf-actions{margin-top:10px}

/* Daily gift + welcome moments */
#daily-gift{margin-top:10px}
.welcome-card{border-color:var(--sun)}

/* On-device account gate (accounts.js) */
.account-gate{
  position:fixed;inset:0;z-index:2000;overflow:auto;
  background:linear-gradient(180deg,var(--sun-soft) 0,var(--cream) 220px,var(--cream) 100%);
  padding:24px 14px;
}
.account-gate-card{
  max-width:430px;margin:24px auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px;text-align:center;
}
.gate-mark{font-size:3rem}
.gate-heading{color:var(--leaf-dark);margin:6px 0}
.gate-line{color:var(--ink-soft)}
.gate-btn{width:100%;min-height:56px;margin-top:12px;font-size:1.0625rem}
.gate-field{text-align:left;margin-top:12px}
.gate-field label{font-weight:600;display:block;margin-bottom:4px}
.gate-field input{
  font:inherit;width:100%;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper);min-height:50px;box-sizing:border-box;
}
.gate-error{color:#a33b2e;font-weight:600;min-height:1.2em;margin:10px 0 0}
.gate-honest{text-align:left}
html[data-theme="contrast"] .pick-card.selected{border-color:#000000}
html[data-theme="contrast"] .shelf-badge{color:#000000;border-color:#000000}

/* Rename editor on shelf cards + companion manage inputs */
.shelf-rename{margin-top:12px;text-align:left}
.shelf-rename label{font-weight:600;display:block;margin-bottom:4px}
.shelf-rename input,
#companion-manage-card input{
  font:inherit;width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper);min-height:50px;box-sizing:border-box;margin:6px 0 10px;
}

/* ===== Five tabs (layout pass, 2026-10-15) =====
   #main-view used to be one mega-page of ~16 viewports. Now a view
   manager in app.js shows one tab at a time: sections outside the
   active tab get .view-gated. The class composes with each section's
   own hidden attribute — either one hides the section. The footer is
   never gated, so the 988 support box stays visible under every tab. */
.view-gated{display:none !important}

/* The tab region is bounded to the screen: the header and the tab bar
   always stay put, and a long tab (Support, with its settings lists)
   scrolls inside its own region only. Bottom padding keeps the last
   card clear of the fixed tab bar. flex:0 1 auto (with main, above)
   means the region also wraps its content: on a screen whose cards
   end early, the region — and the background panel behind it — ends
   with them, instead of stretching empty to the bottom of the display.
   The max-height stays as a cap for any shell where the flex sizing
   above does not apply. */
#main-view{
  flex:0 1 auto;min-height:0;max-height:calc(100dvh - 64px);
  overflow-y:auto;padding-bottom:96px;scroll-padding-bottom:96px;
}
#adopt-view{overflow-y:auto;min-height:0}
body:has(#quiet-view:not([hidden])) main{display:none}

/* Bottom tab bar: five big labeled tap targets, centered with the
   app column, always visible while the app is open. */
.tab-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:900;
  display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1.5px solid var(--line);
  box-shadow:0 -4px 18px rgba(46,90,64,.10);
}
.tab-bar[hidden]{display:none}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:6px 2px;cursor:pointer;
  background:none;border:2px solid transparent;border-radius:14px;
  font:inherit;font-weight:700;color:var(--ink-soft);
}
.tab-btn .tab-icon{font-size:1.375rem;line-height:1.1}
.tab-btn .tab-label{font-size:0.8125rem}
.tab-btn[aria-current="page"]{background:var(--leaf-soft);color:var(--leaf-dark);border-color:var(--sage)}

/* Train Me hub (2026-10-15): picked feeling words read as picked. */
#train-choices .btn.selected { background: var(--sage); color: #fff; border-color: var(--sage); }
#train-q { white-space: pre-wrap; }

/* Support-now opener row (2026-10-15): the button stands alone, full
   width, where the removed bar card used to be. */
#support-open-row{margin-top:16px}
#support-open-row .btn{width:100%}

/* v11: pet chat + AI access controls */
.chat-log { max-height: 320px; overflow-y: auto; margin: 0.5em 0; }
.chat-line { margin: 0.45em 0; }
.ai-access-row { display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: center; padding: 0.45em 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ai-access-cell { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.95em; }
.toggle-row { display: flex; gap: 0.5em; align-items: center; margin: 0.6em 0; font-weight: 600; }

/* ---------- v13: sign-in options ---------- */
.gate-hint-out{background:var(--leaf-soft,#e7f2e9);border-radius:12px;padding:10px 12px;margin:10px 0 0;text-align:left}
.gate-hint-out:empty{display:none}
.gate-quick{border-style:dashed}
.signin-options{margin-top:14px;border-top:1px solid var(--line,#e2ddd2);padding-top:10px}
.signin-row{padding:10px 0;border-bottom:1px dashed var(--line,#e2ddd2)}
.signin-row:last-of-type{border-bottom:0}
.signin-title{font-weight:700;margin:0 0 2px}
.signin-row input[type=text]{width:100%;min-height:44px;margin:6px 0;padding:8px 10px;border:1px solid var(--line,#d8d2c4);border-radius:10px;font:inherit}


/* ---------- Ask your pet (v11) ---------- */
.ask-card{border:2px solid var(--leaf-soft)}
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ask-head h3{margin:0}
.ask-level{font-size:0.8125rem;color:var(--leaf-dark);background:var(--leaf-soft);border:1px solid var(--sage);border-radius:999px;padding:4px 10px}
.ask-log{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:12px 0;padding:4px 2px;overscroll-behavior:contain}
.ask-msg{max-width:92%;border-radius:16px;padding:10px 14px;line-height:1.5}
.ask-msg p{margin:0 0 6px}
.ask-msg p:last-child{margin-bottom:0}
.ask-user{align-self:flex-end;background:var(--leaf);color:#fff;border-bottom-right-radius:6px}
.ask-pet{align-self:flex-start;background:var(--cream);border:1px solid var(--line);border-bottom-left-radius:6px}
.ask-who{font-size:0.75rem;font-weight:700;color:var(--leaf-dark);text-transform:uppercase;letter-spacing:.04em}
.ask-list{margin:6px 0 8px 1.2em;padding:0}
.ask-list li{margin:4px 0}
.ask-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ask-actions .btn{min-height:44px;padding:8px 14px;font-size:0.9rem}
.ask-feedback{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:0.875rem;color:var(--ink-soft)}
.ask-feedback .btn-chip{min-height:36px;padding:4px 12px}
.ask-form{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.ask-form input{flex:1 1 180px;min-height:48px;margin:0}
.ask-form .btn{min-height:48px}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ask-link{color:var(--leaf-dark);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.ask-badge{display:inline-block;font-size:0.72rem;font-weight:700;border-radius:999px;padding:1px 8px;margin-left:2px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);vertical-align:1px}
.ask-badge.ask-strong{background:var(--leaf-soft);border-color:var(--sage);color:var(--leaf-dark)}
.ask-badge.ask-good{background:var(--sun-soft);border-color:var(--sun);color:#7a5200}
.ask-topic h4,.ask-more h4{font-size:0.9rem;margin:10px 0 4px}
.ask-research-mini{border-left:3px solid var(--sage);padding-left:10px;margin-top:8px}
.ask-timer{text-align:center;background:var(--leaf-soft);border-radius:16px;padding:12px;margin-bottom:10px}
.ask-timer-clock{font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--leaf-dark);margin:0}
.ask-breathe{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0}
.ask-breathe-ring{width:120px;height:120px;border-radius:50%;background:var(--leaf-soft);border:3px solid var(--sage);display:flex;align-items:center;justify-content:center;transform:scale(.75);transition:transform 4s ease-in-out}
.ask-breathe-ring.grow{transform:scale(1);transition-duration:4s}
.ask-breathe-ring.shrink{transform:scale(.75);transition-duration:6s}
.ask-breathe-word{font-weight:700;color:var(--leaf-dark);margin:0}
.calm-motion .ask-breathe-ring,body.calm .ask-breathe-ring{transition:none}
@media (prefers-reduced-motion: reduce){.ask-breathe-ring{transition:none}}
.ask-form.ask-inline,.ask-inline{display:flex;gap:8px;margin-top:8px}
.ask-inline input{flex:1;min-height:44px;margin:0}
.ask-form label,.ask-details label{display:block}
form.ask-form:not(#ask-form){flex-direction:column}
.ask-details{margin:12px 0;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--cream)}
.ask-details summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:32px}
.ask-details input,.ask-details select{width:100%}
@media (max-width:560px){.ask-form input{flex-basis:100%}.ask-form .btn{flex:1 1 0}}

/* ---------- v12: fitness, studies, mail, urgent ---------- */
.ask-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}
.ask-sub .btn-chip{min-height:36px}
#ask-google-btn[aria-pressed="true"]{background:var(--leaf-soft);border-color:var(--sage);color:var(--leaf-dark)}
.ask-urgent{background:#fff1ee;border:1px solid #e8b4a8;color:#8a2c17;border-radius:12px;padding:8px 10px;font-weight:600}
.ask-study,.ask-mail{padding:6px 0;border-bottom:1px dashed var(--line)}
.ask-study:last-child,.ask-mail:last-child{border-bottom:0}
.ask-mail-from{font-weight:600;margin:0 0 2px}
.fit-card h3{margin-top:0}
.fit-meter{margin:10px 0}
.fit-meter p{margin:0 0 4px;font-weight:600;font-variant-numeric:tabular-nums}
.fit-track{height:12px;border-radius:999px;background:var(--cream);border:1px solid var(--line);overflow:hidden}
.fit-track span{display:block;height:100%;width:0;background:var(--leaf);border-radius:999px;transition:width .4s ease}
.fit-week{display:flex;gap:6px;align-items:flex-end;height:80px;margin:12px 0 4px;padding:0 2px}
.fit-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.fit-day-bar{width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:var(--sage)}
.fit-day-bar.hit{background:var(--leaf)}
.fit-day-label{font-size:0.75rem;color:var(--ink-soft)}
.fit-walk{text-align:center;background:var(--leaf-soft);border-radius:16px;padding:12px;margin:10px 0}
.fit-walk-live{font-size:1.5rem;font-weight:700;color:var(--leaf-dark);margin:0 0 8px;font-variant-numeric:tabular-nums}
.fit-player{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--paper);margin-top:8px}
.fit-player-title{font-weight:700;margin:0 0 4px}
.fit-now{text-align:center;background:var(--leaf-soft);border-radius:12px;padding:10px;margin:8px 0}
.fit-now-name{font-weight:700;margin:0}
.fit-current{font-weight:700;color:var(--leaf-dark)}
.fit-done{opacity:.55;text-decoration:line-through}
@media (prefers-reduced-motion: reduce){.fit-track span{transition:none}}

/* ---------- v13: mood care ---------- */
.mood-card h3{margin-top:0}
.mood-card.mood-concern{border:2px solid var(--sun,#e7b64a)}
.mood-dots{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.mood-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--sage,#9fbfa6);background:transparent}
.mood-dot.m1{background:#c9d6cc;border-color:#8a9a8e}
.mood-dot.m2{background:#a9c7b0;border-color:#7d9c85}
.mood-dot.m3{background:#7fb38e;border-color:#5f9670}
.mood-dot.m4{background:#4f9a6a;border-color:#3f8058}
.mood-dot.m5{background:#2e7d5b;border-color:#215f44}
.mood-dot.today{outline:2px solid var(--leaf-dark,#215f44);outline-offset:2px}
.mood-dots-key{margin:4px 0 8px}
.mood-watch-row{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;font-size:0.95rem}
.mood-watch-row input{margin-top:4px;width:20px;height:20px;flex:0 0 auto}
.mood-good-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mood-good-input{min-height:44px;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* v14: back bars, species badge, profile multi-pick */
.view-back-bar { margin-bottom: 0.6rem; }
.pet-stage-wrap { position: relative; display: inline-block; }
.pet-species-badge {
  position: absolute; right: 4%; bottom: 4%;
  font-size: 2rem; line-height: 1;
  background: #fff; border: 2px solid var(--leaf, #3E9B6B);
  border-radius: 50%; padding: 0.32em 0.38em;
  box-shadow: 0 2px 8px rgba(36, 51, 36, 0.25);
}
.profile-picker { border: none; padding: 0; margin: 0 0 0.6rem; }
.profile-picker legend { font-weight: 700; margin-bottom: 0.4rem; }
#adopt-profile-group .check-row, #profile-group .check-row { margin: 0.35rem 0; }

/* ---------- v15: painted species portraits (species-art.js) ---------- */
.pet-stage-wrap{position:relative}
.pet-img.has-art{width:calc(190px * var(--art-scale,1));height:calc(190px * var(--art-scale,1));transition:width .4s ease,height .4s ease;filter:drop-shadow(0 4px 6px rgba(60,50,30,.12))}
.pet-img.has-art[data-art-mood="sleepy"]{filter:saturate(.85) brightness(.97) drop-shadow(0 4px 6px rgba(60,50,30,.12))}
.pet-img.has-art[data-art-mood="low"]{filter:saturate(.8) drop-shadow(0 4px 6px rgba(60,50,30,.12))}
.pet-stage-wrap.art-grown{box-shadow:0 0 0 4px rgba(246,195,68,.35),0 0 22px rgba(246,195,68,.35)}
.pet-fx{position:absolute;inset:0;pointer-events:none}
.pet-fx svg{position:absolute}
.pet-fx .fx-z{width:46px;height:46px;top:6px;right:8px;animation:fxFloat 3s ease-in-out infinite}
.pet-fx .fx-cloud{width:58px;height:42px;top:4px;right:2px;animation:fxFloat 4s ease-in-out infinite}
.pet-fx .fx-heart{width:26px;height:26px;top:14px;right:18px;animation:fxFloat 2.6s ease-in-out infinite}
.pet-fx .fx-sparkle{width:100%;height:100%;top:0;left:0;animation:fxTwinkle 1.6s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fxTwinkle{0%,100%{opacity:1}50%{opacity:.55}}
body.calm .pet-fx svg,body.well-still .pet-fx svg{animation:none !important}
@media (prefers-reduced-motion:reduce){.pet-fx svg{animation:none}.pet-img.has-art{transition:none}}
@media (min-width:640px){.pet-img.has-art{width:calc(218px * var(--art-scale,1));height:calc(218px * var(--art-scale,1))}}
.pick-art{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto}
.shelf-card .pick-art{width:64px;height:64px;flex:0 0 64px}

/* ---------- v16: Draw your pet (pet-art.js) ---------- */
.art-pad{margin-top:.75rem}
.art-prompt{font-weight:600;margin:.25rem 0 .5rem}
.art-canvas{display:block;width:100%;max-width:420px;aspect-ratio:1/1;margin:0 auto;background:var(--paper);border:2px dashed var(--line);border-radius:16px;touch-action:none;cursor:crosshair}
.art-tools{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.6rem 0}
.art-btn{min-height:var(--art-target,48px);min-width:var(--art-target,48px);padding:0 .9rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.art-btn:focus-visible,.art-swatch:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.art-save{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.art-swatch{width:var(--art-target,48px);height:var(--art-target,48px);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.art-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.art-status{min-height:1.4em;text-align:center;color:var(--ink-soft)}
.art-sprint{height:8px;border-radius:8px;background:var(--leaf-soft);overflow:hidden;max-width:420px;margin:0 auto .5rem}
.art-sprint-fill{display:block;height:100%;width:0;background:var(--sage);transition:width .25s linear}
.art-breath{display:flex;align-items:center;gap:.75rem;justify-content:center;margin:.25rem 0 .6rem}
.art-breath-ring{width:40px;height:40px;border-radius:50%;border:3px solid var(--sage);transform:scale(.7);transition-property:transform;transition-timing-function:ease-in-out}
.art-breath-ring.is-in{transform:scale(1.1)}
.art-breath-word{color:var(--ink-soft);font-weight:600}
.art-shelf-heading{margin:1rem 0 .4rem}
.art-shelf{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.art-item{display:flex;flex-direction:column;gap:.35rem;align-items:center;padding:.5rem;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.art-item img{width:96px;height:96px;object-fit:contain}
.art-item .art-btn{min-height:40px;width:100%;font-size:.9rem}
.art-use[aria-pressed="true"]{background:var(--leaf-soft);border-color:var(--leaf)}
.art-empty{color:var(--ink-soft)}
.pet-img.is-custom-art{object-fit:contain;border-radius:18px}
body.calm .art-breath-ring,html.calm-motion .art-breath-ring{transition:none;transform:scale(.9)}
body.calm .art-sprint-fill,html.calm-motion .art-sprint-fill{transition:none}
@media (prefers-reduced-motion:reduce){.art-breath-ring,.art-sprint-fill{transition:none}}

/* v17: Pet Playground (package module, shadow-DOM isolated). The host
   themes it through the module's own CSS variables, mapped from the
   app theme variables so light / dark / high-contrast appearances all
   carry in. Focus outlines inside the shadow tree are the module's. */
#pet-playground {
  --playground-text: var(--ink);
  --playground-bg: var(--paper);
  --playground-border: var(--leaf);
}
.playground-pet { position: relative; display: inline-block; }
.playground-pet img { width: 96px; height: 96px; object-fit: contain; }
.playground-recovery {
  border: 2px solid var(--sun); border-radius: 14px;
  padding: 12px 14px; margin-top: 10px; background: var(--sun-soft);
}
.playground-recovery p { margin: 0 0 8px; }

/* ---------- v21: chat bar + phone-width fixes ----------
 * The Ask card's form is a chat bar now: a round + button, the
 * typing field, and a round up-arrow send button, with the mic
 * button on its own row under the bar.
 * The width fixes: three flex rows could not shrink or wrap, so on
 * a phone their smallest width beat the screen and the whole page
 * panned sideways — the header row (brand + Pause + Help +
 * sunshine badge), every .choice-row of buttons, and the water
 * buttons row (which spilled off both sides at once). They wrap
 * now, the brand can shrink, and overflow-x: clip on the body is
 * a belt-and-braces guard so the page can never scroll sideways. */
body { overflow-x: hidden; overflow-x: clip; }
.app-header { flex-wrap: wrap; }
.brand { min-width: 0; }
.choice-row { flex-wrap: wrap; }
.water-actions { flex-wrap: wrap; }

/* A child a fold hid stays hidden, even if it has its own flex
 * display (before this, a folded .choice-row could show through). */
[data-fold-hidden] { display: none !important; }
.ask-form { flex-direction: column; }
.ask-bar { display: flex; gap: 8px; align-items: center; width: 100%; }
.ask-bar input { flex: 1 1 auto; min-width: 0; width: auto; }
.ask-round-btn {
  flex: none; width: 48px; height: 48px; border-radius: 999px;
  border: 2px solid var(--line); background: #fff; color: var(--brand-dark);
  font: inherit; font-size: 26px; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation; padding: 0;
}
.ask-send-btn { background: var(--brand); border-color: var(--brand); color: #fff; font-size: 22px; }
.ask-attach-menu { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ask-attach-menu[hidden] { display: none; }
.ask-attach-item { text-align: left; }
.ask-photo-img { display: block; max-width: 230px; width: 100%; height: auto; border-radius: 12px; margin-top: 6px; }
.ask-msg { overflow-wrap: break-word; }
.chat-log { display: flex; flex-direction: column; gap: 8px; }
.chat-log .chat-line {
  background: #fdfbf7; border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 10px; margin: 0; overflow-wrap: break-word;
}
#chat-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#chat-form input { flex: 1 1 auto; min-width: 0; width: auto; }
/* The bottom tab bar has the same min-content trap at 360px:
 * five labeled buttons need about 382px, so on a 360px phone the
 * Settings button slid off the edge. Smaller labels and padding
 * on narrow phones keep every tab whole and tappable. */
@media (max-width: 380px) {
  .tab-btn { padding: 6px 1px; min-width: 0; }
  .tab-btn .tab-label { font-size: 0.6875rem; }
}

/* v21: Calm games (games.js) — the Play hub + six games with your pet.
   Daniel's cap: the wrap is width:100% with max-width:600px; the app
   shell itself caps at 480px, so on phones (360–430 CSS px) everything
   below is fluid at the phone's own width. All controls ≥44px; game
   buttons run 48–56px. App palette variables only. */
.games-wrap{width:100%;max-width:600px;margin:0 auto}
.games-hub-title,.games-game-title{margin:4px 0 6px}
.games-cards{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0}
@media (min-width:430px){.games-cards{grid-template-columns:1fr 1fr}}
.games-card{border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--paper)}
.games-card-name{margin:2px 0 4px;font-size:1.05rem}
.games-card-line{margin:0 0 10px;color:var(--ink-soft)}
.games-chip{display:inline-block;background:var(--sun-soft);border:1px solid var(--sun);color:#8a5a00;border-radius:999px;padding:1px 8px;font-size:.8rem;font-weight:700}
.games-play-btn{width:100%;min-height:48px}
.games-navrow{margin:10px 0}
.games-navrow .btn{min-height:48px}
.games-pet{display:flex;gap:12px;align-items:center;margin:10px 0}
.games-pet-box{flex:none}
.games-pet-box img,.games-pet-img{width:84px;height:84px;object-fit:contain}
.games-pet-cheer{animation:gamesCheer 1.2s ease-in-out}
@keyframes gamesCheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html.calm-motion .games-pet-cheer{animation:none}
@media (prefers-reduced-motion:reduce){.games-pet-cheer{animation:none}}
.games-say{margin:0}
.games-intro{margin:4px 0}
.games-big-line{font-size:1.1rem;font-weight:600;margin:10px 0;min-height:1.5em}
.games-label{font-weight:700;margin:12px 0 4px}
.games-big-btn{width:100%;min-height:56px;font-size:1.1rem;margin:8px 0}
.games-keepsake{margin:8px 0}
/* Breathing Balloon */
.games-balloon{width:110px;height:110px;border-radius:50%;background:#a8cbe0;border:3px solid #5b84ae;margin:20px auto;transform:scale(1)}
/* Grounding Hunt */
.games-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.games-item{min-height:64px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px}
.games-item-emoji{font-size:26px;line-height:1.2}
.games-item-label{font-size:.8rem;color:var(--ink-soft)}
.games-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.games-found{opacity:.25}
/* Sorting Stones */
.games-sort-area{position:relative;height:280px;border:2px dashed var(--line);border-radius:14px;background:var(--cream);overflow:hidden;margin:10px 0}
.games-stone{position:absolute;width:56px;height:56px;min-width:56px;border-radius:50%;border:2px solid rgba(0,0,0,.3);color:#fff;font-weight:700;font-size:.85rem;padding:0;cursor:pointer}
.games-stone-held{outline:4px solid var(--sun);outline-offset:2px}
.games-baskets{display:flex;gap:8px}
.games-basket{flex:1;min-height:56px;border-width:3px}
/* Pattern Maker */
.games-pattern-row{display:flex;gap:8px;flex-wrap:wrap;min-height:62px;align-items:flex-start}
.games-blocks{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.games-block{width:60px;height:60px;border-radius:10px;border:2px solid var(--sage);background:var(--leaf-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px}
button.games-block{min-height:60px;cursor:pointer;color:var(--ink)}
.games-block-emoji{font-size:26px;line-height:1.15}
.games-block-name{font-size:.72rem;font-weight:700}
/* Gentle Garden + Pinwheel */
.games-plant{font-size:84px;text-align:center;margin:12px 0;line-height:1.2}
.games-garden-bed{font-size:28px;line-height:1.7;word-break:break-all;min-height:40px}
.games-pin{display:block;margin:12px auto;width:150px;height:165px}

/* v25: Play expansion Phase 1 (games.js) + installer (install.js).
   Same conventions as the v21 games block: fluid under the 600px
   cap, every control ≥48px, app palette variables only. */
.games-needs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.games-need-chip{min-height:48px;border-radius:999px;padding:8px 14px}
.games-need-on{background:var(--sun-soft);border-color:var(--sun);font-weight:700}
.games-why{margin:2px 0}
.games-coming{margin:6px 0;font-weight:700}
.games-suggest{border:2px solid var(--sun);border-radius:14px;padding:12px;background:var(--paper);margin:12px 0}
.games-reason{margin:4px 0 8px}
.games-shelves{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.games-shelf-chip{min-height:48px;border-radius:999px;padding:8px 14px}
.games-useful{border:2px solid var(--sage);border-radius:14px;padding:12px;background:var(--paper);margin:12px 0}
.games-steps{margin:6px 0 10px;padding-left:22px}
.games-steps li{margin:3px 0}
.games-caution{font-weight:700}
.games-field{margin:10px 0 4px}
.games-input{width:100%;min-height:48px;padding:10px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:1rem;box-sizing:border-box}
.games-controls{margin:14px 0 4px}
.games-controls .btn{min-height:48px}
.games-step-row{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0;background:var(--paper)}
.games-step-text{flex:1}
.games-pack-row{display:flex;gap:10px;align-items:center;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:6px 0;background:var(--paper);cursor:pointer}
.games-pack-row input{width:24px;height:24px;flex:none}
.games-cozy-scene{border:2px solid var(--line);border-radius:14px;padding:20px;margin:10px 0;background:#fdf6e9;color:#3a3226;text-align:center}
.games-cozy-scene[data-theme-pick="dark"]{background:#2b3440;color:#f2ead8}
.games-cozy-scene[data-theme-pick="contrast"]{background:#111111;color:#ffffff;border-width:4px}
.games-cozy-words{margin:8px 0 0}
.games-readback{margin:10px 0}
.games-path{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:12px 0}
.games-path-card{border:2px solid var(--sage);border-radius:14px;padding:10px 12px;background:var(--paper)}
.games-path-arrow{text-align:center;margin:2px 0;font-size:1.2rem}
.games-path-pic{font-size:30px;margin:2px 0}
.games-time{margin:6px 0}
.games-worse{margin:10px 0;min-height:48px}
.games-finish{margin:12px 0}
.games-keepsakes{border-top:2px solid var(--line);margin-top:14px;padding-top:8px}
.games-keep-line{margin:4px 0}
.games-badge-row{margin:8px 0}
.games-badge-row .btn{min-height:48px}
/* Installer: entry block + one-time card. The action is a real
   button-shaped link, ≥48px tall. */
.install-block{border:2px solid var(--sage);border-radius:14px;padding:12px;margin:12px 0;background:var(--paper)}
.install-app-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;text-decoration:none}
#install-prompt-card .choice-row .btn{min-height:48px}