/* Zone 51 — shared mobile layer for sub-pages (games, tournaments, promotions, leaderboard, vip, support, 404).
   index.html has its own mobile styles in style.css. */

/* ── Bottom navigation (injected by mobile-nav.js) ── */
.z51-mnav { display: none; }

@media (max-width: 1100px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, svg, video, iframe, table { max-width: 100%; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: fixed; }
  input, select, textarea, button { font-size: max(16px, 1em); } /* no iOS zoom-in on focus */
  a, button, .btn, [onclick] { -webkit-tap-highlight-color: rgba(41,192,137,0.18); touch-action: manipulation; }
  .btn, button:not([class*="tab"]) { min-height: 42px; }

  .z51-mnav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 900;
    height: calc(64px + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #0a0211;
    border-top: 1px solid rgba(41,192,137,0.25);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
    align-items: stretch;
  }
  .z51-mnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none; color: rgba(255,255,255,0.45);
    font: 600 0.54rem "Inter", sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
    transition: color 0.18s; position: relative; min-height: 0;
  }
  .z51-mnav a svg { width: 22px; height: 22px; }
  .z51-mnav a.active, .z51-mnav a:hover { color: var(--gold-bright, #ffe600); }
  .z51-mnav a.active::before {
    content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px;
    background: var(--gold, #f2d060); box-shadow: 0 0 10px rgba(255,220,0,0.6);
  }
  .z51-mnav .z51-mnav-center { flex: 1.2; margin-top: -20px; color: var(--gold-bright, #ffe600); }
  .z51-mnav .z51-mnav-fab {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #29c28a, #47d1ae);
    box-shadow: 0 4px 20px rgba(41,192,137,0.55), 0 0 0 3px rgba(41,192,137,0.18);
    border: 2px solid rgba(124,222,198,0.5);
    display: flex; align-items: center; justify-content: center;
  }
  .z51-mnav .z51-mnav-fab svg { width: 24px; height: 24px; color: #fff; }
  .z51-mnav .z51-mnav-center span { color: rgba(255,255,255,0.45); font-size: 0.5rem; }

  /* room for the bar */
  body.z51-has-mnav .page-wrap,
  body.z51-has-mnav .shell,
  body.z51-has-mnav > .main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; }
  body.z51-has-mnav footer,
  body.z51-has-mnav .footer,
  body.z51-has-mnav .site-footer { margin-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  body.z51-has-mnav .z51-sup-widget-btn,
  body.z51-has-mnav #z51-support-fab,
  body.z51-has-mnav .support-fab,
  body.z51-has-mnav .live-chat-btn { bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; }

  /* ── slide-in menu (drawer) — mobile counterpart of the desktop sidebar ── */
  .z51-drawer-backdrop { position: fixed; inset: 0; z-index: 950; background: rgba(4,2,8,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .22s; }
  .z51-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 960; width: min(312px, 86vw);
    display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0);
    background: linear-gradient(180deg, #0f0b14 0%, #0a070d 100%); border-right: 1px solid rgba(240,225,235,0.08);
    box-shadow: 24px 0 60px rgba(0,0,0,0.55); transform: translateX(-104%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  }
  body.z51-drawer-open { overflow: hidden; }
  body.z51-drawer-open .z51-drawer { transform: none; }
  body.z51-drawer-open .z51-drawer-backdrop { opacity: 1; pointer-events: auto; }
  .z51-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 12px 0 16px; border-bottom: 1px solid rgba(240,225,235,0.08); flex: none; }
  .z51-drawer-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
  .z51-drawer-brand b { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(36,171,122,0.28), rgba(36,171,122,0.08)); border: 1px solid rgba(36,171,122,0.35); color: #fff; font-family: 'Orbitron', sans-serif; font-size: 0.6rem; font-weight: 900; }
  .z51-drawer-brand span { font-family: 'Orbitron', sans-serif; font-size: 0.74rem; letter-spacing: 3px; color: #f4eef6; }
  .z51-drawer-close { width: 36px; height: 36px; min-height: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .z51-drawer-close svg { width: 16px; height: 16px; }
  .z51-drawer-user { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; border: 1px solid rgba(36,171,122,0.25); background: linear-gradient(135deg, rgba(36,171,122,0.16), rgba(255,255,255,0.03)); flex: none; }
  .z51-drawer-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.6), rgba(19,90,64,0.6)); border: 1px solid rgba(36,171,122,0.35); color: #97e9cb; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 0.95rem; }
  .z51-drawer-avatar svg { width: 20px; height: 20px; }
  .z51-drawer-utext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .z51-drawer-utext b { font: 800 0.86rem 'Inter', sans-serif; color: #f4eef6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .z51-drawer-utext i { font: 700 0.7rem 'Inter', sans-serif; font-style: normal; color: #f3c95a; }
  .z51-drawer-utext i:empty { display: none; }
  .z51-drawer-user .z51-drawer-btn { height: 34px; min-height: 0; padding: 0 14px; border-radius: 9999px; border: 1px solid transparent; background: linear-gradient(135deg, #3ccf9a, #1e9a6c); color: #fff; font: 800 0.74rem 'Inter', sans-serif; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(36,171,122,0.7); }
  .z51-drawer-nav { flex: 1; overflow-y: auto; padding: 2px 12px 12px; -webkit-overflow-scrolling: touch; }
  .z51-drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: #c9bfd0; font: 700 0.86rem 'Inter', sans-serif; }
  .z51-drawer-nav a svg { width: 18px; height: 18px; flex: none; color: #47d8a3; }
  .z51-drawer-nav a.active { background: linear-gradient(90deg, rgba(36,171,122,0.26), rgba(36,171,122,0.07)); color: #fff; }
  .z51-drawer-nav a.active svg { color: #fff; }
  .z51-drawer-nav em { margin-left: auto; font: 800 0.52rem 'Inter', sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
  .z51-drawer-nav em.red { color: #47d8a3; border-color: rgba(36,171,122,0.35); background: rgba(36,171,122,0.12); }
  .z51-drawer-nav em.gold { color: #f3c95a; border-color: rgba(234,179,8,0.24); background: rgba(234,179,8,0.14); }
  .z51-drawer-nav em.green { color: #34d399; border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); }
  .z51-drawer-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.6); }
  .z51-drawer-lbl { display: block; margin: 14px 12px 6px; font: 700 0.6rem 'Inter', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #968aa3; }
  .z51-drawer-foot { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0)); border-top: 1px solid rgba(240,225,235,0.08); flex: none; }
  .z51-drawer-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 14px; text-decoration: none; background: linear-gradient(135deg, #3ccf9a 0%, #24ab7a 48%, #178a62 100%); color: #fff; font: 800 0.86rem 'Inter', sans-serif; box-shadow: 0 10px 22px -10px rgba(36,171,122,0.75); }
  .z51-drawer-cta svg { width: 16px; height: 16px; }
}
@media (min-width: 1101px) { .z51-drawer, .z51-drawer-backdrop { display: none; } }

/* ── Phone-size layout hardening ── */
@media (max-width: 640px) {
  .page-wrap, .shell, .main, .section, .hero, .content { max-width: 100vw; min-width: 0; }
  .main, .section { padding-left: 14px !important; padding-right: 14px !important; }
  [class*="grid"] > * { min-width: 0; }
  h1, h2, h3, p, td, th, li { overflow-wrap: anywhere; }

  /* topbar: brand + one CTA */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .brand-text p { display: none; }
  .topbar .brand-text h1 { font-size: 0.85rem; letter-spacing: 4px; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn { height: 34px; padding: 0 12px; font-size: 0.6rem; letter-spacing: 1.2px; }

  /* tournaments */
  .featured-t, .ft-header, .ft-body { min-width: 0; }
  .ft-body { grid-template-columns: 1fr !important; gap: 22px; padding: 18px 16px; }
  .ft-body > * { min-width: 0 !important; }
  .ft-header { padding: 18px 16px 14px; flex-wrap: wrap; gap: 12px; }
  .ft-header h3 { font-size: 1.05rem; }
  .ft-timer { flex-wrap: wrap; row-gap: 10px; }
  .ft-btns .btn { flex: 1 1 auto; justify-content: center; }
  .hero-stats { display: grid !important; grid-template-columns: repeat(2, 1fr); }
  .hs-item, .hero-stat { border-right: none !important; border-bottom: 1px solid var(--line); }
  .hs-lbl, .hero-stat-lbl { display: block !important; font-size: 0.5rem; letter-spacing: 1px; }
  .hero-stats > :last-child:nth-child(odd) { grid-column: span 2; }
  .ps-table th, .ps-table td { padding: 9px 12px; }

  /* vip comparison table */
  .cb-table-wrap, .cb-table { max-width: 100%; }
  .cb-table { display: block; overflow-x: auto; }
  .cb-table thead, .cb-table tbody, .cb-table tr { display: table; width: max-content; min-width: 100%; table-layout: auto; }
  .cb-table th, .cb-table td { padding: 10px 12px; white-space: nowrap; }
  .section > div[style*="overflow:hidden"] { overflow-x: auto !important; max-width: 100%; }
  .sec-header { flex-wrap: nowrap; gap: 10px; }
  .sec-header .sec-line { flex: 1 1 10px; min-width: 10px; }
  .sec-title { width: auto !important; max-width: 100%; text-align: center; white-space: normal !important; letter-spacing: 2px !important; font-size: 0.62rem; }

  /* support */
  .faq-cats { max-width: 100%; }
  .faq-cat-btn { padding: 12px 14px; }
  .response-strip { flex-direction: column; }
  .rs-item { width: 100% !important; }

  /* games catalog header */
  .topbar-controls { gap: 6px; min-width: 0; }
  .topbar-controls .search-wrap { min-width: 0; flex: 1 1 90px; }
  .topbar-controls .search-wrap input { width: 100%; min-width: 0; }
  .games-filters { flex-wrap: wrap !important; gap: 8px; }
  .games-filters > * { min-width: 0; }
  .prov-filter-bar, .filter-bar { max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }

  /* provider game window (fullscreen strip = logo + close) — styles live in games.html */
}