/* ドミニオン対CPU — 画面スタイル
   カードの色は公式の枠色に合わせている(財宝=黄、勝利点=緑、呪い=紫、
   アタック=赤、リアクション=青、通常のアクション=白)。 */

:root {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --ink: #23201b;
  --ink-soft: #6b655c;
  --line: #d8d2c6;
  --accent: #2f6f4f;
  --accent-ink: #ffffff;
  --pick: #1f9d55;
  --warn: #b4442f;

  --c-action: #f6f4ef;
  --c-treasure: #f5e3a8;
  --c-victory: #c8e0bd;
  --c-curse: #d9c6e4;
  --c-attack: #f0c9c0;
  --c-reaction: #c3d7ee;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a18;
    --panel: #26241f;
    --ink: #eceae4;
    --ink-soft: #a49d92;
    --line: #3c3931;
    --accent: #4f9d76;
    --c-action: #35322b;
    --c-treasure: #6b5c2c;
    --c-victory: #35533a;
    --c-curse: #4c3a58;
    --c-attack: #5e3630;
    --c-reaction: #2f4460;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", Meiryo, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: 1rem; letter-spacing: .02em; }
h3 { font-size: .8rem; color: var(--ink-soft); text-transform: none; }

.hint { color: var(--ink-soft); font-size: .8rem; font-weight: 400; }

/* ───── ヘッダー ───── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1.05rem; }
.topbar .sub { color: var(--ink-soft); font-weight: 400; font-size: .8rem; margin-left: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.status { color: var(--ink-soft); font-size: .82rem; min-height: 1em; }
.status.thinking::after {
  content: ""; display: inline-block; width: 1em; text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* ───── ボタン ───── */
button {
  font: inherit; font-size: .85rem; cursor: pointer;
  border-radius: 8px; padding: 7px 14px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  transition: background .12s, border-color .12s, transform .06s;
}
button:hover { border-color: var(--accent); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { border-color: var(--line); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.segmented button:last-child { border-right: 0; }
.segmented button.on { background: var(--accent); color: var(--accent-ink); }

/* ───── オーバーレイ ───── */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20,18,15,.45);
  display: grid; place-items: center; padding: 20px;
  overflow: auto;
}
.overlay.hidden { display: none; }
.panel {
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  padding: 22px; width: min(760px, 100%); max-height: 90vh; overflow: auto;
}
.panel h2 { font-size: 1.15rem; margin-bottom: 14px; }
.panel section { margin: 18px 0; }
.panel section h3 { margin-bottom: 8px; font-size: .9rem; color: var(--ink); }
.panel-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.row label { display: flex; gap: 6px; align-items: center; font-size: .85rem; }
select { font: inherit; font-size: .85rem; padding: 6px 8px; border-radius: 8px;
         border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.help-list { padding-left: 1.2em; }
.help-list li { margin: 6px 0; }

/* 王国カードの選択 */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.picker .chip {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  font-size: .8rem; text-align: left; line-height: 1.3; background: var(--c-action);
}
.picker .chip .cost { color: var(--ink-soft); font-size: .72rem; }
.picker .chip.on { outline: 2px solid var(--pick); outline-offset: -2px; }

/* ───── 盤面 ───── */
.board {
  display: grid; gap: 14px; padding: 14px;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "supply side" "play side" "hand hand";
  /* 中段(場)を伸ばして、手札を常に画面下端に置く */
  grid-template-rows: auto 1fr auto;
  align-items: start;
  max-width: 1500px; margin: 0 auto;
  min-height: calc(100vh - 58px);
}
.board.hidden { display: none; }
@media (max-width: 960px) {
  .board { grid-template-columns: 1fr; grid-template-areas: "supply" "play" "hand" "side"; }
}

.supply-area { grid-area: supply; }
.side { grid-area: side; position: sticky; top: 64px; }
.play-area { grid-area: play; display: grid; gap: 8px; }
.hand-area {
  grid-area: hand; position: sticky; bottom: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; box-shadow: var(--shadow); z-index: 10;
}

.supply-area h2, .side h2 { margin-bottom: 8px; }
button.tiny { font-size: .72rem; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

.card-row { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px; align-items: flex-start; }

/* ───── カード ───── */
.card {
  position: relative; width: 96px; min-height: 74px;
  border: 1px solid rgba(0,0,0,.18); border-radius: var(--radius);
  background: var(--c-action); color: var(--ink);
  padding: 6px 7px; text-align: left; font-size: .78rem; line-height: 1.25;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  cursor: default; user-select: none;
}
.card.small { width: 78px; min-height: 58px; font-size: .72rem; }
.card .name { font-weight: 650; }
.card .meta { color: var(--ink-soft); font-size: .7rem; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.card .meta .cost {
  background: rgba(0,0,0,.14); color: var(--ink);
  border-radius: 5px; padding: 0 4px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .card .meta .cost { background: rgba(255,255,255,.16); } }
.card .meta .val { font-size: .68rem; }
.card .count { margin-top: auto; font-variant-numeric: tabular-nums; font-size: .72rem; }
.card .badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  border-radius: 10px; background: var(--ink); color: var(--bg);
  font-size: .7rem; display: grid; place-items: center; padding: 0 5px;
}

.t-treasure { background: var(--c-treasure); }
.t-victory  { background: var(--c-victory); }
.t-curse    { background: var(--c-curse); }
.t-attack   { background: var(--c-attack); }
.t-reaction { background: var(--c-reaction); }

.card.pickable { cursor: pointer; outline: 2px solid var(--pick); outline-offset: -2px; }
.card.pickable:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card.selected { outline: 3px solid var(--warn); outline-offset: -3px; }
.card.empty { opacity: .35; }
.card.dim { opacity: .55; }

/* ───── プレイヤー情報 ───── */
.player-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); font-size: .82rem;
}
.player-strip .who { font-weight: 650; }
.player-strip.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.player-strip .stat { color: var(--ink-soft); }
.player-strip .stat b { color: var(--ink); font-variant-numeric: tabular-nums; }
.player-strip .stat.hl { color: var(--accent); font-weight: 600; }
.player-strip .stat.hl b { color: var(--accent); }

.zone h3 { margin-bottom: 4px; }

/* ───── スコア・ログ ───── */
/* 勝利点は画面上部(固定ヘッダー)に常に出す */
.topscore { display: flex; gap: 8px; margin-left: auto; }
.score-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  font-size: .85rem; white-space: nowrap;
}
.score-chip:empty { display: none; }
.score-chip b { margin-left: 8px; font-variant-numeric: tabular-nums; }

