/* ==========================================================================
   抽号斗士 3D · 瑞士国际主义风格（International Typographic Style）
   浅色纸面 · 无衬线大字 · 严格网格 · 单一红色重音 · 硬边直角 · 零圆角
   ========================================================================== */

:root {
  --paper: #f4f3ef;
  --paper-2: #ffffff;
  --ink: #121212;
  --ink-soft: #5f5f5a;
  --rule: #d4d2cb;
  --rule-strong: #121212;
  --red: #e2231a;

  --f-sans: "Helvetica Neue", Helvetica, "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", system-ui, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gap: 12px;
  --pad: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

/* 大号数字统一用等宽，栏位对齐才像排版 */
.mono, .lb-rate, .chip-num, .power b, .card-sub, .lb-wl { font-variant-numeric: tabular-nums; }

.app { height: 100vh; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- 顶部栏 */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pad);
  align-items: end;
  padding: 15px var(--pad) 13px;
  background: var(--paper-2);
  border-bottom: 2px solid var(--rule-strong);
}

.brand { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.logo {
  width: 36px; height: 36px;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 21px;
  letter-spacing: -0.04em;
  flex: none;
}
.brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.brand p {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mode-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  color: var(--paper-2);
  background: var(--ink);
}

.controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.controls input[type='number'] {
  width: 176px;
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  outline: none;
}
.controls select {
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  outline: none;
}
.controls input:focus, .controls select:focus { box-shadow: inset 0 0 0 2px var(--red); }

/* 按钮：直角、描边、大写小字号；首要用实心黑、危险用红 */
.btn {
  padding: 8px 13px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.btn:hover:not(:disabled) { background: var(--ink); color: var(--paper-2); }
.btn:disabled { opacity: .34; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--paper-2); }
.btn.primary:hover:not(:disabled) { background: var(--red); color: #fff; }
.btn.danger { border-color: var(--red); background: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.btn.ghost { border-color: var(--rule); background: transparent; }
.btn.small { padding: 6px 10px; font-size: 10px; }

/* ---------------------------------------------------------------- 主网格 */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  grid-template-rows: minmax(0, 1fr) 306px;
  gap: 2px;
  padding: 2px;
  min-height: 0;
  background: var(--rule);
}

.stage {
  position: relative;
  grid-column: 1; grid-row: 1;
  background: var(--paper);
  overflow: hidden;
  min-height: 0;
}
#canvas { display: block; width: 100%; height: 100%; }

.panel {
  grid-column: 2; grid-row: 1;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dock {
  grid-column: 1 / 3; grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 2px;
  min-height: 0;
}
.dock-col {
  background: var(--paper-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 区块标题：小号大写字距 + 上下细线 */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
}
.dock-col .panel-head { padding: 2px 0 7px; }
.panel-head h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hint { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-soft); }

/* ------------------------------------------------------------ 血条 / 状态 */
.hp-overlay {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.hp-side { flex: 1; }
.hp-side.right { text-align: right; }
.hp-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--ink);
}
.hp-track { height: 9px; background: var(--rule); overflow: hidden; }
.hp-track i { display: block; height: 100%; background: var(--ink); transition: width .16s linear, background .16s linear; }
.hp-side.right .hp-track i { margin-left: auto; }
.hp-text { font-size: 10px; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.vs {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 2px 7px;
}

.status {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink);
  max-width: 90%;
  text-align: center;
}
.status.ok { border-color: #0f7a3d; }
.status.ok::before { content: "● "; color: #0f7a3d; }
.status.err { border-color: var(--red); color: var(--red); }
.status.err::before { content: "● "; color: var(--red); }

.round-badge {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 13px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 冠军：纸面大牌 + 红色压条，不用发光 */
.champion-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 44px 20px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-top: 6px solid var(--red);
  text-align: center;
  pointer-events: none;
  animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.champion-banner span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--red);
}
.champion-banner b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
@keyframes rise { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }

/* ---------------------------------------------------------------- 排行榜 */
.leaderboard { flex: 1; overflow-y: auto; padding: 0; }
.lb-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}
.lb-row.lb-top { background: var(--paper); }
.lb-row.lb-a { box-shadow: inset 3px 0 0 var(--ink); }
.lb-row.lb-b { box-shadow: inset -3px 0 0 var(--red); }
.lb-rank {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lb-row.lb-top .lb-rank { color: var(--red); }
.lb-main { min-width: 0; }
.lb-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.lb-meta { font-size: 10px; color: var(--ink-soft); margin: 1px 0 4px; }
.lb-bar { height: 3px; background: var(--rule); overflow: hidden; }
.lb-bar i { display: block; height: 100%; background: var(--ink); transition: width .3s linear; }
.lb-stats { text-align: right; min-width: 62px; }
.lb-rate { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.lb-wl { font-size: 9px; color: var(--ink-soft); letter-spacing: 0.04em; }
.empty { color: var(--ink-soft); font-size: 11px; padding: 22px 12px; text-align: center; letter-spacing: 0.04em; }

/* ------------------------------------------------------------ 抽号池 */
.search {
  width: 148px;
  padding: 5px 8px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 11px;
  outline: none;
}
.search:focus { box-shadow: inset 0 0 0 2px var(--red); }
.add-row { display: flex; align-items: center; gap: 8px; padding: 7px 0 3px; }
.add-row .tiny {
  width: 62px;
  padding: 5px 7px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 11px;
  outline: none;
}
.roster {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  padding: 8px 0 2px;
}
/* 号码格子：方角、等宽、按派系色标左侧，看起来像排版图表 */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent, var(--ink));
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  transition: background .1s linear, border-color .1s linear;
}
.chip:hover { background: var(--paper); border-color: var(--ink); }
.chip-num { color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; }
.chip-name { font-weight: 700; }
.chip-tag { font-size: 9px; color: var(--ink-soft); letter-spacing: 0.04em; }
.chip.chip-a { background: var(--ink); border-color: var(--ink); }
.chip.chip-a .chip-num, .chip.chip-a .chip-name, .chip.chip-a .chip-tag { color: var(--paper-2); }
.chip.chip-b { background: var(--red); border-color: var(--red); }
.chip.chip-b .chip-num, .chip.chip-b .chip-name, .chip.chip-b .chip-tag { color: #fff; }

/* ------------------------------------------------------------ 对撞区卡片 */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 7px 0; background: var(--rule); }
.card { background: var(--paper-2); padding: 9px 10px; min-height: 116px; }
.card-empty { color: var(--ink-soft); font-size: 11px; padding: 22px; text-align: center; }
.card-head { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  color: var(--ink);
}
.card-name { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { font-size: 9px; color: var(--ink-soft); letter-spacing: 0.03em; }
.power { text-align: right; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.power b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.stats { margin: 8px 0 5px; }
.stat { display: grid; grid-template-columns: 12px 1fr 24px; align-items: center; gap: 6px; font-size: 9px; color: var(--ink-soft); margin-bottom: 3px; }
.stat b { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .bar { height: 3px; background: var(--rule); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--ink); }
.card-foot { font-size: 9px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 5px; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- 战报 */
.log { flex: 1; overflow-y: auto; padding: 4px 0; font-size: 11px; }
.log-line {
  padding: 2px 0 2px 8px;
  border-left: 2px solid var(--rule);
  margin-bottom: 1px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.log-line.log-hit { border-color: var(--ink); color: var(--ink); }
.log-line.log-crit { border-color: var(--red); color: var(--red); font-weight: 700; }
.log-line.log-miss { border-color: var(--rule); color: var(--ink-soft); }
.log-line.log-win { border-color: var(--ink); color: var(--ink); font-weight: 800; }
.log-line.log-draw { border-color: var(--ink-soft); color: var(--ink); }
.log-line.log-info { border-color: var(--ink); color: var(--ink); letter-spacing: 0.06em; }
.log-line.log-err { border-color: var(--red); color: var(--red); }

/* ------------------------------------------------------------ 名单弹窗 */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, .34);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal.open { display: flex; }
.modal-card {
  width: min(660px, 92vw);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-top: 6px solid var(--red);
  padding: 20px 22px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.modal-hint { font-size: 11px; color: var(--ink-soft); line-height: 1.75; margin: 10px 0 12px; }
.modal-card textarea {
  width: 100%;
  height: 238px;
  resize: vertical;
  padding: 11px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  outline: none;
}
.modal-card textarea:focus { box-shadow: inset 0 0 0 2px var(--red); }
.modal-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; flex-wrap: wrap; }
.modal-row .inline { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1080px) {
  html, body { overflow: auto; }
  .layout { grid-template-columns: 1fr; grid-template-rows: 46vh auto auto; overflow-y: auto; }
  .stage { grid-column: 1; grid-row: 1; }
  .panel { grid-column: 1; grid-row: 3; max-height: 440px; }
  .dock { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .topbar { grid-template-columns: 1fr; align-items: start; }
}