/* ============================================
   VERTEX 8 HYROX CHALLENGE — STYLES v2
   ============================================ */

@font-face {
  font-family: 'CustomFont';
  src: url('https://nlthfndovykcybtreozx.supabase.co/storage/v1/object/public/fonts/Navigo-Bold.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FraktionMono';
  src: url('https://nlthfndovykcybtreozx.supabase.co/storage/v1/object/public/fonts/PPFraktionMono-Regular-BF675904a6a1564.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --v8black: #0a0a0a;
  --v8dark: #121212;
  --v8gold: #D4AF37;
}

* { box-sizing: border-box; }

body {
  font-family: 'FraktionMono', 'Courier New', monospace !important;
  background-color: var(--v8black);
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.font-display, .font-custom { font-family: 'CustomFont', sans-serif !important; }
.font-mono { font-family: 'FraktionMono', monospace !important; }

.bg-v8black { background-color: var(--v8black); }
.bg-v8dark  { background-color: var(--v8dark); }
.bg-v8gold  { background-color: var(--v8gold); }
.text-v8gold { color: var(--v8gold); }

/* Gold gradient */
.gold-gradient-text {
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Glass card */
.glass-card {
  background: rgba(16,16,16,0.97);
  border: 1px solid rgba(255,255,255,0.055);
  transition: border-color 0.2s;
}
.glass-card:hover { border-color: rgba(212,175,55,0.1); }

/* Noise overlay */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Input fields */
.input-field {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-family: 'FraktionMono', monospace;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.input-field:focus { border-color: var(--v8gold); }
.input-field::placeholder { color: rgba(255,255,255,0.18); }
.input-field option { background: #1a1a1a; color: white; }

/* Button gold */
.btn-gold {
  background: var(--v8gold);
  color: #000;
  font-family: 'CustomFont', sans-serif;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  box-shadow: 0 0 20px rgba(212,175,55,0.25);
}
.btn-gold:hover { background: #e6c23a; box-shadow: 0 0 30px rgba(212,175,55,0.45); }
.btn-gold:active { transform: scale(0.98); }

/* Step card */
.step-card {
  background: rgba(16,16,16,0.97);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 1rem;
  padding: 1.25rem;
}
.step-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #666;
  margin-bottom: 0.75rem;
}

/* Field label */
.field-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #555;
  margin-bottom: 0.375rem;
}

/* Nav items */
.nav-item { transition: all 0.15s; }
.nav-active {
  background: rgba(212,175,55,0.1) !important;
  color: var(--v8gold) !important;
  border: 1px solid rgba(212,175,55,0.2);
}

/* Loader ring */
.loader-ring {
  width: 36px; height: 36px;
  border: 3px solid rgba(212,175,55,0.12);
  border-top-color: var(--v8gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--v8gold); }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Transitions */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.slide-up-enter-active, .slide-up-leave-active { transition: all 0.3s ease; }
.slide-up-enter-from, .slide-up-leave-to { opacity: 0; transform: translateX(-50%) translateY(20px); }

.slide-down-enter-active, .slide-down-leave-active { transition: all 0.2s ease; }
.slide-down-enter-from, .slide-down-leave-to { opacity: 0; transform: translateY(-8px); }

/* Login BG */
.login-bg { background: linear-gradient(135deg,#0f0f0f,#1a1a0a); background-size: cover; background-position: center; }

/* V-cloak */
[v-cloak] { display: none !important; }

/* Mobile safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
}

/* main padding fix for mobile */
@media (max-width:1024px) {
  main { padding-top: 52px !important; }
}
@media (min-width:1024px) {
  main { padding-top: 0 !important; }
}

/* Prevent zoom on input focus iOS */
@media screen and (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover subtle */
.hover\:bg-white\/2:hover { background: rgba(255,255,255,0.02); }
.hover\:bg-white\/4:hover { background: rgba(255,255,255,0.04); }
.hover\:bg-white\/5:hover { background: rgba(255,255,255,0.05); }