/* 対局区。Game.dc.html / GameM.dc.html の inline style を写す。
   色は tokens.css の 2026-11-09 だけ。767px は game-board-spec.js の NARROW_MAX_PX。 */

.play-stage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

.gp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 24px 40px;
}

.gp-players,
.gp-ops { align-self: center; }
.gp-players {
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gp-seat {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
}
.gp-seat.is-active {
  background: var(--paper-card);
  border: 2px solid var(--ink-strong);
}
.gp-seat__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gp-seat__text strong { color: var(--ink-strong); font-size: 16px; }
.gp-seat__text span { font-size: 13px; color: var(--ink-sub); }
.gp-seat__turn {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--shu);
}

.gp-stone {
  display: block;
  flex: none;
  border-radius: 50%;
}
.gp-seat .gp-stone { width: 30px; height: 30px; }
.gp-stone[data-color="b"] {
  background: radial-gradient(circle at 35% 30%, var(--fig-black-hi), var(--fig-black-lo) 68%);
  box-shadow: 0 2px 4px var(--fig-shadow-b-soft);
}
.gp-stone[data-color="w"] {
  background: radial-gradient(circle at 35% 30%, var(--fig-white-hi), var(--fig-white-lo) 72%);
  box-shadow: 0 2px 4px var(--fig-shadow-w-soft), inset 0 0 0 1px var(--fig-white-edge);
}

.gp-facts {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.gp-facts dt { color: var(--ink-sub); }
.gp-facts dd { margin: 0; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

.gp-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gp-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
  color: var(--ink-strong);
}
.gp-status .gp-stone { width: 14px; height: 14px; box-shadow: none; }
.gp-status strong {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 20px;
}
.gp-hint { color: var(--ink-sub); font-size: 14px; }

.gp-board { position: relative; }
.gp-board svg { display: block; }
.board-hits { position: absolute; left: 0; top: 0; }
.board-hit {
  position: absolute;
  width: var(--hit, 28px);
  height: var(--hit, 28px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.board-hit:disabled { cursor: default; }

.gp-ops {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gp-ops__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gp-btn {
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--rule-btn);
  background: transparent;
  font: 500 15px/1 var(--font-sans);
  color: var(--ink-strong);
  cursor: pointer;
}
.gp-btn--sumi {
  border: 0;
  background: var(--sumi);
  color: var(--on-sumi);
  font-weight: 700;
}
.gp-btn:disabled { opacity: .45; cursor: default; }
.gp button:focus-visible,
.gp-switch input:focus-visible + .gp-switch__ui {
  outline: 2px solid var(--shu);
  outline-offset: 2px;
}

.gp-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-strong);
  cursor: pointer;
}
.gp-ops .gp-switch:last-of-type,
.gp-sheet .gp-switch:last-of-type { border-bottom: 1px solid var(--rule); }
.gp-ops .gp-switch + .gp-switch { margin-top: -16px; border-top: 0; }
.gp-sheet .gp-switch + .gp-switch { margin-top: -12px; border-top: 0; }
.gp-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.gp-switch__ui {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--rule);
}
.gp-switch__ui::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--on-sumi);
}
.gp-switch input:checked + .gp-switch__ui { background: var(--ink-strong); }
.gp-switch input:checked + .gp-switch__ui::after { left: 21px; }

.gp-kifu { display: flex; flex-direction: column; gap: 8px; }
.gp-kifu > span { font-size: 13px; color: var(--ink-sub); }
.gp-kifu ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  max-height: 280px;
  overflow: auto;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-body);
}
.gp-kifu li {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.gp-kifu li span:first-child { width: 20px; color: var(--ink-faint); text-align: right; }
.gp-kifu strong { color: var(--ink-strong); font-weight: 500; }

.gp-result {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--sumi-wash);
}
.gp-result__card {
  width: min(280px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 12px;
  background: var(--paper-card);
}
.gp-result__card p { margin: 0; text-align: center; }
.gp-result__title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink-strong);
}
.gp-result__insight { font-size: 14px; color: var(--ink-sub); }

.gp-forbid,
.gp-strip,
.gp-bar { display: none; }

.gp-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--sumi-wash);
}
.gp-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70vh;
  overflow: auto;
  padding: 10px 20px 28px;
  background: var(--paper-card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px var(--sheet-shadow);
}
.gp-sheet__grip {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule-grip);
}

@media (min-width: 768px) {
  .gp-sheet,
  .gp-scrim { display: none !important; }
}

@media (max-width: 767px) {
  .gp {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 104px;
  }
  .gp-ops { display: none; }
  .gp-facts { display: none; }
  .gp-players {
    width: auto;
    margin: 14px 16px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .gp-seat.is-active { order: -1; }
  .gp-seat { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .gp-seat .gp-stone { width: 22px; height: 22px; box-shadow: none; }
  .gp-seat .gp-stone[data-color="w"] { box-shadow: inset 0 0 0 1px var(--fig-white-edge); }
  .gp-seat__text { line-height: 1.25; }
  .gp-seat__text strong { font-size: 15px; }
  .gp-seat:not(.is-active) .gp-seat__text strong { color: var(--ink-body); }
  .gp-seat__text span { font-size: 12px; }
  .gp-seat__turn { display: none; }

  .gp-center { margin-top: 14px; gap: 0; align-items: stretch; }
  .gp-board { margin-inline: auto; }
  .gp-status { display: none; }
  .gp-status:has([data-confirm]:not([hidden])) {
    display: flex;
    margin: 8px 16px 0;
  }
  .gp-status .gp-stone,
  .gp-status strong,
  .gp-hint { display: none; }

  .gp-forbid {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    font-size: 13px;
    color: var(--ink-body);
  }
  .gp-forbid::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background:
      linear-gradient(45deg, transparent 42%, var(--shu) 42%, var(--shu) 58%, transparent 58%),
      linear-gradient(-45deg, transparent 42%, var(--shu) 42%, var(--shu) 58%, transparent 58%);
  }
  .gp-strip {
    display: flex;
    gap: 16px;
    margin: 12px 16px 0;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-sub);
    white-space: nowrap;
    overflow: hidden;
  }
  .gp-strip .is-last { color: var(--ink-strong); font-weight: 700; }

  .gp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 28px;
    background: var(--paper-card);
    border-top: 1px solid var(--rule);
  }
  .gp-bar button {
    height: 56px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    font: 500 12px/1.2 var(--font-sans);
    color: var(--ink-strong);
    cursor: pointer;
  }
  .gp-bar button[aria-pressed="true"] { background: var(--sumi-wash); }
  .gp-bar button:disabled { opacity: .45; cursor: default; }
}