/* ============================================================
   MOBILE FIXES — LotoRadar
   Target: 375px (iPhone 13), breakpoint: 768px
   Rule: ALL interactive elements min-height 44px on mobile
   Version: 20260409
   ============================================================ */

/* ── 1. GLOBAL OVERFLOW FIX ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── 2. NAVBAR RESPONSIVE ── */
@media (max-width: 768px) {
  nav {
    padding: 10px 16px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Hide slogan "STATISTICI LIVE LOTERII & KENO" — NU logo-icon */
  .logo-wrap > div:not(.logo-text):not(.logo-icon) {
    display: none !important;
  }
  .logo-wrap > svg, .logo-wrap > .logo-text, .logo-wrap > .logo-icon {
    display: block !important;
  }
  .logo-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
  .logo-wrap {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 1;
    min-width: 0;
    max-width: calc(100vw - 80px);
    overflow: hidden;
    min-height: 44px !important;
    height: 44px !important;
    align-items: center !important;
  }
  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
  }
  .logo-text {
    font-size: 1rem !important;
    white-space: nowrap;
    line-height: 44px !important;
  }
  /* Nav itself min-height */
  nav {
    min-height: 56px !important;
  }

  /* Hide nav-center (moved to hamburger) */
  .nav-center {
    display: none !important;
  }

  /* Hide nav-right (moved to hamburger) */
  .nav-right {
    display: none !important;
  }

  /* Show hamburger button */
  .hamburger-btn {
    display: flex !important;
  }
}

