@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg-primary: #0F1117;
  --bg-secondary: #13161f;
  --bg-tertiary: #1a1d2e;
  --bg-card: #13161f;
  --border: #2a2d38;
  --border-accent: #378ADD;
  --text-primary: #e8eaf0;
  --text-secondary: #8b8fa8;
  --text-muted: #5d6275;
  --text-muted-readable: #6b7088;
  --blue: #378ADD;
  --blue-light: #85B7EB;
  --blue-dark: #185FA5;
  --green: #97C459;
  --green-dark: #3B6D11;
  --green-bg: #0f1f0f;
  --gold: #b8923e;
  --gold-bright: #d9b25a;
  --cold-blue: #378ADD;
  --cold-bg: #0d1a2e;
  --accent: #378ADD;
  --pro-bg: #0d1f35;
  --pro-border: #185FA5;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --font-display: 'Space Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--blue-light); text-decoration: none; }
a:hover { color: var(--blue); }

/* NAV */
.site-nav {
  background: rgba(15,17,23,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo span { color: var(--blue); }
.nav-logo .dot { color: var(--blue); font-size: 22px; line-height: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; max-width: 1100px; margin: 0 auto; }
.logo-dot { color: var(--blue); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: .01em;
}

.nav-links a { color: var(--text-secondary); transition: color 0.2s; }
.nav-links a:hover { color: var(--text-primary); }

.nav-pro {
  background: var(--pro-bg);
  color: var(--blue-light);
  border: 1px solid var(--pro-border);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
  cursor: pointer;
}

.nav-pro:hover { background: #102840; color: var(--blue-light); }

/* HERO */
.hero {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 2.5rem 3rem;
}

.hero-inner { max-width: 1100px; margin: 0 auto; }

.hero-tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.hero-title {
  font-size: 34px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-sub {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.6;
}

.disclaimer-bar {
  background: rgba(55,138,221,0.08);
  border: 1px solid rgba(55,138,221,0.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 18px;
  max-width: 760px;
  line-height: 1.6;
}

.disclaimer-bar strong { color: var(--blue-light); font-weight: 500; }

/* MAIN LAYOUT */
.main-wrap { max-width: 1100px; margin: 0 auto; padding: 2.5rem 2.5rem; }

/* CONTROLS */
.tracker-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.game-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.tab-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-body);
  letter-spacing: .01em;
  position: relative;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: rgba(55,138,221,0.08);
}

.tab-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.tab-btn.active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.window-tabs { display: flex; gap: 5px; }

.window-btn {
  font-size: 13px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-display);
}

.window-btn.active { background: #0f1f0a; border-color: var(--green-dark); color: var(--green); }
.window-btn.locked { color: var(--gold); border-color: #4a3c1c; background: #161208; cursor: pointer; }
.window-btn.locked:hover { border-color: var(--gold); color: var(--gold-bright); }

/* STATS ROW */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  font-family: var(--font-display);
  color: var(--text-muted-readable);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 26px;
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--text-primary);
}

.stat-value.hot { color: var(--green); }
.stat-value.cold { color: var(--blue); }

/* NUMBERS GRID */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 13px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted-readable);
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 7px;
  margin-bottom: 28px;
}

.num-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  text-align: center;
  transition: transform 0.15s;
}

.num-cell:hover { transform: translateY(-1px); }
.num-cell.hot { background: var(--green-bg); border-color: var(--green-dark); }
.num-cell.cold { background: var(--cold-bg); border-color: #1a3a5c; }

.num-val {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--text-secondary);
}

.num-cell.hot .num-val { color: var(--green); }
.num-cell.cold .num-val { color: var(--cold-blue); }

