cloud-go / src / lib / components / Board.svelte

<script lang="ts">
  import { untrack } from 'svelte';
  import JGO from 'jgoboard';
  import { isMobileDevice } from '$lib/mobile-detection';
  import { getSoundManager } from '$lib/sound-manager';

  const soundManager = getSoundManager();

  interface TerritoryData {
    territory: Array<Array<'black' | 'white' | 'neutral' | null>>;
    blackTerritory: number;
    whiteTerritory: number;
  }

  interface ReactionOverlayItem {
    x: number;
    y: number;
    emojis: string[];
  }

  interface Props {
    boardSize?: number;
    gameState?: any;
    onMove?: (x: number, y: number, captures: number) => void;
    onPass?: () => void;
    interactive?: boolean;
    currentTurn?: 'black' | 'white';
    territoryData?: TerritoryData | null;
    libertyData?: Array<Array<number>> | null;
    deadStones?: string[];
    markingDeadStones?: boolean;
    onToggleDeadStone?: (x: number, y: number, color: 'black' | 'white') => void;
    reactionOverlay?: ReactionOverlayItem[];
    onReactionClick?: (x: number, y: number) => void;
  }

  let {
    boardSize = 19,
    gameState = null,
    onMove = () => {},
    onPass = () => {},
    interactive = true,
    currentTurn = 'black',
    territoryData = null,
    libertyData = null,
    deadStones = [],
    markingDeadStones = false,
    onToggleDeadStone = () => {},
    reactionOverlay = [],
    onReactionClick = () => {}
  }: Props = $props();

  let boardElement: HTMLDivElement;
  let board: any = $state(null);
  let canvas: any = $state(null);
  let isReady = $state(false);
  let lastHover = $state(false);
  let lastX = $state(-1);
  let lastY = $state(-1);
  let ko: any = $state(false);
  let lastMarkedCoord: any = $state(null);
  let pendingMove = $state<{ x: number, y: number, captures: number } | null>(null);
  let showMobileConfirmation = $state(false);
  let isMobile = $state(false);

  // Responsive grid size - calculate based on viewport and board size
  const calculateGridSize = () => {
    if (typeof window === 'undefined') return 30;

    const viewportWidth = window.innerWidth;
    const maxBoardWidth = viewportWidth < 768 ? viewportWidth - 40 : Math.min(800, viewportWidth - 100);

    // Calculate grid size that fits the board within viewport
    // Account for padding/margins (approximately 2x gridSize on each side)
    const gridSize = Math.floor((maxBoardWidth / boardSize) * 0.85);

    // Clamp between reasonable values
    return Math.max(20, Math.min(40, gridSize));
  };

  const gridSize = calculateGridSize();

  // Use the turn from the parent component's prop
  // The parent correctly calculates this based on moves + passes
  const activeTurn = () => currentTurn;

  // Load and scale texture images for realistic board and stones
  function loadTextureImages(): Promise<{ black: HTMLCanvasElement, white: HTMLCanvasElement, shadow: HTMLCanvasElement, board: HTMLImageElement }> {
    return new Promise((resolve, reject) => {
      const sourceImages = {
        black: new Image(),
        white: new Image(),
        shadow: new Image(),
        board: new Image()
      };

      let loadedCount = 0;
      const totalImages = 4;

      const checkComplete = () => {
        loadedCount++;
        if (loadedCount === totalImages) {
          // Scale stone images to match stone radius
          // Original images are 48x48, scale proportionally to our stone radius
          const stoneSize = Math.round(gridSize * 0.95);

          const scaleImage = (img: HTMLImageElement): HTMLCanvasElement => {
            const canvas = document.createElement('canvas');
            canvas.width = stoneSize;
            canvas.height = stoneSize;
            const ctx = canvas.getContext('2d')!;
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            ctx.drawImage(img, 0, 0, stoneSize, stoneSize);
            return canvas;
          };

          console.log('Scaling stone textures to:', stoneSize);

          resolve({
            black: scaleImage(sourceImages.black),
            white: scaleImage(sourceImages.white),
            shadow: scaleImage(sourceImages.shadow),
            board: sourceImages.board
          });
        }
      };

      const handleError = (e: Event) => {
        console.error('Failed to load texture:', e);
        reject(e);
      };

      sourceImages.black.onload = checkComplete;
      sourceImages.black.onerror = handleError;
      sourceImages.black.src = '/textures/black.png';

      sourceImages.white.onload = checkComplete;
      sourceImages.white.onerror = handleError;
      sourceImages.white.src = '/textures/white.png';

      sourceImages.shadow.onload = checkComplete;
      sourceImages.shadow.onerror = handleError;
      sourceImages.shadow.src = '/textures/shadow.png';

      sourceImages.board.onload = checkComplete;
      sourceImages.board.onerror = handleError;
      sourceImages.board.src = '/textures/walnut.jpg';
    });
  }

  // Initialize board once
  // Initialize mobile detection
  $effect(() => {
    if (typeof window !== 'undefined') {
      isMobile = isMobileDevice();
    }
  });

  $effect(() => {
    if (!boardElement) return;

    untrack(() => {
      (async () => {
        try {
          // Create jGoBoard board
          board = new JGO.Board(boardSize);

          // largeWalnut board configuration, scaled responsively
          const boardOptions = {
            padding: { normal: gridSize * 0.8, clipped: gridSize * 0.4 },
            margin: { normal: gridSize * 0.8, clipped: gridSize * 0.2, color: '#f8dcc5' },
            grid: {
              x: gridSize,
              y: gridSize,
              color: '#101010',
              lineWidth: Math.max(1, gridSize / 33),
              borderWidth: Math.max(1.2, gridSize / 28),
              smooth: 0.5
            },
            stone: {
              radius: gridSize * 0.38,
              dimAlpha: 0.35
            },
            shadow: {
              xOff: gridSize * 0.04,
              yOff: gridSize * 0.04,
              blur: gridSize * 0.06
            },
            boardShadow: {
              color: '#f2c5a0',
              blur: gridSize * 0.6,
              offX: Math.max(3, gridSize * 0.1),
              offY: Math.max(3, gridSize * 0.1)
            },
            border: { color: 'rgba(0,0,0,0.3)', lineWidth: 1 },
            coordinates: {
              font: `bold ${Math.max(10, gridSize * 0.28)}px sans-serif`,
              color: '#000000'
            },
            stars: {
              radius: Math.max(2, gridSize * 0.06)
            },
            mark: {
              lineWidth: 2,
              blackColor: '#ffffff',
              whiteColor: '#000000',
              clearColor: '#000000',
              font: 'bold 14px sans-serif'
            },
            textures: {
              black: '/textures/black.png',
              white: '/textures/white.png',
              shadow: '/textures/shadow.png',
              board: '/textures/walnut.jpg'
            }
          };

          const setup = new JGO.Setup(board, boardOptions);

          // Load texture images for realistic board and stones
          const images = await loadTextureImages();

          // Create the canvas using setup's processed options with textures
          canvas = new JGO.Canvas(boardElement, setup.options, images);
          canvas.draw(board, 0, 0, board.width - 1, board.height - 1);
          setup.getNotifier().addCanvas(canvas);

        // If there's existing game state, restore it
        if (gameState && gameState.moves) {
          gameState.moves.forEach((move: any, index: number) => {
            try {
              const coord = new JGO.Coordinate(move.x, move.y);
              const type = move.color === 'black' ? JGO.BLACK : JGO.WHITE;

              // Play the move through the game engine to handle captures
              const play = board.playMove(coord, type, ko);
              if (play.success) {
                board.setType(coord, type);

                // Remove captured stones
                if (play.captures.length > 0) {
                  for (const capture of play.captures) {
                    board.setType(capture, JGO.CLEAR);
                  }
                }

                // Update ko point
                ko = play.ko;
              }

              // Mark the last move with a circle
              if (index === gameState.moves.length - 1) {
                board.setMark(coord, JGO.MARK.CIRCLE);
                lastMarkedCoord = coord;
              }
            } catch (err) {
              console.error('Error restoring move:', err);
            }
          });
        }

        // Always set up click and hover handlers - the handlers themselves
        // check the interactive prop at runtime, so they'll properly respond
        // when interactivity changes (e.g. after opponent moves via Jetstream)
        canvas.addListener('click', handleCanvasClick);
        canvas.addListener('mousemove', handleMouseMove);
        canvas.addListener('mouseout', handleMouseLeave);

          isReady = true;
        } catch (err) {
          console.error('Failed to initialize board:', err);
        }
      })();
    });

    return () => {
      isReady = false;
    };
  });

  // React to gameState changes without recreating the entire board
  $effect(() => {
    // Only react to gameState.moves changes
    const moves = gameState?.moves;

    untrack(() => {
      if (!board || !canvas || !isReady) return;

      // Clear all marks first
      if (lastMarkedCoord) {
        board.setMark(lastMarkedCoord, JGO.MARK.NONE);
        lastMarkedCoord = null;
      }

      // Clear the board
      for (let y = 0; y < board.height; y++) {
        for (let x = 0; x < board.width; x++) {
          const coord = new JGO.Coordinate(x, y);
          board.setType(coord, JGO.CLEAR);
          board.setMark(coord, JGO.MARK.NONE);
        }
      }

      // Reset ko
      ko = false;

      // Replay all moves from gameState
      if (moves && moves.length > 0) {
        moves.forEach((move: any, index: number) => {
          try {
            const coord = new JGO.Coordinate(move.x, move.y);
            const type = move.color === 'black' ? JGO.BLACK : JGO.WHITE;

            // Play the move through the game engine to handle captures
            const play = board.playMove(coord, type, ko);
            if (play.success) {
              board.setType(coord, type);

              // Remove captured stones
              if (play.captures.length > 0) {
                for (const capture of play.captures) {
                  board.setType(capture, JGO.CLEAR);
                }
              }

              // Update ko point
              ko = play.ko;
            }

            // Mark the last move with a circle
            if (index === moves.length - 1) {
              board.setMark(coord, JGO.MARK.CIRCLE);
              lastMarkedCoord = coord;
            }
          } catch (err) {
            console.error('Error restoring move:', err);
          }
        });
      }
    });
  });

  function handleCanvasClick(coord: any) {
    if (!board || !isReady) return;

    // coord.i and coord.j are -1 if outside board
    if (coord.i < 0 || coord.j < 0) return;

    // If in dead stone marking mode, toggle the stone
    if (markingDeadStones) {
      const type = board.getType(coord);
      // Only allow marking actual stones (not empty intersections)
      if (type === JGO.BLACK || type === JGO.WHITE) {
        const color = type === JGO.BLACK ? 'black' : 'white';
        onToggleDeadStone(coord.i, coord.j, color);
      }
      return;
    }

    // Always check the latest interactive prop value
    if (!interactive) {
      console.log('Click ignored - board not interactive. Interactive:', interactive, 'isReady:', isReady);
      return;
    }

    // Clear hover preview before attempting move
    if (lastHover) {
      board.setType(new JGO.Coordinate(lastX, lastY), JGO.CLEAR);
      lastHover = false;
    }

    // Determine current player stone type
    const player = activeTurn() === 'black' ? JGO.BLACK : JGO.WHITE;

    // Validate and play the move
    const play = board.playMove(coord, player, ko);

    if (play.success) {
      // On mobile, show confirmation instead of immediate submission
      if (isMobile) {
        pendingMove = {
          x: coord.i,
          y: coord.j,
          captures: play.captures.length
        };
        showMobileConfirmation = true;
      } else {
        // Desktop: immediate submission
        // Place the stone
        board.setType(coord, player);
        soundManager.play('played_stone');

        // Remove captured stones
        if (play.captures.length > 0) {
          for (const capture of play.captures) {
            board.setType(capture, JGO.CLEAR);
          }
          soundManager.play('capture');
        }

        // Update ko point
        ko = play.ko;

        // Call the onMove callback with capture count
        onMove(coord.i, coord.j, play.captures.length);
      }
    } else {
      // Invalid move - show error or just ignore
      console.log('Invalid move:', play.errorMsg);
    }
  }

  function confirmMove() {
    if (!pendingMove || !board) return;

    const coord = new JGO.Coordinate(pendingMove.x, pendingMove.y);
    const player = activeTurn() === 'black' ? JGO.BLACK : JGO.WHITE;
    const play = board.playMove(coord, player, ko);

    if (play.success) {
      board.setType(coord, player);
      soundManager.play('played_stone');

      if (play.captures.length > 0) {
        for (const capture of play.captures) {
          board.setType(capture, JGO.CLEAR);
        }
        soundManager.play('capture');
      }
      ko = play.ko;
      onMove(pendingMove.x, pendingMove.y, pendingMove.captures);
    }

    pendingMove = null;
    showMobileConfirmation = false;
  }

  function cancelMove() {
    pendingMove = null;
    showMobileConfirmation = false;
  }

  function handleMouseMove(coord: any) {
    if (!interactive || !isReady || !canvas || !board) return;

    // Check if we've moved to a different intersection
    if (coord.i < 0 || coord.j < 0 || (coord.i === lastX && coord.j === lastY)) {
      return;
    }

    // Clear previous hover stone
    if (lastHover) {
      board.setType(new JGO.Coordinate(lastX, lastY), JGO.CLEAR);
    }

    lastX = coord.i;
    lastY = coord.j;

    // Show hover preview if intersection is empty
    const intersectionType = board.getType(coord);
    if (intersectionType === JGO.CLEAR) {
      const turn = activeTurn();
      const dimType = turn === 'white' ? JGO.DIM_WHITE : JGO.DIM_BLACK;
      board.setType(coord, dimType);
      lastHover = true;
    } else {
      lastHover = false;
    }
  }

  function handleMouseLeave() {
    if (!board) return;

    // Clear hover preview when mouse leaves board
    if (lastHover) {
      board.setType(new JGO.Coordinate(lastX, lastY), JGO.CLEAR);
      lastHover = false;
    }
  }

  function handlePassClick() {
    if (!interactive) return;
    onPass();
  }

  export function addStone(x: number, y: number, color: 'black' | 'white') {
    if (!board) return;
    const coord = new JGO.Coordinate(x, y);
    const type = color === 'black' ? JGO.BLACK : JGO.WHITE;
    board.setType(coord, type);
  }

  export function replayToMove(moveIndex: number) {
    if (!board || !canvas || !gameState || !gameState.moves) return;

    // Clear the board
    for (let i = 0; i < board.width; i++) {
      for (let j = 0; j < board.height; j++) {
        board.setType(new JGO.Coordinate(i, j), JGO.CLEAR);
        board.setMark(new JGO.Coordinate(i, j), JGO.MARK.NONE);
      }
    }

    // Reset ko
    ko = false;
    lastMarkedCoord = null;

    // Replay moves up to moveIndex
    const movesToReplay = gameState.moves.slice(0, moveIndex + 1);
    movesToReplay.forEach((move: any, index: number) => {
      const coord = new JGO.Coordinate(move.x, move.y);
      const type = move.color === 'black' ? JGO.BLACK : JGO.WHITE;

      const play = board.playMove(coord, type, ko);
      if (play && play.success) {
        board.setType(coord, type);

        if (play.captures && play.captures.length > 0) {
          for (const capture of play.captures) {
            board.setType(capture, JGO.CLEAR);
          }
        }

        ko = play.ko;

        // Mark the last move
        if (index === movesToReplay.length - 1) {
          board.setMark(coord, JGO.MARK.CIRCLE);
          lastMarkedCoord = coord;
        }
      }
    });

    // Redraw
    canvas.draw(board, 0, 0, board.width - 1, board.height - 1);
  }

  export function playMove(x: number, y: number, color: 'black' | 'white') {
    if (!board || !canvas) return;

    const coord = new JGO.Coordinate(x, y);
    const type = color === 'black' ? JGO.BLACK : JGO.WHITE;

    // Check if stone already exists at this position (from Jetstream duplicate/delayed events)
    const existingType = board.getType(coord);
    if (existingType === type) {
      // Duplicate move (likely from Jetstream latency), just update marker
      if (lastMarkedCoord) {
        board.setMark(lastMarkedCoord, JGO.MARK.NONE);
      }
      board.setMark(coord, JGO.MARK.CIRCLE);
      lastMarkedCoord = coord;
      canvas.draw(board, 0, 0, board.width - 1, board.height - 1);
      return;
    }

    // Play the move through the game engine to handle captures
    const play = board.playMove(coord, type, ko);

    // Check if play result is valid
    if (!play || !play.hasOwnProperty('success')) {
      console.error('Invalid play result:', play);
      return;
    }

    if (play.success) {
      // Clear the previous move marker if it exists
      if (lastMarkedCoord) {
        board.setMark(lastMarkedCoord, JGO.MARK.NONE);
      }

      // Place the stone
      board.setType(coord, type);

      // Remove captured stones (opponent captured YOUR stones)
      if (play.captures && play.captures.length > 0) {
        for (const capture of play.captures) {
          board.setType(capture, JGO.CLEAR);
        }
        soundManager.play('captured');
      }

      // Update ko point
      ko = play.ko;

      // Mark this move with a circle
      board.setMark(coord, JGO.MARK.CIRCLE);
      lastMarkedCoord = coord;

      // Force canvas redraw to show the new move
      canvas.draw(board, 0, 0, board.width - 1, board.height - 1);
    } else {
      console.warn('Move not applied (already exists or invalid):', play.errorMsg);
    }
  }
