/* ── PLAYER PAGES — SHARED MOBILE LAYER ──
   Linked into every public player page (like admin-mobile.css for admin).
   Below 640px the desktop pill nav is hidden by each page's own CSS; this
   layer adds a ☰ drawer (built by player-mobile.js) plus generic fixes. */

.pm-burger { display:none; }

/* Support + Profile pills in the top-right (all widths; hidden on phones —
   the drawer carries them there) */
.nav-pill {
  display:flex; align-items:center; gap:6px; padding:6px 13px;
  background:rgba(192,57,43,0.1); border:1px solid rgba(192,57,43,0.3);
  text-decoration:none; font-size:11px; font-weight:600; color:#d8d0cc;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
}
.nav-pill:hover { color:#f0ebe8; background:rgba(192,57,43,0.2); }
.nav-pill.active { color:#f0ebe8; background:rgba(192,57,43,0.22); border-color:rgba(192,57,43,0.5); }
@media (max-width: 760px) { .nav-pill { display:none; } }

@media (max-width: 640px) {
  .pm-burger {
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-left:auto; flex-shrink:0;
    background:rgba(192,57,43,0.12); border:1px solid rgba(192,57,43,0.35);
    color:#f0ebe8; font-size:17px; cursor:pointer;
  }
  /* the credits chip stays; burger sits after it */
  .nav { gap:10px; padding:0 14px; }

  /* Hide the inline desktop link row on phones — the ☰ drawer carries these
     links instead. Most player pages already do this in their own CSS; making
     it global here means pages that DON'T (the Survivors section) get correct
     behaviour just by loading this layer, no per-page edit needed. */
  .nav .nav-links { display:none !important; }

  /* generic layout fixes */
  .wrap { padding-left:14px !important; padding-right:14px !important; }
  input, select, textarea { font-size:16px !important; } /* stop iOS focus zoom */

  /* card grids that use minmax(340px,1fr) overflow a 375px screen — stack them */
  .lore-grid, .we-grid, .roster-grid, .zombie-grid, .factions-grid,
  .missions-grid, .shop-grid, .items-grid, .market-grid, .achievements-grid {
    grid-template-columns: 1fr !important;
  }
  table { display:block; overflow-x:auto; }
  img, video { max-width:100%; }

  /* Tab strips that run wider than the screen (trader, chat rooms): make them
     swipe-scroll and fade the right edge so it's clear more tabs exist. */
  .main-tabs, .filter-tabs, .rooms {
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 87%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 87%,transparent 100%);
  }
  .main-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .rooms::-webkit-scrollbar { display:none; }
  .main-tab, .filter-tab, .room { flex:0 0 auto; white-space:nowrap; }
}

/* drawer (any width — only opened by the burger) */
.pm-drawer-bg {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:900; backdrop-filter:blur(2px);
}
.pm-drawer {
  position:fixed; top:0; right:-280px; width:260px; height:100dvh; z-index:901;
  background:#12100f; border-left:1px solid rgba(192,57,43,0.35);
  transition:right 0.22s ease; overflow-y:auto; padding:18px 0 30px;
}
.pm-drawer.open { right:0; }
.pm-drawer-bg.open { display:block; }
.pm-drawer-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 18px 14px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.pm-drawer-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:#f0ebe8; }
.pm-drawer-close { background:none; border:none; color:#7a706c; font-size:20px; cursor:pointer; padding:4px 8px; }
.pm-drawer a {
  display:block; padding:13px 20px; text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:#d8d0cc; border-bottom:1px solid rgba(255,255,255,0.04);
}
.pm-drawer a.active { color:#f0ebe8; background:rgba(192,57,43,0.14); border-left:3px solid #c0392b; }