.num-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.num-cell.hot .num-count { color: var(--green-dark); }
.num-cell.cold .num-count { color: #1e4a7a; }

/* TWO COL */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.panel-title {
  font-size: 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* PICKS */
.picks-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.pick-ball {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: var(--font-display);
  font-weight: 700;
}

.pick-ball.hot { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-dark); }
.pick-ball.cold { background: var(--cold-bg); color: var(--blue); border: 1px solid #1a3a5c; }

/* DRAW HISTORY */
.draw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.draw-row:last-child { border-bottom: none; padding-bottom: 0; }
.draw-date { color: var(--text-secondary); font-family: var(--font-display); font-size: 12px; }
.draw-nums { font-family: var(--font-display); color: var(--text-primary); letter-spacing: .04em; font-size: 14px; }

/* PRO BANNER */
.pro-banner {
  background: var(--pro-bg);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.pro-text { font-size: 16px; color: var(--blue-light); font-weight: 500; }
.pro-sub { font-size: 13px; color: var(--blue-light); margin-top: 4px; }

.btn-pro {
  background: var(--blue-dark);
  color: #E6F1FB;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-pro:hover { background: #0e4a80; color: #E6F1FB; }

/* BLOG SECTION */
.blog-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  gap: 14px;
}

.blog-row:last-child { border-bottom: none; }
.blog-title-link { font-size: 16px; color: var(--text-primary); display: block; margin-bottom: 5px; transition: color 0.2s; }
.blog-title-link:hover { color: var(--blue-light); }
.blog-meta { font-size: 13px; color: var(--text-muted); }
.blog-badge { font-size: 12px; padding: 4px 10px; border-radius: 10px; white-space: nowrap; background: rgba(55,138,221,0.1); color: var(--blue-light); border: 1px solid rgba(55,138,221,0.2); flex-shrink: 0; }

/* PAGE SECTIONS */
.page-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
.page-section:last-child { border-bottom: none; }
.page-section h2 { font-size: 22px; font-weight: 500; margin-bottom: 18px; font-family: var(--font-display); }
.page-section p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.7; font-size: 16px; }
.page-section ul { color: var(--text-secondary); padding-left: 22px; margin-bottom: 16px; }
.page-section ul li { margin-bottom: 10px; line-height: 1.6; font-size: 16px; }

/* DISCLAIMER BOX */
.disclaimer-box {
  background: rgba(55,138,221,0.06);
  border: 1px solid rgba(55,138,221,0.25);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 22px 0;
}

.disclaimer-box p { color: var(--text-secondary); margin-bottom: 0; font-size: 15px; }
.disclaimer-box p + p { margin-top: 12px; }

/* CONTACT FORM */
.contact-form { max-width: 560px; }

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--blue); }
.form-group textarea { height: 130px; resize: vertical; }

.btn-submit {
  background: var(--blue-dark);
  color: #E6F1FB;
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}

.btn-submit:hover { background: #0e4a80; }

/* FOOTER */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 2.5rem;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 14px; }
.footer-links a { color: var(--text-muted); font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: var(--blue-light); }

/* ABOUT PAGE */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0; }
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.about-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--text-primary); }
.about-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 0; }

/* STRATEGY PAGE */
.rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.rule-num { font-family: var(--font-display); font-size: 11px; color: var(--blue); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .08em; }
.rule-title { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.rule-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(6, 1fr); }
  .hero-title { font-size: 26px; }
  .pro-banner { flex-direction: column; gap: 14px; }
  .main-wrap { padding: 1.5rem; }
}

/* Nav wrapping triggers at a wider breakpoint than the grids, because a
   phone in LANDSCAPE (~900px+) is wider than 768px but the desktop nav's
   7 items + "Manage subscription" still overflow. 1024px covers landscape
   phones and small tablets. */
@media (max-width: 1024px) {
  .site-nav { padding: 0 1rem; height: auto; min-height: 56px; flex-wrap: wrap; }
  .nav-inner { flex-wrap: wrap; gap: 10px 20px; padding: 8px 0; }
  .nav-links { flex-wrap: wrap; gap: 12px 18px; font-size: 13px; row-gap: 8px; }
  /* Keep the PRO badge (last nav item) off the very edge */
  .nav-pro { padding: 5px 12px; margin-right: 4px; }
}

/* The 3D hot/cold graph jitters and rotates poorly on touchscreens
   (touch-rotate fights page scrolling, and mobile GPUs stutter on it).
   Hide it on touch-primary devices — phones and tablets in ANY
   orientation — while every mouse/trackpad device keeps it. The hot/cold
   data itself remains visible in the cards above the graph. */
@media (hover: none) and (pointer: coarse) {
  .intel-3d-section { display: none; }
}

/* CTA BUTTONS */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 18px;
  flex-wrap: wrap;
}

.btn-cta-original-placeholder {
  display: none; /* merged into dominant rule below */
}

.btn-cta-original-placeholder:hover {
  background: #0e4a80;
  color: #E6F1FB;
  transform: translateY(-1px);
}

