/* ============================================================
   FC Mobile 26 Generator — Custom Styles
   Design System: EA Red #E4002B | Gold #F5A623 | Green #00C853
   Dark Pitch #0A0E17 | Card Surface #141A26
   ============================================================ */

/* ---- Tailwind Extension via Custom Properties ---- */
:root {
  --ea-red: #E4002B;
  --ea-gold: #F5A623;
  --ea-green: #00C853;
  --dark-pitch: #0A0E17;
  --card-surface: #141A26;
  --elevated-surface: #1C2333;
  --text-primary: #EAECEF;
  --text-secondary: #8A92A4;
  --warning: #FF6B35;
}

/* ---- Global ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--dark-pitch);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ---- Selection ---- */
::selection {
  background: rgba(228, 0, 43, 0.4);
  color: var(--text-primary);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-pitch); }
::-webkit-scrollbar-thumb { background: var(--elevated-surface); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ea-red); }

/* ---- Animations ---- */

/* Shake for input errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.5s ease-in-out; }

/* Blinking terminal cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor-blink::after {
  content: '▋';
  animation: blink 1s step-end infinite;
  color: var(--ea-green);
}

/* Pulse glow for processing state */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(228, 0, 43, 0.3), 0 0 20px rgba(228, 0, 43, 0.1); }
  50% { box-shadow: 0 0 20px rgba(228, 0, 43, 0.5), 0 0 40px rgba(228, 0, 43, 0.2); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Progress bar shimmer sweep */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.progress-shimmer {
  background: linear-gradient(90deg, var(--ea-red) 25%, rgba(245,166,35,0.6) 50%, var(--ea-red) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* Gold card border glow */
@keyframes gold-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 166, 35, 0.3), inset 0 0 10px rgba(245, 166, 35, 0.1); }
  50% { box-shadow: 0 0 25px rgba(245, 166, 35, 0.6), inset 0 0 20px rgba(245, 166, 35, 0.2); }
}
.gold-glow { animation: gold-glow 2.5s ease-in-out infinite; }

/* Fade in up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }

/* Scale bounce */
@keyframes scaleBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-scale-bounce { animation: scaleBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Checkmark draw */
@keyframes checkmark {
  0% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}
.checkmark-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}
.checkmark-path.animate { animation: checkmark 0.5s ease forwards; }

/* Gold coin particle burst */
@keyframes coinFloat {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(-200px) rotate(360deg) scale(0); opacity: 0; }
}
.coin-particle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--ea-gold), #b8860b);
  border-radius: 50%;
  animation: coinFloat 2s ease-out forwards;
}

/* Count-up pulse */
@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.count-pulse { animation: countPulse 0.3s ease-in-out; }

/* Subtle scan lines for terminal */
.terminal-scan::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
}

/* Triangular geometric background pattern */
.bg-triangles {
  background-image:
    linear-gradient(rgba(228, 0, 43, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 0, 43, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Grid overlay */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ---- Step Indicator Triangles ---- */
.step-indicator {
  width: 36px; height: 36px;
  clip-path: polygon(50% 5%, 95% 95%, 5% 95%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  transition: all 0.3s ease;
}
.step-pending { background: var(--elevated-surface); color: var(--text-secondary); }
.step-active { background: var(--ea-red); color: #fff; }
.step-complete { background: var(--ea-green); color: #fff; }

/* ---- Reward Player Card ---- */
.reward-card {
  background: linear-gradient(135deg, #1a1f35 0%, #141A26 50%, #1a1f35 100%);
  border: 2px solid var(--ea-gold);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.reward-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(245, 166, 35, 0.1) 45deg,
    transparent 90deg,
    rgba(245, 166, 35, 0.1) 135deg,
    transparent 180deg,
    rgba(245, 166, 35, 0.1) 225deg,
    transparent 270deg,
    rgba(245, 166, 35, 0.1) 315deg,
    transparent 360deg
  );
  animation: shimmer 4s linear infinite;
}

/* ---- Pack Card Selection ---- */
.pack-card {
  border: 2px solid var(--elevated-surface);
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.pack-card:hover { border-color: var(--ea-gold); transform: translateY(-4px); }
.pack-card.selected { border-color: var(--ea-red); background: rgba(228, 0, 43, 0.08); }
.pack-card.selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 2px solid var(--ea-red);
  box-shadow: 0 0 15px rgba(228, 0, 43, 0.3);
  pointer-events: none;
}

/* ---- Input Styles ---- */
input[type="text"],
input[type="number"],
select {
  background: var(--card-surface);
  border: 1px solid #2A3142;
  color: var(--text-primary);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--ea-gold);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}
input.input-error {
  border-color: var(--warning) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15) !important;
}

/* ---- Terminal Window ---- */
.terminal-window {
  background: #0D1117;
  border: 1px solid #30363D;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
}
.terminal-header {
  background: #161B22;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #30363D;
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.red { background: #FF5F56; }
.terminal-dot.yellow { background: #FFBD2E; }
.terminal-dot.green { background: #27C93F; }
.terminal-body {
  padding: 16px;
  max-height: 280px;
  overflow-y: auto;
  color: #00C853;
  line-height: 1.7;
  position: relative;
}
.terminal-body .log-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.terminal-body .log-line.visible { opacity: 1; transform: translateY(0); }
.terminal-body .log-line.warn { color: #FF6B35; }
.terminal-body .log-line.success { color: #00C853; }
.terminal-body .log-line.info { color: #58A6FF; }

/* ---- Mobile hamburger ---- */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-open .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ---- Activity feed ticker ---- */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.activity-ticker { animation: ticker 30s linear infinite; }
.activity-ticker:hover { animation-play-state: paused; }

/* ---- Glass nav blur ---- */
.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 14, 23, 0.85);
  border-bottom: 1px solid rgba(42, 49, 66, 0.5);
}

/* ---- Toast notifications ---- */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  animation: fadeInUp 0.3s ease;
  max-width: 350px;
}
.toast-error { background: rgba(255, 107, 53, 0.95); color: #fff; }
.toast-success { background: rgba(0, 200, 83, 0.95); color: #fff; }

/* ---- Comparison table ---- */
.comparison-table th, .comparison-table td {
  padding: 16px 20px;
  text-align: left;
}
.comparison-table thead th { background: var(--elevated-surface); color: var(--ea-gold); }

/* ---- Mobile fixes ---- */
@media (max-width: 767px) {
  .terminal-body { max-height: 200px; font-size: 12px; }
  .terminal-body .log-line { padding: 2px 0; }
  .terminal-window { font-size: 11px; }
}