/* ===========================================================================
   mgm-mobile.css - site-wide phone/tablet fixes for malevolentmultiverse.com
   Added 2026-08-06.  Enqueued LAST by mu-plugin zz-mgm-mobile.php so it beats
   the inline <style> blocks that ship inside the Elementor HTML widgets.
   Nothing here applies above 980px - desktop layout is untouched.
   To revert everything: delete wp-content/mu-plugins/zz-mgm-mobile.php
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. GAME SUB-NAV BARS -> two-row layout on phones/tablets
   Before: brand | links | status all on one row, which left the link rail a
   ~172px scroll window carrying ~735px of links, collapsed the brand link to a
   10x10px tap target, and hid the WoW "Realms" dropdown entirely (so the six
   realm pages had no mobile route at all).
   After: row 1 = brand + live status badge, row 2 = the full viewport width as
   a scrolling rail, with dropdown children flattened inline.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
/* --- AE --------------------------------------------------- */
  /* row 1: brand + status */
  div#ae-nav .ae-nav-inner{flex-wrap:wrap;row-gap:0;padding:0;align-items:center;min-height:0;}
  /* flex-basis 0, not auto: wrapping is decided on the item's HYPOTHETICAL size,
     so an auto basis let the brand's full label push the status badge onto a
     third row. Basis 0 keeps both on row 1 and lets the label ellipsise. */
  div#ae-nav .ae-brand{order:1;flex:1 1 0;min-width:0;overflow:hidden;padding:9px 0 9px 14px;pointer-events:auto;}
  div#ae-nav .ae-brand b{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.12em;vertical-align:middle;}
  div#ae-nav .ae-status{order:2;flex:0 0 auto;padding:9px 14px 9px 0;pointer-events:auto;}
  /* row 2: full-width scrolling link rail (was a ~172px window) */
  div#ae-nav .ae-links{order:3;flex:0 0 100%;width:100%;min-width:0;padding:0 8px;
    border-top:1px solid rgba(255,255,255,.10);
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;}
  div#ae-nav .ae-links::-webkit-scrollbar{display:none;}
  div#ae-nav a.ae-link{padding:13px 10px;white-space:nowrap;}
  /* flatten the hover dropdown into the rail - on a phone there is no hover,
     and it was display:none, which made those pages unreachable */
  div#ae-nav .ae-item{display:contents;}
  div#ae-nav .ae-item .ae-sub{display:contents;}
  div#ae-nav a.ae-link .ae-caret{display:none;}
  div#ae-nav .ae-links a.ae-sublink{display:inline-flex;align-items:center;
    padding:13px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap;opacity:.72;}
  div#ae-nav .ae-links a.ae-sublink.is-active{opacity:1;background:none;}
  div#ae-nav .ae-links a.ae-sublink::before{content:"\2022";margin-right:5px;opacity:.55;font-size:9px;}
}
@media(max-width:980px){
/* --- WOW --------------------------------------------------- */
  /* row 1: brand + status */
  div#wow-nav .wow-nav-inner{flex-wrap:wrap;row-gap:0;padding:0;align-items:center;min-height:0;}
  /* flex-basis 0, not auto: wrapping is decided on the item's HYPOTHETICAL size,
     so an auto basis let the brand's full label push the status badge onto a
     third row. Basis 0 keeps both on row 1 and lets the label ellipsise. */
  div#wow-nav .wow-brand{order:1;flex:1 1 0;min-width:0;overflow:hidden;padding:9px 0 9px 14px;pointer-events:auto;}
  div#wow-nav .wow-brand b{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.12em;vertical-align:middle;}
  div#wow-nav .wow-status{order:2;flex:0 0 auto;padding:9px 14px 9px 0;pointer-events:auto;}
  /* row 2: full-width scrolling link rail (was a ~172px window) */
  div#wow-nav .wow-links{order:3;flex:0 0 100%;width:100%;min-width:0;padding:0 8px;
    border-top:1px solid rgba(255,255,255,.10);
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;}
  div#wow-nav .wow-links::-webkit-scrollbar{display:none;}
  div#wow-nav a.wow-link{padding:13px 10px;white-space:nowrap;}
  /* flatten the hover dropdown into the rail - on a phone there is no hover,
     and it was display:none, which made those pages unreachable */
  div#wow-nav .wow-item{display:contents;}
  div#wow-nav .wow-item .wow-sub{display:contents;}
  div#wow-nav a.wow-link .wow-caret{display:none;}
  div#wow-nav .wow-links a.wow-sublink{display:inline-flex;align-items:center;
    padding:13px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap;opacity:.72;}
  div#wow-nav .wow-links a.wow-sublink.is-active{opacity:1;background:none;}
  div#wow-nav .wow-links a.wow-sublink::before{content:"\2022";margin-right:5px;opacity:.55;font-size:9px;}
}
@media(max-width:980px){
/* --- COH --------------------------------------------------- */
  /* row 1: brand + status */
  div#coh-nav .coh-nav-inner{flex-wrap:wrap;row-gap:0;padding:0;align-items:center;min-height:0;}
  /* flex-basis 0, not auto: wrapping is decided on the item's HYPOTHETICAL size,
     so an auto basis let the brand's full label push the status badge onto a
     third row. Basis 0 keeps both on row 1 and lets the label ellipsise. */
  div#coh-nav .coh-brand{order:1;flex:1 1 0;min-width:0;overflow:hidden;padding:9px 0 9px 14px;pointer-events:auto;}
  div#coh-nav .coh-brand b{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.12em;vertical-align:middle;}
  div#coh-nav .coh-status{order:2;flex:0 0 auto;padding:9px 14px 9px 0;pointer-events:auto;}
  /* row 2: full-width scrolling link rail (was a ~172px window) */
  div#coh-nav .coh-links{order:3;flex:0 0 100%;width:100%;min-width:0;padding:0 8px;
    border-top:1px solid rgba(255,255,255,.10);
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;}
  div#coh-nav .coh-links::-webkit-scrollbar{display:none;}
  div#coh-nav a.coh-link{padding:13px 10px;white-space:nowrap;}
  /* flatten the hover dropdown into the rail - on a phone there is no hover,
     and it was display:none, which made those pages unreachable */
  div#coh-nav .coh-item{display:contents;}
  div#coh-nav .coh-item .coh-sub{display:contents;}
  div#coh-nav a.coh-link .coh-caret{display:none;}
  div#coh-nav .coh-links a.coh-sublink{display:inline-flex;align-items:center;
    padding:13px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap;opacity:.72;}
  div#coh-nav .coh-links a.coh-sublink.is-active{opacity:1;background:none;}
  div#coh-nav .coh-links a.coh-sublink::before{content:"\2022";margin-right:5px;opacity:.55;font-size:9px;}
}
@media(max-width:980px){
/* --- EQ --------------------------------------------------- */
  /* row 1: brand + status */
  div#eq-nav .eq-nav-inner{flex-wrap:wrap;row-gap:0;padding:0;align-items:center;min-height:0;}
  /* flex-basis 0, not auto: wrapping is decided on the item's HYPOTHETICAL size,
     so an auto basis let the brand's full label push the status badge onto a
     third row. Basis 0 keeps both on row 1 and lets the label ellipsise. */
  div#eq-nav .eq-brand{order:1;flex:1 1 0;min-width:0;overflow:hidden;padding:9px 0 9px 14px;pointer-events:auto;}
  div#eq-nav .eq-brand b{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.12em;vertical-align:middle;}
  div#eq-nav .eq-status{order:2;flex:0 0 auto;padding:9px 14px 9px 0;pointer-events:auto;}
  /* row 2: full-width scrolling link rail (was a ~172px window) */
  div#eq-nav .eq-links{order:3;flex:0 0 100%;width:100%;min-width:0;padding:0 8px;
    border-top:1px solid rgba(255,255,255,.10);
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;}
  div#eq-nav .eq-links::-webkit-scrollbar{display:none;}
  div#eq-nav a.eq-link{padding:13px 10px;white-space:nowrap;}
  /* flatten the hover dropdown into the rail - on a phone there is no hover,
     and it was display:none, which made those pages unreachable */
  div#eq-nav .eq-item{display:contents;}
  div#eq-nav .eq-item .eq-sub{display:contents;}
  div#eq-nav a.eq-link .eq-caret{display:none;}
  div#eq-nav .eq-links a.eq-sublink{display:inline-flex;align-items:center;
    padding:13px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap;opacity:.72;}
  div#eq-nav .eq-links a.eq-sublink.is-active{opacity:1;background:none;}
  div#eq-nav .eq-links a.eq-sublink::before{content:"\2022";margin-right:5px;opacity:.55;font-size:9px;}
}
@media(max-width:980px){
/* --- LOA --------------------------------------------------- */
  /* row 1: brand + status */
  div#loa-nav .loa-nav-inner{flex-wrap:wrap;row-gap:0;padding:0;align-items:center;min-height:0;}
  /* flex-basis 0, not auto: wrapping is decided on the item's HYPOTHETICAL size,
     so an auto basis let the brand's full label push the status badge onto a
     third row. Basis 0 keeps both on row 1 and lets the label ellipsise. */
  div#loa-nav .loa-brand{order:1;flex:1 1 0;min-width:0;overflow:hidden;padding:9px 0 9px 14px;pointer-events:auto;}
  div#loa-nav .loa-brand b{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.12em;vertical-align:middle;}
  div#loa-nav .loa-status{order:2;flex:0 0 auto;padding:9px 14px 9px 0;pointer-events:auto;}
  /* row 2: full-width scrolling link rail (was a ~172px window) */
  div#loa-nav .loa-links{order:3;flex:0 0 100%;width:100%;min-width:0;padding:0 8px;
    border-top:1px solid rgba(255,255,255,.10);
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;}
  div#loa-nav .loa-links::-webkit-scrollbar{display:none;}
  div#loa-nav a.loa-link{padding:13px 10px;white-space:nowrap;}
  /* flatten the hover dropdown into the rail - on a phone there is no hover,
     and it was display:none, which made those pages unreachable */
  div#loa-nav .loa-item{display:contents;}
  div#loa-nav .loa-item .loa-sub{display:contents;}
  div#loa-nav a.loa-link .loa-caret{display:none;}
  div#loa-nav .loa-links a.loa-sublink{display:inline-flex;align-items:center;
    padding:13px 8px;font-size:11px;letter-spacing:.05em;white-space:nowrap;opacity:.72;}
  div#loa-nav .loa-links a.loa-sublink.is-active{opacity:1;background:none;}
  div#loa-nav .loa-links a.loa-sublink::before{content:"\2022";margin-right:5px;opacity:.55;font-size:9px;}
}
/* ---------------------------------------------------------------------------
   2. MULTIVERSE SHOP - cart button was off-screen
   .mgms-shop-header-actions is a nowrap flex row 373px wide inside a 321px
   parent, so .mgms-cart-toggle rendered at x=375-416 on a 375px phone: the
   cart could not be opened at all.  Let the row wrap and keep the search box
   from monopolising it.
   --------------------------------------------------------------------------- */