.btn-cta-ghost {
  background: transparent;
  color: var(--blue-light);
  border: 1px solid var(--pro-border);
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
}

.btn-cta-ghost:hover {
  background: var(--pro-bg);
  color: var(--blue-light);
  transform: translateY(-1px);
}

/* HERO CHART PREVIEW */
.hero-preview {
  margin-top: 20px;
  max-width: 680px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.hero-preview-label {
  font-size: 11px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* GRID ENTRANCE ANIMATION */
@keyframes cellFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.num-cell {
  animation: cellFadeIn 0.3s ease both;
}

/* STAT CARD ENTRANCE */
@keyframes statSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-card {
  animation: statSlideIn 0.4s ease both;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

/* CTA BUTTON PULSE on first load */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(55,138,221,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(55,138,221,0); }
  100% { box-shadow: 0 0 0 0 rgba(55,138,221,0); }
}

/* btn-cta animation merged below */

/* FREQUENCY BAR CHART — premium data viz */
.frequency-chart-wrap {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 20px 20px 12px;
  margin-bottom: 10px;
  width: 100%;
  border: none;
}

.chart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-main-title {
  font-size: 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.chart-legend {
  display: flex;
  gap: 14px;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

#frequency-bar-chart {
  display: block;
  width: 100%;
  height: 260px;
}

.chart-insight-row {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.chart-insight {
  font-size: 11px;
  color: var(--text-muted-readable);
  line-height: 1.4;
}

.chart-insight strong {
  font-weight: 500;
  font-family: var(--font-display);
}

.chart-insight.hot strong { color: var(--green); }
.chart-insight.cold strong { color: var(--cold-blue); }
.chart-insight.neutral strong { color: var(--text-secondary); }

.grid-toggle-row {
  text-align: right;
  margin-bottom: 8px;
}

.grid-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-display);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.grid-toggle-btn:hover {
  color: var(--blue-light);
  border-color: var(--blue-dark);
}

/* PROOF BAR */
.proof-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 8px;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.proof-icon {
  color: var(--blue);
  font-size: 11px;
}

.proof-divider {
  width: 1px;
  height: 12px;
  background: var(--border);
  flex-shrink: 0;
}

/* DOMINANT CTA */
.btn-cta {
  background: var(--blue-dark);
  color: #E6F1FB;
  border: none;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(55,138,221,0);
  letter-spacing: .01em;
}

.btn-cta:hover {
  background: #0e4a80;
  color: #E6F1FB;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(24,95,165,0.4);
}

.btn-cta:active {
  transform: translateY(0);
}

/* HOVER TRANSITIONS — nav, tabs, picks */
.tab-btn { transition: all 0.15s ease; }
.window-btn { transition: all 0.15s ease; }
.num-cell { transition: transform 0.12s ease, background 0.15s ease; }
.num-cell:hover { transform: translateY(-2px) scale(1.05); }
.pick-ball { transition: transform 0.15s ease; }
.pick-ball:hover { transform: scale(1.12); }
.nav-links a { transition: color 0.15s ease; }
.btn-cta-ghost { transition: all 0.15s ease; }

/* ANIMATED NUMBER COUNTER */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-value {
  animation: countUp 0.5s ease both;
}

.stat-value.hot { animation-delay: 0.1s; }
.stat-value.cold { animation-delay: 0.15s; }

/* CHART SHIMMER — loading state */
@keyframes shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.4; }
}

.chart-loading {
  animation: shimmer 1.5s ease infinite;
}

/* PRO BANNER — borderless */
.pro-banner {
  background: var(--pro-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

/* DRAW ROW hover */
.draw-row {
  transition: background 0.12s ease;
  border-radius: 4px;
  padding: 9px 6px;
  margin: 0 -6px;
}
.draw-row:hover {
  background: rgba(55,138,221,0.05);
}

/* BLOG ROW hover */
.blog-row { transition: background 0.12s ease; border-radius: 6px; padding: 16px 6px; margin: 0 -6px; }
.blog-row:hover { background: rgba(255,255,255,0.02); }

/* REMOVE border from hero preview chart */
.hero-preview {
  margin-top: 20px;
  max-width: 680px;
  background: rgba(255,255,255,0.02);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

/* DOMINANT CHART LAYOUT */
.tracker-hero-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
  grid-auto-rows: min-content;
}

.tracker-chart-main {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 20px 20px 14px;
  min-width: 0;
  height: fit-content;
}

.chart-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--font-display);
}

.tracker-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-stat {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
}

.sidebar-picks {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.sidebar-draws {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow: hidden;
}

.sidebar-draws .draw-row:nth-child(n+5) {
  display: none;
}

@media (max-width: 768px) {
  .tracker-hero-layout {
    grid-template-columns: 1fr;
  }
  .tracker-sidebar {
    grid-template-columns: 1fr;
  }
  #frequency-bar-chart {
    height: 220px !important;
  }
  .hero-title {
    font-size: 24px;
  }
  .proof-bar {
    gap: 6px;
  }
  .proof-divider {
    display: none;
  }
  .hero-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-cta {
    width: 100%;
    text-align: center;
  }
}

/* CHART STORY CALLOUT */
.chart-story-callout {
  background: rgba(55,138,221,0.06);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 20px;
  transition: opacity 0.3s ease;
}

.chart-story-callout strong {
  color: var(--text-primary);
  font-weight: 500;
}

.chart-story-callout .story-hot { color: var(--green); font-weight: 500; }
.chart-story-callout .story-cold { color: var(--cold-blue); font-weight: 500; }
.chart-story-callout .story-pct { color: var(--blue-light); font-weight: 500; }

/* FOUNDER NOTE */
.founder-note {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 40px;
}

.founder-note-inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 32px;
  align-items: start;
}

