/* Timaru Life — 游戏层样式
   只在本站点注入；digital-timaru/static/style.css 一个字节都没改。
   层级：canvas 0 < 昼夜/雨 2-3 < 主城漫游 HUD 5 < 生活层 9000。
   ----------------------------------------------------------------------- */

.viewer { position: relative; }
.viewer > canvas { position: relative; z-index: 0; }
.viewer > .hud   { z-index: 5; }
/* 主城漫游的按键提示原本压在右下角，正好盖住生活层的按钮列。
   状态条已隐藏，左下是空的 —— 把它挪过去，两边的信息都留着。 */
.viewer > .hud-keys {
  top: auto !important; right: auto !important;
  left: 18px !important; bottom: 18px !important;
}

#life-tint, #life-rain {
  position: absolute; inset: 0; pointer-events: none;
}
#life-tint { z-index: 2; transition: background 1.2s linear; }
#life-rain { z-index: 3; opacity: 0; transition: opacity .8s linear; }

#life-root {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: #ece4d6;
  -webkit-font-smoothing: antialiased;
}
#life-root * { box-sizing: border-box; }
#life-root button, #life-root input { font-family: inherit; }
/* 所有可点元素显式抬层：pointer-events 是继承属性，父层 none 时，
   后代必须自己声明 auto 并给出 z-index，否则浏览器的 hit-test 会穿透到 canvas。 */
#life-root button, #life-root input, #life-root .lf-sw, #life-root .lf-homebuy {
  pointer-events: auto; position: relative; z-index: 2;
}
#lf-toast, #lf-prompt { z-index: 20; }
#lf-modal { z-index: 30; }
#lf-pause { z-index: 40; }
#lf-intro { z-index: 50; }

