:root {
  --ink: #1a1a1a;
  --muted: #666;
  --line: #d9e0ec;
  --paper: #f6f4ee;
  --panel: #ffffff;
  --navy: #1f3864;
  --blue: #2e5496;
  --gold: #b8860b;
  --red: #b00020;
  --green: #2f6b3a;
  --soft: #eef2f8;
  --shadow: 0 8px 24px rgba(31, 56, 100, 0.08);
  font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--blue); }
button { font: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 3px solid var(--navy);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-mark { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: 1px; }
.brand-sub { font-size: 11px; color: var(--muted); }
.topmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phase-pill, .role-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--line);
}
.timer {
  min-width: 96px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.timer.warn { color: var(--red); }

.banner {
  background: #fff8e6;
  border-bottom: 1px solid #ead9a8;
  color: #6b5320;
  padding: 8px 22px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.banner-links { white-space: nowrap; }

#app { padding: 18px 22px 28px; }
.lobby { max-width: 860px; margin: 40px auto; }
.lobby h1 { color: var(--navy); margin-bottom: 6px; }
.lobby .role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.role-card {
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.role-card:hover { transform: translateY(-2px); border-color: var(--blue); }
.role-kicker { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.role-title { font-size: 24px; font-weight: 800; color: var(--navy); margin: 4px 0; }
.role-sub { color: var(--ink); }
.role-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
.lobby-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.game {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.5fr) minmax(250px, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1480px;
  margin: 0 auto;
}
.player-panel, .board {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.player-panel.p1 { border-top: 4px solid var(--navy); }
.player-panel.p2 { border-top: 4px solid #6a4c93; }
.player-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.player-title { font-weight: 800; color: var(--navy); font-size: 16px; }
.player-sub { font-size: 11px; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.stat {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
}
.stat b { display: block; font-size: 16px; color: var(--navy); }
.stat span { font-size: 10px; color: var(--muted); }
.ready-state { font-size: 12px; font-weight: 700; color: var(--muted); }
.ready-state.on { color: var(--green); }

.section-label {
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 0 6px;
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .7px;
}
.hand { display: flex; flex-direction: column; gap: 8px; }
.card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 9px;
  background: #fff;
  padding: 8px 9px;
  position: relative;
}
.card.ally { border-left-color: var(--green); }
.card.attachment { border-left-color: var(--gold); }
.card.event { border-left-color: #6a4c93; }
.card.enemy { border-left-color: var(--red); }
.card.location { border-left-color: #2f6b3a; }
.card.treachery { border-left-color: #7a3e9d; }
.card.hero { border-left-color: var(--navy); }
.card-name { font-weight: 800; font-size: 13px; color: var(--ink); }
.card-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.card-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; margin-top: 4px; color: var(--ink); }
.card-stats span { background: var(--soft); border-radius: 5px; padding: 1px 5px; }
.card-text { font-size: 11px; color: #444; margin-top: 4px; }
.card-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.card.disabled { opacity: .55; }

.char-list { display: flex; flex-direction: column; gap: 6px; }
.char {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fbfcff;
}
.char.exhausted { opacity: .55; }
.char input { accent-color: var(--navy); }
.char-main { flex: 1; min-width: 0; }
.char-name { font-weight: 700; font-size: 12px; }
.char-stats { font-size: 10px; color: var(--muted); }
.badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--soft); color: var(--navy); border: 1px solid var(--line); }

.markers { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.waiting {
  min-height: 17px;
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 2px;
  padding: 2px 7px;
  border-radius: 6px;
}
.waiting.active {
  color: #8a5a00;
  background: #fff7e0;
  border: 1px solid #ead9a8;
}
.combat-preview {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fbfcff;
}
.combat-preview:empty { display: none; }
.preview-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.preview-title span {
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.preview-grid {
  display: grid;
  grid-template-columns: .8fr 1fr 1.2fr;
  gap: 8px;
  font-size: 11px;
}
.preview-grid b { color: var(--navy); }
.combat-result {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}
.longest-note {
  background: #fff7e0;
  border: 1px solid #ead9a8;
  color: #6b5320;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin: 10px 0;
}
table.metrics tr.longest { background: #fff7e0; font-weight: 700; }
.marker-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
}
.marker-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: #16305a; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.danger { color: var(--red); border-color: #e2b6bd; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 5px 9px; font-size: 11px; }

.board { min-height: 520px; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.board-title { font-size: 16px; font-weight: 800; color: var(--navy); }
.quest-card {
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #f7f9ff, #fff);
  margin-top: 10px;
}
.quest-name { font-weight: 800; color: var(--navy); }
.quest-stage { font-size: 11px; color: var(--muted); }
.progress-wrap { margin-top: 8px; }
.progress-bar { height: 12px; background: #e7ecf5; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--navy), var(--blue)); width: 0%; transition: width .3s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }

.zone { margin-top: 12px; }
.zone-title { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 6px; }
.zone-list { display: flex; flex-direction: column; gap: 7px; }
.empty { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; color: var(--muted); font-size: 11px; }

.log {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  max-height: 220px;
  overflow: auto;
  font-size: 11px;
  color: #444;
}
.log-line { padding: 3px 0; border-bottom: 1px dotted #eee; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }

.debrief { max-width: 980px; margin: 30px auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.debrief h1 { color: var(--navy); margin-top: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.summary-box { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.summary-box b { display: block; font-size: 22px; color: var(--navy); }
.summary-box span { font-size: 11px; color: var(--muted); }
table.metrics { width: 100%; border-collapse: collapse; font-size: 12px; }
table.metrics th, table.metrics td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; }
table.metrics th { background: var(--soft); color: var(--navy); font-size: 11px; }
table.metrics td.num { text-align: right; font-variant-numeric: tabular-nums; }
.debrief-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  width: min(460px, 92vw);
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  border-top: 4px solid var(--red);
}
.modal-kicker { font-size: 11px; color: var(--red); font-weight: 800; letter-spacing: .8px; }
.modal h2 { margin: 4px 0 6px; color: var(--navy); }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.window-status { margin-top: 10px; font-size: 12px; color: var(--ink); }
.window-combat {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f7fc;
  border: 1px solid var(--line);
  font-size: 12px;
  color: #333;
}
.travel-box {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f4f7fc;
  border: 1px solid var(--line);
  font-size: 12px;
  color: #333;
}
.result-banner {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.result-banner.win {
  background: #eaf6ec;
  border-color: #b7d9bd;
  color: #21552b;
}
.result-banner.loss {
  background: #fbecee;
  border-color: #e2b6bd;
  color: #7a1220;
}

.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 22px 20px; color: var(--muted); font-size: 11px;
}

/* Stage 4A additions */
.lobby-decks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.lobby-deck { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.lobby-deck h2 { margin: 2px 0 10px; color: var(--navy); font-size: 18px; }
.deck-select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.lobby-row { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.lobby-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.lobby-row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lobby-deck select:disabled { opacity: .55; }
.board-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.panel-section { margin-top: 10px; }
.hand-count { font-size: 11px; color: var(--muted); }
.action-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.action-note { font-size: 11px; color: var(--muted); margin: 6px 0; }
.zone-list.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.choice-list { display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow: auto; margin-top: 10px; }
.choice-option { display: flex; align-items: flex-start; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: #fbfcff; font-size: 12px; }
.choice-option input { margin-top: 2px; }
.choice-option .choice-main { flex: 1; }
.choice-option .choice-sub { color: var(--muted); font-size: 10px; }
.choice-field { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; font-size: 12px; color: var(--muted); }
.choice-field select, .choice-field input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; background: #7a1220; color: #fff; padding: 10px 14px; border-radius: 9px; font-size: 12px; box-shadow: var(--shadow); max-width: 360px; }
.empty { color: var(--muted); font-size: 12px; padding: 4px 0; }
.combat-box { border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; background: #fbfcff; font-size: 12px; margin-top: 8px; }
.combat-box b { color: var(--navy); }
.quest-progress { height: 7px; border-radius: 999px; background: var(--soft); overflow: hidden; margin-top: 5px; }
.quest-progress > i { display: block; height: 100%; background: var(--gold); }
.foot { margin-top: 10px; }
.response-zone { border-color: #b8872f; background: #fffdf6; }
.response-box { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; margin-top: 7px; }
.response-box.blocking { border-left: 4px solid var(--gold); }
.response-box.queued { border-left: 4px solid #5c7fa8; }
.response-prompt { font-size: 12px; line-height: 1.5; margin: 4px 0 2px; }
.response-wait { color: var(--muted); font-size: 11px; padding: 5px 0 1px; }

@media (max-width: 1080px) {
  .game { grid-template-columns: 1fr 1fr; }
  .board { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 720px) {
  .game { grid-template-columns: 1fr; }
  .board { order: -1; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .lobby .role-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
}

/* Round timing / response-window track */
.turn-track {
  max-width: 1480px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.turn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.turn-heading { min-width: 0; flex: 1; }
.turn-kicker { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.turn-current { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.turn-current b { color: var(--navy); font-size: 16px; }
.turn-current span {
  color: var(--blue);
  background: #eef3ff;
  border: 1px solid #d8e2ff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.turn-detail { color: var(--muted); font-size: 11px; margin-top: 3px; }
.turn-window {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 7px 10px;
  font-size: 10px;
  line-height: 1.35;
}
.turn-window b { font-size: 11px; }
.turn-window span { color: var(--muted); }
.turn-window.block { background: #fff2f0; border-color: #e7b6ae; }
.turn-window.block b { color: var(--red); }
.turn-window.queued { background: #fff8e6; border-color: #e6d39c; }
.turn-window.queued b { color: #8a6200; }
.turn-window.open { background: #eef6ff; border-color: #b9d2ee; }
.turn-window.open b { color: var(--blue); }
.turn-window.action { background: #f2f8f3; border-color: #c8dfcd; }
.turn-window.action b { color: var(--green); }
.turn-phases { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.turn-phase {
  flex: 1 0 82px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfe;
  color: #9aa3b2;
  font-size: 11px;
  white-space: nowrap;
}
.turn-phase b { font-weight: 700; }
.turn-phase.done { background: #f1f4f9; color: #77839a; border-color: #e3e8f1; }
.turn-phase.active {
  background: #eef3ff;
  border-color: var(--blue);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(46, 84, 150, .18);
}
.turn-num {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8edf5;
  color: #7c8798;
  font-size: 10px;
  font-weight: 800;
}
.turn-phase.active .turn-num { background: var(--blue); color: #fff; }
.turn-phase.done .turn-num { background: #d7e1d9; color: var(--green); }
.turn-current-tag { margin-left: auto; color: var(--blue); font-size: 9px; font-weight: 800; }
.turn-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.turn-step {
  border: 1px dashed #d9dee7;
  border-radius: 999px;
  padding: 2px 8px;
  color: #8a94a4;
  background: #fafbfc;
  font-size: 10px;
}
.turn-step.done { background: #f1f4f8; border-color: transparent; color: #69758a; }
.turn-step.active { background: #fff; border: 1px solid var(--blue); color: var(--navy); font-weight: 700; }
.board-step { color: var(--muted); font-size: 11px; text-align: right; }

.timing-zone { border-color: #b8872f; background: #fffdf6; }
.timing-wait { color: var(--muted); font-size: 11px; padding: 5px 0 1px; }

@media (max-width: 720px) {
  .turn-head { flex-direction: column; }
  .turn-window { flex-basis: auto; width: 100%; }
  .turn-phase { flex-basis: 76px; }
}

.card-resources {
  margin-top: 4px;
  color: var(--gold, #b8860b);
  font-size: 12px;
  font-weight: 600;
}

.choice-hint {
  margin: -2px 0 8px;
  color: var(--muted, #666);
  font-size: 12px;
  line-height: 1.4;
}

/* House rules */
.house-rule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed #c9d3e3;
  border-radius: 10px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 12px;
}
.house-rule-summary b { color: var(--navy); }
.house-rules-modal { width: min(640px, 94vw); }
.house-rule {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  background: #fbfcfe;
}
.house-rule.on { border-color: #b8872f; background: #fffdf6; }
.house-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.house-rule-name { color: var(--navy); font-weight: 700; }
.house-rule-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.house-rule.on .house-rule-badge { background: #f3e7c8; color: #7a5a13; }
.house-rule-tagline { color: var(--muted); font-size: 11px; margin-top: 2px; }
.house-rule-desc { margin-top: 9px; color: var(--text, #333); font-size: 12px; line-height: 1.5; }
.house-rule-official { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.shadow-notice {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid #8b3a3a;
  background: #fbf1ee;
  border-radius: 4px;
}
.shadow-title {
  font-weight: 700;
  color: #7a2e2e;
  font-size: 12px;
}
.shadow-effect {
  margin-top: 2px;
  color: #3d3330;
  font-size: 12px;
  line-height: 1.45;
}
.shadow-effect.none {
  color: #7a746e;
  font-style: italic;
}

.reveal-zone { border-color: #b8872f; background: #fffdf6; }
.reveal-flag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3e7c8;
  color: #7a5a13;
  font-size: 10px;
  font-weight: 700;
}
.reveal-status {
  margin-top: 4px;
  color: #7a5a13;
  font-size: 11px;
}
.zone-count {
  float: right;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}