/* Navbar Web Component Styles */
.arcade-navbar {
  position: fixed;
  box-sizing: border-box;
  top: 0; left: 0; right: 0;
  height: calc(var(--navbar-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: hsla(250, 25%, 5%, 0.92);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  z-index: var(--z-navbar);
  transition: border-color var(--transition-base);
}

.arcade-navbar.navbar-animate-in {
  animation: navbar-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes navbar-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top accent line */
.arcade-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(160,100%,50%,0.6) 30%,
    hsl(280,80%,55%,0.6) 70%,
    transparent 100%
  );
}

.arcade-navbar:hover {
  border-bottom-color: hsl(160,100%,50%,0.3);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

.navbar-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--clr-neon-green);
  text-decoration: none;
  text-shadow: var(--glow-green);
  flex-shrink: 0;
}
.navbar-logo span { color: var(--clr-neon-purple); text-shadow: var(--glow-purple); }
.navbar-logo .logo-sub {
  display: block;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: hsl(45,100%,60%);
  text-shadow: none;
  margin-bottom: 2px;
  opacity: 0.9;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.navbar-links a {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--clr-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.nav-active-bar {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}

.navbar-links a:hover .nav-icon,
.navbar-links a.active .nav-icon {
  opacity: 1;
}

.navbar-links a:hover {
  color: var(--clr-text-primary);
  background: hsl(250,20%,14%);
  border-color: var(--clr-border);
}

.navbar-links a.active {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* The wallet is one control with two readings. Two separately bordered chips
   cost ~40px of border, padding and gap that the row could not spare between
   769px and 1300px, and were hidden outright on phones. */
.navbar-wallet {
  /* It is a <button> now, so the UA's default padding has to go: left in, it
     widened the row by ~34px and pushed it past the window edge at 1600px. */
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  background: var(--clr-bg-raised);
  overflow: visible;
}
.navbar-wallet-icon { display: none; place-items: center; color: var(--clr-cc); }
.navbar-wallet > * { border-radius: 0; }
.navbar-wallet > :first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.navbar-wallet > :last-child { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
.navbar-wallet .navbar-cc { border: 0; border-right: 1px solid var(--clr-border); background: transparent; }
.navbar-wallet .navbar-ac { border: 0; background: transparent; }

.navbar-cc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid var(--clr-cc);
  color: var(--clr-cc);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
  position: relative;
  user-select: none;
}
.navbar-cc:hover { box-shadow: var(--glow-cc); }
.navbar-cc .cc-amount { font-size: 0.65rem; }

.navbar-ac {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: hsl(280,80%,30%,0.2);
  border: 1px solid hsl(280,80%,55%);
  color: hsl(280,80%,80%);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.navbar-ac:hover {
  background: hsl(280,80%,30%,0.35);
  box-shadow: 0 0 12px hsl(280,80%,55%,0.5);
}
.navbar-ac .ac-icon {
  width: 1.35em;
  height: 1.35em;
}
.navbar-ac .ac-amount { font-size: 0.65rem; color: hsl(280,80%,85%); }

.navbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  position: relative;
}

.navbar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--clr-neon-green);
  background: var(--clr-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-neon-green);
  transition: box-shadow var(--transition-fast);
}
.navbar-avatar:hover { box-shadow: var(--glow-green); }

.navbar-user-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--clr-bg-raised);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 160px;
  z-index: var(--z-dropdown);
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.navbar-user-menu.open { display: flex; animation: slide-down var(--transition-fast) ease; }

.navbar-user-menu a,
.navbar-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--clr-text-secondary);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.navbar-user-menu a:hover,
.navbar-user-menu button:hover {
  color: var(--clr-neon-cyan);
  background: var(--clr-bg-surface);
}
.navbar-user-menu .menu-divider {
  height: 1px;
  background: var(--clr-border);
  margin: var(--space-1) 0;
}
.navbar-user-menu .logout-btn {
  color: var(--clr-neon-pink);
}
.navbar-user-menu .logout-btn:hover {
  color: var(--clr-neon-pink);
  background: rgba(255, 107, 53, 0.12);
}

/* ── Profile dropdown header ───────────────────────────────────────── */
.navbar-menu-profile {
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.navbar-menu-username {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--clr-neon-cyan);
}
.navbar-menu-title {
  font-size: 0.68rem;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* ── XP bar ────────────────────────────────────────────────────────── */
.navbar-xp-block {
  margin-top: var(--space-3);
}
.navbar-xp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.navbar-xp-level {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: hsl(160, 100%, 55%);
  letter-spacing: 0.06em;
}
.navbar-xp-value {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--clr-text-muted);
}
.navbar-xp-track {
  width: 100%;
  height: 5px;
  background: hsl(250, 20%, 18%);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid hsl(160, 100%, 50%, 0.15);
}
.navbar-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(160, 100%, 45%), hsl(200, 100%, 60%));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px hsl(160, 100%, 50%, 0.6);
}

/* Auth buttons */
.navbar-auth-btn {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
}

