/* 人狼盤面整理ツール
   配色は CSS 変数で持ち、<html data-theme="light|dark"> で切り替える。
   初回だけ OS の設定を見て、以降は選んだテーマを localStorage に残す。 */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #f8f9fb;
  --border: #d9dde3;
  --border-strong: #b9c0ca;
  --text: #1c2027;
  --text-dim: #646c78;
  --accent: #4a6fd4;
  --accent-soft: #e7edfb;
  --wolf: #d6455a;
  --wolf-soft: #fae3e7;
  --human: #3b7fd4;
  --human-soft: #e2eefb;
  --mad: #c47a1e;
  --dead: #9aa2ae;
  --shadow: 0 1px 3px rgba(20, 25, 35, .12);
}

/* テーマは <html data-theme> で決まる（起動時のスクリプトが必ず設定する） */
:root[data-theme="dark"] {
  --bg: #14171c;
  --panel: #1c2026;
  --panel-2: #23282f;
  --border: #333a44;
  --border-strong: #4a535f;
  --text: #e4e8ee;
  --text-dim: #99a3b0;
  --accent: #7a9bf0;
  --accent-soft: #28324a;
  --wolf: #ef6a7d;
  --wolf-soft: #40242a;
  --human: #68a4ee;
  --human-soft: #1f2e42;
  --mad: #d9a040;
  --dead: #6c7683;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

/* hidden 属性より display 指定が強いと、隠したはずの要素がクリックを奪ってしまう */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

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

button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--border-strong); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--wolf); }
button.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
button.ghost:hover { background: var(--panel-2); }

