/* Same structure as the other toys, its own colours. Copied rather than shared:
   a toy owns everything it needs, so none of them can break another. */

:root {
  --ink:   #f1eee4;
  --dim:   #bdb6a4;
  --glass: rgba(18, 17, 14, 0.80);
  --line:  rgba(200, 190, 150, 0.22);
  --hot:   #8fc06a;
  --warm:  #e9c46a;
  --pad:   14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0c0c0e; color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.idle { cursor: none; }

#garden {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  background: #2a2422;
  touch-action: none;                 /* we handle every gesture ourselves */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
/* over the garden, the water on it: beads, splashes, the can's rose */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
body.water #garden { cursor: crosshair; }
body.dig #garden { cursor: pointer; }

p.touch-only, button.touch-only, span.touch-only { display: none; }
@media (hover: none), (pointer: coarse) {
  .pointer-only { display: none; }
  p.touch-only { display: block; } button.touch-only { display: block; } span.touch-only { display: inline; }
}

button {
  font: inherit; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.07);
  border: 1px solid transparent; border-radius: 9px; padding: 9px 11px;
  transition: background .14s, border-color .14s, transform .07s;
}
button:hover  { background: rgba(255,255,255,.15); }
button:active { transform: translateY(1px); }

/* ── overlays ──────────────────────────────────────────────────────────────── */

#hud {
  display: none;
  position: fixed; right: 12px; top: 10px; z-index: 9;
  font: 11px/1.4 ui-monospace, Consolas, monospace;
  color: var(--ink); opacity: .75; pointer-events: none;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}
body.hud #hud { display: block; }   /* D shows it: frames a second, what is growing */
#toast {
  position: fixed; left: 50%; top: 26px; transform: translateX(-50%); z-index: 20;
  padding: 10px 18px; border-radius: 10px; pointer-events: none;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line);
  font-size: 13px; opacity: 0; transition: opacity .3s; text-align: center; max-width: calc(100vw - 32px);
}
#toast.on { opacity: 1; }
#toast i { font-style: italic; }
#toast .c { display: block; font-size: 11.5px; color: var(--dim); }

/* the bar along the bottom: two rows, Plant and Tend. Always to hand */
#bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line);
  transition: opacity .35s; max-width: calc(100vw - 16px);
}
#bar .row { display: flex; align-items: center; gap: 6px; padding: 2px 2px; min-width: 0; }
#bar .lab { flex: none; width: 38px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); opacity: .7; }
#bar .row.on .lab { color: var(--ink); opacity: 1; }
/* the plants: a strip that scrolls sideways when there isn't room for all of them */
#bar .plants {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  padding: 2px 8px;
}
#bar .plants::-webkit-scrollbar { display: none; }
#bar .sp {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 11px; scroll-snap-align: center;
  background: rgba(255, 255, 255, .05) center / 100% no-repeat; border: 2px solid transparent;
  transition: transform .15s, border-color .15s, background-color .15s;
}
#bar .sp:hover { background-color: rgba(255, 255, 255, .12); transform: scale(1.06); }
#bar .sp.on { border-color: var(--warm); background-color: rgba(233, 196, 106, .14); }
#bar .sp.mix { display: grid; place-items: center; color: var(--ink); }
#bar .sp.mix svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#bar .sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
#bar .plants .sep { align-self: center; height: 30px; margin: 0 5px; }
#bar .icon {
  flex: none; width: 36px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px;
  color: var(--ink); background: transparent; border: 1px solid transparent; cursor: pointer;
}
#bar .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#bar .icon:hover { background: rgba(255, 255, 255, .07); }
#bar .icon.on { background: rgba(233, 196, 106, .16); border-color: rgba(233, 196, 106, .6); }
#bar .icon.rec { color: #ff5a5a; position: relative; }
#bar .icon.rec::after { content: attr(data-left); position: absolute; right: -2px; top: -4px; font: 600 10px/1 system-ui, sans-serif; color: #fff; background: #d33; border-radius: 6px; padding: 2px 4px; }
#bar .bed { flex: none; white-space: nowrap; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; }
#bar .bed .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
body.idle #bar, body.bare #bar { opacity: 0; pointer-events: none; }
body.bare #start { opacity: 0 !important; }

/* the bare bed: what to do with it */
#start {
  position: fixed; left: 50%; top: calc(50% - var(--bar-h, 104px) / 2); transform: translate(-50%, -50%); z-index: 9;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 20px 26px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
  color: var(--ink); text-align: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s;
}
#start p { margin: 0; }
#start .lead { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
#start .or { margin-top: 12px; font-size: 13px; color: var(--dim); }
#plantAll {
  margin-top: 14px; padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: var(--warm); color: #221d10; border-color: transparent;
}
#plantAll:hover { background: #f0d080; }
#plantAll:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.fresh #start { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s; }
/* your gardens: saved in this browser, listed with their pictures */
#gardens {
  width: min(460px, calc(100vw - 24px)); max-height: min(640px, calc(100svh - 40px)); padding: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(22, 20, 17, .96); color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
