/* style.css — Cozy Garden */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

:root{
  color-scheme: dark;
  --bg: #1a2a1f;
  --panel: #243a2c;
  --panel-2: #2c4736;
  --soil: #5a3d28;
  --soil-dark: #3d2818;
  --grass: #4a7c3f;
  --grass-2: #3d6935;
  --text: #f0ebe0;
  --muted: #a8b8a8;
  --accent: #f4c430;
  --accent-2: #e8954a;
  --good: #7dd87d;
  --shadow: 0 6px 18px rgba(0,0,0,.35);
  --radius: 16px;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;
    --bg: #e8f0e3;
    --panel: #ffffff;
    --panel-2: #f3f7ee;
    --soil: #8a5a3a;
    --soil-dark: #6b4427;
    --grass: #6ba85a;
    --grass-2: #5a9249;
    --text: #2a3a2c;
    --muted: #6a7a6c;
    --shadow: 0 6px 18px rgba(40,60,40,.18);
  }
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #1a2a1f; --panel: #243a2c; --panel-2: #2c4736;
  --soil: #5a3d28; --soil-dark: #3d2818; --grass: #4a7c3f; --grass-2: #3d6935;
  --text: #f0ebe0; --muted: #a8b8a8; --shadow: 0 6px 18px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  color-scheme: light;
  --bg: #e8f0e3; --panel: #ffffff; --panel-2: #f3f7ee;
  --soil: #8a5a3a; --soil-dark: #6b4427; --grass: #6ba85a; --grass-2: #5a9249;
  --text: #2a3a2c; --muted: #6a7a6c; --shadow: 0 6px 18px rgba(40,60,40,.18);
}

#app{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 860px;
  margin: 0 auto;
  background: var(--bg);
}

/* ---------- Top bar ---------- */
.topbar{
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
html[data-theme="light"] .topbar{ border-bottom-color: rgba(0,0,0,.06); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  font-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  animation: sway 4s ease-in-out infinite;
}
@keyframes sway{ 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
.brand-text h1{ margin:0; font-size: 19px; font-weight: 800; letter-spacing:-.01em; }
.brand-text p{ margin:0; font-size: 11px; color: var(--muted); }

.stats{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.stat{
  display:flex; align-items:center; gap:6px;
  background: var(--panel);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.05);
}
.stat-ico{ font-size: 15px; }
.stat.coins .stat-val{ color: var(--accent); }
.xpwrap{ display:flex; flex-direction:column; gap:3px; min-width: 110px; }
.xpbar{
  height: 7px; background: rgba(0,0,0,.25); border-radius: 999px; overflow:hidden;
  border: 1px solid rgba(255,255,255,.05);
}
.xpfill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--good), var(--accent));
  border-radius: 999px;
  transition: width .4s ease;
}
.xptext{ font-size: 10px; color: var(--muted); font-weight: 600; }

