:root {
  --box-white: #ffffff;
  --box-gray: #eaeaea;
  /* Player colors are dynamically set by JavaScript - these are just fallbacks */
  --player1-color: darkgreen;
  --player2-color: orange;
  --player3-color: #e74c3c;
  --player4-color: #9b59b6;
  --player5-color: #f1c40f;
  --player6-color: #e67e22;
  --player7-color: #27ae60;
  --player8-color: #8e44ad;
  --player9-color: #17a2b8;
  --player10-color: #e91e63;
}

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 40px;
}

/* Testing mode and save log button styles */
.testing-mode-container {
  margin: 20px auto;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.testing-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  cursor: pointer;
}

.save-log-button {
  padding: 8px 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.save-log-button:hover {
  background-color: #1976d2;
  transform: translateY(-1px);
}

.save-log-button:active {
  transform: translateY(0);
}

#sudoku-grid,
.sudoku-board {
  display: grid;
  margin: 20px auto;
  border: 2px solid black;
  max-width: 100%; /* Ensure board stays within container */
  max-height: 100%; /* Ensure board stays within container height */
  width: fit-content; /* Size to content but respect max-width */
  height: fit-content; /* Size to content but respect max-height */
  box-sizing: border-box;
  justify-self: center; /* Center within flex container */
  overflow: hidden; /* Prevent overflow */
}

/* Responsive Dynamic Board Sizes - Scale with window size */
:root {
  /* Base cell sizes - allow much more shrinking for narrow windows */
  --cell-base-4: max(20px, 8vw); /* 4x4: reduced min from 45px to 20px */
  --cell-base-9: max(18px, 6vw);   /* 9x9: reduced min from 35px to 18px */
  --cell-base-16: max(15px, 4vw);  /* 16x16: reduced min from 25px to 15px */
  --cell-base-25: max(12px, 2.5vw); /* 25x25: reduced min from 20px to 12px */
  
  /* Responsive font sizes - allow more shrinking */
  --font-base-4: max(12px, 4vw);       /* 4x4: reduced min from 24px to 12px */
  --font-base-9: max(10px, 3vw);       /* 9x9: reduced min from 20px to 10px */
  --font-base-16: max(8px, 2vw);  /* 16x16: reduced min from 18px to 8px */
  --font-base-25: max(6px, 1.5vw);  /* 25x25: reduced min from 12px to 6px */
  
  /* Pencil mark sizes - allow more shrinking */
  --pencil-base-4: max(6px, 2vw);  /* 4x4: reduced min from 10px to 6px */
  --pencil-base-9: max(5px, 1.5vw);   /* 9x9: reduced min from 9px to 5px */
  --pencil-base-16: max(4px, 1vw);  /* 16x16: reduced min from 7px to 4px */
  --pencil-base-25: max(3px, 0.8vw);  /* 25x25: reduced min from 5px to 3px */
  
  /* Container heights that scale with board size - matches the total board size plus padding */
  --container-height-4: max(120px, calc(4 * 8vw + 60px)); /* 4x4 board + padding */
  --container-height-9: max(280px, calc(9 * 6vw + 80px));   /* 9x9 board + padding */
  --container-height-16: max(400px, calc(16 * 4vw + 100px));  /* 16x16 board + padding */
  --container-height-25: max(500px, calc(25 * 2.5vw + 120px)); /* 25x25 board + padding */
}

.sudoku-board.size-4 {
  grid-template-columns: repeat(4, var(--cell-base-4));
  grid-template-rows: repeat(4, var(--cell-base-4));
}

.sudoku-board.size-9 {
  grid-template-columns: repeat(9, var(--cell-base-9));
  grid-template-rows: repeat(9, var(--cell-base-9));
}

.sudoku-board.size-16 {
  grid-template-columns: repeat(16, var(--cell-base-16));
  grid-template-rows: repeat(16, var(--cell-base-16));
}

.sudoku-board.size-25 {
  grid-template-columns: repeat(25, var(--cell-base-25));
  grid-template-rows: repeat(25, var(--cell-base-25));
}

/* Size-specific container heights that scale with board size */
/* Fallback classes that can be applied by JavaScript to parent containers */
.board-area-container.puzzle-size-4,
.board-with-difficulty-container.puzzle-size-4 {
  min-height: var(--container-height-4) !important;
}

.board-area-container.puzzle-size-9,
.board-with-difficulty-container.puzzle-size-9 {
  min-height: var(--container-height-9) !important;
}

.board-area-container.puzzle-size-16,
.board-with-difficulty-container.puzzle-size-16 {
  min-height: var(--container-height-16) !important;
}

.board-area-container.puzzle-size-25,
.board-with-difficulty-container.puzzle-size-25 {
  min-height: var(--container-height-25) !important;
}

/* Modern browsers with :has() support */
.board-area-container:has(.sudoku-board.size-4),
.board-with-difficulty-container:has(.sudoku-board.size-4) {
  min-height: var(--container-height-4) !important;
}

.board-area-container:has(.sudoku-board.size-9),
.board-with-difficulty-container:has(.sudoku-board.size-9) {
  min-height: var(--container-height-9) !important;
}

.board-area-container:has(.sudoku-board.size-16),
.board-with-difficulty-container:has(.sudoku-board.size-16) {
  min-height: var(--container-height-16) !important;
}

.board-area-container:has(.sudoku-board.size-25),
.board-with-difficulty-container:has(.sudoku-board.size-25) {
  min-height: var(--container-height-25) !important;
}

/* Size-specific font styling for cells */
.sudoku-board.size-4 .cell,
.sudoku-board.size-4 .cell .value {
  font-size: var(--font-base-4);
  line-height: 1.2;
}

.sudoku-board.size-9 .cell,
.sudoku-board.size-9 .cell .value {
  font-size: var(--font-base-9);
  line-height: 1.2;
}

.sudoku-board.size-16 .cell,
.sudoku-board.size-16 .cell .value {
  font-size: var(--font-base-16);
  line-height: 1.2;
}

.sudoku-board.size-25 .cell,
.sudoku-board.size-25 .cell .value {
  font-size: var(--font-base-25);
  line-height: 1.2;
}

/* Size-specific pencil mark styling */
.sudoku-board.size-4 .pencil-mark-position {
  font-size: var(--pencil-base-4);
}

.sudoku-board.size-9 .pencil-mark-position {
  font-size: var(--pencil-base-9);
}

.sudoku-board.size-16 .pencil-mark-position {
  font-size: var(--pencil-base-16);
}

.sudoku-board.size-25 .pencil-mark-position {
  font-size: var(--pencil-base-25);
}

/* Default fallback for #sudoku-grid (single board view) */
#sudoku-grid {
  grid-template-columns: repeat(9, 40px);
  grid-template-rows: repeat(9, 40px);
}

