/* ══════════════════════════════════════════════════════════════════
   Petalcraft — Phase 1 MVP styles
   Cozy, warm palette. DOM grid + CSS-shape flowers (no art assets yet).
   ══════════════════════════════════════════════════════════════════ */

:root {
    --cream: #F7EFDD;
    --cream-warm: #FBEFDA;
    --cream-shade: #EFE4CB;
    --ink: #4A3F2E;
    --ink-soft: #6E5F45;
    --soil: #B6906A;
    --soil-dark: #8A6947;
    --grass: #A7C079;
    --grass-dark: #7A9557;
    --accent: #C7654E;   /* warm terracotta */
    --accent-soft: #E9A88F;
    --sky-day:  #DDE9E6;
    --sky-dusk: #E5C4A4;
    --sky-night: #8892A6;
    --water: #7EB0C4;

    /* Flower colors — the phenotype palette. Muted, storybook. */
    --f-white:  #F3EEE0;
    --f-yellow: #F1D65C;
    --f-red:    #C94E4E;
    --f-pink:   #E89AB2;
    --f-orange: #E9925A;
    --f-purple: #9B7BC0;
    --f-black:  #46424C;

    --radius: 14px;
    --tile-gap: 6px;
    --tap: 44px;    /* min touch target */

    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--cream);
    color: var(--ink);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    touch-action: manipulation;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Back-to-Madderverse ⌂ button — matches other games */
.madder-home {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--cream-warm);
    color: var(--ink);
    border-radius: 50%;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 2px 6px rgba(74, 63, 46, 0.15);
    border: 1px solid var(--cream-shade);
}

/* ─── App shell ─────────────────────────────────────────────────── */

.app {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 12px 12px;
    gap: 10px;
}

/* ─── Topbar ───────────────────────────────────────────────────── */

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 6px 8px 6px 52px;   /* leave room for the home ⌂ */
    min-height: var(--tap);
}

.topbar-title {
    font-family: "Fraunces", "Georgia", serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.5px;
    color: var(--ink);
    justify-self: start;
}

.topbar-clock {
    justify-self: center;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: "Fraunces", "Georgia", serif;
    color: var(--ink-soft);
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.clock-time {
    font-style: italic;
    opacity: 0.75;
}

.topbar-btn {
    justify-self: end;
    width: var(--tap);
    height: var(--tap);
    border-radius: 999px;
    border: 1px solid var(--cream-shade);
    background: var(--cream-warm);
    font-size: 20px;
    cursor: pointer;
}
.topbar-btn:active { transform: scale(0.96); }

/* ─── Garden grid ──────────────────────────────────────────────── */

.garden-wrap {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 10px 4px;
    background:
        radial-gradient(ellipse at center top, var(--cream-warm), var(--cream) 65%);
    border-radius: var(--radius);
    transition: background 800ms ease;
}

.garden-wrap.night {
    background:
        radial-gradient(ellipse at center top, #C2C3D4, #A9AABD 65%);
}
.garden-wrap.dusk {
    background:
        radial-gradient(ellipse at center top, #F0D4B4, #E3B896 65%);
}

.garden {
    display: grid;
    grid-template-columns: repeat(var(--gw, 6), 1fr);
    gap: var(--tile-gap);
    width: min(100%, 420px);
    aspect-ratio: var(--gw, 6) / var(--gh, 4);
    position: relative;
    z-index: 2;
}

.tile {
    aspect-ratio: 1 / 1;
    background: var(--soil);
    border-radius: 10px;
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
    transition: transform 120ms ease;
    touch-action: manipulation;
    user-select: none;
}
.tile:active { transform: scale(0.97); }
.tile.watered {
    background: linear-gradient(180deg, var(--soil-dark), var(--soil));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(126, 176, 196, 0.35);
}
.tile.plant-target {
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
}

/* Water droplet indicator — scales + fades with --wet as the day dries out */
.tile.watered::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background: var(--water);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg) scale(calc(0.5 + 0.5 * var(--wet, 1)));
    transform-origin: top right;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    opacity: calc(0.35 + 0.5 * var(--wet, 1));
    transition: opacity 600ms ease, transform 600ms ease;
}
/* Damp-soil sheen also eases off as the tile dries */
.tile.watered {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--soil-dark) calc(var(--wet, 1) * 100%), var(--soil)),
        var(--soil));
}

/* ─── Flower shapes (CSS-only, no images for MVP) ──────────────── */

