/* ===== VARIABLES ===== */
:root {
  --cell-size: 60px;
  --stone-size: 46px;
  --hint-size: 14px;
  --label-size: 18px;
  --board-bg: #1b3a2d;
  --cell-bg: #2d6a4f;
  --cell-hover-bg: #3a7d5e;
  --last-move-shadow: #f97316;
  --card-bg: #fff;
  --card-border: #d0d7de;
  --body-bg: #f6f8fa;
  --green-primary: #1a7f37;
  --green-hover: #2ea043;
  --green-badge-bg: rgba(26, 127, 55, 0.08);
  --green-badge-border: rgba(26, 127, 55, 0.3);
  --info-color: #0969da;
  --hr-color: #d0d7de;
  --label-color: #a0a8b0;
  --tree-active-color: #22c55e;
}

/* ===== BOARD THEME COLORS ===== */
/* data-board-theme 属性が付いた瞬間（インラインスクリプト実行直後）に適用される */
/* JS の setBoardTheme() によるインラインスタイル不要・フラッシュ防止 */
#board[data-board-theme="green"]   { --board-bg: #1b3a2d;   --cell-bg: #2d6a4f;   --cell-hover-bg: #3a7d5e; }
#board[data-board-theme="wood"]    { --board-bg: #391e01;   --cell-bg: #68401f;   --cell-hover-bg: #9b7253; }
#board[data-board-theme="darkblue"]    { --board-bg: #060e18;   --cell-bg: #2e6aaa;   --cell-hover-bg: #3a7ec4; }
#board[data-board-theme="classic"] { --board-bg: #000000;   --cell-bg: #2e7a3e;   --cell-hover-bg: #3a9050; }
#board[data-board-theme="urushi"]  { --board-bg: #120605;   --cell-bg: #b02010;   --cell-hover-bg: #cc2a14; }
#board[data-board-theme="metal"]   { --board-bg: #1c1c1c;   --cell-bg: #a0a0a0;   --cell-hover-bg: #bcbcbc; }
#board[data-board-theme="sky"]     { --board-bg: #034da2;   --cell-bg: #5aa6c9;   --cell-hover-bg: #b3e5fc; }
#board[data-board-theme="rose"]    { --board-bg: #6d0e0e;   --cell-bg: #c95a5a;   --cell-hover-bg: #e07070; }
#board[data-board-theme="retro"]   { --board-bg: #1a1a1a;   --cell-bg: #888888;   --cell-hover-bg: #a0a0a0; }
#board[data-board-theme="cyber"]   { --board-bg: #960096;   --cell-bg: #006868;   --cell-hover-bg: #006868; }

/* サイバー: ホバー時にシアンの内側グロー */
#board[data-board-theme="cyber"] .cell:hover {
  background: var(--cell-hover-bg);
  box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.45);
}
/* last-move の orange 枠をホバー時も保持する */
#board[data-board-theme="cyber"] .cell.last-move {
  box-shadow: inset 0 0 0 4px var(--last-move-shadow);
}
#board[data-board-theme="cyber"] .cell.last-move:hover {
  box-shadow: inset 0 0 0 4px var(--last-move-shadow), inset 0 0 18px rgba(0, 255, 255, 0.45);
}

/* サイバー: 石のオーバーフローを解除して外側グローを許可 */
#board[data-board-theme="cyber"] .stone {
  overflow: visible;
}
#board[data-board-theme="cyber"] .stone::before { display: none; }

/* 黒石: 深いシアン黒 + シアンの外周グロー */
#board[data-board-theme="cyber"] .stone.black {
  background: radial-gradient(circle at 40% 30%, #001f1f, #000a0a);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 2px #00ffff;
}

/* 白石: シアンがかった白 + 明るいグロー */
#board[data-board-theme="cyber"] .stone.white {
  background: radial-gradient(circle at 40% 30%, #ffffff, #a0f0f0);
  box-shadow: 0 0 10px rgba(0, 255, 255, 1.0), 0 0 3px #00ffff;
}

/* ===== THEME: STONE ===== */
/* feTurbulence を #board::before に一度だけ適用し、64マス連続した自然なテクスチャを実現 */
/* gap: 0 にして格子線はセルの border で代替（border は z-index: 1 のセル上に描画される） */
/* --board-bg がラベル・枠エリアの色。inset = padding(4px) + --label-size でセルエリアのみテクスチャを適用 */
#board[data-board-theme="stone"] { --board-bg: #463c33; --cell-bg: #c1b699; --cell-hover-bg: #d4cbb4; gap: 0; position: relative; }

/* 64マス分のみを覆う石目テクスチャ */
/* inset = padding(4px) + label-size。CSS変数で画面サイズに自動追従 */
#board[data-board-theme="stone"]::before {
  content: '';
  position: absolute;
  inset: calc(4px + var(--label-size));
  background: var(--cell-bg);
  filter: url(#stone-tex);
  z-index: 0;
}

/* セル: 透明にしてテクスチャを透過、border で格子線を描画 */
#board[data-board-theme="stone"] .cell {
  background: transparent;
  border: 1.5px solid rgba(20, 15, 10, 0.65);
  position: relative;
  z-index: 1;
}
#board[data-board-theme="stone"] .cell:hover { background: rgba(255, 255, 255, 0.10); }

/* ラベルも ::before より前面に */
#board[data-board-theme="stone"] .board-label {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* ヒント点: 明るい盤面に合わせて濃いめ */
#board[data-board-theme="stone"] .hint-black { background: rgba(25, 18, 15, 0.75); }
#board[data-board-theme="stone"] .hint-white { background: rgba(25, 18, 15, 0.30); }


/* 星点: 格子線と同色 */
#board[data-board-theme="stone"] .cell[data-pos="1,1"]::after,
#board[data-board-theme="stone"] .cell[data-pos="1,5"]::after,
#board[data-board-theme="stone"] .cell[data-pos="5,1"]::after,
#board[data-board-theme="stone"] .cell[data-pos="5,5"]::after {
  background: lab(4.63% 1.11 2.84 / 0.65);
}

/* 黒石: 黒曜石（藍がかった深黒） */
#board[data-board-theme="stone"] .stone.black {
  background: radial-gradient(circle at 36% 30%, #1c1a24, #060508);
  box-shadow: 0 2px 5px rgba(0,0,0,0.65), 0 0 2px rgba(50,40,70,0.4);
}

/* 白石: 陶器（わずかに青みを帯びたオフホワイト） */
#board[data-board-theme="stone"] .stone.white {
  background: radial-gradient(circle at 36% 30%, #f4f2f6, #d0ced6);
  box-shadow: 0 2px 5px rgba(0,0,0,0.38), inset 0 1px 1px rgba(255,255,255,0.8);
}

/* ===== THEME: PARCHMENT ===== */
/* 羊皮紙：ノイズテクスチャ＋輪郭ゆらぎ＋折り目で古文書の質感を表現 */
#board[data-board-theme="parchment"] {
  --board-bg: #6b3a1e;
  --cell-bg: #f5ead0;
  --cell-hover-bg: #e5ceaa;
  --last-move-shadow: #7f3300;
  gap: 0;
  position: relative;
  box-shadow:
    2px 4px 24px rgba(0, 0, 0, 0.55),
    0 0 80px #8f5922 inset;
}

/* 64マス分のみを覆う羊皮紙ノイズテクスチャ */
#board[data-board-theme="parchment"]::before {
  content: '';
  position: absolute;
  inset: calc(4px + var(--label-size));
  /* 中央が白っぽく・外周が焼けた茶色になるよう background-color + background-image で合成 */
  background-color: var(--cell-bg);
  /* 格子線（repeating-gradient）→ 焦げ縁 radial → ノイズ の順に重ねてフィルターで一括ゆらぐ */
  /* opacity: 0.70 を加味して grid line は 0.72 に設定（実効値≈0.50） */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--cell-size) - 1px),
      rgba(80, 40, 10, 0.72) calc(var(--cell-size) - 1px),
      rgba(80, 40, 10, 0.72) var(--cell-size)
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--cell-size) - 1px),
      rgba(80, 40, 10, 0.72) calc(var(--cell-size) - 1px),
      rgba(80, 40, 10, 0.72) var(--cell-size)
    ),
    radial-gradient(ellipse at center,
      rgba(255, 252, 245, 0.80)  0%,
      rgba(245, 234, 208, 0.30) 55%,
      rgba(140,  70,  15, 0.20) 82%,
      rgba(100,  48,  12, 0.38) 100%
    ),
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
  opacity: 0.70;
  z-index: 0;
  filter: url(#parchment-wavy);
}

