:root{
  --paper:#f4efe4;
  --ink:#2f3a3f;
  --ink-soft:#5b6a6e;
  --cinnabar:#c96a4a;
  --moss:#6d8a5f;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;overflow:hidden;background:var(--paper)}

body{
  font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block}

/* 摄像头原始画面不直接展示，只作为识别源 */
#cam{position:fixed;left:-9999px;top:-9999px;width:2px;height:2px;opacity:0}

.screen{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.7),transparent 60%),
    var(--paper);
  transition:opacity .5s ease;
}
.screen.hidden,.hidden{display:none!important}

.brush-title{
  font-size:clamp(2.4rem,9vw,4.2rem);
  letter-spacing:.18em;
  font-weight:700;
  color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}

/* ---------- 加载页 ---------- */
.load-inner{text-align:center;width:min(78vw,420px)}
.load-sub{margin-top:.4rem;letter-spacing:.4em;color:var(--ink-soft);font-size:.85rem}
.bar{
  margin-top:2rem;height:3px;background:rgba(47,58,63,.14);
  border-radius:3px;overflow:hidden;
}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s}
.load-text{margin-top:.9rem;font-size:.8rem;color:var(--ink-soft);letter-spacing:.1em;min-height:1.2em}

/* ---------- 起始页 ---------- */
.gate-inner{text-align:center;width:min(88vw,460px);padding:1rem}
.gate-desc{margin-top:.7rem;color:var(--ink-soft);letter-spacing:.16em;font-size:.95rem}

.gesture-list{list-style:none;margin:1.8rem 0;display:grid;gap:.75rem}
.gesture-list li{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.7rem;
  padding:.55rem .8rem;text-align:left;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(47,58,63,.1);
  border-radius:2px;
}
.gk{
  font-size:.78rem;letter-spacing:.1em;padding:.15rem .45rem;
  border:1px solid var(--ink);color:var(--ink);border-radius:2px;
}
.gk-palm{border-color:var(--cinnabar);color:var(--cinnabar)}
.gk-pinch{border-color:#4a7ba5;color:#4a7ba5}
.gk-sword{border-color:var(--moss);color:var(--moss)}
.gesture-list b{font-size:.95rem;letter-spacing:.14em}
.gesture-list i{font-style:normal;color:var(--ink-soft);font-size:.82rem;text-align:right}

.btn-main,.btn-ghost{
  display:block;width:100%;padding:.85rem;margin-top:.7rem;
  font-family:inherit;font-size:1rem;letter-spacing:.3em;
  cursor:pointer;border-radius:2px;transition:.2s;
}
.btn-main{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn-main:hover{background:#1e2629}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px dashed rgba(47,58,63,.35);font-size:.85rem;letter-spacing:.16em}
.btn-ghost:hover{color:var(--ink);border-style:solid}
.btn-main:disabled{opacity:.45;cursor:progress}

.gate-note{margin-top:1.3rem;font-size:.72rem;line-height:1.8;color:var(--ink-soft);letter-spacing:.06em}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}

.hud-top{
  position:absolute;top:max(.9rem,env(safe-area-inset-top));left:1rem;
  display:grid;gap:.4rem;
}
.stat{display:grid;grid-template-columns:2.2em 1fr;align-items:center;gap:.5rem}
.stat-k{font-size:.7rem;letter-spacing:.1em;color:var(--ink-soft)}
.meter{width:min(28vw,120px);height:2px;background:rgba(47,58,63,.15)}
.meter i{display:block;height:100%;width:0;background:var(--ink);transition:width .3s}
#mLight{background:var(--cinnabar)}
#mWet{background:#4a7ba5}
#mLife{background:var(--moss)}

.hud-hint,.hud-bottom,.gesture-pad{width:max-content;max-width:92vw}

.hud-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(4.6rem,calc(env(safe-area-inset-bottom) + 4.6rem));
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem 1rem;
  background:rgba(244,239,228,.82);
  border:1px solid rgba(47,58,63,.14);
  font-size:.85rem;letter-spacing:.14em;
  transition:.3s;
}
.hud-hint span{white-space:nowrap}
/* 键鼠模式下手势按钮要占掉一条，提示条整体上移避让 */
#hud.pad-on .hud-hint{bottom:max(7.4rem,calc(env(safe-area-inset-bottom) + 7.4rem))}
.hud-hint.hot{border-color:var(--cinnabar);color:var(--cinnabar)}
#hintIcon{font-size:1.1rem}

.cam-wrap{
  position:absolute;right:1rem;top:max(.9rem,env(safe-area-inset-top));
}
.cam-frame{
  width:clamp(72px,17vw,116px);aspect-ratio:4/3;
  background:#fff no-repeat center/cover;
  border:1px solid rgba(47,58,63,.3);
  position:relative;filter:grayscale(.35) contrast(1.05);
}
.cam-tag{
  position:absolute;left:2px;bottom:-1.2em;font-size:.6rem;
  letter-spacing:.14em;color:var(--ink-soft);
}

.hud-bottom{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;gap:.5rem;pointer-events:auto;
}

.gesture-pad{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(3.4rem,calc(env(safe-area-inset-bottom) + 3.4rem));
  display:none;gap:.5rem;pointer-events:auto;
}
.gesture-pad.on{display:flex}
.chip{
  font-family:inherit;font-size:.72rem;letter-spacing:.14em;
  padding:.35rem .8rem;cursor:pointer;white-space:nowrap;
  background:rgba(244,239,228,.85);color:var(--ink-soft);
  border:1px solid rgba(47,58,63,.2);border-radius:2px;
}
.chip.on{color:var(--ink);border-color:var(--ink)}

/* ---------- 提示条 ---------- */
#toast{
  position:fixed;z-index:30;left:50%;top:14%;transform:translateX(-50%);
  max-width:86vw;padding:.7rem 1.1rem;text-align:center;
  background:rgba(47,58,63,.92);color:var(--paper);
  font-size:.82rem;letter-spacing:.1em;line-height:1.7;
  transition:opacity .4s;
}

@media (max-height:560px){
  .gesture-list{margin:.8rem 0}
  .gate-note{margin-top:.6rem}
}