.flower {
    width: 78%;
    height: 78%;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.flower[data-stage="0"] .fl-body {   /* seed */
    width: 22%;
    height: 22%;
    background: #6B4A2E;
    border-radius: 40% 60% 60% 40%;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}

.flower[data-stage="1"] .fl-body {   /* sprout */
    width: 12%;
    height: 60%;
    background: linear-gradient(180deg, var(--grass), var(--grass-dark));
    border-radius: 40% 40% 4px 4px;
    transform-origin: bottom center;
}
.flower[data-stage="1"] .fl-body::before {
    content: "";
    position: absolute;
    top: 12%;
    left: -80%;
    width: 60%;
    height: 30%;
    background: var(--grass);
    border-radius: 60% 10% 60% 10%;
    transform: rotate(-25deg);
}
.flower[data-stage="1"] .fl-body::after {
    content: "";
    position: absolute;
    top: 22%;
    right: -80%;
    width: 60%;
    height: 30%;
    background: var(--grass);
    border-radius: 10% 60% 10% 60%;
    transform: rotate(25deg);
}
.flower[data-stage="1"] .fl-body { position: relative; }

.flower[data-stage="2"] .fl-body {   /* bud */
    width: 40%;
    height: 60%;
    background: var(--fc, var(--f-red));
    border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
    position: relative;
}
.flower[data-stage="2"] .fl-body::after {
    content: "";
    position: absolute;
    bottom: -25%;
    left: 30%;
    width: 40%;
    height: 40%;
    background: var(--grass-dark);
    border-radius: 40% 40% 10% 10%;
}

.flower[data-stage="3"] .fl-body {   /* bloom — 5 petal SVG-ish flower */
    position: relative;
    width: 78%;
    height: 78%;
}
.flower[data-stage="3"] .petal {
    position: absolute;
    width: 45%;
    height: 45%;
    background: var(--fc, var(--f-red));
    border-radius: 60% 20% 60% 20%;
    top: 27.5%;
    left: 27.5%;
    transform-origin: 50% 100%;
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.08);
}
.flower[data-stage="3"] .petal:nth-child(1) { transform: rotate(0deg); }
.flower[data-stage="3"] .petal:nth-child(2) { transform: rotate(72deg); }
.flower[data-stage="3"] .petal:nth-child(3) { transform: rotate(144deg); }
.flower[data-stage="3"] .petal:nth-child(4) { transform: rotate(216deg); }
.flower[data-stage="3"] .petal:nth-child(5) { transform: rotate(288deg); }
.flower[data-stage="3"] .center {
    position: absolute;
    width: 26%;
    height: 26%;
    top: 37%;
    left: 37%;
    border-radius: 50%;
    background: #F5D97E;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
/* Tulip: single cup silhouette instead of 5-petal disc */
.flower[data-stage="3"][data-species="tulips"] .petal:nth-child(1),
.flower[data-stage="3"][data-species="tulips"] .petal:nth-child(2),
.flower[data-stage="3"][data-species="tulips"] .petal:nth-child(3),
.flower[data-stage="3"][data-species="tulips"] .petal:nth-child(4),
.flower[data-stage="3"][data-species="tulips"] .petal:nth-child(5) { display: none; }
.flower[data-stage="3"][data-species="tulips"] .center { display: none; }
.flower[data-stage="3"][data-species="tulips"] .fl-body::before {
    content: "";
    position: absolute;
    left: 30%;
    top: 8%;
    width: 40%;
    height: 55%;
    background: var(--fc, var(--f-red));
    border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
    box-shadow: inset -3px -3px 0 rgba(0,0,0,0.10);
}
.flower[data-stage="3"][data-species="tulips"] .fl-body::after {
    content: "";
    position: absolute;
    left: 46%;
    top: 55%;
    width: 8%;
    height: 40%;
    background: var(--grass-dark);
    border-radius: 4px;
}

/* Night: all flowers pull petals in (opacity dim). animation:none so the
   idle sway (which also animates transform) doesn't override the scale. */
.garden-wrap.night .flower[data-stage="3"] { opacity: 0.72; transform: scale(0.85); animation: none; transition: transform 400ms ease, opacity 400ms ease; }

/* Discovery sparkle (used on new-hybrid tile briefly) */
.tile.new-hybrid {
    animation: sparkle 1200ms ease-out;
}
@keyframes sparkle {
    0%   { box-shadow: 0 0 0 0 rgba(233, 168, 143, 0.9), inset 0 -2px 0 rgba(0,0,0,0.08); }
    60%  { box-shadow: 0 0 0 12px rgba(233, 168, 143, 0), inset 0 -2px 0 rgba(0,0,0,0.08); }
    100% { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); }
}

/* ─── Bottom tray ─────────────────────────────────────────────── */

.tray {
    background: var(--cream-warm);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--cream-shade);
}

.tray-actions {
    display: flex;
    gap: 8px;
}

.tray-btn {
    flex: 1;
    min-height: var(--tap);
    border-radius: 999px;
    background: var(--cream);
    border: 1px solid var(--cream-shade);
    color: var(--ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 0 12px;
}
.tray-btn:active { transform: scale(0.97); }
.tray-btn-primary {
    background: var(--water);
    color: white;
    border-color: transparent;
}
.tray-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.tray-seeds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 44px;
}

.seed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--cream);
    border: 1px solid var(--cream-shade);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    font-weight: 700;
    user-select: none;
    transition: transform 100ms ease;
}
.seed-chip:active { transform: scale(0.96); }
.seed-chip.armed {
    background: var(--accent);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(199, 101, 78, 0.35);
}
.seed-chip .swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sw, #ccc);
    border: 1px solid rgba(0,0,0,0.15);
}
.seed-chip .count {
    opacity: 0.7;
    font-weight: 500;
}