#gardens[open] { display: flex; flex-direction: column; }
#gardens::backdrop { background: rgba(8, 8, 8, .45); }
#gardens .head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 6px 20px; }
#gardens h2 { margin: 0; font-size: 17px; font-weight: 600; }
#gardens .shut { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: transparent; }
#gardens .shut:hover { background: rgba(255, 255, 255, .08); }
#gardens svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#gardens .keep { padding: 4px 20px 14px; border-bottom: 1px solid var(--line); }
#gardens .keep[hidden] { display: none; }
#gardens label { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
#gardens .line { display: flex; gap: 8px; }
#gardens input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); padding: 9px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); outline: none;
}
#gardens input::placeholder { color: rgba(241, 238, 228, .38); }
#gardens input:focus { border-color: rgba(233, 196, 106, .7); background: rgba(255, 255, 255, .09); }
#gardens .keep button[type=submit] { padding: 9px 18px; border-radius: 9px; font-weight: 600; background: var(--warm); color: #221d10; }
#gardens .keep button[type=submit]:hover { background: #f0d080; }
#gardens .list { list-style: none; margin: 0; padding: 8px 10px; overflow-y: auto; flex: 1; min-height: 0; }
#gardens li { display: flex; align-items: center; gap: 4px; border-radius: 11px; }
#gardens li:hover { background: rgba(255, 255, 255, .04); }
#gardens .open {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  text-align: left; padding: 8px; background: transparent; border-radius: 11px;
}
#gardens .open:hover { background: rgba(255, 255, 255, .05); }
#gardens .pic { grid-row: 1 / 3; width: 96px; height: 56px; border-radius: 7px; background: #2a2422 center / cover no-repeat; }
#gardens .nm { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: end; }
#gardens .meta { font-size: 12px; color: var(--dim); align-self: start; }
#gardens .del { flex: none; min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; background: transparent; color: var(--dim); font-size: 13px; }
#gardens .del:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
#gardens li.sure .del { color: #fff; background: #a83a3a; font-weight: 600; }
#gardens .none { margin: 0; padding: 18px 20px; color: var(--dim); font-size: 13.5px; }
#gardens .none[hidden] { display: none; }
#gardens .foot { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--dim); }
#gardens .link { padding: 0; background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; cursor: pointer; }
#gardens .link:hover { background: none; color: var(--warm); }

/* until the bed is ready */
#loading {
  position: fixed; left: 50%; top: calc(50% - var(--bar-h, 104px) / 2); transform: translate(-50%, -50%); z-index: 10;
  padding: 12px 22px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  color: var(--dim); font-size: 14px; letter-spacing: .01em; pointer-events: none;   /* (never in the way of the button under it) */
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
body.loading #loading { opacity: 1; visibility: visible; transition: none; }
body.loading #start { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
body.loading #garden { background: #2a2620; }
body.fresh.idle #bar { opacity: 1; pointer-events: auto; }   /* nothing growing yet: the bar stays */

@media (hover: none), (pointer: coarse) {
  button { padding: 11px 12px; }
  #bar .sp { width: 44px; height: 44px; }
  #bar .icon { width: 42px; height: 40px; }
  #bar .bed { padding: 8px 12px; }
  body.idle #bar { opacity: 1; pointer-events: auto; }   /* a finger never hovers: the bar stays */
  #toast   { font-size: 15px; padding: 12px 22px; }
}

/* on a narrow screen the labels go (what is chosen is lit) and the bar takes the width */
@media (max-width: 620px) {
  #bar { width: calc(100vw - 10px); padding: 6px 4px; gap: 4px; }
  #bar .lab { display: none; }
  #bar .row.tend { justify-content: center; flex-wrap: wrap; gap: 4px; }
  #bar .icon { width: 42px; height: 42px; }
}

/* ── the actions: in the row on a big screen, behind ⋯ on a phone ─────────── */
#bar .acts { display: contents; }
#bar .icon .t { display: none; }
#bar .morebtn { display: none; }
#bar a.icon { color: var(--ink); text-decoration: none; }
#bar .icon:focus-visible, #bar .sp:focus-visible, #bar .bed:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
@media (max-width: 620px) {
  #bar .morebtn { display: grid; }
  #bar .acts {
    display: none; position: absolute; right: 6px; bottom: calc(100% + 8px); z-index: 2;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 6px;
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  }
  #bar .acts.open { display: flex; }
  #bar .acts .icon { width: auto; height: 46px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 12px; }
  #bar .acts .icon .t { display: inline; font-size: 15px; }
  #bar .acts .sep { display: block; width: auto; height: 1px; margin: 4px 6px; }
}

/* when it cannot start: what happened, in words, and the way back */
#oops {
  display: none; position: fixed; inset: 0; z-index: 40; padding: 28px; place-content: center;
  background: rgba(8, 8, 6, .95); color: var(--ink); text-align: left;
}
#oops:has(#err:not(:empty)) { display: grid; }
#oops > div { max-width: 520px; }
#oops h2 { margin: 0 0 10px; font-size: 22px; }
#oops p { margin: 0 0 14px; line-height: 1.5; color: var(--dim); }
#oops #err {
  margin: 0 0 18px; padding: 10px 12px; max-height: 30vh; overflow: auto;
  font: 12px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; background: rgba(255, 255, 255, .06); border-radius: 8px;
}
#oops a { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }