/* Values and geometry from the minigame handoff; shared site chrome stays intact. */
body[data-page="garden"] { --garden-pad:48px; }
body[data-page="garden"] .site-header { padding:14px var(--garden-pad) 6px; gap:12px; }
body[data-page="garden"] .site-header .brand { margin-right:auto; }
body[data-page="garden"] .site-header .brand img { width:34px; height:34px; }
body[data-page="garden"] .site-header .variety { display:none; }
body[data-page="garden"] .site-header .wordmark { font-size:23px; }
#garden-main { flex:1; min-width:0; }
#garden-play { min-height:calc(100svh - 150px); display:flex; flex-direction:column; }
.garden-main { display:flex; flex-direction:column; gap:14px; padding:6px var(--garden-pad) 16px; }
.garden-intro { display:flex; flex-wrap:wrap; gap:14px 40px; align-items:flex-end; }
.garden-heading,.garden-notices { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:9px; }
.garden-notices { gap:8px; }
.garden-eyebrow { display:flex; align-items:center; gap:9px; font:500 11px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#6B5A63; }
.garden-eyebrow>span { width:8px; height:8px; border-radius:50%; background:#93A867; flex-shrink:0; }
#garden-main h1 { margin:0; font:400 64px/.95 'Instrument Serif',serif; letter-spacing:-.02em; text-wrap:balance; }
#garden-main h1 em { color:#B85C79; }
.garden-confirm,.garden-blocked { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid #EBD7E5; border-radius:18px; padding:10px 8px 10px 12px; font-size:13px; line-height:1.4; color:#4A3B43; }
.garden-confirm>span:nth-child(2),.garden-blocked>span:nth-child(2) { flex:1; min-width:0; }
.notice-icon { width:34px; height:34px; flex:0 0 34px; border-radius:999px; background:#F3DCE6; display:flex; align-items:center; justify-content:center; }
.notice-icon svg { width:18px; height:18px; }
.garden-confirm button { min-height:44px; padding:0 12px; border:0; background:none; font:600 13px Figtree,sans-serif; color:#8E3F5A; cursor:pointer; flex-shrink:0; }
.garden-blocked { align-items:flex-start; background:#FBF1E8; border-color:#EFD6C2; padding:12px 14px; line-height:1.45; color:#6A4526; }
.garden-blocked .notice-icon { background:#F4E3C8; }
.garden-calendar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.day-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 8px; border-radius:999px; font:600 12px Figtree,sans-serif; background:var(--day-bg); color:var(--day-fg); }
.day-badge svg { width:18px; height:18px; }
#calendar-tip { font-size:12px; color:#6B5A63; line-height:1.4; }
.garden-hint { display:flex; align-items:center; gap:10px; min-height:44px; flex-wrap:wrap; }
#garden-live { font-size:14px; line-height:1.4; color:#4A3B43; flex:1 1 200px; }
.garden-secondary,.garden-danger,.name-save { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid #EBD7E5; background:#fff; font:600 13px Figtree,sans-serif; color:#4A3B43; cursor:pointer; }
.garden-beds { display:flex; flex-wrap:wrap; gap:22px 32px; padding-bottom:12px; }
.garden-bed-wrap { flex:1 1 470px; min-width:0; }
.bed-label { margin:0 4px 2px; font:500 11px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:#6B5A63; }
.garden-bed { position:relative; isolation:isolate; display:flex; padding:0 12px; }
.bed-soil { position:absolute; left:0; right:0; top:62.5%; bottom:-12px; border-radius:3px 3px 16px 16px; background:linear-gradient(180deg,#9D7B69 0%,#8E6A5A 45%,#775748 100%); box-shadow:inset 0 3px 0 #6E5044; }
.bed-left,.bed-right { position:absolute; top:calc(62.5% - 7px); bottom:-12px; width:12px; background:#BE9571; }
.bed-left { left:0; border-radius:6px 0 0 14px; box-shadow:inset -2px 0 0 #A57C5B; }
.bed-right { right:0; border-radius:0 6px 14px 0; box-shadow:inset 2px 0 0 #A57C5B; }
.bed-bottom { position:absolute; left:0; right:0; bottom:-12px; height:9px; border-radius:0 0 16px 16px; background:#A57C5B; }
.garden-plot { position:relative; flex:1 1 0; min-width:0; aspect-ratio:160/240; padding:0; border:0; background:transparent; cursor:pointer; border-radius:14px; outline-offset:-3px; z-index:auto; }
.garden-plot:focus-visible { outline:3px solid #B85C79; }
/* Keep artwork, seasonal decorations and plot labels in separate bed layers.
   Plot buttons must not trap their labels in a lower stacking context. */
.garden-plot[data-pid="pumpkin"] .plot-art { z-index:1; }
.plot-art { position:absolute; z-index:0; inset:0; display:block; pointer-events:none; }
.plot-invite { position:absolute; z-index:3; left:9%; right:9%; top:24%; bottom:41%; border:2px dashed #B85C79; border-radius:14px; background:rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; font:400 28px/1 'Instrument Serif',serif; color:#B85C79; }
.plot-name { position:absolute; left:2px; top:40%; display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:3; }
.plot-name>span { padding:2px 5px; border-radius:4px; background:#EFDCC2; border:1px solid #B98F6C; font:600 10px/1.2 Figtree,sans-serif; color:#4A3524; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plot-name::after { content:''; width:3px; height:16px; background:#B98F6C; border-radius:0 0 2px 2px; }
.plot-mark { position:absolute; top:3%; right:3%; width:22px; height:22px; display:block; z-index:3; }
.plot-ripe { position:absolute; left:50%; transform:translateX(-50%); top:65%; padding:1px 6px; border-radius:999px; background:#F4F7EC; border:1px solid #D2E0B8; font:600 9px/1.4 Figtree,sans-serif; color:#4F6330; white-space:nowrap; z-index:3; }
.plot-number { position:absolute; z-index:3; left:0; right:0; bottom:2%; text-align:center; font:500 10px 'DM Mono',monospace; color:rgba(255,255,255,.8); }
.garden-full { display:flex; align-items:center; gap:14px; margin-top:10px; padding:14px 16px; border-radius:22px; background:rgba(235,215,229,.5); font:400 20px/1.2 'Instrument Serif',serif; }
.garden-full img { border-radius:10px; }.garden-full em { color:#8E3F5A; }
.seed-tray { position:sticky; bottom:0; z-index:20; margin-top:auto; padding:10px var(--garden-pad) 12px; background:rgba(247,241,238,.94); backdrop-filter:blur(8px); border-top:1px solid #EBD7E5; }
/* Consent wins every stacking contest; reserve the lifted tray's measured height. */
.consent-open .seed-tray { position:fixed; left:0; right:0; bottom:var(--consent-space,260px); }
.consent-open #garden-play { padding-bottom:var(--tray-space,200px); }
/* Two side-by-side beds need a section gap, not a viewport-filling flex spacer.
   Narrower layouts keep the sticky tray and its measured lift above consent. */
@media(min-width:1100px) {
 #garden-play { min-height:0; }
 .seed-tray,.consent-open .seed-tray { position:static; margin-top:12px; }
 .consent-open #garden-play { padding-bottom:0; }
}
.tray-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.tray-heading h2 { margin:0; font:500 11px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#6B5A63; }
.tray-heading>span { font:500 10px 'DM Mono',monospace; color:#6B5A63; }
.tray-mobile { display:none; }
.seed-packets { display:flex; align-items:flex-start; gap:10px; overflow-x:auto; padding:8px 2px 6px; }
.seed-packet { display:block; flex:0 0 96px; width:96px; min-width:0; padding:0; border:0; background:none; cursor:pointer; text-align:left; transition:transform .2s ease; border-radius:12px; }
.seed-packet[aria-pressed="true"] { transform:translateY(-7px); }
/* Fixed flap, art and copy rows: every count gets its own line above the day chip.
   Explicit border-box also keeps the standalone art sheet identical to the tray. */
.packet-body { --packet-art-height:62px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:9px calc(var(--packet-art-height) + 5px) 68px; box-sizing:border-box; width:100%; position:relative; border-radius:6px 6px 12px 12px; background:#FBF5EC; border:2px solid #EADFD3; box-shadow:0 2px 0 rgba(42,30,36,.05); overflow:hidden; }
.seed-packet[aria-pressed="true"] .packet-body { border-color:#B85C79; box-shadow:0 10px 22px rgba(184,92,121,.28); }
.packet-flap { display:block; height:9px; background:var(--plant-color); clip-path:polygon(0 0,100% 0,100% 30%,93.75% 100%,87.5% 30%,81.25% 100%,75% 30%,68.75% 100%,62.5% 30%,56.25% 100%,50% 30%,43.75% 100%,37.5% 30%,31.25% 100%,25% 30%,18.75% 100%,12.5% 30%,6.25% 100%,0 30%); }
.packet-art { display:block; margin:5px 6px 0; height:var(--packet-art-height,62px); border-radius:6px; background:var(--plant-tint); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(42,30,36,.06); }
.packet-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:20px 32px; gap:4px; padding:5px 7px 7px; }
.packet-name { display:block; font:400 16px/20px 'Instrument Serif',serif; color:#2A1E24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.packet-meta { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:12px 16px; gap:4px; justify-items:start; font:500 10px/12px 'DM Mono',monospace; color:#4A3B43; }
.packet-meta>span:first-child { white-space:nowrap; }
.packet-day { box-sizing:border-box; height:16px; max-width:100%; padding:1px 6px; white-space:nowrap; border-radius:999px; font:500 9px/1.5 'DM Mono',monospace; background:var(--day-bg); color:var(--day-fg); }
.garden-foot { display:flex; flex-direction:column; gap:12px; padding:18px var(--garden-pad) 30px; border-top:1px solid rgba(184,92,121,.14); font-size:13px; line-height:1.45; color:#6B5A63; }
.garden-device { display:flex; align-items:center; gap:9px; }.garden-device>span:first-child { width:16px; height:16px; flex-shrink:0; }
.garden-link { align-self:flex-start; min-height:44px; padding:0; border:0; background:none; font:600 13px Figtree,sans-serif; color:#8E3F5A; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
#reset-confirm { display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:#fff; border:1.5px solid #E7B9C8; }
#reset-question { color:#2A1E24; font-size:14px; }.garden-danger { background:#A13F5E; color:#fff; border:0; font-size:14px; padding:0 18px; }
.garden-row { display:flex; align-items:center; gap:8px; }.garden-row h2 { flex:1; }
.garden-close { width:44px; height:44px; flex:0 0 44px; border-radius:999px; border:0; background:#F7F1EE; font-size:20px; line-height:1; color:#4A3B43; cursor:pointer; }
.garden-away { background:#fff; border:1.5px solid #D2E0B8; border-radius:22px; padding:14px 16px 16px; box-shadow:0 10px 30px rgba(184,92,121,.10); }
.garden-away h2 { font:400 24px/1.1 'Instrument Serif',serif; margin:0; }
.garden-away ul { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.garden-away li { display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.4; color:#4A3B43; }.garden-away li::before { content:''; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--plant-color); }
.basket-toggle { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid #EBD7E5; background:rgba(255,255,255,.85); font:600 13px Figtree,sans-serif; color:#2A1E24; cursor:pointer; }
.basket-toggle>span:first-child { width:20px; height:20px; }#basket-count { min-width:20px; padding:1px 6px; border-radius:999px; background:#F3DCE6; font:500 12px 'DM Mono',monospace; color:#8E3F5A; }
.garden-panel,.garden-basket { color:#2A1E24; border:0; background:#FFFDFB; }
.garden-panel { position:fixed; inset:0 0 0 auto; margin:0; width:420px; max-width:100%; height:100%; max-height:100%; border-radius:26px 0 0 26px; box-shadow:0 -10px 40px rgba(42,30,36,.18); overflow:auto; padding:18px 20px 24px; }
.garden-panel[open] { display:flex; flex-direction:column; gap:14px; }
dialog::backdrop { background:rgba(42,30,36,.26); }
.panel-top { display:flex; gap:14px; align-items:flex-start; }.panel-art { position:relative; flex:0 0 92px; height:138px; border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#F7EEF3 0 62.5%,#8E6A5A 62.5% 100%); }
.panel-heading { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }.panel-family { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:#6B5A63; }
#panel-title { margin:0; font:400 32px/1 'Instrument Serif',serif; color:#2A1E24; overflow-wrap:anywhere; }.panel-species { font-size:13px; line-height:1.4; color:#4A3B43; }.panel-planted { font:500 11px 'DM Mono',monospace; color:#6B5A63; }
.stage-steps { display:flex; gap:4px; }.stage-step { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; font:500 9px/1.25 'DM Mono',monospace; color:#6B5A63; }.stage-step::before { content:''; height:5px; border-radius:3px; background:#EDE3E8; }.stage-step.done { color:#4F6330; }.stage-step.done::before { background:#93A867; }.stage-step.current { color:#8E3F5A; }.stage-step.current::before { background:#B85C79; }
.stage-description { margin-top:10px; font-size:14px; line-height:1.45; }.stage-description span { color:#4A3B43; }
.panel-neighbours { display:flex; flex-direction:column; gap:8px; }.neighbour-card { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:14px; background:#F7F1EE; font-size:13px; line-height:1.45; }.neighbour-card.good { background:#EEF3E4; }.neighbour-card.bad { background:#F8EAEF; }.neighbour-card>svg { width:22px; height:22px; flex-shrink:0; }.neighbour-card span { color:#4A3B43; }
#plant-name-form { display:flex; flex-direction:column; gap:6px; }#plant-name-form label { font:500 11px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#6B5A63; }
#plant-name { flex:1; min-width:0; min-height:48px; padding:0 14px; border-radius:14px; border:1.5px solid #EBD7E5; background:#fff; font:500 16px Figtree,sans-serif; color:#2A1E24; }#plant-name:focus { border-color:#B85C79; }.name-save { min-height:48px; border:1.5px solid #2A1E24; font-size:14px; color:#2A1E24; }.name-note { font-size:11px; color:#6B5A63; }
.garden-primary { min-height:54px; border-radius:999px; border:0; background:#B85C79; color:#fff; font:600 16px Figtree,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 10px 24px rgba(184,92,121,.24); }.garden-primary:hover { background:#A14E69; }.garden-primary>span { width:20px; height:20px; }
.garden-basket { position:fixed; inset:72px var(--garden-pad) auto auto; width:282px; max-width:calc(100% - 32px); margin:0; padding:14px 16px; border-radius:20px; border:1.5px solid #EBD7E5; box-shadow:0 14px 36px rgba(42,30,36,.16); }.garden-basket h2 { margin:0; font:400 22px/1 'Instrument Serif',serif; }.garden-basket p { font-size:13px; line-height:1.45; color:#6B5A63; }.garden-basket ul { list-style:none; margin:0; padding:0; }.garden-basket li { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid #F3E8EE; font-size:14px; font-weight:600; }.basket-art { width:30px; height:30px; flex-shrink:0; border-radius:8px; background:var(--plant-tint); overflow:hidden; }.basket-quantity { margin-left:auto; font:500 13px 'DM Mono',monospace; color:#8E3F5A; }
.garden-toast { position:fixed; z-index:35; top:12px; left:12px; right:12px; max-width:460px; margin:0 auto; display:flex; align-items:flex-start; gap:12px; padding:12px 8px 12px 14px; border-radius:18px; background:#fff; border:1.5px solid #EBD7E5; box-shadow:0 12px 32px rgba(42,30,36,.16); font-size:13px; line-height:1.45; color:#4A3B43; }.garden-toast>span:nth-child(2) { flex:1; min-width:0; padding-top:2px; }.garden-toast strong { color:#2A1E24; font-size:14px; }.garden-toast.confirmed { border-color:#D2E0B8; }.garden-toast.confirmed .notice-icon { background:#E6EEDA; }
.garden-gate { display:flex; flex-wrap:wrap; gap:28px 64px; align-items:center; padding:18px var(--garden-pad) 40px; min-height:calc(100svh - 180px); }.gate-copy { flex:1 1 320px; min-width:0; max-width:540px; display:flex; flex-direction:column; gap:16px; }.gate-copy>p { margin:0; font-size:16px; line-height:1.55; color:#4A3B43; text-wrap:pretty; }.gate-copy .signup { margin:0; }.gate-note { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:16px; background:rgba(235,215,229,.45); font-size:13px; line-height:1.45; color:#4A3B43; }.gate-note>span:first-child { width:16px; height:16px; flex-shrink:0; margin-top:1px; }.gate-art { flex:1 1 300px; min-width:0; max-width:480px; }.gate-plant { position:relative; flex:1 1 0; min-width:0; aspect-ratio:160/240; }.gate-packets { display:flex; gap:10px; justify-content:center; margin-top:26px; }.gate-packets>div { width:78px; border-radius:6px 6px 12px 12px; background:#FBF5EC; border:2px solid #EBD7E5; overflow:hidden; }.gate-packets>div:nth-child(1) { transform:rotate(-6deg); }.gate-packets>div:nth-child(2) { transform:rotate(2deg); }.gate-packets>div:nth-child(3) { transform:rotate(8deg); }.gate-packets .packet-art { height:58px; margin-bottom:6px; }
#garden-debug { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#2A1E24; color:#F7F1EE; font:500 11px 'DM Mono',monospace; letter-spacing:.06em; }#garden-debug>span { flex:1; }#garden-debug button { min-height:44px; padding:6px 10px; border-radius:999px; border:1px solid #6B5A63; background:transparent; color:#fff; font:500 11px 'DM Mono',monospace; cursor:pointer; }
.garden-svg { display:block; overflow:visible; }.garden-icon { display:block; }.g9-sway { animation:g9sway 5s ease-in-out infinite; transform-origin:80px 150px; }.g9-stage { animation:g9pop .6s ease-out both; transform-origin:80px 150px; }.g9-harvest { width:100%; height:100%; animation:g9lift .85s ease-in both; }
[class*="seed-g9"] { transform-box:fill-box; transform-origin:center; }.seed-g9pop-1-15 { animation:g9pop .4s ease-out 1.15s both; }.seed-g9sink-0-95 { animation:g9sink .45s ease-in .95s both; }.seed-g9fall-0 { animation:g9fall .9s cubic-bezier(.3,0,.6,1) both; }.seed-g9crumbL-1 { animation:g9crumbL .6s ease-out 1s both; }.seed-g9crumbL-1-06 { animation:g9crumbL .6s ease-out 1.06s both; }.seed-g9crumbR-1 { animation:g9crumbR .6s ease-out 1s both; }.seed-g9crumbR-1-08 { animation:g9crumbR .6s ease-out 1.08s both; }
@media(max-width:799px) {
 body[data-page="garden"] { --garden-pad:18px; }
 #garden-main h1 { font-size:38px; }
 .seed-packet { flex-basis:84px; width:84px; }.packet-body { --packet-art-height:50px; }
 .seed-packets { mask-image:linear-gradient(90deg,#000 0,#000 85%,rgba(0,0,0,.1) 100%); }
 .tray-mobile { display:inline; }.tray-desktop { display:none; }
 .garden-panel { inset:auto 0 0; width:100%; height:auto; max-height:90svh; border-radius:26px 26px 0 0; }
 body[data-page="garden"] .site-header { flex-wrap:wrap; }
 .basket-toggle { gap:5px; padding:0 10px; }
}
@media(max-width:600px) {
 html.consent-open:has(body[data-page="garden"]) { overflow:auto; }
 html.consent-open body[data-page="garden"] { height:auto; overflow:auto; }
 html.consent-open body[data-page="garden"] .site-content { height:auto; min-height:100svh; overflow:visible; padding-bottom:var(--consent-space,260px); }
}
body[data-page="garden"] *,body[data-page="garden"] *::before,body[data-page="garden"] *::after { box-sizing:border-box; }
/* Engagement additions: values from handoff-v2, preserving the shipped tray geometry. */
body[data-page="garden"] { background:var(--garden-bg,#F7F1EE); }
body[data-page="garden"] .site-content { background:transparent; }
.garden-nav { display:flex; gap:4px; margin:2px var(--garden-pad) 6px; padding:4px; border:1px solid #EBD7E5; border-radius:999px; background:rgba(255,255,255,.72); max-width:520px; }
.garden-nav a { flex:1; min-width:0; min-height:44px; display:flex; justify-content:center; align-items:center; gap:6px; border-radius:999px; color:#4A3B43; text-decoration:none; font:600 13px Figtree,sans-serif; white-space:nowrap; }
.garden-nav a[aria-current] { background:#2A1E24; color:#fff; }
.garden-nav a span { padding:1px 6px; border-radius:999px; background:#F3DCE6; color:#8E3F5A; font:500 10px 'DM Mono',monospace; }
.garden-nav a[aria-current] span { background:rgba(255,255,255,.2); color:#fff; }
#season-tip { font-size:12px; line-height:1.4; color:#6B5A63; }
.week-card { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid #D2E0B8; border-radius:18px; padding:10px 6px 10px 10px; }
.week-art { width:52px; height:52px; flex-shrink:0; border-radius:12px; background:var(--plant-tint); overflow:hidden; }
.week-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.week-copy>span { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:#4F6330; }
.week-copy h2 { margin:0; font:400 20px/1.1 'Instrument Serif',serif; }
.week-copy p { margin:0; font:12px/1.4 Figtree,sans-serif; color:#4A3B43; }
.week-actions { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#week-plant { min-height:44px; padding:0 14px; border-radius:999px; border:0; background:#4F6330; color:#fff; font:600 13px Figtree,sans-serif; cursor:pointer; }
.packet-new { position:absolute; top:13px; right:9px; padding:1px 5px; border-radius:4px; background:#4F6330; color:#fff; font:500 9px/1.4 'DM Mono',monospace; letter-spacing:.06em; z-index:1; }
.locked-packet { flex:0 0 96px; height:148px; border:2px dashed #D9C6CF; border-radius:6px 6px 12px 12px; background:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 6px; text-align:center; font:500 10px 'DM Mono',monospace; color:#6B5A63; }
.locked-packet>span:first-child { font:400 30px/1 'Instrument Serif',serif; color:#B85C79; }
.locked-packet strong { font:600 11px/1.25 Figtree,sans-serif; color:#4A3B43; }.next-seed-wait { color:#8E3F5A; }
.water-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px 0 12px; border-radius:999px; border:1.5px solid #BFD5EA; background:#E8F1F9; font:600 13px Figtree,sans-serif; color:#2C5E8A; cursor:pointer; }
.water-button svg { width:18px; height:18px; }.water-button:disabled { opacity:.6; cursor:default; }
.water-card { display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; background:#E8F1F9; color:#2C5E8A; font:13px/1.45 Figtree,sans-serif; }
.water-card>[data-icon] { flex:0 0 24px; height:24px; }.water-card>div { flex:1; }.water-card p { margin:2px 0 0; }.water-card strong { font-weight:600; }
.plot-thirsty { position:absolute; top:55%; left:50%; transform:translateX(-50%); border-radius:999px; padding:2px 7px; background:#E8F1F9; border:1px solid #BFD5EA; color:#2C5E8A; font:600 10px Figtree,sans-serif; }
.plot-drops { position:absolute; inset:0; pointer-events:none; z-index:4; }
.drop { animation:g9drop .7s ease-in both; }.drop-1 { animation-delay:.12s; }.drop-2 { animation-delay:.05s; }.drop-3 { animation-delay:.2s; }.drop-4 { animation-delay:.28s; }
.season-deco { position:absolute; top:0; left:0; right:0; bottom:-12px; pointer-events:none; z-index:2; }
.season-deco>* { position:absolute; }.snow-cap { left:-2px; right:-2px; top:calc(62.5% - 5px); height:9px; border-radius:6px; background:#fff; box-shadow:0 1px 0 rgba(42,30,36,.08); }
.snow-corner { top:calc(62.5% - 11px); width:16px; height:8px; border-radius:8px 8px 3px 3px; background:#fff; }.snow-corner.left { left:-2px; }.snow-corner.right { right:-2px; }.snowflake { border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(120,140,170,.3); }
.season-leaf { width:14px; height:14px; }.season-petal { width:8px; height:6px; border-radius:6px 6px 6px 0; }.season-butterfly { width:20px; height:15px; }
.collection-view { display:flex; flex-direction:column; gap:14px; padding:10px var(--garden-pad) 40px; }
.collection-heading { display:flex; flex-wrap:wrap; gap:10px 30px; align-items:flex-end; justify-content:space-between; }
.collection-heading>div:first-child { flex:1 1 260px; min-width:0; }
.collection-heading h2 { margin:0; font:400 64px/.95 'Instrument Serif',serif; letter-spacing:-.02em; }
.collection-heading p { max-width:640px; margin:6px 0 0; font:14px/1.5 Figtree,sans-serif; color:#4A3B43; }
.herb-progress { display:flex; flex-direction:column; gap:6px; flex:0 1 260px; min-width:160px; font:500 12px 'DM Mono',monospace; color:#4A3B43; }.herb-progress strong { font:400 30px 'Instrument Serif',serif; color:#2A1E24; }
.herb-progress progress { width:100%; height:6px; appearance:none; border:0; border-radius:3px; background:#EDE3E8; overflow:hidden; }.herb-progress progress::-webkit-progress-bar { background:#EDE3E8; }.herb-progress progress::-webkit-progress-value { background:#93A867; }.herb-progress progress::-moz-progress-bar { background:#93A867; }
.herb-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.herb-card { background:#fff; border:1.5px solid #EBD7E5; border-radius:18px; padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.herb-card.locked { background:rgba(255,255,255,.5); border:1.5px dashed #DCCBD3; }.herb-number { display:flex; align-items:center; justify-content:space-between; min-height:16px; font:500 10px 'DM Mono',monospace; color:#6B5A63; }.herb-number svg { width:16px; height:16px; }
.herb-art { position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#F7EEF3 0 62.5%,#8E6A5A 62.5% 100%); }.herb-card.locked .herb-art { background:#F3EDEF; }.herb-card.locked .herb-art svg { filter:brightness(0); opacity:.13; }
.herb-card h3 { margin:0; font:400 19px/1.05 'Instrument Serif',serif; overflow-wrap:anywhere; }.herb-latin { font:italic 400 13px/1.2 'Instrument Serif',serif; color:#6B5A63; }.herb-card p { margin:0; font:12px/1.4 Figtree,sans-serif; color:#4A3B43; }.herb-date { margin-top:auto; font:500 10px/1.35 'DM Mono',monospace; color:#4F6330; }.locked .herb-date { color:#6B5A63; }
.recipe-filters { display:flex; gap:6px; flex-wrap:wrap; }.recipe-filters button { min-height:44px; padding:0 14px; border-radius:999px; border:1.5px solid #EBD7E5; background:#fff; color:#2A1E24; font:600 13px Figtree,sans-serif; cursor:pointer; }.recipe-filters button[aria-pressed=true] { background:#2A1E24; border-color:#2A1E24; color:#fff; }
.recipe-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.recipe-card { background:#fff; border:1.5px solid #EFE3E9; border-radius:20px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px; min-width:0; }.recipe-card.can-cook { border-color:#D2E0B8; }
.recipe-name { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:0; border:0; background:none; text-align:left; min-height:44px; cursor:pointer; color:#2A1E24; }.recipe-name>span:first-child { font:400 22px/1.05 'Instrument Serif',serif; }.recipe-name>span:last-child { font:500 11px 'DM Mono',monospace; color:#6B5A63; white-space:nowrap; padding-top:4px; }
.recipe-ingredients { display:flex; flex-wrap:wrap; gap:6px; }.recipe-ingredient { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border-radius:999px; background:#F7F1EE; border:1px solid #EBDDE3; font:600 12px Figtree,sans-serif; }.recipe-ingredient.enough { background:#EEF3E4; border-color:#D2E0B8; }.ingredient-art { width:24px; height:24px; border-radius:50%; background:var(--plant-tint); overflow:hidden; }.ingredient-count { font:500 11px 'DM Mono',monospace; color:#6B5A63; }.enough .ingredient-count { color:#4F6330; }
.recipe-actions { display:flex; align-items:center; gap:10px; margin-top:auto; }.recipe-actions button { margin-left:auto; }.cooked-badge { padding:3px 9px; border-radius:999px; background:#F3DCE6; font:500 11px 'DM Mono',monospace; color:#8E3F5A; }
.recipe-cook { min-height:44px; padding:0 18px; border:0; border-radius:999px; background:#B85C79; color:#fff; font:600 14px Figtree,sans-serif; cursor:pointer; }.recipe-cook:hover { background:#A14E69; }
#recipe-empty { padding:18px; border-radius:18px; background:rgba(255,255,255,.7); border:1.5px dashed #D9C6CF; font:14px/1.5 Figtree,sans-serif; color:#4A3B43; }#recipe-locked { font:13px/1.5 Figtree,sans-serif; color:#4A3B43; }
.recipe-panel { width:440px; }.recipe-panel h2 { margin:0; font:400 36px/1.05 'Instrument Serif',serif; }.recipe-panel>.garden-row { justify-content:space-between; }.recipe-panel [data-icon] { display:block; width:24px; height:24px; }#recipe-minutes { font:500 12px 'DM Mono',monospace; color:#6B5A63; }.pantry-card { padding:14px; border-radius:16px; background:#F7F1EE; font:14px/1.5 Figtree,sans-serif; }.pantry-card p { margin:4px 0 0; }#recipe-how,#recipe-missing { margin:0; font:14px/1.6 Figtree,sans-serif; color:#4A3B43; }#recipe-source { font-size:13px; }#cook-recipe { min-height:54px; }
#basket-cook { display:inline-flex; align-items:center; min-height:44px; }
.garden-toast[data-kind=water] { border-color:#BFD5EA; }.garden-toast[data-kind=water] .notice-icon { background:#E2ECF5; }
@media(max-width:1099px) { .herb-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }.recipe-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:799px) { .locked-packet { flex-basis:84px; height:136px; }.herb-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.recipe-cards { grid-template-columns:minmax(0,1fr); }.collection-heading h2 { font-size:38px; }.recipe-panel { width:100%; } }
@media(prefers-reduced-motion:reduce) { .season-deco * { animation:none!important; }.plot-drops { display:none; } }
.collection-heading h1,.collection-heading h2 { margin:0; font:400 64px/.95 'Instrument Serif',serif; letter-spacing:-.02em; }
.recipe-sheet-top { display:flex; align-items:flex-start; gap:12px; }.recipe-sheet-top>div { flex:1; min-width:0; }.recipe-sheet-top .recipe-pot { width:48px; height:48px; flex-shrink:0; border-radius:14px; background:#F3DCE6; display:flex; align-items:center; justify-content:center; }.recipe-pot svg { width:26px; height:26px; }.recipe-eyebrow,#recipe-minutes { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:#6B5A63; }
.recipe-panel h2 { margin:4px 0 0; font:400 30px/1.02 'Instrument Serif',serif; }#recipe-ingredients { flex-direction:column; gap:6px; }#recipe-ingredients .recipe-ingredient { display:flex; gap:10px; padding:6px 10px 6px 6px; border-radius:14px; font-size:14px; }#recipe-ingredients .ingredient-art { width:34px; height:34px; border-radius:10px; flex-shrink:0; }#recipe-ingredients .ingredient-count { margin-left:auto; font-size:13px; }.pantry-card { padding:0; border-radius:0; background:none; font-size:13px; line-height:1.45; }.pantry-card p { display:inline; }#recipe-how { font-size:15px; line-height:1.55; color:#2A1E24; text-wrap:pretty; }#recipe-source { font-size:12px; color:#6B5A63; }
@media(max-width:799px) { .collection-heading h1,.collection-heading h2 { font-size:38px; } }

.water-card { padding:10px 10px 10px 12px; border-radius:14px; background:#EEF4FA; color:#2A1E24; }.water-card>[data-icon] { flex-basis:22px; height:22px; }.water-card p { display:inline; margin:0; color:#4A3B43; }.water-card strong::after { content:' '; }.water-card .water-button { padding:0 16px; border:0; background:#2C5E8A; color:#fff; font-size:14px; flex-shrink:0; }
.plot-thirsty { top:65%; display:flex; align-items:center; gap:3px; padding:1px 6px 1px 4px; font:600 9px/1.4 Figtree,sans-serif; white-space:nowrap; z-index:3; }.plot-thirsty svg { width:10px; height:10px; }