/* ============ 仙冢遗秘 · 基础主题 ============ */
:root {
  --ink-0: #0f0d0a;         /* 最深墨 */
  --ink-1: #14110d;         /* 底色 */
  --ink-2: #1c1813;         /* 面板 */
  --ink-3: #262019;         /* 卡片 */
  --ink-4: #332b21;         /* 描边浅 */
  --paper: #e8dcc0;         /* 宣纸白文字 */
  --paper-dim: #a89a80;     /* 弱文字 */
  --gold: #d4af37;          /* 鎏金 */
  --gold-bright: #ffd76a;
  --cinnabar: #c23b22;      /* 朱砂 */
  --azure: #4a90c2;         /* 石青 */
  --malachite: #2fa38a;     /* 孔雀绿 */
  --r-common: #b9b3a8;
  --r-fine: #6fbf7f;
  --r-rare: #58a6e8;
  --r-epic: #b57ae8;
  --r-legend: #ff9b2f;
  --r-unique: #ffb84d;
  --r-mutate: #ff4d5e;
  --hp-c: #a83232;
  --energy-c: #3e7fa6;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "STSong", serif;
  --font-body: "Songti SC", "STSong", "Noto Serif SC", serif;
  --hud-h: 58px;
  --tab-h: 56px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#app {
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--ink-1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}
@media (min-width: 520px) {
  #app { border-left: 1px solid var(--ink-4); border-right: 1px solid var(--ink-4); }
}
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.hidden { display: none !important; }

