/* responsive.css — mobile + narrow-desktop adaptation layer.
   Load AFTER guild.css / extra.css / admin.css so these rules win.

   Breakpoints:
     ≤1280px  → desktop narrow: subnav horizontally scrolls, no overlap
     ≤900px   → tablet: 2-col layouts stack
     ≤640px   → mobile: full single column, smaller type, tables scroll, modal fills
*/

/* ============================================================
   GLOBAL — page-level safety
   ============================================================ */
html, body { overflow-x: hidden; }

img, video, svg { max-width: 100%; height: auto; }

/* Default wrap should never exceed viewport */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ============================================================
   SUBNAV — horizontally scrolling on narrow desktops + mobile
   so it never collides with the "進入議事廳" button
   ============================================================ */
.subnav__inner {
  position: relative;
  padding-right: 180px; /* reserve room for the admin button on the right */
  box-sizing: border-box;
}
.subnav__links {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(168,133,74,0.4) transparent;
  flex-wrap: nowrap;
  min-width: 0;
}
.subnav__links::-webkit-scrollbar { height: 4px; }
.subnav__links::-webkit-scrollbar-thumb { background: rgba(168,133,74,0.4); border-radius: 2px; }
.subnav__links::-webkit-scrollbar-track { background: transparent; }
.subnav__link { flex: 0 0 auto; white-space: nowrap; }

/* The admin entry button — pin to the right, never overlap links */
.subnav__admin {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.subnav__admin-btn { white-space: nowrap; }

@media (max-width: 720px) {
  .subnav__inner {
    padding: 0 12px 0 12px;
    padding-right: 140px;
    height: 44px;
  }
  .subnav__title {
    font-size: 11pt;
    letter-spacing: 0.18em;
    margin-right: 12px;
    white-space: nowrap;
  }
  .subnav__title .seal { font-size: 10pt; padding: 2px 4px; }
  .subnav__link {
    padding: 0 10px;
    font-size: 11pt;
    letter-spacing: 0.14em;
  }
  .subnav__admin { right: 8px; }
  .subnav__admin-btn { padding: 5px 8px; font-size: 10pt; letter-spacing: 0.16em; }
  .subnav__admin-icon { display: none; }
}

/* ============================================================
   HERO (top banner) — keep readable on mobile
   ============================================================ */
@media (max-width: 900px) {
  .hero, .hero__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero__lead   { font-size: clamp(36px, 8vw, 64px) !important; }
  .hero__title  { font-size: clamp(28px, 6vw, 48px) !important; }
  .hero__sub    { font-size: 12pt !important; letter-spacing: 0.18em !important; }
}

/* ============================================================
   WELFARE — 2-col → 1-col, qian cylinder smaller
   ============================================================ */
@media (max-width: 900px) {
  .welfare__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .welfare__lead { font-size: 42px !important; }
  .welfare__ghost { display: none; }
  .qian2 { width: 220px !important; height: 320px !important; }
  .welfare__form { grid-template-columns: 1fr !important; }
  .welfare__form .btn { align-self: stretch !important; }
  .welfare__status { grid-template-columns: 1fr !important; }
}

/* Prize grid — 2 cols on mobile, 1 col on tiny screens */
@media (max-width: 640px) {
  .grab-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .grab-card { padding: 12px 10px 12px !important; }
  .grab-card__name { font-size: 12pt !important; letter-spacing: 0.1em !important; }
  .grab-card__count { font-size: 11pt !important; letter-spacing: 0.16em !important; }
}
@media (max-width: 400px) {
  .grab-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PRIZE MODAL — fill viewport on mobile
   ============================================================ */
@media (max-width: 640px) {
  .prize-modal__card {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 18px 14px !important;
  }
  .prize-modal__title  { font-size: 18px !important; letter-spacing: 0.14em !important; }
  .prize-modal__name   { font-size: 18px !important; letter-spacing: 0.14em !important; }
  .prize-modal__detail { font-size: 11pt !important; letter-spacing: 0.1em !important; }
  .prize-modal__btn-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .btn-redeem { padding: 12px !important; }
}

/* ============================================================
   HIERARCHY — pyramid → stacked rows on mobile
   ============================================================ */
@media (max-width: 900px) {
  .hier__pair { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hier__six {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .hier__conn { display: none !important; }
  .hier__node { padding: 12px !important; }
  .role-en { font-size: 10pt !important; letter-spacing: 0.18em !important; }
}
@media (max-width: 480px) {
  .hier__six { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BEAT-ENEMY — slap-arena 2-col → stacked
   ============================================================ */
@media (max-width: 900px) {
  .enemy-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .slap-arena {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .strike-row { max-width: 100% !important; }
}
@media (max-width: 640px) {
  .strike-btn-v2__cn { font-size: 15px !important; letter-spacing: 0.18em !important; }
  .stat-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-box__num { font-size: 28px !important; }
  .war-log { max-height: 220px !important; }
}

/* ============================================================
   LEADERBOARD / LAWS / MANIFESTO — generic narrowing
   ============================================================ */
@media (max-width: 900px) {
  .leaderboard__table, .laws__cols, .manifesto__cols {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .section-header__title { font-size: clamp(40px, 9vw, 64px) !important; }
}

/* ============================================================
   GLOBAL tables (admin) — horizontal scroll wrapper
   Note: tables inside .admin-pane use overflow-x:auto so they
   scroll horizontally instead of crushing on narrow screens.
   ============================================================ */
.admin-pane { overflow-x: auto; }
.admin-table { min-width: 560px; }

/* ============================================================
   ADMIN — sidebar nav becomes top scrollable strip on small screens
   ============================================================ */
@media (max-width: 1024px) {
  .admin.admin--sidebar-nav {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
  }
  .admin__sidenav {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    align-items: center !important;
    gap: 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(168,133,74,0.25);
  }
  .admin__sidenav .admin__brand {
    flex-direction: row !important;
    flex: 0 0 auto;
    padding: 0 8px !important;
    border-bottom: 0 !important;
    gap: 8px !important;
  }
  .admin__sidenav .admin__brand-img { height: 28px !important; width: auto !important; }
  .admin__sidenav-tabs {
    flex-direction: row !important;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .admin__sidenav-tab {
    width: auto !important;
    height: auto !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 11pt;
    letter-spacing: 0.12em;
  }
  .admin__bar--minimal {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px !important;
  }
  .admin__body--with-sidebar {
    grid-template-columns: 1fr !important;
  }
  .admin__sidebar {
    display: none !important; /* hide reminders widget on small screens */
  }
  .admin__main {
    padding: 12px !important;
  }
}

@media (max-width: 640px) {
  .admin__welcome { font-size: 12pt; letter-spacing: 0.12em; }
  .admin__sitebtn, .admin__logout {
    padding: 6px 10px;
    font-size: 11pt;
    letter-spacing: 0.12em;
  }
  .admin-pane__head { font-size: 12pt; letter-spacing: 0.18em; padding: 12px 12px; }
  .admin-pane__foot { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .admin-input { font-size: 12pt; }
  .btn-sm { padding: 6px 10px; font-size: 11pt; letter-spacing: 0.12em; }
}

/* Auth card — keep readable on mobile */
@media (max-width: 480px) {
  .auth__card { width: 92vw !important; padding: 28px 20px !important; }
  .auth__title { font-size: 36px !important; }
  .auth__sub   { font-size: 11pt !important; letter-spacing: 0.18em !important; }
}

/* ============================================================
   FULL-BLEED HERO BANNER on index — keep aspect aware
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 14px !important; }
}