@media(max-width:780px){
  .mgms-shop-header-actions{flex-wrap:wrap;width:100%;max-width:100%;justify-content:flex-start;gap:10px;}
  .mgms-shop-header-actions > *{max-width:100%;}
  .mgms-shop-search,.mgms-shop-header-actions input[type=search],.mgms-shop-header-actions input[type=text]{flex:1 1 180px;min-width:0;}
  .mgms-cart-toggle{flex:0 0 auto;min-width:44px;min-height:44px;}
  .mgms-cart-drawer{width:min(345px,92vw);max-width:92vw;}
  /* category pills were 24px high - below the 44px touch guidance */
  .mgms-cat-pill{min-height:36px;padding-top:8px;padding-bottom:8px;}
  .mgms-cart-close{min-width:40px;min-height:40px;}
}

/* ---------------------------------------------------------------------------
   2b. EVENTS CALENDAR header (mgm-events, used by /events/, /game-calendar/
   and the five per-game <game>-events pages)
   .mgme-cal-brand is a nowrap flex row [logo][title]; the logo alone filled the
   334px row, so the "<Game> Events" heading was pushed to x=371-466, entirely
   off-screen. Let the row wrap so the title drops under the logo.
   --------------------------------------------------------------------------- */
@media(max-width:780px){
  .mgme-cal-brand{flex-wrap:wrap;min-width:0;}
  .mgme-cal-logo{max-width:100%;height:auto;}
  .mgme-title{min-width:0;flex:1 1 100%;}
}

