/* ============================================================
   小森 · 天色、天气、hihi
   ============================================================ */

:root{
  --sky1:#8CC2D6; --sky2:#AFD5E1; --sky3:#CFE4E0; --sky4:#E2EDDC;
  --sky-tint:rgba(0,0,0,0);
}

.w-sky{position:fixed;inset:0;z-index:-3;transition:background 2.4s ease}
.w-ground{position:fixed;inset:0;z-index:-2;pointer-events:none;background:transparent}
.w-tint{position:fixed;inset:0;z-index:-1;pointer-events:none;transition:background 2.4s ease}
.w-fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.w-flash{position:fixed;inset:0;z-index:61;pointer-events:none;background:#fff;opacity:0;
  transition:opacity .09s linear}
.w-flash.on{opacity:.46}

/* 雨 */
.w-drop{position:absolute;top:-8vh;width:1.6px;border-radius:2px;display:block;
  background:linear-gradient(transparent,rgba(214,230,238,.95));
  animation:w-fall linear infinite}
@keyframes w-fall{
  from{transform:translate(0,-10vh)}
  to{transform:translate(calc(var(--lean) * -4),112vh)}
}

/* 雪 */
.w-flake{position:absolute;top:-6vh;border-radius:50%;background:#fff;display:block;
  box-shadow:0 0 5px rgba(255,255,255,.75);animation:w-snow linear infinite}
@keyframes w-snow{
  0%{transform:translate(0,-8vh)}
  33%{transform:translate(var(--sway),32vh)}
  66%{transform:translate(calc(var(--sway) * -0.7),68vh)}
  100%{transform:translate(calc(var(--sway) * 0.4),112vh)}
}

/* 雾 */
.w-fogband{position:absolute;left:-30vw;width:160vw;height:24vh;display:block;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  filter:blur(14px);animation:w-fogdrift linear infinite}
@keyframes w-fogdrift{from{transform:translateX(-14vw)}to{transform:translateX(14vw)}}

/* 星 */
.w-star{position:absolute;border-radius:50%;background:#FFF8E0;display:block;
  box-shadow:0 0 6px rgba(255,248,224,.9);animation:w-twinkle ease-in-out infinite}
@keyframes w-twinkle{0%,100%{opacity:.25}50%{opacity:1}}

/* 云 */
.w-cloud{position:absolute;left:-34vw;display:block;animation:w-clouddrift linear infinite;
  filter:drop-shadow(0 6px 10px rgba(90,110,120,.1))}
@keyframes w-clouddrift{from{transform:translateX(-24vw)}to{transform:translateX(130vw)}}

/* ---------- 画里的太阳：天不晴就落下去 ---------- */
.daystar{transition:opacity 2.4s ease}
body[data-wxf="rain"] .daystar,body[data-wxf="storm"] .daystar,
body[data-wxf="snow"] .daystar,body[data-wxf="fog"] .daystar,
body[data-wxf="cloudy"] .daystar{opacity:.18}
body.w-night .daystar{opacity:0}

/* ---------- 四季：画面的颜色跟着变 ---------- */
.seasonal{transition:filter 2.4s ease}
body[data-season="春"] .seasonal{filter:saturate(1.08) brightness(1.03)}
body[data-season="夏"] .seasonal{filter:none}
body[data-season="秋"] .seasonal{filter:hue-rotate(-16deg) saturate(1.08) brightness(1.02)}
body[data-season="冬"] .seasonal{filter:saturate(.5) brightness(1.1)}
body.w-night .seasonal{filter:brightness(.52) saturate(.72)}
body.w-night[data-season="冬"] .seasonal{filter:brightness(.56) saturate(.34)}

@media(prefers-reduced-motion:reduce){
  .w-drop,.w-flake,.w-fogband,.w-star,.w-cloud{animation:none!important}
  .w-flash{display:none}
}

