:root{
  --steel:#171d1a;
  --steel-2:#1d2420;
  --steel-3:#242d27;
  --edge:#0d110e;
  --brass:#b08d57;
  --brass-hi:#d8b47c;
  --cream:#e8ddc0;
  --cream-dim:#b8ad8f;
  --paper:#f2ead6;
  --ink:#26251f;
  --red:#a2402d;
  --green-ok:#7d9a6a;
  --mono:"Courier Prime","Courier New",Courier,monospace;
  --display:"Georgia","Songti SC","STSong",serif;
  --body:"Avenir Next","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, #23302830, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #3a2e1c22, transparent 55%),
    var(--steel);
  color:var(--cream);
  font-family:var(--body);
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------- 氛围层 ---------- */
#grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,2%)}
  40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,-2%)}
  80%{transform:translate(1%,2%)}100%{transform:translate(0,0)}}
#vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(5,8,6,.72);}

/* ---------- 顶栏 ---------- */
#topbar{
  height:74px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;position:relative;z-index:10;
  background:linear-gradient(180deg,#20282288,#171d1a);
  border-bottom:1px solid #000;
  box-shadow:0 1px 0 #ffffff0a, 0 8px 24px #00000066;
}
#topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 14px,transparent 14px 22px);opacity:.35}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;color:#241d10;font-family:var(--display);
  background:radial-gradient(circle at 35% 30%,var(--brass-hi),var(--brass) 55%,#6f5530);
  box-shadow:0 2px 6px #000a, inset 0 1px 1px #ffe9c088;
}
.brand-text h1{
  font-family:var(--display);font-size:22px;letter-spacing:.14em;font-weight:700;
  color:var(--cream);text-shadow:0 1px 0 #000;
}
.brand-text h1 .no{color:var(--brass-hi);font-style:italic}
.brand-text p{font-size:10px;letter-spacing:.34em;color:var(--cream-dim);margin-top:2px}
.serial{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--cream-dim);letter-spacing:.1em}
.serial b{color:var(--brass-hi);font-family:var(--mono);font-size:13px}
.serial .dot{color:var(--red);font-size:8px}

/* ---------- 主舞台 ---------- */
#stage-wrap{flex:1;position:relative;display:flex;min-height:0;z-index:5}
#stage{position:absolute;inset:0}
#stage canvas{display:block}

#hintbar{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:20;
  font-size:11px;color:var(--cream-dim);letter-spacing:.06em;white-space:nowrap;
  background:#10140fd0;border:1px solid #ffffff14;border-radius:999px;
  padding:7px 18px;box-shadow:0 6px 18px #0009;
  backdrop-filter:blur(4px);
}
#hintbar kbd{
  font-family:var(--mono);font-size:10px;color:var(--brass-hi);
  border:1px solid #b08d5744;border-bottom-width:2px;border-radius:4px;
  padding:1px 5px;background:#00000055;margin:0 1px;
}

/* ---------- 侧板（共用） ---------- */
#control-panel,#console-panel{
  position:absolute;top:16px;bottom:16px;width:252px;z-index:20;
  background:linear-gradient(160deg,#222b25f2,#181e1af2);
  border:1px solid #000;border-radius:10px;
  box-shadow:inset 0 1px 0 #ffffff12, inset 0 -14px 30px #0006, 0 18px 44px #000a;
  padding:14px 16px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#b08d5744 transparent;
}
#control-panel{left:16px}
#console-panel{right:16px}
#control-panel::-webkit-scrollbar,#console-panel::-webkit-scrollbar{width:5px}
#control-panel::-webkit-scrollbar-thumb,#console-panel::-webkit-scrollbar-thumb{background:#b08d5744;border-radius:3px}

