/* 《釉行》 · 壳
 * 亮底。对比来自阴影、裂纹与材质，不来自发光。
 * 最亮 #FBF7EE（瓷面高光 / 窑火芯），最暗 #221E1A（火膛深处）。
 *
 * 两条纪律：
 *   · 一切"从 A 到 B"的变化都由 JS 的补间层驱动（transform / opacity），
 *     CSS 里不写 transition / @keyframes 当机制 —— 只有滚动条这类极少量点缀。
 *   · 所有文字都在 .tx[data-txt] 里，且都在 DOM 里。画面里一个像素的字都没有，
 *     所以「抠掉文字」的取证只要隐藏 .tx。
 */

:root {
  --hi:        #FBF7EE;
  --p0:        #F2ECE0;
  --p1:        #E4DCCB;
  --p2:        #D2C7B2;
  --bisque:    #B9AF9E;
  --bisque-d:  #9C927F;
  --cel-pale:  #CBDFD6;
  --cel-hi:    #9DBFB2;
  --cel:       #6E9C8D;
  --cel-deep:  #3E6B5E;
  --cel-dark:  #1E3F39;
  --shadow:    #3A352C;
  --void:      #221E1A;
  --fire-hi:   #FFE3B0;
  --fire:      #F2A65A;
  --fire-deep: #C9662F;
  --ember:     #7A2F14;
  --warn:      #C4553A;

  /* 四档间距，不做第五档 —— 避免"处处均匀" */
  --s1: 8px;  --s2: 16px;  --s3: 28px;  --s4: 48px;
  --r-chip: 3px;   /* 瓷片是脆的，圆角大就不像瓷 */
  --r-slab: 2px;

  --serif: "KaiTi", "STKaiti", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --sans:  "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono:  ui-monospace, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: var(--hi); color: var(--shadow);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; overflow: hidden; }

#gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > *, .page, .veil { pointer-events: none; }
.page.on > *, .veil.on > *, .topbar, .topbar * { pointer-events: auto; }

/* ── 页面：常驻 DOM，靠 transform / opacity 进出。绝不用 display:none。 */
.page {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; will-change: transform, opacity;
}
.page.on { opacity: 1; }
#pg-kiln { opacity: 1; z-index: 40; }
#pg-run { align-items: stretch; justify-content: flex-start; }

/* ── 顶栏 ── */
.topbar {
  position: absolute; left: var(--s3); right: var(--s3); top: var(--s2);
  display: flex; align-items: center; justify-content: space-between; z-index: 20;
}
.inkwell { display: flex; align-items: center; gap: var(--s2); }
.swatch { display: flex; gap: 5px; align-items: flex-end; }
.swatch i {
  display: block; width: 13px; height: 22px; border-radius: var(--r-slab);
  background: var(--bisque); box-shadow: inset 0 -1px 0 rgba(58,53,44,.25), 0 1px 0 rgba(58,53,44,.10);
  transform-origin: 50% 100%;
}
.swatch i.lit { box-shadow: inset 0 -1px 0 rgba(58,53,44,.35), 0 2px 6px rgba(58,53,44,.18); }
.inkcap { font: 600 12px/1 var(--sans); color: var(--bisque-d); letter-spacing: .16em; }
.tb-right { display: flex; gap: var(--s1); }

/* ── 瓷片控件：略微倾斜，按下时下沉并荡出一圈釉波（釉波由 JS 补间画在 canvas 上） ── */
.knob, .act, .gate {
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit;
  color: var(--shadow); border: 1px solid rgba(58,53,44,.30);
  background:
    linear-gradient(178deg, var(--hi) 0%, var(--p0) 46%, var(--p1) 100%);
  border-radius: var(--r-chip);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(58,53,44,.10),
              0 2px 0 rgba(58,53,44,.14), 0 3px 10px rgba(58,53,44,.10);
}
.knob { padding: 7px 14px; font-size: 12.5px; letter-spacing: .10em; }
.knob:active, .act:active { }
.act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 16px 11px; transform: rotate(-.5deg); text-align: left;
}
.act:nth-child(even) { transform: rotate(.45deg); }
.act b { font: 600 15.5px/1.15 var(--serif); letter-spacing: .06em; }
.act em { font: 400 11.5px/1 var(--sans); font-style: normal; color: var(--bisque-d); letter-spacing: .04em; }
.act.back b, .act.back { font-size: 16px; }
.act.wide { align-items: center; }

