/* Reset & fonts */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: #0a1f44;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  transition: background 0.5s, color 0.5s;
}

/* Title */
h1.game-title {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-family: 'Archivo Black', sans-serif; /* Requested font */
  font-weight: 700;
  text-align: center;
  color: #07d3fc;
  margin-bottom: 30px;
}
h1.game-title span { 
  color: #e62492; 
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-family: 'Archivo Black', sans-serif; /* Requested font */
}

/* Toggle */
.toggle-container {
  position: absolute;
  top: 15px;
  right: 15px;
}
.toggle-btn {
  background: #ddd; color: #000; border: none; padding: 8px 14px;
  border-radius: 6px; font-weight: bold; cursor: pointer; transition: background 0.3s;
}
.toggle-btn:hover { background: #bbb; }

/* Game wrapper */
.game-wrapper {
  display: flex;
  justify-content: center; /* grid centered */
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  position: relative;
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 160px;
  position: absolute;
  left: calc((50% - 500px)/2); /* Center between left edge and grid (grid 225px) */
  top: 50%;
  transform: translateY(-50%);
}

/* Player Inputs */
.player-inputs { display: flex; flex-direction: column; gap: 10px; }
.player-inputs input { padding: 6px 10px; border: 1px solid #aaa; border-radius: 5px; font-size: 1rem; width: 150px; }

/* Scoreboard */
.scoreboard { display: flex; flex-direction: column; gap: 5px; }
.score-X { color: #e3167d; font-weight: bold; }
.score-O { color: #6353ce; font-weight: bold; }

/* Controls */
.controls { display: flex; flex-direction: column; gap: 10px; }
.controls button {
  width: 130px; padding: 8px 12px; font-size: 0.9rem;
  background: #0275d8; color: #fff; border-radius: 6px; font-weight: bold; cursor: pointer;
}
.controls button:hover { background: #e15aa2; }

/* Board container */
.board-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.board {
  display: grid;
  grid-template-columns: repeat(3, 150px); /* Desktop grid size */
  grid-template-rows: repeat(3, 150px);
  gap: 15px;
}

/* Cells */
.cell {
  display: flex; justify-content: center; align-items: center;
  background: #f2f2f2; color: #000; font-size: 5rem;
  font-weight: bold; border-radius: 6px; cursor: pointer;
  border: 2px solid #555; transition: background 0.3s;
}
.cell:hover { background: #e0e0e0; }
.cell.X { color: #ff00cc; }
.cell.O { color: #000000; }

/* Popup */
.popup {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(17, 16, 17, 0.9);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; color:#fff; font-size:2rem; text-align:center; z-index:10;
}
.popup.hide { display:none; }
.popup-btn { background:#0275d8; color:#fff; border-radius:6px; padding:10px 16px; font-weight:bold; cursor:pointer; }
.popup-btn:hover { background:#e15aa2; }

/* Dark/Light */
body.light { background: #f8f9fa; color: #111; }
body.light .cell { background:#fff; color:#000; border:2px solid #ccc; }
body.light .popup { background: rgba(255,255,255,0.95); color:#111; }

/* Responsive */
@media (max-width: 1024px) {
  .board { grid-template-columns: repeat(3, 180px); grid-template-rows: repeat(3, 180px); }
  .cell { font-size: 4.5rem; }
  .sidebar { left: 20px; top: auto; transform: none; }
}

@media (max-width: 768px) {
  .game-wrapper { flex-direction: column; gap: 30px; }
  .sidebar { align-items:center; text-align:center; position: static; transform: none; }
  .board { grid-template-columns: repeat(3, 140px); grid-template-rows: repeat(3, 140px); }
  .cell { font-size: 3rem; }
}