/* base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #D32F2F;
  color: white;
  overflow: hidden;
}
/* screens */
.screen {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.screen.active { display:flex; }
/* splash */
#splash-screen { background-color: #D32F2F; }
#splash-screen h1 { font-size: 3.5rem; margin: 0; }
#splash-screen h2 { font-size: 6rem; margin: -10px 0; font-weight: 900; }
#splash-screen h3 { font-size: 3rem; font-style: italic; }
/* home */
#home-screen { justify-content: center; gap: 30px; padding: 20px; }
.mode-button {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  background-color: #A32424;
  border: 4px solid white;
  border-radius: 15px;
  width: 85%;
  max-width: 450px;
  padding: 25px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  line-height: 1.2;
}
.mode-button:hover { background-color: #8B1E1E; transform: scale(1.02); }
/* audio controls block on home screen */
/* NOTE: removed dark background so controls sit directly on red background */
#audio-controls {
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
}
.audio-btn {
  background-color: #A32424;
  border: 3px solid white;
  color: white;
  padding: 8px 14px;
  font-size: 1rem;
  border-radius: 10px;
  cursor:pointer;
}
.audio-btn.off { opacity: 0.6; background-color: #4a4a4a; }
/* color picker */
.color-picker { margin-top: 20px; text-align: center; }
.color-picker p { font-size: 1.2rem; margin-bottom: 15px; color: white; }
.color-options { display:flex; gap:30px; justify-content:center; }
.color-box {
  width:60px; height:60px; border-radius:50%; border:3px solid white; cursor:pointer; transition: all .2s;
}
.color-box.red { background-color:#e74c3c; }
.color-box.green { background-color:#2ecc71; }
.color-box.active { box-shadow: 0 0 20px white; transform: scale(1.1); }
/* offline options */
#offline-options-screen { background-color: #D32F2F; justify-content:center; gap:30px; }
/* back button */
.back-button {
  position:absolute; top:20px; left:20px; font-size:1.5rem; color:white; background:none; border:none; cursor:pointer;
}
/* game screen */
#game-screen {
  background-color: #1a1a2e;
  justify-content:flex-start;
  padding-top: 70px;
  gap: 20px;
  position: relative;
}
#profile-bar { display:flex; justify-content:space-between; width:90%; max-width:450px; }
.profile-box {
  width:48%; padding:10px; border-radius:10px; text-align:center; border:3px solid #4f4f7a; transition: all .3s;
}
.profile-box.active-player { border:3px solid white; box-shadow:0 0 15px white; transform: scale(1.05); }
.player-name { display:block; font-size:.9rem; color:#ccc; }
.player-score { display:block; font-size:2rem; font-weight:bold; color:white; }
#player1-profile { background-color:#e74c3c; }
#player2-profile { background-color:#2ecc71; }
#game-status { font-size:1.2rem; font-weight:bold; height: 30px; }
/* board */
#game-board-container {
  width:90vw; max-width:450px; aspect-ratio:1/1; position:relative; background-color:#24243e; border-radius:15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
svg#board-lines { width:100%; height:100%; position:absolute; z-index:1; pointer-events:none; }
svg#board-lines line, svg#board-lines rect { stroke:#4f4f7a; stroke-width:5; fill:none; }
svg#formed-lines-svg { width:100%; height:100%; position:absolute; z-index:3; pointer-events:none; }
svg#formed-lines-svg line { stroke-width:8; stroke-linecap:round; }
.red-line { stroke:#e74c3c; }
.green-line { stroke:#2ecc71; }
/* points */
.game-point {
  width:10%; height:10%; background-color:#4f4f7a; border-radius:50%; position:absolute; cursor:pointer; transform: translate(-50%,-50%);
  transition: all .2s; z-index:2; display:flex; justify-content:center; align-items:center; font-size:.7rem; color:white; font-weight:bold;
}
.game-point:hover { box-shadow:0 0 15px #ffffff; transform: translate(-50%,-50%) scale(1.1); }
.game-point.player-red { background-color:#e74c3c; box-shadow:0 0 10px #e74c3c; }
.game-point.player-green { background-color:#2ecc71; box-shadow:0 0 10px #2ecc71; }
/* controls */
#game-controls { display:flex; justify-content:center; width:90vw; max-width:450px; margin-top:20px; }
.control-button {
  font-size:1.5rem; font-weight:bold; color:white; background-color:#A32424; border:3px solid white; border-radius:10px;
  padding:10px 20px; cursor:pointer; transition: all .2s; margin: 0 5px;
}
.control-button:hover { background-color:#8B1E1E; transform: scale(1.02); }
#exit-game-btn { position:absolute; top:20px; right:5vw; font-size:1rem; padding:8px 15px; z-index:10; }
#start-new-game-btn { background-color:#2ecc71; flex-grow:1; }
/* lobby */
#lobby-screen { background-color:#D32F2F; justify-content:center; gap:15px; padding:20px; box-sizing:border-box; }
#lobby-screen h2 { font-size:2.5rem; margin-bottom:20px; border-bottom:3px solid white; }
.join-box { display:flex; flex-direction:column; width:90%; max-width:450px; gap:10px; }
#room-code-input { font-size:1.2rem; padding:15px; border:2px solid white; border-radius:10px; text-align:center; text-transform:uppercase; }
#join-game-btn { font-size:1.5rem; font-weight:bold; color:#D32F2F; background-color:white; border:none; border-radius:10px; padding:15px; cursor:pointer; }
/* responsive tweak */
@media (max-width:420px) {
  .mode-button { font-size:2.4rem; padding:18px; }
}