input[type="text"], input[type="number"], select, textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 7px;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------- ヘッダー */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.logo { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.title-input { width: 220px; }
.save-status { color: var(--text-dim); font-size: 12px; min-width: 60px; }
.theme-btn { min-width: 86px; }

/* --------------------------------------------------------------- 配置 */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  padding: 12px;
  align-items: start;
}
.col-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-side { position: sticky; top: 60px; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .col-side { position: static; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .06em;
}
.panel h3 {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row + .row { margin-top: 6px; }
.spacer { flex: 1 1 auto; }
.hint { color: var(--text-dim); font-size: 12px; }
.sep { color: var(--border-strong); }

/* ------------------------------------------------------------- セットアップ */

.setup-panel textarea { width: 100%; min-height: 200px; resize: vertical; }
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}
.role-grid label { display: flex; align-items: center; gap: 5px; justify-content: space-between; }
.role-grid input { width: 54px; }
.total-badge { font-weight: 700; }
.total-badge.bad { color: var(--wolf); }

.player-order { display: flex; flex-direction: column; gap: 4px; }
.player-order-row { display: flex; align-items: center; gap: 6px; }
.player-order-row .no { width: 26px; text-align: right; color: var(--text-dim); }
.player-order-row input { flex: 1 1 auto; min-width: 0; }

/* ----------------------------------------------------------- 状況まとめ */

.summary-head { cursor: pointer; font-weight: 700; color: var(--text-dim); font-size: 13px; letter-spacing: .06em; }
.summary-head > span { margin-right: 10px; }
.pill-toggle { font-size: 11px; padding: 1px 8px; font-weight: 400; letter-spacing: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.summary-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.summary-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.log-actions { margin-top: -2px; }
.summary-line b { font-weight: 700; color: var(--text-dim); font-size: 12px; }
.summary-line .warn { color: var(--wolf); font-weight: 700; }
.co-group { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }
.co-label { color: var(--accent); font-size: 12px; }

.pill-list { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.pill {
  display: inline-block;
  min-width: 19px;
  text-align: center;
  font-size: 11px;
  line-height: 17px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-variant-numeric: tabular-nums;
}
.pill.dead { color: var(--dead); text-decoration: line-through; opacity: .7; }
.pill.named { padding: 0 5px; font-size: 11px; }

/* 内容の幅に合わせる（flex の子なので放っておくと横いっぱいに伸びる） */
table.summary-table { border-collapse: collapse; font-size: 12px; width: auto; align-self: flex-start; max-width: 100%; }
table.summary-table th, table.summary-table td {
  border: 1px solid var(--border);
  padding: 3px 6px;
  text-align: left;
  vertical-align: middle;
}
table.summary-table th { background: var(--panel-2); color: var(--text-dim); font-size: 11px; white-space: nowrap; }
table.summary-table td.view-name { white-space: nowrap; }
table.log-table td { white-space: nowrap; }
table.log-table td.log-day { padding: 1px 3px; }
table.log-table tr.current-day td { background: var(--accent-soft); }
table.log-table th.col-head { padding: 2px 6px; }
table.log-table th.row-head { text-align: left; white-space: nowrap; padding: 2px 6px; }
table.log-table th.current-day { background: var(--accent-soft); }
table.log-table td.current-day { background: var(--accent-soft); }
.col-head-main { display: flex; align-items: center; gap: 3px; }
.col-head-sub { font-size: 10px; font-weight: 400; color: var(--text-dim); }

/* 経過表からそのまま直せるようにした箇所 */
.role-btn { cursor: pointer; font-family: inherit; }
.add-co-btn { font-size: 10px; padding: 0 5px; color: var(--accent); }
.role-btn:hover { background: var(--accent); color: #fff; }
.cell-btn {
  display: block;
  width: 100%;
  border: none;
  background: none;
  border-radius: 4px;
  padding: 1px 2px;
  text-align: left;
  cursor: pointer;
}
.cell-btn:hover { background: var(--accent-soft); outline: 1px solid var(--accent); }
.edit-row { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 6px; }

.judge-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.judge { display: inline-flex; align-items: center; gap: 1px; }
.judge .arrow { color: var(--text-dim); font-size: 10px; }
/* 白黒は記号の形で分かるので色は付けない（占い視点の表と揃える） */
.judge .mark { font-size: 11px; color: var(--text); }

/* ------------------------------------------------------------- 日エディタ */

.day-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.day-tab {
  padding: 4px 12px;
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent;
}
.day-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.event-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.event-box {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.event-box h3 { margin-top: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 4px 1px 9px;
  font-size: 12px;
}
.chip .x { border: none; background: none; cursor: pointer; color: var(--text-dim); padding: 0 3px; }
.chip .x:hover { color: var(--wolf); }
.chip.black { background: var(--wolf-soft); border-color: var(--wolf); }
.chip.white { background: var(--human-soft); border-color: var(--human); }

.vote-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.vote-input { width: 100%; min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vote-list { margin: 4px 0 0; padding-left: 22px; }
.vote-list li { margin-bottom: 2px; }
.vote-row { display: inline-flex; align-items: center; gap: 4px; }
.vote-row .x { border: none; background: none; cursor: pointer; color: var(--text-dim); padding: 0 3px; }
.vote-row .x:hover { color: var(--wolf); }

.day-note { width: 100%; min-height: 48px; resize: vertical; margin-top: 4px; }

/* ----------------------------------------------------------------- 盤面 */

.board-scroll { overflow-x: auto; }
table.board { border-collapse: collapse; width: 100%; font-size: 13px; }
table.board th, table.board td {
  border: 1px solid var(--border);
  padding: 3px 5px;
  text-align: left;
  vertical-align: middle;
}
table.board thead th {
  background: var(--panel-2);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.board tbody tr:hover td { background: var(--panel-2); }
table.board tr.dead td { color: var(--dead); }
table.board tr.dead .name-input { color: var(--dead); text-decoration: line-through; }
table.board tr.vp td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

td.col-no { width: 28px; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
td.col-name { min-width: 110px; }
.name-input { width: 100%; border-color: transparent; background: transparent; padding: 2px 4px; }
.name-input:hover { border-color: var(--border); }
td.col-state { white-space: nowrap; font-size: 12px; }
td.col-co { white-space: nowrap; }
td.col-day { min-width: 92px; }
td.col-prob { width: 128px; }

.tag {
  display: inline-block;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 17px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.tag.co { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag.white { background: var(--human-soft); border-color: var(--human); color: var(--human); }
.tag.black { background: var(--wolf-soft); border-color: var(--wolf); color: var(--wolf); }
.tag.dead { background: transparent; color: var(--dead); }
.tag.fixed { background: var(--wolf); border-color: var(--wolf); color: #fff; }
.tag.fixed-village { background: var(--human); border-color: var(--human); color: #fff; }

/* 尤度スイッチ（選択中の日のみ展開し、他の日は色チップだけ出す） */
.lk-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.lk-switch button {
  border: none;
  border-radius: 0;
  padding: 1px 0;
  width: 17px;
  font-size: 10px;
  line-height: 16px;
  background: var(--panel);
  color: var(--text-dim);
}
.lk-switch button + button { border-left: 1px solid var(--border); }
.lk-switch button[data-level="-3"].on, .lk-switch button[data-level="-2"].on, .lk-switch button[data-level="-1"].on { background: var(--human); color: #fff; }
.lk-switch button[data-level="0"].on { background: var(--border-strong); color: var(--panel); }
.lk-switch button[data-level="1"].on, .lk-switch button[data-level="2"].on, .lk-switch button[data-level="3"].on { background: var(--wolf); color: #fff; }
.lk-chip {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  border-radius: 4px;
  font-size: 11px;
  padding: 0 3px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.lk-chip.w { background: var(--human-soft); border-color: var(--human); color: var(--human); }
.lk-chip.b { background: var(--wolf-soft); border-color: var(--wolf); color: var(--wolf); }
.lk-custom { width: 54px; font-size: 11px; padding: 1px 3px; margin-left: 4px; }

/* ----------------------------------------------------------- 確率表示 */

.prob-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.prob-row .pno { width: 22px; text-align: right; color: var(--text-dim); font-size: 11px; }
.prob-row .pname { width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.prob-row .pval { width: 42px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.prob-row.dead .pname { color: var(--dead); text-decoration: line-through; }

.bar {
  flex: 1 1 auto;
  height: 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  min-width: 40px;
}
.bar i { display: block; height: 100%; }
.bar i.wolf { background: var(--wolf); }
.bar i.mad { background: var(--mad); }

.inline-bar { display: flex; height: 9px; border-radius: 3px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.cell-prob { display: flex; align-items: center; gap: 5px; }
.cell-prob .v { font-size: 11px; width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }

.legend { display: flex; gap: 10px; font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; }

.pair-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; }
.pair-row .names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-row .v { font-variant-numeric: tabular-nums; color: var(--text-dim); }

.alert {
  background: var(--wolf-soft);
  border: 1px solid var(--wolf);
  color: var(--wolf);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
.notice {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
.meta { color: var(--text-dim); font-size: 11px; margin-top: 8px; }

/* ------------------------------------------------------------- モーダル */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(640px, 100%);
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.modal-head h2 { margin: 0; font-size: 15px; }
.modal-body { padding: 12px 14px; }
.icon-btn { border: none; background: none; font-size: 18px; line-height: 1; padding: 2px 6px; }

/* README から生成した使い方の表示 */
.modal.wide { width: min(860px, 100%); }
.help-body { line-height: 1.75; }
.help-body h2 {
  font-size: 15px;
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.help-body h2:first-child { margin-top: 0; }
.help-body h3 { font-size: 13px; margin: 16px 0 6px; color: var(--text-dim); }
.help-body p { margin: 8px 0; }
.help-body ul, .help-body ol { margin: 8px 0; padding-left: 22px; }
.help-body li { margin-bottom: 3px; }
.help-body code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 12px;
}
.help-body pre {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
}
.help-body pre code { background: none; border: none; padding: 0; }
.help-body table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 8px 0; display: block; overflow-x: auto; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 4px 7px; text-align: left; white-space: nowrap; }
.help-body th { background: var(--panel-2); color: var(--text-dim); }
.help-body a { color: var(--accent); }

.game-list { display: flex; flex-direction: column; gap: 6px; }
.game-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
}
.game-item.current { border-color: var(--accent); background: var(--accent-soft); }
.game-item .gtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-item .gmeta { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

/* --------------------------------------------------------------- トースト */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--panel);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 60;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}