/* ── 全局与静室皮肤基础 ─────────────────────────────────── */
:root{
  --bg:#f3e3bf;
  --bg2:#ecd6a8;
  --ink:#46371f;
  --dim:#9c8460;
  --warm:#b5792b;
  --line:rgba(70,55,31,.16);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none !important}

/* ── 门厅 (Hall) ────────────────────────────────────────── */
.hall{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-items:center;padding:24px;overflow-y:auto;transition:opacity .5s ease,visibility .5s ease}
body.in-room .hall{opacity:0;visibility:hidden;pointer-events:none}
.hall-inner{width:min(100%,720px);text-align:center}
.hall-kicker{font-size:12px;letter-spacing:.4em;color:var(--dim);margin:0 0 12px}
.hall-title{font-size:clamp(42px,7vw,72px);font-weight:400;letter-spacing:.3em;margin:0 0 12px;color:var(--ink)}
.hall-sub{font-size:14px;color:var(--dim);letter-spacing:.15em;margin:0 0 48px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:48px}
.door{background:linear-gradient(180deg,#faf4e3,#ecd6a8);border:1px solid var(--line);border-radius:12px;padding:36px 24px;text-align:center;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s;box-shadow:0 10px 30px rgba(120,90,40,.08)}
.door:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(120,90,40,.16);border-color:rgba(181,121,43,.5)}
.door-art{display:block;height:80px;margin-bottom:20px;position:relative}
.door-photo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:112px;height:76px;border-radius:8px;background:url("assets/quiet-room.webp?v=7") 20% 90%/200% auto no-repeat;box-shadow:0 6px 16px rgba(120,90,40,.16)}
.door-dojo .door-paper{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:56px;height:56px;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle,#efe8d6,#dcd2b8)}
.door-name{display:block;font-size:20px;letter-spacing:.3em;margin-bottom:10px;color:var(--ink)}
.door-note{display:block;font-size:12px;color:var(--dim);line-height:1.6;letter-spacing:.08em}
.hall-foot{font-size:13px;color:var(--dim);letter-spacing:.1em}
.hall-stat{color:var(--warm)}
.hall-stat.on{color:var(--ink)}

/* ── 房间容器 (Room) ────────────────────────────────────── */
#room{position:fixed;inset:0;z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility .5s ease}
body:not(.in-hall) #room{opacity:1;visibility:visible;pointer-events:auto}

/* 皮肤切换：静室 (Quiet) vs 道场 (Dojo) */
#room.skin-quiet{
  background:radial-gradient(120% 90% at 50% 8%, rgba(214,160,70,.20), transparent 60%), linear-gradient(180deg,#f8eecf 0%,#f3e3bf 72%);
}
#room.skin-quiet .scene-quiet{display:block}
#room.skin-quiet .scene-dojo{display:none}
#room.skin-quiet .chime-wrap{display:none}

#room.skin-dojo{
  background:radial-gradient(120% 90% at 50% 8%, rgba(180,190,185,.25), transparent 60%), linear-gradient(180deg,#f4f0e8 0%,#efe8d6 72%);
}
#room.skin-dojo .scene-quiet{display:none}
#room.skin-dojo .scene-dojo{display:block}
#room.skin-dojo .chime-wrap{display:block}

/* ── 顶部栏 (Topbar) ────────────────────────────────────── */
.topbar{position:absolute;top:0;left:0;right:0;height:60px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;z-index:20;font-size:13px}
.top-left,.top-right{display:flex;align-items:center;gap:14px}
.sep{color:var(--line)}
.brand{letter-spacing:.4em;font-size:14px;color:var(--ink)}
.link{background:none;border:0;color:var(--dim);padding:4px 0;letter-spacing:.1em;cursor:pointer;transition:color .2s}
.link:hover{color:var(--ink)}

/* ── 静室场景组件 ──────────────────────────────────────── */
.scene{position:absolute;inset:0;pointer-events:none;z-index:1}
/* 静室的屋子是一张离线画好的图（motion-forge 出），不再用 CSS 拼家具 */
.quiet-room{position:absolute;inset:0;background:url("assets/quiet-room.webp?v=7") center bottom/cover no-repeat}
.quiet-veil{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46% 40% at 44% 44%, rgba(246,236,214,.90), rgba(246,236,214,.42) 64%, rgba(246,236,214,0) 100%),
  linear-gradient(180deg, rgba(246,236,214,.72) 0%, rgba(246,236,214,0) 22%)}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(70,55,31,.18);opacity:0;animation:drift linear infinite}
