/* 〇✕の卓。昼は帳面に判子を捺し、夜は半紙に筆で書く ―― 二つの面は
   base.css のトークンで差し替わり、盤の組み方そのものは共通。
   〇✕も罫も輪郭(SVG)で持つので、マスが90pxでも38pxでも同じ形のまま縮む。 */
.ttt-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 90px);
  grid-template-rows: repeat(3, 90px);
  gap: 0;
  padding: 10px;
  border-radius: 3px;
  background:
    var(--ttt-paper-sheen),
    var(--ttt-paper-grain),
    linear-gradient(170deg, var(--ttt-paper-a), var(--ttt-paper-b));
  box-shadow: var(--ttt-board-edge);
}
.ttt-board.hidden {
  display: none;
}
/* 盤と、その上の席の札・下の見出し(始まる前だけ)を縦に積む。 */
.tictactoe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tictactoe-container.hidden { display: none; }
#tictactoe-seats.hidden { display: none; }

/* 輪郭の置き場。マスの外に出しておいて、<use> で呼ぶ。 */
.ttt-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 昼の面と夜の面。同じマスに両方の手を伏せておき、札で出す方を替える。 */
.ttt-face-dark {
  display: none;
}
body.board-dark .ttt-face-light {
  display: none;
}
body.board-dark .ttt-face-dark {
  display: block;
}

.ttt-cell {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ttt-cell:hover:not(:disabled) {
  background: var(--ttt-cell-hover);
}
.ttt-cell:disabled {
  cursor: default;
}
.ttt-cell.mark-o {
  color: var(--ttt-ink-o);
}
.ttt-cell.mark-x {
  color: var(--ttt-ink-x);
}

.ttt-mark {
  display: block;
  width: 78%;
  height: 78%;
  overflow: visible;
}
/* 置く前の下見。指を乗せたマスにだけ自分の印が薄く出る。 */
.ttt-ghost {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.ttt-cell:hover:not(:disabled) .ttt-ghost {
  opacity: var(--ttt-ghost);
}

/* 罫。盤の内側(パディングの内)に敷くので、マスの中心とずれない。 */
.ttt-rules {
  position: absolute;
  inset: 10px;
  color: var(--ttt-rule);
  pointer-events: none;
}
.ttt-rules svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ttt-rule {
  position: absolute;
  background: currentColor;
}
.ttt-rule.v {
  top: 0;
  bottom: 0;
  width: var(--ttt-rule-width);
}
.ttt-rule.h {
  left: 0;
  right: 0;
  height: var(--ttt-rule-width);
}

.ttt-cell.ttt-cell-win {
  background: var(--ttt-cell-win);
}
.ttt-cell.ttt-cell-win .ttt-mark {
  animation: ttt-win-pop 0.4s ease-out;
}
@keyframes ttt-win-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* 手は一つずつ向きが違う。判子は捺す角度、筆は書く角度。 */
.ttt-cell:nth-child(5n+1) .ttt-mark { transform: rotate(-4deg); }
.ttt-cell:nth-child(5n+2) .ttt-mark { transform: rotate(3deg); }
.ttt-cell:nth-child(5n+3) .ttt-mark { transform: rotate(-2deg); }
.ttt-cell:nth-child(5n+4) .ttt-mark { transform: rotate(4deg); }
.ttt-cell:nth-child(5n+5) .ttt-mark { transform: rotate(-3deg); }
.ttt-cell.ttt-cell-win:nth-child(5n+1) .ttt-mark { animation-name: ttt-win-pop-1; }
.ttt-cell.ttt-cell-win:nth-child(5n+2) .ttt-mark { animation-name: ttt-win-pop-2; }
.ttt-cell.ttt-cell-win:nth-child(5n+3) .ttt-mark { animation-name: ttt-win-pop-3; }
.ttt-cell.ttt-cell-win:nth-child(5n+4) .ttt-mark { animation-name: ttt-win-pop-4; }
.ttt-cell.ttt-cell-win:nth-child(5n+5) .ttt-mark { animation-name: ttt-win-pop-5; }
@keyframes ttt-win-pop-1 { 0% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.25) rotate(-4deg); } 100% { transform: scale(1) rotate(-4deg); } }
@keyframes ttt-win-pop-2 { 0% { transform: scale(1) rotate(3deg); } 50% { transform: scale(1.25) rotate(3deg); } 100% { transform: scale(1) rotate(3deg); } }
@keyframes ttt-win-pop-3 { 0% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.25) rotate(-2deg); } 100% { transform: scale(1) rotate(-2deg); } }
@keyframes ttt-win-pop-4 { 0% { transform: scale(1) rotate(4deg); } 50% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1) rotate(4deg); } }
@keyframes ttt-win-pop-5 { 0% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.25) rotate(-3deg); } 100% { transform: scale(1) rotate(-3deg); } }

/* 勝ち筋。昼は朱の二重線で消し、夜は同じ穂で一本引く。どちらも罫と同じ
   枠に敷くので、線はマスの中心をきちんと通る。 */
.ttt-win-line {
  position: absolute;
  inset: 10px;
  z-index: 2;
  color: var(--ttt-win);
  pointer-events: none;
}
.ttt-win-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 端から引く。消す筆先が進むぶんだけ、線が見えてくる。 */
.ttt-win-line rect {
  animation: ttt-win-draw 0.5s 0.15s ease-out both;
}
@keyframes ttt-win-draw {
  from { width: 0; }
  to { width: var(--ttt-win-len); }
}