.stat-label-short { display: none; }
.mobile-menu-toggle, .topbar nav a.mobile-admin-link { display: none; }
.topbar nav { min-width: 0; gap: 8px; overflow-x: auto; padding: 5px 2px; scrollbar-width: thin; }
.topbar nav a,
.topbar .account-actions > .account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #46517e;
  border-radius: 9px;
  background: #1b2341;
  color: #dce3ff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.topbar nav a:hover,
.topbar .account-actions > .account-link:hover { color: #fff; background: #30395e; border-color: #94a1de; }
.topbar nav a[aria-current="page"],
.topbar nav a.active { color: #fff; background: linear-gradient(110deg, #334d8b, #593583); border-color: #ba92ff; }
.topbar .account-actions > .account-link { background: #302345; border-color: #9270c5; }
.topbar nav a:focus-visible,
.topbar .account-actions > .account-link:focus-visible { outline: 2px solid #c5a1ff; outline-offset: 2px; }
.topbar > .admin-button {
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #aeb9ce;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
}
.topbar > .admin-button:hover { color: #fff; background: rgba(255,255,255,.05); }
.topbar > .admin-button:focus-visible { outline: 2px solid #a76aff; outline-offset: 3px; }
@media (max-width: 1100px) {
  .topbar {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 10px 14px 0;
  }
  .topbar .brand { min-width: 0; font-size: 15px; letter-spacing: .5px; min-height: 44px; }
  .topbar .brand > span { white-space: nowrap; }
  .topbar .brand-logo { flex-shrink: 0; max-width: 42px; max-height: 34px; }
  .topbar > .admin-button { grid-column: 2; grid-row: 1; padding: 10px; font-size: 12px; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .topbar .header-partners { display: none; }
  .topbar nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .topbar nav a { font-size: 13px; }
  .topbar > .account-actions { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 7px 0 10px; }
}
@media (max-width: 650px) {
  .stat-label-long { display: none; }
  .stat-label-short { display: inline; text-decoration: none; }
  .ranking-panel th { white-space: nowrap; letter-spacing: 0; }
}
/* Phone-only layout; the existing tablet and desktop navigation stays intact. */
@media (max-width: 730px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 16px; }
  .topbar .brand { grid-column: 1 / -1; grid-row: 1; }
  .topbar > .account-actions { grid-column: 1; grid-row: 2; margin: 0; justify-self: start; gap: 5px; }
  .topbar .account-actions > .account-link { font-size: 12px; padding: 9px 6px; }
  .topbar > .mobile-menu-toggle { font-size: 12px; padding-inline: 8px; }
  .topbar > .admin-button { display: none; }
  .topbar > .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 2; min-height: 44px; padding: 9px 14px; border: 1px solid #9270c5; border-radius: 9px; color: #f6f7ff; background: #302345; font-size: 14px; font-weight: 600; cursor: pointer; }
  .mobile-menu-toggle:focus-visible { outline: 2px solid #c5a1ff; outline-offset: 2px; }
  .topbar > nav { display: none; grid-column: 1 / -1; grid-row: 3; padding: 8px 2px 2px; overflow-x: hidden; overflow-y: auto; max-height: calc(100dvh - 150px); }
  .topbar.mobile-menu-open > nav { display: flex; flex-direction: column; gap: 6px; }
  .topbar nav a, .topbar nav a.mobile-admin-link { display: flex; width: 100%; justify-content: flex-start; min-height: 44px; white-space: normal; }
  .topbar nav a.mobile-admin-link { margin-top: 6px; border-color: #9270c5; }
  .topbar .account-actions > .account-link[aria-current="page"] { border-color: #ba92ff; background: linear-gradient(110deg, #334d8b, #593583); }
}
.topbar > .account-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar .account-actions > .account-link[hidden] { display: none; }
.topbar .vip-coming-soon-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid #ffe39a;border-radius:9px;background:linear-gradient(120deg,#967020,#f9dfa0 45%,#d7a73a 75%,#ffe7a6);color:#302008;font:700 13px inherit;font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 0 14px #d7a73a38}
.topbar .vip-coming-soon-button:hover{filter:brightness(1.1)}
.vip-coming-soon-button:focus-visible,.vip-coming-soon-dialog button:focus-visible{outline:2px solid #ffe39a;outline-offset:3px}
.vip-coming-soon-dialog{box-sizing:border-box;width:min(360px,calc(100vw - 32px));padding:30px;text-align:center;color:#ffe5a1;background:#15162d;border:1px solid #d7a73a;border-radius:16px;box-shadow:0 0 35px #d7a73a30}
.vip-coming-soon-dialog::backdrop{background:#000a}
.vip-coming-soon-dialog h2{margin:0 0 24px;font-size:30px}
.vip-coming-soon-dialog button{min-height:44px;padding:8px 20px;border:1px solid #d7a73a;border-radius:8px;background:#29243a;color:#ffe5a1;cursor:pointer}
@media(max-width:730px){.topbar > .account-actions{flex-wrap:wrap;min-width:0;max-width:100%}.topbar .vip-coming-soon-button{padding:9px 8px;font-size:12px}}


/* Keep partner hit areas inside their flex slot, including during zoom and image loading. */
.topbar > .header-partners { position:relative; z-index:0; min-width:0; flex-shrink:1; isolation:isolate; contain:paint; }
.topbar > .header-partners a { box-sizing:border-box; min-width:0; overflow:hidden; position:relative; }
.topbar > .header-partners img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.topbar > .account-actions { position:relative; z-index:1; isolation:isolate; }