.tray-hint {
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
    font-style: italic;
    min-height: 16px;
}

/* ─── Modal (Bloombook) ────────────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(74, 63, 46, 0.35);
    display: grid;
    place-items: center;
    z-index: 200;
    padding: 16px;
    animation: fade-in 180ms ease;
}
.modal[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
    background: var(--cream);
    border-radius: var(--radius);
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cream-shade);
}
.modal-head h2 {
    margin: 0;
    font-family: "Fraunces", "Georgia", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
}
.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: var(--cream-warm);
    font-size: 16px;
    cursor: pointer;
}

.bloombook-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 6px;
    overflow-x: auto;
}
.bloombook-tab {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}
.bloombook-tab.active {
    background: var(--accent);
    color: white;
    border-color: transparent;
}

.bloombook-body {
    padding: 12px 16px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.dex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
}
.dex-slot {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    display: grid;
    place-items: center;
    position: relative;
    font-size: 11px;
    color: var(--ink-soft);
    padding: 4px;
    text-align: center;
}
.dex-slot.filled {
    background: var(--cream);
    border-color: var(--accent-soft);
}
.dex-slot .dex-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sw, #ccc);
    margin-bottom: 4px;
    border: 1px solid rgba(0,0,0,0.15);
}
.dex-slot.unfilled .dex-swatch {
    background: transparent;
    border: 2px dashed var(--cream-shade);
}
.dex-slot .dex-label {
    font-weight: 700;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.dex-slot.unfilled .dex-label { opacity: 0.5; }

.dex-note {
    color: var(--ink-soft);
    font-size: 12px;
    margin: 0 0 10px;
    font-style: italic;
}

/* ─── Toast ───────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--cream);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    z-index: 300;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: toast-in 240ms ease-out;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   Additions: settings, onboarding coach, weather, micro-goal, pansies
   ══════════════════════════════════════════════════════════════════ */

/* Topbar: settings + bloombook sit together on the right */
.topbar-actions {
    justify-self: end;
    display: flex;
    gap: 6px;
}
.topbar-actions .topbar-btn { justify-self: auto; }
#btn-settings { font-size: 18px; }

/* Colors added by pansies */
:root { --f-blue: #7C96CF; }

/* ─── Pansy bloom — a flat, rounded "face" with a dark center ─── */
.flower[data-stage="3"][data-species="pansies"] .petal {
    width: 52%;
    height: 52%;
    top: 24%;
    left: 24%;
    border-radius: 62% 62% 58% 58%;
}
.flower[data-stage="3"][data-species="pansies"] .center {
    width: 46%;
    height: 46%;
    top: 27%;
    left: 27%;
    background: radial-gradient(circle at 50% 45%, #F5D97E 20%, #7A5A2E 23%, #3E2A18 100%);
    box-shadow: none;
}

/* A gentle drop shadow + idle sway for blooms (motion-gated) */
.flower[data-stage="3"] .fl-body { filter: drop-shadow(0 2px 2px rgba(74,63,46,0.18)); }
.flower[data-stage="3"] { animation: sway 6s ease-in-out infinite; transform-origin: 50% 90%; }
.flower[data-stage="2"] { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

/* ─── Day / night / rain scene tint ───────────────────────────── */
.garden-wrap { position: relative; overflow: hidden; }
.garden-wrap.rainy {
    background: radial-gradient(ellipse at center top, #C9D4DA, #AEBDC6 70%);
}

/* Watering droplet — a quick splash ring on the tile */
.droplet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    border: 2px solid rgba(126, 176, 196, 0.9);
    pointer-events: none;
    animation: splash 620ms ease-out forwards;
}
@keyframes splash {
    0%   { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Rain — thin animated streaks over the garden */
.rain-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: repeating-linear-gradient(
        105deg,
        transparent 0 9px,
        rgba(160, 190, 210, 0.28) 9px 10px);
    background-size: 100% 24px;
    animation: rainfall 0.5s linear infinite;
    opacity: 0.7;
}
.rain-layer[hidden] { display: none; }
@keyframes rainfall {
    from { background-position: 0 0; }
    to   { background-position: 12px 24px; }
}

/* ─── Micro-goal line under the tray hint ─────────────────────── */
.tray-goal {
    text-align: center;
    font-size: 12px;
    color: var(--ink);
    font-weight: 700;
    background: var(--cream);
    border: 1px solid var(--cream-shade);
    border-radius: 999px;
    padding: 5px 12px;
    margin: 0 auto;
    max-width: 100%;
}
.tray-goal::before { content: "🎯 "; opacity: 0.7; }

/* ─── Bloombook flavor detail ──────────────────────────────────── */
.dex-detail {
    margin: 12px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    border-top: 1px solid var(--cream-shade);
    padding-top: 10px;
    min-height: 20px;
}
.dex-detail .dex-date { color: var(--ink-soft); font-style: italic; }
.dex-slot.filled { cursor: pointer; }

/* ─── Settings panel ──────────────────────────────────────────── */
.settings-body { padding: 8px 18px 20px; }
.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--cream-shade);
}
.set-row:last-child { border-bottom: none; }
.set-label {
    font-weight: 700;
    color: var(--ink);
    display: flex;
    flex-direction: column;
}
.set-sub {
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
    font-style: italic;
}

/* Toggle switch */
.set-toggle {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: var(--cream-shade);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 160ms ease;
}
.set-toggle .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 160ms ease;
}
.set-toggle.on { background: var(--grass-dark); }
.set-toggle.on .knob { transform: translateX(20px); }

/* Segmented control (garden pace) */
.set-seg {
    display: flex;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex: 0 0 auto;
}
.set-seg-btn {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 6px 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-soft);
    cursor: pointer;
}
.set-seg-btn.active {
    background: var(--accent);
    color: white;
}
.set-text-btn {
    border: 1px solid var(--cream-shade);
    background: var(--cream-warm);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    width: 100%;
}