.cell {
  position: relative;
  padding: 2px;
  font-size: var(--font-base-9); /* Default to 9x9 size, overridden by size-specific rules */
  text-align: center;
  vertical-align: middle;
  border: 1px solid #999;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.cell .value {
  font-size: inherit; /* Inherit from parent cell, which uses responsive sizing */
  line-height: 1.2; /* Flexible line height that works with any font size */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cell.selected:not(.prefilled):not(.pencil-mode):not(.not-your-turn)
  .value::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 60%;
  background-color: black;
  animation: blink-caret 1s steps(1) infinite;
  margin-left: 4px;
}

.cell.editing .value::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 60%;
  background-color: black;
  animation: blink-caret 1s steps(1) infinite;
  margin-left: 4px;
}

/* Player-specific cursor styling for all 10 players */
.cell.editing.cursor-player-1 .value::after {
  background-color: var(--player1-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-2 .value::after {
  background-color: var(--player2-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-3 .value::after {
  background-color: var(--player3-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-4 .value::after {
  background-color: var(--player4-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-5 .value::after {
  background-color: var(--player5-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-6 .value::after {
  background-color: var(--player6-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-7 .value::after {
  background-color: var(--player7-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-8 .value::after {
  background-color: var(--player8-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-9 .value::after {
  background-color: var(--player9-color) !important;
  width: 3px !important;
  content: '' !important;
}

.cell.editing.cursor-player-10 .value::after {
  background-color: var(--player10-color) !important;
  width: 3px !important;
  content: '' !important;
}

/* OLD PENCIL SYSTEM - DISABLED FOR NEW PENCILMARKSVIEW
.cell .pencil {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  font-size: 10px;
  display: grid;
  text-align: center;
  pointer-events: auto;
  gap: 1px;
  z-index: 15;
}

.cell .pencil .pencil-digit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  user-select: none;
  min-height: 8px;
}

.cell .pencil .pencil-digit:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.cell .pencil .pencil-digit.inactive {
  color: #ccc;
  background-color: transparent;
}

.cell .pencil .pencil-digit.active {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.cell .pencil .pencil-digit.active.player1 {
  color: var(--player1-color);
}

.cell .pencil .pencil-digit.active.player2 {
  color: var(--player2-color);
}

.cell .pencil .pencil-digit.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cell .pencil .pencil-digit.disabled:hover {
  background-color: transparent;
  transform: none;
}
END OLD PENCIL SYSTEM */

/* NEW PENCILMARKSVIEW SYSTEM */
.cell .pencil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let PencilMarksView handle its own pointer events */
  z-index: 15;
}

/* New PencilMarksView styles */
.pencil-marks {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: grid;
  gap: 0; /* Remove gap to prevent click-through issues */
  pointer-events: none;
}

/* Size-specific pencil mark grid layouts */
.sudoku-board.size-4 .pencil-marks {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.sudoku-board.size-9 .pencil-marks {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.sudoku-board.size-16 .pencil-marks {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.sudoku-board.size-25 .pencil-marks {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.pencil-marks.pencil-marks-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Ensure pencil mode cells never show text cursor */
.cell.pencil-mode {
  cursor: default !important;
}

.cell.pencil-mode .value {
  cursor: default !important;
}

.pencil-mark-position {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pencil-base-9); /* Default to 9x9 pencil size, overridden by size-specific rules */
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  user-select: none;
  opacity: 0.15; /* Very faint for unmarked digits */
  background-color: transparent;
  color: #666; /* Light gray for unmarked */
}

.pencil-mark-position:hover {
  opacity: 0.4;
  background-color: rgba(0, 0, 0, 0.05);
}

.pencil-mark-position.visible {
  opacity: 1; /* Fully visible when marked */
  color: black; /* Bold black instead of player color */
  font-weight: bold; /* Make them bold */
  background-color: transparent; /* Inherit box background color */
}

.pencil-mark-position.hidden {
  opacity: 0.08; /* Even fainter when not marked */
  color: #999; /* Lighter gray */
}

.pencil-mark-position.visible:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1); /* Subtle dark highlight on hover */
  transform: scale(1.2);
}

/* Keep all visible pencil marks black and bold, regardless of player */
.player1-pencil-marks .pencil-mark-position.visible,
.player2-pencil-marks .pencil-mark-position.visible {
  color: black !important; /* All visible marks are black */
  font-weight: bold !important; /* All visible marks are bold */
}

.pencil-mark-position.highlighted {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.3);
}

/* Player-specific pencil mark colors */
/* Keep all visible pencil marks black and bold, regardless of player */
.player1-pencil-marks .pencil-mark-position.visible,
.player2-pencil-marks .pencil-mark-position.visible {
  color: black !important; /* All visible marks are black */
  font-weight: bold !important; /* All visible marks are bold */
}

/* Animation for pencil mark elimination */
.pencil-mark-position.elimination-animation {
  animation: eliminate-mark 0.5s ease-out forwards;
}

@keyframes eliminate-mark {
  0% {
    opacity: 0.6;
    transform: scale(1);
    color: inherit;
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    color: red;
    background-color: rgba(255, 0, 0, 0.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    color: red;
  }
}

/* Animation for pencil mark restoration */
.pencil-mark-position.restoration-animation {
  animation: restore-mark 0.5s ease-in forwards;
}

@keyframes restore-mark {
  0% {
    opacity: 0;
    transform: scale(0.5);
    color: green;
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    color: green;
    background-color: rgba(0, 255, 0, 0.2);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
    color: inherit;
  }
}

.cell.prefilled {
  font-weight: bold;
  color: blue;
  opacity: 1 !important;
}

.cell.prefilled .value {
  opacity: 1 !important;
}

/* Force prefilled cells to always be fully visible, regardless of any parent opacity */
.sudoku-board .cell.prefilled,
.sudoku-board .cell.prefilled .value {
  opacity: 1 !important;
}

.cell.box-white {
  background-color: var(--box-white);
}

.cell.box-gray {
  background-color: var(--box-gray);
}

.cell.thick-right {
  border-right: 2px solid black;
}

.cell.thick-bottom {
  border-bottom: 2px solid black;
}

@keyframes blink-caret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.undo-redo {
  margin-bottom: 10px;
}

.undo-redo button {
  padding: 6px 16px;
  margin: 0 8px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.undo-redo button:hover {
  background: linear-gradient(to bottom, #e0e0e0, #b0b0b0);
}

.undo-redo button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.undo-redo button:disabled {
  background: #eee;
  color: #aaa;
  box-shadow: none;
  cursor: not-allowed;
}

#player-controls {
  margin-bottom: 10px;
}

body[data-player='1'] {
  --bg: #fefeff;
}
body[data-player='2'] {
  --bg: #fffaf6;
}

body {
  background-color: var(--bg);
}

.cell.selected {
  background-color: var(--highlight);
}

.value.player1 {
  color: var(--player1-color);
}
.value.player2 {
  color: var(--player2-color);
}
.value.player3 {
  color: var(--player3-color);
}
.value.player4 {
  color: var(--player4-color);
}
.value.player5 {
  color: var(--player5-color);
}
.value.player6 {
  color: var(--player6-color);
}
.value.player7 {
  color: var(--player7-color);
}
.value.player8 {
  color: var(--player8-color);
}
.value.player9 {
  color: var(--player9-color);
}
.value.player10 {
  color: var(--player10-color);
}

.pencil div.player1 {
  color: var(--player1-color);
}
.pencil div.player2 {
  color: var(--player2-color);
}
.pencil div.player3 {
  color: var(--player3-color);
}
.pencil div.player4 {
  color: var(--player4-color);
}
.pencil div.player5 {
  color: var(--player5-color);
}
.pencil div.player6 {
  color: var(--player6-color);
}
.pencil div.player7 {
  color: var(--player7-color);
}
.pencil div.player8 {
  color: var(--player8-color);
}
.pencil div.player9 {
  color: var(--player9-color);
}
.pencil div.player10 {
  color: var(--player10-color);
}

.pencil div.player1.player2 {
  background: linear-gradient(
    to bottom right,
    var(--player1-color) 50%,
    var(--player2-color) 50%
  );
  color: white;
}

#turn-indicator.player1 {
  color: var(--player1-color);
}
#turn-indicator.player2 {
  color: var(--player2-color);
}

.board-container {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}

.player1 {
  color: var(--player1-color);
}
.player2 {
  color: var(--player2-color);
}
.player3 {
  color: var(--player3-color);
}
.player4 {
  color: var(--player4-color);
}
.player5 {
  color: var(--player5-color);
}
.player6 {
  color: var(--player6-color);
}
.player7 {
  color: var(--player7-color);
}
.player8 {
  color: var(--player8-color);
}
.player9 {
  color: var(--player9-color);
}
.player10 {
  color: var(--player10-color);
}

#game-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.player-view {
  text-align: center;
}

.board-slot {
  margin-top: 10px;
}

/* Turn indicator styling */
.turn-indicator {
  font-size: 18px;
  font-weight: bold;
  padding: 8px 16px;
  margin: 10px 0;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.turn-indicator.active {
  background-color: #4caf50;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.turn-indicator.inactive {
  background-color: #f5f5f5;
  color: #666;
  border: 2px solid #ddd;
}

.player1-indicator.active {
  background-color: var(--player1-color);
}

.player2-indicator.active {
  background-color: var(--player2-color);
}

/* Disabled board styling */
.sudoku-board.disabled {
  opacity: 0.5;
  filter: grayscale(50%);
  transition: all 0.3s ease;
}

.cell.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Pencil marks toggle styling */
.pencil-marks-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  padding: 8px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.pencil-marks-toggle input[type='checkbox'] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
}

.pencil-marks-toggle .toggle-label {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: #333;
}

.pencil-marks-toggle:hover {
  background-color: #f0f0f0;
}

/* Hide pencil marks when toggle is off */
.sudoku-board.hide-pencil-marks .cell .pencil {
  display: none !important;
}

/* Scoreboard table styling */
.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  table-layout: fixed; /* Fixed layout for better responsive behavior */
  max-width: 100%; /* Don't exceed container */
}

.scoreboard-table th {
  background-color: #f8f9fa;
  padding: 6px 8px; /* Reduced padding for tighter fit */
  text-align: left;
  font-weight: bold;
  font-size: 12px; /* Smaller font */
  border-bottom: 2px solid #dee2e6;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scoreboard-table td {
  padding: 4px 8px; /* Reduced padding for tighter fit */
  font-size: 12px; /* Smaller font */
  border-bottom: 1px solid #e9ecef;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scoreboard-table .player-name {
  font-weight: bold;
}

.scoreboard-table .score-value {
  text-align: center;
  min-width: 40px;
}

.scoreboard-table .score-total {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.scoreboard-table .player-row:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Legacy score display styling */
.score-display {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  margin: 10px 0;
  text-align: center;
}

.score-display .score-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-height: 80px;
}

.score-display .player-score {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.2s ease;
}

.score-display .player1-section {
  border-color: var(--player1-color);
  background-color: rgba(0, 100, 0, 0.05);
}

.score-display .player2-section {
  border-color: var(--player2-color);
  background-color: rgba(255, 165, 0, 0.05);
}

.score-display .own-score {
  font-weight: bold;
  border-width: 2px;
  transform: scale(1.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.score-display .opponent-score {
  opacity: 0.8;
}

.score-display .vs-separator {
  font-weight: bold;
  font-size: 14px;
  color: #666;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
}

.score-display .score-title {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  color: #333;
}

.score-display .score-details {
  font-size: 10px;
  color: #666;
}

.score-display .score-details span {
  display: block;
  margin: 1px 0;
}

.score-display .score-details .total {
  font-weight: bold;
  color: #333;
  border-top: 1px solid #ddd;
  padding-top: 2px;
  margin-top: 2px;
}

/* Completion Animation Styles */
.completion-highlight {
  position: relative;
  z-index: 15; /* Above opponent overlays (z-index 11-12) */
}

.completion-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 215, 0, 0.6); /* Gold highlight */
  border: 2px solid gold;
  border-radius: 3px;
  animation: completionGlow 1s ease-in-out;
  pointer-events: none;
  z-index: 10; /* Above the cell content and selection */
}

.row-completion::before {
  background: rgba(76, 175, 80, 0.4); /* Green for rows */
  border-color: #4caf50;
}

.column-completion::before {
  background: rgba(33, 150, 243, 0.4); /* Blue for columns */
  border-color: #2196f3;
}

.box-completion::before {
  background: rgba(156, 39, 176, 0.4); /* Purple for boxes */
  border-color: #9c27b0;
}

.digit-completion::before {
  background: rgba(255, 152, 0, 0.4); /* Orange for digits */
  border-color: #ff9800;
}

/* Player-specific completion colors for all 10 players */
.player1-completion::before {
  background: rgba(0, 100, 0, 0.4);
  border-color: var(--player1-color);
}
.player2-completion::before {
  background: rgba(255, 165, 0, 0.4);
  border-color: var(--player2-color);
}
.player3-completion::before {
  background: rgba(231, 76, 60, 0.4);
  border-color: var(--player3-color);
}
.player4-completion::before {
  background: rgba(155, 89, 182, 0.4);
  border-color: var(--player4-color);
}
.player5-completion::before {
  background: rgba(241, 196, 15, 0.4);
  border-color: var(--player5-color);
}
.player6-completion::before {
  background: rgba(230, 126, 34, 0.4);
  border-color: var(--player6-color);
}
.player7-completion::before {
  background: rgba(39, 174, 96, 0.4);
  border-color: var(--player7-color);
}
.player8-completion::before {
  background: rgba(142, 68, 173, 0.4);
  border-color: var(--player8-color);
}
.player9-completion::before {
  background: rgba(23, 162, 184, 0.4);
  border-color: var(--player9-color);
}
.player10-completion::before {
  background: rgba(233, 30, 99, 0.4);
  border-color: var(--player10-color);
}

.completion-sweep {
  animation: completionSweep 0.3s ease-out;
}

.completion-pulse {
  animation: completionPulse 1s ease-in-out;
}

.completion-hop {
  animation: completionHop 0.3s ease-out;
}

@keyframes completionGlow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

@keyframes completionSweep {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes completionPulse {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.05);
  }
}

@keyframes completionHop {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Scoreboard Animation Styles */
.score-display.completion-celebration {
  animation: scoreboardCelebration 1.5s ease-out;
}

.score-display.primary-celebration {
  animation: primaryCelebration 1.5s ease-out;
}

.score-display.secondary-celebration {
  animation: secondaryCelebration 1.5s ease-out;
}

.score-display .completion-flash {
  animation: scoreFlash 1.2s ease-out;
}

.score-display .completion-flash.primary-flash {
  animation: primaryScoreFlash 1.2s ease-out;
}

@keyframes scoreboardCelebration {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  25% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
  75% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes scoreFlash {
  0% {
    background: transparent;
    color: inherit;
  }
  30% {
    background: rgba(255, 215, 0, 0.3);
    color: #333;
    transform: scale(1.1);
  }
  60% {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
  }
  100% {
    background: transparent;
    color: inherit;
    transform: scale(1);
  }
}

@keyframes primaryCelebration {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  25% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 35px rgba(255, 215, 0, 1);
  }
  75% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes secondaryCelebration {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 165, 0, 0);
  }
  25% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
  }
  75% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 165, 0, 0);
  }
}

@keyframes primaryScoreFlash {
  0% {
    background: transparent;
    color: inherit;
  }
  20% {
    background: rgba(255, 215, 0, 0.5);
    color: #000;
    transform: scale(1.2);
    font-weight: bold;
  }
  40% {
    background: rgba(255, 215, 0, 0.7);
    transform: scale(1.15);
  }
  70% {
    background: rgba(255, 215, 0, 0.3);
    transform: scale(1.05);
  }
  100% {
    background: transparent;
    color: inherit;
    transform: scale(1);
    font-weight: inherit;
  }
}

/* Dual Answer Display Styles with Dynamic Sizing */
.value.dual-answer {
  position: relative;
  font-size: inherit; /* Use responsive sizing from parent cell */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer-top-left {
  position: absolute !important;
  top: 0px !important;
  left: 2px !important;
  font-weight: bold;
  font-size: inherit; /* Inherit responsive font size */
  line-height: 1;
}

.answer-top-right {
  position: absolute !important;
  top: 0px !important;
  right: 2px !important;
  font-weight: bold;
  font-size: inherit; /* Inherit responsive font size */
  line-height: 1;
}

.answer-bottom-left {
  position: absolute !important;
  bottom: 0px !important;
  left: 2px !important;
  font-weight: bold;
  font-size: inherit; /* Inherit responsive font size */
  line-height: 1;
}

.answer-bottom-right {
  position: absolute !important;
  bottom: 0px !important;
  right: 2px !important;
  font-weight: bold;
  font-size: inherit; /* Inherit responsive font size */
  line-height: 1;
}

/* Pencil Mode Toggle Styles */
.pencil-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  padding: 8px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.pencil-mode-toggle input[type='checkbox'] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
}

.pencil-mode-toggle .toggle-label {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: #333;
  display: flex;
  align-items: center;
}

.pencil-mode-toggle:hover {
  background-color: #f0f0f0;
}

.pencil-mode-toggle.disabled {
  background-color: #f5f5f5;
  border-color: #ccc;
  opacity: 0.6;
}

.pencil-mode-toggle.disabled:hover {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.pencil-mode-toggle.disabled input[type='checkbox'] {
  cursor: not-allowed;
}

.pencil-mode-toggle.disabled .toggle-label {
  color: #999;
  cursor: not-allowed;
}

/* Pending answer styles */
.cell.pending-answer {
  border: 2px dashed #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
}

.cell.pending-answer .cell-value {
  color: #4caf50;
  font-style: italic;
}

.cell.pending-answer::after {
  content: 'Press Enter to submit';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  pointer-events: none;
}

/* Remove the old mode-based CSS since we're simplifying */

/* Three-column layout for game with completion tracker */
.three-column-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  max-width: 95vw; /* Use viewport width to accommodate larger puzzles */
  margin: 0 auto;
  padding: 20px;
}

.player-view {
  flex: 1;
  max-width: 45vw; /* Use viewport width for flexibility */
  min-width: 350px;
}

.completion-view {
  flex: 0 0 auto;
  max-width: 35vw; /* Use viewport width for flexibility */
  min-width: 300px;
}

/* Difficulty Star Rating Indicators */
.difficulty-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  font-size: 14px;
}

.difficulty-star {
  color: #ffd700; /* Gold color for filled stars */
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
  transition: all 0.2s ease;
}

.difficulty-star.empty {
  color: #ddd; /* Light gray for empty stars */
  text-shadow: none;
}

.difficulty-label {
  font-size: 12px;
  font-weight: bold;
  margin-left: 6px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Difficulty indicator container */
.puzzle-difficulty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 8px 0;
  font-size: 14px;
}

/* Technique indicators (show on hover or in detailed view) */
.technique-details {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200px;
  font-size: 12px;
}

.puzzle-difficulty:hover .technique-details {
  display: block;
}

.technique-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

.technique-list li {
  padding: 2px 0;
  color: #555;
}

.technique-weight {
  font-weight: bold;
  color: #333;
}

/* Star rating colors by difficulty */
.difficulty-stars.easy .difficulty-star:not(.empty) {
  color: #4CAF50; /* Green for easy */
}

.difficulty-stars.medium .difficulty-star:not(.empty) {
  color: #FF9800; /* Orange for medium */
}

.difficulty-stars.hard .difficulty-star:not(.empty) {
  color: #F44336; /* Red for hard */
}

.difficulty-stars.very-hard .difficulty-star:not(.empty) {
  color: #9C27B0; /* Purple for very hard */
}

.difficulty-stars.expert .difficulty-star:not(.empty) {
  color: #FF1744; /* Deep red for expert */
}

/* Compact star display for smaller spaces */
.difficulty-stars.compact {
  font-size: 12px;
  gap: 1px;
}

.difficulty-stars.compact .difficulty-label {
  font-size: 10px;
  margin-left: 4px;
}

/* Responsive layout for smaller screens */
@media (max-width: 1200px) {
  .three-column-layout {
    flex-direction: column;
    align-items: center;
  }

  .completion-view {
    order: -1; /* Show completion tracker at the top on mobile */
    width: 100%;
    max-width: 90%;
  }

  .player-view {
    width: 100%;
    max-width: 90%;
  }
}

/* Completion Tracker Styles */
.completion-tracker {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 16px;
  margin: 20px auto;
  max-width: 600px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.completion-tracker-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.completion-section {
  margin-bottom: 20px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.completion-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #495057;
  font-size: 14px;
}

/* Box Completion Grid (3x3) */
.box-completion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  max-width: 120px;
  margin: 0 auto;
}

.completion-box {
  width: 36px;
  height: 36px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Row Completion Stack (vertical) */
.row-completion-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 200px;
  margin: 0 auto;
}

.completion-row {
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 8px;
  position: relative;
}

/* Column Completion Row (horizontal) */
.column-completion-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 400px;
  margin: 0 auto;
}

.completion-column {
  width: 20px;
  height: 40px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Symbol Completion Grid */
.symbol-completion-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  max-width: 360px;
  margin: 0 auto;
}

.completion-symbol {
  width: 36px;
  height: 36px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* Completion Numbers */
.completion-number {
  font-size: 12px;
  font-weight: bold;
  color: #666;
}

/* Uncompleted State */
.completion-box.uncompleted,
.completion-row.uncompleted,
.completion-column.uncompleted,
.completion-symbol.uncompleted {
  background-color: #f8f9fa;
  border-color: #ccc;
}

/* Completed States - now uses only borders, no background fills */
.completion-box:not(.uncompleted),
.completion-row:not(.uncompleted),
.completion-column:not(.uncompleted),
.completion-symbol:not(.uncompleted) {
  background-color: #f8f9fa; /* Keep light background for contrast */
  /* Border colors and box-shadow are set by JavaScript for layered borders */
}

/* System/prefilled completions override with gray fill */
.completion-box.completed-system,
.completion-row.completed-system,
.completion-column.completed-system,
.completion-symbol.completed-system {
  background-color: #666666 !important; /* Dark gray fill for prefilled completions */
  color: white !important; /* White text for contrast on dark background */
}

/* Enhanced styling for layered borders */
.completion-box,
.completion-row,
.completion-column,
.completion-symbol {
  /* Ensure enough space for multiple layered borders */
  box-sizing: border-box;
  position: relative;
}

/* Completion Conflict Dialog Styles */
.completion-conflict-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFadeIn 0.3s ease-out;
}

.completion-conflict-dialog .dialog-content {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.4);
  max-width: 450px;
  text-align: center;
  animation: dialogSlideIn 0.3s ease-out;
}

.completion-conflict-dialog .dialog-content h4 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: bold;
}

.completion-conflict-dialog .dialog-content p {
  margin: 12px 0;
  line-height: 1.5;
}

.completion-conflict-dialog .dialog-content small {
  opacity: 0.9;
  font-style: italic;
}

.completion-conflict-dialog .dialog-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.completion-conflict-dialog button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.completion-conflict-dialog .cancel-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.completion-conflict-dialog .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.completion-conflict-dialog .confirm-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #ee5a52;
  border: 2px solid white;
}

.completion-conflict-dialog .confirm-btn:hover {
  background: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Settings confirmation dialog */
.settings-confirmation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-confirmation-dialog .dialog-content {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.4);
  max-width: 450px;
  text-align: center;
  animation: dialogSlideIn 0.3s ease-out;
}

.settings-confirmation-dialog .dialog-content h4 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: bold;
}

.settings-confirmation-dialog .dialog-content p {
  margin: 12px 0;
  line-height: 1.5;
}

.settings-confirmation-dialog .dialog-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.settings-confirmation-dialog button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-confirmation-dialog .cancel-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.settings-confirmation-dialog .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.settings-confirmation-dialog .confirm-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #45a049;
  border: 2px solid white;
}

.settings-confirmation-dialog .confirm-btn:hover {
  background: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cell flash animation for completion conflicts */
.cell.completion-conflict-flash {
  animation: completionConflictFlash 1s ease-in-out;
}

@keyframes completionConflictFlash {
  0%,
  100% {
    background-color: transparent;
  }
  25%,
  75% {
    background-color: rgba(255, 107, 107, 0.3);
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
  }
  50% {
    background-color: rgba(255, 107, 107, 0.5);
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.8);
  }
}

/* Animation for new completions */
.completion-box.new-completion,
.completion-row.new-completion,
.completion-column.new-completion,
.completion-symbol.new-completion {
  animation: completionPulse 1s ease-in-out;
}

@keyframes completionPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
  }
  100% {
    transform: scale(1);
  }
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .completion-tracker {
    max-width: 90%;
    padding: 12px;
  }

  .symbol-completion-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 150px;
  }

  .column-completion-row {
    max-width: 200px;
  }
}

