/* Action Buttons Container */
.action-buttons-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  gap: 15px;
  flex-wrap: wrap;
}

.action-buttons-container .btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-buttons-container .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-buttons-container .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.action-buttons-container .form-control {
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.action-buttons-container .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Game Container - Modern Layout */
.game-container {
  min-height: calc(100vh - 120px);
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  width: 100%;
}

.game-layout {
  display: flex;
  gap: 20px;
  max-width: 100%;
  margin: 0;
  padding: 20px;
  min-height: calc(100vh - 160px);
  width: 100%;
}

/* Video Section (65%) */
.video-section {
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
}

.video-conference-container {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 100%;
  min-height: 600px;
  position: relative;
  padding: 0;
  margin: 0;
}

iframe.video-conference {
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Chessboard Section (35%) */
.chessboard-section {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chessboard-container {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 400px;
}

.timer-section {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#chess-clock {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   background: transparent;
   border-radius: 0.7em 0.7em 0 0;
   padding: 0.8em;
   text-align: center;
   font-size: 1.8em;
   cursor: pointer;
   box-shadow: 
      0 4px 6px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
   color: #2F1B14;
   font-weight: bold;
   border: 2px solid #8B4513;
   position: relative;
   overflow: hidden;
}

/* #chess-clock::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
      repeating-linear-gradient(
         90deg,
         transparent,
         transparent 2px,
         rgba(139, 69, 19, 0.1) 2px,
         rgba(139, 69, 19, 0.1) 4px
      ),
      repeating-linear-gradient(
         0deg,
         transparent,
         transparent 2px,
         rgba(139, 69, 19, 0.1) 2px,
         rgba(139, 69, 19, 0.1) 4px
      );
   pointer-events: none;
} */
#chess-clock table {
   margin: auto;
   position: relative;
   z-index: 1;
}
#chess-clock th {
   padding: 0.5rem;
   border-radius: 0.5em;
   color: #2F1B14;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
   position: relative;
   z-index: 1;
}
#chess-clock td {
   background: white;
   margin: 0.5em;
   font-family: 'Courier New', monospace;
   border: 1px grey solid;
   border-radius: 0.3em;
   padding: 0.3em;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   color: #333;
   font-weight: bold;
}
#chess-clock th.current {
   text-shadow: 2px 2px orange;
}
#chess-clock td.current {
   border: 1px orange solid;
}
#chess-timer-section {
   margin-top: 0; /* No top margin since it's beside the chessboard */
   padding: 0 1em; /* Add horizontal padding only */
}

/* Unified controls container styling */
#unified-controls-container {
   margin-bottom: 20px;
   padding: 15px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 8px;
   border: 1px solid #dee2e6;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.controls-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.control-btn {
   min-width: 80px;
   font-size: 0.875rem;
   padding: 8px 16px;
   border-radius: 6px;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   border: 2px solid;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.control-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.control-btn:active {
   transform: translateY(0);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Legacy control buttons container styling - keeping for compatibility */
#control-buttons-container {
   margin-bottom: 20px;
   padding: 15px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 8px;
   border: 1px solid #dee2e6;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

#control-buttons-container .button-row {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center;
}

#control-buttons-container .btn {
   flex: 1;
   min-width: 80px;
   font-size: 0.875rem;
   padding: 6px 12px;
   border-radius: 4px;
   transition: all 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#control-buttons-container .btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#control-buttons-container .btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

#control-buttons-container .btn:disabled:hover {
   transform: none;
   box-shadow: none;
}

/* Strategy pieces container styling */
#strategy-pieces-container {
   margin-bottom: 20px;
   padding: 15px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 8px;
   border: 1px solid #dee2e6;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: relative;
   min-height: 100px; /* Ensure there's space for the strategy pieces */
}

#strategy-pieces-container details {
   margin: 0;
}

#strategy-pieces-container summary {
   background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
   color: white;
   border: none;
   border-radius: 4px;
   padding: 8px 12px;
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#strategy-pieces-container summary:hover {
   background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Legacy clock controls - now handled by unified controls */
#chess-clock-controls {
   display: none; /* Hidden since controls are now in unified container */
}

/* #chess-clock-controls::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
      repeating-linear-gradient(
         90deg,
         transparent,
         transparent 2px,
         rgba(139, 69, 19, 0.1) 2px,
         rgba(139, 69, 19, 0.1) 4px
      ),
      repeating-linear-gradient(
         0deg,
         transparent,
         transparent 2px,
         rgba(139, 69, 19, 0.1) 2px,
         rgba(139, 69, 19, 0.1) 4px
      );
   pointer-events: none;
} */
#chess-clock-controls button {
   width: 100%; /* Make buttons take full width of the grid cell */
}
/* Removed margin-left from pause button to keep all buttons together */

details {
   margin-top: 0.7em;
   text-align: center;
}

/* Override the colours of the chessboard squares */
.black-3c85d {
   background-color: darkgrey !important;
   color: white !important;
}

.white-1e1d7 {
   background-color: lightgrey !important;
   color: black !important;
}

.strategy-pieces-color-7492d {
   margin-top: 10px;
   margin-bottom: 15px; /* Add space below strategy pieces */
}