/* ---------- Garden ---------- */
.garden-wrap{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #7ec0e8 0%, #a8d8a8 55%, var(--grass) 56%, var(--grass-2) 100%);
}
html[data-theme="dark"] .garden-wrap{
  background: linear-gradient(180deg, #3a5878 0%, #5a7a6a 50%, var(--grass) 51%, var(--grass-2) 100%);
}
.sky{ position:absolute; inset:0 0 55% 0; pointer-events:none; }
.sun{
  position:absolute; top: 18px; right: 26px;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0%, #ffd54a 60%, rgba(255,200,80,0) 72%);
  box-shadow: 0 0 50px 20px rgba(255,210,90,.35);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.cloud{
  position:absolute; width: 80px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  filter: blur(.5px);
  animation: drift linear infinite;
}
.cloud::before, .cloud::after{
  content:''; position:absolute; border-radius:50%; background: rgba(255,255,255,.85);
}
.cloud::before{ width:34px; height:34px; top:-12px; left:14px; }
.cloud::after{ width:26px; height:26px; top:-8px; left:42px; }
.c1{ top: 28px; left: -100px; animation-duration: 38s; }
.c2{ top: 60px; left: -100px; animation-duration: 52s; animation-delay:-12s; transform: scale(.7); }
.c3{ top: 14px; left: -100px; animation-duration: 64s; animation-delay:-30s; transform: scale(1.2); opacity:.7; }
@keyframes drift{ to{ transform: translateX(110vw); } }

.garden{
  position: relative;
  z-index: 2;
  height: 100%;
  overflow: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  align-content: start;
  touch-action: pan-y;
}

/* ---------- Plot ---------- */
.plot{
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, var(--soil) 0%, var(--soil-dark) 70%),
    var(--soil-dark);
  box-shadow:
    inset 0 6px 12px rgba(0,0,0,.35),
    inset 0 -3px 6px rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  user-select: none;
}
.plot::after{
  /* soil specks */
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background-image:
    radial-gradient(circle at 30% 60%, rgba(255,255,255,.06) 1px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(0,0,0,.2) 1px, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.05) 1px, transparent 2px);
  background-size: 20px 20px;
  pointer-events: none;
}
.plot:hover{ transform: translateY(-3px) scale(1.03); }
.plot:active{ transform: scale(.97); }
.plot.empty{ cursor: pointer; }
.plot.empty:hover .plant::before{
  content:'+';
  position:absolute;
  font-size: 32px; color: rgba(255,255,255,.5); font-weight: 300;
}
.plot.locked{
  background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.5));
  cursor: not-allowed;
  opacity: .55;
}
.plot.locked:hover{ transform: none; }
.plot-lock{
  display:none; position:absolute; font-size: 22px; opacity:.7;
}
.plot.locked .plot-lock{ display:block; }

.plant{
  position: relative;
  z-index: 1;
  font-size: 38px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
  transition: transform .3s cubic-bezier(.2,.8,.2,1.2);
  line-height: 1;
}
.plant.s1{ font-size: 20px; transform: translateY(4px); }
.plant.s2{ font-size: 28px; transform: translateY(2px); }
.plant.s3{ font-size: 34px; }
.plant.ripe{
  font-size: 42px;
  animation: ripe-bounce 1.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes ripe-bounce{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-6px) rotate(2deg); }
}
.plot:has(.plant.ripe){
  box-shadow:
    inset 0 6px 12px rgba(0,0,0,.35),
    inset 0 -3px 6px rgba(255,255,255,.08),
    0 0 0 3px rgba(244,196,48,.5),
    0 6px 18px rgba(244,196,48,.3);
}

.progress{
  position: absolute;
  bottom: 6px; left: 14%; right: 14%;
  height: 5px;
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}
.pfill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--good), var(--accent));
  border-radius: 999px;
  transition: width .3s linear;
}

