/* =========================================================
   MOBILE LAYOUT
   ========================================================= */

/* ---------- Overall leaderboard ---------- */
@media (max-width:750px){
  .table-card.overall-active,
  .rankings-page .table-card.overall-active{
    overflow:visible;
  }

  .table-card.overall-active .row{
    min-width:0 !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:
      "plate info points"
      "tiers tiers tiers";
    row-gap:8px;
    padding:0 12px 10px !important;
  }

  .table-card.overall-active .row .rank-plate{
    grid-area:plate;
    min-width:112px;
    width:auto;
    height:54px;
    margin-left:-12px;
    padding-left:10px;
  }

  .table-card.overall-active .row .rank-num{font-size:20px}

  .table-card.overall-active .row .rank-plate .avatar{
    width:44px;
    height:44px;
  }

  .table-card.overall-active .row .player-info{
    grid-area:info;
    margin-left:12px !important;
  }

  .table-card.overall-active .row .player-info .sub{
    white-space:normal !important;
  }

  .table-card.overall-active .points{
    grid-area:points;
    justify-self:end !important;
    text-align:right !important;
    padding-left:8px !important;
  }

  .table-card.overall-active .overall-tier-cell{
    grid-area:tiers;
    max-width:none;
    padding:0;
  }

  .table-card.overall-active .overall-tiers{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:4px 2px;
  }

  @media (hover:none){
    .table-card.overall-active .row:hover{
      transform:none;
      box-shadow:none;
    }
  }
}

@media (max-width:480px){
  .table-card.overall-active .overall-tiers{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px 4px;
  }
}

/* ---------- Gamemode boards ---------- */
@media (max-width:750px){
  .mode-board-wrap{
    overflow-x:visible !important;
    padding:10px !important;
  }

  .mode-board,
  .table-card:not(.overall-active) .mode-board{
    min-width:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:520px){
  .mode-board,
  .table-card:not(.overall-active) .mode-board{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* ---------- Hamburger menu dropdown ---------- */
@media (max-width:750px){
  .topbar nav{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:10px 12px 14px;
    background:#0b0d12;
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:20;
    align-items:stretch;
    max-height:calc(100dvh - 58px);
    overflow-y:auto;
    overscroll-behavior:contain;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    clip-path:inset(0 0 100% 0);
    transition:
      opacity .2s ease,
      transform .28s cubic-bezier(.2,.8,.2,1),
      clip-path .28s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .28s;
  }

  .topbar.menu-open nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    clip-path:inset(0 0 -60px 0);
    transition:
      opacity .22s ease,
      transform .32s cubic-bezier(.2,.8,.2,1),
      clip-path .32s cubic-bezier(.2,.8,.2,1),
      visibility 0s;
  }

  .topbar nav > *{
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .15s ease,transform .15s ease;
  }
  .topbar.menu-open nav > *{
    opacity:1;
    transform:none;
    transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .topbar.menu-open nav > :nth-child(1){transition-delay:.04s}
  .topbar.menu-open nav > :nth-child(2){transition-delay:.08s}
  .topbar.menu-open nav > :nth-child(3){transition-delay:.12s}
  .topbar.menu-open nav > :nth-child(4){transition-delay:.16s}
  .topbar.menu-open nav > :nth-child(5){transition-delay:.20s}
  .topbar.menu-open nav > :nth-child(n+6){transition-delay:.24s}

  .topbar nav > a,
  .topbar nav .ranking-info-button{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:44px;
    padding:0 12px;
    font-size:15px;
    text-align:left;
    justify-content:flex-start;
  }

  .topbar nav .ranking-info-wrap{
    position:static;
  }

  .topbar nav .ranking-info-popover{
    position:static;
    width:auto;
    display:none;
    margin:4px 0 6px;
    transform:none;
  }

  .topbar nav .ranking-info-popover.show{
    display:block;
    animation:menu-popover-in .22s ease both;
  }

  .mobile-menu{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    transition:background .15s ease;
  }
  .mobile-menu:active{background:rgba(255,255,255,.06)}
  .mobile-menu.pop{animation:menu-button-pop .38s cubic-bezier(.3,1.6,.5,1)}
  .mobile-menu-bar{
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:2px;
    margin:-1px 0 0 -10px;
    border-radius:2px;
    background:currentColor;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
  }
  .mobile-menu-bar:nth-child(1){transform:translateY(-6px)}
  .mobile-menu-bar:nth-child(3){transform:translateY(6px)}
  .topbar.menu-open .mobile-menu-bar:nth-child(1){transform:rotate(45deg)}
  .topbar.menu-open .mobile-menu-bar:nth-child(2){opacity:0;transform:scaleX(.2)}
  .topbar.menu-open .mobile-menu-bar:nth-child(3){transform:rotate(-45deg)}
}

@keyframes menu-button-pop{
  0%{transform:scale(1)}
  30%{transform:scale(.82)}
  65%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@keyframes menu-popover-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

@media (max-width:750px) and (prefers-reduced-motion:reduce){
  .topbar nav,
  .topbar nav > *,
  .mobile-menu-bar{
    transition-duration:0s !important;
    transition-delay:0s !important;
  }
  .topbar nav .ranking-info-popover.show,
  .mobile-menu.pop{animation:none}
}

/* ---------- Server IP ---------- */
@media (max-width:750px){
  .server-ip-label{font-size:0;gap:0}
}

/* ---------- Info strip ---------- */
@media (max-width:750px){
  .info-strip-left .info-label,
  .ranked-player-count .info-label{
    display:inline;
  }

  .ranked-player-count{
    gap:6px;
  }
}

/* ---------- General touch comfort ---------- */
@media (max-width:750px){
  .search-wrap input,
  select{
    font-size:16px;
  }

  .mobile-menu{
    min-width:44px;
    min-height:44px;
  }
}