/* ---------- 夜里，页面整体柔和一点 ---------- */
body.w-night{
  color:#DDE6DA;
  --paper:#1E2E27; --card:#263A33;
  --ink:#DDE6DA; --muted:#9FB6A0;
  --ruozhu-l:#3F5A4C; --qingmei:#4A6151;
  --wood:#6E4F38; --wood-d:#523A29;
  --soil:#4A382A; --soil-d:#38291E;
}
body.w-night .card,body.w-night .note,body.w-night .boxy,body.w-night .track,
body.w-night .film,body.w-night .dish,body.w-night .door,body.w-night .letter,
body.w-night .corner,body.w-night .manifesto,body.w-night .chat,body.w-night .d-card,
body.w-night .gh-item,body.w-night .kitchen,body.w-night .seek{
  background:#263A33;border-color:#3C5349;color:#DDE6DA}
body.w-night h1,body.w-night h2,body.w-night h3,body.w-night .hand{color:#E7F0E2}
body.w-night .sub,body.w-night .small,body.w-night .wy,body.w-night .who,
body.w-night .meta,body.w-night p{color:#B4C4B4}
body.w-night .door h3,body.w-night .film h3,body.w-night .track h3,
body.w-night .note h3,body.w-night .dish h3{color:#E7F0E2}
body.w-night .quote,body.w-night .letter p,body.w-night .manifesto blockquote{color:#C6D5C4}
body.w-night .home,body.w-night nav,body.w-night #panel,body.w-night .wind-btn{
  background:rgba(32,48,41,.9);border-color:#445C4F;color:#CFE0C9}
body.w-night nav a,body.w-night .home,body.w-night #panel button{color:#CFE0C9}
body.w-night .seek input{background:#1F302A;color:#DDE6DA;border-color:#3C5349}
body.w-night .seek-where button,body.w-night .mood button,body.w-night .kinds button,
body.w-night .season-bar button,body.w-night .chip{
  background:#263A33;border-color:#3C5349;color:#A9BCA8}
body.w-night .seek-where button.on,body.w-night .mood button.on,
body.w-night .kinds button.on,body.w-night .season-bar button.on{
  background:var(--ruozhu);border-color:var(--ruozhu);color:#fff}
body.w-night .msg.ai{background:#2E443A;border-color:#3F5A4C;color:#DDE6DA}
body.w-night .log{background:linear-gradient(180deg,#223129,#1C2A23)}
body.w-night .chat-in{background:#263A33;border-top-color:#3C5349}
body.w-night .chat-in input{background:#1F302A;color:#DDE6DA;border-color:#3C5349}
body.w-night .shelf{filter:brightness(.74)}
body.w-night .field,body.w-night .weed-plot,body.w-night .greenhouse{filter:brightness(.78)}
body.w-night .result{background:#22352D;border-color:#3F5A4C}
body.w-night .foot{background:#1B2A23}

/* ---------- 窗（室内看天气） ---------- */
.w-pane{position:relative;overflow:hidden}
.w-pane-sky{position:absolute;inset:0;z-index:0;transition:background 2.4s ease}
.w-pane-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.w-pane-fx .w-drop{top:-20%}
.w-pane-fx .w-flake{top:-12%}
.w-pane-fx .w-fogband{left:-20%;width:140%;height:60%}
.w-pane-sun{position:absolute;top:14%;width:34px;height:34px;border-radius:50%;
  background:#F7E3AE;box-shadow:0 0 22px rgba(247,227,174,.9);display:block}
.w-pane > *:not(.w-pane-sky):not(.w-pane-fx){position:relative;z-index:2}

/* ---------- 天气牌 ---------- */
.w-card{position:fixed;top:14px;right:14px;z-index:320;display:flex;align-items:center;gap:9px;
  background:rgba(255,252,244,.9);backdrop-filter:blur(10px);
  border:2px solid var(--ruozhu-l);border-radius:30px;padding:6px 15px 6px 12px;
  cursor:pointer;transition:.2s;box-shadow:0 5px 16px rgba(64,74,60,.16);
  font-family:'LXGW WenKai TC',serif;color:var(--ruozhu-d);text-align:left}
.w-card:hover{transform:translateY(-2px)}
.w-card.w-wished{border-color:var(--lugan)}
.w-card .w-ic{font-size:1.25rem;line-height:1}
.w-card .w-tx{display:flex;flex-direction:column;line-height:1.3}
.w-card .w-tx b{font-weight:400;font-size:.86rem}
.w-card .w-tx i{font-style:normal;font-size:.7rem;opacity:.72}
body.w-night .w-card{background:rgba(32,48,41,.9);border-color:#445C4F;color:#CFE0C9}

/* ---------- 许愿 ---------- */
.w-wish{position:fixed;top:62px;right:14px;z-index:321;width:min(286px,92vw);
  background:var(--card);border:2px solid var(--ruozhu-l);border-radius:20px;
  padding:16px 16px 14px;box-shadow:0 14px 34px rgba(64,74,60,.22);
  opacity:0;transform:translateY(-10px);pointer-events:none;transition:.24s}
.w-wish.on{opacity:1;transform:none;pointer-events:auto}
.w-wish-h{font-family:'Ma Shan Zheng',cursive;font-size:1.2rem;color:var(--ruozhu-d)}
.w-wish-h2{font-family:'Ma Shan Zheng',cursive;font-size:1rem;color:var(--ruozhu-d);margin-top:12px}
.w-wish-s{font-size:.74rem;color:var(--muted);line-height:1.7;margin-bottom:10px}
.w-wish-g{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.w-wish-g button{background:#F2F6EB;border:1.6px solid var(--ruozhu-l);color:var(--ruozhu-d);
  border-radius:18px;padding:4px 12px;cursor:pointer;font-size:.8rem;transition:.16s;
  font-family:'LXGW WenKai TC',serif}
.w-wish-g button:hover{background:var(--ruozhu);color:#fff}
.w-letbe{display:block;width:100%;margin-top:14px;background:none;border:1.6px dashed #D5CDB8;
  color:var(--muted);border-radius:16px;padding:6px;cursor:pointer;font-size:.78rem;
  font-family:'LXGW WenKai TC',serif;transition:.16s}
.w-letbe:hover{border-color:var(--ruozhu-l);color:var(--ruozhu-d)}
body.w-night .w-wish{background:#263A33;border-color:#445C4F}
body.w-night .w-wish-g button{background:#1F302A;border-color:#3C5349;color:#B9CCB6}

/* ---------- 今天的一句话 ---------- */
.w-today{text-align:center;font-size:.84rem;color:var(--muted);letter-spacing:.1em;
  margin-top:10px}
body.w-night .w-today{color:#9FB6A0}

/* ============================================================
   hihi
   ============================================================ */
#hihi{position:fixed;bottom:12px;left:14%;z-index:150;width:72px;height:56px;
  cursor:pointer;transition:left 2.6s cubic-bezier(.42,0,.4,1),transform .3s;
  -webkit-tap-highlight-color:transparent}
#hihi:hover{transform:scale(1.08)}
#hihi.flip{transform:scaleX(-1)}
#hihi.flip:hover{transform:scaleX(-1) scale(1.08)}
#hihi .body{transform-box:fill-box;transform-origin:50% 100%;
  animation:hihi-breathe 3.4s ease-in-out infinite}
@keyframes hihi-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
#hihi .tail{transform-box:fill-box;transform-origin:0% 100%;
  animation:hihi-tail 2.6s ease-in-out infinite}
@keyframes hihi-tail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(16deg)}}
#hihi.walking .tail{animation-duration:1s}
#hihi .pawF{transform-box:fill-box;transform-origin:50% 0}
#hihi.walking .pawF{animation:hihi-step .42s ease-in-out infinite}
@keyframes hihi-step{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
#hihi .eye{transform-box:fill-box;transform-origin:50% 50%;animation:hihi-blink 5.2s infinite}
@keyframes hihi-blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.1)}}
#hihi.sleeping .eye{animation:none;transform:scaleY(.12)}
#hihi.sleeping .tail{animation-duration:6s}
#hihi.sleeping{transition:none}

/* 屋里：猫住在那块地板里，跟着页面一起滚 */
#hihi.indoor{position:absolute;bottom:auto;z-index:6}
#hihi.zoom .pawF{animation-duration:.16s}
#hihi.zoom .tail{animation-duration:.4s}
#hihi.zoom .body{animation:hihi-dash .22s ease-in-out infinite}
@keyframes hihi-dash{0%,100%{transform:scaleX(1.06) scaleY(.95)}50%{transform:scaleX(.96) scaleY(1.05)}}
#hihi.petted .body{animation:hihi-nuzzle .9s ease-in-out}
@keyframes hihi-nuzzle{0%,100%{transform:translateX(0) rotate(0)}
  35%{transform:translateX(5px) rotate(-5deg)}70%{transform:translateX(2px) rotate(2deg)}}

#hihi-say{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:3;
  background:var(--card);border:2px solid var(--ruozhu-l);border-radius:16px;padding:7px 14px;
  font-size:.84rem;color:var(--ruozhu-d);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,6px);transition:.4s;
  box-shadow:0 6px 18px rgba(64,74,60,.18)}
#hihi-say.on{opacity:1;transform:translate(-50%,0)}
#hihi.flip #hihi-say{transform:translate(-50%,6px) scaleX(-1)}
#hihi.flip #hihi-say.on{transform:translate(-50%,0) scaleX(-1)}
body.w-night #hihi-say{background:#263A33;border-color:#445C4F;color:#CFE0C9}

#hihi-zzz{position:absolute;left:84%;bottom:88%;z-index:3;pointer-events:none;
  font-size:.9rem;color:#9FB6A0;opacity:0;transition:.6s;white-space:nowrap}
#hihi.flip #hihi-zzz{transform:scaleX(-1)}
#hihi-zzz.on{opacity:.9;animation:hihi-zzz 3.4s ease-in-out infinite}
@keyframes hihi-zzz{0%{transform:translateY(0);opacity:0}
  30%{opacity:.9}100%{transform:translateY(-22px);opacity:0}}

@media(max-width:640px){
  .w-card{top:auto;bottom:70px;right:10px;padding:5px 12px 5px 10px}
  .w-wish{top:auto;bottom:112px;right:10px}
  #hihi{width:58px;height:46px;bottom:8px}
}