.strategy-pieces-direction-7492d {
   display: flex;
   margin-top: 10px;
   margin-bottom: 15px; /* Add space below strategy pieces */
}

.clear-button-content {
   text-align: center;
   padding: 15px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   background: #f8f9fa;
   border-radius: 0.5em;
   margin-top: 10px;
}

.button-row {
   display: flex;
   gap: 12px;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

.button-row button {
   transition: all 0.3s ease;
   border-radius: 0.4em;
   font-weight: 500;
}

.button-row button:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
#chess-lock {
   min-width: 64px;
}
#chess-clear {
   min-width: 64px;
}

summary {
   margin-right: -15px;
   background: #f8f9fa;
   color: #333;
   border: 1px solid #e9ecef;
   border-radius: 0.4em;
   padding: 0.5em 1em;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

summary:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

details {
   position: relative;
   z-index: 2;
   margin-top: 10px;
   background: #ffffff;
   border-radius: 0.5em;
   border: 1px solid #e9ecef;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   color: #333;
}

.highlighted-square {
 background-color: red !important;
}/* Chessboard section spacing */
.chessboard-section {
   margin-bottom: 20px; /* Add space below the entire chessboard section */
   background: #ffffff;
   border-radius: 0.8em;
   padding: 1em;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border: 1px solid #e9ecef;
}

/* Ensure proper spacing between chessboard and controls */
#chessboard {
   margin-bottom: 15px; /* Add space below the chessboard */
   position: relative; /* Ensure proper positioning context */
   z-index: 1; /* Ensure chessboard stays above other elements */
   max-width: 100%; /* Ensure chessboard doesn't overflow container */
   overflow: hidden; /* Hide any overflow */
}

/* Ensure the chessboard container fits properly */
.chessboard-63f37 {
   max-width: 100%;
   overflow: hidden;
}

/* Chessboard Styling for New Layout */
#chessboard {
  width: auto;
  margin: 0 auto;
}

/* Control Buttons Styling */
.button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
  flex-wrap: wrap;
}

.button-row .btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.button-row .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-row .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Strategy Pieces Container */
#strategy-pieces-container {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

/* Strategy pieces styling */
#strategy-pieces-container .strategy-pieces-color-7492d,
#strategy-pieces-container .strategy-pieces-direction-7492d {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

#strategy-pieces-container .strategy-pieces-color-7492d:last-child,
#strategy-pieces-container .strategy-pieces-direction-7492d:last-child {
  margin-bottom: 0;
}

/* Legacy Control Buttons Container - keeping for compatibility */
#control-buttons-container {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Legacy Clock Controls - now handled by unified controls */
#chess-clock-controls {
  display: none !important; /* Hidden since controls are now in unified container */
}

#chess-clock-controls .btn {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 0;
  display: inline-block !important;
  width: auto !important;
}

#chess-clock-controls .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* General Button Click Feedback */
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
}

.btn:hover {
  transition: all 0.3s ease;
}

/* Chessboard List Button Styling */
.chessboard-actions .btn {
  transition: all 0.3s ease;
}

.chessboard-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chessboard-actions .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
  .game-layout {
    flex-direction: column;
    gap: 15px;
  }
  
  .video-section,
  .chessboard-section {
    flex: none;
  }
  
  .video-conference-container {
    min-height: 300px;
  }
  
  .chessboard-container {
    min-height: 300px;
  }
  
  .game-container {
    padding: 15px;
  }
}

/* Make sure the board itself fits */
.board-b72b1 {
   max-width: 100% !important;
   overflow: hidden;
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
   #chess-timer-section {
      margin-top: 20px; /* Add margin on mobile when stacked */
   }
   
   .chessboard-section {
      margin-bottom: 10px; /* Reduce margin on mobile */
   }
}

/* Ensure proper spacing between chessboard and timer on larger screens */
@media (min-width: 769px) {
   .col-md-6:first-child {
      padding-right: 15px;
   }
   
   .col-md-6:last-child {
      padding-left: 15px;
   }
}

/* Make strategy pieces visible - simple approach */
.chessboard-63f37 details {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.chessboard-63f37 details summary {
  display: block !important;
  background: #e0e0e0 !important;
  padding: 5px !important;
  margin-bottom: 10px !important;
}

.chessboard-63f37 .strategy-pieces-color-7492d,
.chessboard-63f37 .strategy-pieces-direction-7492d {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 10px !important;
  margin: 5px 0 !important;
}

.chessboard-63f37 .strategy-pieces-color-7492d .piece-417db,
.chessboard-63f37 .strategy-pieces-direction-7492d .piece-417db {
  width: 40px !important;
  height: 40px !important;
}

/* Add black borders around arrow elements (direction pieces) */
.chessboard-63f37 .strategy-pieces-direction-7492d .piece-417db[data-piece^="d"] {
  border: 2px solid #000000 !important;
}

/* Ensure the board maintains its proper structure within the horizontal layout */
.chessboard-horizontal-layout .board-b72b1 {
  flex-shrink: 0; /* Prevent the board from shrinking */
  position: relative; /* Ensure proper positioning */
  aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
}

/* Ensure the chessboard container maintains its structure */
.chessboard-63f37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Ensure the horizontal layout doesn't break the overall chessboard structure */
.chessboard-63f37 .chessboard-horizontal-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  min-height: 400px;
}