/* ---- 品质色 ---- */
.q-common { color: var(--r-common); }
.q-fine { color: var(--r-fine); }
.q-rare { color: var(--r-rare); }
.q-epic { color: var(--r-epic); }
.q-legend { color: var(--r-legend); }
.q-unique { color: var(--r-unique); text-shadow: 0 0 8px rgba(255,184,77,.45); }
.q-mutate { color: var(--r-mutate); text-shadow: 0 0 8px rgba(255,77,94,.5); }
.b-common { border-color: #4a463f !important; }
.b-fine { border-color: #3a6b45 !important; box-shadow: inset 0 0 8px rgba(111,191,127,.12); }
.b-rare { border-color: #2f5f8c !important; box-shadow: inset 0 0 10px rgba(88,166,232,.15); }
.b-epic { border-color: #6b3f96 !important; box-shadow: inset 0 0 12px rgba(181,122,232,.2); }
.b-legend { border-color: #a35f13 !important; box-shadow: inset 0 0 14px rgba(255,155,47,.25); }
.b-unique { border-color: #b98a2e !important; box-shadow: inset 0 0 16px rgba(255,184,77,.35), 0 0 10px rgba(255,184,77,.2); }
.b-mutate { border-color: #b03040 !important; box-shadow: inset 0 0 16px rgba(255,77,94,.35), 0 0 12px rgba(255,77,94,.3); animation: mutatePulse 1.6s infinite; }
@keyframes mutatePulse {
  0%, 100% { box-shadow: inset 0 0 16px rgba(255,77,94,.35), 0 0 6px rgba(255,77,94,.25); }
  50% { box-shadow: inset 0 0 22px rgba(255,77,94,.55), 0 0 18px rgba(255,77,94,.5); }
}

/* ---- 通用按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 4px;
  color: var(--paper);
  font-family: var(--font-kai);
  font-size: 15px;
  letter-spacing: 1px;
  transition: all .15s;
  position: relative;
}
.btn:active { transform: scale(.96); filter: brightness(1.2); }
.btn.primary {
  background: linear-gradient(160deg, #8a6a1c, #5f4712);
  border-color: var(--gold);
  color: #ffe9b0;
}
.btn.danger { background: linear-gradient(160deg, #7c2418, #521708); border-color: var(--cinnabar); color: #ffd9c4; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.small { padding: 5px 10px; font-size: 13px; }

/* ---- P4 界面皮肤 (素材就绪后启用) ---- */
/* 卡片/按钮/弹窗/Toast: 只用 border-image fill 做框+内里, 不再叠 background, 避免双重边框错位 */
html.p4-ready .btn {
  border: 12px solid transparent;
  border-image: var(--p4-btn-dark) 110 fill / 12px stretch;
  border-radius: 2px;
  padding: 5px 12px;
}
html.p4-ready .btn.primary {
  border-image-source: var(--p4-btn-gold);
  color: #fff2cc;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
html.p4-ready .btn.danger {
  border-image-source: var(--p4-btn-red);
}
html.p4-ready .btn.small { border-width: 8px; border-image-width: 8px; padding: 3px 8px; }
html.p4-ready .btn.ghost { border-image-source: none; border: 1px solid var(--ink-4); background: rgba(20,17,13,.6); }
html.p4-ready .card {
  border: 12px solid transparent;
  border-image: var(--p4-card) 120 fill / 12px stretch;
  border-radius: 2px;
}
html.p4-ready .toast {
  border: 10px solid transparent;
  border-image: var(--p4-toast) 110 fill / 10px stretch;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}

/* ---- 数值/文字工具 ---- */
.gold { color: var(--gold); }
.dim { color: var(--paper-dim); }
.small { font-size: 12px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
h3.sec {
  font-family: var(--font-kai);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 2px;
  padding: 10px 2px 6px;
  display: flex; align-items: center; gap: 8px;
}
h3.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ink-4), transparent); }

/* ---- P4: 品质框 (面板底保持纯色, 去掉横幅画框随机感) ---- */
html.p4-ready .slot-cell, html.p4-ready .inv-cell {
  border: 7px solid transparent;
  border-image: var(--frame-common) 110 / 7px stretch;
  border-radius: 2px;
}
html.p4-ready .slot-cell.b-fine, html.p4-ready .inv-cell.b-fine { border-image-source: var(--frame-fine); box-shadow: none; }
html.p4-ready .slot-cell.b-rare, html.p4-ready .inv-cell.b-rare { border-image-source: var(--frame-rare); box-shadow: none; }
html.p4-ready .slot-cell.b-epic, html.p4-ready .inv-cell.b-epic { border-image-source: var(--frame-epic); box-shadow: none; }
html.p4-ready .slot-cell.b-legend, html.p4-ready .inv-cell.b-legend { border-image-source: var(--frame-legend); box-shadow: 0 0 10px rgba(255,184,77,.35); }
html.p4-ready .slot-cell.b-unique, html.p4-ready .inv-cell.b-unique { border-image-source: var(--frame-legend); box-shadow: 0 0 12px rgba(255,184,77,.5); }
html.p4-ready .slot-cell.b-mutate, html.p4-ready .inv-cell.b-mutate { border-image-source: var(--frame-mutate); box-shadow: 0 0 12px rgba(255,77,94,.5); }

/* ---- 面板 ---- */
#panels { flex: 1; overflow: hidden; position: relative; }
.panel {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 10px 12px calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 14px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
  scrollbar-width: thin;
}
.panel.active { opacity: 1; pointer-events: auto; }
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.card-title {
  font-family: var(--font-kai);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

/* ---- 底部导航 ---- */
#tabbar {
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: linear-gradient(180deg, rgba(20,17,13,.4), var(--ink-0));
  border-top: 1px solid var(--ink-4);
  position: relative; z-index: 30;
}
#tabbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  color: var(--paper-dim);
  position: relative;
  transition: color .15s;
}
#tabbar button .tab-ico { font-size: 21px; font-family: var(--font-kai); line-height: 1; }
#tabbar button .tab-name { font-size: 11px; font-family: var(--font-kai); letter-spacing: 1px; }
#tabbar button.active { color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,215,106,.4); }
#tabbar button.active::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.badge {
  position: absolute; top: 6px; right: calc(50% - 22px);
  min-width: 16px; height: 16px;
  background: var(--cinnabar); color: #ffe;
  border-radius: 8px; font-size: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  animation: badgePop 1.5s infinite;
}
@keyframes badgePop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ---- Toast ---- */
#toast-root {
  position: absolute; top: calc(var(--hud-h) + 10px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 200; pointer-events: none;
}
.toast {
  background: rgba(20,16,10,.92);
  border: 1px solid var(--gold);
  color: var(--paper);
  font-family: var(--font-kai);
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 1px;
  animation: toastIn .25s, toastOut .4s 1.8s forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  max-width: 88%;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }