/* ============================================================
   DIAMOND SLOT — RESPONSIVE STYLESHEET
   plavonstudio.icu
   ============================================================ */

/* ── Breakpoints:
   xl: 1280px
   lg: 1024px
   md: 768px
   sm: 640px
   xs: 480px
   ────────────────────────────────────────────────────────── */

/* ── XL (max 1280px) ────────────────────────────────────── */
@media (max-width: 1280px) {
  :root {
    --container-padding: 28px;
    --font-size-5xl: 4rem;
    --font-size-4xl: 3rem;
  }

  .hero-gem-frame {
    width: 340px;
    height: 340px;
  }

  .hero-gem-icon {
    font-size: 6.5rem;
  }

  .gem-orbit-3 {
    width: 330px;
    height: 330px;
  }
}

/* ── LG (max 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-padding: 24px;
    --font-size-5xl: 3.5rem;
    --font-size-4xl: 2.75rem;
    --space-section: 80px;
  }

  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-3xl);
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 80px;
    min-height: auto;
  }

  .hero-visual {
    order: -1;
  }

  .hero-subtext {
    max-width: 520px;
    margin-inline: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-gem-frame {
    width: 280px;
    height: 280px;
  }

  .hero-gem-icon {
    font-size: 5rem;
  }

  .gem-orbit-1 { width: 200px; height: 200px; }
  .gem-orbit-2 { width: 255px; height: 255px; }
  .gem-orbit-3 { width: 275px; height: 275px; }

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

  .about-teaser-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    text-align: center;
  }

  .about-teaser-visual {
    order: -1;
  }

  .two-col-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .legal-wrapper {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }

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

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

  .rules-content-grid {
    grid-template-columns: 1fr;
  }

  .rules-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

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

/* ── MD (max 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --font-size-5xl: 3rem;
    --font-size-4xl: 2.5rem;
    --font-size-3xl: 2rem;
    --space-section: 64px;
    --space-4xl: 60px;
  }

  .hero-section {
    min-height: auto;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
  }

  .hero-badge {
    font-size: 0.65rem;
  }

  .hero-headline {
    font-size: var(--font-size-4xl);
  }

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

  .feature-card {
    padding: var(--space-xl);
  }

  .responsible-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }

  .rg-tips-grid {
    grid-template-columns: 1fr;
  }

  .support-cards {
    grid-template-columns: 1fr;
  }

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

  .values-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-nav-list {
    align-items: center;
  }

  .page-hero-title {
    font-size: var(--font-size-3xl);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .legal-wrapper {
    gap: var(--space-2xl);
  }

  .info-banner {
    flex-direction: column;
    gap: var(--space-md);
  }

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

  .two-col-grid {
    gap: var(--space-2xl);
  }

  .contact-form-wrapper {
    padding: var(--space-xl);
  }

  .symbol-row {
    grid-template-columns: 36px 1fr 90px;
  }
}

/* ── SM (max 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --container-padding: 16px;
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2.2rem;
    --space-section: 56px;
  }

  .hero-headline {
    font-size: 2.4rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-lg {
    padding: 14px 28px;
  }

  .hero-gem-frame {
    width: 220px;
    height: 220px;
  }

  .hero-gem-icon {
    font-size: 4rem;
  }

  .gem-orbit-1 { width: 160px; height: 160px; }
  .gem-orbit-2 { width: 195px; height: 195px; }
  .gem-orbit-3 { display: none; }

  .about-gem-cluster {
    width: 200px;
    height: 200px;
  }

  .cluster-gem.large { font-size: 3rem; }
  .cluster-gem.medium { font-size: 2rem; right: 20px; top: 10px; }
  .cluster-gem.small { font-size: 1.2rem; right: 30px; bottom: 20px; }
  .cluster-gem.tiny { font-size: 0.8rem; left: 20px; bottom: 40px; }

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

  .page-hero-title {
    font-size: 2rem;
  }

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

  .rules-stat-num {
    font-size: var(--font-size-3xl);
  }

  .rules-overview {
    padding: var(--space-xl);
  }

  .game-frame-inner {
    aspect-ratio: 9 / 16;
    min-height: 480px;
  }

  .rules-cta h2 {
    font-size: var(--font-size-2xl);
  }

  .legal-h2 {
    font-size: var(--font-size-lg);
  }

  .symbol-row {
    grid-template-columns: 30px 1fr 80px;
    font-size: var(--font-size-xs);
    gap: var(--space-sm);
  }

  .toc-list a {
    font-size: var(--font-size-xs);
  }

  .rg-point {
    font-size: var(--font-size-sm);
  }

  .contact-card {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ── XS (max 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-headline {
    font-size: 2rem;
  }

  .hero-gem-frame {
    width: 180px;
    height: 180px;
  }

  .hero-gem-icon {
    font-size: 3.2rem;
  }

  .gem-orbit-1 { width: 130px; height: 130px; }
  .gem-orbit-2 { width: 165px; height: 165px; }

  .mobile-nav-link {
    font-size: var(--font-size-xl);
  }

  .footer-bottom {
    padding-block: var(--space-lg);
  }

  .footer-copy {
    font-size: var(--font-size-xs);
  }
}

/* ── Print Styles ───────────────────────────────────────── */
@media print {
  .site-header,
  .hero-particles,
  .game-section,
  .responsible-banner-section,
  .site-footer .footer-inner {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .legal-content p,
  .legal-list li {
    color: #333;
  }
}
/* ============================================================ */