/* ── 窑门（主菜单的主入口）：这一屏最大、饱和度最高的一件东西 ── */
.hall { position: relative; width: min(1000px, 92vw); }
.hall-head { text-align: left; margin-bottom: var(--s4); }
.title {
  font: 400 clamp(46px, 7.4vw, 86px)/1 var(--serif);
  letter-spacing: .22em; color: var(--cel-dark);
  text-shadow: 0 1px 0 var(--hi), 0 -1px 0 rgba(58,53,44,.10);
}
.subtitle {
  margin-top: var(--s2); max-width: 34em;
  font: 400 14.5px/1.75 var(--sans); color: #6A6154;
}
.hall-body { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.gate {
  position: relative; width: 330px; height: 176px; padding: 0;
  border-radius: 46% 46% var(--r-chip) var(--r-chip) / 30% 30% var(--r-chip) var(--r-chip);
  border: 1px solid rgba(30,63,57,.42);
  background: linear-gradient(180deg, var(--cel-hi) 0%, var(--cel) 52%, var(--cel-deep) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -14px 26px rgba(30,63,57,.45),
              0 5px 0 rgba(30,63,57,.22), 0 14px 34px rgba(30,63,57,.20);
  overflow: hidden; transform: none;
}
.gate-arch {
  position: absolute; left: 22px; top: 20px; width: calc(100% - 44px); height: calc(100% - 20px);
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  background: radial-gradient(120% 150% at 50% 108%, var(--fire-hi) 0%, var(--fire) 32%, var(--ember) 74%, var(--void) 100%);
  box-shadow: inset 0 0 30px rgba(34,30,26,.65);
}
.gate-fire {
  position: absolute; left: 50%; bottom: -10px; width: 132px; height: 62px; margin-left: -66px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,227,176,.95), rgba(242,166,90,.32) 60%, rgba(242,166,90,0) 100%);
  filter: blur(2px);
}
.gate-txt {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font: 400 30px/1 var(--serif); letter-spacing: .34em; text-indent: .34em; color: var(--hi);
  text-shadow: 0 1px 2px rgba(34,30,26,.75), 0 0 18px rgba(255,227,176,.55);
}
.gate-sub {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font: 400 11.5px/1 var(--sans); letter-spacing: .18em; color: rgba(251,247,238,.78);
}
.hall-side { display: flex; flex-direction: column; gap: var(--s1); }
.hall-foot {
  margin-top: var(--s4); font: 400 12px/1.9 var(--mono); color: var(--bisque-d); letter-spacing: .06em;
}

