/* ========== 有家了，喵！ ========== */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-select:none; }
:root{
  --cream:#fff6e8; --peach:#ffe3bd; --orange:#f5a75c; --deep:#8a5a30;
  --brown:#6b4a2f; --pink:#f7b1c1; --red:#e86a5e; --green:#7bc47f; --blue:#6fb2d0;
  --shadow:0 6px 18px rgba(139,90,48,.18);
}
html,body{ width:100%; height:100%; overflow:hidden; }
body{
  font-family:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--cream); color:var(--deep);
}
.hidden{ display:none !important; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- 通用按钮 ---------- */
.big-btn{
  font-size:26px; letter-spacing:6px; color:#fff; padding:16px 54px;
  background:linear-gradient(180deg,#f7b267,#ef8f3c); border:none; border-radius:999px;
  box-shadow:0 8px 0 #c96f2a,0 14px 24px rgba(180,110,40,.35); transition:transform .12s, box-shadow .12s;
}
.big-btn:hover{ transform:translateY(-2px); }
.big-btn:active{ transform:translateY(5px); box-shadow:0 3px 0 #c96f2a; }
.mid-btn{
  font-size:15px; color:#fff; padding:9px 20px; border:none; border-radius:14px;
  background:linear-gradient(180deg,#f7b267,#ef8f3c); box-shadow:0 4px 0 #c96f2a; transition:all .12s;
}
.mid-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #c96f2a; }
.mid-btn.ghost{ background:#fff; color:var(--deep); box-shadow:0 4px 0 #e3c9a8; }
.close-x{
  position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; border-radius:50%;
  background:#ffe3bd; color:var(--deep); font-size:16px; box-shadow:0 3px 0 #e3c9a8;
}

/* ---------- 屏幕 ---------- */
.screen{ position:fixed; inset:0; }

/* ---------- 标题画面 ---------- */
#screen-title .title-bg{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffe9c7 0%,#ffd9a8 45%,#ffc98a 100%); overflow:hidden;
}
.title-sun{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50%; background:#ffe27a;
  box-shadow:0 0 90px 40px rgba(255,226,122,.55);
}
.title-cloud{ position:absolute; background:#fff; border-radius:999px; opacity:.9; }
.title-cloud::before,.title-cloud::after{ content:""; position:absolute; background:#fff; border-radius:50%; }
.c1{ width:150px; height:44px; top:16%; left:8%; animation:drift 26s linear infinite; }
.c1::before{ width:56px; height:56px; top:-28px; left:24px; }
.c1::after{ width:40px; height:40px; top:-18px; left:74px; }
.c2{ width:110px; height:34px; top:26%; right:6%; animation:drift 34s linear infinite reverse; }
.c2::before{ width:44px; height:44px; top:-22px; left:18px; }
.c2::after{ width:32px; height:32px; top:-14px; left:56px; }
@keyframes drift{ 0%{ transform:translateX(-6vw);} 50%{ transform:translateX(6vw);} 100%{ transform:translateX(-6vw);} }
.title-cats{ font-size:42px; margin-bottom:6px; letter-spacing:18px; }
.title-cats span{ display:inline-block; }
.t-cat{ animation:bob 2.2s ease-in-out infinite; }
.t-fish{ animation:bob 2.2s ease-in-out .3s infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.game-title{
  font-size:64px; color:#8a4b1f; letter-spacing:10px;
  text-shadow:0 3px 0 #fff,0 7px 0 rgba(160,90,30,.25);
}
.game-sub{ font-size:20px; color:#a06a35; margin-top:10px; letter-spacing:3px; }
.game-tag{ font-size:15px; color:#b07c42; margin-top:14px; letter-spacing:1px; }
#btn-start{ margin-top:44px; }
.title-hint{ position:absolute; bottom:22px; font-size:12px; color:#c49a66; }
/* 版本标记：方便确认打开的是不是最新构建（旧缓存会显示旧编号） */
.title-ver{ position:absolute; bottom:7px; left:0; right:0; text-align:center; font-size:11px; color:#b98a55; letter-spacing:.5px; opacity:.9; }

/* ---------- 剧情画面 ---------- */
#screen-story .story-bg{ position:absolute; inset:0; background:linear-gradient(180deg,#2b3242 0%,#3a4358 60%,#2f3542 100%); overflow:hidden; }
.story-buildings{ position:absolute; inset:0;
  background:
    linear-gradient(0deg,#20242f 0 34%, transparent 34%),
    linear-gradient(90deg,#262c3a 0 18%,transparent 18% 30%,#222839 30% 52%,transparent 52% 64%,#262c3a 64% 86%,transparent 86%);
  opacity:.9;
}
.story-buildings::after{ content:""; position:absolute; top:12%; left:6%; right:6%; height:26%;
  background-image:radial-gradient(rgba(255,220,130,.55) 2px, transparent 3px);
  background-size:46px 34px; opacity:.35;
}
.story-streetlight{
  position:absolute; left:12%; bottom:22%; width:10px; height:46%; background:#454c60; border-radius:6px;
}
.story-streetlight::before{ content:""; position:absolute; top:-26px; left:-18px; width:46px; height:26px;
  background:#ffd98a; border-radius:20px 20px 6px 6px; box-shadow:0 0 60px 26px rgba(255,217,138,.35); }
.story-trashcan{ position:absolute; right:14%; bottom:20%; font-size:74px; filter:brightness(.7); }
.story-box{ position:absolute; left:44%; bottom:16%; font-size:88px; filter:brightness(.8); }
/* 雨：三层雨幕（远景细雾 / 中景雨丝 / 近景雨点），每条雨丝角度、长度、速度、透明度都不同，
   部分雨丝做成断续的短线，避免出现整齐划一的斜纹 */
.rain-layer{ position:absolute; inset:-18% -12%; pointer-events:none; overflow:hidden; z-index:3; }
.rain-layer::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(103deg, transparent 0 26px, rgba(190,215,255,.10) 26px 27px, transparent 27px 63px),
    repeating-linear-gradient(97deg, transparent 0 47px, rgba(203,226,255,.075) 47px 48px, transparent 48px 106px);
  -webkit-mask-image: repeating-linear-gradient(4deg, #000 0 34px, transparent 34px 61px, #000 61px 122px);
  mask-image: repeating-linear-gradient(4deg, #000 0 34px, transparent 34px 61px, #000 61px 122px);
  animation: rainDrift 3.4s linear infinite;
}
@keyframes rainDrift{ to{ background-position:-9px 46px, 6px 84px; } }
.rain-layer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:28%;
  background:radial-gradient(120% 100% at 50% 100%, rgba(170,200,240,.12), transparent 72%);
}
.rain-layer .d{
  position:absolute; top:-32%; display:block; border-radius:999px;
  background:linear-gradient(to bottom, rgba(206,228,255,0) 0%, rgba(206,228,255,.55) 46%, rgba(238,248,255,.95) 100%);
  animation-name: rainFall; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes rainFall{
  from{ transform: rotate(var(--a,11deg)) translate3d(0,-22vh,0); }
  to  { transform: rotate(var(--a,11deg)) translate3d(0,132vh,0); }
}
.story-cat{ position:absolute; left:50%; bottom:15%; transform:translateX(-50%); width:230px; }
/* 雨夜里的图猫压暗一点，融进场景 */
.story-cat svg{ filter:brightness(.8) saturate(.85) drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.story-cat.shivering svg{ animation:shiver .12s linear infinite; }
.story-text{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:min(720px,86vw); min-height:86px; padding:18px 26px; border-radius:18px;
  background:rgba(20,24,34,.82); color:#ffe9c9; font-size:18px; line-height:1.8; letter-spacing:1px;
  border:2px solid rgba(255,220,160,.35);
}
.story-next{
  position:absolute; right:5%; bottom:2.4%; font-size:16px; padding:8px 22px; border:none; border-radius:999px;
  background:#f7b267; color:#5a3a1a; box-shadow:0 4px 0 #b97a35;
}
.story-hotspot{
  position:absolute; left:50%; bottom:26%; transform:translateX(-50%);
  padding:10px 26px; border-radius:999px; border:2px dashed #ffd98a; background:rgba(255,217,138,.12);
  color:#ffe9c9; font-size:16px; animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:translateX(-50%) scale(1);} 50%{ transform:translateX(-50%) scale(1.06);} }

/* ---------- 收养手续 ---------- */
#screen-adopt .adopt-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffeed6,#ffe0ba); }
.adopt-card{
  width:min(760px,92vw); max-height:92vh; background:#fffaf1; border-radius:26px; box-shadow:var(--shadow);
  padding:26px 34px; display:flex; flex-direction:column; overflow:hidden;
}
.adopt-head h2{ font-size:26px; color:#8a4b1f; letter-spacing:2px; }
.adopt-sub{ font-size:13px; color:#b07c42; margin-top:4px; }
.adopt-steps-bar{ display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.step-chip{ font-size:13px; padding:6px 14px; border-radius:999px; background:#f3e2c8; color:#b07c42; }
.step-chip.on{ background:#f7b267; color:#fff; }
.step-chip.done{ background:#7bc47f; color:#fff; }
.adopt-body{ flex:1; overflow-y:auto; min-height:300px; padding:6px 4px; font-size:16px; line-height:2; color:#6b4a2f; }
.adopt-foot{ display:flex; justify-content:space-between; margin-top:14px; }
.adopt-check{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; background:#fff3e0; margin:8px 0; }
.adopt-check .ck{ width:22px; height:22px; border-radius:50%; border:2px solid #e0bd8d; display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.adopt-check.checked .ck{ background:#7bc47f; border-color:#7bc47f; }
.form-row{ margin:14px 0; }
.form-row label{ display:block; font-size:14px; color:#a06a35; margin-bottom:6px; }
.form-row input, .form-row select{
  font-family:inherit; font-size:16px; padding:10px 14px; border-radius:12px; border:2px solid #ecd3ac;
  background:#fff; color:#6b4a2f; width:min(320px,80%); outline:none;
}
.form-row input:focus{ border-color:#f5a75c; }
.idcard{
  margin:18px auto; width:min(400px,90%); background:linear-gradient(160deg,#fffdf7,#ffefd6);
  border:3px solid #f0b96f; border-radius:18px; padding:18px 22px; position:relative; box-shadow:var(--shadow);
}
.idcard h3{ text-align:center; color:#c96f2a; letter-spacing:4px; font-size:18px; margin-bottom:10px; }
.idcard .row{ display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:#6b4a2f; }
.idcard .stamp{ position:absolute; right:14px; bottom:12px; width:74px; height:74px; border:3px solid rgba(230,90,80,.75);
  border-radius:50%; color:rgba(230,90,80,.85); font-size:12px; display:flex; align-items:center; justify-content:center;
  text-align:center; transform:rotate(-14deg); line-height:1.3; }
.fp-btn{ background:none; border:none; font-size:56px; filter:grayscale(1); opacity:.45; transition:all .2s; }
.fp-btn.done{ filter:none; opacity:1; transform:scale(1.1); }
.sign-input{ font-family:"ZCOOL KuaiLe","KaiTi",cursive !important; font-size:22px !important; }

/* ---------- 游戏布局 ---------- */
#screen-game{ background:var(--cream); }
.game-layout{ display:flex; height:100vh; }
#room-wrap{ flex:1; position:relative; overflow:hidden; background:#ffe9cd; }
#room{ position:absolute; inset:0; width:100%; height:100%; }
.furniture{ cursor:pointer; }
.furniture .flabel{ font-size:15px; fill:#a5713a; opacity:0; transition:opacity .2s; font-family:inherit; }
.furniture:hover .flabel{ opacity:1; }
.furniture:hover{ filter:brightness(1.06); }

/* 猫 */
/* aspect-ratio 与 viewBox(300×280) 绑定，保证任何宽度下高度都由比例推导，
   不会被父级高度/浏览器默认尺寸压扁 */
#cat-svg{ position:absolute; left:50%; top:44%; width:var(--cat-w,330px); height:auto; aspect-ratio:300/280; transform:translateX(-50%); overflow:visible; pointer-events:none; }
/* #cat-svg 自身带 translateX(-50%)，用独立的 translate 属性做抖动，避免覆盖居中 */
#cat-svg.shiver{ animation:shiverX .14s linear infinite; }
@keyframes shiverX{ 0%,100%{ translate:0 0; } 25%{ translate:-2.5px 0; } 75%{ translate:2.5px 0; } }
#cat-svg svg{ overflow:visible; }
/* 图片猫的两层交叉淡入：每次喂食后平滑出现微小变化 */
#cat-svg image.cat-stage-img,.story-cat image.cat-stage-img{ transition:opacity .65s ease; }
.cat-sil-img{ pointer-events:none; }
@keyframes shiver{ 0%{ transform:translateX(0);} 25%{ transform:translateX(-2.5px);} 75%{ transform:translateX(2.5px);} 100%{ transform:translateX(0);} }
/* 「打个滚」不再整圈 360° 翻转（那有一半时间四脚朝天），
   改成绕脚掌左右轻摆：头始终在上，读起来是蹭着地打了个滚 */
#cat-svg.rolling{ animation:rollX 1.15s ease-in-out; transform-box:view-box; transform-origin:50% 92%; }
@keyframes rollX{
  0%{ rotate:0deg; translate:0 0; }
  12%{ rotate:-11deg; translate:0 2px; }
  34%{ rotate:9deg; translate:0 5px; }
  56%{ rotate:-6deg; translate:0 3px; }
  78%{ rotate:4deg; translate:0 1px; }
  100%{ rotate:0deg; translate:0 0; }
}
#cat-svg.purring .purr-lines{ opacity:1; }
.purr-lines{ opacity:0; transition:opacity .4s; }

/* 部位点击：热区画在 #cat-svg 内部，根部 pointer-events:none 让空白处穿透，
   热区自身恢复 auto，才能既跟着猫走又不挡住身后家具。 */
.touch-zone{ fill:rgba(255,255,255,0); pointer-events:auto; cursor:pointer; transition:fill .18s; }
.touch-zone:hover{ fill:rgba(255,210,120,.28); }

/* 手 */
#hand-svg{ position:absolute; width:150px; pointer-events:none; overflow:visible; z-index:6; opacity:0; transition:opacity .25s; }
#hand-svg.show{ opacity:1; }
#hand-svg.patting svg{ animation:pat .5s ease-in-out infinite; }
@keyframes pat{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(14px) rotate(-6deg);} }
#hand-svg.rubbing svg{ animation:rub .6s ease-in-out infinite; }
@keyframes rub{ 0%,100%{ transform:translateX(0) rotate(-8deg);} 50%{ transform:translateX(16px) rotate(-8deg);} }

/* 气泡 */
.cat-bubble{
  position:absolute; z-index:7; padding:8px 16px; border-radius:16px; background:#fff; border:2px solid #f0c48a;
  font-size:15px; color:#8a5a30; box-shadow:var(--shadow); white-space:nowrap; transform:translate(-50%,-100%);
}
.cat-bubble::after{ content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#f0c48a; border-bottom:none; }

/* 鱼竿 */
#rod-toy{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.rod-line{ position:absolute; width:2px; height:120px; background:#8a5a30; transform-origin:top; }
.rod-fish{ position:absolute; font-size:34px; transform:translate(-50%,-50%); }

/* ---------- 右侧面板 ---------- */
#side-panel{
  width:300px; background:#fff8ec; border-left:3px solid #f0d6ae; padding:14px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;
}
.panel-top{ display:flex; gap:8px; align-items:center; }
.panel-top span{ font-size:13px; padding:5px 12px; border-radius:999px; background:#ffe3bd; color:#8a5a30; }
#stage-badge{ background:#f7b1c1; color:#8a3040; }
.affinity-box{ background:#fff; border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.affinity-title{ font-size:15px; color:#8a5a30; }
.affinity-bar{ position:relative; height:20px; border-radius:999px; background:#f3e2c8; margin-top:8px; overflow:visible; }
#aff-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#f7b267,#ef6f8b); transition:width .5s; }
#aff-heart{ position:absolute; right:-6px; top:50%; transform:translateY(-50%); font-size:22px; }
.affinity-stage{ font-size:12px; color:#b07c42; margin-top:10px; line-height:1.5; }
.stats-box{ display:flex; flex-direction:column; gap:6px; background:#fff; border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.stat-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.stat-row .sname{ width:44px; color:#a06a35; }
.stat-row .sbar{ flex:1; height:10px; border-radius:999px; background:#f3e2c8; overflow:hidden; }
.stat-row .sfill{ height:100%; border-radius:999px; transition:width .4s; }
.stat-row .sval{ width:30px; text-align:right; color:#a06a35; }
/* flex-shrink:0：面板 overflow 滚动时不要把这个提示框压扁（min-height 会覆盖自动最小高度） */
.task-hint{ font-size:13px; line-height:1.7; color:#c96f2a; background:#fff3e0; border-radius:12px; padding:10px 12px; min-height:20px; overflow-wrap:anywhere; white-space:normal; flex-shrink:0; }
.task-hint:empty{ display:none; }
.actions-box{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.act-btn{
  position:relative; border:none; border-radius:14px; padding:10px 6px; font-size:14px; color:#6b4a2f;
  background:#fff; box-shadow:0 3px 0 #ecd3ac; display:flex; flex-direction:column; align-items:center; gap:3px; transition:all .12s;
}
.act-btn .ic{ font-size:22px; }
.act-btn:hover{ transform:translateY(-2px); }
.act-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #ecd3ac; }
.act-btn.locked{ opacity:.45; filter:grayscale(.7); }
.act-btn .lock{ font-size:11px; color:#b07c42; }
.act-btn .bang{ position:absolute; top:-6px; right:-4px; font-size:16px; animation:pulse2 1s infinite; }
@keyframes pulse2{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }
.act-btn.done-today{ opacity:.55; }
.panel-bottom{ display:flex; gap:8px; }
.panel-bottom .mid-btn{ flex:1; font-size:13px; padding:10px 4px; }

/* ---------- 对话框 & 飘字 ---------- */
#dialog-box{
  position:absolute; left:24px; bottom:24px; z-index:8; max-width:430px; padding:14px 20px;
  pointer-events:none; /* 只是旁白文字，别挡住猫的抚摸热区 */
  background:rgba(255,250,240,.96); border:2px solid #f0c48a; border-radius:16px; font-size:15px; line-height:1.8;
  color:#6b4a2f; box-shadow:var(--shadow);
}
#float-layer{ position:absolute; inset:0; pointer-events:none; z-index:9; }
.float-pt{ position:absolute; font-size:20px; font-weight:bold; color:#ef6f8b; animation:floatup 1.4s ease-out forwards; text-shadow:0 2px 0 #fff; }
@keyframes floatup{ 0%{ opacity:0; transform:translateY(6px);} 20%{ opacity:1;} 100%{ opacity:0; transform:translateY(-46px);} }

/* ---------- 覆盖层通用 ---------- */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(80,50,20,.45); display:flex; align-items:center; justify-content:center; }

/* 小游戏 */
#mg-box{
  width:min(620px,94vw); background:#fffaf1; border-radius:24px; box-shadow:0 20px 60px rgba(90,50,10,.35);
  padding:22px 26px; display:flex; flex-direction:column; gap:12px;
}
#mg-head h3{ font-size:22px; color:#8a4b1f; letter-spacing:2px; }
#mg-desc{ font-size:14px; color:#b07c42; margin-top:4px; line-height:1.7; }
#mg-stage{ position:relative; height:330px; border-radius:16px; background:#ffeed6; overflow:hidden; }
#mg-result{ min-height:26px; font-size:15px; color:#c96f2a; text-align:center; line-height:1.6; }
#mg-foot{ display:flex; justify-content:flex-end; gap:10px; }

/* 小游戏内部元件 */
.mg-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.kibble{ position:absolute; width:26px; height:26px; border-radius:50%; background:#8a5a30; box-shadow:inset -3px -4px 0 rgba(0,0,0,.25); cursor:pointer; transition:all .4s; }
.mg-bowl{ position:absolute; left:50%; top:58%; transform:translateX(-50%); width:150px; height:66px; background:#e86a5e; border-radius:12px 12px 60px 60px; box-shadow:inset 0 -10px 0 #c94f44; }
.mg-bowl::before{ content:""; position:absolute; left:8px; right:8px; top:6px; height:16px; border-radius:50%; background:#a03d34; }
/* 碗身前壁：与碗同形，只保留碗口前沿以下的部分，压在猫粮之上，
   让落进碗里的粮被碗的前缘挡住下半截（粮在碗内，而不是浮在碗上） */
.mg-bowl-front{
  position:absolute; inset:0; z-index:3; border-radius:inherit;
  background:#e86a5e; box-shadow:inset 0 -10px 0 #c94f44;
  clip-path:inset(21px 0 0 0); -webkit-clip-path:inset(21px 0 0 0);
  pointer-events:none;
}
.mg-bowl .kibble{ z-index:2; }
/* 喂粮限时条：贴在舞台上沿，左侧读数 + 右侧进度条（绿→橙→红） */
.mg-timer{ position:absolute; left:16px; right:16px; top:11px; height:20px; z-index:6;
  display:flex; align-items:center; gap:10px; pointer-events:none; }
.mg-timer-txt{ font-size:14px; font-weight:700; color:#a06a35; min-width:56px;
  font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.mg-timer-bar{ flex:1; height:8px; border-radius:999px; background:rgba(160,106,53,.16); overflow:hidden; }
.mg-timer-bar i{ display:block; height:100%; width:100%; border-radius:999px; background:#7bc47f; transition:width .1s linear, background .2s; }
.gauge{ position:relative; width:56px; height:220px; border-radius:16px; background:#f3e2c8; overflow:hidden; }
.gauge .gfill{ position:absolute; left:0; right:0; bottom:0; height:0%; background:#6fb2e0; transition:none; }
.gauge .gzone{ position:absolute; left:0; right:0; box-sizing:border-box; background:rgba(123,196,127,.55); border-top:1.5px dashed #4f9b55; border-bottom:1.5px dashed #4f9b55; }
.hold-btn{ font-size:17px; padding:12px 34px; border:none; border-radius:999px; background:#6fb2e0; color:#fff; box-shadow:0 5px 0 #4a8cb5; }
.hold-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #4a8cb5; }
/* 剪指甲的按钮放在 style="pointer-events:none" 的层里，而 pointer-events 是继承属性，
   按钮不自己恢复 auto 就整层穿透（按钮看得见、按不动，且不报错）。只修这一处。 */
.doclip{ pointer-events:auto; touch-action:manipulation; }
.doclip.busy{ opacity:.72; }
.doclip:disabled{ background:#cdd8e0; box-shadow:0 5px 0 #aebac2; cursor:default; transform:none; }
/* 铲猫砂：9×9 九色棋盘（尺寸由脚本按舞台算出，这里只负责排布与质感） */
#mg-stage.lit-stage{ height:400px; }
.litter-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px; }
.litter-hud{ font-size:14px; color:#a06a35; flex:0 0 auto; letter-spacing:.2px; }
.litter-hud b{ color:#7a4a1e; font-size:15px; }
.litter-grid{ display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); gap:3px; flex:0 0 auto; }
.litter-grid.locked{ pointer-events:none; }
.lcell{ position:relative; border-radius:7px; display:flex; align-items:center; justify-content:center; line-height:1; font-size:15px;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  box-shadow:inset 0 -3px 0 rgba(90,58,26,.14), inset 0 0 0 1px rgba(255,255,255,.30);
  transition:transform .12s ease, filter .25s ease, box-shadow .25s ease; }
.lcell:active{ transform:scale(.9); }
.lcell.clean{ filter:saturate(.22) brightness(1.12); box-shadow:inset 0 3px 6px rgba(120,90,50,.12); cursor:default; color:#b3906a; font-size:11px; }
.lcell.dug{ filter:saturate(.30) brightness(1.04); box-shadow:inset 0 3px 6px rgba(120,90,50,.20); cursor:default; color:#9c7a52; font-size:11px; }
.lcell.hit{ z-index:2; font-size:16px; box-shadow:0 0 0 2px #fff, 0 3px 8px rgba(120,80,30,.35); animation:lpop .34s ease both; cursor:default; }
@keyframes lpop{ 0%{ transform:scale(.55); } 60%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.mg-brushcat{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.brush-tool{ position:absolute; width:64px; height:30px; background:#c98d4b; border-radius:14px; cursor:grab; box-shadow:0 4px 0 #a5713a; }
.brush-tool::after{ content:""; position:absolute; left:6px; right:6px; bottom:-9px; height:10px; background:repeating-linear-gradient(90deg,#f0d9b0 0 4px,#d9bd8a 4px 8px); border-radius:4px; }
/* ---- 梳毛：梳子自由拖动（位置由脚本按「中心点」写入 left/top）---- */
#mg-stage.brush-stage{ touch-action:none; }
.groom-brush{ transform:translate(-50%,-50%); touch-action:none; z-index:3;
  will-change:left,top; transition:box-shadow .15s, filter .15s; }
.groom-brush.grabbing{ cursor:grabbing; box-shadow:0 6px 0 #8d5d2c, 0 8px 18px rgba(120,80,30,.3); filter:brightness(1.04); }
.arrow-hint{ position:absolute; font-size:26px; color:#c96f2a; animation:bob 1s infinite; }
.paw-svg-wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.clip-gauge{ width:300px; height:26px; border-radius:999px; background:#f3e2c8; position:relative; overflow:hidden; transition:box-shadow .18s; }
.clip-gauge .zone{ position:absolute; top:0; bottom:0; background:rgba(123,196,127,.55); border-left:2px dashed #4f9b55; border-right:2px dashed #4f9b55; transition:left .18s ease, width .18s ease; }
.clip-gauge .marker{ position:absolute; top:-2px; bottom:-2px; width:8px; background:#e86a5e; border-radius:4px; }
/* 剪中 / 剪偏：给计分条描个边，别只靠数字变化 */
.clip-gauge.hit{ box-shadow:inset 0 0 0 3px #7bc47f; }
.clip-gauge.miss{ box-shadow:inset 0 0 0 3px #e86a5e; }
/* 4 只全剪完：整条转「已通过」，不再留一小截绿区误导人 */
.clip-gauge.complete{ box-shadow:inset 0 0 0 2px #b9ddb9; }
.clip-gauge.complete .zone{ background:rgba(123,196,127,.28); border-color:transparent; }
.toe,.claw,.quick{ transition:opacity .25s; }
/* 进度徽章放在左上角（与洗澡关的计时徽章同一套观感），
   底边只留计分条，爪子才不会被挤到条上 */
.nail-badge{ position:absolute; left:14px; top:14px; z-index:4; font-size:13px; font-weight:700;
  color:#a06a35; background:#fff0d6; border-radius:999px; padding:5px 12px;
  box-shadow:inset 0 0 0 1.5px #f0d9b4; font-variant-numeric:tabular-nums;
  transition:color .2s,box-shadow .2s; }
.nail-badge.done{ color:#4f9b55; box-shadow:inset 0 0 0 1.5px #b9ddb9; }
.temp-gauge{ width:340px; height:30px; border-radius:999px; background:linear-gradient(90deg,#6fb2e0,#f7d774,#e86a5e); position:relative; }
.temp-gauge .zone{ position:absolute; top:0; bottom:0; background:rgba(255,255,255,.45); border-left:2px solid #fff; border-right:2px solid #fff; }
.temp-gauge .marker{ position:absolute; top:-6px; bottom:-6px; width:10px; background:#5a3a1a; border-radius:5px; }
.progressbar{ width:320px; height:22px; border-radius:999px; background:#f3e2c8; overflow:hidden; }
.progressbar .pf{ height:100%; width:0%; background:linear-gradient(90deg,#7bc47f,#4f9b55); border-radius:999px; }
.cat-sil{ overflow:visible; position:absolute; left:50%; top:52%; height:auto; aspect-ratio:300/280; transform:translate(-50%,-50%); }
.showerhead{ position:absolute; font-size:42px; cursor:grab; transform:translate(-50%,-50%); z-index:3; }
.shower-wet{ position:absolute; border-radius:50%; background:rgba(111,178,224,.35); pointer-events:none; }
.struggle-bar{ width:320px; height:14px; border-radius:999px; background:#f3e2c8; overflow:hidden; }
.struggle-bar .sf{ height:100%; width:0%; background:#e86a5e; }

/* ---- 洗澡（2/2）：绿条判定（星露谷式）---- */
#mg-stage.bath-stage{ touch-action:none; cursor:pointer; }
/* 猫靠左一点，把右侧让给竖轨；高度跟着舞台走，矮屏也不会顶出画面 */
#mg-stage.bath-stage .cat-sil{ width:auto; height:min(222px,66%); left:44%; top:52%; }
.bath-clock{ position:absolute; left:14px; top:12px; z-index:4; font-size:13px; font-weight:700; color:#a06a35;
  background:#fff0d6; border-radius:999px; padding:5px 12px; box-shadow:inset 0 0 0 1.5px #f0d9b4;
  font-variant-numeric:tabular-nums; transition:color .2s,box-shadow .2s; }
.bath-clock.warn{ color:#c94f44; box-shadow:inset 0 0 0 1.5px #f3bdb4; }
.bath-hint{ position:absolute; right:26px; top:14px; font-size:11px; color:#b07c42; white-space:nowrap; }
.bath-track{ position:absolute; right:26px; top:36px; bottom:54px; width:38px; border-radius:14px;
  background:#f3e2c8; box-shadow:inset 0 0 0 2px #e8d0ab, inset 0 6px 12px rgba(160,106,53,.14); }
.bath-zone{ position:absolute; left:3px; right:3px; bottom:40%; height:20%; border-radius:9px;
  background:linear-gradient(180deg,rgba(140,206,144,.92),rgba(97,175,105,.98));
  box-shadow:inset 0 0 0 2px #4f9b55, 0 0 10px rgba(79,155,85,.28); will-change:bottom; }
.bath-zone.hit{ box-shadow:inset 0 0 0 2px #3f8a45, 0 0 16px rgba(79,155,85,.75); }
.bath-ptr{ position:absolute; left:50%; bottom:40%; transform:translateX(-50%); width:26px; height:14px;
  margin-bottom:-7px; border-radius:999px; background:linear-gradient(#fff,#ffe6c0);
  box-shadow:0 2px 6px rgba(150,90,30,.4), inset 0 0 0 2px #e8a45e;
  display:flex; align-items:center; justify-content:center; font-size:9px; line-height:1; color:#c96f2a;
  transition:box-shadow .12s, background .12s; }
.bath-ptr.in{ background:linear-gradient(#fff,#ddf3de);
  box-shadow:0 2px 10px rgba(79,155,85,.5), inset 0 0 0 2px #4f9b55; color:#3f8a45; }
/* 进度条贴在左下，右侧留出竖轨的位置，窄屏也不会互相压 */
.bath-foot{ position:absolute; left:14px; right:88px; bottom:16px; pointer-events:none; }
.bath-foot .progressbar{ width:100%; }
/* ---- 清理耳螨：耳内窥镜 ----
   规则全部锁在 #mg-stage.ear-stage 下面、类名统一 ear- 前缀：
   既不会漏到别的关，也不会被 .spot / .hud / .toast 这类通用名撞到。
   耳镜尺寸由脚本按舞台实际大小算（见 minigames.js 的 layout()），
   所以这里只写“长什么样”，不写死宽高。 */
#mg-stage.ear-stage{
  touch-action:none; cursor:none;
  background:radial-gradient(circle at 50% 50%, #fff3dc 0%, #ffeed6 55%, #ffe6c6 100%);
}
/* 桌面上的绒布质感：压在耳镜下面，不干扰视野 */
#mg-stage.ear-stage::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(32deg, rgba(255,255,255,.22) 0 2px, transparent 2px 6px);
  mix-blend-mode:soft-light;
}
/* 耳镜：圆形裁切用 clip-path（overflow+圆角 在污垢带 will-change 的合成层上会偶发丢圆角、露出方角） */
#mg-stage.ear-stage .ear-scope{
  position:absolute; left:50%; top:calc(50% - 10px); transform:translate(-50%,-50%); z-index:2;
  border-radius:50%; overflow:hidden; isolation:isolate;
  clip-path:circle(50% at 50% 50%);
  background:#f2bccb;
}
/* 镜筒描边：放在 scope 外面，否则会被 clip-path 一起裁掉 */
#mg-stage.ear-stage .ear-bevel{
  position:absolute; left:50%; top:calc(50% - 10px); transform:translate(-50%,-50%); z-index:1;
  border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 5px #f0d3ae, 0 0 0 9px #fff6e4, 0 14px 30px rgba(120,70,30,.26);
}
#mg-stage.ear-stage .ear-scope.shaking{ animation:earShake .1s linear 11; }
@keyframes earShake{
  0%{ transform:translate(-50%,-50%) translate(0,0) rotate(0deg); }
  25%{ transform:translate(-50%,-50%) translate(-4px,2px) rotate(-1.1deg); }
  75%{ transform:translate(-50%,-50%) translate(4px,-2px) rotate(1.1deg); }
}
/* 耳道壁：外圈浅、里圈深，加一圈同心褶皱 */
#mg-stage.ear-stage .ear-wall{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.6), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, #dfa0b4 0%, #f0b4c5 24%, #f9d2dd 50%, #fde4ec 76%, #fff1f6 100%);
}
#mg-stage.ear-stage .ear-wall::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(196,118,146,0) 0 20px, rgba(196,118,146,.09) 20px 25px, rgba(196,118,146,0) 25px 44px);
  opacity:.9;
}
/* 深处隧道 */
#mg-stage.ear-stage .ear-deep{
  position:absolute; left:50%; top:50%; width:66%; height:66%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 48%,
    rgba(116,46,44,.55) 0%, rgba(126,52,52,.44) 20%, rgba(150,70,74,.24) 38%,
    rgba(176,100,106,.09) 54%, rgba(176,106,112,0) 68%);
}
/* 耳膜 */
#mg-stage.ear-stage .ear-drum{
  position:absolute; left:50%; top:50%; width:21%; height:18%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 46% 38%, rgba(255,232,236,.95), rgba(238,166,184,.94) 40%,
    rgba(190,108,132,.9) 76%, rgba(158,80,104,.82) 100%);
  box-shadow:0 0 0 1.5px rgba(255,226,234,.45), 0 0 16px rgba(214,120,146,.5), inset 0 -4px 10px rgba(126,54,74,.45);
  opacity:.95;
}
#mg-stage.ear-stage .ear-drum::after{
  content:""; position:absolute; left:26%; top:22%; width:26%; height:18%;
  border-radius:50%; background:rgba(255,255,255,.5); filter:blur(2px);
}
#mg-stage.ear-stage .ear-dlabel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:9.5px; letter-spacing:1px; color:rgba(255,240,244,.9);
  text-shadow:0 1px 2px rgba(120,40,60,.5); white-space:nowrap; pointer-events:none;
}
/* 危险区虚线：直径由脚本按镜面尺寸算 */
#mg-stage.ear-stage .ear-dring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px dashed rgba(255,168,186,.85);
  opacity:.72; transition:opacity .2s, border-color .2s, box-shadow .2s; pointer-events:none;
}
#mg-stage.ear-stage .ear-scope.danger .ear-dring{
  opacity:1; border-color:rgba(255,110,134,.95); box-shadow:0 0 26px rgba(255,86,110,.45) inset;
}
/* 污垢：位置每帧由脚本写 left/top，尺寸按镜面半径缩放 */
#mg-stage.ear-stage .ear-spots{ position:absolute; inset:0; border-radius:50%; }
#mg-stage.ear-stage .ear-spot{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:30px; height:30px;
  pointer-events:none; will-change:left,top,opacity; transition:opacity .12s linear;
}
#mg-stage.ear-stage .ear-blob{
  position:absolute; inset:0; border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:
    radial-gradient(circle at 30% 34%, rgba(58,28,8,.5) 0 11%, rgba(58,28,8,0) 12%),
    radial-gradient(circle at 63% 57%, rgba(58,28,8,.42) 0 9%, rgba(58,28,8,0) 10%),
    radial-gradient(circle at 45% 76%, rgba(58,28,8,.36) 0 7%, rgba(58,28,8,0) 8%),
    radial-gradient(circle at 34% 28%, #d29a68, #9c6436 58%, #77471f 100%);
  box-shadow:inset -3px -4px 7px rgba(62,34,12,.5), 0 2px 6px rgba(90,50,25,.4);
  transition:transform .12s, filter .12s;
}
#mg-stage.ear-stage .ear-mite{ position:absolute; inset:0; opacity:0; transition:opacity .2s; }
#mg-stage.ear-stage .ear-mite i{
  position:absolute; width:20%; height:13%; border-radius:50%; background:rgba(48,24,6,.9);
}
#mg-stage.ear-stage .ear-mite i:nth-child(1){ left:8%; top:18%; }
#mg-stage.ear-stage .ear-mite i:nth-child(2){ left:70%; top:66%; }
#mg-stage.ear-stage .ear-spot.ear-dash .ear-mite{ opacity:1; }
#mg-stage.ear-stage .ear-spot.ear-dash .ear-mite i{ animation:earWob .34s ease-in-out infinite; }
#mg-stage.ear-stage .ear-spot.ear-dash .ear-mite i:nth-child(2){ animation-delay:.17s; }
@keyframes earWob{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(1.4px,-1.2px); } }
/* 擦除进度环 */
#mg-stage.ear-stage .ear-ring{
  position:absolute; inset:-9px; border-radius:50%; opacity:0; transition:opacity .12s;
  -webkit-mask:radial-gradient(circle, transparent 71%, #000 73%);
  mask:radial-gradient(circle, transparent 71%, #000 73%);
}
#mg-stage.ear-stage .ear-spot.ear-busy .ear-ring{ opacity:1; }
#mg-stage.ear-stage .ear-spot.ear-done{
  transition:transform .3s ease-in, opacity .3s;
  transform:translate(-50%,-50%) scale(.15); opacity:0 !important;
}
/* 光晕遮罩：只有棉签附近看得清。自身也是圆的 —— 外层圆形裁切万一丢一帧也不会露方角 */
#mg-stage.ear-stage .ear-fog{
  position:absolute; inset:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle var(--lr) at var(--fx,50%) var(--fy,50%),
    rgba(62,28,18,0) 0%, rgba(62,28,18,.03) 30%, rgba(58,26,18,.18) 56%,
    rgba(52,22,16,.33) 78%, rgba(48,20,14,.45) 100%);
}
/* 镜筒内壁的暗角 */
#mg-stage.ear-stage .ear-vignette{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(96,34,54,.34);
}
/* 棉签：棉头就是指针位置，杆子往下伸 */
#mg-stage.ear-stage .ear-swab{
  position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; z-index:6; pointer-events:none;
  background:radial-gradient(circle at 36% 32%, #fff, #f2e6d2 62%, #dcc9ac 100%);
  box-shadow:0 3px 9px rgba(70,34,16,.4), inset -2px -3px 7px rgba(150,118,86,.35);
}
#mg-stage.ear-stage .ear-swab::after{
  content:""; position:absolute; left:50%; top:60%; width:11px; height:180px; z-index:-1;
  border-radius:6px; background:linear-gradient(90deg,#c9a877,#f7e6c8 44%,#c6a271);
  transform:translateX(-50%) rotate(14deg); transform-origin:top center;
  box-shadow:1px 4px 8px rgba(80,40,20,.24);
}
#mg-stage.ear-stage .ear-swab.ear-grab{ box-shadow:0 0 0 5px rgba(123,196,127,.35), 0 3px 9px rgba(70,34,16,.4); }
#mg-stage.ear-stage .ear-swab.ear-clean{ animation:earScrub .16s linear infinite; }
@keyframes earScrub{ 0%,100%{ transform:translate(0,0) rotate(-6deg); } 50%{ transform:translate(1px,1px) rotate(6deg); } }
/* 擦掉的碎屑 */
#mg-stage.ear-stage .ear-puff{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:rgba(150,100,60,.7); pointer-events:none; z-index:7;
  animation:earPuffUp .62s ease-out forwards;
}
@keyframes earPuffUp{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.9; }
  100%{ transform:translate(calc(-50% + var(--dx)),calc(-50% - 26px)) scale(.2); opacity:0; }
}
/* HUD：左上计数、右上倒计时 */
#mg-stage.ear-stage .ear-hud{
  position:absolute; left:0; right:0; top:0; padding:10px 12px; z-index:8;
  display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none;
}
#mg-stage.ear-stage .ear-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,250,241,.9); border-radius:999px; padding:6px 12px;
  font-size:13px; color:#8a4b1f; letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(120,70,30,.18), inset 0 0 0 1px rgba(240,211,174,.9);
}
#mg-stage.ear-stage .ear-pill small{ font-size:11px; opacity:.7; }
#mg-stage.ear-stage .ear-pill b{ font-variant-numeric:tabular-nums; font-size:15px; }
#mg-stage.ear-stage .ear-pill.ear-warn{ color:#c9432f; background:rgba(255,235,230,.95); }
#mg-stage.ear-stage .ear-pill.ear-warn b{ animation:earTick .5s ease-in-out infinite; }
@keyframes earTick{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
#mg-stage.ear-stage .ear-dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(123,196,127,.22);
}
/* 紧张条：贴在舞台底部、耳镜下方那条空档里，不压住耳垢 */
#mg-stage.ear-stage .ear-stress{
  position:absolute; left:12%; right:12%; bottom:8px; height:18px; z-index:8;
  display:flex; align-items:center; gap:9px; pointer-events:none;
  opacity:0; transition:opacity .25s;
}
#mg-stage.ear-stage .ear-slabel{ font-size:11.5px; color:#a06a35; white-space:nowrap; }
#mg-stage.ear-stage .ear-sbar{
  flex:1; height:7px; border-radius:999px; background:rgba(160,106,53,.14);
  overflow:hidden; box-shadow:inset 0 0 0 1px rgba(240,211,174,.8);
}
#mg-stage.ear-stage .ear-sbar i{
  display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#f7d774,#f0b23e);
  transition:width .08s linear, background .2s;
}
#mg-stage.ear-stage .ear-stress.ear-hot .ear-sbar i{ background:linear-gradient(90deg,#f0b23e,#e86a5e); }
#mg-stage.ear-stage .ear-stress.ear-hot .ear-slabel{ color:#c9432f; }
/* 浮层提示（甩头、开局教学）：不动下面的排版，弹窗高度不会跟着跳 */
#mg-stage.ear-stage .ear-toast{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92); z-index:9;
  background:rgba(138,75,31,.94); color:#fff8ec; font-size:13.5px; line-height:1.7;
  padding:12px 18px; border-radius:14px; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; max-width:82%; box-shadow:0 8px 22px rgba(80,40,10,.3);
}
#mg-stage.ear-stage .ear-toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* 结算里那行小字在 #mg-result 里，不在舞台内，所以单独给作用域 */
#mg-result .ear-sub{ display:block; font-size:12px; color:#b07c42; margin-top:3px; }
/* ---- 刷牙：牙弓 + 底部进度（进度条与洗澡关同一套视觉）---- */
#mg-stage.teeth-stage{ touch-action:none; cursor:grab; }
.mouth-wrap{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:min(400px,92%); }
.mouth-wrap svg{ display:block; width:100%; height:auto; }
.mouth-wrap.shake{ animation:tshake .32s ease-in-out 2; }
@keyframes tshake{
  0%,100%{ transform:translate(-50%,-50%) rotate(0deg); }
  25%{ transform:translate(-50%,-50%) rotate(-2.4deg) translateX(-4px); }
  75%{ transform:translate(-50%,-50%) rotate(2.4deg) translateX(4px); }
}
/* 牙刷和梳子一样按「中心点」定位（脚本写 left/top = 中心），自由拖动不歪 */
.tooth-brush{ background:#6fb2e0; box-shadow:0 4px 0 #4a8cb5; touch-action:none;
  transform:translate(-50%,-50%); z-index:3; will-change:left,top;
  transition:box-shadow .15s, filter .15s; }
.tooth-brush.grabbing{ cursor:grabbing; box-shadow:0 6px 0 #4a8cb5, 0 8px 18px rgba(60,110,150,.3); filter:brightness(1.05); }
.mouth-foot{ position:absolute; left:14px; right:14px; bottom:12px; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:none; }
.mouth-foot .progressbar{ flex:0 1 340px; width:auto; height:16px; }
.mouth-foot .pf{ background:linear-gradient(90deg,#9fd6ee,#5aa7d6); }
.mouth-foot .tinfo{ flex:0 0 auto; font-size:13px; color:#a06a35; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:420px){
  .mouth-foot{ left:10px; right:10px; gap:8px; }
  .mouth-foot .tinfo{ font-size:11.5px; }
}
.stain{ position:absolute; border-radius:50%; background:rgba(140,160,60,.65); cursor:pointer; }
.rag{ position:absolute; width:56px; height:40px; background:#f7b1c1; border-radius:10px; cursor:grab; transform:translate(-50%,-50%); z-index:4; box-shadow:0 3px 0 #d88ba0; }
.drop-target{ position:absolute; border-radius:50%; border:3px dashed rgba(255,255,255,.0); display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.drop-target.hot{ border-color:#fff; background:rgba(255,255,255,.2); }
.pipette{ position:absolute; font-size:40px; cursor:grab; transform:translate(-50%,-50%); z-index:4; }
.choice-row{ display:flex; gap:14px; }
.choice-card{ width:130px; padding:16px 10px; background:#fff; border-radius:16px; box-shadow:var(--shadow); text-align:center; cursor:pointer; font-size:14px; border:3px solid transparent; }
.choice-card:hover{ border-color:#f5a75c; transform:translateY(-3px); }
.choice-card .big{ font-size:40px; display:block; margin-bottom:8px; }
.mg-cat-mini{ font-size:74px; }
.mg-float-emoji{ position:absolute; font-size:30px; pointer-events:none; animation:floatup 1s ease-out forwards; }

/* ---------- 档案 ---------- */
#profile-card{ position:relative; width:min(520px,92vw); max-height:88vh; overflow-y:auto; background:#fffaf1; border-radius:24px; box-shadow:0 20px 60px rgba(90,50,10,.35); padding:30px 34px; }
#profile-body h2{ text-align:center; color:#8a4b1f; letter-spacing:3px; font-size:24px; }
.pro-row{ display:flex; justify-content:space-between; padding:7px 2px; font-size:15px; color:#6b4a2f; border-bottom:1px dashed #ecd3ac; }
.pro-log{ margin-top:14px; }
.pro-log h4{ color:#c96f2a; font-size:15px; margin-bottom:8px; }
.pro-log li{ font-size:13px; color:#a06a35; line-height:1.9; list-style:none; }
.pro-log li::before{ content:"🐾 "; }

/* ---------- 结局 ---------- */
#ending-card{ width:min(560px,92vw); background:linear-gradient(165deg,#fffdf7,#ffefd6); border-radius:26px; box-shadow:0 24px 70px rgba(90,50,10,.4); padding:36px 40px; text-align:center; }
#ending-body h2{ font-size:30px; color:#c96f2a; letter-spacing:4px; margin-bottom:14px; }
#ending-body p{ font-size:16px; line-height:2.1; color:#6b4a2f; }
#ending-body .seal{ display:inline-block; margin-top:18px; padding:10px 26px; border:3px solid rgba(230,90,80,.8); color:rgba(230,90,80,.9); border-radius:12px; transform:rotate(-4deg); font-size:15px; letter-spacing:2px; }
#ending-body .big-emoji{ font-size:64px; }

/* ---------- 夜晚 ---------- */
#overlay-night{ background:linear-gradient(180deg,#2b3242,#3a4358); flex-direction:column; }
.night-inner{ text-align:center; color:#ffe9c9; }
.night-moon{ font-size:70px; animation:bob 3s ease-in-out infinite; }
#night-text{ margin-top:22px; font-size:19px; line-height:2.2; letter-spacing:1px; }

/* 滚动条 */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:#e8c79c; border-radius:999px; }

/* ================= 手机端适配 ================= */
@media (max-width:768px){
  :root{ --cat-w:min(50vw,240px); }
  .game-layout{ flex-direction:column; height:100vh; height:100dvh; }
  /* 场景吃掉剩余高度：面板缩下来之后，猫的舞台自然变大。
     房间插画是 960:600 的横图，竖屏下上下会留白——把留白续成墙色/地板色，
     看上去就是房间更高、地板更宽，而不是"画贴在中腰"。 */
  #room-wrap{
    flex:1 1 auto; height:auto; min-height:0; isolation:isolate;
    /* 留白续成墙色：插画顶行的墙色就是 #fff1d6，接上去看不出边 */
    background:#fff1d6;
  }
  /* 插画下缘以下的留白续成地板：颜色一样，再补几条地板缝，看起来是"地板更宽" */
  #room-wrap::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:calc(50% - 31.25vw + 1px); min-height:0;
    background:#d99a55;
    background-image:repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0 22.5px, rgba(201,141,75,.34) 22.5px 24px),
      linear-gradient(to bottom, #d99a55, #c98d4b);
    background-position:0 6px, 0 0;
    z-index:-1; pointer-events:none;
  }
  /* 底部任务栏：只占内容高度，紧凑、低视觉权重 */
  #side-panel{
    width:100%; flex:0 0 auto; border-left:none; border-top:2px solid #f0d6ae;
    padding:7px 9px calc(7px + env(safe-area-inset-bottom)); gap:6px;
    position:relative; overflow-x:hidden; overflow-y:auto;
    /* 极矮的屏幕（横屏/老机型）里面板自己滚，不把场景挤没 */
    max-height:60dvh;
  }
  .panel-top{ position:absolute; top:7px; right:9px; gap:5px; z-index:2; }
  .panel-top span{ font-size:10.5px; padding:3px 8px; }
  .affinity-box{ padding:7px 10px; border-radius:13px; }
  .affinity-title{ font-size:12px; }
  .affinity-bar{ height:12px; margin-top:5px; }
  #aff-heart{ font-size:15px; right:-4px; }
  .affinity-stage{
    margin-top:4px; font-size:11px; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* 五项状态压成一排 HUD：图标+数值一行，下面是细条 */
  .stats-box{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px;
    padding:6px 8px; border-radius:13px;
  }
  .stat-row{
    display:grid; grid-template-columns:auto 1fr; grid-template-areas:"n v" "b b";
    column-gap:3px; row-gap:3px; align-items:center; font-size:10px;
  }
  .stat-row .sname{ grid-area:n; width:auto; min-width:0; font-size:10.5px; white-space:nowrap; overflow:hidden; }
  .stat-row .sval{ grid-area:v; width:auto; justify-self:start; font-size:10px; line-height:1; opacity:.8; }
  .stat-row .sbar{ grid-area:b; height:5px; }
  .task-hint{ font-size:11.5px; line-height:1.45; padding:6px 9px; border-radius:10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .task-hint:empty{ display:none; }
  /* 行动按钮：手机上改成两排横向滑动的工具条，17 个按钮不再撑高整块面板 */
  .actions-box{
    display:grid; grid-auto-flow:column;
    grid-template-columns:none; grid-template-rows:repeat(2,auto);
    /* 一屏 4 个多一点：第 5 个露出小半张，提示还能往左滑 */
    grid-auto-columns:calc((100% - 18px) / 4.5); gap:5px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; padding:1px 0 3px; scrollbar-width:none;
  }
  .actions-box::-webkit-scrollbar{ display:none; }
  .act-btn{
    padding:4px 2px; font-size:10px; border-radius:9px; min-width:0; gap:1px;
    scroll-snap-align:start; box-shadow:0 2px 0 #ecd3ac; line-height:1.15;
  }
  .act-btn .ic{ font-size:15px; }
  /* 解锁条件文字在窄屏太占地方，收成图标角的🔒 */
  .act-btn .lock{ display:none; }
  .act-btn.locked::after{ content:'🔒'; position:absolute; top:0px; right:1px; font-size:8px; opacity:.85; }
  .panel-bottom .mid-btn{ font-size:11.5px; padding:6px 4px; border-radius:11px; }
  /* 猫钉在插画的"地面"上（不是钉在容器底部）：容器再高也不会浮到空白带里，
     对话框只在插画下缘的留白带活动，永远压不到猫 */
  #cat-svg{ top:auto !important; bottom:calc(max(0px, (100% - 62.5vw) / 2) + 64px); }
  /* 提示语：矮一点的半透明气泡，不再横向铺满整块地板 */
  #dialog-box{
    left:9px; right:9px; bottom:7px; max-width:none; font-size:13px; line-height:1.6;
    padding:7px 12px; border-radius:12px; background:rgba(255,250,240,.93);
    border-width:1.5px; box-shadow:0 4px 12px rgba(139,90,48,.16);
  }
  /* 标题页 */
  .game-title{ font-size:clamp(34px,10vw,64px); letter-spacing:6px; }
  .game-sub{ font-size:15px; margin-top:8px; }
  .game-tag{ font-size:12px; margin-top:10px; padding:0 20px; text-align:center; line-height:1.7; width:100%; }
  .title-cats{ font-size:30px; letter-spacing:10px; }
  #btn-start{ margin-top:30px; }
  .big-btn{ font-size:20px; letter-spacing:4px; padding:13px 40px; }
  .title-hint{ font-size:11px; padding:0 14px; text-align:center; }
  /* 剧情页 */
  .story-text{ width:92vw; font-size:15px; padding:13px 16px; min-height:70px; }
  .story-next{ right:4%; bottom:1.6%; font-size:14px; padding:7px 16px; }
  .story-cat{ width:170px; }
  .story-trashcan{ font-size:52px; }
  .story-box{ font-size:62px; }
  /* 收养流程 */
  .adopt-card{ padding:18px 16px; width:94vw; }
  .adopt-head h2{ font-size:20px; }
  .adopt-body{ font-size:14px; line-height:1.9; min-height:200px; }
  .adopt-foot .mid-btn{ font-size:13px; padding:8px 14px; }
  /* 小游戏 */
  #mg-box{ width:94vw; padding:14px 14px; gap:8px; border-radius:18px; }
  #mg-head h3{ font-size:18px; }
  #mg-desc{ font-size:12px; }
  #mg-stage{ height:min(50vh,330px); }
  #mg-stage.lit-stage{ height:min(52vh,360px); }
  #mg-result{ font-size:13px; }
  /* 耳螨：窄屏把顶部胶囊收小、留出耳镜上缘，紧张条贴边 */
  #mg-stage.ear-stage .ear-hud{ padding:8px 9px; }
  #mg-stage.ear-stage .ear-pill{ font-size:11px; padding:4px 9px; gap:5px; }
  #mg-stage.ear-stage .ear-pill b{ font-size:13px; }
  #mg-stage.ear-stage .ear-pill small{ font-size:10px; }
  #mg-stage.ear-stage .ear-stress{ left:6%; right:6%; }
  #mg-stage.ear-stage .ear-slabel{ font-size:10.5px; }
  .progressbar,.struggle-bar{ width:min(300px,70vw); }
  .gauge{ height:170px; }
  .temp-gauge{ width:min(300px,72vw); }
  /* 洗澡：窄屏把竖轨贴边、进度条缩到它左边，别互相压 */
  .bath-track{ right:10px; width:32px; bottom:50px; }
  .bath-hint{ right:10px; font-size:10px; }
  .bath-foot{ left:10px; right:56px; }
  #mg-stage.bath-stage .cat-sil{ height:min(178px,60%); left:42%; }
  .clip-gauge{ width:min(280px,70vw); }
  /* 剪指甲：爪子在窄屏别超出舞台，徽章收到左上角，和居中按钮各占一块 */
  .pawsvg{ width:min(300px,80vw); height:auto; }
  .nail-badge{ left:10px; top:10px; font-size:12px; padding:4px 10px; }
  .litter-grid{ grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); gap:2px; }
  .litter-hud{ font-size:12px; }
  .litter-hud b{ font-size:13px; }
  .lcell{ border-radius:6px; font-size:13px; }
  .lcell.clean,.lcell.dug{ font-size:10px; }
  .lcell.hit{ font-size:14px; }
  .choice-card{ width:104px; font-size:12px; padding:12px 6px; }
  .choice-card .big{ font-size:30px; }
  .hold-btn{ font-size:15px; padding:10px 26px; }
  /* 档案/结局 */
  #profile-card{ padding:20px 18px; }
  #ending-card{ padding:22px 20px; }
  #ending-body h2{ font-size:22px; }
  #ending-body p{ font-size:14px; }
  .cat-bubble{ font-size:13px; padding:6px 12px; }
  #hand-svg{ width:112px; }
}
/* 极窄屏（320~380）：剪指甲的按钮与徽章同时收一档，保证两者在舞台顶部不重叠 */
@media (max-width:380px){
  .nail-badge{ font-size:11px; padding:3px 8px; }
  .doclip{ font-size:14px; padding:9px 18px; }
}
/* 触屏设备：禁用 hover 高亮残留 */
@media (hover:none){
  .furniture:hover{ filter:none; }
  .furniture:hover .flabel{ opacity:0; }
  .touch-zone:hover{ fill:rgba(255,255,255,0); }
  .choice-card:hover{ transform:none; }
}

/* ================= 手机浏览器（扫码版）适配 =================
   只加「防误触 / 高度 / 刘海」三件事，不动任何玩法尺寸。 */

/* 1. 关掉下拉刷新与橡皮筋：玩到一半手一滑整页重载，是手机端差评第一来源 */
html,body{ overscroll-behavior:none; overscroll-behavior-y:none; }
/* 2. 点按不再闪灰块（全局 user-select:none 已在文件顶部） */
body{ -webkit-tap-highlight-color:transparent; }

/* 3. 高度：dvh 优先，vh 兜底。地址栏收起/展开时不再裁掉底部按钮 */
.game-layout{ height:100vh; height:100dvh; }

/* 4. 刘海与横屏安全区：只让外层留白，内部绝对定位元素坐标不变 */
@supports (padding: env(safe-area-inset-top)){
  .title-bg{ padding-top:env(safe-area-inset-top); }
  .game-layout{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-bottom:env(safe-area-inset-bottom);
  }
}
/* 5. 横屏矮屏：面板不抢高度，场景优先，避免上下两栏互相挤压 */
@media (max-height:430px) and (orientation:landscape){
  #side-panel{ max-height:46dvh; }
  .game-title{ font-size:34px; }
}