/* If screen gets tight, let it wrap nicely */
@media (max-width: 900px){
  .achievement-bottom{
    flex-wrap: wrap;
  }
  .achievement-total{
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   Part 3 — Mobile Mode
   - fixed top bar (hamburger + title + search)
   - #section-nav becomes slide-out drawer
   - text uses device default sizing
   ========================================================= */

@media (max-width: 820px){

  /* Use device-normal sizing */
  html{
    font-size: 100% !important;   /* uses phone’s default (usually 16px) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Stop the big scale system on mobile */
  :root{
    --ui-scale: 1;
    --fixed-scale: 1;
  }

  /* Top bar */
  #mobile-topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    z-index: 10050;

    display: grid;
    grid-template-columns: 54px 1fr 54px;
    align-items: center;

    padding: 0 10px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  #mobile-menu-btn{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.25);
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #mobile-topbar-title{
    text-align: center;
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(242,211,107,.95);
    text-shadow: 0 4px 10px rgba(0,0,0,.55);
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #wiki-content{
    margin-top: 12px; /* logo already creates the spacing */
    /* max-width: calc(100vw - 16px); */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 14px 12px;
    border-radius: 18px;
  }

  /* Don’t use transform scaling on mobile */
  #wiki-inner{
    width: 100% !important;
    min-width: 0% !important;
    max-width: 100% !important;
    left: 0;
    transform: none;
  }

  #wiki-header{
    display: flex;
    justify-content: center;
    align-items: center;

    /* pushes logo below fixed topbar */
    padding: 70px 0 10px;  /* 54px bar + a bit breathing room */

    /* keep it above the blurred bg layers */
    position: relative;
    z-index: 1;
  }

  /* Mobile logo sizing */
  #wiki-logo{
    width: min(360px, calc(100vw - 34px));
    height: auto;
    align-self: center;
  }

  /* Search button moves into topbar right */
  #search-toggle{
    position: fixed;
    top: 5px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    z-index: 10060;
  }

  /* Search panel becomes “dropdown sheet” */
  #search-panel{
    top: 60px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    border-radius: 18px;
    z-index: 10060;
  }

  .search-results{
    max-height: 56vh;
  }

  /* ========== Drawer menu using your existing #section-nav ========== */

  /* turn #section-nav into a fixed left drawer */
  #section-nav{
    position: fixed;
    top: 58px;               /* below topbar */
    left: 10px;
    width: min(300px, 78vw);
    max-height: calc(100vh - 74px);
    overflow: auto;
    z-index: 10055;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;

    padding: 12px;
    margin: 0;

    background: rgba(113, 113, 113, 0.25);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* hidden by default */
    transform: translateX(-120%);
    transition: transform .18s ease;
  }

  /* drawer buttons bigger, full width */
  #section-nav button{
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 14px;
    text-align: left;
  }

  /* open state */
  body.mobile-menu-open #section-nav{
    transform: translateX(0);
  }

  /* Overlay behind drawer */
  body.mobile-menu-open:before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;

    background: url("../img/wiki/background.png") center / cover no-repeat;
    filter: blur(var(--blur-top)) !important; /* ensure this blur is always applied */
    transform: scale(1.08); /* prevent blur edges */
  }

  /* Ensure wiki content stays above background, below overlay/menu */
  #wiki-content{
    position: relative;
    z-index: 1;
  }

  /* ========== Subnav stays normal (you can also make it horizontal scroll) ========== */
  #subnav{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
  }

  #subnav button{
    padding: 12px 12px;
    font-size: 1rem;
    min-width: 0;
  }

  /* Titles scale for mobile */
  #section-title{ font-size: 2rem; }
  #page-title{ font-size: 2.2rem; }
  #section-description, #page-description{
    font-size: 1rem;
    line-height: 1.45;
  }

  /* Tables: keep readable, allow horizontal scroll inside table-inner */
  #page-content .table-inner{
    overflow: auto;
  }

  .shop-table{
    min-width: 720px; /* prevents squished columns; scroll happens */
    font-size: .95rem;
  }

  #page-content .table-scroll{
    max-height: 52vh;
  }

  #mobile-topbar{
    transform-origin: top center;
    transform: scale(var(--ui-scale, 1));
    width: calc(100% / var(--ui-scale, 1));
  }
}

/* Team responsive */
@media (max-width: 1100px){
  .team-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .member-img{ width: 50%; max-width: 180px; }
}
@media (max-width: 800px){
  .team-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-img{ width: 60%; max-width: 140px; }
}
@media (max-width: 600px){
  .team-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-img{ width: 50%; max-width: 100px; }
}
@media (max-width: 380px){
  .team-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .member-img{ width: 60%; max-width: 100px; }
}