.panel-title{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:15px;letter-spacing:.5em;text-indent:.5em;
  color:var(--brass-hi);padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid #ffffff12;
  text-shadow:0 1px 0 #000;
}
.rivet{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#e8d5aa,#6f5530);box-shadow:0 1px 2px #000}

.panel-section{margin-bottom:18px}
.section-label{
  font-size:10px;letter-spacing:.28em;color:var(--cream-dim);
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.section-label::after{content:"";flex:1;height:1px;background:#ffffff14}

/* 视角切换 */
.view-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.view-switch button{
  appearance:none;border:1px solid #00000088;border-radius:6px;cursor:pointer;
  padding:9px 4px;font-family:var(--body);font-size:13px;letter-spacing:.3em;text-indent:.3em;
  color:var(--cream-dim);
  background:linear-gradient(180deg,#2b352d,#1c231e);
  box-shadow:inset 0 1px 0 #ffffff14, 0 2px 4px #0006;
  transition:all .18s ease;
}
.view-switch button:hover{color:var(--cream);border-color:#b08d5755}
.view-switch button.active{
  color:#241d10;font-weight:700;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  box-shadow:inset 0 1px 0 #ffe9c0aa, 0 2px 8px #0008;
}
.view-note{font-size:10.5px;color:#8f9a8a;line-height:1.6;margin-top:8px;min-height:34px}

/* 滑块 */
.slider-row{display:grid;grid-template-columns:34px 1fr 42px;align-items:center;gap:10px;margin-bottom:10px}
.slider-row label{font-size:12px;color:var(--cream);letter-spacing:.1em}
.slider-row output{font-family:var(--mono);font-size:10px;color:var(--brass-hi);text-align:right}
input[type=range]{
  appearance:none;-webkit-appearance:none;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;background:linear-gradient(180deg,#0c0f0c,#1a201b);
  box-shadow:inset 0 1px 3px #000c, 0 1px 0 #ffffff10;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--brass-hi),var(--brass) 60%,#5d4728);
  border:1px solid #00000088;box-shadow:0 2px 5px #000a, inset 0 1px 1px #ffe9c077;
}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#121712}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brass);border:1px solid #000}

/* 按钮 */
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
button.op{
  appearance:none;cursor:pointer;border-radius:6px;padding:9px 4px;
  font-family:var(--body);font-size:12.5px;letter-spacing:.12em;
  color:var(--cream);
  border:1px solid #00000099;
  background:linear-gradient(180deg,#313c33,#202822);
  box-shadow:inset 0 1px 0 #ffffff18, 0 3px 6px #0007;
  transition:all .15s ease;
}
button.op:hover{filter:brightness(1.12);border-color:#b08d5766}
button.op:active{transform:translateY(1px);box-shadow:inset 0 2px 6px #0009}
button.op.primary{
  width:100%;margin-bottom:10px;font-weight:700;color:#241d10;letter-spacing:.2em;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  box-shadow:inset 0 1px 0 #ffe9c0aa, 0 3px 10px #0008;
}
button.op.danger{color:#e8c0b4}
button.op.danger:hover{background:linear-gradient(180deg,#5a2e24,#3c201a);border-color:#a2402d88}

/* 音效开关 */
.toggle-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--cream-dim)}
.switch{position:relative;width:40px;height:20px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .track{
  position:absolute;inset:0;border-radius:999px;cursor:pointer;
  background:#0d110e;box-shadow:inset 0 1px 4px #000c;transition:.2s;
}
.switch .track::before{
  content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9aa794,#5c6a57);
  box-shadow:0 1px 3px #000a;transition:.2s;
}
.switch input:checked + .track{background:#4d3d20;box-shadow:inset 0 1px 4px #000c}
.switch input:checked + .track::before{transform:translateX(20px);
  background:radial-gradient(circle at 35% 30%,var(--brass-hi),var(--brass))}

/* 控制台数据 */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.stat{
  background:linear-gradient(180deg,#0e120f,#161c17);
  border:1px solid #000;border-radius:7px;padding:9px 10px;
  box-shadow:inset 0 2px 8px #000a;
  display:flex;flex-direction:column;gap:2px;
}
.stat-num{font-family:var(--mono);font-size:21px;color:var(--cream);line-height:1;text-shadow:0 0 12px #e8ddc033}
.stat-label{font-size:10px;letter-spacing:.24em;color:var(--cream-dim)}
.meter{height:8px;border-radius:4px;background:#0c0f0c;box-shadow:inset 0 1px 3px #000c;overflow:hidden}
.meter-fill{height:100%;width:88%;border-radius:4px;transition:width .3s ease;
  background:repeating-linear-gradient(90deg,var(--brass) 0 8px,#8a6a3e 8px 12px)}
.state-line{font-size:11px;color:var(--cream-dim);margin-top:12px;letter-spacing:.1em}
.state-line b{color:var(--green-ok);font-weight:600}
#log{list-style:none;font-family:var(--mono);font-size:10.5px;line-height:1.75;color:#93a08f;max-height:150px;overflow-y:auto}
#log li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#log li b{color:var(--brass-hi);font-weight:400}
#log li.warn b{color:#d08a6a}
.save-line{margin-top:10px;font-size:10px;color:#6f7a6b;letter-spacing:.12em;
  border-top:1px dashed #ffffff14;padding-top:8px;transition:color .3s}
.save-line.flash{color:var(--green-ok)}

/* 输入法捕获层 */
#ime-catcher{
  position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0.01;
  border:none;outline:none;background:transparent;color:transparent;font-size:16px;
}
body.typing #ime-catcher{left:50%;top:50%}

@media (max-width:1180px){
  #control-panel,#console-panel{width:216px;padding:12px}
  .brand-text p{letter-spacing:.18em}
}