:root {
  --bg: #1A1C2C; --panel: #232635; --panel2: #2b2f42; --line: #3a3f57;
  --text: #C7CCDA; --dim: #7d8398; --cyan: #29ADFF; --magenta: #FF2E63;
  --gold: #FFD75E; --up: #3EC97C; --down: #E23B3B; --rust: #B0613C;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Ark Pixel", "Zpix", "Fusion Pixel", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; line-height: 1.5;
  image-rendering: pixelated;
}
body::after { /* 扫描线 */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 3px);
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* ── HUD ─────────────────────── */
#hud {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 12px; background: var(--panel); border-bottom: 2px solid var(--line);
  flex: 0 0 auto;
}
#hud-day { color: var(--gold); min-width: 150px; }
#hud-nw b { color: #fff; font-size: 15px; }
.tier { padding: 1px 8px; border: 2px solid var(--line); }
.tier-gold { color: var(--gold); border-color: var(--gold); }
.tier-silver { color: #cfd6e4; border-color: #cfd6e4; }
.tier-copper { color: var(--rust); border-color: var(--rust); }
.tier-iron { color: #8a90a8; border-color: #8a90a8; }
.tier-none { color: var(--down); border-color: var(--down); }
#hud-ap { display: flex; gap: 3px; }
.ap { width: 10px; height: 10px; background: var(--panel2); border: 1px solid var(--line); display: inline-block; }
.ap.on { background: var(--cyan); }
#hud-stats { display: flex; gap: 10px; margin-left: auto; }
.stat { display: flex; align-items: center; gap: 4px; }
.stat label { color: var(--dim); font-size: 11px; }
.stat .bar { width: 44px; height: 8px; background: var(--panel2); border: 1px solid var(--line); }
.stat .bar i { display: block; height: 100%; background: var(--cyan); }
.stat span { font-size: 11px; width: 22px; text-align: right; }
.stat.crit .bar i { background: var(--down); animation: blink 1s steps(2) infinite; }
.stat.crit label { color: var(--down); }
@keyframes blink { 50% { opacity: .3; } }
#btn-restart { margin-left: 10px; }
.warn { color: var(--rust); font-size: 11px; }
.warn.crit { color: var(--down); animation: blink 1s steps(2) infinite; }

/* ── 布局 ────────────────────── */
main { display: grid; grid-template-columns: 348px minmax(380px, 1fr) 280px; gap: 8px; padding: 8px; flex: 1 1 auto; min-height: 0; min-width: 1060px; }
#app { min-width: 1060px; }
html { overflow-x: auto; }
#col-market, #col-stage, #col-news { background: var(--panel); border: 2px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
#col-news { padding: 8px; }

/* 行情表 */
#stock-table { flex: 1 1 auto; overflow-y: auto; min-height: 160px; }
.srow {
  display: grid; grid-template-columns: 46px 1fr 62px 58px 60px;
  gap: 4px; padding: 3px 8px; cursor: pointer; border-bottom: 1px solid #262a3c;
  font-size: 12px; white-space: nowrap;
}
.srow:hover { background: var(--panel2); }
.srow.sel { background: #2d3350; outline: 1px solid var(--cyan); }
.srow.halted { opacity: .45; }
.shead { color: var(--dim); position: sticky; top: 26px; background: var(--panel); cursor: default; }
.srow.pos { grid-template-columns: 44px 56px 52px 52px 60px 1fr; }
.srow.ptotal { border-top: 2px solid var(--line); color: #fff; cursor: default; }
.tabs { display: flex; gap: 0; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tabs .tab { flex: 1; border: none; border-bottom: 2px solid var(--line); background: none; padding: 4px 0; }
.tabs .tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.cpbal { color: var(--gold); }
.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--dim); }

/* 详情/交易 */
#detail { flex: 0 0 auto; border-top: 2px solid var(--line); padding: 8px; }
#kline { width: 100%; background: #141622; border: 1px solid var(--line); }
.dname { margin-top: 6px; color: #fff; }
.dblurb { color: var(--dim); font-size: 12px; }
.dpx { margin: 4px 0; }
.qty { margin: 4px 0; font-size: 12px; }
.qty .q { min-width: 40px; padding: 3px 6px; }
.ctabs { float: right; }
.ctabs .ct { padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.ctabs .ct.on { border-color: var(--cyan); color: var(--cyan); }
.qty .q.on { border-color: var(--cyan); color: var(--cyan); }
.tbtns { display: flex; gap: 6px; }
.thint { font-size: 11px; margin-top: 4px; }

/* 舞台 */
#scene { flex: 0 0 auto; position: relative; border-bottom: 2px solid var(--line); overflow: hidden; background: #10121f; }
#scene-cv { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.scene-cap {
  position: absolute; top: 6px; left: 10px; color: var(--text); letter-spacing: 3px; font-size: 11px;
  background: rgba(16, 18, 31, .72); padding: 1px 8px; border: 1px solid var(--line);
}
#panel { padding: 10px; overflow-y: auto; flex: 1 1 auto; }
.ptitle { color: var(--gold); margin-bottom: 8px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.clockrow { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.clockrow .sp { min-width: 40px; padding: 3px 6px; }
.clockrow .sp.on { border-color: var(--up); color: var(--up); }
#clockbar { color: var(--gold); margin-left: 8px; letter-spacing: 1px; }
.cbar { color: var(--dim); }
.workveil { border: 1px dashed var(--cyan); color: var(--cyan); padding: 6px 10px; margin: 6px 0; }
.bossline { border: 1px solid var(--gold); color: var(--gold); padding: 5px 10px; margin: 8px 0; font-size: 12px; }
.pnote { margin-top: 4px; }
button {
  background: var(--panel2); border: 2px solid var(--line); color: var(--text);
  padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 12px;
}
button:hover:not(:disabled) { border-color: var(--cyan); color: #fff; }
button:disabled { opacity: .4; cursor: default; }
button.primary { border-color: var(--gold); color: var(--gold); }
button.primary:hover { background: #3a3520; color: var(--gold); }

/* 晚市/夜间 */
.fearboard { border: 1px dashed var(--rust); color: var(--rust); padding: 6px 10px; margin-bottom: 8px; }
.fearboard b { color: var(--gold); }
.timer { color: var(--up); border: 1px solid var(--line); padding: 0 8px; margin-left: 8px; }
.timer.crit { color: var(--down); animation: blink .5s steps(2) infinite; }
.goods { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.gitem {
  display: grid; grid-template-columns: 30px 116px 1fr 84px 56px; gap: 8px; align-items: center;
  background: var(--panel2); padding: 5px 10px; font-size: 12px;
}
.gicon { width: 26px; height: auto; image-rendering: pixelated; }
#dice-cv { width: 200px; height: auto; image-rendering: pixelated; display: block; margin: 8px 0; }
.gitem.out { opacity: .4; }
.gitem b { text-align: right; }
.ticket { border: 1px dashed var(--line); padding: 8px 10px; margin: 8px 0; max-width: 420px; background: #1e2130; }
.ticket div { display: flex; justify-content: space-between; gap: 20px; }
.tickhead { color: var(--gold); }

/* 新闻 */
#news-log { overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.news { font-size: 12px; border-left: 3px solid var(--line); padding: 2px 6px; }
.news.up { border-color: var(--up); }
.news.down { border-color: var(--down); }
.news.rumor { border-color: var(--gold); color: #d8cd9d; }
.news.life { border-color: var(--cyan); }
.news.sys { border-color: var(--dim); color: var(--dim); }

/* 提示 */
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 50; align-items: center; }
.toast {
  background: #10121f; border: 2px solid var(--line); padding: 6px 14px; max-width: 640px;
  opacity: 0; transition: opacity .3s; font-size: 12px;
}
.toast.show { opacity: 1; }
.toast.sell { border-color: var(--magenta); }
.toast.warn { border-color: var(--down); color: var(--down); }
.toast.ledger { border-color: var(--gold); }

/* 覆盖层 */
#overlay {
  position: fixed; inset: 0; background: rgba(6, 7, 14, .88); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
#overlay.hidden { display: none; }
.ov-box {
  background: var(--panel); border: 2px solid var(--line); padding: 22px 26px;
  max-width: 620px; width: min(92vw, 620px); max-height: 84vh; overflow-y: auto;
}
.ov-box h2 { color: var(--gold); margin-bottom: 10px; }
.assets-h { margin-top: 14px; }
.ov-box h3 { color: var(--gold); margin-bottom: 10px; font-size: 14px; }
.ov-box p { margin-bottom: 8px; }
.warnline { color: var(--down); border: 1px dashed var(--down); padding: 4px 8px; margin: 6px 0; }
.gameover h2 { color: var(--down); }

/* 开盘铃 */
.bell { max-width: 680px; width: 92vw; text-align: center; }
.bell .bell-day { color: var(--gold); font-size: 18px; letter-spacing: 4px; margin-bottom: 14px; }
#bell-lines > div { margin: 8px 0; animation: stamp .25s steps(3); }
.knife { color: #fff; }
.dinner { color: var(--magenta); }
.bnews { color: var(--dim); font-size: 12px; }
.bell button { margin-top: 16px; }
@keyframes stamp { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hidden { display: none !important; }