/* Doubted answer state styling */
.cell .value.doubted {
  opacity: 0.4;
  filter: blur(0.5px);
  font-style: italic;
}

/* Fix pencil mark font size - ensure they stay small */
.pencil-digit {
  font-size: 0.6em !important;
  line-height: 1 !important;
}

/* Circled pencil marks to indicate answers */
.pencil-mark-position.answer-circle {
  border: 2px solid !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  font-size: 0.6em !important;
  line-height: 1 !important;
  font-weight: bold !important;
}

.pencil-mark-position.player1-circle {
  border-color: #28a745 !important;
}

.pencil-mark-position.player2-circle {
  border-color: #fd7e14 !important;
}

/* Game End Alert Dialogs */
.game-end-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-end-alert .alert-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-end-alert .alert-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  animation: alertSlideIn 0.3s ease-out;
}

.game-end-alert.celebration .alert-content {
  border: 3px solid #4caf50;
  background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);
}

.game-end-alert.warning .alert-content {
  border: 3px solid #ff9800;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
}

.game-end-alert h2 {
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: bold;
}

.game-end-alert.celebration h2 {
  color: #2e7d32;
}

.game-end-alert.warning h2 {
  color: #f57c00;
}

.game-end-alert p {
  margin: 0 0 30px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  white-space: pre-line;
}

