/* ═══════════════════════════════════════════════════
   EdgeLine — Shared Stylesheet
   ═══════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

[x-cloak] { display: none !important; }

/* ── Scrollbar (dark, subtle) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ── Nav glass ── */
.nav-glass {
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  background-color: rgba(17, 24, 39, 0.85);
}

/* ── Section fade-in on scroll ── */
.fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero grid pattern ── */
.hero-grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(59,130,246,.05) 39px, rgba(59,130,246,.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(59,130,246,.05) 39px, rgba(59,130,246,.05) 40px);
}

/* ── CTA pulse ring ── */
.cta-pulse { position: relative; }
.cta-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid #3B82F6;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ── Accent line ── */
.accent-line {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, #3B82F6, #10B981);
  border-radius: 99px;
}

/* ── Feature card hover ── */
.feature-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(59,130,246,.08);
}

/* ── Demo blur paywall ── */
.demo-blur { filter: blur(4px); pointer-events: none; user-select: none; }

/* ── Tabular nums ── */
.tabular-nums { font-variant-numeric: tabular-nums; }

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

/* ── Stat glow on hover ── */
.stat-glow { transition: box-shadow 0.3s ease; }
.stat-glow:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.12); }

/* ── Probability bar shimmer ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.prob-bar-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

/* ── Mobile sticky CTA ── */
.mobile-sticky {
  transition: transform .3s ease;
}
.mobile-sticky.hidden { transform: translateY(120%); }

/* ── Confidence dots ── */
.confidence-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* ── Game card hover ── */
.game-card {
  transition: border-color .3s ease, transform .2s ease;
}
.game-card:hover {
  border-color: rgba(59, 130, 246, .25);
  transform: translateY(-2px);
}

/* ── Print ── */
@media print {
  nav, footer, .mobile-sticky, .cta-pulse::after { display: none; }
  body { background: white; color: black; }
  .bg-surface, .bg-bg, .bg-elevated { background: white !important; }
  * { color: black !important; border-color: #ccc !important; }
}

/* ═══════════════════════════════════════════════════
   Phase 2 — Odds Intelligence Components
   ═══════════════════════════════════════════════════ */

/* ── Edge badge ── */
.edge-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

/* ── Triple probability display ── */
.triple-prob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.triple-prob-cell {
  text-align: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,.05);
}
.triple-prob-cell.model { border-color: rgba(59,130,246,.2); }

/* ── Tooltip ── */
.tooltip-trigger { position: relative; cursor: help; }
.tooltip-trigger .tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
  color: #9CA3AF;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 50;
}
.tooltip-trigger .tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1E293B;
}
.tooltip-trigger:hover .tooltip-content { opacity: 1; }

/* ── Odds chip ── */
.odds-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background: #1E293B;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #9CA3AF;
}

/* ── Movement timeline ── */
.movement-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #1E293B;
  font-size: 0.75rem;
}

/* ── Expandable panel caret ── */
.panel-caret {
  transition: transform .2s ease;
}
.panel-caret.open { transform: rotate(90deg); }

/* ── Sortable column header ── */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  transition: color .2s ease;
}
th[data-sort]:hover { color: #E5E7EB; }

/* ── Risk badge ── */
.risk-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

/* ── Smooth expand for Alpine x-transition ── */
[x-transition] {
  transition: opacity .2s ease, transform .2s ease;
}

/* ── Book comparison table striping ── */
.book-table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, .3);
}