/* 折り目・シワのコーニックグラデーション（::before の上に薄く重ねる） */
#board[data-board-theme="parchment"]::after {
  content: '';
  position: absolute;
  inset: calc(4px + var(--label-size));
  background: conic-gradient(
    rgba(255,255,255,0.15), rgba(255,255,255,0) 2% 24%, rgba(255,255,255,0.10) 25%,
    rgba(100,60,20,0.05) 0, transparent 27% 48%,
    rgba(100,60,20,0.07) 50%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0) 52% 73%,
    rgba(100,60,20,0.05) 75%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 78% 97%,
    rgba(100,60,20,0.07)
  );
  pointer-events: none;
  z-index: 0;
  filter: url(#parchment-wavy);
}

/* セル: 透明にしてテクスチャを透過（格子線は ::before に移管してゆらぎ対象に） */
#board[data-board-theme="parchment"] .cell {
  background: transparent;
  position: relative;
  z-index: 1;
}
#board[data-board-theme="parchment"] .cell:hover { background: rgba(120, 70, 20, 0.10); }

/* ラベル: セリフ体・紙と同色（枠に溶け込ませる） */
#board[data-board-theme="parchment"] .board-label {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: rgba(245, 234, 208, 0.80);
  letter-spacing: 0.05em;
  filter: url(#parchment-wavy);
}

/* last-move: 赤茶色の枠（インク押し印風） */
#board[data-board-theme="parchment"] .cell.last-move {
  box-shadow: inset 0 0 0 3px var(--last-move-shadow);
}
#board[data-board-theme="parchment"] .cell.last-move:hover {
  box-shadow: inset 0 0 0 3px var(--last-move-shadow);
  background: rgba(120, 70, 20, 0.10);
}

/* 星点: 格子線と同色・完全不透明 */
#board[data-board-theme="parchment"] .cell[data-pos="1,1"]::after,
#board[data-board-theme="parchment"] .cell[data-pos="1,5"]::after,
#board[data-board-theme="parchment"] .cell[data-pos="5,1"]::after,
#board[data-board-theme="parchment"] .cell[data-pos="5,5"]::after {
  background: rgb(80, 40, 10);
}

/* ヒント: 色 + filter でゆらがせてインク滲み風に */
#board[data-board-theme="parchment"] .hint-black { background: rgba(30, 15, 5, 0.55); filter: url(#parchment-wavy); }
#board[data-board-theme="parchment"] .hint-white { background: rgba(30, 15, 5, 0.20); filter: url(#parchment-wavy); }
#board[data-board-theme="parchment"] .hint-ref-black { background: rgba(127, 51, 0, 0.75); filter: url(#parchment-wavy); }
#board[data-board-theme="parchment"] .hint-ref-white { background: rgba(180, 90, 30, 0.65); filter: url(#parchment-wavy); }

/* 最善手ドット: 水色（デフォルトと同色）+ ゆらぎ */
#board[data-board-theme="parchment"] .best-move-dot {
  background: #00ddff;
  box-shadow: 0 0 2px rgba(2, 103, 255, 0.8);
  filter: url(#parchment-wavy);
}

/* 黒石: 石板テーマと同じ黒曜石グラデーション */
#board[data-board-theme="parchment"] .stone.black {
  background: radial-gradient(circle at 36% 30%, #1c1a24, #060508);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 2px rgba(50, 40, 70, 0.4);
}

/* 白石: 石板テーマと同じ陶器グラデーション */
#board[data-board-theme="parchment"] .stone.white {
  background: radial-gradient(circle at 36% 30%, #f4f2f6, #d0ced6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* 石をマスごとにわずかにずらして手置き感を演出（±2.5px 以内の固定オフセット） */
#board[data-board-theme="parchment"] .cell[data-pos="0,0"] .stone { transform: translate( 1.2px, -1.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,0"] .stone { transform: translate(-0.7px,  2.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,0"] .stone { transform: translate( 2.0px,  0.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,0"] .stone { transform: translate(-1.5px, -0.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,0"] .stone { transform: translate( 0.8px,  2.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,0"] .stone { transform: translate(-2.1px,  0.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,0"] .stone { transform: translate( 1.6px, -1.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,0"] .stone { transform: translate(-0.4px,  1.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,1"] .stone { transform: translate( 2.2px,  0.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,1"] .stone { transform: translate(-1.0px, -2.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,1"] .stone { transform: translate( 0.6px,  1.7px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,1"] .stone { transform: translate(-2.3px,  0.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,1"] .stone { transform: translate( 1.4px, -0.6px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,1"] .stone { transform: translate(-0.8px,  2.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,1"] .stone { transform: translate( 2.5px, -1.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,1"] .stone { transform: translate(-1.7px,  0.7px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,2"] .stone { transform: translate( 0.3px, -2.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,2"] .stone { transform: translate(-2.0px,  1.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,2"] .stone { transform: translate( 1.8px,  0.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,2"] .stone { transform: translate(-0.5px, -1.6px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,2"] .stone { transform: translate( 2.4px,  1.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,2"] .stone { transform: translate(-1.2px, -0.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,2"] .stone { transform: translate( 0.9px,  2.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,2"] .stone { transform: translate(-2.4px, -0.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,3"] .stone { transform: translate( 1.5px,  1.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,3"] .stone { transform: translate(-0.3px, -2.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,3"] .stone { transform: translate( 2.1px, -0.7px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,3"] .stone { transform: translate(-1.8px,  1.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,3"] .stone { transform: translate( 0.4px, -2.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,3"] .stone { transform: translate(-2.5px,  0.6px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,3"] .stone { transform: translate( 1.1px,  1.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,3"] .stone { transform: translate(-0.6px, -1.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,4"] .stone { transform: translate( 2.3px, -0.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,4"] .stone { transform: translate(-1.4px,  2.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,4"] .stone { transform: translate( 0.7px, -1.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,4"] .stone { transform: translate(-2.2px, -0.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,4"] .stone { transform: translate( 1.9px,  0.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,4"] .stone { transform: translate(-0.9px, -2.3px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,4"] .stone { transform: translate( 2.0px,  1.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,4"] .stone { transform: translate(-1.3px,  0.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,5"] .stone { transform: translate( 0.5px,  2.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,5"] .stone { transform: translate(-2.3px, -1.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,5"] .stone { transform: translate( 1.3px, -0.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,5"] .stone { transform: translate(-0.2px,  1.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,5"] .stone { transform: translate( 2.5px, -1.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,5"] .stone { transform: translate(-1.6px,  0.8px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,5"] .stone { transform: translate( 0.2px, -2.0px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,5"] .stone { transform: translate(-2.1px,  1.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,6"] .stone { transform: translate( 1.7px, -0.6px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,6"] .stone { transform: translate(-0.8px,  2.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,6"] .stone { transform: translate( 2.2px,  0.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,6"] .stone { transform: translate(-1.1px, -1.7px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,6"] .stone { transform: translate( 0.6px,  2.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,6"] .stone { transform: translate(-2.4px, -0.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,6"] .stone { transform: translate( 1.4px,  1.6px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,6"] .stone { transform: translate(-0.5px, -2.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="0,7"] .stone { transform: translate( 2.4px,  0.7px); }
#board[data-board-theme="parchment"] .cell[data-pos="1,7"] .stone { transform: translate(-1.9px, -0.4px); }
#board[data-board-theme="parchment"] .cell[data-pos="2,7"] .stone { transform: translate( 0.1px,  1.5px); }
#board[data-board-theme="parchment"] .cell[data-pos="3,7"] .stone { transform: translate(-2.0px,  0.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="4,7"] .stone { transform: translate( 1.0px, -2.2px); }
#board[data-board-theme="parchment"] .cell[data-pos="5,7"] .stone { transform: translate(-0.4px,  1.1px); }
#board[data-board-theme="parchment"] .cell[data-pos="6,7"] .stone { transform: translate( 2.3px, -0.9px); }
#board[data-board-theme="parchment"] .cell[data-pos="7,7"] .stone { transform: translate(-1.5px,  2.3px); }

/* 着手順番号: 石板テーマの石に合わせたコントラスト */
#board[data-board-theme="parchment"] .stone-num-by-black {
  color: #fff;
  text-shadow: 0 0 3px #060508, 0 0 3px #060508;
}
#board[data-board-theme="parchment"] .stone-num-by-white {
  color: #000;
  text-shadow: 0 0 3px #f4f2f6, 0 0 3px #f4f2f6;
}

/* 評価値: 墨色 */
#board[data-board-theme="parchment"] .move-eval {
  color: rgba(60, 30, 5, 0.90);
  text-shadow: 0 0 2px rgba(255, 245, 220, 0.80);
}

/* 中割りドット */
#board[data-board-theme="parchment"] .nakawari-badge {
  background: rgba(127, 51, 0, 0.82);
}

/* ===== BASE ===== */
body {
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  background: var(--body-bg);
}

h1 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

hr {
  opacity: 1;
  border-color: var(--hr-color);
}

/* ===== LAYOUT ===== */
.app-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
}

/* ヘッダー左右のスペーサーとテーマトグルボタン */
#header-spacer      { width: 88px; }
#theme-toggle       { width: 88px; }
.header-title-link  { color: inherit; text-decoration: none; }

