/* ============================================================
   小芽 Sprout · 一株记住你的小植
   治愈清新 / 移动端优先
   ============================================================ */

:root{
  /* 奶油绿意 主调 */
  --cream0:#fdf9f0;
  --cream1:#f5eedd;
  --sage-soft:#aac39a;
  --sage:#8fb07f;
  --sage-deep:#6f925f;
  --sage-ink:#4f6742;
  --gold:#e9bf7e;
  --ink:#57503f;
  --ink-soft:#8d8470;
  --card:rgba(255,253,247,.72);
  --line:rgba(143,176,127,.28);

  --pot-hi:#e8bd93;
  --pot-lo:#c98f62;
  --pot-lip:#ecc9a4;
  --soil-dry:#ad8259;
  --soil-wet:#7e5333;

  --water:#a9cfeb;
  --heart:#f3b7b0;

  /* 背景（随时段 class 覆写）*/
  --bg-from:#fdf8ed;
  --bg-to:#f1ead9;
  --glow:rgba(255,224,168,.55);
  --mote:rgba(255,214,150,.55);
  --mote2:rgba(170,205,160,.35);

  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Songti SC","STSong","Noto Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- 一天四时段：氛围只换光，不换结构 ----- */
body.p-m{ --bg-from:#fdf8ed; --bg-to:#f1ead9; --glow:rgba(255,224,168,.55); --mote:rgba(255,214,150,.5); }
body.p-d{ --bg-from:#fdfbf4; --bg-to:#edf1e2; --glow:rgba(190,214,176,.5); --mote:rgba(173,206,160,.45); --mote2:rgba(255,214,150,.3);}
body.p-e{ --bg-from:#fdf5e6; --bg-to:#f0debe; --glow:rgba(255,196,120,.6); --mote:rgba(255,190,120,.55); }
body.p-n{ --bg-from:#f3eef0; --bg-to:#dfd7e2; --glow:rgba(198,184,208,.5); --mote:rgba(200,188,214,.5); --ink:#4c453f; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  color:var(--ink);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-from), transparent 62%),
    linear-gradient(165deg, var(--bg-from), var(--bg-to));
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
  transition:background .9s var(--ease);
}
::selection{ background:rgba(143,176,127,.32); }

/* ---------- 氛围背景 ---------- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.b1{ width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:radial-gradient(circle, var(--glow), transparent 65%); animation:drift 22s ease-in-out infinite alternate; }
.b2{
  width:38vmax; height:38vmax; right:-10vmax; top:24%;
  background:radial-gradient(circle, rgba(143,176,127,.22), transparent 68%);
  background:radial-gradient(circle, color-mix(in srgb, var(--sage) 30%, transparent), transparent 68%);
  animation:drift 26s ease-in-out -6s infinite alternate-reverse; opacity:.5;
}
.b3{ width:34vmax; height:34vmax; left:8%; bottom:-16vmax; background:radial-gradient(circle, var(--glow), transparent 66%); animation:drift 30s ease-in-out -12s infinite alternate; opacity:.4; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(3vmax,-2vmax,0) scale(1.08);} }

.motes{ position:absolute; inset:0; }
.mote{
  position:absolute; top:104%; border-radius:50%;
  background:radial-gradient(circle, var(--mote), transparent 70%);
  opacity:0;
  animation:rise linear infinite;
  will-change:transform,opacity;
}
@keyframes rise{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.55; }
  70%{ opacity:.35; }
  100%{ transform:translateY(-112vh); opacity:0; }
}

/* ---------- 顶栏 ---------- */
.topbar{
  max-width:980px; margin:0 auto; padding:18px clamp(16px,4vw,36px) 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:baseline; gap:7px; font-family:var(--serif); font-size:clamp(1.05rem,2.4vw,1.25rem); letter-spacing:.06em; }
.brand-mark{ color:var(--sage-deep); font-size:1.1em; }
.brand-en{ font-style:italic; font-size:.72em; color:var(--sage-ink); opacity:.85; }

.sound-toggle{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  padding:7px 12px; border-radius:999px; font:inherit; font-size:.8rem;
  cursor:pointer; transition:transform .18s var(--ease), color .2s, background .2s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.sound-toggle:hover{ color:var(--ink); transform:translateY(-1px); }
.sound-toggle:active{ transform:scale(.96); }
.sound-toggle:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.sound-icon{ display:inline-flex; }
.sound-icon .wave-off{ opacity:0; }
.sound-icon .wave{ transition:opacity .2s; }
body.muted .sound-icon .wave{ opacity:0; }
body.muted .sound-icon .wave-off{ opacity:1; }
.sound-text{ white-space:nowrap; }
@media (max-width:420px){ .sound-text{ display:none; } .sound-toggle{ padding:7px 9px; } }

/* ---------- 布局 ---------- */
.wrap{ max-width:760px; margin:0 auto; padding:clamp(18px,5vw,44px) 16px 8px; }

/* ---------- 引言 ---------- */
.intro{ text-align:center; margin-bottom:clamp(20px,5vw,34px); }
.eyebrow{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5em;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage-ink); opacity:.9; font-weight:600; margin:0 0 12px;
}
.eyebrow .dot{ opacity:.5; letter-spacing:0; }
@media (max-width:480px){ .eyebrow{ letter-spacing:.18em; } }
.title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.5rem,9vw,4.2rem); line-height:1.02; letter-spacing:.02em;
  margin:0; color:var(--ink);
}
.title em{ font-style:italic; font-size:.68em; color:var(--sage-deep); margin-left:.04em; }
.sub{
  margin:14px auto 0; max-width:34em; color:var(--ink-soft);
  font-size:clamp(.92rem,2.6vw,1.05rem); line-height:1.9;
}

/* ---------- 植物花园卡片 ---------- */
.garden{ display:flex; flex-direction:column; align-items:center; }
.stage{
  position:relative;
  width:min(500px,94vw);
  border-radius:34px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px -22px rgba(160,120,70,.35), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:clamp(46px,9vw,66px) 14px 6px;
  overflow:hidden;
}
.halo{
  position:absolute; left:50%; top:56%; width:min(300px,72%); aspect-ratio:1;
  background:radial-gradient(circle, var(--glow), transparent 68%);
  border-radius:50%; pointer-events:none;
  animation:haloPulse 7s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.05);} }