@keyframes drift{0%{opacity:0;transform:translate(0,20px)}18%{opacity:.55}82%{opacity:.35}100%{opacity:0;transform:translate(34px,-90px)}}

/* 道场场景组件 */
.scene-dojo{background:radial-gradient(circle at 50% 30%, rgba(240,235,220,0.8), rgba(215,205,190,0.4));}
.dojo-bg{position:absolute;inset:0;
  background:url('assets/dojo-bg.webp') center/cover no-repeat;
  opacity:.92;}
.dojo-mist{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(240,235,220,.35) 0%, transparent 20%, transparent 80%, rgba(240,235,220,.45) 100%);
  pointer-events:none;}
.verse{position:absolute;left:8%;top:14%;font-size:20px;line-height:2.2;letter-spacing:.6em;color:rgba(70,55,31,.65);writing-mode:vertical-rl;}
.seal{position:absolute;right:8%;top:16%;width:54px;aspect-ratio:1;border:2px solid rgba(160,50,40,.6);color:rgba(160,50,40,.75);display:grid;place-items:center;font-size:22px;border-radius:4px;letter-spacing:.1em;transform:rotate(6deg);box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* 道场呼吸引导：坐下才浮现，跟着吸—停—呼 */
.dojo-breath{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(38vw,300px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(70,55,31,.20);pointer-events:none;
  opacity:0;transition:opacity 1.6s ease;
  display:grid;place-items:center;}
.dojo-breath.on{opacity:.75;animation:dojoBreathe 11s ease-in-out infinite}
.dojo-breath span{font-size:clamp(20px,2.6vw,30px);letter-spacing:.4em;
  color:rgba(70,55,31,.75);opacity:0;transition:opacity .7s}
.dojo-breath.on span{opacity:1}
@keyframes dojoBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(.92)}
  50%{transform:translate(-50%,-50%) scale(1.07)}
}

@media (prefers-reduced-motion:reduce){
  .dojo-breath.on{animation:none}
}

/* 磬的交互件 */
.chime-wrap{position:absolute;right:10%;bottom:18%;z-index:5;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;transition:transform .2s}
.chime-wrap:hover{transform:scale(1.05)}
.chime-hint{margin-top:10px;font-size:12px;color:var(--dim);letter-spacing:.15em;white-space:nowrap}

