/* Othello Responsive Sizing */
:root {
  /* Mobile default - fits 8 squares + labels in ~355px */
  --othello-square-size: 2.5rem;       /* 40px */
  --othello-label-width: 1.5rem;       /* 24px */
  --othello-label-height: 1.25rem;     /* 20px */
  --othello-label-font: 0.625rem;      /* 10px */
  --othello-legal-dot: 8px;
  --othello-legal-dot-hover: 10px;
}

@media (min-width: 480px) {
  :root {
    --othello-square-size: 3.25rem;    /* 52px */
    --othello-label-width: 2rem;       /* 32px */
    --othello-label-height: 1.5rem;    /* 24px */
    --othello-label-font: 0.75rem;     /* 12px */
    --othello-legal-dot: 10px;
    --othello-legal-dot-hover: 13px;
  }
}

@media (min-width: 640px) {
  :root {
    --othello-square-size: 4rem;       /* 64px */
    --othello-label-width: 2.5rem;     /* 40px */
    --othello-label-height: 2rem;      /* 32px */
    --othello-label-font: 0.875rem;    /* 14px */
    --othello-legal-dot: 12px;
    --othello-legal-dot-hover: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --othello-square-size: 5rem;       /* 80px */
    --othello-label-width: 2.75rem;    /* 44px */
    --othello-label-height: 2.25rem;   /* 36px */
    --othello-label-font: 1rem;        /* 16px */
    --othello-legal-dot: 14px;
    --othello-legal-dot-hover: 18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --othello-square-size: 5.95125rem; /* ~95px - original */
    --othello-label-width: 3.30625rem; /* ~53px - original */
    --othello-label-height: 2.645rem;  /* ~42px - original */
    --othello-label-font: 1.19025rem;  /* ~19px - original */
    --othello-legal-dot: 15.87px;
    --othello-legal-dot-hover: 21.16px;
  }
}

/* Board styling */
.othello-square {
  width: var(--othello-square-size);
  height: var(--othello-square-size);
}

.othello-col-label {
  width: var(--othello-square-size);
  height: var(--othello-label-height);
  font-size: var(--othello-label-font);
}

.othello-row-label {
  width: var(--othello-label-width);
  height: var(--othello-square-size);
  font-size: var(--othello-label-font);
}

.othello-corner-spacer {
  width: var(--othello-label-width);
  height: var(--othello-label-height);
}

/* Board shadow */
.othello-board {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Piece styling */
.othello-piece {
  width: 85%;
  height: 85%;
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease;
}

.othello-piece:hover {
  transform: scale(1.05);
}

/* Black piece with gradient */
.othello-piece--black {
  background: radial-gradient(
    circle at 30% 30%,
    #3f3f3f,
    #1a1a1a 60%,
    #0a0a0a
  );
  border: 2px solid #0a0a0a;
}

/* White piece with gradient */
.othello-piece--white {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #f0f0f0 60%,
    #d0d0d0
  );
  border: 2px solid #b0b0b0;
}

/* Legal move indicator */
.legal-move-dot {
  width: var(--othello-legal-dot);
  height: var(--othello-legal-dot);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.legal-move-indicator:hover .legal-move-dot {
  width: var(--othello-legal-dot-hover);
  height: var(--othello-legal-dot-hover);
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

/* Player piece preview */
.othello-piece-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.othello-piece-preview--black {
  background: radial-gradient(
    circle at 30% 30%,
    #3f3f3f,
    #1a1a1a 60%,
    #0a0a0a
  );
  border: 2px solid #0a0a0a;
}

.othello-piece-preview--white {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #f0f0f0 60%,
    #d0d0d0
  );
  border: 2px solid #b0b0b0;
}