.plant-slot{
  position:relative; z-index:1;
  width:min(320px,66vmin,88%); margin:0 auto;
}
@media (max-width:560px){ .plant-slot{ width:min(268px,74vw); } }
#plant{ display:block; width:100%; height:auto; }
#plant *{ transform-box:fill-box; }
#plant .sway{ animation:sway var(--dur,5.5s) ease-in-out var(--d,0s) infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(0deg);} 50%{ transform:rotate(var(--swayA,3deg));} }
#plant.wiggle{ animation:wiggle .6s var(--ease); transform-origin:50% 96%; }
@keyframes wiggle{
  0%,100%{ transform:rotate(0) translateY(0); }
  25%{ transform:rotate(-2.6deg) translateY(1px); }
  55%{ transform:rotate(2.2deg) translateY(0); }
  80%{ transform:rotate(-1deg); }
}
#plant .rock{ animation:breathe 4.6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-1.8px);} }
#plant .flutter{ animation:flit 5s ease-in-out infinite; transform-box:view-box; }
@keyframes flit{ 0%,100%{ transform:translate(0,0);} 30%{ transform:translate(4px,-6px);} 60%{ transform:translate(-3px,-2px);} }
#plant .wing-l{ animation:flap .28s ease-in-out infinite alternate; transform-origin:right center; }
#plant .wing-r{ animation:flap .28s ease-in-out infinite alternate-reverse; transform-origin:left center; }
@keyframes flap{ from{ transform:scaleX(.5);} to{ transform:scaleX(1);} }