/* ─── Onboarding coach overlay ─────────────────────────────────── */
.coach {
    position: fixed;
    inset: 0;
    background: rgba(74, 63, 46, 0.45);
    display: grid;
    place-items: center;
    z-index: 400;
    padding: 24px;
    animation: fade-in 200ms ease;
}
.coach[hidden] { display: none; }
.coach-card {
    background: var(--cream);
    border-radius: var(--radius);
    max-width: 340px;
    width: 100%;
    padding: 24px 22px 18px;
    text-align: center;
    box-shadow: 0 12px 34px rgba(0,0,0,0.3);
}
.coach-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.coach-text {
    font-family: "Fraunces", "Georgia", serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 18px;
}
.coach-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.coach-skip {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
}
.coach-next {
    flex: 1;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 999px;
    min-height: var(--tap);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.coach-next:active { transform: scale(0.97); }

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .flower[data-stage="3"], .flower[data-stage="2"] { animation: none; transform: none; }
}
/* App-level reduced-motion (Settings toggle) mirrors the media query */
body.reduce-motion .flower[data-stage="3"],
body.reduce-motion .flower[data-stage="2"] { animation: none; transform: none; }
body.reduce-motion .rain-layer { animation: none; }
body.reduce-motion .cloud,
body.reduce-motion .firefly,
body.reduce-motion .flyer,
body.reduce-motion .stars { animation: none !important; }

/* ══════════════════════════════════════════════════════════════════
   PHASE 2 — living sky, ambient life, breeding hints, cozy motion
   ══════════════════════════════════════════════════════════════════ */

/* ─── Living sky ───────────────────────────────────────────────── */
.sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sky-top, #bfe0e6) 0%, var(--sky-bot, #eaf3e0) 100%);
    transition: background 500ms linear;
    border-radius: var(--radius);
}

/* Soft ground band the plot sits on, so it reads as garden-on-earth */
.ground {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(180deg,
        rgba(167, 192, 121, 0) 0%,
        color-mix(in srgb, var(--grass) 55%, transparent) 26%,
        color-mix(in srgb, var(--grass-dark) 78%, var(--soil-dark)) 100%);
    filter: saturate(0.9);
}
/* Horizon glow line */
.ground::before {
    content: "";
    position: absolute;
    left: -5%; right: -5%; top: 0;
    height: 2px;
    background: rgba(255, 244, 214, 0.5);
    filter: blur(1px);
}

/* Sun + moon share the .celestial arc; JS sets --cx/--cy (0..1) + opacity */
.celestial {
    position: absolute;
    left: calc(var(--cx, 0.5) * 100%);
    top: calc(var(--cy, 0.3) * 100%);
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    opacity: var(--vis, 0);
    transition: opacity 700ms linear;
    pointer-events: none;
    will-change: left, top;
}
.sun {
    background: radial-gradient(circle at 50% 45%, #FFF4CE 0%, #FCE07A 55%, #F6C85A 100%);
    box-shadow: 0 0 22px 8px rgba(252, 224, 122, 0.55);
}
.moon {
    background: radial-gradient(circle at 38% 38%, #FCFBF3 0%, #E7E3D0 70%, #CFC9B4 100%);
    box-shadow: 0 0 16px 4px rgba(233, 233, 214, 0.4);
}
.moon::after {   /* a couple of soft craters */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 40%, rgba(180,176,158,0.5) 0 3px, transparent 4px),
        radial-gradient(circle at 42% 62%, rgba(180,176,158,0.45) 0 4px, transparent 5px);
}

/* Stars — JS drives the whole layer's opacity by time of day */
.stars {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 900ms linear;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent),
        radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent),
        radial-gradient(1.2px 1.2px at 45% 30%, #fff 50%, transparent),
        radial-gradient(1px 1px at 63% 16%, #fff 50%, transparent),
        radial-gradient(1.5px 1.5px at 78% 26%, #fff 50%, transparent),
        radial-gradient(1px 1px at 88% 12%, #fff 50%, transparent),
        radial-gradient(1.1px 1.1px at 34% 44%, #fff 50%, transparent),
        radial-gradient(1px 1px at 55% 40%, #fff 50%, transparent);
    animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(0.6); }
}

/* Drifting clouds (JS injects .cloud children) */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
    position: absolute;
    width: var(--cw, 90px);
    height: calc(var(--cw, 90px) * 0.42);
    background:
        radial-gradient(circle at 30% 60%, #fff 0 40%, transparent 42%),
        radial-gradient(circle at 55% 45%, #fff 0 46%, transparent 48%),
        radial-gradient(circle at 75% 62%, #fff 0 38%, transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
    background-repeat: no-repeat;
    border-radius: 40px;
    opacity: 0.7;
    filter: blur(0.4px);
    top: var(--cy, 20%);
    left: -30%;
    animation: drift var(--cdur, 60s) linear infinite;
    animation-delay: var(--cdelay, 0s);
}
@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 60%)); }
}

/* Night veil dims the whole plot after dark; JS sets its opacity */
.scene-veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 120%, rgba(44,48,80,0.15), rgba(30,32,58,0.5));
    opacity: 0;
    transition: opacity 700ms linear;
    border-radius: var(--radius);
    mix-blend-mode: multiply;
}

