/* Theme selector styling */
.theme-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
  }
  
  .theme-selector span {
    color: #e0e0e0;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  
  /* Wood theme specific styles (additional texture effects) */
  .board.wood-theme {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 0.25rem solid #8b4513;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  
  /* Tournament theme specific styles */
  .board.tournament-theme {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border: 0.25rem solid #7d4a28;
  }
  
  /* Blue theme specific styles */
  .board.blue-theme {
    box-shadow: 0 10px 20px rgba(30, 60, 90, 0.2);
    border: 0.25rem solid #4a6fa5;
  }
  
  /* Theme previews - small squares showing theme colors */
  .theme-preview {
    display: inline-flex;
    margin-left: 0.5rem;
    border: 1px solid #555;
    border-radius: 2px;
    overflow: hidden;
    height: 14px;
    width: 28px;
  }
  
  .theme-preview-light, .theme-preview-dark {
    width: 14px;
    height: 14px;
  }
  
  /* Animation for theme transition */
  .square {
    transition: background-color 0.3s ease;
  }
  
  /* Custom select styling for theme dropdown */
  #themeSelect {
    background-position: right 0.75rem center;
  }
  
  /* Theme swatch button styling (alternative UI) */
  .theme-swatches {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  
  .theme-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  
  .theme-swatch:hover {
    transform: scale(1.1);
  }
  
  .theme-swatch.active {
    border-color: #fff;
  }
  
  .swatch-half {
    width: 50%;
    height: 100%;
  }