* { box-sizing: border-box; margin:0; padding:0; }

body { height:100vh; display:flex; justify-content:center; align-items:center; font-family:'Orbitron', sans-serif; background:#0a0a0a; color:white; }

.game { width:360px; text-align:center; position:relative; }

/* Start Screen */

#startScreen { position:relative; width:100%; height:100vh; overflow:hidden; }

#bgCanvas { position:absolute; width:100%; height:100%; }

.start-content { position:relative; z-index:2; top:20%; display:flex; flex-direction:column; align-items:center; }

.start-content h1 {

  font-size:3rem;

  background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: shine 2s linear infinite;

  letter-spacing: 3px;

  margin-bottom: 20px;

}

@keyframes shine { 0% {background-position:0% 50%;} 100%{background-position:200% 50%;} }

.scores { display:flex; justify-content:space-around; width:80%; margin-bottom:30px; font-size:1.2rem; }

.buttons { display:flex; flex-direction:column; gap:10px; }

#startBtn, #settingsBtn {

  padding: 15px 40px; font-size:1.3rem; border-radius:12px; color:#0ff; border:2px solid #0ff;

  background:linear-gradient(45deg,#0ff,#ff0,#f0f); box-shadow:0 0 20px #0ff,0 0 40px #ff0 inset;

  animation: pulse 2s infinite; cursor:pointer;

}

@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}

/* Overlay */

.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; z-index:5; }

.overlay-content { background:#111; border:2px solid #0ff; padding:20px; border-radius:12px; text-align:center; width:250px; color:#0ff; }

.overlay-content h2 { margin-bottom:15px; text-shadow:0 0 10px #0ff; }

/* Main Game styling */

.controls { margin:10px 0; display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; }

.controls button { padding:6px 10px; border:none; border-radius:6px; background:#111; color:#0ff; text-shadow:0 0 5px #0ff; cursor:pointer; }

.controls button.active { background:#0ff; color:#111; font-weight:bold; }

.controls select { border-radius:6px; background:#111; color:#0ff; border:2px solid #0ff; padding:3px 5px; }

.scoreboard { display:flex; justify-content:space-between; margin:10px 0; font-weight:bold; }

.status { margin:10px 0; min-height:24px; }

.board { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }

.cell { width:100px; height:100px; background:#111; border-radius:10px; font-size:2.5rem; display:flex; align-items:center; justify-content:center; color:#0ff; text-shadow:0 0 5px #0ff; user-select:none; transition:0.3s; }

.cell:hover{background:#222; cursor:pointer;}

.cell.win{background:#0ff; color:#111; text-shadow:none;}

.restart{padding:10px;border:none;border-radius:8px;background:#0ff;color:#111;width:100%;font-weight:bold;}

.mute{margin-top:6px;padding:8px;border:none;border-radius:8px;background:#222;color:#0ff;width:100%;text-shadow:0 0 5px #0ff;}