/* Morning dew — a faint cool sheen on soil that isn't watered yet */
.garden-wrap.morning .tile:not(.watered)::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: rgba(190, 220, 230, 0.55);
    box-shadow: 0 0 3px rgba(190, 220, 230, 0.5);
    pointer-events: none;
}

/* ─── Ambient particle layer (dew, fireflies, flyers) ─────────── */
.ambient-fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--radius);
}
.firefly {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F6EF9B;
    box-shadow: 0 0 8px 3px rgba(246, 239, 155, 0.7);
    opacity: 0;
    animation: firefly-float var(--fdur, 7s) ease-in-out infinite;
    animation-delay: var(--fdelay, 0s);
}
@keyframes firefly-float {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
    25%  { opacity: 0.9; }
    50%  { opacity: 0.5; transform: translate(var(--fdx, 14px), var(--fdy, -12px)) scale(1); }
    75%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(calc(var(--fdx, 14px) * -0.5), calc(var(--fdy, -12px) * 1.4)) scale(0.7); }
}
/* A little bird / butterfly drifting across, occasionally */
.flyer {
    position: absolute;
    font-size: 16px;
    line-height: 1;
    opacity: 0.85;
    will-change: transform;
    animation: fly-across var(--flydur, 9s) ease-in-out forwards;
}
@keyframes fly-across {
    0%   { transform: translate(-12%, 0) scaleX(1); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { transform: translate(50vw, -14px) scaleX(1); }
    88%  { opacity: 0.9; }
    100% { transform: translate(112vw, 6px) scaleX(1); opacity: 0; }
}

/* ─── "Will breed tonight" connectors ─────────────────────────── */
.connectors {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
.connectors .link {
    stroke: rgba(233, 168, 143, 0.85);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
    filter: drop-shadow(0 0 3px rgba(233, 168, 143, 0.6));
    animation: link-flow 1.4s linear infinite;
}
.connectors .link-heart {
    fill: rgba(233, 168, 143, 0.9);
    transform-box: fill-box;
    transform-origin: center;
    animation: heart-pulse 2.2s ease-in-out infinite;
}
@keyframes link-flow {
    to { stroke-dashoffset: -20; }
}
@keyframes heart-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 1; }
}
body.reduce-motion .connectors .link { animation: none; stroke-dasharray: 3 7; }
body.reduce-motion .connectors .link-heart { animation: none; }

/* ─── Cozy growth + breeding motion beats ─────────────────────── */
/* A flower easing up into its next stage */
.flower.grow-in { animation: grow-in 620ms cubic-bezier(0.34, 1.36, 0.64, 1) both; }
@keyframes grow-in {
    0%   { transform: scale(0.55) translateY(6%); opacity: 0.2; }
    60%  { transform: scale(1.08) translateY(0); opacity: 1; }
    100% { transform: scale(1); }
}
/* A brand-new seed dropping into fresh soil after a cross */
.flower.sprout-in { animation: sprout-in 720ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
@keyframes sprout-in {
    0%   { transform: translateY(-38%) scale(0.4); opacity: 0; }
    55%  { transform: translateY(4%) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}
body.reduce-motion .flower.grow-in,
body.reduce-motion .flower.sprout-in { animation: none; }

/* Softer sparkle for a plain new sprout (vs. the discovery sparkle) */
.tile.new-sprout { animation: sprout-glow 1100ms ease-out; }
@keyframes sprout-glow {
    0%   { box-shadow: 0 0 0 0 rgba(167, 192, 121, 0.85), inset 0 -2px 0 rgba(0,0,0,0.08); }
    60%  { box-shadow: 0 0 0 10px rgba(167, 192, 121, 0), inset 0 -2px 0 rgba(0,0,0,0.08); }
    100% { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); }
}

/* ─── Toast: graceful fade instead of instant hide ────────────── */
.toast {
    opacity: 1;
    transition: opacity 320ms ease, transform 320ms ease;
}
.toast.leaving { opacity: 0; transform: translate(-50%, 10px); }

/* ─── Flower polish: gentle gradient + highlight on blooms ────── */
.flower[data-stage="3"] .petal {
    background:
        radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 55%),
        var(--fc, var(--f-red));
}
.flower[data-stage="2"] .fl-body {
    background:
        radial-gradient(circle at 38% 28%, rgba(255,255,255,0.4), transparent 60%),
        var(--fc, var(--f-red));
}