/* ===== BOARD ===== */
#board {
  display: grid;
  grid-template-columns: var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
  grid-template-rows:    var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
  gap: 2px;
  justify-content: center;
  margin: 16px auto;
  background: var(--board-bg);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.board-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  /* デフォルト（グリーンテーマ）は緑系の薄いミント */
  color: rgba(150, 205, 175, 0.82);
}

.cell {
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  background: var(--cell-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}

.cell:hover { background: var(--cell-hover-bg); }

.last-move { box-shadow: inset 0 0 0 3px var(--last-move-shadow); }

/* ===== HINTS ===== */
/* 合法手ヒント */
.hint {
  width: var(--hint-size);
  height: var(--hint-size);
  border-radius: 50%;
}

.hint-black     { background: rgba(0, 0, 0, 0.3); }
.hint-white     { background: rgba(255, 255, 255, 0.173); }
.hint-ref-black { background: rgba(239, 68, 68, 0.75); }
.hint-ref-white { background: rgba(248, 113, 113, 0.75); }

/* ===== STAR POINTS ===== */
/* 盤面の識別点（星）: (3,3)(3,6)(6,3)(6,6) = 0-indexed (2,2)(2,5)(5,2)(5,5) セルの右下コーナーに配置 */
.cell[data-pos="1,1"]::after,
.cell[data-pos="1,5"]::after,
.cell[data-pos="5,1"]::after,
.cell[data-pos="5,5"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--board-bg);
  transform: translate(50%, 50%);
  z-index: 1;
  pointer-events: none;
}

/* ===== OVERLAYS ===== */
/* 最善手マーカー（青い点） */
.best-move-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00ddff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 2px rgba(2, 103, 255, 0.8);
}

/* 読み切り青点の非表示制御 */
#board.hide-best-dot .best-move-dot { display: none; }

/* 着手順番号（石の上に重ねる） */
.stone-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  font-family: 'M PLUS 1', sans-serif;
}

.stone-num-by-black { color: #000; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.stone-num-by-white { color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }

/* 候補手の評価値（マスの右下に表示） */
.move-eval {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  font-family: 'M PLUS 1', sans-serif;
  text-shadow: none;
}

/* 中割りドット（マスの左下に表示、評価値 ON 時のみ描画） */
.nakawari-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444b3;
  pointer-events: none;
  z-index: 2;
}

/* ===== STONES ===== */
.stone {
  width: var(--stone-size);
  height: var(--stone-size);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.3);
}

.stone.black { background: radial-gradient(circle at 50% 40%, #2a2a2a 0%, #000 75%); }

.stone.white {
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #e5e5e5 80%);
  border: 1px solid rgba(0,0,0,0.15);
}

/* 評価値: 暗い背景で読めるよう白いアウトライン */
#board[data-board-theme="darkblue"] .move-eval {
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.606),
    0 0 1px rgba(255,255,255,0.6);
}

/* ===== THEME: WOOD ===== */
/* 木目角度: ((x*37 + y*53) % 170 + 5)deg を全64マス分プリコンパイル */
/* y=0 */
#board[data-board-theme="wood"] .cell[data-pos="0,0"] .stone { --grain-angle:   5deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,0"] .stone { --grain-angle:  42deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,0"] .stone { --grain-angle:  79deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,0"] .stone { --grain-angle: 116deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,0"] .stone { --grain-angle: 153deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,0"] .stone { --grain-angle:  20deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,0"] .stone { --grain-angle:  57deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,0"] .stone { --grain-angle:  94deg; }
/* y=1 */
#board[data-board-theme="wood"] .cell[data-pos="0,1"] .stone { --grain-angle:  58deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,1"] .stone { --grain-angle:  95deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,1"] .stone { --grain-angle: 132deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,1"] .stone { --grain-angle: 169deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,1"] .stone { --grain-angle:  36deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,1"] .stone { --grain-angle:  73deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,1"] .stone { --grain-angle: 110deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,1"] .stone { --grain-angle: 147deg; }
/* y=2 */
#board[data-board-theme="wood"] .cell[data-pos="0,2"] .stone { --grain-angle: 111deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,2"] .stone { --grain-angle: 148deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,2"] .stone { --grain-angle:  15deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,2"] .stone { --grain-angle:  52deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,2"] .stone { --grain-angle:  89deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,2"] .stone { --grain-angle: 126deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,2"] .stone { --grain-angle: 163deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,2"] .stone { --grain-angle:  30deg; }
/* y=3 */
#board[data-board-theme="wood"] .cell[data-pos="0,3"] .stone { --grain-angle: 164deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,3"] .stone { --grain-angle:  31deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,3"] .stone { --grain-angle:  68deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,3"] .stone { --grain-angle: 105deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,3"] .stone { --grain-angle: 142deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,3"] .stone { --grain-angle:   9deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,3"] .stone { --grain-angle:  46deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,3"] .stone { --grain-angle:  83deg; }
/* y=4 */
#board[data-board-theme="wood"] .cell[data-pos="0,4"] .stone { --grain-angle:  47deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,4"] .stone { --grain-angle:  84deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,4"] .stone { --grain-angle: 121deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,4"] .stone { --grain-angle: 158deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,4"] .stone { --grain-angle:  25deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,4"] .stone { --grain-angle:  62deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,4"] .stone { --grain-angle:  99deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,4"] .stone { --grain-angle: 136deg; }
/* y=5 */
#board[data-board-theme="wood"] .cell[data-pos="0,5"] .stone { --grain-angle: 100deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,5"] .stone { --grain-angle: 137deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,5"] .stone { --grain-angle: 174deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,5"] .stone { --grain-angle:  41deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,5"] .stone { --grain-angle:  78deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,5"] .stone { --grain-angle: 115deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,5"] .stone { --grain-angle: 152deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,5"] .stone { --grain-angle:  19deg; }
/* y=6 */
#board[data-board-theme="wood"] .cell[data-pos="0,6"] .stone { --grain-angle: 153deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,6"] .stone { --grain-angle:  20deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,6"] .stone { --grain-angle:  57deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,6"] .stone { --grain-angle:  94deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,6"] .stone { --grain-angle: 131deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,6"] .stone { --grain-angle: 168deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,6"] .stone { --grain-angle:  35deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,6"] .stone { --grain-angle:  72deg; }
/* y=7 */
#board[data-board-theme="wood"] .cell[data-pos="0,7"] .stone { --grain-angle:  36deg; }
#board[data-board-theme="wood"] .cell[data-pos="1,7"] .stone { --grain-angle:  73deg; }
#board[data-board-theme="wood"] .cell[data-pos="2,7"] .stone { --grain-angle: 110deg; }
#board[data-board-theme="wood"] .cell[data-pos="3,7"] .stone { --grain-angle: 147deg; }
#board[data-board-theme="wood"] .cell[data-pos="4,7"] .stone { --grain-angle:  14deg; }
#board[data-board-theme="wood"] .cell[data-pos="5,7"] .stone { --grain-angle:  51deg; }
#board[data-board-theme="wood"] .cell[data-pos="6,7"] .stone { --grain-angle:  88deg; }
#board[data-board-theme="wood"] .cell[data-pos="7,7"] .stone { --grain-angle: 125deg; }
/* ウッドテーマ: background-attachment:fixed でビューポート基準のグラデーションを共有し、
   全セルにまたがる統一した木目を表現（格子線・外周はフラットな木色のまま）*/

/* ラベル: 木目を刻んだような温かみのあるハニー色・クラシックなセリフ体 */
#board[data-board-theme="wood"] .board-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: rgba(210, 162, 85, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
#board[data-board-theme="wood"] .cell {
  background:
    /* 細かい縞（8px周期・89°）*/
    repeating-linear-gradient(
      89deg,
      transparent 0px, transparent 6px,
      rgba(90, 45, 5, 0.07) 7px, rgba(90, 45, 5, 0.07) 8px
    ),
    /* 中程度の縞（19px周期・91°）*/
    repeating-linear-gradient(
      91deg,
      transparent 0px, transparent 16px,
      rgba(70, 35, 5, 0.09) 17px, rgba(70, 35, 5, 0.09) 19px
    ),
    /* 大きい縞（43px周期・88°）*/
    repeating-linear-gradient(
      88deg,
      transparent 0px, transparent 38px,
      rgba(55, 25, 5, 0.08) 40px, rgba(55, 25, 5, 0.08) 43px
    ),
    /* ベースカラー */
    linear-gradient(90deg, #bf7e3a, #d4974e 30%, #c08040 60%, #d4974e 80%, #bf7e3a);
  background-attachment: fixed;
}
#board[data-board-theme="wood"] .cell:hover {
  background: var(--cell-hover-bg);
}

