/* ==========================================================================
   CARRIBBEAN SLOT — RESPONSIVE.CSS
   Mobile-first responsive overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP (>1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .hero__headline {
    font-size: 4.4rem;
  }

  .section-title {
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   TABLET LANDSCAPE (max 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --container-pad-desktop: 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__inner {
    gap: var(--space-lg);
  }

  .nav-list {
    gap: var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   TABLET (max 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-2xl: 80px;
    --space-3xl: 100px;
  }

  /* Hide nav, show toggle */
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-xl);
  }

  .hero__content {
    order: 1;
  }

  .hero__visual {
    order: 0;
  }

  .hero__desc {
    margin-inline: auto;
  }

  .hero__ctas {
    justify-content: center;
  }

  /* About */
  .about-story__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Steps */
  .steps-flow {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .step-connector {
    transform: rotate(90deg);
    width: 40px;
    padding-top: 0;
    padding-inline: 0;
    height: 40px;
    align-items: center;
    justify-content: center;
  }

  /* Game */
  .game-world__ambient {
    display: none;
  }

  /* RG Grid */
  .rg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Resources */
  .resources-grid {
    grid-template-columns: repeat(1, 1fr);
    max-width: 500px;
    margin-inline: auto;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   TABLET PORTRAIT (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 60px;
    --space-3xl: 80px;
  }

  .container {
    padding-inline: var(--container-pad-tablet);
  }

  /* Section headers */
  .section-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  /* Trust bar */
  .trust-divider {
    display: none;
  }

  .trust-bar__inner {
    justify-content: flex-start;
    gap: var(--space-sm);
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* RG */
  .rg-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .rg-intro-panel {
    flex-direction: column;
    text-align: center;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    text-align: center;
  }

  /* Game meta */
  .game-meta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  /* CTA Banner */
  .cta-banner__inner {
    padding: var(--space-xl) var(--space-md);
  }

  /* Legal blocks */
  .legal-block {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .rules-disclaimer {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Mission */
  .mission-panel {
    padding: var(--space-xl) var(--space-md);
  }

  /* Page hero */
  .page-hero {
    padding-top: calc(var(--space-xl) + 30px);
    padding-bottom: var(--space-xl);
  }

  /* About */
  .about-story {
    padding-block: var(--space-xl);
  }

  /* Rules */
  .rules-block__header,
  .rules-block__body {
    padding-inline: var(--space-md);
  }

  .rule-item {
    gap: var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   MOBILE (max 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --space-2xl: 48px;
    --space-3xl: 60px;
  }

  .container {
    padding-inline: var(--container-pad-mobile);
  }

  /* Logo */
  .logo-text {
    font-size: 1.05rem;
  }

  /* Hero */
  .hero {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .hero__headline {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
    text-align: center;
  }

  /* Island scene */
  .island-scene {
    max-width: 300px;
  }

  .slot-preview__reels {
    gap: var(--space-xs);
  }

  .reel {
    padding: var(--space-sm) 10px;
  }

  .reel-symbol {
    font-size: 1.4rem;
  }

  /* Steps */
  .step-item {
    padding: var(--space-sm);
  }

  /* Buttons */
  .btn--xl {
    padding: 15px 30px;
    font-size: 0.95rem;
  }

  /* Game frame */
  .game-frame {
    aspect-ratio: 4 / 3;
  }

  .game-frame-corner {
    display: none;
  }

  /* Contact */
  .contact-form-card {
    padding: var(--space-md);
  }

  /* Trust bar */
  .trust-bar__inner {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .trust-item {
    justify-content: center;
  }

  /* Page hero */
  .page-hero__title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  /* Footer */
  .footer-logo {
    font-size: 1rem;
  }

  /* CTA */
  .cta-banner__title {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER ALWAYS READY (shown via JS class)
   -------------------------------------------------------------------------- */
.mobile-drawer {
  display: none;
}

.mobile-drawer.open {
  display: block;
}

/* --------------------------------------------------------------------------
   PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .ambient-ocean,
  .particles-container,
  .site-footer,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .legal-block,
  .rules-block {
    border: 1px solid #ccc;
    background: white;
  }

  .legal-block__title,
  .rules-block__title,
  .section-title {
    color: black;
  }

  p, li {
    color: #333;
  }
}