.founder-note-label {
  font-size: 11px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  margin-bottom: 12px;
}

.founder-note-text p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 12px;
}

.founder-note-text p:last-of-type { margin-bottom: 14px; }

.founder-note-link {
  font-size: 13px;
  color: var(--blue-light);
}

.founder-note-cta {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.founder-cta-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* BLOG SECTION — more breathing room */
.section-header {
  padding-top: 8px;
}

/* FOOTER — cleaner */
.site-footer {
  background: var(--bg-secondary);
  border-top: none;
  padding: 2.5rem;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 13px;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--blue-light); }

/* MOBILE — founder note */
@media (max-width: 768px) {
  .founder-note-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .founder-note {
    padding: 22px;
  }
}

/* HERO TEXT — explicit overrides to prevent inheritance issues */
.hero { color: var(--text-primary); }
.hero-tag { color: var(--blue) !important; }
.hero-title { color: var(--text-primary) !important; }
.hero-sub { color: var(--text-secondary) !important; }
.proof-item { color: var(--text-muted) !important; }
.hero-cta-row { opacity: 1 !important; visibility: visible !important; }
.btn-cta { opacity: 1 !important; visibility: visible !important; }

/* HERO SECTION CRITICAL FIX */
.hero {
  display: block !important;
  overflow: visible !important;
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: visible !important;
}
.hero-tag,
.hero-title,
.hero-sub,
.hero-cta-row,
.proof-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}
h1.hero-title {
  color: #e8eaf0 !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}
.hero-tag {
  color: #378ADD !important;
  font-size: 12px !important;
  margin-bottom: 14px !important;
}
.hero-sub {
  color: #8b8fa8 !important;
  font-size: 17px !important;
  margin-bottom: 0 !important;
}
#hero-mini-chart {
  display: block;
  width: 100% !important;
  height: 60px !important;
  max-height: 60px !important;
}
.hero-preview {
  margin-top: 20px;
  max-width: 680px;
  background: rgba(255,255,255,0.02);
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  overflow: hidden;
}

/* MULTI-STRATEGY PICK BOARDS */
.picks-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.picks-window-label {
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green-dark);
  padding: 2px 7px;
  border-radius: 10px;
}

.pick-board {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.pick-board:last-of-type { margin-bottom: 0; }

.pick-board-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.pick-board-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-display);
}

.pick-board-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.free-tag {
  background: rgba(151,196,89,0.12);
  color: var(--green);
  border: 1px solid var(--green-dark);
}

.pro-tag {
  background: var(--pro-bg);
  color: var(--blue-light);
  border: 1px solid var(--pro-border);
}

.pick-board-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 7px;
  font-family: var(--font-display);
  line-height: 1.4;
}

