/* TreasureTrail – High Contrast, Readable, Forced Button Styles */

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

body {
  background: linear-gradient(145deg, #1A2F5F, #0F1A3A);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #FFFFFF;
  padding: 1rem;
  line-height: 1.5;
}

/* ALL HEADINGS – large, gold */
h1, h2, h3, h4, .logo, .brand {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  background: linear-gradient(135deg, #D4AF37, #FFF0B5);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 0.75rem;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

/* EVERY BUTTON, and anything that looks like a button */
button,
.button,
input[type="button"],
input[type="submit"],
.gender-btn,
[onclick],
[role="button"],
.tab-button,
.tab-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer;
  background-color: #122B5E !important;
  color: #FFFFFF !important;
  border-bottom: 3px solid #D4AF37 !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-decoration: none;
}
button:active,
.button:active,
input:active {
  transform: scale(0.97);
}
button:hover,
.button:hover {
  background-color: #1A3D7A !important;
  border-bottom-color: #FFE5A3 !important;
}

/* Secondary style for logout, back, etc. */
button.secondary,
.secondary,
#logoutBtn,
.back-btn,
.cancel-btn {
  background-color: #2A3F5E !important;
  border-bottom-color: #C0C0C0 !important;
}

/* Danger buttons */
button.danger,
.danger,
.delete-btn {
  background-color: #8B2C2C !important;
  border-bottom-color: #FF8888 !important;
}

/* Cards & panels – glass effect */
.card, .panel, .auth-container, .form-container {
  background: rgba(11, 26, 58, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Points display */
#pointsDisplay {
  background: rgba(0,0,0,0.4);
  border-left: 6px solid #D4AF37;
  padding: 1rem;
  border-radius: 16px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  color: #D4AF37;
  margin: 1rem 0;
}

/* Status & QR – readable */
#status, #qrResult {
  background: rgba(0,0,0,0.5);
  padding: 0.75rem;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: #E0E0E0;
}

/* Forms – high contrast */
input, select, textarea {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  background: rgba(255,255,255,0.15);
  border: 1px solid #D4AF37;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 1rem;
}
input:focus, select:focus {
  outline: none;
  border-color: #FFE5A3;
  background: rgba(255,255,255,0.25);
}
label {
  font-weight: 600;
  color: #D4AF37;
  margin-top: 0.5rem;
  display: block;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #D4AF37;
}
.user-info {
  background: rgba(0,0,0,0.5);
  padding: 0.4rem 1rem;
  border-radius: 60px;
  font-weight: 500;
}

/* Map & video */
#video {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  border: 2px solid #D4AF37;
}
#map {
  height: 60vh;
  border-radius: 16px;
  border: 1px solid #D4AF37;
}

/* Force any text inside buttons to be white */
button *,
.button *,
input[type="button"] *,
.gender-btn * {
  color: #FFFFFF !important;
}

/* Responsive */
@media (max-width: 640px) {
  body { padding: 0.8rem; }
  h1 { font-size: 1.6rem; }
  button, .button, input[type="button"] {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
}

/* Fix for star sign and Chinese zodiac displays – make them readable */
.star-sign,
#starSignDisplay,
#chineseDisplay {
  background: rgba(0, 0, 0, 0.5) !important;
  border-left: 4px solid #D4AF37 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin: 0.5rem 0 !important;
  text-align: center;
  box-shadow: none;
  backdrop-filter: blur(4px);
}

/* Ensure they don't look like clickable buttons */
.star-sign {
  cursor: default;
}

/* Star sign & Chinese zodiac – plain text, no borders, no card look */
.star-sign,
#starSignDisplay,
#chineseDisplay {
  /* Remove all button/card styling */
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0 !important;
  margin: 0.25rem 0 !important;
  box-shadow: none !important;
  
  /* Simple white text */
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  text-align: left !important;
  
  /* No interaction styling */
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

/* Remove any hover effects */
.star-sign:hover,
#starSignDisplay:hover,
#chineseDisplay:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  transform: none !important;
}

/* ===== MATRIX NOTIFICATIONS – Bright green on black ===== */
#status, #qrResult, .notification, .success-message {
  background-color: #0D0208 !important;  /* Vampire Black */
  color: #00FF41 !important;             /* Erin Green – super bright */
  border-left: 4px solid #00FF41 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 3px #00FF41 !important;
  box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
}

/* Error messages – keep red but bright on black */
#status.error, .error-message {
  background-color: #0D0208 !important;
  color: #FF4444 !important;
  border-left-color: #FF4444 !important;
  text-shadow: 0 0 2px #FF4444 !important;
}

/* Any other dynamic text that appears after claim */
.claim-result, .gps-status {
  background-color: #0D0208 !important;
  color: #00FF41 !important;
}

/* ===== DUAL‑THEME NOTIFICATIONS ===== */
/* Default / Boy theme – Matrix green */
#status, #qrResult {
  background-color: #0D0208 !important;
  color: #00FF41 !important;
  border-left: 4px solid #00FF41 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: bold !important;
  text-shadow: 0 0 3px #00FF41 !important;
  box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
}

/* Girl theme – pink on black */
body.girl-theme #status,
body.girl-theme #qrResult {
  color: #FF69B4 !important;        /* Hot pink */
  border-left-color: #FF69B4 !important;
  text-shadow: 0 0 3px #FF69B4 !important;
  box-shadow: 0 0 5px rgba(255, 105, 180, 0.3) !important;
}

/* Errors stay red for both */
#status.error {
  background-color: #0D0208 !important;
  color: #FF4444 !important;
  border-left-color: #FF4444 !important;
}