/*
 * Mobile layout hardening — 2026-08-17
 * Direction: trust-first card-room utility.
 * Keeps each site's brand while improving readability, touch targets and responsive safety.
 */

:root {
  --mobile-gutter: clamp(1rem, 4.5vw, 1.5rem);
  --mobile-tap-target: 44px;
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

main,
section,
article,
aside,
header,
footer,
nav,
.container,
.shell,
.card,
.feature-card,
.blog-card {
  min-width: 0;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
li,
a,
td,
th {
  overflow-wrap: break-word;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

button,
input,
select,
textarea,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
[role="button"],
.mobile-toggle,
.mobile-menu-toggle,
.nav-toggle,
.menu-toggle,
.header-bar {
  min-width: var(--mobile-tap-target);
  min-height: var(--mobile-tap-target);
}

nav a,
a[class*="btn"],
a[class*="button"],
a[class*="cta"],
.download-btn,
.header-action,
.flash-header-action {
  min-height: var(--mobile-tap-target);
  align-items: center;
  justify-content: center;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  button,
  a[class*="btn"],
  a[class*="button"],
  a[class*="cta"] {
    transition-property: filter, box-shadow, border-color, color, background-color;
    transition-duration: 180ms;
    transition-timing-function: ease-out;
  }

  button:hover,
  a[class*="btn"]:hover,
  a[class*="button"]:hover,
  a[class*="cta"]:hover {
    filter: brightness(1.08);
  }
}

@media (max-width: 900px) {
  .nav-wrap,
  .nav-inner,
  .nav-container,
  .header-inner,
  .header-content,
  .header-holder,
  .header-primary,
  .header-wrapper {
    max-width: 100%;
    min-width: 0;
  }

  .nav-wrap,
  .site-header,
  header {
    width: 100%;
  }

  .logo,
  .brand,
  .site-logo,
  .logo-link {
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  .logo-txt,
  .logo-text,
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-toggle,
  .mobile-menu-toggle,
  .nav-toggle,
  .menu-toggle,
  .header-bar {
    flex: 0 0 var(--mobile-tap-target);
    padding: 0.625rem;
  }

  .mobile-menu,
  .nav-menu,
  .nav-links,
  .casino-nav,
  .royal-nav,
  .app-nav,
  .ak47-nav,
  .main-nav,
  .flash-nav {
    max-width: 100vw;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.62;
  }

  .container,
  .shell {
    width: 100%;
    max-width: 100%;
    padding-right: var(--mobile-gutter);
    padding-left: var(--mobile-gutter);
  }

  h1,
  .hero-title,
  .post-title,
  .page-title,
  .download-title {
    max-width: 100%;
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h2,
  .section-title {
    max-width: 100%;
    font-size: clamp(1.5rem, 7vw, 2.15rem) !important;
    line-height: 1.18 !important;
    text-wrap: balance;
  }

  main p,
  main li,
  section p,
  section li,
  article p,
  article li {
    font-size: max(0.9375rem, 1em) !important;
  }

  .hero-grid,
  .hero-layout,
  .hero-split,
  .index-grid-2,
  .layout-aside,
  .download-layout,
  .post-layout,
  .blog-layout,
  .content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 7vw, 2.5rem) !important;
  }

  .hero,
  .jackpot-hero,
  .king-hero,
  .download-hero,
  .hero-centre {
    min-height: auto !important;
    padding-top: clamp(2.75rem, 10vw, 5rem) !important;
    padding-bottom: clamp(2.75rem, 10vw, 5rem) !important;
  }

  .hero-content,
  .hero-copy,
  .download-copy,
  .post-content,
  .download-card,
  article[style] {
    max-width: 100%;
    min-width: 0;
  }

  .post-content,
  .download-card,
  [style*="padding: 5rem 3rem"],
  [style*="padding: 50px"] {
    padding: clamp(1.25rem, 6vw, 2rem) !important;
  }

  .features-grid,
  .games-grid,
  .tournaments-grid,
  .testimonials-grid,
  .tiers-grid,
  .rewards-grid,
  .support-features,
  .blog-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .stats-grid,
  .hero-stats,
  .royal-stats,
  .wild-cards-grid,
  .download-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .stats-grid > *,
  .hero-stats > *,
  .royal-stats > *,
  .wild-cards-grid > *,
  .download-specs > * {
    min-width: 0;
  }

  .stat-item h3,
  .hero-stats strong,
  .royal-stats strong {
    font-size: clamp(1.5rem, 8vw, 2.25rem) !important;
  }

  body footer > .container > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }

  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }

  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  table,
  .comparison-table,
  .verify-table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .screenshot-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .vip-badge-overlay {
    right: 0.5rem !important;
    max-width: calc(100% - 1rem);
  }

  .row {
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .row > * {
    min-width: 0;
  }

  .nav-wrap,
  .global-cta-bar,
  .floating-cta {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .global-cta-bar,
  .floating-cta {
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
  }

  .global-cta-bar > *,
  .floating-cta > * {
    max-width: min(100%, 32rem);
  }

  a[style*="position: fixed"][style*="bottom"] {
    right: 1rem !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    max-width: calc(100vw - 2rem) !important;
    min-height: var(--mobile-tap-target);
    padding: 0.75rem 1rem !important;
    white-space: normal !important;
    text-align: center;
  }

  body:has(.global-cta-bar),
  body:has(.floating-cta),
  body:has(a[style*="position: fixed"][style*="bottom"]) {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }

  [id] {
    scroll-margin-top: 5.5rem;
  }
}

@media (max-width: 420px) {
  .header-cta,
  .nav-cta,
  .flash-header-action {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }

  footer .container,
  .legal .container,
  .post-section .container,
  .blog-section .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}