/* LOCKED PRO BOARDS */
.locked-board {
  border-color: rgba(24,95,165,0.2);
  opacity: 0.65;
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.locked-board:hover {
  opacity: 0.85;
  border-color: var(--blue-dark);
}

.locked-board .picks-row::after {
  content: "Pro";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--blue-light);
  background: var(--pro-bg);
  border: 1px solid var(--pro-border);
  padding: 3px 10px;
  border-radius: 10px;
  pointer-events: none;
}

.locked-board .picks-row {
  position: relative;
  opacity: 0.3;
  filter: blur(2px);
  pointer-events: none;
}

/* PRO PROMPT */
.picks-pro-prompt {
  text-align: center;
  margin: 10px 0 4px;
  font-size: 11px;
}

.picks-pro-prompt a {
  color: var(--blue-light);
  font-size: 11px;
}

/* WHEN PRO IS ACTIVE — remove locks */
.pick-board.unlocked {
  opacity: 1;
  border-color: var(--border);
  cursor: default;
}

.pick-board.unlocked .picks-row {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.pick-board.unlocked .picks-row::after {
  display: none;
}

/* ═══════════════════════════════════════
   INTELLIGENCE WIDGET — Cleo-inspired
═══════════════════════════════════════ */

.intel-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intel-headline {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.intel-headline em {
  color: var(--green);
  font-style: normal;
}

.intel-subline {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: -6px;
}

.intel-subline strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* THREE CARDS ROW */
.intel-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.intel-card {
  border-radius: 14px;
  padding: 14px 15px;
}

.intel-card-hot {
  background: rgba(15,31,10,0.8);
  border: 1px solid #2d5a0d;
}

.intel-card-cold {
  background: rgba(8,15,30,0.8);
  border: 1px solid #102040;
}

.intel-card-zone {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.intel-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  color: #3B6D11;
  margin-bottom: 8px;
}

.intel-card-label-cold {
  color: #185FA5;
}

.intel-big {
  font-size: 36px;
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--green);
}

.intel-big-cold {
  color: var(--cold-blue, #5ba8e8);
}

.intel-detail {
  font-size: 11px;
  color: #3B6D11;
  margin-top: 5px;
  line-height: 1.4;
}

.intel-detail-cold {
  color: #185FA5;
}

.intel-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.intel-chip-hot {
  background: rgba(59,109,17,0.25);
  color: var(--green);
  border: 1px solid #2d5a0d;
  font-size: 11px;
  font-family: var(--font-display);
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 500;
}

.intel-chip-cold {
  background: rgba(16,32,64,0.5);
  color: #5ba8e8;
  border: 1px solid #102040;
  font-size: 11px;
  font-family: var(--font-display);
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 500;
}

/* ZONE BARS */
.intel-zone-row {
  margin-bottom: 7px;
}

.intel-zone-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted-readable);
  margin-bottom: 4px;
}

.intel-zone-pct {
  font-weight: 500;
}

.intel-zone-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.intel-zone-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* SECTION LABELS */
.intel-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

/* FREQUENCY BARS */
.intel-freq-section {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.intel-freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.intel-freq-row:last-child {
  margin-bottom: 0;
}

.intel-freq-num {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-secondary);
  width: 24px;
  text-align: right;
}

.intel-freq-track {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.intel-freq-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.intel-freq-count {
  font-size: 11px;
  color: var(--text-muted-readable);
  width: 22px;
  text-align: right;
  font-family: var(--font-display);
}

.intel-freq-dot {
  font-size: 11px;
  width: 12px;
}

/* TREND SECTION */
.intel-trend-section {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.intel-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.intel-mini-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.intel-mini-up {
  background: rgba(59,109,17,0.2);
  color: var(--green);
  border: 1px solid #2d5a0d;
  font-size: 12px;
  font-family: var(--font-display);
  padding: 4px 9px;
  border-radius: 8px;
  font-weight: 500;
}

.intel-mini-down {
  background: rgba(16,32,64,0.4);
  color: #5ba8e8;
  border: 1px solid #102040;
  font-size: 12px;
  font-family: var(--font-display);
  padding: 4px 9px;
  border-radius: 8px;
  font-weight: 500;
}

/* BONUS SECTION */
.intel-bonus-section {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.intel-bonus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}

.intel-bonus-ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.intel-bonus-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-display);
  transition: transform 0.12s ease;
  cursor: default;
}

.intel-bonus-circle:hover {
  transform: scale(1.1);
}

.intel-bonus-circle-hot {
  background: rgba(15,31,10,0.8);
  color: var(--green);
  border: 1.5px solid #3B6D11;
}