/* 气泡 */
.bubble{
  position:absolute; top:8px; left:50%; translate:-50% 0; z-index:3;
  max-width:88%;
  padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 22px -10px rgba(120,95,60,.4);
  font-size:.86rem; line-height:1.5; text-align:center;
  opacity:0; transform:translate(-50%,6px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bubble.show{ opacity:1; transform:translate(-50%,0); }
.bubble.en::before{ content:"· "; color:var(--sage-deep); }

/* 特效层 */
.fx{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.drop, .spark, .heart, .petal, .glyph{
  position:absolute; top:0; left:0; pointer-events:none; will-change:transform,opacity;
}
.drop{ width:12px; height:16px; border-radius:50% 50% 52% 48%/60% 60% 40% 40%;
  background:radial-gradient(circle at 30% 25%, #e3f1fb, var(--water) 70%);
  box-shadow:0 2px 6px rgba(120,160,190,.3); }
.spark{ width:8px; height:8px; border-radius:50%; background:#fff6d8; box-shadow:0 0 12px 3px rgba(255,214,120,.8); }
.heart{ font-size:15px; line-height:1; color:var(--heart); }
.glyph{ font-family:var(--serif); font-style:italic; color:var(--sage-deep); }
.petal{ width:11px; height:7px; border-radius:60% 40% 60% 40%; }

/* ---------- 状态条 ---------- */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px 0 18px; padding:0 8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.6); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font-size:.84rem; line-height:1.2;
  box-shadow:0 3px 10px -6px rgba(120,95,60,.35);
  transition:border-color .3s, background .3s;
}
.chip b{ font-weight:600; }
.chip i{ font-style:italic; font-family:var(--serif); font-size:.78em; color:var(--sage-ink); opacity:.85; }
.chip-ico{ color:var(--gold); font-style:normal; }
.chip-ico.leaf{ color:var(--sage-deep); }
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 0 rgba(143,176,127,.35); flex:none; }
.chip.mood-bright .dot{ box-shadow:0 0 0 4px rgba(143,176,127,.16); }
.chip.mood-thirsty .dot{ box-shadow:0 0 0 0; }
@media (max-width:430px){
  .chip{ padding:6px 11px; font-size:.78rem; }
  .chip i{ display:none; }
}

/* ---------- 动作区 ---------- */
.actions{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.water-btn{
  display:inline-flex; align-items:center; gap:12px;
  border:none; cursor:pointer;
  min-height:58px; padding:10px clamp(22px,6vw,30px);
  border-radius:999px;
  color:#fffdf6;
  background:linear-gradient(180deg, #a2c391, #83a672);
  box-shadow:0 12px 26px -10px rgba(111,146,95,.7), inset 0 1px 0 rgba(255,255,255,.45);
  font-family:inherit; font-size:1.04rem; font-weight:600; letter-spacing:.02em;
  transition:transform .18s var(--ease), box-shadow .2s, filter .2s;
  -webkit-user-select:none; user-select:none;
}
.water-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(111,146,95,.8), inset 0 1px 0 rgba(255,255,255,.45); }
.water-btn:active{ transform:scale(.965) translateY(0); }
.water-btn.press{ transform:scale(.955); box-shadow:0 8px 18px -8px rgba(111,146,95,.7); }
.water-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.water-btn:disabled{ filter:grayscale(.4) opacity(.75); cursor:default; transform:none; }
.water-ico{ display:inline-flex; color:#fff; filter:drop-shadow(0 1px 2px rgba(90,60,20,.25)); }
.water-label{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
.water-label small{ font-weight:500; font-size:.62rem; letter-spacing:.14em; opacity:.8; margin-top:3px; }
.hint{ margin:2px 0 0; color:var(--ink-soft); font-size:.78rem; letter-spacing:.04em; text-align:center; padding:0 10px; }
kbd{
  font-family:inherit; font-size:.74em; color:var(--sage-ink);
  background:rgba(143,176,127,.14); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:1px 6px; margin:0 1px;
}
.logline{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:20px 0 4px; color:var(--ink-soft); font-size:.78rem; letter-spacing:.06em; }
.logline .sep{ opacity:.45; }

/* ---------- 页脚 ---------- */
.foot{ text-align:center; padding:26px 16px 34px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.foot-quote{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:.86rem; letter-spacing:.08em; margin:0; }
.reset{
  border:none; background:transparent; cursor:pointer; color:var(--line); font-size:1rem; line-height:1;
  padding:6px 10px; opacity:.4; transition:opacity .25s, color .25s; font-family:var(--sans);
}
.reset:hover{ opacity:1; color:var(--sage-deep); }

/* ---------- 可及性 / 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .blob,.mote,.halo{ display:none; }
}

@media (max-width:560px){
  .stage{ border-radius:26px; }
}