/*
  Galactic Conquest — Mobile App Shell
  ------------------------------------
  Sticky top bar + stats strip + bottom nav + slide-over drawer.
  Active only on <768px. Desktop layout unchanged.
  Uses tokens from theme.css so all three themes "just work".
*/

/* Turn bank full: whole mobile stat pill matches desktop gc-stat--turns-capped (theme.css keyframes) */
.app-stat--turns.app-stat--turns-capped {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--stat-turns) 48%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--stat-turns) 22%, transparent),
    0 0 12px 1px color-mix(in srgb, var(--stat-turns) 30%, transparent),
    0 0 24px 3px color-mix(in srgb, var(--stat-turns) 16%, transparent);
}
.app-stat--turns.app-stat--turns-capped::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 95% at 50% 78%,
    color-mix(in srgb, var(--stat-turns) 38%, transparent) 0%,
    color-mix(in srgb, var(--stat-turns) 14%, transparent) 42%,
    transparent 72%
  );
  animation: gc-turns-capped-pulse 2.6s ease-in-out infinite;
}
.app-stat--turns.app-stat--turns-capped .app-stat__label,
.app-stat--turns.app-stat--turns-capped .app-stat__value {
  position: relative;
  z-index: 1;
}
.app-stat--turns.app-stat--turns-capped .app-stat__value {
  text-shadow:
    0 0 4px var(--stat-turns),
    0 0 10px color-mix(in srgb, var(--stat-turns) 55%, transparent);
}
body[data-theme="classic"] .app-stat--turns.app-stat--turns-capped {
  border-color: color-mix(in srgb, var(--stat-turns) 55%, #2a4566);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--stat-turns) 28%, transparent),
    0 0 16px 2px color-mix(in srgb, var(--stat-turns) 35%, transparent),
    0 0 32px 5px color-mix(in srgb, var(--stat-turns) 18%, transparent);
}
body[data-theme="classic"] .app-stat--turns.app-stat--turns-capped .app-stat__value {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.65),
    0 0 4px var(--stat-turns),
    0 0 10px color-mix(in srgb, var(--stat-turns) 50%, transparent);
}
body[data-theme="nebula"] .app-stat--turns.app-stat--turns-capped {
  border-color: color-mix(in srgb, var(--stat-turns) 42%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--stat-turns) 20%, transparent),
    0 0 18px 2px color-mix(in srgb, var(--stat-turns) 32%, transparent),
    0 0 36px 5px color-mix(in srgb, var(--stat-turns) 18%, transparent);
}
body[data-theme="nebula"] .app-stat--turns.app-stat--turns-capped::before {
  background: radial-gradient(
    ellipse 115% 100% at 50% 85%,
    color-mix(in srgb, var(--stat-turns) 45%, transparent) 0%,
    color-mix(in srgb, var(--stat-turns) 16%, transparent) 48%,
    transparent 78%
  );
}
@media (prefers-reduced-motion: reduce) {
  .app-stat--turns.app-stat--turns-capped::before {
    animation: none;
    opacity: 0.9;
  }
}


/* =========================================================
   MOBILE BREAKPOINT GUARD
   Everything below only renders on screens < 768px.
   ========================================================= */
.app-shell,
.app-drawer {
  display: none;
}

@media (max-width: 767.98px) {

  .app-shell {
    display: contents;
  }

  /* Suppress the legacy mobile nav/stats chrome so we don't double up.
     The pages rely on .mobileShow divs for OTHER content, so be specific. */
  .icon-bar2M,
  .icon-bar3M,
  .mobileShow > .card,
  .mobileShow > .icon-bar,
  .buttonN-group,
  .app-desktop-only {
    display: none !important;
  }
  /* Collapse the legacy top section/container gap that causes a thin
     bar above the app-shell topbar on mobile. */
  #blog {
    margin-top: 0 !important;
  }
  #blog > .container {
    padding-top: 0 !important;
  }
  #blog > .container > .row {
    margin-top: 0 !important;
  }
  /* Legacy pages often gate their actual feature markup behind
     .mobileShow/.mobileHide wrappers. Force viewport-based behavior
     here so phone layouts don't depend on old device-width media queries. */
  .mobileShow { display: block !important; }
  .mobileHide { display: none !important; }

  /* Main content offset to clear sticky top (48) + stats (44) + bottom nav (64). */
  body[data-theme] .mobile-main-offset,
  body .col-lg-8.col-sm-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    border-top: none !important;
  }

  /* On modern themes the legacy inline black panel + ridge border
     of the main content column clashes with a light-ink aesthetic.
     Override it to a surface-color card. Classic keeps the original. */
  body[data-theme="nebula"] .col-lg-8.col-sm-12,
  body[data-theme="daylight"] .col-lg-8.col-sm-12 {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    margin: 0 6px;
    min-height: 0 !important;
    box-shadow: var(--shadow-sm);
  }

  /* Yellow msg bar squeezes tighter on mobile */
  #topnavbar { padding: 6px 12px !important; font-size: 12px; }

  /* Existing bootstrap container gutters hurt on small screens */
  .container, .container-fluid { padding-left: 8px; padding-right: 8px; }
}


