/* PawPal theme: ivory, mint, fresh green, peach and coral. Cozy, rounded, family-friendly. */
:root {
  --canvas: #fff8ed;
  --surface: #ffffff;
  --surface-2: #ddf5e5;
  --border: #e9dcc6;
  --border-strong: #bfae8f;
  --ink: #244536;
  --muted: #4f6558;
  --accent: #48b879;
  --accent-hover: #3ca66b;
  --accent-ink: #14301f;
  --accent-text: #2a7a4e;
  --accent-strong: #1f6b43;
  --accent-soft: #ddf5e5;
  --accent-border: #a5dbbc;
  --success: #2a7f50;
  --success-ink: #ffffff;
  --success-soft: #ddf5e5;
  --success-strong: #1f6b43;
  --warning: #b4500b;
  --warning-ink: #ffffff;
  --warning-soft: #ffe6d6;
  --warning-strong: #8f3e08;
  --danger: #cc3f3f;
  --danger-ink: #ffffff;
  --danger-soft: #ffe0e0;
  --danger-strong: #a12d2d;
  --chart-1: #48b879;
  --chart-2: #ff7777;
  --chart-3: #ffbe98;
  --chart-4: #2a7a4e;
  --chart-5: #8f3e08;
  --chart-6: #5b8def;

  --x-peach: #ffbe98;
  --x-coral: #ff7777;
  --x-sky: #cdeefc;
  --x-night-a: #2b3a67;
  --x-night-b: #5a4a8c;
  --x-sunset-a: #ffd9b8;
  --x-sunset-b: #ff9a8b;
  --x-sand: #f6e3b8;

  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-sans: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;
  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 1rem;
  --shadow-card: 0 6px 18px color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #15251d;
  --surface: #1e3329;
  --surface-2: #274236;
  --border: #35544a;
  --border-strong: #5a8070;
  --ink: #fff8ed;
  --muted: #b3cabd;
  --accent: #48b879;
  --accent-hover: #5cc98b;
  --accent-ink: #0d2618;
  --accent-text: #86e0ac;
  --accent-strong: #b0f0cb;
  --accent-soft: #254a38;
  --accent-border: #3d7a5a;
  --success: #3fae71;
  --success-ink: #0d2618;
  --success-soft: #1f4a34;
  --success-strong: #8fe3b1;
  --warning: #e0883f;
  --warning-ink: #2a1405;
  --warning-soft: #4a2f1a;
  --warning-strong: #ffc49a;
  --danger: #e5645f;
  --danger-ink: #2b0a0a;
  --danger-soft: #4a2224;
  --danger-strong: #ffb0ac;
  --chart-1: #48b879;
  --chart-2: #ff7777;
  --chart-3: #ffbe98;
  --chart-4: #86e0ac;
  --chart-5: #e0883f;
  --chart-6: #8fb0ff;

  --x-sky: #2d5b6e;
  --x-night-a: #141c3a;
  --x-night-b: #3a2f66;
  --x-sunset-a: #8a4f3d;
  --x-sunset-b: #b0485a;
  --x-sand: #5b5238;
}

.pp-scene{position:relative;overflow:hidden;border-radius:var(--radius-card);border:2px solid var(--border);min-height:15rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:1rem;background:linear-gradient(var(--x-sky),var(--surface-2))}
.room-meadow{background:linear-gradient(var(--x-sky) 0 55%,var(--accent-soft) 55%)}
.room-cozy{background:linear-gradient(var(--warning-soft) 0 60%,var(--x-peach) 60%)}
.room-starry{background:linear-gradient(var(--x-night-a),var(--x-night-b));color:var(--ink)}
.room-beach{background:linear-gradient(var(--x-sunset-a) 0 55%,var(--x-sunset-b) 55% 70%,var(--x-sand) 70%)}
.pp-deco{position:absolute;top:.5rem;left:.75rem;font-size:1.6rem;opacity:.9}
.pp-deco2{position:absolute;top:.75rem;right:.75rem;font-size:1.4rem;opacity:.8}
.pp-pet{font-size:7rem;line-height:1;display:block;animation:pp-bob 2.4s ease-in-out infinite;filter:drop-shadow(0 8px 6px color-mix(in srgb,var(--ink) 25%,transparent))}
.pp-pet.sleepy{animation:pp-sway 3.6s ease-in-out infinite}
.pp-pet.hop{animation:pp-hop .6s ease-out 1}
.pp-bubble{background:var(--surface);color:var(--ink);border:2px solid var(--border);border-radius:1.25rem;padding:.4rem .9rem;font-weight:700;font-size:.95rem;margin-bottom:.5rem;text-align:center;max-width:90%}
.pp-fx{position:absolute;top:35%;left:50%;font-size:2.5rem;animation:pp-float 1.4s ease-out forwards;pointer-events:none}
.pp-mood{position:absolute;bottom:.5rem;right:.75rem;font-size:1.5rem}
.pp-bar{height:.7rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.pp-bar>i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .5s}
.pp-bar.low>i{background:var(--x-coral)}
.pp-bar.mid>i{background:var(--x-peach)}
.pp-tab{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem .2rem;border-radius:1rem;font-weight:700;font-size:.75rem;color:var(--muted);min-height:3rem}
.pp-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pp-tabs{position:sticky;bottom:.5rem;z-index:20;background:var(--surface);border:2px solid var(--border);border-radius:1.5rem;box-shadow:var(--shadow-card);padding:.35rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.25rem;margin-top:1rem}
.pp-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-card);padding:1rem;box-shadow:var(--shadow-card)}
.pp-pick{text-align:left;border:3px solid var(--border);border-radius:var(--radius-card);padding:.9rem;background:var(--surface);width:100%}
.pp-pick[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pp-mm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pp-mm button{aspect-ratio:1;font-size:2rem;border-radius:1rem;border:2px solid var(--border-strong);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.pp-mm button.up{background:var(--surface);border-color:var(--accent)}
.pp-mm button.ok{background:var(--accent);border-color:var(--accent-strong)}
.pp-toast{position:fixed;left:50%;bottom:6rem;transform:translateX(-50%);z-index:60;max-width:90vw;background:var(--ink);color:var(--canvas);padding:.6rem 1rem;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s;text-align:center}
.pp-toast.show{opacity:1}
.pp-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:color-mix(in srgb,var(--ink) 55%,transparent)}
.pp-modal>div{max-width:26rem;width:100%;max-height:90vh;overflow:auto}
@keyframes pp-bob{50%{transform:translateY(-.6rem)}}
@keyframes pp-sway{50%{transform:rotate(-4deg) translateY(.2rem)}}
@keyframes pp-hop{40%{transform:translateY(-2rem) scale(1.08)}}
@keyframes pp-float{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-4rem);opacity:0}}
html.reduced-motion .pp-pet,html.reduced-motion .pp-fx{animation:none}
@media (prefers-reduced-motion:reduce){.pp-pet,.pp-fx{animation:none}}