/* # 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 */
#reversi-game {
  max-width: 700px;
  margin: 2rem auto;
  /* padding: 1rem; */
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}
#reversi-board {
  display: grid;
  grid-template-columns: repeat(8, 70px);
  grid-template-rows: repeat(8, 70px);
  gap: 2px;
  margin: 1rem auto;
  background: #2e7d32;
  border: 2px solid #222;
  border-radius: 6px;
}
.reversi-cell {
  width: 70px;
  height: 70px;
  background: #388e3c;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.reversi-cell:hover {
  background: #43a047;
}
.reversi-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.reversi-black {
  background: #222;
}
.reversi-white {
  background: #fff;
  border: 2px solid #bbb;
}
#reversi-info {
  margin-top: 1rem;
  font-size: 1.1rem;
}
#reversi-restart {
  margin-top: 0.5rem;
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
#reversi-restart:hover {
  background: #1565c0;
}