/* ============================================================
   CLOCKWORK PUPPIES — SHARED MOBILE/RESPONSIVE LAYER
   v45 — Applied to all pages via <link rel="stylesheet" href="mobile.css">
   
   Breakpoints:
     - Default (mobile-first base)
     - 481px+   small tablet / large phone landscape
     - 769px+   tablet
     - 1025px+  desktop
   
   Philosophy: This file is mobile-first patches. It overrides
   per-page CSS where mobile needs different behavior. Per-page
   CSS for desktop layouts stays untouched.
   ============================================================ */

/* ---------- UNIVERSAL BASELINE ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Allow tap targets to feel native */
button, a, .nav-cta, .btn-primary, .btn-outline {
  touch-action: manipulation;
}

/* ---------- MOBILE-ONLY (≤768px) ---------- */
@media (max-width: 768px) {

  /* TYPOGRAPHY — fluid scaling */
  body {
    font-size: 15px;
    line-height: 1.55;
  }

  h1, h2, h3 {
    word-break: break-word;
    hyphens: auto;
  }

  /* TAP TARGETS — Apple HIG minimum 44px */
  button, .nav-cta, .btn-primary, .btn-outline,
  a.nav-cta, input[type="submit"], input[type="button"] {
    min-height: 44px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* FORMS — prevent iOS zoom on focus (must be 16px+) */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* SECTION PADDING — universal tighten */
  section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* CONTAINERS — prevent overflow */
  .inner, .container, [class*="-grid"], [class*="-layout"] {
    max-width: 100%;
  }

  /* IMAGES — never break layout */
  img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
  }

  /* CANVAS — game canvases keep aspect, scale down */
  canvas[id*="game"], canvas[id*="board"], canvas[id*="Canvas"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* TABLES — horizontal scroll if needed */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }

  /* MODALS — fit screen */
  .modal, [class*="modal"], [id*="modal"] {
    max-width: 92vw !important;
    max-height: 90vh !important;
    overflow-y: auto;
  }

  /* FLOATING WIDGETS — Purdy + Rewards
     Default desktop is 1.5rem offset; mobile gets tighter
     and the panels are constrained to viewport width. */
  #cw-widget {
    bottom: 1rem !important;
    right: 1rem !important;
  }
  #purdy-widget {
    bottom: 1rem !important;
    left: 1rem !important;
  }
  #cw-panel {
    width: calc(100vw - 2rem) !important;
    max-width: 320px !important;
    right: 0 !important;
  }
  #purdy-panel {
    width: calc(100vw - 2rem) !important;
    max-width: 340px !important;
    left: 0 !important;
  }

  /* NAV — universal mobile padding (safe for all pages) */
  nav {
    padding: 0.85rem 1.25rem !important;
  }

  /* HAMBURGER PATTERN — opt-in only.
     Pages that want a flyout menu add `class="has-hamburger"` to <nav>
     and include both a .nav-hamburger button and a .nav-links list.
     This avoids breaking pages that use .nav-links as a simple flex strip. */
  nav.has-hamburger .nav-hamburger {
    display: flex !important;
  }
  nav.has-hamburger .nav-links {
    display: none;
  }
  nav.has-hamburger .nav-links.open {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    list-style: none;
    position: fixed;
    inset: 0;
    top: 56px;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2rem 1.5rem;
    z-index: 999;
    border-top: 1px solid rgba(201,168,76,0.15);
    overflow-y: auto;
  }
  nav.has-hamburger .nav-links.open li {
    border-bottom: 1px solid rgba(201,168,76,0.06);
    list-style: none;
  }
  nav.has-hamburger .nav-links.open a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    letter-spacing: 0.2em;
  }

  /* For pages WITHOUT hamburger: let .nav-links wrap and shrink instead of overflow */
  nav:not(.has-hamburger) .nav-links {
    flex-wrap: wrap;
    gap: 0.6rem !important;
    justify-content: flex-end;
  }
  nav:not(.has-hamburger) .nav-links a,
  nav:not(.has-hamburger) .nav-link {
    font-size: 0.7rem !important;
  }

  /* GRID — collapse multi-column to single column by default */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Arcade preview cards (index.html) — reduce padding when stacked */
  .arcade-preview-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .arcade-preview-card,
  .arcade-preview-grid > div {
    padding: 1.75rem 1.5rem !important;
  }
  .arcade-preview-card h3,
  .arcade-preview-grid > div h3 {
    font-size: 1.5rem !important;
  }
  /* Per-card button row — stack on phone for full-width buttons */
  .arcade-card-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .arcade-card-btns .btn-primary,
  .arcade-card-btns .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* FLEX rows of cards — stack */
  [style*="display:flex"][style*="flex-wrap"],
  [style*="display: flex"][style*="flex-wrap"] {
    gap: 1rem;
  }

  /* BUTTONS in flex rows — full width on tiny phones */
  .hero-btns, [class*="btn-row"] {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* SAFE-AREA support for iOS notch */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ---------- VERY SMALL PHONES (≤380px) ---------- */
@media (max-width: 380px) {
  body { font-size: 14px; }
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  nav { padding: 0.75rem 1rem !important; }
  .nav-logo { font-size: 1.05rem !important; }
  .nav-cta {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.65rem !important;
  }
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  /* Hero shouldn't force 100vh in landscape — too tall for content */
  #hero {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ---------- ACCESSIBILITY — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}