/* ─── Settings: save backup/restore rows ──────────────────────── */
.set-data-row { display: flex; gap: 8px; }
.set-data-row .set-text-btn { width: auto; flex: 1; }
.set-note {
    font-size: 11px;
    color: var(--ink-soft);
    font-style: italic;
    margin: 6px 2px 0;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 3 — hyacinths, ornaments, rare finds, richer Bloombook
   ══════════════════════════════════════════════════════════════════ */

/* ─── Hyacinth bloom — a stacked "spike" of florets ────────────── */
.flower[data-species="hyacinths"][data-stage="3"] .fl-body {
    position: relative;
    width: 62%;
    height: 86%;
}
.flower[data-species="hyacinths"][data-stage="3"] .floret {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* widest at the base (i=5), tapering toward the tip (i=0) */
    width: calc(38% + var(--i) * 4%);
    height: 26%;
    top: calc(var(--i) * 13.5%);
    background:
        radial-gradient(circle at 40% 32%, rgba(255,255,255,0.55), transparent 55%),
        var(--fc, var(--f-purple));
    border-radius: 50% 50% 50% 50% / 62% 62% 44% 44%;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.10);
}
.flower[data-species="hyacinths"][data-stage="3"] .fl-body::after {
    content: "";
    position: absolute;
    left: 47%;
    bottom: -14%;
    width: 6%;
    height: 22%;
    background: var(--grass-dark);
    border-radius: 3px;
}

/* ─── Garden ornaments (earned keepsakes on the ground band) ───── */
.ornaments {
    position: absolute;
    inset: 0;
    z-index: 1;               /* behind the plot (z-index 2), above the sky */
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--radius);
}
.ornament {
    position: absolute;
    width: var(--ow, 34px);
    line-height: 0;
    opacity: 0;
    animation: ornament-in 900ms ease forwards;
    filter: drop-shadow(0 2px 2px rgba(74,63,46,0.20));
}
.ornament svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes ornament-in {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to   { opacity: 0.96; transform: none; }
}
body.reduce-motion .ornament { animation: none; opacity: 0.96; }

/* ─── Rare-find tile sparkle (bigger + gold vs. a common discovery) ─ */
.tile.new-rare { animation: rare-sparkle 2000ms ease-out; z-index: 5; }
@keyframes rare-sparkle {
    0%   { box-shadow: 0 0 0 0 rgba(247,214,92,0.95), 0 0 0 0 rgba(233,168,143,0.7), inset 0 -2px 0 rgba(0,0,0,0.08); }
    45%  { box-shadow: 0 0 16px 9px rgba(247,214,92,0.55), 0 0 0 18px rgba(233,168,143,0), inset 0 -2px 0 rgba(0,0,0,0.08); }
    100% { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); }
}
body.reduce-motion .tile.new-rare { animation: none; }