.intel-bonus-circle-cold {
  background: rgba(8,15,30,0.8);
  color: #5ba8e8;
  border: 1.5px solid #185FA5;
}

.intel-bonus-circle-neutral {
  background: var(--bg-primary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.intel-bonus-count {
  font-size: 11px;
  color: var(--text-muted-readable);
  font-family: var(--font-display);
}

.intel-toggle-row {
  text-align: right;
}

/* MOBILE */
@media (max-width: 768px) {
  .intel-trio {
    grid-template-columns: 1fr 1fr;
  }
  .intel-card-zone {
    grid-column: 1 / -1;
  }
  .intel-two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .intel-headline {
    font-size: 18px;
  }
}

/* PICK GENERATOR */
.pick-generator {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.pg-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.pg-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  font-family: var(--font-display);
}

.pg-sublabel {
  font-size: 11px;
  color: var(--text-muted);
}

.pg-strats {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.pg-strat {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  text-align: center;
}

.pg-strat:hover:not(.on) {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--bg-secondary);
}

.pg-strat-a.on { color: var(--green); border-color: var(--green-dark); background: var(--green-bg); }
.pg-strat-b.on { color: var(--blue-light); border-color: var(--blue-dark); background: var(--pro-bg); }
.pg-strat-c.on { color: #EF9F27; border-color: #854F0B; background: #13100a; }

.pg-qty-row {
  margin-bottom: 12px;
}

.pg-qty-label {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}

.pg-qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 6px;
  justify-content: space-between;
}

.pg-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  line-height: 1;
  font-family: var(--font-body);
  border: 1px solid var(--border);
}

.pg-qty-btn:hover { background: var(--bg-tertiary); }
.pg-qty-btn:active { transform: scale(0.93); }
.pg-qty-btn:disabled { opacity: .25; cursor: default; }

.pg-qty-display {
  text-align: center;
  flex: 1;
}

.pg-qty-num {
  font-size: 28px;
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--green);
  transition: color .2s;
}

.pg-qty-unit {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-top: 2px;
}

.pg-gen-btn {
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  margin-bottom: 12px;
}

.pg-gen-a { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-dark); }
.pg-gen-b { background: var(--pro-bg); color: var(--blue-light); border: 1px solid var(--blue-dark); }
.pg-gen-c { background: #13100a; color: #EF9F27; border: 1px solid #854F0B; }
.pg-gen-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.pg-gen-btn:active { transform: translateY(0); }

.pg-output {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 9px;
  border: 1px solid var(--border);
}

.pg-line-num {
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--text-muted);
  width: 20px;
  flex-shrink: 0;
}

.pg-balls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.pg-ball {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.pg-ball-hot { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-dark); }
.pg-ball-cold { background: var(--cold-bg); color: var(--blue-light); border: 1px solid var(--blue-dark); }
.pg-ball-neutral { background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border); }
.pg-ball-bonus-a { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-dark); }
.pg-ball-bonus-b { background: var(--pro-bg); color: var(--blue-light); border: 1px solid var(--blue-dark); }
.pg-ball-bonus-c { background: #13100a; color: #EF9F27; border: 1px solid #854F0B; }

.pg-sep { color: var(--border); font-size: 12px; margin: 0 1px; flex-shrink: 0; }

.pg-copy-btn {
  width: 100%;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  margin-top: 4px;
}

.pg-copy-btn:hover { color: var(--text-secondary); border-color: var(--blue-dark); }

/* GENERATOR LOCKED TEASER */
.pg-locked-teaser {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.pg-locked-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.pg-locked-text {
  line-height: 1.4;
}

/* 3D FREQUENCY GRAPH */
.intel-3d-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
}

.legend-dot-hot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 3px;
  vertical-align: middle;
}

.legend-dot-cold {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 3px;
  vertical-align: middle;
}