.game-end-alert .alert-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.game-end-alert button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.game-end-alert .close-btn {
  background-color: #6c757d;
  color: white;
}

.game-end-alert .close-btn:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
}

.game-end-alert .new-game-btn {
  background-color: #007bff;
  color: white;
}

.game-end-alert .new-game-btn:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.game-end-alert.celebration .new-game-btn {
  background-color: #4caf50;
}

.game-end-alert.celebration .new-game-btn:hover {
  background-color: #45a049;
}

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Game Solved Celebration Effect */
body.game-solved-celebration {
  animation: celebrationPulse 3s ease-in-out;
}

@keyframes celebrationPulse {
  0%,
  100% {
    background-color: #ffffff;
  }
  50% {
    background-color: #f0f8f0;
  }
}

/* Game content container - holds board and scoreboard sections with dynamic sizing */
.game-content-container {
  display: flex;
  gap: 20px; /* Add gap back for proper spacing */
  align-items: flex-start; /* Align to top so scoreboard doesn't stretch */
  justify-content: flex-start; /* Left-align so puzzle comes first */
  flex-wrap: wrap; /* Allow wrapping below */
  flex-direction: row; /* Default to side-by-side */
  margin: 0;
  width: 100%; /* Fill full width of parent */
  max-width: none; /* Remove width restrictions */
  flex: 1; /* Grow to fill available space in single-player-game */
  min-height: 70vh; /* Minimum height to provide space for growth */
  overflow: visible; /* Ensure children can be seen */
  box-sizing: border-box;
}