/* Hamburger button */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 6px;
  color: #00ff88;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  padding: 0;
  font-family: system-ui, sans-serif;
}
.hamburger-btn:active {
  background: rgba(0,255,136,0.15);
}
.hamburger-btn.open {
  color: #ff1744;
  border-color: rgba(255,23,68,0.4);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5,8,15,0.97);
  z-index: 9999;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu-overlay.open {
  display: flex;
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 65px;
  flex-shrink: 0;
}
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(255,23,68,0.3);
  border-radius: 6px;
  color: #ff1744;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  font-family: system-ui, sans-serif;
  line-height: 1;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex: 1;
}
.mobile-menu-links a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all 0.2s;
}
.mobile-menu-links a:active,
.mobile-menu-links a:hover {
  background: rgba(0,255,136,0.05);
  color: #00ff88;
}
.mobile-menu-links a.mm-accent {
  color: #00ff88;
  font-weight: 700;
}
.mobile-menu-links a.mm-red {
  color: #ff1744;
  font-weight: 700;
}
.mobile-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 24px;
}
.mobile-menu-bottom {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.mobile-menu-bottom .mm-lang-btn {
  min-width: 52px;
  min-height: 44px;
  padding: 8px 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-bottom .mm-lang-btn.active {
  background: #00ff88;
  color: #000;
  border-color: #00ff88;
}
.mobile-menu-bottom .mm-login-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background: #00ff88;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 3. TAB-URI DASHBOARD D1 ── */
@media (max-width: 768px) {
  .tabs-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 8px !important;
    gap: 0 !important;
    /* Fade gradient on right edge */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.04em !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .tab-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
  }
}

/* ── 4. SIMULATOR STRATEGY TABS ── */
@media (max-width: 768px) {
  .strat-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 6px !important;
    padding-bottom: 4px;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    /* Fade gradient */
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
  .strat-tabs::-webkit-scrollbar {
    display: none;
  }
  .strat-tab {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Size filter buttons */
  .size-filter {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 6px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .size-filter::-webkit-scrollbar {
    display: none;
  }
  .size-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.6rem !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── 5. ALL INTERACTIVE ELEMENTS ── min 44px */
@media (max-width: 768px) {
  /* Language buttons */
  .lang-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Login button */
  .btn-login {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Footer links */
  .footer-links {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .footer-links a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    font-size: 0.6rem !important;
  }

  /* Cookie consent buttons */
  .ck-accept, .ck-reject {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 0.65rem !important;
  }

  /* Close buttons (various panels) */
  .lrpp-close,
  .d2-prof-close,
  .d2-det-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Smart Generator buttons */
  .gen-btn, .sg-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Lock buttons (premium) */
  .lock-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Window toggle buttons (TOTAL/LAST 50) */
  .wt-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.6rem !important;
  }

  /* Responsible play link in banner — target ALL banner links */
  .disclaimer-banner a,
  [style*="background:rgba(255,215,0"] a,
  [style*="background:rgba(0,212,255"] a,
  body > div:first-child a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }

  /* ALL footer links including legal */
  footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }

  /* Legal footer specific — responsible play, ONJN, GamCare etc */
  .legal-footer-disclaimer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 6px !important;
  }

  /* Window toggle container */
  .window-toggle {
    display: flex !important;
    gap: 8px !important;
  }

  /* Smart Generator trigger button */
  [onclick*="openSmartGen"],
  [onclick*="sgOpen"],
  [onclick*="smartGen"],
  .smart-gen-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* SG modal buttons */
  .sg-btn-gen, .sg-btn-close {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Community username links in table */
  .lb-table a,
  .lb-table .lb-username {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ANY remaining close/dismiss button */
  button[onclick*="close"],
  button[onclick*="dismiss"],
  [class*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Cookie banner close */
  .cookie-banner button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Window toggle buttons (inline-styled, IDs: wt-total, wt-50) */
  #wt-total, #wt-50 {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Smart Generator button (inline styled with onclick="sgOpen_*") */
  button[onclick^="sgOpen"] {
    min-height: 44px !important;
    padding: 10px 20px !important;
  }

  /* Smart Generator modal close */
  .sg-overlay button,
  #sg-modal button,
  div[id^="sg-"] button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Legal disclaimer footer links (ONJN, GamCare, etc.) */
  .legal-footer-disclaimer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 6px !important;
  }

  /* ALL links in footer area */
  footer a,
  .footer-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Community leaderboard username links */
  .lb-table td a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .lb-table td {
    vertical-align: middle !important;
  }

  /* Disclaimer top bar link — make whole line tappable */
  #legal-disclaimer-bar {
    padding: 6px 12px !important;
  }
  #legal-disclaimer-bar a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px !important;
  }

  /* Sim legal notice links (inside footer on sim pages) */
  .sim-legal a,
  .legal-notice a,
  div[style*="legal"] a,
  p a[href*="responsible"],
  p a[href*="gamcare"],
  p a[href*="onjn"],
  p a[href*="gambling"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 4px !important;
  }
}

/* ── 6. COMMUNITY LEADERBOARD ── */
@media (max-width: 768px) {
  /* Main tabs */
  .main-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .main-tabs::-webkit-scrollbar {
    display: none;
  }
  .main-tab {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.6rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Leaderboard filter buttons */
  .lb-filter {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    display: flex !important;
    padding-bottom: 4px;
    max-width: calc(100vw - 16px) !important;
  }
  .lb-filter::-webkit-scrollbar {
    display: none;
  }
  .lb-filter-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Leaderboard table */
  .tab-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 8px !important;
  }
  .lb-table {
    font-size: 0.65rem !important;
    min-width: 480px;
  }
  .lb-table th,
  .lb-table td {
    padding: 10px 8px !important;
  }
}

/* ── 7. COLLECTION FILTERS ── */
@media (max-width: 768px) {
  .filter-section {
    padding: 0 12px !important;
  }
  .filter-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 4px !important;
    padding-bottom: 4px;
    max-width: calc(100vw - 24px) !important;
  }
  .filter-row::-webkit-scrollbar {
    display: none;
  }
  .filter-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 0.5rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .filter-label {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    font-size: 0.5rem !important;
  }
}

/* ── 8. TABLES OVERFLOW ── */
@media (max-width: 768px) {
  .stats-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  .stats-table,
  .history-table {
    font-size: 0.6rem !important;
    min-width: 360px;
  }
  .stats-table th,
  .stats-table td,
  .history-table th,
  .history-table td {
    padding: 8px 6px !important;
    font-size: 0.55rem !important;
  }
}

/* ── 9. TOOLTIPS ON MOBILE ── */
@media (max-width: 768px) {
  .heat-tooltip {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    bottom: 80px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 32px) !important;
    width: auto !important;
    z-index: 10000 !important;
  }
}