/* ---------------------------------------------------------------------------
   3. TOUCH TARGETS
   Elements that measured under 30px in either axis on a 375px viewport.
   --------------------------------------------------------------------------- */
@media(max-width:780px){
  /* news-hub carousel dots: 14px dot, now a 14px dot in a 32px hit area */
  .nb-dot{position:relative;}
  .nb-dot::after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);}
  .nb-nav,.nb-arrow,.nb-prev,.nb-next{min-width:44px;min-height:44px;}
  /* "Read article" link at the foot of each news card was 25px tall */
  .nb-read{display:inline-flex;align-items:center;min-height:36px;padding-top:6px;padding-bottom:6px;}
  /* small outline buttons (e.g. "Join the Discord to Register") */
  .mgm-btn.mgm-btn-sm{min-height:40px;padding-top:10px;padding-bottom:10px;font-size:13px;}
  /* footer link lists (Privacy Policy / Terms / Community Rules / Staff
     openings) were 27px-tall stacked text links - a cramped column to thumb */
  .pxl-link.type-vertical > li > a{padding-top:7px;padding-bottom:7px;}
  /* fixed account chip: login button was 73x28 */
  .mgm-account-fixed .mgm-nav-auth,.mgm-account-fixed .mgm-nav-login{min-height:36px;padding:8px 14px;}
  /* checkboxes were the browser default 13x13 (/login/) and 17x17 (/sign-in/) */
  .pxl-user input[type=checkbox],.pxl-user-form-login input[type=checkbox],
  .mgmauth-check input[type=checkbox],.mgm-auth input[type=checkbox]{width:20px;height:20px;}
  /* /sign-in/ "Show" password toggle sits inside the field, so it gets an
     invisible padded hit area rather than a taller box that would deform it */
  .mgmauth-pw-toggle{position:relative;}
  .mgmauth-pw-toggle::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:44px;min-width:44px;transform:translate(-50%,-50%);}
}

/* ---------------------------------------------------------------------------
   4. SMALL TEXT
   11-13.6px body copy is below comfortable reading size on a phone.  Only
   raises the offenders found in the audit; headings/labels are left alone.
   --------------------------------------------------------------------------- */
@media(max-width:780px){
  /* !important: the shop/renown card copy inherits its size from a more
     specific ancestor rule, so a bare class selector loses the cascade */
  .mgms-item-desc,.mgmr-item-desc,.mgms-inv-sub{font-size:14px!important;line-height:1.5;}
  .mgms-char-note{font-size:13.5px!important;}
  #mm-landing .tag,#htp-landing .tag{font-size:12px;}
}

/* ---------------------------------------------------------------------------
   5. SCROLL HINT for the horizontally scrollable panels (server table, the new
   nav rails, staff-application tabs) so it reads as swipeable rather than cut.
   --------------------------------------------------------------------------- */
@media(max-width:980px){
  .ws-tblwrap,.lf-tablewrap,.mgmsa-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ws-tblwrap::-webkit-scrollbar,.lf-tablewrap::-webkit-scrollbar,.mgmsa-tabs::-webkit-scrollbar{display:none;}
}