/* ── 内页纸面 ── */
.sheet {
  width: min(880px, 92vw); max-height: 88vh; overflow: auto; padding: var(--s4) var(--s4) var(--s3);
  border-radius: 4px; border: 1px solid rgba(58,53,44,.16);
  background: linear-gradient(180deg, var(--hi) 0%, var(--p0) 100%);
  box-shadow: 0 1px 0 #fff inset, 0 18px 50px rgba(58,53,44,.16);
}
.sheet.wide { width: min(1180px, 95vw); }
.sheet-head h1 { margin: 0; font: 400 34px/1 var(--serif); letter-spacing: .2em; color: var(--cel-dark); }
.sheet-head p { margin: var(--s2) 0 0; max-width: 46em; font-size: 14px; line-height: 1.8; color: #6A6154; }
.sheet-foot { margin-top: var(--s3); display: flex; justify-content: flex-end; }

/* ── 谱录：一窑一块板 ── */
.ledger { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.row {
  display: grid; grid-template-columns: 46px 1fr 190px 84px; gap: var(--s2); align-items: center;
  padding: 11px 14px; border-radius: var(--r-chip); cursor: pointer;
  border: 1px solid rgba(58,53,44,.14); background: linear-gradient(180deg, var(--hi), var(--p0));
  transform: none;
}
.row .plate { width: 46px; height: 16px; border-radius: var(--r-slab);
  box-shadow: inset 0 -2px 0 rgba(58,53,44,.18), 0 1px 0 rgba(255,255,255,.7); }
.row b { font: 600 16px/1 var(--serif); letter-spacing: .1em; }
.row .sub { font-size: 12px; color: var(--bisque-d); margin-top: 3px; }
.row .bar { height: 8px; border-radius: 4px; background: rgba(58,53,44,.10); overflow: hidden; }
.row .bar i { display: block; height: 100%; background: var(--cel); border-radius: 4px; }
.row .tag { font: 400 12px/1 var(--mono); color: var(--bisque-d); text-align: right; }
.row.locked { opacity: .55; }
.row.sel { border-color: rgba(30,63,57,.5); box-shadow: 0 4px 14px rgba(58,53,44,.16); }

/* ── 器物志 ── */
.codex-demos { margin-top: var(--s3); display: flex; gap: var(--s3); flex-wrap: wrap; }
.demo-box { flex: 1 1 300px; }
canvas.demo { width: 100%; height: auto; display: block; border-radius: var(--r-chip);
  border: 1px solid rgba(58,53,44,.16); background: var(--p0); }
.demo-cap { margin-top: var(--s1); }
.demo-cap b { display: block; font: 600 15px/1.3 var(--serif); letter-spacing: .1em; color: var(--cel-dark); }
.demo-cap span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.65; color: #6A6154; }
.note { margin-top: var(--s3); font-size: 12.5px; color: var(--bisque-d); }
.codex-grid { margin-top: var(--s3); display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s2); }
.card { padding: 12px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.14);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.card h4 { margin: 0 0 5px; font: 600 14.5px/1 var(--serif); letter-spacing: .12em; }
.card .why { font-size: 12px; line-height: 1.7; color: #6A6154; }
.card .dbar { margin-top: var(--s1); font: 400 11.5px/1 var(--mono); color: var(--bisque-d); }
.card canvas { width: 100%; height: 26px; display: block; margin-top: 6px; }

/* ── 窑温 ── */
.dial-list { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.dial { display: grid; grid-template-columns: 210px 1fr; gap: var(--s2); align-items: center;
  padding: 12px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.14);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.dial .lbl { font: 600 15px/1.2 var(--serif); letter-spacing: .1em; }
.dial .lbl em { display: block; font: 400 11.5px/1.5 var(--sans); font-style: normal; color: var(--bisque-d); }
.opts { display: flex; gap: var(--s1); flex-wrap: wrap; }
.opt { padding: 7px 13px; font-size: 12.5px; border-radius: var(--r-chip); cursor: pointer;
  border: 1px solid rgba(58,53,44,.22); background: var(--p0); color: var(--shadow); font-family: inherit; }
.opt.on { background: linear-gradient(180deg, var(--cel-hi), var(--cel)); color: var(--hi);
  border-color: rgba(30,63,57,.42); }
/* 窑门开合度：一根搅拌釉料的棒，不是系统滑块 */
input[type=range] { -webkit-appearance: none; appearance: none; height: 20px; background: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bisque) 0%, var(--cel) 100%);
  box-shadow: inset 0 1px 0 rgba(58,53,44,.25);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 22px; margin-top: -8.5px;
  border-radius: 2px; border: 1px solid rgba(30,63,57,.5);
  background: linear-gradient(180deg, var(--hi), var(--cel-pale));
  box-shadow: 0 2px 4px rgba(58,53,44,.28);
}
input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--bisque); }
input[type=range]::-moz-range-thumb { width: 13px; height: 22px; border-radius: 2px; border: 1px solid rgba(30,63,57,.5);
  background: linear-gradient(180deg, var(--hi), var(--cel-pale)); }