/* ── 10. GENERAL MOBILE FIXES ── */
@media (max-width: 768px) {
  /* Constrain all major containers */
  .hero, .section, .tab-content, footer,
  .sim-header, .countdown-box,
  .pb-sim-section {
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* Sim-section needs special handling: constrain width but allow child scroll */
  .sim-section {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Wrapper for strat-tabs to enable scrolling */
  .sim-section > .strat-tabs,
  .sim-section > .size-filter {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Content padding */
  .tab-content {
    padding: 16px 12px 50px !important;
  }

  /* Index page glow — no overflow */
  .glow-center {
    display: none !important;
  }

  /* Profile panel — full width */
  .d2-profile-panel,
  .d2-details-panel,
  #lr-profile-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Balls — don't overflow */
  .hero-balls {
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 0 8px;
  }

  /* Heatmap and grids */
  .freq-grid, .heat-grid, .volcano-grid,
  .decade-grid, .hm-grid {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Disclaimer banner — top legal bar */
  #legal-disclaimer-bar {
    font-size: 0.6rem !important;
    padding: 8px 12px !important;
    line-height: 1.5 !important;
  }
  #legal-disclaimer-bar a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
  }

  /* Card collection grid — already 2 cols, ensure padding */
  .collection-grid {
    padding: 12px !important;
    gap: 10px !important;
  }

  /* Album category cards */
  .album-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .album-cat-card {
    min-height: 120px !important;
    padding: 20px 16px !important;
  }

  /* Combo tabs scroll */
  .combo-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .combo-tab {
    min-height: 44px !important;
  }

  /* Cards table */
  .cards-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .cards-table {
    font-size: 0.6rem !important;
  }
  .cards-table .hide-mobile {
    display: none !important;
  }

  /* Legend grid on mobile */
  .legend-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Back button touch target */
  .back-btn {
    min-height: 44px !important;
  }

  /* Pagination buttons */
  .page-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Card expand */
  .card-expand-inner {
    flex-direction: column !important;
    align-items: center !important;
  }
  .card-expand-visual {
    width: 200px !important;
  }
  .card-expand-btns button {
    min-height: 44px !important;
  }

  /* Chat container */
  .chat-container {
    max-width: 100vw !important;
  }

  /* Legal footer */
  .legal-footer-disclaimer {
    padding: 12px !important;
    font-size: 0.55rem !important;
  }
  .legal-footer-disclaimer p a,
  .legal-footer-disclaimer a,
  .footer-disclaimer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }

  /* Index — lottery cards grid */
  .lottery-grid {
    padding: 0 12px !important;
  }

  /* Canvas backgrounds */
  #radar-canvas {
    opacity: 0.3;
  }

  /* Sim card sets on mobile */
  .sim-card {
    padding: 10px !important;
  }
  .sim-card .set-balls .ball {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.55rem !important;
  }

  /* Cookie banner */
  .cookie-banner {
    padding: 12px !important;
    gap: 8px !important;
  }
  .cookie-banner a,
  #cookie-banner a,
  .ck-text a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }

  /* Joc Responsabil inline links (not in .legal-footer-disclaimer) */
  a[href*="responsible"],
  a[href*="responsabil"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 4px !important;
  }

  /* Smart Generator buttons — force 44px even with border-box */
  .sg-btn {
    min-height: 44px !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
  }

  /* Mobile menu overlay legal links */
  .mobile-menu-links a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Loading spinner login link (collection) */
  .loading-spinner a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }
}

/* ── 11. FONT SIZE MINIMUMS ── */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.4;
  }
  /* Ensure nothing below 11px */
  .footer-motto,
  .hero-note,
  .info-note,
  .legal-text {
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
  }
}

