/* 共通の画面の枠（game-shell v1）: 7 つの場所の格子（design §1.4）と、ホーム・ギャラリーの 1 列（.gs-page）。
   どの場所も大きさを先に取り、対局中・振り返り・次の対局で箱の位置が動かない（apps/_shared/test/shell-layout.test.mjs が測る）。
   箱（カード）を使わない。左右の端は全部 --content の 1 本の線。3 つの幅の段: パソコン 1100px 以上・中 760〜1099px・スマホ 760px 未満。 */

/* ===== 対局の画面 ===== */
.gs-game {
  --player-h: 172px; /* 名前 2 行まで ＋ 箇条書き 5 行 ＋「ほか n 件」1 行 */
  --cell-h: 44px; /* 駒台の升の高さ */
  --board: clamp(
    300px,
    min(100vh - 4 * var(--row) - 48px, var(--content) - 2 * var(--rail) - var(--side) - 3 * var(--gap)),
    560px
  );
  display: grid;
  width: var(--content);
  margin: 0 auto;
  padding: 8px 0 24px;
  column-gap: var(--gap);
  row-gap: 8px;
  grid-template-columns: var(--rail) var(--board) var(--rail) minmax(0, 1fr);
  grid-template-rows: var(--row) var(--board) var(--row) var(--row);
  grid-template-areas:
    'head head head head'
    'top board bottom side'
    'strip strip strip side'
    'controls controls controls side';
}
.gs-head {
  grid-area: head;
}
.gs-seat-top {
  grid-area: top;
}
.gs-board {
  grid-area: board;
}
.gs-seat-bottom {
  grid-area: bottom;
}
.gs-strip {
  grid-area: strip;
}
.gs-controls {
  grid-area: controls;
}
.gs-side {
  grid-area: side;
}

/* 見出しの行: 左 = 手番、中 = 王手・考え中の印、右 = 表示の切り替え 1 つ */
.gs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: var(--row);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.gs-turn {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gs-badge {
  min-width: 4em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.gs-badge[data-badge='check'] {
  color: var(--danger);
}
.gs-badge[data-badge='thinking'],
.gs-badge[data-badge='over'] {
  color: var(--text-2);
}
.gs-head-extra {
  justify-self: end;
}

/* 盤の箱（正方形。中身はアプリが箱の中にだけ描く） */
.gs-board {
  position: relative;
  width: var(--board);
  height: var(--board);
  min-width: 0;
}

/* 対局者の欄 ＋ 駒台（上の席 = 盤の左上、下の席 = 盤の右下） */
.gs-seat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.gs-seat-top {
  align-self: start;
}
.gs-seat-bottom {
  align-self: end;
}
.gs-player {
  height: var(--player-h);
  min-width: 0;
  overflow: hidden;
}
.gs-name-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 28px;
}
.gs-mark {
  flex: none;
  font-size: 1.1rem;
}
.gs-name {
  /* パソコン: 長い名（ギャラリーの AI など）は 2 行まで（欄の高さは同じ） */
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  padding-top: 2px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gs-styles-open {
  display: none;
}
/* 時計（持ち時間・消費時間。場所は常に取る）。パソコン: 名前の行の 2 行目（名前は 1 行まで。欄の高さは同じ）。スマホ: 帯の名前の右の短い字 */
.gs-name-row {
  flex-wrap: wrap;
}
.gs-name-row .gs-name {
  flex: 1 1 0;
  -webkit-line-clamp: 1;
}
.gs-clock {
  flex: 0 0 100%;
  order: 9;
  min-height: 20px;
  padding-left: 1.4em;
  color: var(--text-2);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  white-space: nowrap;
}
.gs-clock-short {
  display: none;
}
[data-to-move='true'] .gs-clock {
  color: var(--text);
  font-weight: 700;
}
.gs-clock[data-low='true'] {
  color: var(--danger);
}
.gs-styles {
  height: 100px;
  margin: 2px 0 0;
  padding: 0 0 0 1.2em;
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 20px;
}
.gs-styles li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gs-more {
  min-height: 20px;
  height: 20px;
  padding: 0 0 0 1.2em;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 20px;
}
/* 駒台: 7 種の決まった升（2 列 × 4 段）。持っていない駒の升も場所を取る */
.gs-hand {
  min-width: 0;
}
.gs-hand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--cell-h);
  gap: 4px;
  height: calc(4 * var(--cell-h) + 3 * 4px);
  padding: 4px;
  border-radius: var(--radius-s);
  background: var(--komadai);
}
.gs-hand-cell {
  position: relative;
  min-width: 0;
}
.gs-hand-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.gs-hand-piece:disabled {
  opacity: 1;
}
.gs-hand-piece.picked,
.gs-hand-piece[aria-pressed='true'] {
  background: var(--picked);
  color: inherit;
  outline: 2px solid var(--accent);
}
.gs-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 2;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #3b2a14;
  color: #fff3d6;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* 知らせの行（高さ 1 行。はみ出しは「…」）。note と seek は同じ所に重ね、visibility で替える */
