/* ============================================
   ROAD 2 HYROX — Cyber-Kitsch Design System
   ============================================ */

/* CRT Scanline Overlay */
.crt::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Pixel Art Image Rendering */
.pixel-art,
img.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* === Base === */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100dvh;
  background-color: #020617;
  color: #f8fafc;
}

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* === Scrollbar Hide === */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* === Cyber Card === */
.cyber-card {
  background-color: #1e293b;
  border-width: 2px;
  border-style: solid;
  padding: 1rem;
}

/* === Cyber Button === */
.cyber-btn {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
  display: block;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cyber-btn:active {
  opacity: 0.8;
  transform: translateY(1px);
}

/* === Bottom Navigation === */
.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.5rem 0.875rem;
  gap: 0.3rem;
  color: #cbd5e1;
  background: transparent;
  border: none;
  border-top: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-tab .nav-icon {
  font-size: 1.125rem;
  line-height: 1;
}

.nav-tab.active-tab {
  color: #f472b6;
  border-top-color: #f472b6;
}

.nav-tab:not(.active-tab):active {
  color: #f8fafc;
}

/* === Typography === */
.font-pixel {
  font-family: 'Press Start 2P', monospace;
  line-height: 1.7;
}

.font-ui {
  font-family: 'Space Grotesk', 'Pretendard', sans-serif;
}

/* === Accent Glow (subtle) === */
.glow-pink {
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
}

.glow-cyan {
  text-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
}

/* === Blinking Cursor === */
.blink::after {
  content: '_';
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* === Progress Bar === */
.progress-bar {
  height: 6px;
  background-color: #1e293b;
  border: 1px solid #f472b6;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #f472b6;
  transition: width 0.4s ease;
}

/* === Badge === */
.badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.05em;
}