/* ── 12. POWERBALL D2 ON MOBILE ── */
@media (max-width: 768px) {
  .d2-two-columns {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .d2-tabs-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .d2-tabs-row::-webkit-scrollbar {
    display: none;
  }
  .d2-tab {
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
}

/* ── 13. UCW CARD WIDGET ── */
@media (max-width: 768px) {
  .user-card-widget {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .ucw-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ═══ Faza 6: Number, Replay, Versus, Digest ═══ */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cond-grid { grid-template-columns: 1fr !important; }
  .hero-ball { width: 90px !important; height: 90px !important; font-size: 32px !important; }
  .nav-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 3px !important; }
  .nav-ball { font-size: 10px !important; }
  .chain-ball { min-width: 34px !important; height: 34px !important; font-size: 11px !important; }
  .chain-arrow { font-size: 9px !important; padding: 0 2px !important; }
  .replay-ball { width: 42px !important; height: 42px !important; font-size: 13px !important; }
  .stats-box { grid-template-columns: repeat(2, 1fr) !important; }
  .players-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .vs-badge { font-size: 24px !important; }
  .comp-row { grid-template-columns: 1fr 60px 1fr !important; }
  .comp-cell { font-size: 13px !important; padding: 10px 8px !important; }
  .digest-stats { grid-template-columns: 1fr 1fr !important; }
  .share-btn { min-height: 44px !important; }
  .challenge-input { min-height: 44px !important; width: 140px !important; }
  .challenge-btn { min-height: 44px !important; }
  .play-btn { min-height: 44px !important; min-width: 44px !important; }
  .nav-draw-btn { min-height: 44px !important; }
  .digest-nav-btn { min-height: 44px !important; }
  .partner-ball { min-height: 44px !important; }
  .back-link { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
}

/* ── 14. LOTTERY ANALYTICS — readability + chart containment ── */
/* LR_MOBILE_V14_v20260521 — extends section 3 + 10 for analytics pages */
@media (max-width: 768px) {
  /* Tab buttons: bump from 0.5rem to 0.72rem for readability */
  .tab-btn {
    font-size: 0.72rem !important;
    padding: 10px 11px !important;
  }
  .tab-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Inline tiny fonts: bump anything under 0.5rem to 0.65rem */
  [style*="font-size:0.38rem"],
  [style*="font-size:0.4rem"],
  [style*="font-size: 0.4rem"],
  [style*="font-size:0.42rem"],
  [style*="font-size:0.43rem"],
  [style*="font-size:0.45rem"],
  [style*="font-size:0.48rem"] {
    font-size: 0.72rem !important;
  }

  /* Chart elements that overflow on mobile (BUG-grecia 495 off-screen) */
  /* Heatmap cells: clamp width + wrap parent */
  .heat-grid, .freq-grid, .decade-grid, .hm-grid, .volcano-grid,
  .triples-grid, .pairs-grid, .pairs-matrix, .pair-detail,
  .pos-grid, .stars-grid, .star-grid {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .heat-cell, .heat-num, .heat-count, .heat-trend, .heat-bar {
    min-width: 0 !important;
  }
  .heat-num { font-size: 0.78rem !important; }
  .heat-count, .heat-trend { font-size: 0.7rem !important; }

  /* Gap chart bars: containment instead of off-screen */
  .gap-chart, .gap-bar-row {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .gap-bar-wrap {
    min-width: 0 !important;
  }
  .gap-num, .gap-bar { font-size: 0.72rem !important; }

  /* Multi-column inline grids: collapse to 2 cols at <600 */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:repeat(7"],
  [style*="grid-template-columns:repeat(8"],
  [style*="grid-template-columns:repeat(9"],
  [style*="grid-template-columns:repeat(10"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Tables in analytics pages — horizontal scroll containment */
  .panel table,
  .tab-content table,
  .history-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .panel table th,
  .panel table td,
  .history-table th,
  .history-table td { white-space: nowrap; }

  /* Generic chart containers — make sure they don't push wider than viewport */
  .chart-row, .chart-cell, .stat-row, .metric-row {
    min-width: 0 !important;
  }
}

/* Ultra-narrow: 360px and below */
@media (max-width: 360px) {
  .tab-btn { font-size: 0.6rem !important; padding: 8px 9px !important; }
  .panel { padding-left: 8px !important; padding-right: 8px !important; }
  [style*="font-size:0.38rem"],
  [style*="font-size:0.4rem"],
  [style*="font-size: 0.4rem"],
  [style*="font-size:0.42rem"],
  [style*="font-size:0.43rem"],
  [style*="font-size:0.45rem"],
  [style*="font-size:0.48rem"] { font-size: 0.6rem !important; }
}