/* ================================================================
   睡莲小筑 · Water Lily Cottage — 样式
================================================================ */
:root{
  --moss:#173F26; --leaf:#2F9E44; --sprout:#7ED07F;
  --sun:#FFD43B; --butter:#FFF3BF; --cream:#FFFBEF; --ink:#143523;
  --lily:#FFC9DE;            /* 睡莲粉：只在随机事件里出现 */
  --hand:'Caveat','Microsoft YaHei','PingFang SC',cursive;
  --body:'Microsoft YaHei','PingFang SC','Hiragino Sans GB',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(120vmax 90vmax at 18% -10%, rgba(255,212,59,.32), transparent 55%),
    radial-gradient(110vmax 90vmax at 85% 110%, rgba(20,53,35,.55), transparent 60%),
    radial-gradient(90vmax 70vmax at 60% 40%, #3FAE53, transparent 70%),
    linear-gradient(160deg, #2F9E44 0%, #28823B 55%, #1C5E2E 100%);
  transition:filter 3s ease;
}
body.moonlit{filter:saturate(.8) brightness(.92)}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
.hidden{display:none !important}

/* ================= 登录（英文） ================= */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.gate-card{
  position:relative;width:min(420px,100%);background:var(--cream);
  border-radius:18px;padding:46px 38px 34px;
  box-shadow:0 8px 20px rgba(15,46,27,.25), 0 40px 90px rgba(10,35,20,.45);
}
.gate-tape{
  position:absolute;width:120px;height:34px;left:50%;top:-17px;transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(rgba(255,212,59,.9), rgba(255,200,40,.82));
  box-shadow:0 2px 6px rgba(15,46,27,.2);
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
}
.seal{
  position:absolute;top:22px;right:22px;
  font-family:'Microsoft YaHei','PingFang SC',serif;font-size:13px;font-weight:700;
  color:#B23A2E;border:2px solid #B23A2E;border-radius:4px;
  padding:6px 4px;line-height:1.35;letter-spacing:.05em;
  opacity:.85;transform:rotate(3deg);user-select:none;
}
.gate-title{font-family:var(--hand);font-weight:700;font-size:44px;color:var(--moss);line-height:1.05;text-align:center}
.gate-sub{font-size:13.5px;color:#5E7A5E;text-align:center;margin:10px 0 30px;line-height:1.6;font-family:Arial,Helvetica,sans-serif}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#7E997E;margin-bottom:6px;font-family:Arial,Helvetica,sans-serif;font-weight:700;
}
.field input{
  width:100%;border:none;border-bottom:2px solid #D7E6D2;background:transparent;
  padding:8px 2px;font-size:16px;color:var(--ink);outline:none;
  font-family:Arial,Helvetica,sans-serif;transition:border-color .2s;border-radius:0;
}
.field input:focus{border-color:var(--leaf)}
.gate-btn{
  width:100%;margin-top:8px;border:none;border-radius:999px;padding:13px;
  background:var(--sun);color:var(--moss);font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 16px rgba(214,158,0,.45);font-family:Arial,Helvetica,sans-serif;
  letter-spacing:.04em;transition:transform .15s ease;
}
.gate-btn:hover{transform:translateY(-1px)}
.gate-btn:active{transform:scale(.985)}
.gate-btn[disabled]{opacity:.6;cursor:wait}
.gate-err{min-height:18px;margin-top:12px;font-size:12.5px;color:#B23A2E;text-align:center;font-family:Arial,Helvetica,sans-serif}
.gate-foot{margin-top:18px;text-align:center;font-family:var(--hand);font-size:19px;color:#86A186}

/* ================= 画布 ================= */
#viewport{position:fixed;inset:0;z-index:1;overflow:hidden;cursor:grab;touch-action:none}
#viewport.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.item{position:absolute;user-select:none;touch-action:none}

.photo{
  background:var(--cream);padding:12px 12px 14px;border-radius:6px;
  box-shadow:0 4px 10px rgba(15,46,27,.22), 0 18px 38px rgba(15,46,27,.28);
  cursor:grab;transition:box-shadow .25s ease;
}
body.viewer .photo, body.viewer .note{cursor:default}
.photo:hover{box-shadow:0 6px 14px rgba(15,46,27,.26), 0 26px 52px rgba(15,46,27,.34)}
.photo img{display:block;width:100%;border-radius:3px;pointer-events:none;background:#E9F3E6;min-height:60px}
.photo .caption{
  font-family:var(--hand);font-size:22px;line-height:1.25;color:#3C5B43;
  text-align:center;min-height:26px;margin-top:9px;outline:none;
}
.photo .caption[contenteditable=true]{cursor:text}
.photo .caption[contenteditable=true]:empty::before{content:attr(data-ph);color:#A9C2A6}

.tape{
  position:absolute;width:96px;height:30px;left:50%;top:-15px;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(rgba(255,212,59,.85), rgba(255,200,40,.8));
  box-shadow:0 2px 5px rgba(15,46,27,.18);
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
  opacity:.92;pointer-events:none;
}
.tape.green{background:linear-gradient(rgba(126,208,127,.88), rgba(96,186,104,.82))}

.note{
  width:230px;min-height:190px;padding:34px 18px 20px;cursor:grab;
  border-radius:4px 4px 14px 4px;
  box-shadow:0 3px 8px rgba(15,46,27,.2), 0 16px 30px rgba(15,46,27,.24);
  transition:box-shadow .25s ease;
}
.note:hover{box-shadow:0 5px 12px rgba(15,46,27,.24), 0 22px 42px rgba(15,46,27,.3)}
.note.c-sun{background:linear-gradient(180deg,#FFE48A,var(--butter) 30%,#FFEFAC)}
.note.c-leaf{background:linear-gradient(180deg,#C9EFC2,#E2F6DB 30%,#D2EFC8)}
.note.c-cream{background:linear-gradient(180deg,#FFF6DF,var(--cream) 30%,#FFF3D6)}
.note .fold{position:absolute;right:0;bottom:0;width:0;height:0;
  border-left:18px solid transparent;border-bottom:18px solid rgba(15,46,27,.12);
  border-radius:0 0 12px 0;pointer-events:none}
.note .text{
  font-family:var(--hand);font-size:24px;line-height:1.3;color:#3D4A2C;
  min-height:120px;outline:none;word-break:break-word;
}
.note .text[contenteditable=true]{cursor:text}
.note .text[contenteditable=true]:empty::before{content:attr(data-ph);color:rgba(90,110,70,.45)}

.owner{
  position:absolute;left:4px;bottom:-24px;font-size:11px;color:rgba(255,251,239,.9);
  background:rgba(20,53,35,.45);padding:3px 9px;border-radius:999px;opacity:0;
  transition:opacity .18s ease;pointer-events:none;white-space:nowrap;backdrop-filter:blur(3px);
}
.item:hover .owner{opacity:1}

.ctl{position:absolute;display:flex;gap:6px;top:-14px;right:-14px;opacity:0;
     transition:opacity .18s ease;pointer-events:none}
.item:hover .ctl,.item.editing .ctl{opacity:1;pointer-events:auto}
.ctl button{
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:var(--moss);color:#FFF6D8;font-size:14px;line-height:1;
  box-shadow:0 3px 8px rgba(15,46,27,.35);display:grid;place-items:center;
}
.ctl button:hover{background:#0E2B19;transform:scale(1.08)}
.handle{
  position:absolute;width:20px;height:20px;border-radius:50%;
  border:2px solid #FFFBEF;box-shadow:0 2px 6px rgba(15,46,27,.3);
  opacity:0;transition:opacity .18s ease;display:grid;place-items:center;
}
.item:hover .handle{opacity:1}
.resize{right:-9px;bottom:-9px;background:var(--sun);cursor:nwse-resize}
.rotate{left:-9px;bottom:-9px;background:var(--sprout);cursor:grab;font-size:11px;color:#14532D}

/* ================= 顶栏：两条胶带贴在屏幕上的奶油纸签 ================= */
header{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:5;
  display:none;align-items:center;gap:6px;padding:14px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.045'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"),
    linear-gradient(175deg, #FFFDF4 0%, #FBF5E2 55%, #F5EDD4 100%);
  border:1px solid rgba(110,130,90,.3);
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(95,120,80,.12),
    0 1px 2px rgba(15,46,27,.2),
    0 12px 28px rgba(15,46,27,.25),
    0 32px 64px rgba(10,35,20,.22);
  max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center;
  transition:transform .35s ease, opacity .35s ease;
}
header.on{display:flex}
header.collapsed{transform:translateX(-50%) translateY(-160%);opacity:0;pointer-events:none}
/* 手缝线内边 */
header::after{
  content:'';position:absolute;inset:6px;border-radius:13px;
  border:1.5px dashed rgba(110,130,90,.32);pointer-events:none;
}
/* 把纸签贴在屏幕上的两条胶带 */
.bar-tape{
  position:absolute;top:-13px;width:74px;height:26px;pointer-events:none;
  background:linear-gradient(rgba(255,212,59,.82), rgba(255,198,40,.72));
  box-shadow:0 2px 5px rgba(15,46,27,.22);
  border-left:1px dashed rgba(255,255,255,.6);
  border-right:1px dashed rgba(255,255,255,.6);
  opacity:.92;
}
.bar-tape.l{left:9%;transform:rotate(-5deg)}
.bar-tape.r{right:9%;transform:rotate(4deg);
  background:linear-gradient(rgba(126,208,127,.85), rgba(96,186,104,.75))}

#barHide{padding:9px 11px}
#barShow{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:6;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(110,130,90,.3);
  cursor:pointer;font-size:20px;display:none;
  background:linear-gradient(175deg,#FFFDF4,#F7EFD8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(15,46,27,.32);
  transition:transform .15s ease;
}
#barShow::after{
  content:'';position:absolute;inset:4px;border-radius:50%;
  border:1.5px dashed rgba(110,130,90,.32);
}
#barShow:hover{transform:translateX(-50%) scale(1.08)}
#barShow.on{display:block}

.brand{
  display:flex;align-items:center;gap:10px;margin-right:6px;padding-right:16px;
  white-space:nowrap;position:relative;
}
.brand::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;
  background:linear-gradient(transparent, rgba(95,120,80,.4), transparent);
}
.brand .name{
  font-weight:800;font-size:20px;color:var(--moss);letter-spacing:.24em;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.brand .zh{font-family:var(--hand);font-size:17px;color:#93A887;letter-spacing:.01em}

.rolechip{
  font-size:11px;padding:5px 11px;border-radius:999px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.05);
}
.rolechip.admin{background:linear-gradient(180deg,#FFE06A,#FFD43B);color:#5C4400}
.rolechip.editor{background:linear-gradient(180deg,#E6F6DB,#D5EEC6);color:#2C6B38}
.rolechip.viewer{background:linear-gradient(180deg,#F1F1E6,#E6E6D8);color:#7A8B7A}

.btn{
  border:none;border-radius:999px;padding:9px 16px;font-size:13.5px;font-family:var(--body);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-weight:700;
  position:relative;letter-spacing:.02em;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn::before{
  content:'';position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-sun{
  background:linear-gradient(180deg,#FFE06A,#FFCD2C);color:#5C4400;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(176,118,0,.28),
             0 4px 12px rgba(206,150,0,.4);
}
.btn-sun:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(176,118,0,.28),
             0 7px 18px rgba(206,150,0,.5)}
.btn-leaf{
  background:linear-gradient(180deg,#EFF8E8,#DEF0D2);color:#2C6B38;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(80,120,70,.14),
             0 3px 9px rgba(50,90,55,.18);
}
.btn-leaf:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(80,120,70,.14),
             0 6px 14px rgba(50,90,55,.26)}
.btn-ghost{background:transparent;color:#5E7A5E}
.btn-ghost::before{display:none}
.btn-ghost:hover{background:rgba(110,140,100,.13)}
.btn .ico{font-size:15px;line-height:1}

#hint{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:12.5px;color:rgba(255,251,239,.85);letter-spacing:.05em;
  background:rgba(20,53,35,.35);padding:7px 16px;border-radius:999px;backdrop-filter:blur(4px);
  pointer-events:none;text-align:center;display:none;
}
#hint.on{display:block}
#zoomTag{
  position:fixed;bottom:16px;right:16px;z-index:5;font-size:12px;
  color:rgba(255,251,239,.8);background:rgba(20,53,35,.35);
  padding:6px 12px;border-radius:999px;pointer-events:none;
}
#saveTag{position:fixed;top:18px;right:16px;z-index:5;font-size:12px;color:rgba(255,251,239,.75);
  background:rgba(20,53,35,.3);padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .4s}
#saveTag.show{opacity:1}

/* ================= 成员管理 ================= */
#memberModal{position:fixed;inset:0;z-index:40;display:none;place-items:center;background:rgba(12,33,20,.45);backdrop-filter:blur(3px);padding:18px}
#memberModal.on{display:grid}
.mm-card{
  width:min(500px,100%);max-height:84vh;overflow:auto;background:var(--cream);
  border-radius:16px;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(10,35,20,.5);
}
.mm-title{font-family:var(--hand);font-weight:700;font-size:32px;color:var(--moss)}
.mm-sub{font-size:12.5px;color:#7E997E;margin:4px 0 18px;line-height:1.7}
.mm-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#F4F8EE;margin-bottom:8px}
.mm-row .nm{flex:1;font-weight:700;color:var(--ink);font-size:14.5px}
.mm-row select{border:1.5px solid #CFE3C8;border-radius:8px;padding:5px 8px;font-size:13px;background:#fff;color:var(--ink);font-family:var(--body)}
.mm-row .rm{border:none;background:transparent;color:#B23A2E;cursor:pointer;font-size:13px;padding:4px 6px}
.mm-row .rm:hover{text-decoration:underline}
.mm-add{margin-top:16px;padding-top:16px;border-top:1.5px dashed #D7E6D2}
.mm-add h4{font-size:13.5px;color:var(--moss);margin-bottom:10px}
.mm-add .line{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mm-add input,.mm-add select{
  flex:1;min-width:110px;border:1.5px solid #CFE3C8;border-radius:8px;padding:8px 10px;
  font-size:13.5px;background:#fff;color:var(--ink);outline:none;font-family:var(--body)
}
.mm-add input:focus{border-color:var(--leaf)}
.mm-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.mm-msg{font-size:12px;color:#2C6B38;min-height:16px}
.mm-msg.err{color:#B23A2E}

input[type=file]{display:none}

/* ================================================================
   随机事件 — 美好而神秘
================================================================ */

/* 月光时刻 */
#moonlight{
  position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;
  transition:opacity 3s ease;
  background:
    radial-gradient(40vmax 40vmax at 76% 16%, rgba(214,234,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(8,32,44,.5), rgba(10,38,34,.42));
}
#moonlight.on{opacity:1}
#moonlight .moon{
  position:absolute;top:9%;right:13%;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #FFFDF2, #F4ECC8 60%, #E8DCA8);
  box-shadow:0 0 50px 18px rgba(255,250,220,.45), 0 0 140px 60px rgba(214,234,255,.18);
}

/* 花瓣雨 */
#petals{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-30px;width:14px;height:11px;
  border-radius:80% 10% 80% 10%;opacity:.92;
  animation:petalFall linear forwards;
}
@keyframes petalFall{
  0%  {transform:translate3d(0,-30px,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift), 110vh, 0) rotate(var(--spin))}
}

/* 低语 */
#whisper{
  position:fixed;left:50%;top:34%;transform:translateX(-50%);z-index:10;
  pointer-events:none;opacity:0;transition:opacity 2.2s ease;
  font-family:var(--hand);font-size:clamp(24px,3.4vw,34px);color:#FFF8DC;
  text-shadow:0 2px 16px rgba(10,35,20,.6), 0 0 36px rgba(255,225,120,.35);
  text-align:center;max-width:80vw;line-height:1.5;
}
#whisper.on{opacity:1}

/* 睡莲绽放 */
.lily-bloom{position:fixed;z-index:9;pointer-events:none;width:150px;height:150px}
.lily-bloom .pad{
  position:absolute;left:50%;top:58%;width:130px;height:74px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 45% 40%, #2E8B47, #1E5E32 75%);
  border-radius:50%;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 56% 100%, 47% 52%, 38% 100%, 0 100%);
  opacity:0;animation:padIn 1.6s ease forwards;
  box-shadow:0 4px 18px rgba(10,35,20,.4);
}
.lily-bloom .pt{
  position:absolute;left:50%;top:50%;width:24px;height:52px;
  background:linear-gradient(180deg, #FFF6FA, var(--lily) 55%, #F3A9C6);
  border-radius:50% 50% 46% 46%;
  transform-origin:50% 96%;
  opacity:0;animation:petalOpen 2.6s cubic-bezier(.2,.8,.3,1) forwards;
  box-shadow:0 0 14px rgba(255,201,222,.55);
}
.lily-bloom .core{
  position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-46%);
  background:radial-gradient(circle, #FFE48A, var(--sun));
  box-shadow:0 0 22px 8px rgba(255,212,59,.65);
  opacity:0;animation:coreIn 2s ease 1.2s forwards;
}
@keyframes padIn{to{opacity:.95}}
@keyframes petalOpen{
  0%  {opacity:0;transform:translate(-50%,-92%) rotate(var(--a)) scale(.2)}
  35% {opacity:1}
  100%{opacity:1;transform:translate(-50%,-92%) rotate(var(--a)) scale(1)}
}
@keyframes coreIn{to{opacity:1}}
.lily-bloom.fade{transition:opacity 3s ease;opacity:0}

/* 提示气泡 */
#toast{
  position:fixed;bottom:64px;left:50%;transform:translateX(-50%) translateY(12px);
  z-index:11;opacity:0;pointer-events:none;transition:opacity .6s ease, transform .6s ease;
  background:rgba(20,53,35,.78);color:#FFF6D8;backdrop-filter:blur(6px);
  padding:10px 22px;border-radius:999px;font-size:14px;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(10,35,20,.4);max-width:86vw;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 微风拂过：所有作品轻轻摇曳 */
@keyframes swayKf{
  0%,100%{margin-top:0}
  30%{margin-top:-5px}
  60%{margin-top:3px}
}
body.breeze .item{animation:swayKf 2.6s ease-in-out 2}

@media (max-width:640px){
  .brand .zh{display:none}
  .btn{padding:8px 11px;font-size:13px}
  #hint{display:none !important}
  .seal{top:14px;right:14px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.photo,.note{transition:none}
  body.breeze .item{animation:none}
  .petal{display:none}
}

/* ================================================================
   v3 新增组件
================================================================ */

/* 昼夜光照（按访问者本地时间） */
body{transition:filter 8s ease}
body.tod-dawn  {filter:brightness(1.02) saturate(.92) hue-rotate(4deg)}
body.tod-day   {filter:none}
body.tod-dusk  {filter:brightness(.94) saturate(1.06) sepia(.08)}
body.tod-night {filter:brightness(.84) saturate(.82) hue-rotate(-8deg)}
body.moonlit   {filter:saturate(.8) brightness(.9)}

/* 模态通用 */
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;
  background:rgba(12,33,20,.45);backdrop-filter:blur(3px);padding:18px}
.modal.on{display:grid}

/* 在线成员化作的萤火虫 */
#buddies{position:fixed;inset:0;z-index:7;pointer-events:none}
.buddy{
  position:absolute;display:flex;align-items:center;gap:6px;
  animation:buddyDrift ease-in-out infinite alternate;
  transition:opacity 1.5s ease;
}
.buddy.bye{opacity:0}
.buddy .dot{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#FFFDE0,#FFE48A 60%,rgba(255,212,59,0));
  box-shadow:0 0 14px 5px rgba(255,225,120,.55);
  animation:buddyPulse 2.4s ease-in-out infinite;
}
.buddy .bname{
  font-size:11px;color:rgba(255,251,239,.85);
  background:rgba(20,53,35,.4);padding:2px 8px;border-radius:999px;backdrop-filter:blur(3px);
}
@keyframes buddyDrift{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@keyframes buddyPulse{0%,100%{opacity:.65}50%{opacity:1}}

/* 浇水 */
.wcount{
  position:absolute;right:4px;bottom:-24px;font-size:11px;color:rgba(255,251,239,.92);
  background:rgba(31,90,52,.55);padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(3px);pointer-events:none;white-space:nowrap;
}
.ctl .water-btn{background:#2F7CB5}
.ctl .water-btn:hover{background:#1E6299}
.item.glow{
  box-shadow:0 4px 10px rgba(15,46,27,.22), 0 18px 38px rgba(15,46,27,.28),
             0 0 26px 6px rgba(255,225,120,.45) !important;
}
.spark{
  position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFFDE0,#FFD43B);
  animation:sparkUp 1.2s ease-out forwards;
}
@keyframes sparkUp{
  0%{transform:translateY(0) scale(1);opacity:1}
  100%{transform:translateY(-34px) scale(.2);opacity:0}
}

/* 时光胶囊 */
.cocoon{display:flex;flex-direction:column;align-items:center;justify-content:center}
.cocoon-body{text-align:center;padding:6px 0 2px}
.cocoon-egg{
  font-size:38px;line-height:1;display:inline-block;
  filter:drop-shadow(0 0 14px rgba(255,225,120,.7));
  animation:cocoonBreath 3.2s ease-in-out infinite;
}
@keyframes cocoonBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cocoon-line{font-family:var(--hand);font-size:20px;color:#6B7B57;margin-top:8px}
.cocoon-date{font-size:12px;color:#9AAE8E;letter-spacing:.08em;margin-top:3px}
.cap-text{
  width:100%;min-height:110px;border:1.5px solid #CFE3C8;border-radius:10px;
  padding:10px 12px;font-size:14px;font-family:var(--body);color:var(--ink);
  outline:none;resize:vertical;background:#fff;
}
.cap-text:focus{border-color:var(--leaf)}

/* 语音贴纸 */
.note.voice{min-height:130px;width:215px}
.voice-body{display:flex;align-items:center;gap:12px;padding-top:4px}
.voice-play{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:var(--moss);color:#FFF6D8;font-size:16px;
  box-shadow:0 4px 12px rgba(15,46,27,.35);
}
.voice-play:hover{transform:scale(1.06)}
.voice-wave{display:flex;align-items:center;gap:4px;height:30px}
.voice-wave i{width:4px;border-radius:2px;background:#5E8B5E;height:10px}
.voice-wave i:nth-child(2){height:20px}.voice-wave i:nth-child(3){height:28px}
.voice-wave i:nth-child(4){height:16px}.voice-wave i:nth-child(5){height:24px}
.voice.playing .voice-wave i{animation:waveDance .8s ease-in-out infinite alternate}
.voice.playing .voice-wave i:nth-child(2){animation-delay:.1s}
.voice.playing .voice-wave i:nth-child(3){animation-delay:.2s}
.voice.playing .voice-wave i:nth-child(4){animation-delay:.3s}
.voice.playing .voice-wave i:nth-child(5){animation-delay:.4s}
@keyframes waveDance{from{transform:scaleY(.5)}to{transform:scaleY(1.25)}}
.voice-label{font-family:var(--hand);font-size:18px;color:#5E7B5E;margin-top:10px}
.vm-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0 4px}
.vm-rec{
  width:64px;height:64px;border-radius:50%;border:4px solid #FFE0E0;cursor:pointer;
  background:#D9534F;color:#fff;font-size:20px;
  box-shadow:0 6px 18px rgba(180,60,50,.4);transition:transform .15s ease;
}
.vm-rec:hover{transform:scale(1.06)}
.vm-rec.recing{animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,83,79,.5)}50%{box-shadow:0 0 0 16px rgba(217,83,79,0)}}
#vmStatus{font-size:13px;color:#5E7A5E}

/* 花园手记 */
#journalBtn{
  position:fixed;bottom:16px;left:16px;z-index:12;width:46px;height:46px;border-radius:50%;
  border:none;cursor:pointer;font-size:21px;background:rgba(255,251,239,.92);
  backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(15,46,27,.35);
  transition:transform .15s ease;
}
#journalBtn:hover{transform:scale(1.08)}
.jm-card{width:min(560px,100%)}
.jm-tabs{display:flex;gap:6px;margin:12px 0 14px}
.jm-tab{
  border:none;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;
  background:#EFF5E8;color:#5E7A5E;font-family:var(--body);font-weight:600;
}
.jm-tab.on{background:var(--sun);color:var(--moss)}
.jm-pane{display:none}
.jm-pane.on{display:block}
.jm-list{max-height:42vh;overflow:auto}
.jm-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  background:#F4F8EE;margin-bottom:7px;font-size:13.5px;
}
.jm-ico{flex:none}
.jm-main{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jm-sub2{flex:none;font-size:11.5px;color:#8FA68C;white-space:nowrap}
.jm-empty{font-size:13px;color:#8FA68C;padding:14px 4px;text-align:center;line-height:1.7}
.jm-month{
  border:1.5px solid #CFE3C8;border-radius:8px;padding:7px 10px;font-size:13.5px;
  background:#fff;color:var(--ink);outline:none;font-family:var(--body);margin-bottom:10px;
}

/* 图鉴 */
#codexGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.cdx{
  background:#F0F4EA;border-radius:12px;padding:14px 6px;text-align:center;
  opacity:.55;filter:grayscale(.6);
}
.cdx.got{opacity:1;filter:none;background:linear-gradient(180deg,#FFF6DF,#F4F8EE)}
.cdx-ico{font-size:26px}
.cdx-name{font-size:11.5px;color:#5E7A5E;margin-top:6px}
#codexGrid .jm-empty{grid-column:1/-1}

/* ================= 只给一个人的悄悄话 ================= */
#whisper.sweet{
  color:#FFE9F2;
  text-shadow:0 2px 16px rgba(10,35,20,.55), 0 0 42px rgba(255,170,200,.6);
}
.heart{
  position:fixed;z-index:10;pointer-events:none;opacity:0;
  animation:heartUp 5.5s ease-out forwards;
  filter:drop-shadow(0 0 8px rgba(255,180,210,.7));
}
@keyframes heartUp{
  0%  {opacity:0;transform:translateY(0) scale(.6)}
  12% {opacity:1}
  100%{opacity:0;transform:translateY(-46vh) translateX(14px) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){.heart{display:none}}