/* Patchnotes responsive */
@media (max-width: 1150px){
  .pn-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .pn-grid{ grid-template-columns: 1fr; }
}

/* --- On real mobile, stop scaling completely --- */
@media (max-width: 820px) {

  #wiki-inner {
    left: 0 !important;
    transform: none !important;
    width: 100%;
  }

  #wiki-content {
    width: 100%;
    max-width: 100%;
    margin: 16px auto;
    padding: 0 14px;
    box-sizing: border-box;
  }


  #wiki-logo {
    max-width: 100%;
    height: auto;
  }
}

/* Optional: if your big titles are h1/h2, clamp them too */
@media (max-width: 820px){
  h1{
    font-size: clamp(10px, 6.5vw, 34px);
    line-height: 1.08;
  }
  h2{
    font-size: clamp(16px, 5vw, 24px);
    line-height: 1.12;
  }
}

/* FIX: mobile topbar overflow (grid shrink + title ellipsis) */
@media (max-width: 820px){

  /* Ensure the bar itself never becomes wider than the viewport */
  #mobile-topbar{
    box-sizing: border-box;
    width: 100%;              /* hard viewport width */
    left: 0;
    right: auto;

    /* key fix: allow middle column to actually shrink */
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    column-gap: 10px;
  }

  /* key fix: grid children default min-width:auto causes overflow */
  #mobile-topbar-title{
    min-width: 0;
    max-width: 100%;
  }

  /* If your search button is INSIDE the topbar, let it participate in the grid */
  #mobile-topbar #mobile-topbar-right #search-toggle{
    position: static;
    inset: auto;
    justify-self: end;
    margin: 0;
    z-index: auto;
  }

  /* If your menu button is inside, keep it aligned */
  #mobile-topbar #mobile-menu-btn{
    justify-self: start;
  }
}

/* Global box sizing reset (you had it at the bottom) */
*,
*::before,
*::after {
  box-sizing: border-box;
}


.footer-left, .footer-right{ min-width: 0; }

@media (max-width: 520px){
  #wiki-footer .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-right{
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 820px){
  #wiki-content{
    box-sizing: border-box;

    /* force it to follow the viewport, not some parent */
    width: 100vw;
    max-width: 100vw;

    /* no centering tricks needed if it's full width */
    margin: 0;

    /* safe breathing room */
    padding: 14px 14px;
  }
}

@media (max-width: 820px){
  #wiki-content{
    box-sizing: border-box;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    margin: 0 auto;
    padding: 14px 14px;
  }

  :root{
  --ui-scale: 1;
}

#wiki-inner{
  position: relative;
  left: 0;
  transform: none !important;
  width: 100%;
  max-width: 100%;
  transform-origin: initial;
}

#wiki-content{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px;
  box-sizing: border-box;
}
#mobile-topbar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 54px;
  padding: 0 10px;
}

#mobile-topbar-left{
  justify-self: start;
}

#mobile-topbar-title{
  justify-self: center;
  text-align: center;
}

#mobile-topbar-right{
  justify-self: end;
}

#mobile-topbar #mobile-topbar-right #search-toggle{
  position: static;
}
}

@media (max-width: 600px) {
  .credit-row {
    grid-template-columns: 1fr; /* Stack items vertically */
  }
}

@media (max-width: 600px) {
  .footer-inner, #section-description, #page-description, .page-subdesc {
    overflow-wrap: anywhere;   /* modern solution */
    word-break: break-word;    /* fallback */
  }
   
  .title-text{
    font-size: clamp(14px, 10vw, 26px) !important;
    overflow-wrap: anywhere;   /* modern solution */
    word-break: break-word;    /* fallback */
  }
  .page-subtitle{
    font-size: clamp(14px, 10vw, 26px) !important;
    overflow-wrap: anywhere;   /* modern solution */
    word-break: break-word;    /* fallback */
  }

  .title-icon {
  width: clamp(14px, 10vw, 40px);
  height: auto;
  }

}
@media (max-width: 340px) {
  .nav-btn-text {
    font-size: clamp(8px, 5vw, 14px) !important;
    overflow-wrap: anywhere;   /* modern solution */
    word-break: break-word;    /* fallback */
  }

  .nav-btn::before {
    display: none;
  }
}

@media (max-width: 140px) {
  .title-with-icon {
    display: inline-block;
    align-items: center;
  }
  .nav-btn-icon {
    display: none;
  }
  .footer-chip {
    display: none;
  }
}

#mobile-menu-btn{display:none !important;}
.php-table-builder{display:flex;flex-direction:column;gap:10px;}
.php-table-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.php-table-row-head .php-input{font-weight:700;}