/* ともだちチェス: 将棋と同じ紙と木の世界に、木目の市松盤と自作の駒を置く */
.ch {
  --ch-cell: min(calc((100vw - 48px) / 8), 60px);
  --sq-light: #f1dcb4;
  --sq-dark: #b98756;
  --white-fill: #fbf6ec; --white-line: #2a1d12; --white-mark: #2a1d12;
  --black-fill: #2b221c; --black-line: #120c08; --black-mark: #e9dcc6;
}
@media (min-width: 821px) {
  .ch { --ch-cell: clamp(46px, calc((100dvh - 300px) / 8), 72px); }
}

/* 駒(SVG)の色 */
.pc-w, .w > use, svg.w { --pc-fill: var(--white-fill); --pc-line: var(--white-line); --pc-mark: var(--white-mark); }
.pc-b, .b > use, svg.b { --pc-fill: var(--black-fill); --pc-line: var(--black-line); --pc-mark: var(--black-mark); }

.hero-king { width: 84px; height: 84px; margin: 0 auto 6px; filter: drop-shadow(0 6px 8px rgba(60, 30, 5, .28)); }
.hero-king svg { width: 100%; height: 100%; --pc-fill: var(--black-fill); --pc-line: var(--black-line); --pc-mark: var(--black-mark); }
.mode-pc { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(60, 30, 5, .25)); }
.logo-pc { width: 26px; height: 26px; --pc-fill: var(--black-fill); --pc-line: var(--black-line); --pc-mark: var(--black-mark); }

/* 盤 */
.ch-frame {
  padding: 10px; border-radius: 12px; align-self: center;
  background: linear-gradient(160deg, var(--wood-edge), var(--wood-edge-2));
  box-shadow: 0 2px 0 #6e4319, 0 14px 30px rgba(60, 30, 5, .28);
}
.ch-board {
  display: grid; grid-template-columns: repeat(8, var(--ch-cell)); grid-template-rows: repeat(8, var(--ch-cell));
  border: 2px solid #5a3412; border-radius: 2px; overflow: hidden;
}
.ch-cell {
  all: unset; position: relative; display: grid; place-items: center; cursor: default;
  background:
    repeating-linear-gradient(96deg, rgba(120, 70, 20, .05) 0 2px, transparent 2px 9px),
    var(--sq-light);
}
.ch-cell.dk {
  background:
    repeating-linear-gradient(96deg, rgba(60, 30, 5, .08) 0 2px, transparent 2px 9px),
    var(--sq-dark);
}
.ch-cell:focus-visible { outline: 3px solid #2a6cdf; outline-offset: -3px; z-index: 3; }
.ch-cell.last::before, .ch-cell.sel::before, .ch-cell.check::before { content: ''; position: absolute; inset: 0; }
.ch-cell.last::before { background: rgba(255, 214, 80, .45); }
.ch-cell.sel::before { background: rgba(178, 54, 31, .38); }
.ch-cell.check::before { background: radial-gradient(circle, rgba(220, 30, 10, .8) 0%, rgba(220, 30, 10, .35) 50%, transparent 72%); }
.ch-cell.mine { cursor: pointer; }
.ch-cell.target { cursor: pointer; }
.ch-cell.target::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(24, 100, 62, .55); z-index: 2; pointer-events: none;
}
.ch-cell.target.cap::after { width: 86%; height: 86%; background: transparent; box-shadow: inset 0 0 0 4px rgba(24, 100, 62, .6); }
@media (hover: hover) { .ch-cell.target:hover { filter: brightness(1.06); } .ch-cell.target:hover::after { background: rgba(24, 100, 62, .75); } }
/* 盤の端の座標 */
.ch-cell .cf, .ch-cell .cr { position: absolute; font: 700 10px var(--font-ui); opacity: .75; pointer-events: none; }
.ch-cell .cf { right: 3px; bottom: 1px; }
.ch-cell .cr { left: 3px; top: 1px; }
.ch-cell .cf, .ch-cell .cr { color: var(--sq-dark); }
.ch-cell.dk .cf, .ch-cell.dk .cr { color: var(--sq-light); }

.ch-piece { width: 88%; height: 88%; position: relative; z-index: 1; filter: drop-shadow(0 2px 1.5px rgba(40, 20, 5, .35)); pointer-events: none; }
.ch-cell.sel .ch-piece { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 6px 5px rgba(40, 20, 5, .4)); }
.ch-piece.moved { animation: slide .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes slide { from { transform: translate(calc(var(--ch-cell) * var(--dx)), calc(var(--ch-cell) * var(--dy))); } to { transform: none; } }

/* 対局者: 駒台のかわりに取った駒と駒得 */
.ch .player { padding: 8px 12px 8px 10px; justify-content: space-between; min-height: 58px; }
.ch .pinfo { width: auto; flex-shrink: 0; }
.taken { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0; min-width: 0; }
.taken svg { width: 22px; height: 22px; margin-left: -6px; }
.taken svg:first-child { margin-left: 0; }
.taken .gap { width: 6px; }
.taken .adv { font: 700 13px var(--font-ui); color: var(--muted); margin-left: 6px; }
.avatar.pc-avatar svg { width: 24px; height: 24px; }
.avatar.pc-avatar { font-size: 0; }
.ch .table { width: calc(var(--ch-cell) * 8 + 24px); }
@media (max-width: 820px) { .ch .table { width: 100%; } }

/* 昇格の選択 */
.promo-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promo-choices button {
  all: unset; display: grid; justify-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: var(--bg); font: 700 11px var(--font-ui); letter-spacing: -.02em; color: var(--ink);
}
.promo-choices button:hover, .promo-choices button:focus-visible { border-color: var(--accent); }
.promo-choices button:first-child { border-color: var(--accent); background: var(--accent-soft); }
.promo-choices svg { width: 44px; height: 44px; }

/* 暗い表示: 黒い駒が背景に沈まないように、アバターは明るい台座に・ロゴは白い駒に */
.avatar.pc-avatar { background: #efe3cc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-pc, :root:not([data-theme="light"]) .hero-king svg { --pc-fill: var(--white-fill); --pc-line: var(--white-line); --pc-mark: var(--white-mark); }
}
:root[data-theme="dark"] .logo-pc, :root[data-theme="dark"] .hero-king svg { --pc-fill: var(--white-fill); --pc-line: var(--white-line); --pc-mark: var(--white-mark); }