/* =========================================================
   TOP BAR (sticky)
   ========================================================= */
@media (max-width: 767.98px) {

  .app-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border);
  }

  .app-topbar__menu,
  .app-topbar__search,
  .app-topbar__pm,
  .app-topbar__evt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 16px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }
  .app-topbar__menu:hover,
  .app-topbar__search:hover,
  .app-topbar__pm:hover,
  .app-topbar__evt:hover { border-color: var(--border-strong); }

  .app-topbar__evt[data-has-evt="1"] {
    background: #f5c518;
    border-color: #f5c518;
    color: #1a1a2e;
  }

  .app-topbar__brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    text-decoration: none;
    min-width: 0;
  }
  .app-topbar__brand-mark {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .app-topbar__brand-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1px;
  }

  .app-topbar__dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-hot);
    box-shadow: 0 0 0 2px var(--bg-overlay);
  }
  .app-topbar__pm:not([data-has-pm="1"]) .app-topbar__dot { display: none; }

  /* An unread System message fills the whole button orange, the same way the
     events button fills yellow — at 40px a corner dot is too small to read as
     "you must open this". The dot is dropped once the box itself is the
     signal; a dot on top of the fill would only muddy it. */
  .app-topbar__pm[data-pm-system="1"] {
    background: #f97316;
    border-color: #f97316;
    color: #1a1a2e;
  }
  .app-topbar__pm[data-pm-system="1"] .app-topbar__dot { display: none; }
}


/* =========================================================
   STATS STRIP (sticky, below top bar)
   ========================================================= */
@media (max-width: 767.98px) {

  .app-statsbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px 8px;
    position: sticky;
    top: 48px;
    z-index: 55;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border);
  }

  .app-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
  }
  .app-stat[href]:hover,
  .app-stat[href]:focus {
    border-color: var(--border-strong);
    text-decoration: none;
    outline: none;
  }

  .app-stat__label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
  }
  .app-stat__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .app-stat__num-full {
    display: none;
  }
  .app-stat__num-abbrev {
    display: inline;
  }

  .app-stat--cash .app-stat__value  { color: var(--stat-cash); }
  .app-stat--food .app-stat__value  { color: var(--stat-food); }
  .app-stat--power .app-stat__value { color: var(--stat-power); }
  .app-stat--turns .app-stat__value { color: var(--stat-turns); }
}


/* =========================================================
   DRAWER FOOTER INFO (server time, users online, dig now)
   Sits at the bottom of the "More" drawer panel on all themes.
   Layout: server time on its own line; users online + dig times
   as two side-by-side buttons below it.
   ========================================================= */
.app-drawer__footer-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-overlay));
  font-family: var(--font-mono, var(--font-body));
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.app-drawer__footer-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.app-drawer__footer-time i {
  font-size: 13px;
  opacity: 0.85;
}

.app-drawer__footer-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.app-drawer__footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent, var(--text-primary));
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-drawer__footer-btn i {
  font-size: 13px;
  line-height: 1;
  opacity: 0.9;
  flex: 0 0 auto;
}

.app-drawer__footer-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-drawer__footer-btn:hover,
.app-drawer__footer-btn:focus {
  border-color: var(--border-strong, var(--accent));
  color: var(--text-primary);
  text-decoration: none;
  outline: none;
}