.floats{ position:absolute; inset:0; pointer-events:none; z-index: 3; }
.float-msg{
  position:absolute; left:50%; top:30%;
  transform: translateX(-50%);
  font-weight: 800; font-size: 13px; color: var(--accent);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp{
  0%{ opacity:0; transform: translate(-50%, 0) scale(.6); }
  20%{ opacity:1; transform: translate(-50%, -10px) scale(1.1); }
  100%{ opacity:0; transform: translate(-50%, -40px) scale(1); }
}
.drop{
  position:absolute; top: 0;
  width: 5px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #6cc6ff;
  box-shadow: 0 0 4px rgba(108,198,255,.6);
  animation: dropFall .8s ease-in forwards;
}
@keyframes dropFall{
  0%{ opacity:0; transform: translateY(-10px); }
  20%{ opacity:1; }
  100%{ opacity:0; transform: translateY(40px); }
}

/* ---------- Dock ---------- */
.dock{
  background: var(--panel);
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -4px 16px rgba(0,0,0,.2);
  max-height: 38vh;
  display: flex;
  flex-direction: column;
}
html[data-theme="light"] .dock{ border-top-color: rgba(0,0,0,.06); }
.dock-tabs{
  display:flex; gap:4px; padding: 8px 10px 0;
}
.dtab{
  border:none; background:transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 10px 10px 0 0;
  font-weight:700; font-size: 13px; cursor: pointer;
  transition: all .15s;
}
.dtab:hover{ color: var(--text); }
.dtab.active{ background: var(--panel-2); color: var(--text); }
.dock-panel{
  padding: 12px;
  overflow: auto;
  background: var(--panel-2);
  flex: 1;
}

/* seed grid */
.seed-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.seed{
  display:flex; flex-direction:column; gap:3px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform .12s, box-shadow .12s, background .12s;
  font-family: inherit;
}
.seed:hover:not(:disabled){ transform: translateY(-2px); box-shadow: var(--shadow); }
.seed:active:not(:disabled){ transform: scale(.97); }
.seed:disabled{ cursor: not-allowed; opacity:.55; }
.seed.poor{ opacity:.7; }
.seed-emoji{ font-size: 24px; }
.seed-name{ font-weight:700; font-size:13px; }
.seed-meta{ display:flex; gap:6px; font-size:11px; color: var(--muted); }
.seed-cost{ color: var(--accent); font-weight:700; }
.seed-sell{ color: var(--good); }
.seed-time{ font-size:10px; color: var(--muted); }

/* upgrades */
.up-grid{ display:flex; flex-direction:column; gap:8px; }
.up{
  display:flex; align-items:center; gap:12px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: transform .12s, box-shadow .12s;
}
.up:hover:not(:disabled){ transform: translateY(-1px); box-shadow: var(--shadow); }
.up:disabled{ cursor: default; }
.up.maxed{ opacity:.75; }
.up.poor{ opacity:.8; }
.up-emoji{ font-size: 24px; flex-shrink:0; }
.up-info{ flex:1; display:flex; flex-direction:column; gap:2px; }
.up-name{ font-weight:700; font-size:14px; }
.up-desc{ font-size:11px; color: var(--muted); }
.up-lvl{ font-size:11px; color: var(--accent); letter-spacing:1px; }
.up-cost{
  font-weight:800; font-size:14px; color: var(--accent);
  background: rgba(244,196,48,.12); padding: 6px 10px; border-radius: 8px;
  flex-shrink:0;
}
.up.maxed .up-cost{ color: var(--good); background: rgba(125,216,125,.12); }

/* picker */
.picker{
  position: fixed; inset:0; z-index: 50;
  background: rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
  backdrop-filter: blur(3px);
  animation: fade .2s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.picker.hidden{ display:none; }
.picker-card{
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  width: 100%; max-width: 460px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.picker-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.picker-head h3{ margin:0; font-size:16px; }
.picker-close{
  border:none; background:rgba(255,255,255,.08); color:var(--text);
  width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px;
}
.picker-body{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 50vh; overflow:auto;
}
.pk{
  display:flex; flex-direction:column; gap:3px;
  background: var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 10px;
  cursor:pointer; color:var(--text); font-family:inherit; text-align:left;
  transition: transform .12s;
}
.pk:hover:not(:disabled){ transform: translateY(-2px); }
.pk:disabled{ opacity:.5; cursor: not-allowed; }
.pk-emoji{ font-size: 26px; }
.pk-name{ font-weight:700; font-size:13px; }
.pk-meta{ font-size:10px; color: var(--muted); }
.pk-empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:20px; }

/* toast */
.toast{
  position: fixed; left:50%; bottom: 14px;
  transform: translate(-50%, 20px);
  background: rgba(20,30,22,.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  opacity: 0; pointer-events:none;
  transition: all .25s ease;
  z-index: 60;
  border: 1px solid rgba(255,255,255,.08);
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

.hidden{ display:none !important; }

@media (max-width: 420px){
  .brand-text p{ display:none; }
  .topbar{ padding: 10px 12px; gap: 8px; }
  .garden{ gap: 10px; padding: 10px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .plant{ font-size: 32px; }
  .plant.ripe{ font-size: 36px; }
  .stat{ padding: 6px 10px; font-size: 13px; }
}