body { background: linear-gradient(135deg, #23272a 60%, #20313a 100%); color: #fff; font-family: 'Segoe UI', Arial, sans-serif; text-align: center; margin: 0; padding: 0; }
h1 { margin: 20px 0 10px 0; letter-spacing: 0.06em; font-weight: bold; text-shadow: 1px 2px 7px #0003; }
#score { margin: 10px auto 16px auto; font-size: 1.25rem; background: #242f29e5; padding: 9px 30px; border-radius: 1rem; display: inline-block; color: #b0ffda; font-weight: 600; box-shadow: 0 2px #063;
}
canvas { background: #111; margin: 0 auto; display: block; border: 4px solid #1abc9c; border-radius: 12px;
box-shadow: 0 8px 24px #1abc9c44;
}
.controls { margin: 32px auto 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.controls button { background: linear-gradient(145deg, #1abc9c 80%, #fff5 100%); color: #222; border: none; margin: 4px; padding: 18px 22px; font-size: 2.3rem; border-radius: 16px; box-shadow: 0 2px #09bba5; cursor: pointer; transition: background 0.18s, color 0.18s;
user-select: none; font-weight: bold; text-shadow: 0 1px #fff9; outline: none; }
.controls button:active { background: #fff; color: #1abc9c; }
.controls div { display: flex; justify-content: center; }
#gameOverPopup {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(34, 34, 34, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#leaderboardPopup {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(34, 34, 34, 0.74);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#leaderboardPopup .popup-content {
  margin: 0 auto;
  background: #301b1d;
  color: #fff;
  padding: 26px 32px 24px 32px;
  border-radius: 16px;
  box-shadow: 0 6px 32px #000b;
  min-width: 250px;
  text-align: center;
  float: none;
}


#leaderboardPopup .popup-content {
  background: #301b1d;
  color: #fff;
  padding: 26px 32px 24px 32px;
  border-radius: 16px;
  box-shadow: 0 6px 32px #000b;
  min-width: 250px;
  text-align: center;
}

#leaderboardPopup button {
  background: #ff6868;
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  padding: 10px 32px;
  font-size: 1.15rem;
  margin-top: 20px;
  font-weight: bold;
  box-shadow: 0 2px 8px #2225;
  cursor: pointer;
  transition: background 0.18s;
}
#leaderboardPopup button:active { background: #d84848; }
.popup-content {
  background: #301b1d;
  color: #fff;
  padding: 26px 32px 24px 32px;
  border-radius: 16px;
  box-shadow: 0 6px 32px #000b;
  min-width: 250px;
  text-align: center;
}
#gameOverPopup h2 { color: #ff6868; margin: 0 0 9px 0; }
#gameOverPopup button {
  background: #ff6868;
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  padding: 10px 32px;
  font-size: 1.15rem;
  margin-top: 16px;
  font-weight: bold;
  box-shadow: 0 2px 8px #2225;
  cursor: pointer;
  transition: background 0.18s;
}
#gameOverPopup button:active { background: #d84848; }
@media (max-width: 550px) {
  canvas { width: 96vw; height: 96vw; max-width: 400px; max-height: 400px; }
  h1 { font-size: 1.6rem; }
  #score { font-size: 1.05rem; padding: 7px 10px; }
  .controls button { font-size: 1.45rem; padding: 12px 15px; }
  .popup-content { padding:22px 10vw; min-width:unset; }
}