/* GROW LIGHT — a sun-warmed seed packet come to life. */
:root{
  --sky:#F8EFDC; --sky1:#FBF4E4; --sky2:#F3E6C8;
  --loam:#4A3324; --ink:#33241A; --muted:#9A8468;
  --vine:#2F7A3D; --young:#66B84F; --sun:#F0A818; --hot:#FFC94D; --glow:#FFD966;
  --husk:#D9B84A; --thorn:#7A2E4D; --cream:#FFF9EC;
  --fr:'Fraunces', Georgia, serif;
  --ka:'Karla', Arial, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:linear-gradient(180deg, var(--sky1), var(--sky2)) fixed var(--sky);
  color:var(--ink); font-family:var(--ka);
  overscroll-behavior:none; user-select:none; -webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
[hidden]{ display:none !important; }

.screen{ min-height:100svh; display:flex; flex-direction:column; }

/* ================= HOME ================= */
.home{ align-items:center; position:relative; overflow:hidden; padding-bottom:84px; }

.hero-vine{
  position:absolute; left:-16px; bottom:64px; width:min(72px,16vw); height:auto;
  transform-origin:50% 100%;
  animation:sway 6s ease-in-out infinite;
  pointer-events:none; opacity:.95; z-index:0;
}
@keyframes sway{ 0%,100%{ transform:rotate(-1.4deg);} 50%{ transform:rotate(1.4deg);} }

.masthead{ position:relative; text-align:left;
  padding:calc(clamp(28px,6svh,64px) + env(safe-area-inset-top,0px)) 20px 6px; z-index:1; }
.wm-glow{
  position:absolute; top:8px; left:50%; transform:translate(-30%,0);
  width:280px; height:280px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,217,102,.38) 0%, rgba(255,217,102,0) 62%);
}
.wordmark{ position:relative; line-height:.92; font-family:var(--fr); font-weight:900;
  font-size:clamp(3.2rem, 15vw, 5.4rem); letter-spacing:.01em; }
.wm-row{ display:flex; align-items:baseline; }
.wm-light{ margin-left:.5ch; }
.wm-grow i{ color:var(--vine); }
.wm-light i{ color:var(--sun); }
.wordmark i{ display:inline-block; font-style:normal; }
.wm-grow i:nth-child(1){ transform:translateY(-2px) rotate(-1.2deg); }
.wm-grow i:nth-child(2){ transform:translateY(1px) rotate(.8deg); }
.wm-grow i:nth-child(4){ transform:translateY(-1px) rotate(1.3deg); }
.wm-light i:nth-child(1){ transform:translateY(2px) rotate(-.9deg); }
.wm-light i:nth-child(3){ transform:translateY(-2px) rotate(.7deg); }
.wm-light i:nth-child(4){ transform:translateY(1px) rotate(-1.1deg); }
.wm-light i:nth-child(5){ transform:translateY(-1px) rotate(1.4deg); }
.wm-o{ width:.92em; height:.78em; position:relative; }
.wm-o svg{ position:absolute; inset:-8% 0 auto 0; width:100%; height:auto; }
.wm-i{ width:.42em; height:.78em; position:relative; }
.wm-i svg{ position:absolute; bottom:-2%; left:0; width:100%; height:104%; }

.tagline{ font-family:var(--fr); font-style:italic; font-weight:600;
  color:var(--muted); font-size:clamp(1rem,4.2vw,1.25rem); margin-top:10px; }
