/* R4L mobile + accessibility patch — loaded after style-20260817b.css
   Goals: usable nav on phones, no horizontal overflow, 44px touch targets,
   readable type, visible keyboard focus, AA contrast for small text. */

html { -webkit-text-size-adjust: 100%; }
body { text-wrap: pretty; }
img, video, svg { max-width: 100%; }

/* ---------- Skip link (injected by mobile-nav.js, styled here) ---------- */
.r4l-skip {
  position: fixed; left: 12px; top: -60px; z-index: 10000;
  background: #fff; color: #000; font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 10px; text-decoration: none;
  transition: top .2s ease;
}
.r4l-skip:focus-visible { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Visible keyboard focus everywhere ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}
.nav-link:focus-visible, .btn:focus-visible { outline-offset: 4px; }

/* ---------- Contrast fix: #606060 on black fails AA — lift small text ---------- */
.sec-label, .text-dim, .foot-brand p, .foot-col h5,
.plan .per, .plan .price small, .form-hint, .stat .c,
.tutorial-foot, .dash-sub, .dash-desc, .foot-bottom {
  color: #a1a1aa !important;
}
.faq-idx { color: #a1a1aa !important; }

/* ---------- Hamburger button (injected) ---------- */
.r4l-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  flex-shrink: 0;
}
.r4l-burger:hover { background: rgba(255,255,255,.08); }
.r4l-burger svg { width: 20px; height: 20px; }
.r4l-burger .icon-close { display: none; }
.r4l-burger[aria-expanded="true"] .icon-open { display: none; }
.r4l-burger[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Mobile drawer ---------- */
.r4l-drawer {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  padding: calc(64px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: rgba(2,2,5,.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow-y: auto;
}
.r4l-drawer.open { display: block; }
.r4l-drawer-inner {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 520px; margin: 8px auto 0;
  background: rgba(16,16,20,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px;
}
.r4l-drawer a.r4l-m-link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 16px; font-weight: 500; color: #fff;
  border: 1px solid transparent;
}
.r4l-drawer a.r4l-m-link:hover { background: rgba(255,255,255,.06); }
.r4l-drawer a.r4l-m-link.is-active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
.r4l-drawer .r4l-m-cta { display: grid; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.r4l-drawer .r4l-m-cta .btn { min-height: 52px; font-size: 16px; width: 100%; }
body.r4l-locked { overflow: hidden; }

/* ---------- Base touch targets ---------- */
.btn { min-height: 44px; }
.faq-q { min-height: 56px; }
.d-arrow { width: 44px; height: 44px; }
.d-dot { min-width: 32px; height: 12px; padding: 4px 0; background-clip: content-box; }
.nav-cta .btn { min-height: 40px; }

/* Prevent iOS auto-zoom on form fields */
input, select, textarea { font-size: 16px !important; }

/* Code / keys / long URLs must wrap, never force horizontal scroll */
code, .mono, .key-box, .key-row code, .info-row code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Tablet & phone nav switch ---------- */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .r4l-burger { display: inline-flex; }
  .nav-inner { gap: 12px; }
  /* keep at most one CTA visible next to burger, rest lives in drawer */
  .nav-cta { margin-left: 0; }
  .nav-cta .btn-ghost { display: none !important; }
  .nav-cta .btn-primary { padding: 10px 14px; font-size: 13px; }
}

/* ---------- Phone layout ---------- */
@media (max-width: 640px) {
  /* Site mascot lives on the RIGHT edge of r4l-web-background.jpg.
     style-20260817b.css shifts body bg to 68% under 900px which crops her out.
     Pin it back right so she stays visible on tall phone screens. */
  body { background-position: right center; background-attachment: scroll; }
  .container, .container-narrow { padding-left: 16px; padding-right: 16px; }
  .r4l-dash { padding-left: 16px; padding-right: 16px; }

  .hero { padding: 96px 0 64px; }
  .hero h1 { font-size: clamp(34px, 11vw, 48px) !important; line-height: 1.05; }
  .hero .lede { font-size: 16px; margin-bottom: 28px; }
  .eyebrow { font-size: 10px; max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; min-height: 52px; font-size: 16px; }

  section.block { padding: 56px 0; }
  .sec-head { margin-bottom: 32px; }
  .sec-head h2 { font-size: clamp(26px, 7vw, 32px); }
  .sec-head p { font-size: 16px; }

  .stats { padding: 28px 20px; gap: 18px; text-align: center; }
  .stat .n { font-size: 32px; }

  .tour-content { padding: 20px; }
  .tour-card h3 { font-size: 20px; }
  .tour-media, .d-caro { height: 210px; }
  .d-prev { left: 6px; } .d-next { right: 6px; }

  .price-grid { grid-template-columns: 1fr; }
  .plan { padding: 24px 20px; }
  .plan .price { font-size: 32px; }

  .cta-band { margin-top: 56px; padding: 40px 20px; }
  .cta-band h2 { font-size: clamp(26px, 7vw, 32px); }
  .cta-band p { font-size: 16px; }

  .tutorial { padding: 24px 16px; }
  .tutorial-steps { grid-template-columns: 1fr !important; }
  .t-step { flex-direction: column; gap: 12px; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* order.php — payment cards + robux tiers must stack */
  #paymentGrid { flex-direction: column; }
  #paymentGrid .payment-card { width: 100%; }
  #robuxPanel div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  form.glass-card { padding: 22px 16px !important; }

  /* dashboard.php — key rows + redeem must wrap */
  .key-row { flex-wrap: wrap; gap: 8px; }
  .key-row .state { margin-left: 0; width: 100%; }
  .redeem-row { flex-direction: column; }
  .redeem-row button { width: 100%; min-height: 48px; }
  .dash-card { padding: 16px 14px; }
  .dash-hero img { width: 48px; height: 48px; }
  .dash-title { font-size: 19px; white-space: normal; }
  .key-grid { flex-direction: column; }

  /* status / claim cards */
  .glass-card { max-width: 100%; }
  .info-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .info-row code { max-width: 100%; }

  /* generic buttons full-width in narrow cards */
  .btn-block { width: 100%; }
}

@media (max-width: 380px) {
  .foot-grid { grid-template-columns: 1fr; }
  .nav-cta .btn-primary { font-size: 12px; padding: 9px 12px; }
  .cta-band { padding: 32px 16px; }
}

/* ---------- ImGui demo touch usability (uipreview.php) ---------- */
@media (max-width: 700px) {
  .imgui-content { padding: 10px; }
  .imgui-tab { min-height: 44px; }
  .ui-check { min-height: 44px; height: auto; padding: 6px 0; font-size: 14px; }
  .ui-check-box { width: 22px; height: 22px; }
  .ui-slider { height: 52px; }
  .ui-slider-track { height: 8px; bottom: 10px; }
  .ui-slider-grab { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; }
  .ui-combo { height: auto; min-height: 44px; flex-wrap: wrap; }
  .ui-combo-btn { flex: 1 1 100%; max-width: 100%; min-height: 44px; }
  .ui-kb-btn { min-height: 36px; }
}

/* ---------- Tour overlay becomes a bottom sheet on phones ---------- */
@media (max-width: 760px) {
  .r4l-tour-art { display: none !important; }
  .r4l-tour-main {
    left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px !important;
    width: auto !important; max-width: none !important;
    max-height: 62vh; overflow-y: auto;
  }
  .r4l-bubble::before { display: none; }
  #r4lTourGate { padding: 16px; }
  .r4l-gate-card { padding: 24px 20px; }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .r4l-drawer, .r4l-drawer-inner, .r4l-skip { transition: none !important; animation: none !important; }
}