@import "tailwindcss";

:root {
  --bg-primary: #0a0a0f;
  --bg-card: #111118;
  --bg-card2: #1a1a24;
  --gold: #D4AF37;
  --gold-light: #f0d060;
  --gold-dark: #b8962e;
  --purple: #a855f7;
  --purple-dark: #7c3aed;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #1f2937;
  --border-gold: rgba(212, 175, 55, 0.4);
  --danger: #ef4444;
  --success: #22c55e;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  padding-bottom: 80px;
  min-height: 100dvh;
  line-height: 1.5;
}

/* Mobile-first container: caps content width for comfortable reading */
.mobile-container {
  max-width: 480px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 520px) {
  .mobile-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Force all interactive elements to min 44px touch target */
.touch-target {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #2a2a3a;
  border-radius: 4px;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
}
.animate-premium-glow {
  animation: pulse-gold 2s infinite;
}

.glass {
  background: rgba(17, 17, 24, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-gold {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--border-gold);
}

/* Streak flame */
@keyframes flicker {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.05); }
}
.flame {
  animation: flicker 0.5s ease-in-out infinite;
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
}

/* Better readability on OLED screens */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-primary);
  }
}