/* 「1手戻す」は他のボタンと離して右端に */
#actions .undo { margin-left: auto; }

/* サプライ: 財宝 / 勝利点 / 王国カード を1行ずつ */
.supply-rows { display: flex; flex-direction: column; gap: 10px; }

.log {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 8px 10px; height: 380px; overflow-y: auto;
  font-size: .78rem; line-height: 1.5;
}
.log div { padding: 1px 0; }
.log .turn { margin-top: 6px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 5px; }
.log .me { color: var(--accent); }

/* ───── プロンプト ───── */
.prompt { font-size: .92rem; font-weight: 600; margin-bottom: 8px; min-height: 1.6em; }
.prompt .sel { font-weight: 400; color: var(--ink-soft); margin-left: 8px; font-size: .82rem; }
.action-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ───── ツールチップ ───── */
.tooltip {
  position: fixed; z-index: 60; max-width: 280px; pointer-events: none;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 9px 11px; font-size: .8rem; line-height: 1.45; white-space: pre-wrap;
}
.tooltip.hidden { display: none; }
.tooltip .tt-name { font-weight: 650; }
.tooltip .tt-meta { color: var(--ink-soft); font-size: .74rem; margin-bottom: 4px; }

#result-body table { border-collapse: collapse; width: 100%; font-size: .88rem; }
#result-body th, #result-body td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
#result-body td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 棋譜の送信(設定画面の打ち手欄) */
#submit-box.hidden { display: none; }
#submit-box { margin-top: 8px; }
.check { display: flex; gap: 8px; align-items: center; font-size: .85rem; cursor: pointer; }

/* 打ち手を選ばずに開始しようとしたとき */
.warn { color: var(--warn); font-size: .85rem; margin: 0 0 8px; }
.warn.hidden { display: none; }
select.missing { outline: 2px solid var(--warn); outline-offset: 1px; }