html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
}
canvas {
  display: block;
}

/* Auth Modal Styles */
.auth-box {
  background: rgba(25, 30, 40, 0.95) !important;
  border: 1px solid rgba(60, 70, 80, 0.8) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6) !important;
  padding: 40px !important;
  width: 420px !important;
  text-align: center !important;
  color: #ecf0f1 !important;
  backdrop-filter: blur(10px);
}

.auth-title {
  color: #fff !important;
  font-size: 32px !important;
  font-weight: bold !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 30px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.auth-input {
  width: 100% !important;
  padding: 12px 16px !important;
  margin-bottom: 15px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(60, 70, 80, 0.5) !important;
  background: rgba(10, 15, 20, 0.6) !important;
  color: #fff !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  transition: all 0.3s ease;
}

.auth-input:focus {
  outline: none;
  border-color: #f1c40f !important;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
  background: rgba(20, 25, 35, 0.8) !important;
}

.auth-input::placeholder {
  color: rgba(160, 170, 190, 0.6) !important;
}

.auth-btn {
  width: 100% !important;
  padding: 14px !important;
  border: 1px solid rgba(60, 70, 80, 1) !important;
  border-radius: 12px !important;
  background: #232832 !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 18px !important;
  cursor: pointer !important;
  margin-top: 15px !important;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.auth-btn:hover {
  transform: scale(1.02);
  background: #2d323c !important;
}

.auth-btn:active {
  transform: scale(0.96);
}

/* Primary Button (Yellow Accent) */
.auth-btn-primary {
  border-left: 4px solid #f1c40f !important;
}

.auth-btn-primary:hover {
  border-color: #f1c40f !important;
  box-shadow: 0 0 15px rgba(241, 196, 15, 0.4) !important;
  color: #fff !important;
}

/* Secondary Button (Grey/Blue Accent) */
.auth-btn-secondary {
  border-left: 4px solid #95a5a6 !important;
  margin-top: 10px !important;
}

.auth-btn-secondary:hover {
  border-color: #bdc3c7 !important;
  box-shadow: 0 0 15px rgba(189, 195, 199, 0.4) !important;
}

.auth-link {
  color: #3498db !important;
  cursor: pointer !important;
  font-size: 14px !important;
  text-decoration: none;
  transition: color 0.2s;
  margin: 0 10px;
}

.auth-link:hover {
  color: #5dade2 !important;
  text-decoration: underline;
}

.auth-msg-error {
  color: #e74c3c !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
  min-height: 20px;
  text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

.auth-msg-success {
  color: #2ecc71 !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
  min-height: 20px;
  text-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
}

/* Close Button */
.auth-close-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 34px !important;
  text-align: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
  text-decoration: none !important;
}

.auth-close-btn:hover {
  background: rgba(231, 76, 60, 0.9) !important;
  border-color: rgba(231, 76, 60, 1) !important;
  transform: scale(1.1) rotate(90deg) !important;
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.5) !important;
}

.auth-close-btn:active {
  transform: scale(0.95) rotate(90deg) !important;
}