.lf-glass {
  background: rgba(17, 23, 31, .82);
  border: 1px solid rgba(206, 172, 118, .24);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.lf-copper { color: #d8ab6c; }
.lf-dim { color: #9aa6b0; }

/* ---------- 左上：角色卡 ---------- */
#lf-card {
  position: absolute; top: 18px; left: 18px; width: 268px;
  padding: 13px 15px 14px; pointer-events: auto;
}
#lf-card .lf-brand {
  font-size: 10px; letter-spacing: .30em; color: #d8ab6c;
  text-transform: uppercase; margin-bottom: 9px;
}
.lf-who { display: flex; align-items: center; gap: 10px; }
.lf-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 17px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.lf-who b { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.lf-who small { display: block; color: #a6b1ba; font-size: 12px; margin-top: 3px; }
.lf-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-top: 11px; color: #c1cbd2;
}
.lf-row b { color: #ece4d6; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-stats { margin-top: 11px; display: grid; gap: 6px; }
.lf-stat { display: grid; grid-template-columns: 32px 1fr 24px; gap: 7px; align-items: center; font-size: 11.5px; color: #b2bcc4; }
.lf-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.lf-bar i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }
.lf-stat em { font-style: normal; text-align: right; color: #d6dde2; font-variant-numeric: tabular-nums; }
.lf-unlock {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12px; line-height: 1.65; color: #d0ba93;
}
.lf-unlock span { color: #8d99a2; }

/* ---------- 顶部中间：时钟 ---------- */
#lf-clock {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  padding: 9px 20px; text-align: center; min-width: 250px;
}
#lf-clock .lf-time { font-size: 19px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#lf-clock .lf-time small { font-size: 11px; color: #9aa6b0; margin-left: 8px; letter-spacing: 0; }
#lf-clock .lf-sub { font-size: 11.5px; color: #a6b1ba; margin-top: 3px; }
#lf-clock .lf-sunlabel { color: #d8ab6c; }

/* ---------- 右上：小地图 ---------- */
#lf-mapwrap { position: absolute; top: 18px; right: 18px; padding: 9px; pointer-events: auto; }
#lf-map { display: block; width: 176px; height: 176px; border-radius: 5px; background: #101820; }
#lf-mapwrap .lf-cap { font-size: 9.5px; color: #8d99a2; text-align: center; margin-top: 6px; letter-spacing: .08em; }

/* ---------- 右下：按钮 ---------- */
#lf-actions {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; gap: 6px; pointer-events: auto; justify-items: end;
}
.lf-btn {
  pointer-events: auto; cursor: pointer;
  background: rgba(17, 23, 31, .84);
  border: 1px solid rgba(206, 172, 118, .26);
  color: #e6ded0; border-radius: 7px;
  padding: 8px 12px; font-size: 12.5px; min-width: 126px; text-align: right;
  transition: background .15s, border-color .15s, transform .15s;
}
.lf-btn:hover:not(:disabled) { background: rgba(48, 41, 32, .94); border-color: #d8ab6c; transform: translateX(-2px); }
.lf-btn:disabled { opacity: .34; cursor: not-allowed; }
.lf-btn kbd {
  display: inline-block; min-width: 15px; margin-left: 8px; padding: 0 3px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 3px;
  font-size: 9.5px; line-height: 15px; text-align: center; color: #9aa6b0;
}
.lf-btn.lf-on { border-color: #d8ab6c; color: #d8ab6c; }

/* ---------- 底部：交互提示 / 提示条 ---------- */
#lf-prompt {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 9px 17px; font-size: 12.5px; white-space: nowrap;
  opacity: 0; transition: opacity .2s; text-align: center;
}
#lf-prompt.lf-show { opacity: 1; }
#lf-prompt kbd {
  display: inline-block; padding: 1px 6px; margin-right: 7px;
  border: 1px solid #d8ab6c; border-radius: 4px; color: #d8ab6c;
  font-size: 11px; font-weight: 600;
}
#lf-toast {
  position: absolute; top: 108px; left: 50%; transform: translateX(-50%) translateY(-8px);
  padding: 10px 18px; font-size: 12.5px; max-width: 460px; text-align: center;
  opacity: 0; transition: opacity .3s, transform .3s; line-height: 1.6;
}
#lf-toast.lf-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- NPC 头顶名牌 ---------- */
#lf-names { position: absolute; inset: 0; overflow: hidden; }
.lf-name {
  position: absolute; transform: translate(-50%, -100%);
  font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
  background: rgba(12, 18, 24, .74); border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap; color: #e8e0d2;
}
.lf-name small { color: #9aa6b0; margin-left: 5px; font-size: 9.5px; }

/* ---------- 模态面板 ---------- */
#lf-modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 48px)); max-height: min(72vh, 680px);
  display: none; flex-direction: column; pointer-events: auto; padding: 0;
}
#lf-modal.lf-show { display: flex; }
.lf-mhead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 19px 12px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.lf-mhead h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.lf-mhead span { font-size: 10.5px; color: #8d99a2; }
.lf-x { cursor: pointer; background: none; border: 0; color: #9aa6b0; font-size: 21px; line-height: 1; padding: 0 2px; }
.lf-x:hover { color: #ece4d6; }
.lf-mbody { padding: 16px 19px 19px; overflow-y: auto; font-size: 12.5px; line-height: 1.85; }
.lf-mbody::-webkit-scrollbar { width: 6px; }
.lf-mbody::-webkit-scrollbar-thumb { background: rgba(216,171,108,.32); border-radius: 3px; }
.lf-mbody p { margin: 0 0 11px; }
.lf-mbody .lf-quote { color: #c9b48f; border-left: 2px solid rgba(216,171,108,.5); padding-left: 11px; margin: 10px 0 14px; }
.lf-list { list-style: none; margin: 0; padding: 0; }
.lf-list li {
  padding: 10px 12px; margin-bottom: 7px; border-radius: 6px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
}
.lf-list li.lf-done { opacity: .45; }
.lf-list b { font-weight: 600; }
.lf-list small { display: block; color: #9aa6b0; font-size: 11px; margin-top: 3px; line-height: 1.6; }
.lf-tag { font-size: 9.5px; color: #d8ab6c; border: 1px solid rgba(216,171,108,.4); border-radius: 3px; padding: 1px 5px; margin-left: 7px; }
.lf-logtime { color: #8d99a2; font-size: 10px; margin-right: 9px; font-variant-numeric: tabular-nums; }
.lf-src { font-size: 10.5px; color: #8d99a2; line-height: 1.8; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- 开场过场 ---------- */
#lf-intro {
  position: absolute; inset: 0; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 38%, #1c2530 0%, #0b1016 72%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s ease; overflow: auto;
}
#lf-intro.lf-gone { opacity: 0; pointer-events: none; }
.lf-introin { width: min(560px, calc(100vw - 44px)); text-align: center; padding: 30px 0; }
.lf-introin .lf-kicker { font-size: 10px; letter-spacing: .42em; color: #d8ab6c; text-transform: uppercase; }
.lf-introin h1 { font-size: 34px; font-weight: 300; letter-spacing: .16em; margin: 16px 0 4px; color: #f2eadb; }
.lf-introin .lf-sub { font-size: 12px; letter-spacing: .22em; color: #8794a0; margin-bottom: 30px; }
.lf-opening { text-align: left; display: inline-block; font-size: 13px; line-height: 2.1; color: #b8c2c9; max-width: 430px; }
.lf-opening p { margin: 0 0 5px; }
.lf-form { margin-top: 30px; text-align: left; max-width: 430px; margin-left: auto; margin-right: auto; }
.lf-form label { display: block; font-size: 10.5px; color: #8d99a2; letter-spacing: .12em; margin-bottom: 7px; }
.lf-input {
  width: 100%; padding: 10px 12px; border-radius: 6px; font-size: 13px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(216,171,108,.32);
  color: #f2eadb; outline: none;
}
.lf-input:focus { border-color: #d8ab6c; }
.lf-swatches { display: flex; gap: 9px; margin: 9px 0 22px; }
.lf-sw {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, border-color .15s;
}
.lf-sw:hover { transform: scale(1.10); }
.lf-sw.lf-on { border-color: #f2eadb; }
.lf-go {
  width: 100%; padding: 13px; cursor: pointer; border-radius: 7px;
  background: #c69a5c; color: #17120b; border: 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: .12em;
  transition: background .18s, transform .18s;
}
.lf-go:hover { background: #e0b374; transform: translateY(-1px); }
.lf-alt {
  display: block; margin: 13px auto 0; background: none; border: 0;
  color: #8794a0; font-size: 11px; cursor: pointer; text-decoration: underline;
}
.lf-alt:hover { color: #d8ab6c; }
.lf-note { font-size: 10.5px; color: #6f7c86; margin-top: 22px; line-height: 1.8; }

/* ---------- 暂停层 ---------- */
#lf-pause {
  position: absolute; inset: 0; pointer-events: auto; display: none;
  align-items: center; justify-content: center;
  background: rgba(8, 12, 17, .66); backdrop-filter: blur(3px);
}
#lf-pause.lf-show { display: flex; }
.lf-pausein { text-align: center; padding: 28px 38px; }
.lf-pausein h2 { font-size: 20px; font-weight: 400; letter-spacing: .16em; margin: 0 0 8px; }
.lf-pausein p { font-size: 12px; color: #9aa6b0; margin: 0 0 20px; }
.lf-pausein .lf-go { width: 210px; }

@media (max-width: 900px) {
  #lf-card { width: 210px; padding: 10px 12px; }
  #lf-mapwrap { display: none; }
  #lf-clock { top: auto; bottom: 74px; min-width: 200px; }
  #lf-actions { bottom: 12px; right: 12px; }
  .lf-btn { min-width: 96px; padding: 6px 9px; font-size: 10.5px; }
  #lf-prompt { bottom: 128px; }
}