.readout { margin-top: var(--s3); font: 400 12px/1.9 var(--mono); color: var(--bisque-d); }

/* ── 入窑 ── */
.run-head { position: absolute; left: var(--s3); top: var(--s2); right: var(--s3);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.run-title { font: 400 15px/1.5 var(--serif); letter-spacing: .16em; color: var(--cel-dark);
  text-shadow: 0 1px 0 var(--hi); text-align: right; }
.run-title em { display: block; font: 400 11.5px/1.6 var(--sans); font-style: normal; color: var(--bisque-d); letter-spacing: .04em; }
.pyro { text-align: right; margin-top: 44px; }
#pyro-cv { width: 150px; height: 74px; display: block; margin-left: auto; }
.pyro-cap { font: 400 10.5px/1.6 var(--sans); color: var(--bisque-d); letter-spacing: .1em; }
.toastline { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  font: 400 15px/1.6 var(--serif); letter-spacing: .12em; color: var(--cel-dark); text-align: center;
  text-shadow: 0 1px 0 var(--hi); }

/* ── 浮层：背景不消失、只压暗；背后的持续动不冻结 ── */
.veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; z-index: 30; }
.veil.on { opacity: 1; }
.veil-ink { position: absolute; inset: 0; background: rgba(34,30,26,.34); }
.veil-body {
  position: relative; width: min(520px, 88vw); padding: var(--s3) var(--s3) var(--s2);
  border-radius: 4px; border: 1px solid rgba(58,53,44,.26);
  background: linear-gradient(180deg, var(--hi) 0%, var(--p0) 100%);
  box-shadow: 0 1px 0 #fff inset, 0 20px 54px rgba(34,30,26,.34);
}
.veil-title { font: 400 27px/1 var(--serif); letter-spacing: .22em; color: var(--cel-dark); }
.veil-note { margin: var(--s2) 0 0; font-size: 13px; line-height: 1.75; color: #6A6154; }
.veil-acts { margin-top: var(--s3); display: flex; gap: var(--s1); flex-wrap: wrap; }
.grade { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.chip { width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(58,53,44,.22), 0 3px 10px rgba(58,53,44,.2); }
.grade-name { font: 400 22px/1 var(--serif); letter-spacing: .2em; color: var(--cel-dark); }
.stats { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.stats li { display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px dashed rgba(58,53,44,.16); font-size: 13px; }
.stats li span:last-child { font-family: var(--mono); color: var(--cel-deep); }

/* ── 提示：排队、不夺焦、能一键收起 ── */
.toasts { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 25;
  display: flex; flex-direction: column; gap: var(--s1); align-items: center; pointer-events: none; }
.toast { padding: 8px 16px; border-radius: var(--r-chip); font-size: 12.5px; letter-spacing: .08em;
  border: 1px solid rgba(58,53,44,.2); background: rgba(251,247,238,.94); color: var(--shadow);
  box-shadow: 0 6px 18px rgba(58,53,44,.14); pointer-events: auto; cursor: pointer; }

/* ── 窑口（加载页） ── */
#pg-kiln { background: var(--hi); flex-direction: column; }
#boot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.boot-panel { position: relative; z-index: 2; text-align: center; margin-top: 8vh; }
.boot-title { font: 400 clamp(40px, 6vw, 72px)/1 var(--serif); letter-spacing: .3em; text-indent: .3em;
  color: var(--cel-dark); text-shadow: 0 1px 0 var(--hi); }
.boot-sub { margin-top: var(--s2); font: 400 13px/1 var(--sans); letter-spacing: .22em; color: var(--bisque-d); }
.boot-bar { width: 240px; height: 3px; margin: var(--s3) auto 0; border-radius: 2px;
  background: rgba(58,53,44,.12); overflow: hidden; }
.boot-bar i { display: block; width: 0%; height: 100%; background: var(--cel-deep); border-radius: 2px; }
.boot-stage { margin-top: var(--s1); font: 400 11.5px/1.6 var(--mono); letter-spacing: .16em; color: var(--bisque-d); }

/* ── 广告位（窑温页内 / 结算浮层内）
   这一块是界面，不是广告层：样式全部由这一页决定，广告层只管能力与状态。 ── */
.ads-sec { margin-top: var(--s4); border-top: 1px solid rgba(58,53,44,.14); padding-top: var(--s3); }
.ads-h { margin: 0 0 var(--s2); font: 400 22px/1 var(--serif); letter-spacing: .2em; color: var(--cel-dark); }
.ads-h2 { margin: var(--s3) 0 var(--s1); font: 600 14px/1.3 var(--serif); letter-spacing: .12em; color: var(--cel-deep); }
.ads-h2 em { display: block; font: 400 11.5px/1.5 var(--sans); font-style: normal; color: var(--bisque-d); letter-spacing: 0; }

.adstate { padding: 10px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.18);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.adstate b { display: block; font: 600 14.5px/1.4 var(--mono); letter-spacing: .04em; }
.adstate span { display: block; margin-top: 3px; font-size: 12px; color: #6A6154; }
.adstate.s-ready { border-color: rgba(62,107,94,.5); }
.adstate.s-ready b { color: var(--cel-deep); }
.adstate.s-idle-sdk { border-color: rgba(185,138,62,.6); }
.adstate.s-idle-sdk b { color: #8A6A2A; }
.adstate.s-noblock, .adstate.s-outside { border-color: rgba(58,53,44,.34); background: linear-gradient(180deg, var(--p0), var(--p1)); }
.adstate.s-noblock b, .adstate.s-outside b { color: #6A6154; }

.adplist { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.adp { padding: 10px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.14);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.adp b { display: block; font: 600 14.5px/1.4 var(--serif); letter-spacing: .1em; }
.adp > span { display: block; font-size: 12px; line-height: 1.7; color: #6A6154; }
.adp .adp-r { color: var(--cel-deep); }

.selfcheck { padding: 4px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.14);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.sc-row { display: flex; justify-content: space-between; gap: var(--s2); padding: 5px 0;
  border-bottom: 1px dashed rgba(58,53,44,.13); font-size: 12px; }
.sc-row:last-child { border-bottom: 0; }
.sc-row > span:last-child { font-family: var(--mono); color: var(--cel-deep); text-align: right; }
.sc-row.bad > span:last-child { color: #A33; }

.adlog { padding: 4px 14px; border-radius: var(--r-chip); border: 1px solid rgba(58,53,44,.14);
  background: linear-gradient(180deg, var(--hi), var(--p0)); }
.lg-row { display: grid; grid-template-columns: 66px 54px 88px 62px 1fr; gap: var(--s1);
  padding: 5px 0; border-bottom: 1px dashed rgba(58,53,44,.13); font: 400 11.5px/1.5 var(--mono); color: #6A6154; }
.lg-row:last-child { border-bottom: 0; }
.lg-row .ok { color: var(--cel-deep); }
.lg-row .no { color: #A33; }
.adacts { margin-top: var(--s2); display: flex; gap: var(--s1); }

/* 结算浮层里的位点按钮 */
.adslot:empty { display: none; }
.adgo { margin-top: var(--s2); width: 100%; flex-direction: row; align-items: center; gap: var(--s2); }
.adgo b { font-size: 17px; }
.adgo em { flex: 1; font-size: 12px; color: var(--cel-deep); font-style: normal; }
.adgo[disabled] { opacity: .55; cursor: default; }
.adflag { font: 600 10.5px/1.5 var(--sans); letter-spacing: .06em; padding: 3px 7px;
  border-radius: var(--r-chip); font-style: normal; white-space: nowrap; }
.adflag.off { background: rgba(58,53,44,.14); color: #6A6154; border: 1px solid rgba(58,53,44,.28); }