</script>

<div class="board-container">
  {#if !isReady}
    <div class="loading">...</div>
  {/if}

  <div class="board-wrapper" class:hidden={!isReady}>
    <div class="board-with-overlay">
      <div bind:this={boardElement} class="jgoboard"></div>
      {#if territoryData && territoryData.territory}
        {@const padding = gridSize * 0.8}
        {@const margin = gridSize * 0.8}
        {@const markerSize = gridSize * 0.5}
        {@const boardOffset = padding + margin + markerSize}
        <div class="territory-overlay">
          {#each territoryData.territory as row, y}
            {#each row as cell, x}
              {#if cell === 'black' || cell === 'white'}
                <div
                  class="territory-marker {cell}"
                  style="
                    left: {boardOffset + x * gridSize}px;
                    top: {boardOffset + y * gridSize}px;
                    width: {gridSize * 0.5}px;
                    height: {gridSize * 0.5}px;
                    transform: translate(-50%, -50%);
                  "
                ></div>
              {/if}
            {/each}
          {/each}
        </div>
      {/if}
      {#if libertyData && board}
        {@const padding = gridSize * 0.8}
        {@const margin = gridSize * 0.8}
        {@const stoneRadius = gridSize * 0.38}
        {@const boardOffset = padding + margin + stoneRadius - 1}
        <div class="liberty-overlay">
          {#each libertyData as row, y}
            {#each row as libertyCount, x}
              {#if libertyCount > 0}
                {@const coord = new JGO.Coordinate(x, y)}
                {@const stoneType = board.getType(coord)}
                {#if stoneType === JGO.BLACK || stoneType === JGO.WHITE}
                  {@const baseFontSize = Math.max(10, gridSize * 0.35)}
                  {@const sizeMultiplier = libertyCount === 1 ? 2.0 : libertyCount === 2 ? 1.5 : libertyCount === 3 ? 1.2 : 1.0}
                  {@const fontSize = baseFontSize * sizeMultiplier}
                  {@const isOnBlack = stoneType === JGO.BLACK}
                  {@const color = libertyCount === 1 ? '#ff0000' : libertyCount === 2 ? '#ff6600' : libertyCount === 3 ? '#ff9900' : (isOnBlack ? 'white' : 'black')}
                  {@const shadow = libertyCount === 1
                    ? '0 0 4px rgba(255, 0, 0, 1), 0 0 8px rgba(255, 0, 0, 0.8), 0 0 12px rgba(255, 0, 0, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.9)'
                    : libertyCount <= 3
                      ? '0 0 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.9)'
                      : isOnBlack
                        ? '0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7), 1px 1px 3px rgba(0, 0, 0, 0.8)'
                        : '0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7), 1px 1px 3px rgba(255, 255, 255, 0.8)'}
                  <div
                    class="liberty-number"
                    class:atari={libertyCount === 1}
                    style="
                      left: {boardOffset + x * gridSize + 5}px;
                      top: {boardOffset + y * gridSize+ 5}px;
                      font-size: {fontSize}px;
                      color: {color};
                      text-shadow: {shadow};
                    "
                  >
                    {libertyCount === 1 ? '1!' : libertyCount}
                  </div>
                {/if}
              {/if}
            {/each}
          {/each}
        </div>
      {/if}
      {#if deadStones.length > 0 && board}
        {@const padding = gridSize * 0.8}
        {@const margin = gridSize * 0.8}
        {@const stoneRadius = gridSize * 0.38}
        {@const boardOffset = padding + margin + stoneRadius - 1}
        <div class="dead-stone-overlay">
          {#each deadStones as notation}
            {@const col = notation.charCodeAt(1) - 65}
            {@const row = parseInt(notation.slice(2)) - 1}
            {#if row >= 0 && row < boardSize && col >= 0 && col < boardSize}
              {@const coord = new JGO.Coordinate(col, row)}
              {@const stoneType = board.getType(coord)}
              {#if stoneType === JGO.BLACK || stoneType === JGO.WHITE}
                {@const xSize = gridSize * 0.6}
                <div
                  class="dead-stone-mark"
                  style="
                    left: {boardOffset + col * gridSize}px;
                    top: {boardOffset + row * gridSize}px;
                    width: {xSize}px;
                    height: {xSize}px;
                    font-size: {xSize * 0.8}px;
                  "
                >
                  ✕
                </div>
              {/if}
            {/if}
          {/each}
        </div>
      {/if}
      {#if reactionOverlay && reactionOverlay.length > 0}
        {@const padding = gridSize * 0.8}
        {@const margin = gridSize * 0.8}
        {@const stoneRadius = gridSize * 0.38}
        {@const boardOffset = padding + margin + stoneRadius - 1}
        <div class="reaction-overlay">
          {#each reactionOverlay as item}
            {@const emojiSize = 28}
            <button
              class="reaction-emoji-badge"
              style="
                left: {boardOffset + item.x * gridSize}px;
                top: {boardOffset + item.y * gridSize}px;
                font-size: {emojiSize}px;
              "
              title={item.emojis.join(' ')}
              onclick={() => onReactionClick(item.x, item.y)}
            >
              {#if item.emojis.length === 1}
                {item.emojis[0]}
              {:else if item.emojis.length === 2}
                <span class="emoji-stack">
                  {#each item.emojis as emoji}
                    <span>{emoji}</span>
                  {/each}
                </span>
              {:else}
                {item.emojis[0]}<span class="emoji-count">+{item.emojis.length - 1}</span>
              {/if}
            </button>
          {/each}
        </div>
      {/if}
    </div>
  </div>

  {#if interactive && isReady}
    <div class="controls">
      <button onclick={handlePassClick} class="pass-button">
        Pass
      </button>
      <div class="turn-indicator">
        Current turn: <span class="turn-{activeTurn()}">{activeTurn()}</span>
      </div>
    </div>
  {/if}

  {#if showMobileConfirmation && pendingMove}
    <div class="mobile-confirmation-overlay">
      <div class="mobile-confirmation-dialog">
        <p class="confirmation-message">
          Place {activeTurn()} stone at ({pendingMove.x}, {pendingMove.y})?
          {#if pendingMove.captures > 0}
            <span class="capture-info">
              Will capture {pendingMove.captures} stone{pendingMove.captures > 1 ? 's' : ''}
            </span>
          {/if}
        </p>
        <div class="confirmation-buttons">
          <button class="confirm-button" onclick={confirmMove}>Confirm Move</button>
          <button class="cancel-button" onclick={cancelMove}>Cancel</button>
        </div>
      </div>
    </div>
  {/if}
</div>

<style>
  .board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .board-wrapper {
    position: relative;
    line-height: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .board-with-overlay {
    position: relative;
    display: inline-block;
  }

  .jgoboard {
    box-shadow: 0 8px 24px rgba(90, 122, 144, 0.15);
    display: block;
    border-radius: 4px;
  }

  @media (max-width: 768px) {
    .board-container {
      padding: 0.5rem;
    }
  }

  .controls {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--sky-white, #f5f8fa);
    border-radius: 0.75rem;
    border: 1px solid var(--sky-blue-pale, #d4e5ef);
    box-shadow: 0 2px 8px rgba(90, 122, 144, 0.08);
  }

  .pass-button {
    padding: 0.625rem 2rem;
    font-size: 1rem;
    background: var(--sky-slate, #5a7a90);
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
  }

  .pass-button:hover {
    background: var(--sky-slate-dark, #455d6e);
    transform: translateY(-1px);
  }

  .turn-indicator {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sky-slate, #5a7a90);
  }

  .turn-black {
    color: #1a1a1a;
    font-weight: 700;
  }

  .turn-white {
    color: var(--sky-gray, #94a8b8);
    font-weight: 700;
  }

  .loading {
    padding: 2rem;
    text-align: center;
    color: var(--sky-gray, #94a8b8);
  }

  .hidden {
    visibility: hidden;
    height: 0;
  }

  .territory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .territory-marker {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .territory-marker.black {
    background: rgba(20, 20, 20, 0.7);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }

  .territory-marker.white {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  }

  .liberty-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .liberty-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-weight: 700;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .liberty-number.atari {
    font-weight: 900;
    animation: pulse-atari 1s ease-in-out infinite;
  }

  @keyframes pulse-atari {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.1);
    }
  }

  .dead-stone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .dead-stone-mark {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #ff0000;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow:
      0 0 4px rgba(255, 255, 255, 1),
      0 0 8px rgba(255, 255, 255, 0.8),
      2px 2px 4px rgba(0, 0, 0, 0.9);
    opacity: 0.95;
  }

  .reaction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .reaction-emoji-badge {
    position: absolute;
    transform: translate(-28%, -33%);
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    z-index: 10;
    background: none;
    border: none;
    padding: 0;
    transition: transform 0.3s ease;
  }

  .reaction-emoji-badge:hover {
    transform: translate(-28%, -33%) scale(0.8);
  }

  .emoji-stack {
    display: flex;
    gap: 0;
  }

  .emoji-stack span:not(:first-child) {
    margin-left: -0.3em;
  }

  .emoji-count {
    font-size: 0.6em;
    font-weight: 700;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    padding: 0 0.3em;
    margin-left: 0.1em;
    vertical-align: super;
  }

  .mobile-confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
  }

  .mobile-confirmation-dialog {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }

  .confirmation-message {
    font-size: 1rem;
    color: var(--sky-slate-dark);
    margin: 0 0 1rem 0;
    text-align: center;
  }

  .capture-info {
    display: block;
    color: var(--sky-apricot-dark);
    font-weight: 600;
    margin-top: 0.5rem;
  }

  .confirmation-buttons {
    display: flex;
    gap: 0.75rem;
  }

  .confirm-button {
    flex: 1;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
  }

  .cancel-button {
    flex: 1;
    padding: 0.875rem 1.5rem;
    background: var(--sky-cloud);
    color: var(--sky-slate);
    border: 1px solid var(--sky-blue-pale);
    border-radius: 0.5rem;
    cursor: pointer;
  }
</style>