/* =========================================================
   BOTTOM NAV (fixed)
   ========================================================= */
@media (max-width: 767.98px) {

  .app-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--border);
  }

  .app-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 6px 4px;
    position: relative;
    transition: color var(--dur-fast) var(--ease);
  }
  .app-bottomnav__item i {
    font-size: 18px;
    line-height: 1;
  }
  .app-bottomnav__item span {
    font-size: 10.5px;
    white-space: nowrap;
  }
  .app-bottomnav__item:hover,
  .app-bottomnav__item:focus {
    color: var(--text-primary);
    outline: none;
  }
  .app-bottomnav__item[aria-current="page"] {
    color: var(--accent);
  }
  .app-bottomnav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
  }
}


/* =========================================================
   DRAWER (slide-over)
   ========================================================= */
@media (max-width: 767.98px) {

  .app-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  .app-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }

  .app-drawer__panel {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: min(340px, 86vw);
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.app-drawer-open .app-drawer { pointer-events: auto; }
  body.app-drawer-open .app-drawer__backdrop { opacity: 1; }
  body.app-drawer-open .app-drawer__panel { transform: translateX(0); }
  body.app-drawer-open { overflow: hidden; }

  .app-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .app-drawer__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .app-drawer__close {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .app-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .app-drawer__section {
    margin-bottom: 18px;
  }
  .app-drawer__section-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px;
    padding: 0 4px;
  }
  .app-drawer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .app-drawer__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .app-drawer__link:hover {
    border-color: var(--border-strong);
    text-decoration: none;
  }
  .app-drawer__link--wide { grid-column: 1 / -1; }
  .app-drawer__link--danger { color: var(--accent-hot); }
  .app-drawer__link--gold { color: var(--accent-gold); }
}