/* COMPREHENSIVE MOBILE FIXES */
@media (max-width: 768px) {

  /* Hero */
  .hero-title { font-size: 22px !important; line-height: 1.3; }
  .hero-sub { font-size: 14px; }
  .btn-cta { width: 100%; text-align: center; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .btn-cta-ghost { width: 100%; text-align: center; }
  .proof-bar { gap: 6px; }
  .proof-divider { display: none; }

  /* Main layout — stack on mobile */
  .tracker-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Tracker sidebar goes below chart on mobile */
  .tracker-sidebar {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .sidebar-stats {
    grid-template-columns: repeat(4, 1fr);
    grid-column: 1 / -1;
  }

  .sidebar-picks {
    grid-column: 1 / -1;
  }

  /* Intel widget */
  .intel-trio {
    grid-template-columns: 1fr 1fr;
  }

  .intel-card-zone {
    grid-column: 1 / -1;
  }

  .intel-two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .intel-headline { font-size: 17px; }

  /* 3D graph smaller on mobile */
  #freq-3d-canvas {
    height: 240px !important;
  }

  .intel-3d-section > div[style] {
    height: 240px !important;
  }

  /* Pick generator */
  .pg-strats { gap: 3px; }
  .pg-strat { font-size: 11px; padding: 6px 4px; }

  /* Founder note */
  .founder-note-inner {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Game tabs — scrollable on mobile */
  .game-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .game-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Window tabs */
  .window-tabs { gap: 4px; }
  .window-btn { font-size: 11px; padding: 5px 8px; }

  /* Draws layout */
  .pick-row { flex-wrap: wrap; gap: 6px; }

  /* Remove large max-widths on mobile */
  .hero-inner { max-width: 100%; }
  .main-wrap { padding: 14px 16px; }
}

@media (max-width: 480px) {
  /* Very small screens */
  .intel-trio { grid-template-columns: 1fr; }
  .sidebar-stats { grid-template-columns: repeat(2, 1fr); }
  .intel-big { font-size: 28px; }
  .tracker-controls { gap: 10px; }
}

/* GAME SELECT PROMPT */
.game-select-prompt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.game-select-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: .01em;
}

.game-select-arrow {
  font-size: 15px;
  color: var(--blue);
  animation: bounce-down 1.4s ease-in-out infinite;
  display: inline-block;
  line-height: 1;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

/* BLOG COMING SOON */
.blog-row-soon {
  opacity: 0.55;
}
.blog-title-soon {
  font-size: 16px;
  color: var(--text-secondary);
  cursor: default;
}
.blog-badge-soon {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════
   MOBILE OVERFLOW, GAME TABS & 3D CANVAS FIXES
   - prevent horizontal page scroll
   - wrap game tabs to 2x2 instead of horizontal scroll strip
   - constrain 3D canvas wrapper without fighting Three.js
   - touch-action: none to stop scroll/rotate gesture conflict
═══════════════════════════════════════════════════════ */

/* Prevent the entire page from ever scrolling horizontally on any device */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 768px) {

  /* GAME TABS: wrap to 2x2 grid so all four games are visible at once.
     Overrides the earlier mobile rule that made the tab strip scrollable. */
  .game-tabs {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
  }
  .tab-btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* 3D CANVAS: constrain the WRAPPER element only, not the canvas itself.
     Three.js sets canvas dimensions via inline styles; if we override the
     canvas directly with !important, the renderer's size calculation
     fights our CSS every frame and the scene twitches. By constraining the
     wrapper only, Three.js measures the new available space on resize and
     adjusts cleanly. */
  .intel-3d-section > div[style] {
    width: 100% !important;
    height: 280px !important;
    max-width: 100% !important;
    max-height: 280px !important;
  }

  /* Canvas itself: only enforce maximums so it can't exceed the wrapper,
     but let Three.js set the actual width/height. */
  .intel-3d-section canvas,
  #freq-3d-canvas {
    max-width: 100% !important;
    max-height: 280px !important;
    display: block;
  }

  /* Long headlines wrap instead of pushing the layout wider */
  .intel-headline {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Cards respect their grid cell instead of overflowing */
  .intel-card,
  .intel-freq-section,
  .intel-trend-section,
  .intel-bonus-section,
  .intel-3d-section {
    min-width: 0;
    box-sizing: border-box;
  }

  .stat-value, .intel-big {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* TOUCH GESTURE FIX FOR 3D CANVAS (all viewports)
   Stops Chrome (especially mobile) from interpreting touches on the canvas
   as page-scroll attempts, which were competing with OrbitControls and
   producing the camera twitch you saw. Once touch-action is none on the
   canvas, fingers-on-canvas means "rotate the scene" only, with no
   browser-level scroll interference. */
.intel-3d-section canvas,
#freq-3d-canvas {
  touch-action: none;
}