/* --- chess --- */
.chess-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.chess-container.hidden {
  display: none;
}

/* 盤は将棋・リバーシと同じ胡桃の枠に納める。 */
.chess-board-outer {
  display: grid;
  grid-template-columns: 20px repeat(8, 48px);
  grid-template-rows: repeat(8, 48px) 22px;
  padding: 14px 16px 10px 10px;
  background: linear-gradient(158deg, var(--chess-frame-a), var(--chess-frame-b));
  border-radius: 4px;
  box-shadow:
    0 1px 0 var(--chess-frame-sheen) inset,
    0 14px 26px var(--chess-frame-drop),
    0 3px 0 var(--chess-frame-edge);
}
.chess-coord-ranks {
  grid-column: 1;
  grid-row: 1 / 9;
  display: grid;
  grid-template-rows: repeat(8, 48px);
}
.chess-coord-files {
  grid-column: 2 / 10;
  grid-row: 9;
  display: grid;
  grid-template-columns: repeat(8, 48px);
}
.chess-coord-ranks span,
.chess-coord-files span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--shop-font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--chess-coord);
}

.chess-board {
  grid-column: 2 / 10;
  grid-row: 1 / 9;
  display: grid;
  grid-template-columns: repeat(8, 48px);
  grid-template-rows: repeat(8, 48px);
  box-shadow:
    0 0 0 2px var(--chess-board-edge),
    0 2px 8px rgba(0, 0, 0, 0.3) inset;
}

.chess-cell {
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.chess-cell.light { background: var(--chess-light); }
.chess-cell.dark { background: var(--chess-dark); }
/* 触れたマスは地を塗り替えるのではなく、灯を一枚かける。木口の筋が
   ホバーのたびに差し替わらないようにするため。 */
.chess-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--chess-hover);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.chess-cell:hover::before {
  opacity: 1;
}
.chess-cell.selected {
  box-shadow: inset 0 0 0 3px var(--chess-selected);
}
.chess-cell.last-move {
  box-shadow: inset 0 0 0 3px var(--chess-last);
}
/* 打てるマスは細い輪。駒のあるマス(取れる)は駒を塗り潰さず、マスごと
   輪で囲う ―― どの駒を取るのか見えていないと選べないので。 */
.chess-cell.legal-move::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 999px;
  border: 2px solid var(--chess-legal);
  pointer-events: none;
}
.chess-cell.legal-move:has(.chess-piece)::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border: 3px solid var(--chess-capture);
}
.chess-cell.king-check::before {
  background: var(--chess-check);
  opacity: 1;
}

/* 駒は字ではなく輪郭。轆轤で挽いた回転体として持つので、盤が縮んでも
   同じ形のまま小さくなる。形の元は design/chess/gen.mjs。 */
.chess-piece {
  display: block;
  width: 40px;
  height: 40px;
  user-select: none;
  filter: drop-shadow(var(--chess-piece-shadow));
  transition: transform 0.1s ease;
}
.chess-cell:hover .chess-piece {
  transform: translateY(-1px) scale(1.06);
}
.chess-piece .body {
  fill: var(--chess-face);
  stroke: var(--chess-edge);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* 面取りは輪郭をそのまま内側へ縮めた一枚。同じ形なので歪まない。 */
.chess-piece .bevel {
  fill: var(--chess-bevel);
  opacity: var(--chess-bevel-alpha);
}
.chess-piece .line {
  fill: none;
  stroke: var(--chess-line);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.chess-piece .eye {
  fill: var(--chess-line);
}
.chess-piece.white {
  --chess-face: var(--chess-white-face);
  --chess-edge: var(--chess-white-edge);
  --chess-line: var(--chess-white-line);
  --chess-bevel: var(--chess-white-bevel);
  --chess-bevel-alpha: var(--chess-white-bevel-alpha);
}
.chess-piece.black {
  --chess-face: var(--chess-black-face);
  --chess-edge: var(--chess-black-edge);
  --chess-line: var(--chess-black-line);
  --chess-bevel: var(--chess-black-bevel);
  --chess-bevel-alpha: var(--chess-black-bevel-alpha);
}

.chess-promotion-choices {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.chess-promotion-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 8px;
}
.chess-promotion-choice .chess-piece {
  width: 46px;
  height: 46px;
}
.chess-promotion-choice span {
  font-size: 0.7rem;
  color: var(--text-dim);
}
.chess-promotion-choice:hover {
  background: var(--border);
}
.paper-modal .chess-promotion-choice {
  background: var(--shop-paper-deep);
  border: 1px solid var(--shop-paper-line);
  color: var(--shop-ink);
}
.paper-modal .chess-promotion-choice span {
  color: var(--shop-ink-soft);
}
.paper-modal .chess-promotion-choice:hover {
  background: rgba(180, 144, 63, 0.18);
}

.turn-order-choices {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.poker-variant-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.turn-order-choice, .poker-variant-choice {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 8px;
}
.turn-order-choice:hover, .poker-variant-choice:hover {
  background: var(--border);
}
.paper-modal .turn-order-choice, .paper-modal .poker-variant-choice {
  background: var(--shop-paper-deep);
  border: 1px solid var(--shop-paper-line);
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  letter-spacing: 0.08em;
}
.paper-modal .turn-order-choice:hover, .paper-modal .poker-variant-choice:hover {
  background: rgba(180, 144, 63, 0.18);
}
.turn-order-choice.cancel, .poker-variant-choice.cancel {
  background: #5b6172;
  border-color: #5b6172;
  color: #fff;
}
.turn-order-choice.cancel:hover, .poker-variant-choice.cancel:hover {
  background: #6b7285;
}
/* Cancel steps back rather than shouting in grey - the same outlined treatment
   the room gives its secondary buttons. */
.paper-modal .turn-order-choice.cancel, .paper-modal .poker-variant-choice.cancel {
  background: transparent;
  border-color: var(--shop-ink-soft);
  color: var(--shop-ink-soft);
  font-weight: 400;
}
.paper-modal .turn-order-choice.cancel:hover, .paper-modal .poker-variant-choice.cancel:hover {
  background: rgba(85, 73, 58, 0.1);
  color: var(--shop-ink);
}