/* Mobile hamburger */
.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  background: transparent;
  border: none;
}
.navbar-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--clr-neon-cyan);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ── Making the row fit ──────────────────────────────────────────────────────
   Measured, signed in: logo 163 + seven labelled links 744 + right cluster 458
   = 1,365px of content, which with gaps and padding needs ~1,445px — inside a
   container capped at --max-width: 1280px. Because .navbar-right is
   flex-shrink: 0, every pixel of overflow landed on the links, and at 1280px
   the right-hand controls were pushed past the window edge entirely.

   Two tiers now. Below 1440px the row drops words it can afford to lose (the
   logo's kicker, your name beside the avatar, the CC/AC labels) — about 180px —
   so the seven link labels survive on a laptop. Below 1360px the links
   themselves go icon-only, which is what keeps everything reachable on a
   tablet. Nothing is ever pushed off-screen. */
@media (max-width: 1440px) {
  .navbar-logo .logo-sub { display: none; }
  .navbar-player-name { display: none; }
  .navbar-cc .cc-label, .navbar-ac .ac-label { display: none; }
}

@media (max-width: 1360px) {
  .navbar-links { gap: 2px; }
  .navbar-links .nav-label { display: none; }
  .navbar-links a { padding: var(--space-2); }
  .navbar-logo .logo-sub { display: none; }
}

@media (max-width: 768px) {
  .navbar-links { display: none; }
  .navbar-hamburger { display: none; }
  .navbar-cc .cc-label { display: none; }
  /* Phones: the signed-in cluster (chat · bell · FR · CC · AC · avatar) ran ~150px past the
     right edge, so AC and the avatar were unreachable. The player chip now carries wallet
     and friends one tap away, so the standalone CC / AC controls yield on small screens. */
  /* Measured at 390px: chat + bell + friends + you already fill the row, so the
     balances cannot stay — but hiding the whole wallet left phones with no way
     to reach it at all. It collapses to a 34px icon opening the same drawer,
     which fits because both balance spans leave the row entirely. */
  .navbar-wallet {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .navbar-wallet .navbar-cc,
  .navbar-wallet .navbar-ac { display: none; }
  .navbar-wallet-icon { display: grid; }
  .navbar-right { gap: var(--space-2); }
  .page-content { padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important; } /* bottom-nav 62px + ticker 36px + buffer */
}

/* Narrow phones: the logged-out bar (logo + chat + Login + Register) ran past
   the right edge at 390px and clipped the Register control. Drop the logo's
   kicker line and tighten the buttons so both actions stay fully reachable. */
@media (max-width: 480px) {
  .navbar-logo .logo-sub { display: none; }
  .navbar-right { gap: var(--space-2); }
  .navbar-auth-btn { padding: var(--space-2) var(--space-3); letter-spacing: 0.04em; }
}

/* ── Mobile Bottom Navigation ────────────────────────────────────────────── */
.navbar-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .navbar-bottom-nav {
    display: flex;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    z-index: var(--z-navbar);
    background: hsl(250,25%,5%,0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--clr-border);
    align-items: stretch;
    justify-content: space-around;
  }
  .navbar-bottom-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, hsl(160,100%,50%,0.35) 40%, hsl(280,80%,55%,0.35) 60%, transparent 95%);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: hsl(220,15%,50%);
    transition: color 0.2s;
    position: relative;
    padding-top: 4px;
  }
  .bottom-nav-icon {
    display: flex;
    align-items: center;
  }
  .bottom-nav-label {
    font-family: var(--font-display);
    font-size: 0.48rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .bottom-nav-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    border-radius: 0 0 3px 3px;
  }
}

/* ── Chat trigger button ──────────────────────────────────────────────────── */
.navbar-chat-btn {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--clr-text-secondary);
  font-size: 1rem;
  line-height: 1;
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.navbar-chat-btn:hover,
.navbar-chat-btn[aria-expanded="true"] {
  color: var(--clr-neon-orange);
  border-color: var(--clr-border);
  background: rgba(0, 240, 255, 0.06);
}

.navbar-chat-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--clr-neon-red);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.5rem;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 1px 4px;
  min-width: 0.9rem;
  text-align: center;
  animation: pulse-badge 1.5s ease infinite;
}

/* ── Friend request notifications ───────────────────────────── */
.navbar-friends-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-friends-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.navbar-friends-btn:hover,
.navbar-friends-btn[aria-expanded="true"] {
  color: var(--clr-neon-cyan);
  border-color: var(--clr-border);
  background: rgba(0, 240, 255, 0.06);
}

.navbar-friends-icon {
  font-family: var(--font-pixel);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.navbar-friends-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 0.95rem;
  padding: 1px 4px;
  border-radius: var(--radius-pill);
  background: var(--clr-neon-red);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  font-family: var(--font-ui);
  text-align: center;
  animation: pulse-badge 1.5s ease infinite;
}

.navbar-friends-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 270px;
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg-raised);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: var(--z-dropdown);
}

.navbar-friends-menu.open {
  display: flex;
  animation: slide-down var(--transition-fast) ease;
}