/* Strategy pieces on the left (color pieces/squares) */
.strategy-pieces-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 80px;
  max-width: 80px;
  padding: 10px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  height: 392px; /* Match the board height */
  overflow-y: auto; /* Allow scrolling if pieces overflow */
}

/* Strategy pieces on the right (direction pieces/arrows) */
.strategy-pieces-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 80px;
  max-width: 80px;
  padding: 10px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  height: 392px; /* Match the board height */
  overflow-y: auto; /* Allow scrolling if pieces overflow */
}

/* Style the strategy pieces containers */
.strategy-pieces-left .strategy-pieces-color-7492d {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  min-height: 50px; /* Ensure container has height even if empty */
}

.strategy-pieces-right .strategy-pieces-direction-7492d {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  min-height: 50px; /* Ensure container has height even if empty */
}


/* Ensure strategy pieces are visible */
.strategy-pieces-color-7492d,
.strategy-pieces-direction-7492d {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make strategy pieces smaller to fit better on the sides */
.strategy-pieces-left .piece-417db,
.strategy-pieces-right .piece-417db {
  width: 40px !important;
  height: 40px !important;
  padding: 2px !important;
  cursor: grab;
  transition: transform 0.2s ease;
}

.strategy-pieces-left .piece-417db:hover,
.strategy-pieces-right .piece-417db:hover {
  transform: scale(1.1);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .chessboard-horizontal-layout {
    flex-direction: column;
    gap: 15px;
    min-height: auto;
  }
  
  .strategy-pieces-left,
  .strategy-pieces-right {
    min-width: auto;
    max-width: none;
    width: 100%;
    height: auto;
    min-height: 60px;
  }
  
  .strategy-pieces-left .strategy-pieces-color-7492d,
  .strategy-pieces-right .strategy-pieces-direction-7492d {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .chessboard-horizontal-layout .board-b72b1 {
    width: 100% !important;
    max-width: 392px;
    aspect-ratio: 1 / 1 !important;
  }
}

.strategy-pieces-color-7492d {
   margin-top: 10px; /* Space within the details element */
   margin-bottom: 10px; /* Space within the details element */
   display: flex;
   flex-wrap: wrap;
   gap: 5px; /* Add small gap between pieces */
   justify-content: center; /* Center the pieces */
}

.strategy-pieces-direction-7492d {
   display: flex;
   flex-wrap: wrap;
   gap: 5px; /* Add small gap between pieces */
   justify-content: center; /* Center the pieces */
   margin-bottom: 10px; /* Space at the bottom */
}

/* Position strategy pieces on left and right sides of the board */
.chessboard-63f37 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chessboard-63f37 details {
   display: block !important;
   margin: 0;
   background: rgba(248, 249, 250, 0.9);
   border-radius: 8px;
   padding: 10px;
   overflow-y: auto;
}

.chessboard-63f37 details summary {
   display: none !important;
}

.chessboard-63f37 .strategy-pieces-color-7492d {
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: center;
   margin-bottom: 20px;
}

.chessboard-63f37 .strategy-pieces-direction-7492d {
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: center;
}

.chessboard-63f37 .strategy-pieces-color-7492d .piece-417db,
.chessboard-63f37 .strategy-pieces-direction-7492d .piece-417db {
   width: 40px !important;
   height: 40px !important;
   padding: 2px !important;
   cursor: grab;
   transition: transform 0.2s ease;
}

.chessboard-63f37 .strategy-pieces-color-7492d .piece-417db:hover,
.chessboard-63f37 .strategy-pieces-direction-7492d .piece-417db:hover {
   transform: scale(1.1);
}


/* Move direction pieces to the right side - using grid instead of absolute positioning */
.chessboard-63f37 .strategy-pieces-direction-7492d {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  overflow-y: auto;
}

/* Fix chessboard orientation - ensure proper row/column layout */
.board-b72b1 {
  display: block !important;
  width: 256px !important; /* 8 squares * 32px each */
  height: 256px !important; /* 8 squares * 32px each */
  border: 2px solid #404040 !important;
  box-sizing: content-box !important;
}

.board-b72b1 .row-5277c {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  height: 32px !important; /* Each row is 32px tall */
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  float: none !important;
}

.board-b72b1 .square-55d63 {
  float: left !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Ensure the board container doesn't rotate */
.chessboard-63f37 {
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

/* Ensure clearfix works properly */
.board-b72b1 .clearfix-7da63 {
  clear: both !important;
  display: block !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Force all rows to be visible and properly stacked */
.board-b72b1 {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
}

.board-b72b1 .row-5277c {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.board-b72b1 .square-55d63 {
  flex: 1 1 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Override any inline styles to ensure consistent square sizes */
.board-b72b1 .square-55d63[style*="width"] {
  width: auto !important;
}

.board-b72b1 .square-55d63[style*="height"] {
  height: auto !important;
}