/* Legacy game-play-area styles (for backward compatibility) */
.game-play-area {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 95vw;
}

/* Game container - contains the puzzle with dynamic sizing and proper containment */
.single-player-container {
  flex: 1; /* Grow to fill available space in game-content-container */
  display: flex;
  flex-direction: column;
  min-width: 300px;
  width: 100%; /* Fill available space */
  height: 100%; /* Fill available height */
  max-width: none; /* Remove max-width restriction to allow full growth */
  overflow: visible; /* Allow content to be properly visible */
  box-sizing: border-box;
}

/* Single player game wrapper - fill full width of container */
.single-player-game {
  width: 100%; /* Fill full width of single-player-container */
  height: 100%; /* Fill full height */
  display: flex;
  flex-direction: column;
  min-height: 70vh; /* Ensure minimum height for content growth */
  box-sizing: border-box;
}

/* Board container - holds board area and difficulty display */
.board-with-difficulty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center content vertically */
  gap: 2px;
  width: 100%;
  flex: 1; /* Grow to fill available height in single-player-container */
  /* Dynamic minimum height that scales with puzzle size - defaults to 9x9 */
  min-height: var(--container-height-9) !important;
  min-width: 0; /* Allow shrinking */
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/* Board area container - rectangular container that grows in both directions */
.board-area-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 10; /* Take most of the available space (vs difficulty stars) */
  /* Dynamic height that scales with puzzle size - defaults to 9x9 */
  min-height: var(--container-height-9) !important;
  box-sizing: border-box;
  container-type: size; /* Enable container queries if supported */
  /* This container can be rectangular - it provides space for the square board */
}

