/* ともだちリバーシ: 将棋と同じ紙と木の世界に、緑の盤と黒白の石を置く */
.rv {
  --rv-cell: min(calc((100vw - 48px) / 8), 60px);
  --felt-1: #2f7a4e;
  --felt-2: #24603d;
  --rv-line: rgba(10, 40, 22, .55);
  --disc-b: radial-gradient(circle at 35% 30%, #5a5048 0%, #231c17 45%, #0e0a07 100%);
  --disc-w: radial-gradient(circle at 35% 30%, #ffffff 0%, #f3ede2 50%, #d6cbb8 100%);
}
@media (min-width: 821px) {
  .rv { --rv-cell: clamp(46px, calc((100dvh - 300px) / 8), 72px); }
}

/* 石の形をしたマーク */
.hero-disc {
  width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%; position: relative;
  background: var(--disc-b); box-shadow: 0 6px 14px rgba(40, 20, 5, .3), inset 0 -3px 0 rgba(0, 0, 0, .35);
}
.hero-disc i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--disc-w);
  clip-path: inset(0 0 0 50%); box-shadow: inset 0 -3px 0 rgba(120, 100, 70, .35);
}
.mode-disc, .logo-disc {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--disc-b);
  box-shadow: 0 2px 4px rgba(40, 20, 5, .25), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.mode-disc.white { background: var(--disc-w); box-shadow: 0 2px 4px rgba(40, 20, 5, .2), inset 0 -2px 0 rgba(120, 100, 70, .35), 0 0 0 1px rgba(60, 40, 20, .15); }
.mode-disc.half, .logo-disc { background: linear-gradient(90deg, #1a1410 50%, #f3ede2 50%); box-shadow: 0 2px 4px rgba(40, 20, 5, .25), 0 0 0 1px rgba(60, 40, 20, .25); }
.logo-disc { width: 22px; height: 22px; }

/* 盤 */
.rv-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);
}
.rv-board {
  display: grid; grid-template-columns: repeat(8, var(--rv-cell)); grid-template-rows: repeat(8, var(--rv-cell));
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(160deg, var(--felt-1), var(--felt-2));
  border: 2px solid #12331f; border-radius: 3px; position: relative;
}
.rv-cell {
  all: unset; position: relative; display: grid; place-items: center; cursor: default;
  border-right: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line);
}
.rv-cell:nth-child(8n) { border-right: 0; }
.rv-cell:nth-last-child(-n+8) { border-bottom: 0; }
.rv-cell:focus-visible { outline: 2.5px solid #ffd34d; outline-offset: -3px; z-index: 2; }
.rv-cell .star { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #0f2b1a; left: -4px; top: -4px; z-index: 1; }
.rv-cell.last::before {
  content: ''; position: absolute; inset: 0; background: rgba(255, 214, 80, .28);
}

/* 置ける場所: 手番の色の小さな石の影 */
.rv-cell.can { cursor: pointer; }
.rv-cell.can::after {
  content: ''; width: 26%; height: 26%; border-radius: 50%; opacity: .55;
  transition: transform .15s ease-out, opacity .15s;
}
.rv-cell.can-b::after { background: #0e0a07; }
.rv-cell.can-w::after { background: #f6f1e7; }
@media (hover: hover) {
  .rv-cell.can:hover::after { width: 80%; height: 80%; opacity: .45; }
}

.disc {
  width: 82%; height: 82%; border-radius: 50%; position: relative; z-index: 1;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .4), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.disc.b { background: var(--disc-b); }
.disc.w { background: var(--disc-w); box-shadow: 0 3px 4px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(120, 100, 70, .35); }
.disc.placed { animation: drop .26s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes drop { from { transform: scale(1.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 裏返し: 横につぶれる途中で色が入れ替わる */
.disc.flip { animation: .38s cubic-bezier(.4, 0, .2, 1) both; }
.disc.flip.to-b { animation-name: flip-to-b; }
.disc.flip.to-w { animation-name: flip-to-w; }
@keyframes flip-to-b {
  0% { transform: scaleX(1); background: var(--disc-w); }
  49.9% { transform: scaleX(0); background: var(--disc-w); }
  50% { transform: scaleX(0); background: var(--disc-b); }
  100% { transform: scaleX(1); background: var(--disc-b); }
}
@keyframes flip-to-w {
  0% { transform: scaleX(1); background: var(--disc-b); }
  49.9% { transform: scaleX(0); background: var(--disc-b); }
  50% { transform: scaleX(0); background: var(--disc-w); }
  100% { transform: scaleX(1); background: var(--disc-w); }
}

/* 対局者: 駒台のかわりに石の数 */
.rv .player { padding: 8px 14px 8px 10px; justify-content: space-between; }
.rv .pinfo { width: auto; flex: 1; }
.disc-avatar { font-size: 0; }
.disc-avatar.b { background: var(--disc-b); }
.disc-avatar.w { background: var(--disc-w); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .2); }
.score { display: flex; align-items: baseline; gap: 3px; color: var(--muted); }
.score .num { font: 800 30px/1 var(--font-piece); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.score .unit { font-size: 12px; }
.score.lead .num { color: var(--accent); }
.rv .table { width: calc(var(--rv-cell) * 8 + 24px); }
@media (max-width: 820px) { .rv .table { width: 100%; } }

.act[aria-pressed="false"] { color: var(--muted); }
.act[aria-pressed="false"] svg { opacity: .5; }

/* 暗い表示でも盤と石は同じ見た目 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rv .disc-avatar.b { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
}