/* ============================================================ */
/* PlasmaPoker — Extracted from application.html.erb inline      */
/* Animations, utilities, mobile overrides, ticker styles        */
/* ============================================================ */

/* ── Keyframe Animations ──────────────────────────────────────── */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes count-up {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes counter-scroll {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Animation Utility Classes ────────────────────────────────── */
.animate-gradient { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-shimmer { background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.animate-count-up { animation: count-up 0.5s ease-out forwards; }
.animate-counter-scroll { animation: counter-scroll 0.8s ease-out forwards; }

/* ── Animation Delays ─────────────────────────────────────────── */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ── Glass / Neon / 3D Utility Classes ────────────────────────── */
.glass { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass-light { background: rgba(17, 24, 39, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.neon-text { text-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.1); }
.neon-border { box-shadow: 0 0 15px rgba(16, 185, 129, 0.15), inset 0 0 15px rgba(16, 185, 129, 0.05); }
.card-3d { transform-style: preserve-3d; transition: transform 0.3s ease; }
.card-3d:hover { transform: translateY(-4px) rotateX(2deg); }
.feature-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.feature-card:hover { transform: translateY(-2px); border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 20px 40px -12px rgba(16, 185, 129, 0.15); }

/* ── Made in USA Badge ────────────────────────────────────────── */
.made-in-usa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  padding: 8px 0;
}
.made-in-usa__flag {
  font-size: 16px;
}

/* Dropdown CSS is in application.css (asset pipeline) for Turbo compatibility */
.safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ============================================================ */
/* MOBILE RESPONSIVE OVERRIDES (max-width: 768px)               */
/* Does NOT change any desktop styles — only applies on phones   */
/* ============================================================ */
@media (max-width: 768px) {
  /* Safety net: prevent ANY element from causing horizontal scroll */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  * { box-sizing: border-box !important; }

  /* Force all containers to respect viewport */
  .max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* --- Typography scaling for phones --- */
  h1 { font-size: 1.75rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.4rem !important; line-height: 1.2 !important; }

  /* --- Hero sections: tone down enormous text --- */
  .text-5xl, .text-6xl, .text-7xl, .text-8xl {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
  }
  .sm\:text-6xl, .sm\:text-5xl, .lg\:text-8xl, .lg\:text-7xl {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
  }

  /* --- Subheadlines --- */
  .sm\:text-xl, .lg\:text-2xl {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }

  /* --- Hero section --- */
  .min-h-\[90vh\] {
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero content centering */
  .min-h-\[90vh\] .text-center {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Hero background image: center + cover on mobile */
  .min-h-\[90vh\] picture img {
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* --- CTA buttons: compact on mobile --- */
  .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
  .text-lg { font-size: 0.8125rem !important; }

  /* --- Hero CTA row: stack vertically, full width centered --- */
  .sm\:flex-row { flex-direction: column !important; align-items: center !important; }
  .sm\:flex-row > a, .sm\:flex-row > .group {
    width: calc(100% - 2rem) !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }

  /* --- Spacing tighter on mobile --- */
  .mt-12 { margin-top: 1.5rem !important; }
  .mt-8 { margin-top: 1rem !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .lg\:py-32 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .gap-4 { gap: 0.75rem !important; }
  .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

  /* --- Hide less important elements on small phones --- */
  .sm\:flex-row .text-xs.text-gray-500 { display: none !important; }
  #hero-cta .text-xs { display: none !important; } /* hide RECOMMENDED badge */

  /* --- Player count bar: compact --- */
  .mb-4.animate-fade-in-up .text-sm { font-size: 0.75rem !important; }
  .mb-8.animate-fade-in-up { margin-bottom: 0.5rem !important; }
  .mb-8.animate-fade-in-up .text-sm { font-size: 0.7rem !important; }
  .mb-8.animate-fade-in-up .text-lg { font-size: 0.875rem !important; }

  /* --- SVG icons in CTA buttons: smaller --- */
  .sm\:flex-row svg.w-6 { width: 1.125rem !important; height: 1.125rem !important; }
  .sm\:flex-row svg.w-5 { width: 1rem !important; height: 1rem !important; display: none !important; }

  /* --- Download progress bar: make steps smaller --- */
  #download-progress .flex {
    gap: 0.25rem;
  }
  #download-progress .w-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.625rem !important;
  }
  #download-progress span.text-sm {
    font-size: 0.625rem !important;
  }

  /* --- Stats bar (homepage 8-column grid): 2x4 on mobile --- */
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .lg\:grid-cols-8 .text-3xl {
    font-size: 1.25rem !important;
  }

  /* --- Login streak 7-day grid: scroll or 4+3 wrap --- */
  .grid-cols-7 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.375rem !important;
  }
  .grid-cols-7 .text-sm, .grid-cols-7 .sm\:text-base {
    font-size: 0.625rem !important;
  }
  .grid-cols-7 .text-xs {
    font-size: 0.5625rem !important;
  }
  .grid-cols-7 > div {
    padding: 0.375rem !important;
  }

  /* --- Slot grid on homepage (6-col): 2 columns on mobile --- */
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Slot grid on slots page (4-col): 2 columns on mobile --- */
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Feature grids (4-col): single column on mobile --- */
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* --- 5-column grids (stakes): 2 columns --- */
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Rush comparison table: tighter padding --- */
  .grid-cols-3 .p-4 {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }

  /* --- System requirements: stack labels/values --- */
  .flex.justify-between {
    flex-wrap: wrap;
  }

  /* --- Scarcity banner text: wrap properly --- */
  #scarcity-banner p { white-space: normal !important; }
  #scarcity-banner .hidden.sm\:inline { display: inline !important; }

  /* --- Activity ticker: ensure no overflow --- */
  #activity-feed { overflow: hidden !important; }

  /* --- Sweepstakes / SC banner: stack on mobile --- */
  .sm\:flex-row { flex-direction: column !important; }
  .sm\:p-8 { padding: 1rem !important; }

  /* --- Images: never wider than viewport --- */
  img { max-width: 100% !important; height: auto !important; }

  /* --- Decorative blobs: hide on mobile to prevent overflow --- */
  .w-\[800px\], .w-\[1000px\], .w-\[600px\], .w-\[400px\], .w-\[300px\] {
    display: none !important;
  }

  /* --- Large padding sections: reduce --- */
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .lg\:py-28, .lg\:py-32 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .lg\:p-12 { padding: 1.5rem !important; }

  /* --- Max-width containers: add side padding --- */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Footer grid: single column on mobile --- */
  footer .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* --- Footer bottom bar: stack items vertically --- */
  footer .flex.flex-col.items-center .flex.items-center.space-x-4 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  /* --- Nav right side: tighter spacing --- */
  nav .flex.items-center.space-x-3 {
    gap: 0.375rem;
  }
  nav .flex.items-center.space-x-3 > * + * {
    margin-left: 0.375rem;
  }

  /* --- Balance display in nav: smaller --- */
  nav .hidden.sm\:flex {
    display: none !important;
  }

  /* --- Promotions page: referral 10% number smaller --- */
  .text-6xl {
    font-size: 3rem !important;
  }

  /* --- PLO variant comparison cards: reduce padding --- */
  .card-3d.glass .text-5xl {
    font-size: 2.5rem !important;
  }

  /* --- Announcement bar: wrap text --- */
  .bg-gradient-to-r.from-emerald-600 .relative {
    white-space: normal;
    line-height: 1.4;
  }

  /* --- Anti-bot metrics: hide description on mobile (too wide) --- */
  section .flex.items-center.justify-between > .text-xs.text-gray-500:last-child {
    display: none;
  }

  /* --- Platform stats card: smaller numbers on mobile --- */
  .text-4xl {
    font-size: 1.75rem !important;
  }

  /* --- Comparison table: ensure horizontal scroll container works --- */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* --- "Joined today" and social proof counters: wrap --- */
  .flex.items-center.justify-center.gap-2 {
    flex-wrap: wrap;
    text-align: center;
  }

  /* --- Sticky mobile bottom CTA: proper spacing --- */
  #sticky-mobile-cta {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Blog footer links: wrap --- */
  footer ul { word-break: break-word; }

  /* --- Pre/code blocks: prevent overflow --- */
  code, pre { word-break: break-all; overflow-wrap: break-word; }

  /* --- Feature pills / badges row: wrap --- */
  .flex-wrap { flex-wrap: wrap !important; }
  .flex.items-center.gap-3 { flex-wrap: wrap; }
  .flex.items-center.justify-center.gap-3 { flex-wrap: wrap; }

  /* --- Two-column grids in about page: single column --- */
  .lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* --- Timeline (about page): left-aligned on mobile --- */
  .md\:left-1\/2 { left: 1rem !important; }
  .md\:-translate-x-1\.5 { transform: translateX(-6px) !important; }
  .md\:flex-row-reverse { flex-direction: row !important; }
  .md\:w-1\/2 { width: 100% !important; }
  .md\:pr-12, .md\:pl-12 { padding-left: 0 !important; padding-right: 0 !important; }
  .md\:text-right { text-align: left !important; }

  /* --- Ensure quiz/poker personality page doesn't overflow --- */
  .prose { max-width: 100% !important; overflow-wrap: break-word; }

  /* --- Hash example text: break long strings --- */
  .break-all { word-break: break-all !important; }
}

/* Extra small phones (under 375px) */
@media (max-width: 374px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }

  .grid-cols-7 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid-cols-2 {
    gap: 0.5rem !important;
  }

  /* Even tighter padding */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ── Activity Ticker ──────────────────────────────────────────── */
.animate-ticker {
  animation: ticker-scroll 60s linear infinite;
}
.animate-ticker:hover {
  animation-play-state: paused;
}
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 12px;
  margin-right: 6px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  cursor: default;
  border: 1px solid transparent;
}
.ticker-pill:hover {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.ticker-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ticker-pill .pill-text {
  color: rgba(209,213,219,0.8);
}
.ticker-pill .pill-highlight {
  font-weight: 600;
}
.ticker-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  color: rgba(75,85,99,0.4);
  font-size: 10px;
  flex-shrink: 0;
}

/* Event type accents */
.ticker-pill--slot .pill-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.ticker-pill--slot .pill-highlight { color: #fbbf24; }
.ticker-pill--join .pill-dot { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.4); }
.ticker-pill--join .pill-highlight { color: #34d399; }
.ticker-pill--tournament .pill-dot { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.4); }
.ticker-pill--tournament .pill-highlight { color: #67e8f9; }
.ticker-pill--hand .pill-dot { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.4); }
.ticker-pill--hand .pill-highlight { color: #c4b5fd; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ── Navbar dropdowns ─────────────────────────────────────────── */
/* Hidden by default, shown on hover via parent wrapper ID */
#games-menu,
#features-menu {
  display: none !important;
}
#nav-games-dd:hover > #games-menu,
#nav-features-dd:hover > #features-menu {
  display: block !important;
}