/* 黒石→ダークウォールナット、白石→アイボリーメープル */
#board[data-board-theme="wood"] .stone.black {
  background:
    /* 黒檀風: 密で急角度の細い光沢線 */
    repeating-linear-gradient(
      calc(var(--grain-angle, 14deg) + 18deg),
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.08) 1px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 5px,
      rgba(255,255,255,0.04) 6px,
      rgba(255,255,255,0.00) 7px
    ),
    /* 黒檀風: 細い暗い影線 */
    repeating-linear-gradient(
      calc(var(--grain-angle, 14deg) + 18deg),
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.22) 2px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 7px,
      rgba(0,0,0,0.12) 8px,
      rgba(0,0,0,0.00) 9px
    ),
    /* ベース */
    radial-gradient(circle at 38% 32%, #44220c, #110401);
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,0.4),
    0 2px 5px rgba(0,0,0,0.45);
}
#board[data-board-theme="wood"] .stone.white {
  background:
    /* 楓風: 緩角度の広い光沢帯 */
    repeating-linear-gradient(
      calc(var(--grain-angle, 14deg) - 6deg),
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.08) 2px,
      rgba(255,255,255,0.04) 5px,
      rgba(255,255,255,0.00) 8px,
      rgba(255,255,255,0.00) 16px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.00) 20px
    ),
    /* 楓風: 広い間隔の柔らかい木色線 */
    repeating-linear-gradient(
      calc(var(--grain-angle, 14deg) - 6deg),
      rgba(0,0,0,0.00) 0px,
      rgba(139,90,43,0.07) 3px,
      rgba(139,90,43,0.03) 6px,
      rgba(0,0,0,0.00) 9px,
      rgba(0,0,0,0.00) 18px,
      rgba(139,90,43,0.04) 20px,
      rgba(0,0,0,0.00) 22px
    ),
    /* ベース */
    radial-gradient(circle at 40% 35%, #fdf3dc, #c9a96e);
  border: 1px solid rgba(140, 85, 20, 0.35);
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.25);
}

/* ===== THEME: BLUE ===== */
/* ブルーテーマ: 深海イメージ */

/* ラベル: 深海の水面から差し込む青い光・幾何学的な未来的フォント */
#board[data-board-theme="darkblue"] .board-label {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(110, 195, 240, 0.85);
  text-shadow: 0 0 6px rgba(60, 160, 220, 0.4);
}

/* 盤面全体に深海の青いグロー */
#board[data-board-theme="darkblue"] {
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 48px rgba(20, 90, 200, 0.35);
}

/* セル: 上からの光と底の闇をインセットシャドウで表現 */
#board[data-board-theme="darkblue"] .cell {
  background: var(--cell-bg);
  box-shadow:
    inset 0 3px 8px  rgba(120, 210, 255, 0.13),
    inset 0 -4px 10px rgba(0, 10, 40, 0.55);
}
#board[data-board-theme="darkblue"] .cell:hover {
  background: var(--cell-hover-bg);
  box-shadow:
    inset 0 3px 8px  rgba(140, 230, 255, 0.2),
    inset 0 -4px 10px rgba(0, 10, 40, 0.35);
}
/* last-move の orange 枠を .cell / .cell:hover の box-shadow に上書きされないよう明示的に指定 */
#board[data-board-theme="darkblue"] .cell.last-move {
  box-shadow:
    inset 0 0 0 4px var(--last-move-shadow),
    inset 0 3px 8px  rgba(120, 210, 255, 0.13),
    inset 0 -4px 10px rgba(0, 10, 40, 0.55);
}
#board[data-board-theme="darkblue"] .cell.last-move:hover {
  box-shadow:
    inset 0 0 0 4px var(--last-move-shadow),
    inset 0 3px 8px  rgba(140, 230, 255, 0.2),
    inset 0 -4px 10px rgba(0, 10, 40, 0.35);
}

/* 黒石: 深淵の闇 + 深海の青い発光 */
#board[data-board-theme="darkblue"] .stone.black {
  background: radial-gradient(circle at 38% 32%, #071525, #010408);
  box-shadow:
    inset 0 -4px 8px rgba(0, 50, 120, 0.5),
    0 0 10px rgba(20, 90, 180, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.7);
}

/* 白石: 深海の生物発光（淡いシアン〜白） */
#board[data-board-theme="darkblue"] .stone.white {
  background: radial-gradient(circle at 38% 32%, #e8f8ff, #80d0f0);
  border: 1px solid rgba(80, 180, 230, 0.5);
  box-shadow:
    inset 0 -4px 6px rgba(40, 140, 200, 0.25),
    0 0 12px rgba(100, 210, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

/* ===== THEME: URUSHI ===== */
/* 漆テーマ */

/* ラベル: 蒔絵の金箔のような輝き・格調あるローマン体 */
#board[data-board-theme="urushi"] .board-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(212, 175, 55, 0.9);
  text-shadow: 0 0 6px rgba(212, 155, 30, 0.35);
}

/* 盤面外周: 金の二重縁 + 朱の残光 */
#board[data-board-theme="urushi"] {
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.75),
    0 0 0 5px rgba(60, 10, 5, 0.95),
    0 8px 28px rgba(0, 0, 0, 0.85),
    0 0 50px rgba(160, 40, 10, 0.18);
}

/* セル: 漆黒の深み。上から蝋燭の光が差す */
#board[data-board-theme="urushi"] .cell {
  background: var(--cell-bg);
  box-shadow: inset 0 3px 12px rgba(180, 50, 15, 0.1);
}

/* ホバー: 朱の炎が内側から滲む */
#board[data-board-theme="urushi"] .cell:hover {
  background: var(--cell-hover-bg);
  box-shadow: inset 0 0 16px rgba(210, 70, 25, 0.4);
}
/* last-move の orange 枠を .cell / .cell:hover の box-shadow に上書きされないよう明示的に指定 */
#board[data-board-theme="urushi"] .cell.last-move {
  box-shadow: inset 0 0 0 4px var(--last-move-shadow), inset 0 3px 12px rgba(180, 50, 15, 0.1);
}
#board[data-board-theme="urushi"] .cell.last-move:hover {
  box-shadow: inset 0 0 0 4px var(--last-move-shadow), inset 0 0 16px rgba(210, 70, 25, 0.4);
}

/* ヒント点: 金色の光点 */
#board[data-board-theme="urushi"] .hint-black { background: rgba(212, 175, 55, 0.8); }
#board[data-board-theme="urushi"] .hint-white { background: rgba(212, 175, 55, 0.55); }
#board[data-board-theme="urushi"] .nakawari-badge { background: rgba(212, 175, 55, 0.85); }

/* 黒石: 漆黒の深い艶 + 金の蒔絵縁 */
#board[data-board-theme="urushi"] .stone.black {
  background: radial-gradient(circle at 33% 27%, #3d0d0d 0%, #080000 70%);
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 白石: 象牙〜飴色。漆器の上に置かれた骨牌のような質感 */
#board[data-board-theme="urushi"] .stone.white {
  background: radial-gradient(circle at 33% 27%, #fef9f0 0%, #d4a060 65%, #a06828 100%);
  border: 1px solid rgba(180, 130, 40, 0.6);
  box-shadow:
    inset 0 -5px 10px rgba(120, 60, 5, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(210, 160, 50, 0.22);
}

/* ===== THEME: METAL ===== */
/* メタリックテーマ */

/* ラベル: 刻印されたような銀白色・工業的なボールドフォント */
#board[data-board-theme="metal"] .board-label {
  font-family: Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(195, 200, 212, 0.9);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.7),
    0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* 盤面: スチールグレーグラデーション + クロームの多重リング */
#board[data-board-theme="metal"] {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  /* ギャップ（格子線）を暗いグレーに */
  background: linear-gradient(
    180deg,
    #2e2e2e 0%,
    #222222 18%,
    #282828 36%,
    #1e1e1e 52%,
    #181818 76%,
    #252525 100%
  );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.82),
    0 0 0 2px rgba(200,200,200,0.50),
    0 0 0 4px rgba(90,90,90,0.95),
    0 0 0 7px rgba(50,50,50,1),
    0 0 0 8px rgba(255,255,255,0.18),
    0 18px 40px rgba(0,0,0,0.55);
}

/* 盤面全体に"金属反射"を重ねる */
#board[data-board-theme="metal"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* 1. 全面に連続するヘアライン */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.085) 0px,
      rgba(255,255,255,0.085) 1px,
      rgba(255,255,255,0.00) 1px,
      rgba(255,255,255,0.00) 4px
    ),
    /* 2. 暗い筋を少し混ぜて単調さを防ぐ */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 6px,
      rgba(0,0,0,0.045) 7px,
      rgba(0,0,0,0.00) 8px
    ),
    /* 3. 上からの長い反射帯 */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.16) 7%,
      rgba(255,255,255,0.04) 16%,
      rgba(255,255,255,0.00) 28%,
      rgba(0,0,0,0.00) 52%,
      rgba(0,0,0,0.10) 78%,
      rgba(255,255,255,0.07) 100%
    ),
    /* 4. 中央が少し持ち上がったような鈍い反射 */
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.07) 24%,
      rgba(255,255,255,0.00) 52%
    ),
    /* 5. 斜めの冷たい金属反射 */
    linear-gradient(
      135deg,
      rgba(170,205,255,0.10) 0%,
      rgba(255,255,255,0.00) 30%,
      rgba(255,255,255,0.06) 48%,
      rgba(0,0,0,0.00) 70%,
      rgba(165,200,255,0.05) 100%
    ),
    /* 6. 端が沈む＝厚い板っぽい落ち込み */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0,0,0,0.00) 58%,
      rgba(0,0,0,0.08) 78%,
      rgba(0,0,0,0.16) 100%
    );
}