/* 石磬 */
.chime-frame{position:relative;width:80px;height:100px;display:flex;flex-direction:column;align-items:center}
.stone{position:absolute;top:35px;width:64px;height:18px;border-radius:6px;background:linear-gradient(135deg,#95a5a6,#7f8c8d);box-shadow:0 4px 10px rgba(0,0,0,.2);border:1px solid rgba(50,50,50,.3)}
/* 磬的木架：两柱一梁，缺了这三样就只剩一块石头 */
.chime-frame .beam{position:absolute;top:14px;left:4px;right:4px;height:7px;border-radius:3px;
  background:linear-gradient(180deg,#8a6c48,#6b5236);box-shadow:0 2px 5px rgba(0,0,0,.22)}
.chime-frame .post{position:absolute;top:18px;bottom:16px;width:7px;border-radius:3px;
  background:linear-gradient(90deg,#8a6c48,#6b5236)}
.chime-frame .post.p1{left:6px}
.chime-frame .post.p2{right:6px}
.chime-frame .cord{position:absolute;top:20px;left:50%;width:1.5px;height:16px;
  transform:translateX(-50%);background:rgba(70,55,31,.45)}
.chime-frame .mallet{position:absolute;top:26px;right:-4px;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#a8845c,#7c5f3f);transform:rotate(-24deg);transform-origin:left center}
.chime-frame .chime-foot{position:absolute;bottom:6px;width:22px;height:6px;border-radius:3px;
  background:rgba(90,72,50,.55)}
.chime-frame .chime-foot.c1{left:2px}
.chime-frame .chime-foot.c2{right:2px}
.chime-frame .chime-shadow{position:absolute;bottom:0;left:50%;width:56px;height:10px;
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}


/* 水波纹动画 */
.ripple{position:absolute;border-radius:50%;border:1px solid rgba(181,121,43,.4);pointer-events:none;opacity:0}
.chime-wrap:active .r1{animation:rip .8s ease-out}
.chime-wrap:active .r2{animation:rip .8s .2s ease-out}
@keyframes rip{0%{width:30px;height:30px;left:30px;top:20px;opacity:1}100%{width:120px;height:120px;left:-15px;top:-25px;opacity:0}}

/* ── 主卡片区 (Main Center Card) ────────────────────────── */
.main-card{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:4;text-align:center;width:min(100%,500px);padding:0 20px}
.greeting{margin:0 0 12px;font-size:13px;letter-spacing:.3em;color:var(--dim)}
.nickname{margin:0 0 8px;font-size:clamp(32px,5vw,56px);font-weight:400;letter-spacing:.15em;color:var(--ink);text-shadow:0 2px 20px rgba(120,90,40,.12)}
.stat{margin:0 0 28px;font-size:13px;color:var(--dim);letter-spacing:.1em;min-height:1.5em}

.timer-area{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.sit-btn{position:relative;background:transparent;border:1px solid var(--line);border-radius:999px;padding:14px 42px;color:var(--ink);letter-spacing:.25em;font-size:14px;cursor:pointer;transition:all .3s;overflow:hidden}
.sit-btn:hover{border-color:rgba(181,121,43,.7);background:rgba(181,121,43,.08)}
.sit-btn.sitting{border-color:var(--warm);background:rgba(181,121,43,.15);color:var(--warm)}
.timer{font-size:14px;color:var(--warm);letter-spacing:.2em;min-height:1.2em;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--dim);letter-spacing:.1em;margin:0 0 16px;min-height:1.4em}
.guide-text{font-size:12px;color:var(--dim);line-height:1.8;letter-spacing:.08em;margin-top:10px;max-width:380px;margin-left:auto;margin-right:auto}

/* ── 静室：自己的排版（正常字距、现代一点） ─────────────── */
#room.skin-quiet .main-card{top:45%;width:min(100%,560px)}
#room.skin-quiet .greeting{font-size:12.5px;letter-spacing:.22em;margin-bottom:10px}
#room.skin-quiet .nickname{font-size:clamp(34px,4.2vw,52px);font-weight:500;letter-spacing:.04em;margin-bottom:10px;text-shadow:0 2px 18px rgba(246,236,214,.55)}
#room.skin-quiet .stat{font-size:12.5px;letter-spacing:.04em;margin-bottom:30px}
#room.skin-quiet .sit-btn{background:var(--warm);border-color:transparent;color:#fff8ea;letter-spacing:.14em;font-size:14.5px;box-shadow:0 10px 24px rgba(150,95,40,.28),0 1px 0 rgba(255,255,255,.25) inset}
#room.skin-quiet .sit-btn:hover{background:#a8691f;border-color:transparent;box-shadow:0 14px 30px rgba(150,95,40,.34)}
#room.skin-quiet .sit-btn.sitting{background:rgba(181,121,43,.14);border-color:var(--warm);color:var(--warm);box-shadow:none}
#room.skin-quiet .timer{font-size:26px;font-weight:500;letter-spacing:.08em;color:var(--ink);margin-top:2px}
#room.skin-quiet .hint{font-size:12.5px;letter-spacing:.02em;margin-bottom:14px}
#room.skin-quiet .guide-text{letter-spacing:.02em}

/* 主卡片本身不挡鼠标，只有真正的按钮可点，猫的区域才点得到 */
#room.skin-quiet .main-card{pointer-events:none}
#room.skin-quiet .main-card button,
#room.skin-quiet .main-card a{pointer-events:auto}

/* 猫：点一下它会打呼噜（底图里画着猫，这里只放点击区） */
.cat-hit{position:absolute;left:27%;bottom:26%;transform:translateX(-50%);width:min(30vw,440px);height:min(24vh,230px);z-index:3;cursor:pointer;background:none;border:0;border-radius:50%;padding:0;color:inherit}
.cat-hit:focus-visible{outline:2px solid rgba(176,106,44,.45);outline-offset:6px}
.purr{position:absolute;left:50%;top:0;transform:translate(-50%,6px);font-size:12px;letter-spacing:.12em;color:var(--dim);opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none;white-space:nowrap}
.purr.on{opacity:1;transform:translate(-50%,0)}

/* ── 模态抽屉与面板 (Modals & Mix Panel) ────────────────── */
.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(60,45,25,.4);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.modal{width:min(100%,400px);background:linear-gradient(180deg,#faf4e3,#f3e6c6);border:1px solid var(--line);border-radius:8px;padding:32px;box-shadow:0 25px 70px rgba(120,90,40,.25);position:relative}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-head h2{margin:0;font-size:18px;font-weight:400;letter-spacing:.15em}
.icon-btn{background:none;border:0;font-size:22px;color:var(--dim);cursor:pointer;padding:0;line-height:1}
.icon-btn:hover{color:var(--ink)}
.modal-desc{font-size:12px;color:var(--dim);letter-spacing:.08em;margin:0 0 16px;line-height:1.6}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;color:var(--dim);letter-spacing:.12em;margin-bottom:6px}
.field input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:rgba(70,55,31,.05);color:var(--ink);outline:none;font-size:13px}
.field input:focus{border-color:var(--warm)}
.code-inputs{display:flex;gap:10px}
.btn-sub{background:var(--line);border:0;padding:0 14px;border-radius:4px;color:var(--ink);font-size:12px;cursor:pointer;white-space:nowrap}
.btn-sub:hover{background:rgba(181,121,43,.2)}
.btn-sub:disabled{opacity:.55;cursor:default}
.btn-primary{width:100%;background:var(--warm);border:0;color:#fff;padding:12px;border-radius:4px;letter-spacing:.2em;font-size:13px;cursor:pointer;margin-top:8px;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.6;cursor:default}
.msg{font-size:12px;line-height:1.45;min-height:2.9em;margin-bottom:12px;color:var(--warm)}
.msg.bad{color:#b03030}

/* 账户抽屉面板 */
.account-body{display:flex;flex-direction:column;gap:20px}
.ac-avatar{width:56px;height:56px;border-radius:50%;background:var(--warm);color:#fff;display:grid;place-items:center;font-size:20px;letter-spacing:.1em;margin:0 auto}
.ac-info{text-align:center}
.ac-name{font-size:13px;color:var(--dim);margin-bottom:10px;word-break:break-all}
.ac-stats{display:flex;justify-content:center;gap:32px;font-size:12px;color:var(--dim)}
.ac-stats span{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.btn-danger{width:100%;background:none;border:1px solid rgba(176,48,48,.3);color:#b03030;padding:10px;border-radius:4px;font-size:12px;letter-spacing:.15em;cursor:pointer;transition:background .2s}
.btn-danger:hover{background:rgba(176,48,48,.08)}

/* 混音器 & 计时模式弹出面板 */
.mix-panel{position:absolute;top:64px;right:32px;width:280px;background:linear-gradient(180deg,#faf4e3,#f3e6c6);border:1px solid var(--line);border-radius:8px;padding:18px;z-index:40;box-shadow:0 15px 40px rgba(120,90,40,.2)}
.mix-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.mix-header h3{margin:0;font-size:14px;font-weight:400;letter-spacing:.1em}
.mix-body{display:flex;flex-direction:column;gap:12px}
.mix-row{display:flex;flex-direction:column;gap:4px}
.mix-row label{font-size:11px;color:var(--dim);letter-spacing:.08em}
.mix-row input[type="range"]{width:100%;accent-color:var(--warm)}

.timer-choices{display:flex;flex-direction:column;gap:8px}
.timer-choice-btn{background:none;border:1px solid var(--line);border-radius:4px;padding:10px;text-align:left;font-size:12px;color:var(--ink);letter-spacing:.08em;cursor:pointer;transition:all .2s}
.timer-choice-btn:hover{border-color:var(--warm);background:rgba(181,121,43,.08)}

/* ── 窄屏适配：手机上一列排不下，收成紧凑一行 ─────────────── */
@media (max-width: 720px){
  .topbar{height:auto;padding:10px 14px;flex-wrap:wrap;gap:6px 4px;font-size:11px;line-height:1.5}
  .topbar .top-left,.topbar .top-right{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
  .topbar .sep{opacity:.35}
  .topbar .link{font-size:11px;letter-spacing:.02em;padding:2px 0}

  .verse{left:5%;top:12%;font-size:15px;letter-spacing:.4em;line-height:1.9}
  .seal{right:6%;top:13%;width:40px;font-size:17px}

  /* 磬：挪进屏内，缩小 */
  .chime-wrap{right:6%;bottom:14%;transform:scale(.78);transform-origin:bottom right}
  .chime-wrap:hover{transform:scale(.82)}

  /* 主卡片：往上收一点，给磬留位置 */
  .main-card{top:46%}
  .nickname{font-size:30px;letter-spacing:.06em}
  .greeting{font-size:12px;margin-bottom:10px}
  .sit-btn{padding:12px 34px}
  .hint{font-size:12px}
  /* 呼吸环压到下半页，别和主卡片里的按钮/计时重叠 */
  .dojo-breath{width:min(56vw,210px);top:76%;opacity:.9}
  .dojo-breath.on{opacity:.55}
}

/* 静室在手机上：底图往右挪一点，露出猫；点击区由 JS 按同一位置算 */
@media (max-width: 720px){
  #room.skin-quiet .main-card{top:44%}
  .quiet-room{background-position:22% bottom}
}