/* =========================================================
   TABLET SHELL (768px - 1199.98px)
   Dedicated in-between layout: keeps the shell chrome, but uses
   a sticky quick-nav band instead of the phone bottom dock.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {

  .app-shell {
    display: contents;
  }

  .app-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  .app-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }

  .app-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(420px, 46vw);
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.app-drawer-open .app-drawer { pointer-events: auto; }
  body.app-drawer-open .app-drawer__backdrop { opacity: 1; }
  body.app-drawer-open .app-drawer__panel { transform: translateX(0); }
  body.app-drawer-open { overflow: hidden; }

  .icon-bar2M,
  .icon-bar3M,
  .buttonN-group,
  .menu-navigation-dark,
  .slicknav_menu,
  .mobileShow > .icon-bar,
  .app-desktop-only {
    display: none !important;
  }

  .mobileShow { display: block !important; }
  .mobileHide {
    display: none !important;
  }

  body[data-theme] .mobile-main-offset,
  body .col-lg-8.col-sm-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
    border-top: none !important;
  }

  /* Both side columns are hidden in this range, so the main column has the
     row to itself, and it lines up with the announcement bar above it.

     Bootstrap does not know the side columns are gone: from 992px col-md-8
     still makes the column 66% wide and floats it left, and its .container
     is a fixed 750/970px that nothing inside can follow. So here:

       - the game container flexes to the body less 30px, which puts the
         row's -15px gutters exactly on the window edges (row = body);
       - the column takes the row less 20px, centred - the same as the bar,
         which is the body less its .container-fluid's 10px padding a side;
       - nebula and daylight cap the bar at 900px (theme.css #topnavbar),
         so they cap the column too. Classic's bar has no cap.

     Scoped to the page column (.container > .row >) so a nested
     .col-lg-8.col-sm-12 inside a page keeps its own width. */
  .container:has(> .row > .col-lg-8.col-sm-12) {
    width: calc(100% - 30px);
  }

  .container > .row > .col-lg-8.col-sm-12 {
    float: none;
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
  }

  body:is([data-theme="nebula"], [data-theme="daylight"]) .container > .row > .col-lg-8.col-sm-12 {
    max-width: 900px;
  }

  body[data-theme="nebula"] .col-lg-8.col-sm-12,
  body[data-theme="daylight"] .col-lg-8.col-sm-12 {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    margin: 0 8px;
    min-height: 0 !important;
    box-shadow: var(--shadow-sm);
  }

  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .app-topbar__menu,
  .app-topbar__search,
  .app-topbar__pm,
  .app-topbar__evt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }

  .app-topbar__evt[data-has-evt="1"] {
    background: #f5c518;
    border-color: #f5c518;
    color: #1a1a2e;
  }

  .app-topbar__brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    text-decoration: none;
    min-width: 0;
  }

  .app-topbar__brand-mark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }

  .app-topbar__brand-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .app-topbar__dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-hot);
    box-shadow: 0 0 0 2px var(--bg-overlay);
  }

  .app-topbar__pm:not([data-has-pm="1"]) .app-topbar__dot {
    display: none;
  }

  /* An unread System message fills the whole button orange, the same way the
     events button fills yellow — a corner dot is too small to read as "you
     must open this". The dot is dropped once the box itself is the signal. */
  .app-topbar__pm[data-pm-system="1"] {
    background: #f97316;
    border-color: #f97316;
    color: #1a1a2e;
  }

  .app-topbar__pm[data-pm-system="1"] .app-topbar__dot {
    display: none;
  }

  .app-statsbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 10px;
    position: sticky;
    top: 56px;
    z-index: 55;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .app-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
  }
  .app-stat[href]:hover,
  .app-stat[href]:focus {
    border-color: var(--border-strong);
    text-decoration: none;
    outline: none;
  }

  .app-stat__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
  }

  .app-stat__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 3px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .app-stat__num-full {
    display: none;
  }
  .app-stat__num-abbrev {
    display: inline;
  }

  .app-stat--cash .app-stat__value  { color: var(--stat-cash); }
  .app-stat--food .app-stat__value  { color: var(--stat-food); }
  .app-stat--power .app-stat__value { color: var(--stat-power); }
  .app-stat--turns .app-stat__value { color: var(--stat-turns); }

  .app-bottomnav {
    position: sticky;
    top: 130px;
    z-index: 54;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .app-bottomnav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }

  .app-bottomnav__item i {
    font-size: 15px;
    line-height: 1;
  }

  .app-bottomnav__item span {
    font-size: 12px;
    white-space: nowrap;
  }

  .app-bottomnav__item:hover,
  .app-bottomnav__item:focus {
    color: var(--text-primary);
    border-color: var(--border-strong);
    outline: none;
  }

  .app-bottomnav__item[aria-current="page"] {
    color: var(--accent);
    border-color: var(--accent);
  }

  .app-bottomnav__item[aria-current="page"]::before {
    display: none;
  }

  .app-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
  }

  .app-drawer__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .app-drawer__close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .app-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
  }

  .app-drawer__section {
    margin-bottom: 20px;
  }

  .app-drawer__section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
    padding: 0 4px;
  }

  .app-drawer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .app-drawer__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .app-drawer__link:hover {
    border-color: var(--border-strong);
    text-decoration: none;
  }

  .app-drawer__link--wide { grid-column: 1 / -1; }
  .app-drawer__link--danger { color: var(--accent-hot); }
  .app-drawer__link--gold { color: var(--accent-gold); }
}

/* =========================================================
   CLASSIC THEME: lift the topbar so buttons are visible.
   ========================================================= */
body[data-theme="classic"] .app-topbar {
  background: rgba(30, 30, 40, 0.96);
}

/* =========================================================
   UTILITY: keep the shell off true desktop widths.
   ========================================================= */
@media (min-width: 1200px) {
  .app-shell,
  .app-drawer,
  .app-search,
  .app-bottomnav,
  .app-topbar,
  .app-statsbar,
  .app-footer-info { display: none !important; }
}

/* =========================================================
   SEARCH SHEET (topbar magnifier -> i_gsearch.cfm, JS/gc-search.js)
   Drops over the top bar; the search box itself is styled in theme.css.
   ========================================================= */
.app-search { display: none; }

@media (max-width: 1199.98px) {
  body.app-search-open { overflow: hidden; }

  body.app-search-open .app-search {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 75;
  }

  .app-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
  }

  .app-search__panel {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 12px;
    background: var(--bg-overlay);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  .app-search__panel .gc-gsearch {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .app-search__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 16px;
    cursor: pointer;
  }
  .app-search__close:hover { border-color: var(--border-strong); }
}