.howline{ margin-top:14px; font-weight:500; font-size:.95rem; color:var(--ink);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pict{ width:18px; height:18px; vertical-align:-3px; }

/* seed-packet rack */
.rack{
  display:grid; grid-template-columns:repeat(4, minmax(70px, 96px));
  gap:12px; padding:22px 16px 26px; z-index:1;
  margin:auto 0;   /* center in the leftover space on tall viewports */
}
.packet{
  position:relative; aspect-ratio:3/4; border-radius:10px;
  background:var(--cream); border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.packet:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.packet b{ font-family:var(--fr); font-weight:700; font-size:1.35rem; }
.packet i{ font-style:normal; font-size:.5rem; font-weight:700; letter-spacing:.04em;
  color:var(--muted); text-align:center; padding:0 4px; line-height:1.2; min-height:2.4em;
  display:flex; align-items:center; }
.pstars{ display:flex; gap:2px; }
.fstar{ width:13px; height:13px; opacity:.35; }
.fstar.on{ opacity:1; }
.packet.locked{ background:#E9DDC4; opacity:.5; box-shadow:2px 2px 0 var(--ink); cursor:default; }
.packet.current{ animation:packetbob 2s ease-in-out infinite; }
@keyframes packetbob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
.psprout{ position:absolute; top:-11px; right:8px; font-size:.95rem; }
.pleaf{ position:absolute; top:-9px; right:6px; font-size:.85rem; }
.packet.golden::after{
  content:''; position:absolute; inset:0; border-radius:7px; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,217,102,.45) 50%, transparent 70%);
  background-size:250% 100%;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{ from{ background-position:120% 0;} to{ background-position:-130% 0;} }

.loamband{
  position:fixed; left:0; right:0; bottom:0; height:64px; z-index:2;
  background:var(--loam); color:var(--sky);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px calc(env(safe-area-inset-bottom,0px)/2);
  border-top:3px solid var(--ink);
}
.foot-note{ font-size:.78rem; color:#CBB79A; }
.foot-note a{ color:#CBB79A; }
.mute{ background:none; border:none; width:44px; height:44px; padding:7px; }
.mute svg{ width:100%; height:100%; display:block; }
.mute .m-cloud{ display:none; }
.mute.muted .m-cloud{ display:block; }
.mute.muted .m-rays{ opacity:.3; }

/* ================= PLAY ================= */
.play{ height:100svh; height:100dvh; overflow:hidden; }
.playbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(6px + env(safe-area-inset-top,0px))
          calc(env(safe-area-inset-right,0px) + 12px)
          4px
          calc(env(safe-area-inset-left,0px) + 12px);
}
.minimark{
  display:flex; align-items:center; gap:1px; background:none; border:none;
  font-family:var(--fr); font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  min-height:44px; padding:6px 10px 6px 0;   /* 44px touch target */
}
.minimark span:first-child{ color:var(--vine); }
.minimark span:last-child{ color:var(--sun); }
.minimark svg{ width:.95em; height:.95em; margin:0 1px; }
.level-info{ text-align:right; display:flex; flex-direction:column; line-height:1.25; }
.level-info b{ font-family:var(--fr); font-weight:700; font-size:.95rem; }
.goal{ font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.06em; }
.mute-ink{ width:44px; height:44px; padding:8px; flex:none; }

.stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  position:relative; padding:0 6px;
}
#world{ display:block; border-radius:10px; touch-action:none; }
.toast{
  position:absolute; top:12px; left:50%; transform:translate(-50%,-8px);
  background:var(--cream); border:2.5px solid var(--ink); border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
  font-weight:700; font-size:.86rem; padding:9px 14px; max-width:86%;
  text-align:center; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; z-index:5;
}
.toast.in{ opacity:1; transform:translate(-50%,0); }
.caption{
  position:absolute; left:0; right:0; top:34%; text-align:center; pointer-events:none;
  font-family:var(--fr); font-style:italic; font-weight:600;
  font-size:clamp(1.1rem,4.6vw,1.5rem); color:var(--ink);
  text-shadow:0 1px 0 var(--cream); animation:capin .7s ease-out both; z-index:4;
}
@keyframes capin{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.hud{
  background:var(--loam); border-top:3px solid var(--ink);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:8px; position:relative; z-index:2;
}
.sapline, .hudrow{ width:100%; max-width:560px; margin:0 auto; }
.sapline{ display:flex; align-items:center; gap:8px; }
.saplabel{ font-size:.66rem; font-weight:700; letter-spacing:.14em; color:#CBB79A; }
.sapbar{ flex:1; height:6px; background:rgba(0,0,0,.35); border-radius:4px; overflow:hidden; }
.sapbar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--sun),var(--hot));
  border-radius:4px; transition:width .18s linear; }
.hudrow{ display:flex; align-items:center; gap:12px; }
.tray{ flex:1; display:flex; gap:9px; align-items:center; min-height:44px; touch-action:none; }
.chip{ width:30px; height:30px; border-radius:50%; position:relative; }
.chip.full{
  background:radial-gradient(circle at 36% 36%, var(--hot), var(--sun) 65%);
  box-shadow:0 0 12px rgba(255,217,102,.65);
  cursor:grab;
  animation:chipin .25s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes chipin{ from{ transform:scale(.4);} to{ transform:scale(1);} }
.chip.empty{ border:2.5px dashed rgba(255,217,102,.5); }
.grow{
  font-family:var(--fr); font-weight:900; font-size:1.28rem; letter-spacing:.03em;
  color:var(--ink); background:var(--sun);
  border:3px solid var(--ink); border-radius:999px;
  padding:12px 30px; box-shadow:4px 4px 0 var(--ink);
  transition:transform .08s, box-shadow .08s, background .2s;
}
.grow:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.grow.replant{ background:var(--cream); font-family:var(--ka); font-weight:700; font-size:1.05rem; }
.grow.pulse{ animation:growpulse 1.2s ease-in-out infinite; }
@keyframes growpulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
.ff{
  font-family:var(--fr); font-weight:700; font-size:1rem;
  width:46px; height:46px; border-radius:50%;
  background:var(--cream); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  touch-action:none;
}
.ff:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.hud.growing .tray{ opacity:.4; pointer-events:none; }
.skip{
  align-self:center; background:none; border:none; color:#CBB79A;
  font-size:.8rem; font-weight:700; text-decoration:underline; padding:2px 8px;
}

/* ================= CLEAR ================= */
.clearwrap{
  position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.clearpanel{
  pointer-events:auto;
  width:min(430px, 94vw); max-height:88svh; overflow-y:auto;
  background:var(--cream); border:3px solid var(--ink); border-bottom:none;
  border-radius:18px 18px 0 0; box-shadow:0 -6px 0 rgba(51,36,26,.15);
  padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));
  text-align:center;
  transform:translateY(105%); transition:transform .45s cubic-bezier(.2,1.1,.3,1);
}
.clearpanel.up{ transform:translateY(0); }
.clear-name{ font-family:var(--fr); font-weight:900; font-size:1.7rem; }
.clear-stars{ display:flex; justify-content:center; gap:10px; margin:10px 0 4px; }
.cstar{ display:inline-block; transform:scale(0) rotate(-120deg); transition:transform .4s cubic-bezier(.2,1.6,.4,1); }
.cstar.in{ transform:scale(1) rotate(0); }
.cstar .fstar{ width:34px; height:34px; opacity:.3; }
.cstar.on .fstar{ opacity:1; }
.clear-suns{ font-weight:700; font-size:.95rem; }
.clear-hint{ font-family:var(--fr); font-style:italic; font-weight:600; color:var(--muted);
  font-size:.9rem; margin:2px 0 12px; min-height:1.2em; }
#card{
  width:min(300px, 74vw); height:auto; display:block; margin:0 auto 14px;
  border:3px solid var(--ink); border-radius:14px; box-shadow:5px 5px 0 rgba(51,36,26,.18);
  background:var(--sky);
}
.clear-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn{
  font-family:var(--fr); font-weight:700; font-size:.95rem; letter-spacing:.03em;
  border:3px solid var(--ink); border-radius:12px; padding:11px 18px;
  box-shadow:3px 3px 0 var(--ink); background:var(--cream);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn.share{ background:var(--sun); }
.btn.next{ background:var(--young); }

/* ================= wide screens ================= */
@media (min-width:700px){
  .home{ padding-bottom:96px; }
  .masthead{ text-align:left; }
  .rack{ grid-template-columns:repeat(6, 96px); }
  .hero-vine{ width:110px; left:4vw; }
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .hero-vine, .packet.current, .grow.pulse, .packet.golden::after{ animation:none; }
  .toast, .clearpanel, .cstar{ transition-duration:.15s; }
  .caption{ animation-duration:.15s; }
}