/* Combined Scoreboard and Completion Tracker Layout with dynamic sizing */
.scoreboard-completion-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  flex: 0 0 min(350px, 35vw); /* Dynamic width that responds to viewport */
  min-width: 300px;
  max-height: fit-content;
  box-sizing: border-box;
}

.scoreboard-section {
  order: 1;
}

.completion-section {
  order: 2;
}

.scoreboard-section .score-display {
  margin: 0;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.completion-section .completion-tracker {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 0; /* Remove auto margin that could cause issues */
  max-width: none; /* Allow it to fill container */
  width: 100%; /* Fill the available width */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Make completion tracker grids more compact in sidebar layout */
.scoreboard-completion-container .symbol-completion-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 200px;
  gap: 2px;
}

.scoreboard-completion-container .column-completion-row {
  max-width: 250px;
  gap: 2px;
}

.scoreboard-completion-container .box-completion-grid {
  max-width: 90px;
  gap: 2px;
}

.scoreboard-completion-container .completion-box {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.scoreboard-completion-container .completion-symbol {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.scoreboard-completion-container .completion-column {
  width: 16px;
  height: 16px;
}

/* Board with difficulty container */
.board-with-difficulty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* Minimal space between board and difficulty */
}

/* Single player board - size naturally but constrained by container */
.single-player-board {
  /* Size to content but don't exceed container bounds */
  width: fit-content; /* Size to content width */
  height: fit-content; /* Size to content height */
  max-width: 100%; /* Don't exceed container width */
  max-height: 100%; /* Don't exceed container height */
  text-align: center; /* Center the sudoku board horizontally */
  box-sizing: border-box;
  border: 2px solid black; /* Clean black border around the puzzle */
  margin: 0 auto; /* Center horizontally in the flex container */
  /* The board-area-container will center this via flex */
}

/* Sudoku board - no absolute positioning, let it flow naturally */
.single-player-board .sudoku-board {
  /* Remove absolute positioning - let it size naturally */
}

/* Reduce sudoku board bottom margin within the container */
.board-with-difficulty-container .single-player-board,
.board-with-difficulty-container table.board,
.board-with-difficulty-container .board {
  margin-bottom: 0 !important; /* No margin - gap handles spacing */
}

/* Difficulty stars display under puzzle - right-align within board container */
.board-with-difficulty-container .puzzle-difficulty-display {
  display: block !important;
  text-align: right !important; /* Right-align within board container */
  margin: 0 !important; /* No margins - gap handles spacing */
  padding: 0;
  width: 100%; /* Full width of board container */
  align-self: stretch; /* Stretch to full width for right alignment */
}

/* Full-width header sections without positioning conflicts */
.player-header,
.game-status {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  box-sizing: border-box;
}

/* Compact game status layout */
.game-status {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row !important; /* Force horizontal layout */
  padding: 12px 20px; /* Increased padding for full-width */
  margin-bottom: 10px;
  gap: 20px; /* Space between turn indicator and pencil toggle */
}

/* Player header styling */
.player-header {
  text-align: center;
  padding: 15px 20px;
  margin-bottom: 10px;
}

/* Override existing turn-indicator styles when in game-status */
.game-status .turn-indicator,
.game-status .turn-indicator-left {
  flex: 0 0 auto !important; /* Don't grow or shrink */
  margin: 0 !important; /* Remove default margin */
  text-align: left !important;
  align-self: center;
}

/* Override existing pencil-mode-toggle styles when in game-status */
.game-status .pencil-mode-toggle,
.game-status .pencil-mode-right {
  flex: 0 0 auto !important; /* Don't grow or shrink */
  margin: 0 !important; /* Remove default margin */
  text-align: right !important;
  align-self: center;
}

.puzzle-difficulty-display .puzzle-difficulty {
  display: inline-flex !important; /* Use inline-flex to follow text-align */
  align-items: center;
  gap: 8px;
  justify-content: flex-end !important;
  margin-top: 0 !important; /* Remove the 8px top margin you mentioned */
  margin-bottom: 0 !important;
  padding: 0 !important; /* Remove all padding for tighter positioning */
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.puzzle-difficulty-display .difficulty-stars {
  margin-left: 0 !important;
}

.puzzle-difficulty-display .technique-details {
  margin-top: 5px;
  text-align: left; /* Keep tooltip left-aligned for readability */
}

/* Wide screens: board LEFT of scoreboard */
@media (min-width: 1150px) {
  .game-content-container,
  .game-play-area {
    flex-direction: row; /* Side-by-side layout */
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: none; /* Fill full width */
  }
  
  .single-player-container {
    /* Let it size dynamically based on board content */
    max-width: none;
    order: 1; /* Board comes first (left side) */
  }
  
  .scoreboard-completion-container {
    flex: 0 0 min(350px, 30vw); /* Right side scoreboard */
    margin-top: 0;
    order: 2; /* Scoreboard comes second (right side) */
  }
  
  /* Ensure dynamic heights work in this breakpoint */
  .board-area-container,
  .board-with-difficulty-container {
    min-height: var(--container-height-9) !important;
  }
}

/* Narrow screens: board ABOVE scoreboard */
@media (max-width: 1149px) {
  .game-content-container,
  .game-play-area {
    flex-direction: column;
    align-items: center;
    max-width: none; /* Fill full width */
  }
  
  .single-player-container {
    /* Let it size dynamically and fill available space */
    max-width: 95vw; /* Reasonable max on small screens */
    width: 100%;
    order: 1; /* Board comes first (above) */
  }
  
  .scoreboard-completion-container {
    width: 100%;
    max-width: min(600px, 90vw);
    margin-top: 20px;
    gap: 15px;
    padding: 15px;
    flex: none; /* Remove flex constraints on mobile */
    order: 2; /* Scoreboard comes second (below) */
  }
  
  /* Ensure dynamic heights work in this breakpoint */
  .board-area-container,
  .board-with-difficulty-container {
    min-height: var(--container-height-9) !important;
  }
}