:root{--paper:#f2f0e8;--ink:#29352e;--gold:#cfb887;--glass:rgba(24,34,26,.52);--line:rgba(255,255,255,.22);--serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif;--ease:cubic-bezier(.65,0,.25,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cdbf9f;color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.oasis{position:fixed;inset:0}
.stage{position:absolute;inset:0}
.stage canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}

/* 顶部 */
.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px 4.5%;pointer-events:none;background:linear-gradient(180deg,rgba(18,26,20,.42),transparent)}
.top>*{pointer-events:auto}
.top-left{display:flex;align-items:center;gap:14px}
.back{font-size:12px;letter-spacing:2px;padding:10px 14px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}
.back:hover{background:rgba(24,34,26,.72)}
.title{text-align:right;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.eyebrow{margin:0 0 10px;font-size:10px;letter-spacing:3px;color:#f4e5c4}
.title h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,52px);letter-spacing:6px;line-height:1.2}
.lede{margin:10px 0 0;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.88)}

/* 昼夜开关：太阳滑到右侧并被“咬”成月亮，星星浮现 */
.daynight{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:inherit;cursor:pointer;border-radius:999px;transition:background .3s}
.daynight:hover{background:rgba(24,34,26,.72)}
.dn-track{position:relative;display:block;width:68px;height:34px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#7fb7e6,#bfe0f5);box-shadow:inset 0 1px 4px rgba(0,0,0,.25);transition:background .9s var(--ease)}
.dn-track::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#0c1430,#27345e);opacity:0;transition:opacity .9s var(--ease)}
.dn-knob{position:absolute;z-index:2;top:4px;left:4px;width:26px;height:26px;transition:transform .9s var(--ease)}
.dn-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc83d 70%);box-shadow:0 0 10px 2px rgba(255,200,70,.7);transition:background .9s var(--ease),box-shadow .9s var(--ease)}
.dn-rays{position:absolute;inset:-5px;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,90,.95) 0 10deg,transparent 10deg 45deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);transition:transform .9s var(--ease),opacity .5s}
.dn-bite{position:absolute;z-index:1;width:22px;height:22px;top:-3px;right:-3px;border-radius:50%;background:#1d2950;transform:scale(0);transform-origin:80% 20%;transition:transform .9s var(--ease)}
.dn-crater{position:absolute;border-radius:50%;background:rgba(150,160,185,.55);opacity:0;transition:opacity .6s .3s}
.dn-crater.c1{width:5px;height:5px;left:6px;top:13px}.dn-crater.c2{width:3px;height:3px;left:12px;top:19px}
.dn-star{position:absolute;z-index:1;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .9s var(--ease)}
.dn-star.s1{left:10px;top:8px}.dn-star.s2{left:20px;top:20px;width:2px;height:2px}.dn-star.s3{left:30px;top:10px;width:2px;height:2px}.dn-star.s4{left:15px;top:26px;width:2px;height:2px}
.dn-cloud{position:absolute;z-index:1;right:6px;top:15px;width:22px;height:9px;border-radius:9px;background:#fff;opacity:.9;box-shadow:6px -4px 0 1px #fff;transition:transform .9s var(--ease),opacity .5s}
.dn-label{position:relative;display:inline-grid;font-size:12px;letter-spacing:2px;min-width:2.4em}
.dn-label>span{grid-area:1/1;transition:opacity .4s,transform .6s var(--ease)}
.dn-night{opacity:0;transform:translateY(8px)}
.daynight[aria-checked="true"] .dn-track::after{opacity:1}
.daynight[aria-checked="true"] .dn-knob{transform:translateX(34px) rotate(-200deg)}
.daynight[aria-checked="true"] .dn-disc{background:radial-gradient(circle at 35% 35%,#ffffff,#d9e2f3 70%);box-shadow:0 0 12px 3px rgba(190,215,255,.55)}
.daynight[aria-checked="true"] .dn-rays{transform:scale(.4) rotate(90deg);opacity:0}
.daynight[aria-checked="true"] .dn-bite{transform:scale(1)}
.daynight[aria-checked="true"] .dn-crater{opacity:1}
.daynight[aria-checked="true"] .dn-star{opacity:1;transform:none;animation:twinkle 2.4s ease-in-out .9s infinite}
.daynight[aria-checked="true"] .dn-star.s2{animation-delay:1.5s}.daynight[aria-checked="true"] .dn-star.s3{animation-delay:2.1s}
.daynight[aria-checked="true"] .dn-cloud{transform:translateX(30px);opacity:0}
.daynight[aria-checked="true"] .dn-day{opacity:0;transform:translateY(-8px)}
.daynight[aria-checked="true"] .dn-night{opacity:1;transform:none}
@keyframes twinkle{50%{opacity:.25}}

/* 右侧：浇水范围滑块 */
.brush{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px}
.brush-title{writing-mode:vertical-rl;font-size:11px;letter-spacing:4px;color:rgba(255,255,255,.85)}
.brush-drop{display:block;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#bfe6ff,#5aa9df);box-shadow:0 0 6px rgba(120,190,240,.5)}
.brush-drop.big{width:16px;height:16px}.brush-drop.small{width:8px;height:8px}
#brush{--p:30%;-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:24px;height:200px;margin:0;background:transparent;cursor:pointer}
#brush::-webkit-slider-runnable-track{width:6px;border-radius:6px;background:linear-gradient(to top,#8fd0ff var(--p),rgba(255,255,255,.22) var(--p))}
#brush::-moz-range-track{width:6px;border-radius:6px;background:rgba(255,255,255,.22)}
#brush::-moz-range-progress{width:6px;border-radius:6px;background:#8fd0ff}
#brush::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#dff2ff);border:2px solid #8fd0ff;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s}
#brush::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #8fd0ff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#brush:active::-webkit-slider-thumb{transform:scale(1.15)}
.brush-value{font-size:11px;letter-spacing:1px;color:#f4e5c4;font-variant-numeric:tabular-nums}

/* 右下：重置 */
.reset{position:absolute;right:4.5%;bottom:30px;font:inherit;font-size:12px;letter-spacing:2px;color:#fff;padding:10px 16px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:background .2s}
.reset span{display:inline-block;margin-right:4px;transition:transform .6s var(--ease)}
.reset:hover{background:rgba(24,34,26,.75)}
.reset:hover span{transform:rotate(-270deg)}


.loading[hidden]{display:none}
.fallback{position:absolute;inset:0;background:#272b25}
.fallback[hidden]{display:none}
.fallback img{width:100%;height:100%;object-fit:cover;opacity:.85}
.fallback p{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);margin:0;padding:12px 18px;background:var(--glass);font-size:13px;letter-spacing:1px;max-width:calc(100% - 32px);text-align:center}

@media(max-width:767px){
  .top{padding:16px;flex-direction:column;gap:14px}
  .top-left{gap:10px}
  .back{padding:9px 12px;font-size:11px}
  .daynight{padding:4px 10px 4px 4px}
  .title{text-align:left;max-width:calc(100% - 70px)}
  .title h1{font-size:30px;letter-spacing:4px}
  .lede{font-size:11px}
  .thanks{font-size:11px;margin-top:10px}
  .thanks strong{font-size:18px}
  .brush{right:12px;top:auto;bottom:90px;transform:none;padding:12px 7px 10px;gap:8px}
  #brush{height:130px}
  .brush-title{font-size:10px;letter-spacing:3px}
  .reset{right:16px;bottom:24px}
  .hint{left:16px;right:124px;bottom:24px;transform:none;white-space:normal;text-align:center;font-size:11px;padding:10px 12px}
  .hint.is-faded{transform:translateY(8px)}
}
@media(prefers-reduced-motion:reduce){.hint,.dn-track,.dn-track::after,.dn-knob,.dn-disc,.dn-rays,.dn-bite,.dn-star,.dn-cloud,.dn-label>span,.reset span{transition:none;animation:none}}

/* ───── HUD 升级：安全区、触控尺寸、昼夜色调 ───── */
:root{--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--accent:#d9f0a8;--water:#8fd0ff}
.top{padding-top:calc(26px + var(--safe-t));padding-left:max(4.5%,calc(16px + var(--safe-l)));padding-right:max(4.5%,calc(16px + var(--safe-r)))}
.back,.reset,.daynight{min-height:44px;display:inline-flex;align-items:center}
.back,.reset,.hint,.brush,.daynight{transition:background .6s var(--ease),border-color .6s var(--ease)}
.is-night{--glass:rgba(12,18,34,.58);--line:rgba(170,200,255,.22)}

/* 绿洲计数徽章：叶子图标 + 朝下一个里程碑的进度环 + 固定宽度数字 */
.oasis-count{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px}
.oc-ring{width:40px;height:40px;flex:none;transform:rotate(-90deg);filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.oc-track{fill:rgba(20,30,22,.45);stroke:rgba(255,255,255,.22);stroke-width:3}
.oc-fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .6s var(--ease)}
.oc-leaf{fill:rgba(255,255,255,.55);transform:rotate(90deg);transform-origin:22px 22px;transition:fill .6s}
.oasis-count.has-area .oc-leaf{fill:var(--accent)}
.oasis-count.milestone .oc-ring{animation:ms-pulse 1.1s var(--ease)}
@keyframes ms-pulse{30%{transform:rotate(-90deg) scale(1.22);filter:drop-shadow(0 0 12px rgba(217,240,168,.9))}}
.thanks{margin:0;font-size:12px;letter-spacing:1.5px;line-height:1.5;color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.thanks .num{display:inline-block;min-width:4.2ch;text-align:right;font-family:var(--serif);font-weight:400;font-size:22px;color:#f4e5c4;margin:0 4px;font-variant-numeric:tabular-nums;vertical-align:-2px}
.thanks .unit{font-size:11px;margin-right:4px;color:rgba(255,255,255,.8)}

/* 操作提示：图标芯片，不再是一整句说明 */
.hint{position:absolute;left:50%;bottom:calc(30px + var(--safe-b));transform:translateX(-50%);margin:0;pointer-events:none;transition:opacity .8s ease,transform .8s ease}
.hint.is-faded{opacity:0;transform:translate(-50%,10px)}
.chips{display:flex;gap:6px;flex-wrap:nowrap}
.for-touch{display:none}
.is-touch .for-touch{display:flex}
.is-touch .for-mouse{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;font-size:12px;letter-spacing:1px;white-space:nowrap;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;color:rgba(255,255,255,.9)}
.chip.key{border-color:rgba(143,208,255,.55)}
.chip b{font-weight:600;color:#f4e5c4}
.chip kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-right:-3px;font:600 10px/1 var(--sans);color:#fff;border:1px solid rgba(255,255,255,.45);border-bottom-width:2px;border-radius:4px}
.chip kbd:last-of-type{margin-right:3px}
.mouse{position:relative;width:12px;height:17px;border:1.5px solid rgba(255,255,255,.85);border-radius:6px}
.mouse::before{content:"";position:absolute;top:0;height:7px;width:50%;border-bottom:1.5px solid rgba(255,255,255,.85)}
.mouse.btn-l::before{left:0;background:var(--water);border-radius:5px 0 0 0}
.mouse.btn-r::before{right:0;background:#f4e5c4;border-radius:0 5px 0 0}
.mouse.btn-m::before,.mouse.wheel::before{left:0;width:100%;border-bottom:none}
.mouse.btn-m::after,.mouse.wheel::after{content:"";position:absolute;left:50%;top:2px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:#f4e5c4}
.mouse.wheel::after{background:#fff;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{50%{transform:translateY(3px);opacity:.4}}
.finger{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);box-shadow:inset 0 0 0 3px rgba(143,208,255,.5)}
.finger.two{box-shadow:7px 0 0 -1.5px rgba(255,255,255,.85);margin-right:7px}

/* 浇水中：滑块上的水滴随水流脉动 */
.is-watering .brush{border-color:rgba(143,208,255,.6)}
.is-watering .brush-drop{animation:drip .6s ease-in-out infinite alternate}
@keyframes drip{to{transform:rotate(-45deg) scale(1.2);box-shadow:0 0 12px rgba(143,208,255,.9)}}
.brush{right:calc(22px + var(--safe-r))}
.reset{right:max(4.5%,calc(16px + var(--safe-r)));bottom:calc(30px + var(--safe-b))}

/* 加载 */
.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;font-family:var(--serif);font-size:15px;letter-spacing:4px;color:#3a3326;background:radial-gradient(circle at 50% 45%,#e8dcc2,#cdbf9f 70%)}
.loading[hidden]{display:none}
.ld-drop{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#bfe6ff,#5aa9df);animation:ld 1.2s ease-in-out infinite}
@keyframes ld{50%{transform:rotate(-45deg) translate(3px,-3px) scale(.85);opacity:.6}}
.ld-bar{width:140px;height:2px;background:rgba(58,51,38,.18);overflow:hidden}
.ld-bar i{display:block;width:40%;height:100%;background:#6e8a3a;animation:ldb 1.3s var(--ease) infinite}
@keyframes ldb{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

@media(max-width:767px){
  .top{padding-top:calc(16px + var(--safe-t))}
  .oasis-count{justify-content:flex-start;margin-top:10px}
  .oc-ring{width:34px;height:34px}
  .thanks{font-size:11px}
  .thanks .num{font-size:18px}
  .hint{left:16px;right:124px;bottom:calc(24px + var(--safe-b));transform:none}
  .hint.is-faded{transform:translateY(10px)}
  .chips{flex-wrap:wrap}
  .chip{height:32px;font-size:11px;padding:0 10px}
  .reset{right:16px;bottom:calc(24px + var(--safe-b))}
  .brush{bottom:calc(90px + var(--safe-b))}
}
@media(prefers-reduced-motion:reduce){.mouse.wheel::after,.is-watering .brush-drop,.ld-drop,.ld-bar i,.oasis-count.milestone .oc-ring{animation:none}}
.oc-vein{fill:none;stroke:rgba(20,30,22,.55);stroke-width:1.2;stroke-linecap:round;transform:rotate(90deg);transform-origin:22px 22px}
.thanks .nw{white-space:nowrap}
.thanks .num{min-width:3ch;text-align:center;letter-spacing:0}
.back{gap:6px}