/* 格子線オーバーレイ（セル境界に光と影を入れる） */
#board[data-board-theme="metal"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0,
      rgba(255,255,255,0.00) 47px,
      rgba(255,255,255,0.12) 47px,
      rgba(0,0,0,0.20) 48px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0,
      rgba(255,255,255,0.00) 47px,
      rgba(255,255,255,0.10) 47px,
      rgba(0,0,0,0.18) 48px
    );
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
}

/* セルを盤面オーバーレイより前に出す */
#board[data-board-theme="metal"] .cell,
#board[data-board-theme="metal"] .stone,
#board[data-board-theme="metal"] .hint-black,
#board[data-board-theme="metal"] .hint-white {
  position: relative;
  z-index: 1;
}

/* セル: brushed steel */
#board[data-board-theme="metal"] .cell {
  background: color-mix(in srgb, var(--cell-bg) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(0,0,0,0.06);
}

/* last-move の orange 枠を .cell / .cell:hover の box-shadow に上書きされないよう明示的に指定 */
#board[data-board-theme="metal"] .cell.last-move {
  box-shadow:
    inset 0 0 0 4px var(--last-move-shadow),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(0,0,0,0.06);
}
#board[data-board-theme="metal"] .cell.last-move:hover {
  box-shadow:
    inset 0 0 0 4px var(--last-move-shadow),
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 0 8px rgba(255,255,255,0.08);
}

/* ホバー時は"磨かれた面に光が走る"感じ */
#board[data-board-theme="metal"] .cell:hover {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.14) 0px,
      rgba(255,255,255,0.14) 1px,
      rgba(255,255,255,0.00) 1px,
      rgba(255,255,255,0.00) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 5px,
      rgba(0,0,0,0.06) 6px,
      rgba(0,0,0,0.00) 7px
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.12) 12%,
      rgba(255,255,255,0.03) 26%,
      rgba(0,0,0,0.00) 52%,
      rgba(0,0,0,0.06) 74%,
      rgba(255,255,255,0.08) 100%
    ),
    var(--cell-hover-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 0 8px rgba(255,255,255,0.08);
}

/* ヒント点: 金属光沢 */
#board[data-board-theme="metal"] .hint-black,
#board[data-board-theme="metal"] .hint-white {
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 1px rgba(0,0,0,0.35),
    0 0 4px rgba(255,255,255,0.18);
}

/* 石 共通 */
#board[data-board-theme="metal"] .stone {
  border-radius: 50%;
  overflow: hidden;
}

/* 黒石: ガンメタ/チタン */
#board[data-board-theme="metal"] .stone.black {
  background:
    /* 細い強ハイライト */
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.12) 12%, rgba(255,255,255,0.00) 22%),
    /* 金属の回り込み */
    conic-gradient(
      from 210deg at 50% 50%,
      #050505 0deg,
      #3f3f3f 36deg,
      #0d0d0d 78deg,
      #777777 112deg,
      #151515 156deg,
      #020202 220deg,
      #5f5f5f 285deg,
      #121212 330deg,
      #050505 360deg
    ),
    /* 立体感 */
    radial-gradient(circle at 35% 28%, #7d7d7d 0%, #2b2b2b 38%, #090909 72%, #020202 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.12),
    inset 0 -8px 14px rgba(0,0,0,0.92),
    inset -5px -5px 10px rgba(0,0,0,0.40),
    0 6px 18px rgba(0,0,0,0.92),
    0 0 0 1px rgba(0,0,0,0.80),
    0 0 10px rgba(255,255,255,0.05);
}

/* 黒石の鋭い反射線（背景なし、位置・形状のみ定義） */
#board[data-board-theme="metal"] .stone.black::before {
  content: "";
  position: absolute;
  inset: 10% 14% 42% 18%;
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* 白石: シルバー/プラチナ */
#board[data-board-theme="metal"] .stone.white {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 10%, rgba(255,255,255,0.00) 22%),
    conic-gradient(
      from 200deg at 50% 50%,
      #7d7d7d 0deg,
      #f7f7f7 42deg,
      #a9a9a9 78deg,
      #ffffff 118deg,
      #8a8a8a 162deg,
      #d0d0d0 220deg,
      #6e6e6e 286deg,
      #ffffff 330deg,
      #7d7d7d 360deg
    ),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #eeeeee 32%, #b6b6b6 68%, #666666 100%);
  border: 1px solid rgba(0,0,0,0.20);
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,0.98),
    inset 0 -8px 14px rgba(0,0,0,0.38),
    inset -4px -4px 10px rgba(0,0,0,0.12),
    0 5px 16px rgba(0,0,0,0.62),
    0 0 12px rgba(255,255,255,0.20);
}

/* 白石の強いハイライト */
#board[data-board-theme="metal"] .stone.white::before {
  content: "";
  position: absolute;
  inset: 9% 16% 44% 16%;
  border-radius: 50%;
  transform: rotate(-15deg);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.54) 40%,
      rgba(255,255,255,0.00) 100%
    );
  filter: blur(0.3px);
  pointer-events: none;
}

/* 星点セルの z-index を上げて ::after を隣接セルより前面に描画 */
#board[data-board-theme="metal"] .cell[data-pos="1,1"],
#board[data-board-theme="metal"] .cell[data-pos="1,5"],
#board[data-board-theme="metal"] .cell[data-pos="5,1"],
#board[data-board-theme="metal"] .cell[data-pos="5,5"] {
  z-index: 2;
}

/* ===== THEME: CLASSIC ===== */
/* クラシックテーマ: 平成のHTML感。石はベタ塗り・立体感なし・反射光なし */

/* ラベル: 古いゲームボードらしい白抜き文字 */
#board[data-board-theme="classic"] .board-label {
  color: rgba(255, 255, 255, 0.85);
}
#board[data-board-theme="classic"] .stone::before { display: none; }
#board[data-board-theme="classic"] .stone.black {
  background: #000;
  box-shadow: none;
}
#board[data-board-theme="classic"] .stone.white {
  background: #fff;
  border: 1px solid #000;
  box-shadow: none;
}

/* ===== SCORE PANEL ===== */
#stone-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stat-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  border-radius: 12px;
  min-width: 76px;
  gap: 2px;
  height: 90px;
}