.navbar-friends-title {
  padding: var(--space-2) var(--space-2) var(--space-1);
  color: var(--clr-neon-cyan);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar-friend-request {
  display: grid;
  grid-template-columns: 30px 1fr 28px 28px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
}

.navbar-friend-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(160,100%,50%,0.35);
  color: var(--clr-neon-green);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 900;
}

.navbar-friend-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar-friend-copy strong,
.navbar-friend-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-friend-copy strong {
  color: var(--clr-text-primary);
  font-size: 0.72rem;
}

.navbar-friend-copy small {
  color: var(--clr-text-muted);
  font-size: 0.62rem;
}

.navbar-friend-accept,
.navbar-friend-decline {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  font-weight: 900;
}

.navbar-friend-accept {
  color: var(--clr-neon-green);
  background: hsl(160,100%,45%,0.12);
}

.navbar-friend-decline {
  color: var(--clr-neon-pink);
  background: hsl(330,90%,55%,0.1);
}

.navbar-friends-empty {
  padding: var(--space-3);
  color: var(--clr-text-muted);
  font-size: 0.72rem;
}
.navbar-friends-all {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-top: 1px solid var(--clr-border);
  color: var(--clr-neon-cyan);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
}
.navbar-friends-all:hover { background: hsl(185 100% 55% / 0.08); }

/* ── Notification bell ──────────────────────────────────────── */
.navbar-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.navbar-bell-btn:hover,
.navbar-bell-btn[aria-expanded="true"] {
  color: var(--clr-neon-cyan);
  border-color: var(--clr-border);
  background: rgba(0, 240, 255, 0.06);
}

.navbar-bell-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.navbar-bell-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 0.95rem;
  padding: 1px 4px;
  border-radius: var(--radius-pill);
  background: var(--clr-neon-red);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  font-family: var(--font-ui);
  text-align: center;
  animation: pulse-badge 1.5s ease infinite;
}

.navbar-bell-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 270px;
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg-raised);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: var(--z-dropdown);
}

.navbar-bell-menu.open {
  display: flex;
  animation: slide-down var(--transition-fast) ease;
}

.navbar-bell-title {
  padding: var(--space-2) var(--space-2) var(--space-1);
  color: var(--clr-neon-cyan);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar-bell-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: inherit;
}

.navbar-bell-item:hover {
  border-color: var(--clr-border);
  background: rgba(0, 240, 255, 0.06);
}

.navbar-bell-item-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.navbar-bell-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar-bell-copy strong,
.navbar-bell-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-bell-copy strong {
  color: var(--clr-text-primary);
  font-size: 0.72rem;
}

.navbar-bell-copy small {
  color: var(--clr-text-muted);
  font-size: 0.62rem;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

/* ── Friends: one entry point per width ──────────────────────────────────────
   Above 768px the bottom-left dock (quick-dock.css) is the way in,
   so the navbar drops its own control and gets that width back. At or below
   768px the bubble stands down — the bottom edge is the tab bar — and this
   button is the entry point instead. Declared last so it wins the cascade
   against the base .navbar-friends-wrap rule above. */
@media (min-width: 769px) {
  .navbar-friends-wrap { display: none; }
}

/* ── The level on a phone ────────────────────────────────────────────────────
   A pill beside the name costs ~50px the row does not have at 390px, so on
   phones the level rides the avatar's corner instead: same information, no
   width. The name drops; the level never does. */
@media (max-width: 768px) {
  .navbar-player { position: relative; padding: 2px; }
  .navbar-player-name { display: none; }
  .navbar-player-level {
    position: absolute; right: -4px; bottom: -4px;
    font-size: 0.56rem; letter-spacing: 0.02em; padding: 1px 5px;
    border: 2px solid hsl(250 25% 8%);
    box-shadow: none;
  }
}

/* Small phones (360px and under — SE, older Androids). Measured 380px of content
   in a 360px window, so the row tightens: a smaller wordmark and narrower gaps
   buy back the ~20px rather than letting the avatar slide off the edge. */
@media (max-width: 400px) {
  .arcade-navbar .navbar-inner { padding: 0 var(--space-3); gap: var(--space-2); }
  .navbar-logo { font-size: 0.82rem; letter-spacing: 0.02em; }
  .navbar-right { gap: 6px; }
  .navbar-chat-btn { width: 34px; height: 34px; font-size: 0.9rem; }
}

/* Wide screens: let the bar use the width the screen actually has.
   .navbar-inner is capped at --max-width (1280px) at every window size, but a
   row carrying seven labelled links needs ~1,500px: logo 163 + links 744 +
   right cluster 514 + gaps 32 + padding 48. Below 1441px the labels are shed
   and the leftover overflow is absorbed by the container's side margins, so it
   still fits the window. Above that the labels return, the margins grow, and
   the overflow lands past the window edge instead — measured 1,634px of content
   inside a 1,600px window, with the player chip clipped. This was true before
   the wallet became one control; that change made it 20px narrower, not worse. */
@media (min-width: 1441px) {
  .navbar-inner { max-width: min(1560px, calc(100% - 2 * var(--space-6))); }
}