.gs-strip {
  position: relative;
  height: var(--row);
  min-width: 0;
}
.gs-strip-note,
.gs-strip-seek {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs-strip-note {
  justify-content: center;
}
.gs-note-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gs-note-action {
  flex: none;
}
.gs-strip-seek {
  justify-content: center;
}
.gs-strip-seek button {
  flex: none;
  width: 44px;
  padding: 0;
}
.gs-strip-seek input[type='range'] {
  flex: 1;
  min-width: 60px;
  max-width: 320px;
  accent-color: var(--accent);
}
.gs-ply {
  flex: none;
  min-width: 6.5em;
  color: var(--text-2);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

/* 操作の列: 3 つの決まった枠（盤の列の真ん中に揃える・折り返さない） */
.gs-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  height: var(--row);
  min-width: 0;
}
.gs-controls > button {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* 横の欄: 振り返り（振り返りの時だけ）→ 棋譜。箱を使わない（見出し ＋ 中身） */
.gs-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.gs-section {
  min-width: 0;
}
.gs-section[data-slot='side-kifu'] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.gs-section-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--text-2);
}

/* 中くらい: 3 列（左の欄・盤・右の欄）。横の欄は操作の列の下、全幅 */
@media (max-width: 1099px) {
  .gs-game {
    --board: clamp(300px, min(100vh - 4 * var(--row) - 48px, var(--content) - 2 * var(--rail) - 2 * var(--gap)), 560px);
    grid-template-columns: var(--rail) var(--board) var(--rail);
    grid-template-rows: var(--row) var(--board) var(--row) var(--row) auto;
    grid-template-areas:
      'head head head'
      'top board bottom'
      'strip strip strip'
      'controls controls controls'
      'side side side';
    justify-content: center;
  }
  .gs-side {
    overflow: visible;
    margin-top: 8px;
  }
}

/* スマホ: 1 列。欄と駒台は盤の上下の 1 本の帯（名前 ＋ ▸ │ 7 升の駒台）。棋風の箇条書きは帯に置かない（▸ で一覧） */
@media (max-width: 759px) {
  .gs-game {
    --band: 52px;
    --board: min(var(--content), 560px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--row) var(--band) var(--board) var(--band) var(--row) var(--row) auto;
    grid-template-areas: 'head' 'top' 'board' 'bottom' 'strip' 'controls' 'side';
    row-gap: 4px;
    padding-top: 0;
  }
  .gs-board {
    justify-self: center;
  }
  .gs-seat {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    height: var(--band);
    gap: 6px;
  }
  .gs-player {
    flex: 0 0 46%;
    height: auto;
  }
  .gs-name-row {
    height: var(--band);
  }
  .gs-name-row {
    align-items: center;
  }
  .gs-name {
    display: block;
    padding-top: 0;
    font-size: 0.9rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .gs-name-row {
    flex-wrap: nowrap;
  }
  .gs-name-row .gs-name {
    flex: 0 1 auto;
  }
  .gs-clock {
    flex: none;
    order: 0;
    min-height: 0;
    margin-left: auto;
    padding: 0 2px;
    font-size: 0.85rem;
  }
  .gs-clock-long {
    display: none;
  }
  .gs-clock-short {
    display: inline;
  }
  .gs-styles,
  .gs-more,
  .gs-styles-help {
    display: none;
  }
  .gs-styles-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
  }
  .gs-hand {
    flex: 1 1 0;
    min-width: 0;
  }
  .gs-hand-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: calc(var(--band) - 8px);
    height: var(--band);
  }
  .gs-controls > button {
    padding: 8px 10px;
  }
  .gs-strip-seek {
    gap: 4px;
  }
  .gs-strip-seek button {
    width: 40px;
  }
  .gs-side {
    overflow: visible;
    margin-top: 12px;
  }
}

/* ===== ホーム・ギャラリー・統計の 1 列（箱を使わない。区画は見出し ＋ 細い区切り線） ===== */
.gs-page {
  width: min(var(--content), 720px);
  margin: 0 auto;
  padding: 8px 0 32px;
}
.gs-page-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--row);
}
.gs-page-head h1 {
  margin: 0;
  font-size: 1.4rem;
}
.gs-back {
  padding-left: 8px;
}
.gs-page-section {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.gs-page-section > h2 {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  font-size: 1rem;
}