.stat-card-black     { background: #1c1c1e; color: #fff; }
.stat-card-white     { background: #f0f0f0; color: #111; border: 1px solid #d8d8d8; }
.stat-card-remaining { background: #eaf4ec; color: var(--green-primary); border: 1px solid rgba(26, 127, 55, 0.2); }

/* 「残」カード内の上部スペーサー（stat-mini-stone と高さを合わせる） */
.stat-spacer { height: 24px; }

.stat-mini-stone {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.stat-card-black .stat-mini-stone { background: radial-gradient(circle at 35% 35%, #666, #111); box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(160, 160, 160, 0.771); }
.stat-card-white .stat-mini-stone { background: radial-gradient(circle at 35% 35%, #fff, #ccc); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* ===== テーマ別ミニ石 ===== */
/* wood */
[data-board-theme="wood"] .stat-card-black .stat-mini-stone {
  background:
    /* 黒檀風: 密で急角度 */
    repeating-linear-gradient(
      32deg,
      rgba(255,255,255,0.00) 0px, rgba(255,255,255,0.08) 1px, rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 5px, rgba(255,255,255,0.04) 6px, rgba(255,255,255,0.00) 7px
    ),
    repeating-linear-gradient(
      32deg,
      rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.22) 2px, rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 7px, rgba(0,0,0,0.12) 8px, rgba(0,0,0,0.00) 9px
    ),
    radial-gradient(circle at 38% 32%, #44220c, #110401);
  box-shadow: 0 2px 5px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(160,160,160,0.5);
}
[data-board-theme="wood"] .stat-card-white .stat-mini-stone {
  background:
    /* 楓風: 緩角度・広い間隔 */
    repeating-linear-gradient(
      8deg,
      rgba(255,255,255,0.00) 0px, rgba(255,255,255,0.18) 2px, rgba(255,255,255,0.08) 5px, rgba(255,255,255,0.00) 8px,
      rgba(255,255,255,0.00) 16px, rgba(255,255,255,0.08) 18px, rgba(255,255,255,0.00) 20px
    ),
    repeating-linear-gradient(
      8deg,
      rgba(0,0,0,0.00) 0px, rgba(139,90,43,0.16) 3px, rgba(139,90,43,0.08) 6px, rgba(0,0,0,0.00) 9px,
      rgba(0,0,0,0.00) 18px, rgba(139,90,43,0.09) 20px, rgba(0,0,0,0.00) 22px
    ),
    radial-gradient(circle at 40% 35%, #fdf3dc, #c9a96e);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
/* urushi */
[data-board-theme="urushi"] .stat-card-black .stat-mini-stone {
  background: radial-gradient(circle at 33% 27%, #3d0d0d, #080000);
  box-shadow: 0 2px 5px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(160,160,160,0.5);
}
[data-board-theme="urushi"] .stat-card-white .stat-mini-stone {
  background: radial-gradient(circle at 33% 27%, #fef9f0, #d4a060 65%, #a06828);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* metal */
[data-board-theme="metal"] .stat-card-black .stat-mini-stone {
  background: conic-gradient(from 210deg at 50% 50%, #050505, #3f3f3f 36deg, #0d0d0d 78deg, #777 112deg, #111 180deg, #555 250deg, #050505 360deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(160,160,160,0.5);
}
[data-board-theme="metal"] .stat-card-white .stat-mini-stone {
  background: conic-gradient(from 200deg at 50% 50%, #c8c8c8, #f8f8f8 40deg, #aaa 90deg, #e8e8e8 160deg, #bbb 230deg, #f0f0f0 300deg, #c8c8c8 360deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* classic */
[data-board-theme="classic"] .stat-card-black .stat-mini-stone {
  background: #111;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(160,160,160,0.5);
}
[data-board-theme="classic"] .stat-card-white .stat-mini-stone {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* retro */
[data-board-theme="retro"] .stat-card-black .stat-mini-stone,
[data-board-theme="retro"] .stat-card-white .stat-mini-stone {
  border-radius: 0;
}
[data-board-theme="retro"] .stat-card-black .stat-mini-stone {
  background: #111;
  box-shadow: 0 0 0 2.5px rgba(180,180,180,0.9);
}
[data-board-theme="retro"] .stat-card-white .stat-mini-stone {
  background: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(130,130,130,0.9);
}

.stat-num {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

/* 手目数（残数の上に小さく表示）。stat-mini-stone と高さを合わせて数字行を揃える */
.stat-num-sub {
  height: 24px;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
}

.stat-label {
  font-size: 0.72rem;
  opacity: 0.75;
  letter-spacing: 0.04em;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-bar-wrap {
  width: 240px;
  height: 5px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.balance-bar {
  height: 100%;
  width: 50%; /* JS が上書きする。初期値は等分。 */
  background: #1c1c1e;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ===== INFO / ENDGAME ===== */
#info {
  font-size: 1rem;
  font-weight: 600;
  color: var(--info-color);
}

#endgame {
  font-size: 0.85rem;
  color: var(--green-primary);
  background: var(--green-badge-bg);
  border: 1px solid var(--green-badge-border);
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-block;
}

#endgame:empty { display: none; }

#endgame.endgame-pending,
#endgame.endgame-pending * { color: transparent !important; }

.copyright { font-size: 0.72rem; }

/* ===== BOARD EDIT MODE ===== */
.board-edit-toolbar {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(128, 128, 128, 0.1);
  border: 1px solid var(--bs-border-color);
}

/* 編集モード中の盤面: カーソルをクロスヘアに */
#board.board-edit-mode .cell { cursor: crosshair; }
#custom-board-warning { color: #e6a817; }

/* 石の種類選択・手番ボタン */
.board-edit-stone-btn {
  border: 2px solid var(--bs-border-color);
  background: none;
  color: inherit;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.12s, background 0.12s;
}
.board-edit-stone-btn:hover  { background: rgba(128,128,128,0.15); }
.board-edit-stone-btn.active { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), 0.12); }

/* ===== BOARD THEME MODAL ===== */
.board-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.board-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-size: 0.78rem;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.board-theme-card:hover { background: rgba(128,128,128,0.12); }
.board-theme-card.active { border-color: var(--bs-primary); }
.board-theme-swatch {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}

/* ===== SKY THEME ===== */
/* ヒント点: 明るい盤面でも見えるよう濃い紺色 */
#board[data-board-theme="sky"] .board-label { color: rgba(255, 255, 255, 0.85); }
#board[data-board-theme="sky"] .hint-black { background: rgba(1, 60, 120, 0.85); }
#board[data-board-theme="sky"] .hint-white { background: rgba(1, 60, 120, 0.35); }

/* ===== ROSE THEME ===== */
/* スカイの薄赤色版。明るいセルに合わせてラベルは白、ヒントは濃い赤 */
#board[data-board-theme="rose"] .board-label { color: rgba(255, 255, 255, 0.85); }
#board[data-board-theme="rose"] .hint-black { background: rgba(100, 10, 10, 0.85); }
#board[data-board-theme="rose"] .hint-white { background: rgba(100, 10, 10, 0.35); }
#board[data-board-theme="rose"] .nakawari-badge { background: rgba(212, 175, 55, 0.85); }

/* ===== THEME: RETRO ===== */

/* 格子線を4px幅に・角を直角に */
#board[data-board-theme="retro"] { gap: 4px; border-radius: 0; }

/* 星点を12x12pxの正方形に */
#board[data-board-theme="retro"] .cell[data-pos="1,1"]::after,
#board[data-board-theme="retro"] .cell[data-pos="1,5"]::after,
#board[data-board-theme="retro"] .cell[data-pos="5,1"]::after,
#board[data-board-theme="retro"] .cell[data-pos="5,5"]::after {
  width: 12px;
  height: 12px;
  border-radius: 0;
  bottom: -2px;
  right: -2px;
}

/* ラベル: ドットフォント・白 */
#board[data-board-theme="retro"] .board-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #ffffff;
  text-shadow: none;
}

/* ヒント点 */
#board[data-board-theme="retro"] .hint-black,
#board[data-board-theme="retro"] .hint-white,
#board[data-board-theme="retro"] .hint-ref-black,
#board[data-board-theme="retro"] .hint-ref-white { border-radius: 0; }
#board[data-board-theme="retro"] .hint-black { background: #555555; }
#board[data-board-theme="retro"] .hint-white { background: #c0c0c0; }

/* 石の共通: border-radius をなくしてピクセルアートの形を生かす */
#board[data-board-theme="retro"] .stone {
  background: transparent !important;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  /* transform: translateZ(0);
  image-rendering: pixelated; */
}

/* ピクセルアート黒石 */
#board[data-board-theme="retro"] .stone.black::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  background: transparent;
  box-shadow:
    20px 4px 0 0.5px #040100, 24px 4px 0 0.5px #040100, 28px 4px 0 0.5px #040100,
    12px 8px 0 0.5px #040100, 16px 8px 0 0.5px #040100, 20px 8px 0 0.5px #040100, 24px 8px 0 0.5px #040100, 28px 8px 0 0.5px #040100, 32px 8px 0 0.5px #040100, 36px 8px 0 0.5px #040100,
    8px 12px 0 0.5px #040100, 12px 12px 0 0.5px #040100, 16px 12px 0 0.5px #040100, 20px 12px 0 0.5px #040100, 24px 12px 0 0.5px #040100, 28px 12px 0 0.5px #040100, 32px 12px 0 0.5px #040100, 36px 12px 0 0.5px #040100, 40px 12px 0 0.5px #040100,
    8px 16px 0 0.5px #040100, 12px 16px 0 0.5px #040100, 16px 16px 0 0.5px #040100, 20px 16px 0 0.5px #040100, 24px 16px 0 0.5px #040100, 28px 16px 0 0.5px #040100, 32px 16px 0 0.5px #040100, 36px 16px 0 0.5px #040100, 40px 16px 0 0.5px #040100,
    4px 20px 0 0.5px #040100, 8px 20px 0 0.5px #040100, 12px 20px 0 0.5px #040100, 16px 20px 0 0.5px #040100, 20px 20px 0 0.5px #040100, 24px 20px 0 0.5px #040100, 28px 20px 0 0.5px #040100, 32px 20px 0 0.5px #040100, 36px 20px 0 0.5px #040100, 40px 20px 0 0.5px #040100, 44px 20px 0 0.5px #040100,
    4px 24px 0 0.5px #040100, 8px 24px 0 0.5px #040100, 12px 24px 0 0.5px #040100, 16px 24px 0 0.5px #040100, 20px 24px 0 0.5px #040100, 24px 24px 0 0.5px #040100, 28px 24px 0 0.5px #040100, 32px 24px 0 0.5px #040100, 36px 24px 0 0.5px #040100, 40px 24px 0 0.5px #040100, 44px 24px 0 0.5px #040100,
    4px 28px 0 0.5px #040100, 8px 28px 0 0.5px #040100, 12px 28px 0 0.5px #040100, 16px 28px 0 0.5px #040100, 20px 28px 0 0.5px #040100, 24px 28px 0 0.5px #040100, 28px 28px 0 0.5px #040100, 32px 28px 0 0.5px #040100, 36px 28px 0 0.5px #040100, 40px 28px 0 0.5px #040100, 44px 28px 0 0.5px #040100,
    8px 32px 0 0.5px #040100, 12px 32px 0 0.5px #040100, 16px 32px 0 0.5px #040100, 20px 32px 0 0.5px #040100, 24px 32px 0 0.5px #040100, 28px 32px 0 0.5px #040100, 32px 32px 0 0.5px #040100, 36px 32px 0 0.5px #040100, 40px 32px 0 0.5px #040100,
    8px 36px 0 0.5px #040100, 12px 36px 0 0.5px #040100, 16px 36px 0 0.5px #040100, 20px 36px 0 0.5px #040100, 24px 36px 0 0.5px #040100, 28px 36px 0 0.5px #040100, 32px 36px 0 0.5px #040100, 36px 36px 0 0.5px #040100, 40px 36px 0 0.5px #040100,
    12px 40px 0 0.5px #040100, 16px 40px 0 0.5px #040100, 20px 40px 0 0.5px #040100, 24px 40px 0 0.5px #040100, 28px 40px 0 0.5px #040100, 32px 40px 0 0.5px #040100, 36px 40px 0 0.5px #040100,
    20px 44px 0 0.5px #040100, 24px 44px 0 0.5px #040100, 28px 44px 0 0.5px #040100;
}

/* ピクセルアート白石（同形状・ライトグリーン色） */
#board[data-board-theme="retro"] .stone.white::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  background: transparent;
  box-shadow:
    20px 4px 0 0.5px #ffffff, 24px 4px 0 0.5px #ffffff, 28px 4px 0 0.5px #ffffff,
    12px 8px 0 0.5px #ffffff, 16px 8px 0 0.5px #ffffff, 20px 8px 0 0.5px #ffffff, 24px 8px 0 0.5px #ffffff, 28px 8px 0 0.5px #ffffff, 32px 8px 0 0.5px #ffffff, 36px 8px 0 0.5px #ffffff,
    8px 12px 0 0.5px #ffffff, 12px 12px 0 0.5px #ffffff, 16px 12px 0 0.5px #ffffff, 20px 12px 0 0.5px #ffffff, 24px 12px 0 0.5px #ffffff, 28px 12px 0 0.5px #ffffff, 32px 12px 0 0.5px #ffffff, 36px 12px 0 0.5px #ffffff, 40px 12px 0 0.5px #ffffff,
    8px 16px 0 0.5px #ffffff, 12px 16px 0 0.5px #ffffff, 16px 16px 0 0.5px #ffffff, 20px 16px 0 0.5px #ffffff, 24px 16px 0 0.5px #ffffff, 28px 16px 0 0.5px #ffffff, 32px 16px 0 0.5px #ffffff, 36px 16px 0 0.5px #ffffff, 40px 16px 0 0.5px #ffffff,
    4px 20px 0 0.5px #ffffff, 8px 20px 0 0.5px #ffffff, 12px 20px 0 0.5px #ffffff, 16px 20px 0 0.5px #ffffff, 20px 20px 0 0.5px #ffffff, 24px 20px 0 0.5px #ffffff, 28px 20px 0 0.5px #ffffff, 32px 20px 0 0.5px #ffffff, 36px 20px 0 0.5px #ffffff, 40px 20px 0 0.5px #ffffff, 44px 20px 0 0.5px #ffffff,
    4px 24px 0 0.5px #ffffff, 8px 24px 0 0.5px #ffffff, 12px 24px 0 0.5px #ffffff, 16px 24px 0 0.5px #ffffff, 20px 24px 0 0.5px #ffffff, 24px 24px 0 0.5px #ffffff, 28px 24px 0 0.5px #ffffff, 32px 24px 0 0.5px #ffffff, 36px 24px 0 0.5px #ffffff, 40px 24px 0 0.5px #ffffff, 44px 24px 0 0.5px #ffffff,
    4px 28px 0 0.5px #ffffff, 8px 28px 0 0.5px #ffffff, 12px 28px 0 0.5px #ffffff, 16px 28px 0 0.5px #ffffff, 20px 28px 0 0.5px #ffffff, 24px 28px 0 0.5px #ffffff, 28px 28px 0 0.5px #ffffff, 32px 28px 0 0.5px #ffffff, 36px 28px 0 0.5px #ffffff, 40px 28px 0 0.5px #ffffff, 44px 28px 0 0.5px #ffffff,
    8px 32px 0 0.5px #ffffff, 12px 32px 0 0.5px #ffffff, 16px 32px 0 0.5px #ffffff, 20px 32px 0 0.5px #ffffff, 24px 32px 0 0.5px #ffffff, 28px 32px 0 0.5px #ffffff, 32px 32px 0 0.5px #ffffff, 36px 32px 0 0.5px #ffffff, 40px 32px 0 0.5px #ffffff,
    8px 36px 0 0.5px #ffffff, 12px 36px 0 0.5px #ffffff, 16px 36px 0 0.5px #ffffff, 20px 36px 0 0.5px #ffffff, 24px 36px 0 0.5px #ffffff, 28px 36px 0 0.5px #ffffff, 32px 36px 0 0.5px #ffffff, 36px 36px 0 0.5px #ffffff, 40px 36px 0 0.5px #ffffff,
    12px 40px 0 0.5px #ffffff, 16px 40px 0 0.5px #ffffff, 20px 40px 0 0.5px #ffffff, 24px 40px 0 0.5px #ffffff, 28px 40px 0 0.5px #ffffff, 32px 40px 0 0.5px #ffffff, 36px 40px 0 0.5px #ffffff,
    20px 44px 0 0.5px #ffffff, 24px 44px 0 0.5px #ffffff, 28px 44px 0 0.5px #ffffff;
}

/* 使い方モーダルのセクション見出し */
.usage-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.usage-section-title:first-child { margin-top: 0; }

/* ===== BUTTONS ===== */
.btn {
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.03em;
  touch-action: manipulation;
}

.btn-primary       { background: var(--green-primary); border-color: var(--green-primary); }
.btn-primary:hover { background: var(--green-hover);   border-color: var(--green-hover); }

/* 解析パネル内の小さなボタン共通サイズ */
.analysis-btn { font-size: 0.75rem; }

/* ===== ANALYSIS GRAPH ===== */
#graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  line-height: 1;
}

#graph-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#ai-status { color: #f97316; }

.graph-canvas-wrap { position: relative; height: 90px; }

.graph-caption {
  font-size: 0.68rem;
  text-align: left;
  padding-left: 2px;
  margin: 0;
  line-height: 1;
}

/* ===== MISTAKE BADGES ===== */
.mistake-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.1s;
  white-space: nowrap;
}

.mistake-badge:hover { opacity: 0.7; }

.mistake-blunder    { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.35); color: #dc2626; }
.mistake-mistake    { background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.35); color: #ea6718; }
.mistake-inaccuracy { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.40); color: #a07000; }

#mistake-list:empty { display: none; }

/* ===== OPENING GUIDE ===== */
.opening-dot-row {
  position: absolute;
  top: 2px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  z-index: 2;
}

.opening-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

.opening-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: 500;
  color: #fff;
  margin-right: 4px;
}

/* ===== BRANCH TREE ===== */
.branch-tree { font-size: 0.83rem; text-align: left; }

.tree-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 26px;
  border-radius: 4px;
  padding: 2px 4px;
  overflow: hidden;
}

.tree-line.clickable       { cursor: pointer; }
.tree-line.clickable:hover { background: rgba(0,0,0,0.06); }

.ref-line {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.tree-ref-label {
  font-size: 0.70em;
  color: var(--bs-secondary-color);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
  margin-right: 3px;
  white-space: nowrap;
}

.tree-connector {
  font-family: monospace;
  white-space: pre;
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.tree-move        { font-family: monospace; font-weight: 500; white-space: nowrap; }
.tree-move-active { color: var(--tree-active-color); }

.tree-arrow {
  color: var(--bs-secondary-color);
  font-size: 0.85em;
  white-space: nowrap;
  flex-shrink: 0;
}

.tree-badge-now {
  font-size: 0.68em;
  background: var(--tree-active-color);
  color: #fff;
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.tree-del-btn { margin-left: auto; flex-shrink: 0; font-size: 0.72em; padding: 0 5px; line-height: 1.4; }

/* セクション区切りの折りたたみトグル */
.collapse-toggle {
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--bs-secondary-color);
  user-select: none;
}

.collapse-toggle:hover                           { color: var(--bs-body-color); }
.collapse-toggle-label                           { font-weight: 600; }
.collapse-toggle-label::after                    { content: " ▴"; }
.collapse-toggle.collapsed .collapse-toggle-label::after { content: " ▾"; }

/* 棋譜・設定パネル内の横並び行（flex-wrap で折り返し対応） */
.settings-row-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* トグルと区切り線の間のセパレーター */
.collapse-divider {
  flex-grow: 1;
  height: 1px;
  background: var(--bs-border-color);
}

/* ===== SETTINGS ===== */
#kifu-area,
#current-kifu-area { max-width: 480px; }

.flex-input   { min-width: 0; flex: 1; }
#solver-depth { width: 70px; }
.name-input   { width: 90px; }

/* ===== DARK THEME ===== */
/* 明るい背景のテーマはダークモードで背景と同化しやすいためアウトラインでフチ取り */
[data-bs-theme="dark"] #board[data-board-theme="wood"],
[data-bs-theme="dark"] #board[data-board-theme="classic"],
[data-bs-theme="dark"] #board[data-board-theme="retro"],
[data-bs-theme="dark"] #board[data-board-theme="stone"]  { outline: 2px solid rgba(160, 160, 160, 0.5); }

[data-bs-theme="dark"] body              { background: #0d1117; }
[data-bs-theme="dark"] .app-card        { background: #161b22; border-color: #30363d; }
[data-bs-theme="dark"] .board-label     { color: #c9d1d9; }
[data-bs-theme="dark"] .stat-card-black { background: #2c2c2e; }
[data-bs-theme="dark"] .stat-card-white { background: #e8e8ea; }
[data-bs-theme="dark"] .stat-card-remaining {
  background: rgba(63, 185, 80, 0.1);
  color: #3fb950;
  border-color: rgba(63, 185, 80, 0.25);
}
[data-bs-theme="dark"] .balance-bar-wrap { background: #30363d; }
[data-bs-theme="dark"] .balance-bar      { background: #8b949e; }
[data-bs-theme="dark"] #info             { color: #58a6ff; }
[data-bs-theme="dark"] #endgame {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.08);
  border-color: rgba(63, 185, 80, 0.25);
}
[data-bs-theme="dark"] hr                         { border-color: #21262d; }
[data-bs-theme="dark"] .tree-line.clickable:hover { background: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .mistake-blunder    { color: #f87171; }
[data-bs-theme="dark"] .mistake-mistake    { color: #fb923c; }
[data-bs-theme="dark"] .mistake-inaccuracy { color: #facc15; }

/* ===== CUSTOM STONES (野獣先輩モード) ===== */
.custom-stones .stone.black,
.custom-stones .stone.white { border: none; box-shadow: none; }

.custom-stones .stone::before { display: none; }

.custom-stones .stone.black::after,
.custom-stones .stone.white::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  z-index: 0;
}

.custom-stones .stone.black::after { background: url('../assets/YJB.png') center/cover no-repeat; }
.custom-stones .stone.white::after { background: url('../assets/YJW.png') center/cover no-repeat; }

.custom-stones .stat-card-black .stat-mini-stone,
.custom-stones .stat-card-white .stat-mini-stone { box-shadow: none; }

.custom-stones .stat-card-black .stat-mini-stone::after,
.custom-stones .stat-card-white .stat-mini-stone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.custom-stones .stat-card-black .stat-mini-stone::after { background: url('../assets/YJB.png') center/cover no-repeat; }
.custom-stones .stat-card-white .stat-mini-stone::after { background: url('../assets/YJW.png') center/cover no-repeat; }

/* ===== RESPONSIVE ===== */

/* タブレット中間サイズ (561px〜767px) */
@media (min-width: 561px) and (max-width: 767px) {
  .container {
    max-width: 100%;
    padding: 0;
  }
  .app-card {
    padding: 16px 8px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* スマホ用 (横幅560px以下) */
@media (max-width: 560px) {

  body {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  h1 {
    font-size: 1.1em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.04em;
  }

  .app-card {
    padding: 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .app-card > .d-flex.justify-content-between {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 0 !important;
  }

  /* ヘッダー */
  #header-spacer { display: none; }
  #theme-toggle  { width: auto !important; padding: 4px 8px; white-space: nowrap; flex: 0 0 auto; }

  /* ボード */
  #board {
    --cell-size: 38px;
    --label-size: 13px;
    grid-template-columns: var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
    grid-template-rows:    var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
    gap: 1px;
    margin: 6px auto;
    padding: 2px;
  }

  .board-label { font-size: 10px; }
  .stone       { width: 28px; height: 28px; }
  .hint        { width: 9px; height: 9px; }
  /* レトロ: ピクセルアート(46px)を石サイズ(28px)に合わせて縮小 */
  #board[data-board-theme="retro"] .stone.black::before,
  #board[data-board-theme="retro"] .stone.white::before { transform: scale(0.609); transform-origin: 0 0; }
  .stone-num   { font-size: 11px; }
  .move-eval      { font-size: 8px; bottom: 2px; right: 2px; }
  .nakawari-badge { width: 4px; height: 4px; bottom: 3px; left: 3px; }

  /* スコアパネル */
  #stone-count {
    gap: 4px;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .stat-card { padding: 6px 14px; gap: 1px; min-width: 64px; height: 70px !important; }
  .stat-num  { font-size: 1.3rem; }
  .stat-mini-stone { width: 18px; height: 18px; }
  .stat-num-sub    { height: 18px; }
  .balance-bar-wrap { height: 3px; }

  /* 各要素の余白調整 */
  #info    { margin-bottom: 4px !important; }
  #endgame { margin-top: 4px !important; }

  .d-flex.flex-wrap.justify-content-center.gap-1 { margin-bottom: 4px !important; }
  .d-flex.align-items-center.gap-2.my-3 { margin-top: 6px !important; margin-bottom: 6px !important; }

  /* プレイヤー名エリア */
  #name-area    { flex-wrap: wrap; }
  #name-inputs  { width: 100%; justify-content: center; }

  /* 手順ボタン: 2段組みグリッド */
  .nav-control-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .nav-control-group .btn { width: 100%; min-width: 0; white-space: nowrap; }

  /* 1段目: ◀◀ 戻る 進む ▶▶ */
  #btn-undo10 { grid-column: 1; grid-row: 1; font-size: 0;      padding: 10px 4px; }
  #btn-undo   { grid-column: 2; grid-row: 1; font-size: 0.9rem; padding: 10px 4px; }
  #btn-redo   { grid-column: 3; grid-row: 1; font-size: 0.9rem; padding: 10px 4px; }
  #btn-redo10 { grid-column: 4; grid-row: 1; font-size: 0;      padding: 10px 4px; }

  #btn-undo10::after { content: "◀◀"; font-size: 16px; }
  #btn-redo10::after { content: "▶▶"; font-size: 16px; }

  /* 2段目: 最初 分岐点へ 最後 */
  #btn-first  { grid-column: 1;          grid-row: 2; padding: 4px; font-size: 0.72rem; }
  #branch-btn { grid-column: 2 / span 2; grid-row: 2; padding: 4px; font-size: 0.72rem; }
  #btn-last   { grid-column: 4;          grid-row: 2; padding: 4px; font-size: 0.72rem; }
}

/* さらに小さい端末 (横幅360px以下) */
@media (max-width: 360px) {
  #board {
    --cell-size: 33px;
    --label-size: 11px;
    grid-template-columns: var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
    grid-template-rows:    var(--label-size) repeat(8, var(--cell-size)) var(--label-size);
  }

  .stone          { width: 24px; height: 24px; }
  .hint           { width: 8px; height: 8px; }
  .nakawari-badge { width: 4px; height: 4px; bottom: 2px; left: 2px; }
  /* レトロ: ピクセルアート(46px)を石サイズ(24px)に合わせて縮小 */
  #board[data-board-theme="retro"] .stone.black::before,
  #board[data-board-theme="retro"] .stone.white::before { transform: scale(0.522); transform-origin: 0 0; }
  .stone-num { font-size: 9px; }
}

/* 羊皮紙テーマ: スマホ（560px以下）では歪み量を半分に */
@media (max-width: 560px) {
  #board[data-board-theme="parchment"]          { filter: url(#parchment-wavy-sm); }
  #board[data-board-theme="parchment"]::before  { filter: url(#parchment-wavy-sm); }
  #board[data-board-theme="parchment"]::after   { filter: url(#parchment-wavy-sm); }
  #board[data-board-theme="parchment"] .board-label { filter: url(#parchment-wavy-sm); }
  #board[data-board-theme="parchment"] .hint-black,
  #board[data-board-theme="parchment"] .hint-white,
  #board[data-board-theme="parchment"] .hint-ref-black,
  #board[data-board-theme="parchment"] .hint-ref-white { filter: url(#parchment-wavy-sm); }
  #board[data-board-theme="parchment"] .best-move-dot  { filter: url(#parchment-wavy-sm); }
}