/**
 * board.css - Upper Hand 盤面・球体・演出スタイル
 * 
 * 3D立体視球体ビルボード、接地影、2D/3D視点、未開放セルの非表示、
 * 木製彫り込み盤面と高コントラストな白黒球体表現
 */

:root {
  /* 3Dモード用の傾斜角および球体の対面化逆回転角 */
  --rot-x: 42deg;
  --rot-z: -26deg;
  --inv-rot-z: 26deg;
  --inv-rot-x: -42deg;

  /* ライトテーマ盤面カラー: 白石が沈まない落ち着いた温もりの白木トーン */
  --board-plate-bg: linear-gradient(145deg, #dfd2c0 0%, #cbbea9 100%);
  --board-plate-border: 1.5px solid rgba(110, 85, 55, 0.25);
  --board-plate-shadow: 0 16px 40px rgba(50, 35, 20, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.5);

  --socket-l0-bg: radial-gradient(circle at 40% 40%, #c4b5a0 0%, #b8a791 70%, #ab9780 100%);
  --socket-l0-shadow: inset 0 2px 4px rgba(50, 35, 20, 0.25), 0 1px 1px rgba(255, 255, 255, 0.5);
  --socket-l0-border: 1px solid rgba(90, 70, 45, 0.2);

  /* 先手白玉: 純白の輝きと輪郭 */
  --ball-p1-bg: radial-gradient(circle at 36% 32%, #ffffff 0%, #ffffff 55%, #f1f5f9 78%, #e2e8f0 92%, #cbd5e1 100%);
  --ball-p1-border: 1px solid rgba(0, 0, 0, 0.14);
  --ball-p1-inner-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.95), inset 0 -3px 6px rgba(100, 116, 139, 0.2);

  /* 後手黒玉: 深い漆黒と光沢 */
  --ball-p2-bg: radial-gradient(circle at 36% 32%, #52525b 0%, #3f3f46 25%, #27272a 55%, #18181b 85%, #09090b 100%);
  --ball-p2-border: 1px solid rgba(255, 255, 255, 0.18);
  --ball-p2-inner-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.85);

  /* 中立玉: 白黒に調和するスレートグレー */
  --ball-neutral-bg: radial-gradient(circle at 36% 32%, #cbd5e1 0%, #94a3b8 35%, #64748b 70%, #475569 90%, #334155 100%);
  --ball-neutral-border: 1px solid rgba(255, 255, 255, 0.3);
  --ball-neutral-inner-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(15, 23, 42, 0.4);
  --ball-neutral-glow: rgba(148, 163, 184, 0.5);

  --upper-socket-border: rgba(217, 119, 6, 0.7);
  --upper-socket-glow: rgba(245, 158, 11, 0.45);
}

[data-theme="dark"] {
  /* ダークテーマ盤面カラー: 黒石がくっきり際立つスモークウォールナット調 */
  --board-plate-bg: linear-gradient(145deg, #443b33 0%, #302822 100%);
  --board-plate-border: 1.5px solid rgba(255, 255, 255, 0.12);
  --board-plate-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.08);

  --socket-l0-bg: radial-gradient(circle at 40% 40%, #2b231d 0%, #201a15 70%, #16120e 100%);
  --socket-l0-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.08);
  --socket-l0-border: 1px solid rgba(255, 255, 255, 0.08);

  /* ダークテーマ専用黒玉: 艶やかな反射光と明確な輪郭 */
  --ball-p2-bg: radial-gradient(circle at 36% 32%, #71717a 0%, #52525b 25%, #3f3f46 52%, #27272a 80%, #18181b 100%);
  --ball-p2-border: 1.5px solid rgba(255, 255, 255, 0.28);
  --ball-p2-inner-shadow: 0 4px 12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.9);

  --upper-socket-border: rgba(245, 158, 11, 0.8);
  --upper-socket-glow: rgba(245, 158, 11, 0.6);
}

#board-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 10px;
  perspective: 1300px;
  min-height: 440px;
}

.board-stage {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2D正射影モード */
.board-stage.mode-2d {
  transform: rotateX(0deg) rotateZ(0deg);
}

/* 3Dアイソメトリックモード */
.board-stage.mode-3d {
  transform: rotateX(var(--rot-x)) rotateZ(var(--rot-z));
}

/* 台座プレート */
.base-plate {
  position: absolute;
  inset: -16px;
  background: var(--board-plate-bg);
  border-radius: 20px;
  border: var(--board-plate-border);
  box-shadow: var(--board-plate-shadow);
  transform: translateZ(-2px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* セル共通設定 */
.board-cell {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* 未開放の段セルは非表示 */
.board-cell[data-status="locked"] {
  display: none !important;
}

.board-cell.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.board-cell.clickable .ball {
  pointer-events: auto;
  cursor: pointer;
}

.board-cell.has-ball {
  pointer-events: auto;
  cursor: default;
}

.board-cell.has-ball .ball {
  pointer-events: auto;
  cursor: default;
}

/* 2Dモードでは上層が下層より手前に重なるようレイヤー順の前後関係を付与 */
.board-stage.mode-2d .board-cell {
  z-index: calc(var(--layer, 0) + 1);
}

/* 3DモードではCSS 3Dレンダリングコンテキストによる深度ソートとレイキャストを行うため前後関係は自動 */
.board-stage.mode-3d .board-cell {
  z-index: auto;
}

/* くぼみソケット */
.cell-socket {
  position: absolute;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.board-cell.layer-0 .cell-socket {
  background: var(--socket-l0-bg);
  box-shadow: var(--socket-l0-shadow);
  border: var(--socket-l0-border);
}

.board-cell.clickable:hover .cell-socket {
  border-color: var(--upper-socket-border);
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.3),
    0 0 14px var(--upper-socket-glow);
}

/* 第1層以上の開放されたくぼみ */
.board-cell:not(.layer-0)[data-status="-1"] .cell-socket {
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.04) 80%);
  border: 1.5px solid var(--upper-socket-border);
  box-shadow: 0 0 16px var(--upper-socket-glow);
  animation: pulse-socket 1.8s infinite ease-in-out;
}

@keyframes pulse-socket {
  0%, 100% {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  }
  50% {
    border-color: var(--upper-socket-border);
    box-shadow: 0 0 20px var(--upper-socket-glow);
  }
}

/* 3D接地影: ソケット表面に落ちるアンビエントシャドウ */
.ball-shadow {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 75%);
  transform: translateZ(1px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 2Dモードでは玉自体のドロップシャドウで表現するため影divは非表示 */
.board-stage.mode-2d .ball-shadow {
  display: none;
}

.board-stage.mode-3d .board-cell.has-ball .ball-shadow {
  opacity: 1;
}

/* 球体 */
.ball {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.board-cell.has-ball .ball {
  opacity: 1;
}

/* 2Dモード時の球体配置 */
.board-stage.mode-2d .ball {
  transform: scale(1);
}

/* 3Dモード時: 盤面傾斜を相殺してカメラ正面を向く立体球体 */
.board-stage.mode-3d .ball {
  transform: translateZ(calc(var(--cell-size) * 0.44)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x));
}

/* ホバー時のゴーストプレビュー */
.board-stage.mode-2d .board-cell.clickable:hover .ball {
  opacity: 0.65;
}

.board-stage.mode-3d .board-cell.clickable:hover .ball {
  opacity: 0.65;
}

.board-stage.turn-p1 .board-cell.clickable:hover .ball {
  background: var(--ball-p1-bg);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.board-stage.turn-p2 .board-cell.clickable:hover .ball {
  background: var(--ball-p2-bg);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

/* 先手玉 */
.ball-p1 .ball {
  background: var(--ball-p1-bg);
  border: var(--ball-p1-border);
  box-shadow: var(--ball-p1-inner-shadow);
}

/* 後手玉 */
.ball-p2 .ball {
  background: var(--ball-p2-bg);
  border: var(--ball-p2-border);
  box-shadow: var(--ball-p2-inner-shadow);
}

/* 中立玉 */
.ball-neutral .ball {
  background: var(--ball-neutral-bg);
  border: var(--ball-neutral-border);
  box-shadow: var(--ball-neutral-inner-shadow), 0 0 14px var(--ball-neutral-glow);
}

/* 2D着地アニメーション */
.board-stage.mode-2d .anim-drop .ball {
  animation: drop-bounce-2d 0.28s cubic-bezier(0.17, 0.89, 0.32, 1.25) forwards;
}

@keyframes drop-bounce-2d {
  0% { transform: translateY(-24px) scale(1.15); opacity: 0; }
  65% { transform: translateY(2px) scale(0.96); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 3D着地アニメーション */
.board-stage.mode-3d .anim-drop .ball {
  animation: drop-bounce-3d 0.32s cubic-bezier(0.17, 0.89, 0.32, 1.25) forwards;
}

@keyframes drop-bounce-3d {
  0% { transform: translateZ(calc(var(--cell-size) * 0.44 + 48px)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(1.1); opacity: 0; }
  65% { transform: translateZ(calc(var(--cell-size) * 0.44 - 3px)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(0.96); opacity: 1; }
  100% { transform: translateZ(calc(var(--cell-size) * 0.44)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(1); opacity: 1; }
}

/* 土台4個の強調ハイライト */
.bonus-support-highlight .ball {
  box-shadow: 0 0 18px var(--upper-socket-glow) !important;
  filter: brightness(1.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2Dボーナス玉落下着地アニメーション */
.board-stage.mode-2d .anim-bonus-drop .ball {
  animation: bonus-drop-in-2d 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bonus-drop-in-2d {
  0% { transform: translateY(-44px) scale(0.7); opacity: 0; box-shadow: 0 0 24px var(--upper-socket-glow); }
  65% { transform: translateY(2px) scale(1.08); opacity: 1; box-shadow: 0 0 18px var(--upper-socket-glow); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 3Dボーナス玉落下着地アニメーション */
.board-stage.mode-3d .anim-bonus-drop .ball {
  animation: bonus-drop-in-3d 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bonus-drop-in-3d {
  0% { transform: translateZ(calc(var(--cell-size) * 0.44 + 60px)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(0.7); opacity: 0; box-shadow: 0 0 24px var(--upper-socket-glow); }
  65% { transform: translateZ(calc(var(--cell-size) * 0.44 - 3px)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(1.08); opacity: 1; box-shadow: 0 0 18px var(--upper-socket-glow); }
  100% { transform: translateZ(calc(var(--cell-size) * 0.44)) rotateZ(var(--inv-rot-z)) rotateX(var(--inv-rot-x)) scale(1); opacity: 1; }
}