/* トライ将棋の見た目。色・形・ボタン・ダイアログ・7 つの場所の格子は共通の枠（game-tokens.css・game-layout.css）、
   盤と駒と升の印は共通の盤（board9.css）が持つ。ここは色の値の上書きと、ホーム・横の欄の中身だけ（本将棋の style.css の同じ節の写し）。 */
:root {
  --accent: #b5532a;
  --promoted: #c0261d;
  --target: rgba(40, 140, 80, 0.45);
  --last: rgba(255, 200, 60, 0.55);
  --picked: rgba(60, 120, 220, 0.45);
  --check: rgba(220, 40, 40, 0.55);
}
.topbar {
  padding: 8px 0 0;
}
h1 {
  font-size: 1.6rem;
  margin: 8px 0 4px;
}
h2 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.lede,
.hint {
  color: var(--text-2);
  font-size: 0.9rem;
  margin: 4px 0 12px;
}
.error {
  color: var(--promoted);
  font-weight: 700;
}

/* ===== ホーム（1 列・箱なし。本将棋と同じ並び） ===== */
.home h1 {
  margin: 12px 0 0;
}
.home .lede {
  margin: 0 0 4px;
}
.home-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}
.home .big {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  font-size: 1.1rem;
}
.home #engine-status {
  margin: 8px 0 0;
}
/* その他の設定（ダイアログの中。本将棋と同じ形: 持ち時間の選び） */
.more-settings {
  display: grid;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.field select {
  color: var(--text);
}
/* 席の行（人間 | AI・AI の要約・棋風の行）は共通の枠の ai-settings.css（本将棋と同じ）。ここはルールの行だけ */
.rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rule-name {
  min-width: 4em;
  font-weight: 700;
}
.rule-change {
  flex: none;
}
/* ルールの行（高さ固定。「変える」→ ダイアログ） */
.rule-row {
  height: 44px;
  margin: 4px 0 0;
  gap: 8px;
}
.rule-name {
  margin-right: 4px;
}
.rule-summary {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  /* ラグビーの字は長いので、狭い幅では 2 行まで（行の高さは 44px のまま） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
}
/* ルールのダイアログの中: 項目ごとに名 ＋「？」、その下に選び（スマホ・デスクトップとも同じ並び。ボールの 6 つが字を折らずに入る） */
.rules-dialog {
  display: grid;
  gap: 12px;
}
.opt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.opt-row .seg {
  justify-self: start;
}
.opt-row .seg > button {
  white-space: nowrap;
}
.opt-label {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
/* ボールは 6 つで字が長いので 2 列 × 3 段（玉・クイーン / ナイト・クイーン＋ナイト / 成り・効果なし）。幅いっぱい */
.opt-row[data-option='ball'] .seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
}
.opt-row[data-option='ball'] .seg > button {
  margin: -1px 0 0 -1px;
  border-radius: 0;
}
.opt-row[data-option='ball'] .seg > button:nth-child(odd) {
  margin-left: 0;
}
.opt-row[data-option='ball'] .seg > button:nth-child(-n + 2) {
  margin-top: 0;
}
.opt-row[data-option='ball'] .seg > button:nth-child(1) {
  border-radius: var(--radius-s) 0 0 0;
}
.opt-row[data-option='ball'] .seg > button:nth-child(2) {
  border-radius: 0 var(--radius-s) 0 0;
}
.opt-row[data-option='ball'] .seg > button:nth-child(5) {
  border-radius: 0 0 0 var(--radius-s);
}
.opt-row[data-option='ball'] .seg > button:nth-child(6) {
  border-radius: 0 0 var(--radius-s) 0;
}
/* 穴の位置は字が長いので 1 列 × 3 段（幅いっぱい） */
.opt-row[data-option='holes'] .seg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
}
.opt-row[data-option='holes'] .seg > button {
  margin: -1px 0 0;
  border-radius: 0;
}
.opt-row[data-option='holes'] .seg > button:first-child {
  margin-top: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.opt-row[data-option='holes'] .seg > button:last-child {
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
/* 棋譜の区画 */
.records {
  margin: 0;
  padding: 0;
  list-style: none;
}
.record {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.record-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px;
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 400;
  text-align: left;
}
.record-row .rec-date {
  grid-row: span 2;
  color: var(--text-2);
  font-size: 0.8rem;
}
.record-row .rec-players {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.record-row .rec-result {
  color: var(--text-2);
  font-size: 0.8rem;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
}
.home-foot {
  display: flex;
  gap: 16px;
  margin: 32px 0 0;
  font-size: 0.85rem;
}
/* 入口の一覧（front/index.html） */
.games {
  margin: 0;
  padding: 0;
  list-style: none;
}
.games li {
  border-top: 1px solid var(--border);
}
.game-link {
  display: grid;
  gap: 2px;
  padding: 12px 4px;
  color: inherit;
  text-decoration: none;
}
.game-name {
  font-weight: 700;
  color: var(--accent);
}
.game-desc {
  color: var(--text-2);
  font-size: 0.9rem;
}

/* ===== 対局の画面の中身（横の欄） ===== */
.moves {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  font-size: 0.88rem;
}
.moves li {
  display: flex;
  gap: 6px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.moves li.cur {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.moves .no {
  color: var(--text-2);
  min-width: 2.2em;
  text-align: right;
}
.review-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.review-actions button {
  padding: 6px 8px;
  font-size: 0.85rem;
}
.gs-side .moves {
  flex: 1;
  min-height: 0;
  max-height: none;
}
@media (max-width: 1099px) {
  .gs-side .moves {
    max-height: 320px;
  }
}