/* Shell CSS -- the styling shell.js's own elements need.
 *
 * Extracted from tennis.css, which is the fleet base stylesheet despite the name.
 * footy has its own design system (footy.css), so adopting the shell there must not
 * mean adopting a second full stylesheet. These are only the rules for the elements
 * shell.js creates: .burger, .drawer, .drawer-scrim, .drawer-search, .tabbar.
 */
/* ---------- mobile drawer + app-shell polish (Phase 4) ---------- */
.burger{display:none;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer;margin-left:8px;width:44px;height:44px;line-height:1;align-items:center;justify-content:center}

@media(max-width:820px){
  .nav{display:none}
  .burger{display:flex}
  input[type=search]{font-size:16px}        /* stop iOS focus-zoom */
}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,330px);background:var(--panel-solid);
  border-left:1px solid var(--hair-2);z-index:320;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);padding:18px 18px calc(28px + env(safe-area-inset-bottom));
  overflow:auto;box-shadow:-22px 0 60px rgba(0,0,0,.55)}

.drawer.open{transform:none}

.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:310;opacity:0;pointer-events:none;transition:opacity .26s;backdrop-filter:blur(2px)}

.drawer-scrim.open{opacity:1;pointer-events:auto}

.drawer h4{color:var(--ink-3);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:16px 0 4px;font-weight:800}

.drawer a{display:block;padding:12px 11px;border-radius:10px;color:var(--ink);font-weight:700;font-size:15.5px}

.drawer a:active,.drawer a:hover{background:var(--panel-2);color:var(--optic)}

.drawer-close{background:none;border:0;color:var(--ink-2);font-size:26px;cursor:pointer;float:right;line-height:1;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}

.drawer [data-auth-slot]{margin-top:8px}

/* drawer player search (mobile: topbar search is hidden, this replaces it) */
.drawer-search{margin:4px 0 12px;clear:both}

.drawer-search .navsearch{display:block;width:100%;margin:0;box-sizing:border-box}

.drawer-search .navsearch:focus{width:100%}

.drawer-search-results{display:none;margin-top:8px;max-height:46vh;overflow:auto;border:1px solid var(--hair);border-radius:12px;background:var(--panel-2)}

.drawer-search-results.open{display:block}

.drawer-search-results a{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border-bottom:1px solid var(--hair);color:var(--ink);font-weight:700;font-size:14.5px}

.drawer-search-results a:last-child{border-bottom:0}

.drawer-search-results a:active,.drawer-search-results a:hover{background:var(--panel-solid);color:var(--optic)}

.drawer-search-results .r-tour{color:var(--ink-3);font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace}

.drawer-search-results .drawer-search-note{display:block;padding:11px 12px;color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.45}

/* ---------- standalone bottom tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;
  background:rgba(10,15,12,.92);border-top:1px solid var(--hair);backdrop-filter:blur(16px);
  padding-bottom:env(safe-area-inset-bottom)}

.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 7px;
  color:var(--ink-3);font-size:10.5px;font-weight:700;letter-spacing:.02em}

.tabbar a.active{color:var(--optic)}

.tabbar .ti{font-size:18px;line-height:1}

body.has-tabbar{padding-bottom:62px}

body.has-tabbar .install-banner{bottom:calc(70px + env(safe-area-inset-bottom))}

.navgrp-menu a.active,.drawer a.active{color:var(--optic)}

/* mobile: keep "Sign in"/account visible in the top bar (not just the drawer) */
.auth-mobile{display:none}

/* tightest screens: drop inline search to fit logo+login+menu */

/* --- mobile topbar packing fix (≤520px): keep one row, bell reachable --- */
/* The shared topbar packs logo + region switcher + sign-in + alert-bell +
   burger into one flex row. On phones that overflows the right edge and the
   alert-bell ends up off-screen/untappable. Fix: keep the row on one line,
   drop the topbar bell (its Alerts panel is reachable from the drawer), and
   collapse the Discord sign-in to an icon so everything fits. Desktop is
   untouched (all rules live inside this max-width media query). */
@media(max-width:520px){
  .topbar{flex-wrap:nowrap;gap:8px;overflow:visible;padding-left:14px;padding-right:14px}
  /* shrink the brand so the whole row fits one line at 360-390px */
  .logo{flex:0 1 auto;min-width:0;gap:8px}
  .crown{width:28px;height:28px;font-size:15px;flex:0 0 auto}
  .name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ca-sw{margin-left:6px;flex:0 0 auto}
  .auth-mobile{margin-left:auto;flex:0 0 auto;gap:6px}
  /* hide the topbar alert-bell on phones; Alerts is in the drawer instead */
  .topbar>.alert-bell{display:none!important}
  /* collapse "Sign in with Discord" to a short "Sign in" tap target */
  .auth-mobile .tk-discord{font-size:0;padding:8px 12px;line-height:1;white-space:nowrap}
  .auth-mobile .tk-discord::before{content:"Sign in";font-size:12px;font-weight:700;line-height:1}
  .burger{margin-left:2px;flex:0 0 auto}
  /* signed-in: keep the username from pushing the row wide */
  .auth-mobile .tk-user{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* drawer "Alerts" item (mobile): matches the drawer link look, lives in Account */
.drawer-alerts{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  color:var(--ink);font-weight:700;font-size:15.5px;font-family:inherit;text-align:left;
  padding:12px 11px;border-radius:10px;cursor:pointer;margin-top:6px}

.drawer-alerts:active,.drawer-alerts:hover{background:var(--panel-2);color:var(--optic)}

.drawer-alerts .db-n{margin-left:auto;background:var(--optic);color:#0a0f0c;font-size:11px;
  font-weight:800;min-width:18px;height:18px;border-radius:999px;align-items:center;
  justify-content:center;padding:0 5px;font-family:'Hanken Grotesk',sans-serif}

.has-tabbar .slip-badge{bottom:74px}