/* ─── Rare-find celebration card ───────────────────────────────── */
.celebrate {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(74, 63, 46, 0.5);
    animation: fade-in 220ms ease;
}
.celebrate[hidden] { display: none; }
.celebrate-card {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    border-radius: var(--radius);
    max-width: 340px;
    width: 100%;
    padding: 26px 22px 20px;
    text-align: center;
    box-shadow: 0 16px 44px rgba(0,0,0,0.38);
}
.celebrate.burst .celebrate-card {
    animation: card-pop 520ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes card-pop {
    0%   { transform: scale(0.82); opacity: 0.4; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}
/* Slow golden rays behind the card content */
.celebrate-rays {
    position: absolute;
    left: 50%; top: 34%;
    width: 460px; height: 460px;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg,
        rgba(247,214,92,0.22) 0 8deg, transparent 8deg 30deg,
        rgba(247,214,92,0.22) 30deg 38deg, transparent 38deg 60deg,
        rgba(247,214,92,0.22) 60deg 68deg, transparent 68deg 90deg,
        rgba(247,214,92,0.22) 90deg 98deg, transparent 98deg 120deg,
        rgba(247,214,92,0.22) 120deg 128deg, transparent 128deg 150deg,
        rgba(247,214,92,0.22) 150deg 158deg, transparent 158deg 180deg,
        rgba(247,214,92,0.22) 180deg 188deg, transparent 188deg 210deg,
        rgba(247,214,92,0.22) 210deg 218deg, transparent 218deg 240deg,
        rgba(247,214,92,0.22) 240deg 248deg, transparent 248deg 270deg,
        rgba(247,214,92,0.22) 270deg 278deg, transparent 278deg 300deg,
        rgba(247,214,92,0.22) 300deg 308deg, transparent 308deg 330deg,
        rgba(247,214,92,0.22) 330deg 338deg, transparent 338deg 360deg);
    pointer-events: none;
    animation: rays-spin 18s linear infinite;
}
@keyframes rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.celebrate-card > *:not(.celebrate-rays) { position: relative; z-index: 1; }
body.reduce-motion .celebrate-rays { animation: none; }
body.reduce-motion .celebrate.burst .celebrate-card { animation: none; }

.celebrate-badge {
    display: inline-block;
    background: linear-gradient(180deg, #F7DE7E, #E7B94A);
    color: #6b4a12;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 4px 13px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(227,184,78,0.4);
}
.celebrate-thumb {
    width: 104px;
    height: 104px;
    margin: 14px auto 4px;
    display: grid;
    place-items: center;
}
.celebrate-thumb .flower { width: 90%; height: 90%; animation: none; transform: none; }
.celebrate-name {
    font-family: "Fraunces", "Georgia", serif;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 23px;
    margin: 4px 0 8px;
    color: var(--ink);
}
.celebrate-flavor {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 10px;
}
.celebrate-sub {
    font-size: 12px;
    font-style: italic;
    color: var(--ink-soft);
    margin: 0 0 18px;
}
.celebrate-close {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    min-height: var(--tap);
    width: 100%;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}
.celebrate-close:active { transform: scale(0.97); }

/* ─── Bloombook: locked species tab + filter chips ────────────── */
.bloombook-tab.locked {
    opacity: 0.6;
    background: var(--cream);
    color: var(--ink-soft);
    border-style: dashed;
    cursor: help;
}
.dex-filters { display: flex; gap: 6px; margin: 0 0 12px; }
.dex-filter {
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-soft);
    cursor: pointer;
}
.dex-filter.active { background: var(--accent); color: #fff; border-color: transparent; }
.dex-empty {
    color: var(--ink-soft);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    padding: 16px 8px;
}

/* ─── Bloombook: discovered/undiscovered flavor cards ─────────── */
.dex-list { display: flex; flex-direction: column; gap: 10px; }
.dex-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
    border-radius: 12px;
    padding: 10px 12px;
}
.dex-card.filled { background: var(--cream); border-color: var(--accent-soft); }
.dex-card.unfilled { opacity: 0.9; }
.dex-card.rare.filled {
    border-color: #E3B84E;
    background: linear-gradient(180deg, #FFFBF0, var(--cream));
    box-shadow: 0 0 0 1px rgba(227,184,78,0.35), 0 2px 8px rgba(227,184,78,0.18);
}
.dex-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--cream-warm);
    border-radius: 10px;
}
.dex-card.filled .dex-thumb {
    background: radial-gradient(circle at 50% 42%, #fff, var(--cream-warm));
}
.dex-thumb .flower { width: 88%; height: 88%; animation: none; transform: none; }
.dex-thumb-q {
    font-family: "Fraunces", "Georgia", serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--cream-shade);
}
.dex-card-text { flex: 1 1 auto; min-width: 0; }
.dex-card-name {
    font-weight: 800;
    text-transform: capitalize;
    color: var(--ink);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dex-card-name.muted { color: var(--ink-soft); font-weight: 700; font-size: 14px; text-transform: none; }
.dex-ribbon {
    background: linear-gradient(180deg, #F7DE7E, #E7B94A);
    color: #6b4a12;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.dex-card-flavor { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.dex-card-flavor.muted { color: var(--ink-soft); font-style: italic; }
.dex-card-date { margin-top: 5px; font-size: 11px; color: var(--ink-soft); font-style: italic; }

/* ─── Bloombook: rares trophy shelf ────────────────────────────── */
.dex-shelf-intro { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 0 12px; }
.dex-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 12px;
}
.trophy { text-align: center; }
.trophy-plinth {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--cream-warm);
    border: 1px solid var(--cream-shade);
}
.trophy.won .trophy-plinth {
    background: linear-gradient(180deg, #FFFBF0, var(--cream));
    border-color: #E3B84E;
    box-shadow: 0 0 0 1px rgba(227,184,78,0.35), 0 3px 10px rgba(227,184,78,0.2);
}
.trophy-plinth .flower { width: 76%; height: 76%; animation: none; transform: none; }
.trophy.empty .dex-thumb-q { font-size: 26px; }
.trophy-cap { margin-top: 6px; font-size: 11px; font-weight: 700; text-transform: capitalize; color: var(--ink); }
.trophy.empty .trophy-cap { color: var(--ink-soft); font-style: italic; text-transform: none; }

/* ══════════════════════════════════════════════════════════════════
   PHASE 5 — new species bloom shapes (lilies, mums, windflowers, roses)
   All four route through the shared 5-petal + center primitives
   (makeFlowerEl) and are differentiated entirely here in CSS.
   ══════════════════════════════════════════════════════════════════ */

:root { --f-green: #9FB86A; }

/* ── Windflowers (anemone): rounded petals, deep dark eye ── */
.flower[data-stage="3"][data-species="windflowers"] .petal {
    width: 47%; height: 47%; top: 26.5%; left: 26.5%;
    border-radius: 60% 60% 54% 54%;
}
.flower[data-stage="3"][data-species="windflowers"] .center {
    width: 36%; height: 36%; top: 32%; left: 32%;
    background: radial-gradient(circle at 50% 42%, #3c3652 32%, #211e36 100%);
    box-shadow: none;
}

/* ── Lilies (star/trumpet): long pointed petals, small warm throat ── */
.flower[data-stage="3"][data-species="lilies"] .petal {
    width: 30%; height: 58%; top: 20%; left: 35%;
    border-radius: 50% 50% 44% 44% / 74% 74% 26% 26%;
    box-shadow: inset -2px -3px 0 rgba(0,0,0,0.10);
}
.flower[data-stage="3"][data-species="lilies"] .center {
    width: 20%; height: 20%; top: 40%; left: 40%;
    background: radial-gradient(circle at 50% 45%, #EBA55C 38%, #B56A2C 100%);
    box-shadow: none;
}

/* ── Mums (pompom): tight concentric petals packed into a dense head ── */
.flower[data-stage="3"][data-species="mums"] .petal {
    width: 42%; height: 42%; top: 29%; left: 29%;
    border-radius: 50%;
    opacity: 0.9;
}
.flower[data-stage="3"][data-species="mums"] .center {
    width: 66%; height: 66%; top: 17%; left: 17%;
    background:
        repeating-radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--fc, var(--f-red)) 82%, #402d1a 18%) 0 2.5px,
            var(--fc, var(--f-red)) 2.5px 5.5px);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.22);
}

/* ── Roses (layered spiral): overlapping outer petals + a swirled bud ── */
.flower[data-stage="3"][data-species="roses"] .petal {
    width: 50%; height: 50%; top: 25%; left: 25%;
    border-radius: 46% 54% 48% 52%;
}
.flower[data-stage="3"][data-species="roses"] .center {
    width: 56%; height: 56%; top: 22%; left: 22%;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fc, var(--f-red)) 62%, #000 16%) 0 12%, transparent 13%),
        conic-gradient(from 20deg,
            var(--fc, var(--f-red)),
            color-mix(in srgb, var(--fc, var(--f-red)) 74%, #000 16%) 40%,
            var(--fc, var(--f-red)) 72%,
            color-mix(in srgb, var(--fc, var(--f-red)) 80%, #fff 14%));
    box-shadow: inset 0 0 6px rgba(0,0,0,0.28);
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 6 (scaffolding) — sprite-sheet flowers + photo backdrops
   All progressive: the game looks identical until real art is added.
   ══════════════════════════════════════════════════════════════════ */

/* ── Sprite-backed flower: the .fl-body becomes a single sheet frame.
   Neutralizes the CSS-shape styling; inline bg (image/size/position) is set
   by applySprite(). !important beats the [data-stage][data-species] rules. ── */
.flower.sprited .fl-body {
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: drop-shadow(0 2px 2px rgba(74, 63, 46, 0.18));
    /* image-rendering: pixelated;  ← uncomment if the flower art is pixel art */
}
.flower.sprited .fl-body::before,
.flower.sprited .fl-body::after { content: none !important; display: none !important; }

/* ── Photo backdrop: two cross-fading image layers behind the living sky ── */
.scene-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.scene-photo[hidden] { display: none; }
.scene-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.scene-night {                 /* JS sets opacity 0 (day) … 1 (night) */
    opacity: 0;
    transition: opacity 900ms linear;
}
body.reduce-motion .scene-night { transition: none; }

/* When a photo is active, the gradient sky steps aside; sun/moon/stars stay as
   overlays unless the scene opts out (photo-keeps-sky toggled by JS). */
.garden-wrap.has-photo .sky { background: transparent; }
.garden-wrap.has-photo .ground { display: none; }
.garden-wrap.has-photo:not(.photo-keeps-sky) .celestial,
.garden-wrap.has-photo:not(.photo-keeps-sky) .stars,
.garden-wrap.has-photo:not(.photo-keeps-sky) .clouds { display: none; }

/* ── Seasonal hooks (opt-in). garden-wrap carries data-season = spring |
   summer | autumn | winter (real-world). These are deliberately no-ops by
   default — tune a gentle wash here once you've seen it against real art. ── */
/* .garden-wrap[data-season="autumn"] .sky  { filter: saturate(1.05) hue-rotate(-6deg); } */
/* .garden-wrap[data-season="winter"] .sky  { filter: saturate(0.9) brightness(1.02); } */

/* ── Settings <select> (Scene picker) — matches the cozy control styling ── */
.set-select {
    border: 1px solid var(--cream-shade);
    background: var(--cream-warm);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
}