.group-gap {
  pointer-events: none;
  background: transparent;
}
.grouped {
  outline: 3px solid #4caf50;
  outline-offset: 2px;
  box-shadow: 0 0 12px #4caf5099;
  border-radius: 12px;
  transition: outline 0.2s, box-shadow 0.2s;
}
/* # Overlay action buttons for Play Online / Play Computer */
.actionBtn {
  /* --- Color Variables --- */
  --btn-color-top: #49a8de; /* The main button color */
  --btn-color-bottom: #000000; /* The shadow/3D part */
  --btn-text-color: #ffffff;
  --btn-color-top-hover: #59b8ef;
  /* --- Base Styles --- */
  background-color: var(--btn-color-top);
  color: var(--btn-text-color);
  border: none;
  border-radius: 12px;
  /* --- Sizing and Spacing --- */
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* --- Effects and Transitions --- */
  cursor: pointer;
  /* The key to the 3D effect: a solid box shadow on the bottom */
  box-shadow: 0 6px 0 var(--btn-color-bottom);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  position: relative; /* For the top property in :active state */
}

.actionBtnReverse { 
  --btn-color-bottom: #fffefe;
}

.actionBtnPrimary {
  margin-bottom: 10px;
  /* --- Color Variables --- */
  --btn-color-top: #49a8de; /* The main button color */
  --btn-color-bottom: #2e7ca8; /* The shadow/3D part */
  --btn-text-color: #ffffff;
  --btn-color-top-hover: #59b8ef;
  
  /* --- Base Styles --- */
  background-color: var(--btn-color-top);
  color: var(--btn-text-color);
  border: none;
  border-radius: 12px;
  
  /* --- Sizing and Spacing --- */
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* --- Effects and Transitions --- */
  cursor: pointer;
  /* The key to the 3D effect: a solid box shadow on the bottom */
  box-shadow: 0 6px 0 var(--btn-color-bottom);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  position: relative; /* For the top property in :active state */
}

/* --- Interactive States --- */
.actionBtn:hover {
  background-color: var(--btn-color-top-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--btn-color-bottom);
}
.actionBtn:active {
  /* Move the button down to 'crush' the shadow */
  transform: translateY(6px);
  /* The shadow disappears because the button is now on top of it */
  box-shadow: 0 0px 0 var(--btn-color-bottom);
  transition-duration: 0.05s; /* Make the press instant */
}
/* reversi.css: Basic styles for the Reversi game */

#board {
  gap: 2px;
  margin: 1rem auto;
  background: #2e7d32;
  border: 2px solid #222;
  border-radius: 6px;
  min-height: 500px;
  min-width: 950px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align children to the bottom */
}

#player-hand {
  position: relative;
  height: 300px;
  width: 850px;
  margin: 25px auto 25px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* margin-bottom: 15px; */
}
/* #player-hand .card {
  position: absolute;
  transition: transform 0.2s, z-index 0.2s;
  bottom: 0;
}
#player-hand .card.selected {
  z-index: 10;
  transform: var(--fan-transform) scale(1.08) translateY(-28px) !important;
} */

.card.fade-in {
  opacity: 0;
  transition: opacity 0.3s;
}
.card.fade-in.show {
  opacity: 1;
}

.highlight {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
  box-shadow: 0 0 12px #FFD70099;
  border-radius: 12px;
  transition: outline 0.2s, box-shadow 0.2s;
  border: none;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#player-hand .card.selected {
  z-index: 10;
  box-shadow: 0 8px 24px #2226;
  /* The transform is set inline for animation, so only add shadow/z-index here */
}