/* ── Layout V2 — Pure CSS overrides ───────────────────────────────────
   Scoped to body.layout-v2
   ──────────────────────────────────────────────────────────────────── */

/* ── NAV BAR — flat, cohesive, Twitch-style ──────────────────────────── */

/* ── NAV — Twitch-style flat bar ──────────────────────────────────────── */

/* Bar: pure dark, thin bottom border, no teal, no bleed-through */
body.layout-v2 #hdr {
  background: #0A0A0A !important;
  border-bottom: 1px solid #1A1A1A !important;
  height: 50px !important;
  padding: 0 10px !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 200 !important;
  isolation: isolate !important;
}

/* Hamburger — left-aligned */
body.layout-v2 #nav-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: none; border: none;
  color: #EFEFF1; cursor: pointer; flex-shrink: 0; padding: 0;
  border-radius: 6px; transition: background 0.12s;
  margin-right: 6px;
}
body.layout-v2 #nav-hamburger:hover { background: #1A1A1A; }
body.layout-v2 #nav-hamburger svg { width: 18px; height: 18px; }

/* Logo — compact */
body.layout-v2 #hdr .logo { flex-shrink: 0; }
body.layout-v2 #hdr .logo-sub { display: none !important; }

/* Search — centered in the nav bar */
body.layout-v2 #hdr-search-wrap {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 500px !important;
  width: 500px !important;
  min-width: 180px !important;
  margin: 0 !important;
  right: auto !important;
}

/* Right section stays right, flex for ordering */
body.layout-v2 .hright {
  margin-left: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Hide mobile search button on desktop */
body.layout-v2 #mob-search-btn { display: none !important; }

/* Hide nav clutter */
body.layout-v2 .hstats { display: none !important; }
body.layout-v2 #prize-pool-nav { display: none !important; }
body.layout-v2 #trial-banner { display: none !important; }
body.layout-v2 #whats-new-btn { display: none !important; }
body.layout-v2 #whats-new-dropdown { display: none !important; }
body.layout-v2 #arena-nav-btn { display: none !important; }

/* Right section — icons only, no text */
body.layout-v2 .hright {
  gap: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: auto !important;
  contain: none !important;
}

/* Frags balance — subtle chip, no border */
body.layout-v2 #frags-balance {
  background: #161616 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  margin-right: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #EFEFF1 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body.layout-v2 #frags-balance img,
body.layout-v2 #frags-balance svg,
body.layout-v2 #frags-balance .coin-icon {
  width: 16px !important;
  height: 16px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Remove border rings on the F coin — keep only the fill */
body.layout-v2 #frags-balance svg circle {
  stroke: none !important;
  stroke-width: 0 !important;
}

/* ALL icon buttons in nav — bare Twitch style.
   Excludes .hdr-dd-signout (the Sign Out button INSIDE the avatar dropdown);
   without this exception the dropdown sign-out gets squashed to 36px and the
   "Sign Out" label wraps + clips on the left. */
body.layout-v2 .hright button:not(#dev-toggle-btn):not(#layout-btn):not(#hdr-signin-btn):not(.rbtn):not(.ls-btn):not(.hdr-dd-signout):not(#whats-new-btn),
body.layout-v2 .hright .rbtn:not([onclick*="openBetTracker"]) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #555 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 16px !important;
  transition: color 0.12s, background 0.12s !important;
  flex-shrink: 0 !important;
}
body.layout-v2 .hright button:not(#dev-toggle-btn):not(#layout-btn):not(#hdr-signin-btn):not(.ls-btn):not(.hdr-dd-signout):not(#whats-new-btn):hover,
body.layout-v2 .hright .rbtn:not([onclick*="openBetTracker"]):hover {
  color: #888 !important;
  background: none !important;
}
body.layout-v2 .hright button:not(#layout-btn):not(#hdr-signin-btn):not(.ls-btn):not(.hdr-dd-signout):not(#whats-new-btn) svg,
body.layout-v2 .hright .rbtn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}
/* Dropdown (#layout-dropdown) buttons — undo width/height constraints */
body.layout-v2 #layout-dropdown button,
body.layout-v2 #layout-dropdown .ls-btn {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
body.layout-v2 #layout-dropdown svg {
  width: auto !important;
  height: auto !important;
}

/* Layout text button — styled properly */
body.layout-v2 .hright #layout-btn-wrap {
  position: relative;
  margin-right: 4px;
}
body.layout-v2 .hright #layout-btn {
  height: 30px !important;
  padding: 0 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: var(--text, #a8cfe0) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
}
body.layout-v2 .hright #layout-btn:hover {
  background: rgba(0,245,196,0.08) !important;
  border-color: rgba(0,245,196,0.3) !important;
  color: var(--acc, #00f5c4) !important;
}
body.layout-v2 #layout-slot-label {
  color: var(--acc, #00f5c4) !important;
  font-size: 10px !important;
}
body.layout-v2 #layout-dropdown {
  right: 0 !important;
  left: auto !important;
}

/* My Picks — handled at end of file */

/* Refresh button */
body.layout-v2 #rbtn { font-size: 16px !important; }

/* Avatar — clean 30px circle, no PRO badge, no extras */
body.layout-v2 #hdr-user-menu {
  margin-left: 8px !important;
  position: relative !important;
}
body.layout-v2 #hdr-avatar-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 30px !important;
  height: 30px !important;
  overflow: visible !important;
}
body.layout-v2 #hdr-avatar-circle {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
  border: none !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-indent: 0 !important;
}
body.layout-v2 #hdr-avatar-arrow { display: none !important; }
body.layout-v2 #hdr-avatar-btn > *:not(#hdr-avatar-circle) { display: none !important; }
body.layout-v2 #hdr-user-menu > *:not(#hdr-avatar-btn):not(#hdr-dropdown) { display: none !important; }
/* Hide PRO badge overlay — nuclear specificity */
body.layout-v2 #hdr #hdr-user-menu #hdr-avatar-btn #hdr-avatar-circle #hdr-avatar-pro-badge,
body.layout-v2 #hdr-avatar-pro-badge,
#hdr-avatar-pro-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}
body.layout-v2 #hdr-avatar-circle.is-pro::before,
body.layout-v2 #hdr-avatar-circle.is-pro::after {
  display: none !important;
  content: none !important;
}

/* Hide badge counts */
body.layout-v2 #chat-drawer-badge { display: none !important; }
body.layout-v2 #arena-nav-dot { display: none !important; }

/* Chat bubble — hide emoji, show SVG icon instead */
body.layout-v2 #chat-drawer-btn { font-size: 0 !important; color: transparent !important; }

/* Lightning/whats-new — moved into avatar dropdown menu, force-hide everywhere */
body.layout-v2 #whats-new-btn { display: none !important; }
body.layout-v2 #whats-new-dropdown { display: none !important; }
body.layout-v2 #whats-new-dot { display: none !important; }

/* Dev indicator */
body.layout-v2 #dev-indicator { gap: 4px !important; }

/* ── HIDE SOCIAL PANEL (gcol-4) ──────────────────────────────────────── */
body.layout-v2 #gcol-4 { display: none !important; }
body.layout-v2 #vsplit-3 { display: none !important; }

/* ── HIDE BOTTOM ZONE (not ready yet) ────────────────────────────────── */
body.layout-v2 #v2-bottom-zone { display: none !important; }

/* ── SIDEBAR (gcol-1) — dark background, no blue ─────────────────────── */
body.layout-v2 #gcol-1 { background: #0A0A0C !important; transition: width 180ms ease, flex-basis 180ms ease; }
body.layout-v2 #gcol-1.v2-collapsed { overflow: hidden; }
body.layout-v2 #gcol-1 .panel { background: #0A0A0C !important; border: none !important; border-radius: 0 !important; }
body.layout-v2 #gcol-1 .ph { background: #0A0A0C !important; border-bottom: 1px solid #161616 !important; padding: 6px 14px !important; }
body.layout-v2 #gcol-1 .pb { background: #0A0A0C !important; }

/* ── ALL PANELS — override blue tint to dark ─────────────────────────── */
body.layout-v2 .panel { background: #0B0E14 !important; }
body.layout-v2 #panel-live-stream { background: #080B12 !important; }
body.layout-v2 #panel-arena { background: #0B0E14 !important; }
body.layout-v2 #panel-match-centre { background: #0B0E14 !important; }

/* ── SIDEBAR MATCH ROWS ──────────────────────────────────────────────── */

/* Hide team logos */
body.layout-v2 #gcol-1 .mrow-logos { display: none !important; }
/* Hide bell/alert buttons */
body.layout-v2 #gcol-1 .mrow button[onclick*="toggleWatch"] { display: none !important; }
/* Hide conf coin */
body.layout-v2 #gcol-1 .mrow-conf-coin { display: none !important; }
/* Hide sub text (game · tournament line) — keep title visible */
body.layout-v2 #gcol-1 .mrow-sub { display: none !important; }
/* Hide status label text */
body.layout-v2 #gcol-1 .mrow-status-label { display: none !important; }
/* Hide live-pip countdown text */
body.layout-v2 #gcol-1 .mrow-live-pip { display: none !important; }
/* Hide arena pick coin */
body.layout-v2 #gcol-1 .mrow-pick-coin { display: none !important; }

/* Row layout — clean and compact */
body.layout-v2 #gcol-1 .mrow {
  padding: 9px 14px !important;
  gap: 10px !important;
  min-height: 0 !important;
  border-bottom: none !important;
  border-left: none !important;
  background: transparent !important;
  transition: background 0.1s !important;
  align-items: center !important;
}
body.layout-v2 #gcol-1 .mrow:hover {
  background: rgba(255,255,255,0.025) !important;
}
body.layout-v2 #gcol-1 .mrow.sel {
  background: rgba(0,212,184,0.05) !important;
  border-left: none !important;
}

/* Game icon — rounded pill */
body.layout-v2 #gcol-1 .mrow-game-icon {
  min-width: 36px !important;
  width: auto !important;
  height: 22px !important;
  border-radius: 11px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Info container — keep column layout but tighten */
body.layout-v2 #gcol-1 .mrow-info {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Team names — single line, visible */
body.layout-v2 #gcol-1 .mrow-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #e6edf3 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Score — prominent teal */
body.layout-v2 #gcol-1 .mrow-score-badge {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--acc) !important;
  flex-shrink: 0 !important;
}
body.layout-v2 #gcol-1 .mrow-score {
  font-size: 14px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Live dot */
body.layout-v2 #gcol-1 .mrow-live-dot {
  width: 5px !important; height: 5px !important;
  box-shadow: none !important; animation: none !important;
}

/* Multiplier pills inline */
body.layout-v2 #gcol-1 .fm-pill { font-size: 9px !important; }
body.layout-v2 #gcol-1 [data-mult-id] { flex-shrink: 0 !important; }

/* Hype bar — position absolutely so it doesn't crush the row */
body.layout-v2 #gcol-1 [data-hype-id] {
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 3px !important;
  overflow: hidden !important;
}
body.layout-v2 #gcol-1 .mrow {
  position: relative !important;
}
body.layout-v2 #gcol-1 .hype-gauge {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
}

/* ── STREAM PANEL — show production header, hide panel chrome ──────── */
body.layout-v2 #panel-live-stream > .ph { display: flex !important; }
/* Hide panel remove/drag controls */
body.layout-v2 #panel-live-stream .panel-remove-btn { display: none !important; }
body.layout-v2 #panel-live-stream .panel-drag-icon { display: none !important; }
/* Hide Chat toggle button in stream header */
body.layout-v2 #stream-chat-hdr-btn { display: none !important; }

/* ── MULTI TOGGLE — in matches header (moved via JS) ─────────────────── */
body.layout-v2 #gcol-1 .ph #fm-filter-btn {
  margin-left: auto !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
}

/* ── CONTEXT BAR — hidden, using production header instead ───────────── */
body.layout-v2 #v2-context-bar {
  display: none !important;
}
body.layout-v2 #v2-context-bar .ctx-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #e53935; flex-shrink: 0; }
body.layout-v2 #v2-context-bar .ctx-match-name { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.layout-v2 #v2-context-bar .ctx-score { font-size: 13px; font-weight: 700; color: var(--acc); flex-shrink: 0; }
body.layout-v2 #v2-context-bar .ctx-meta { font-size: 11px; color: var(--dim); white-space: nowrap; }
body.layout-v2 #v2-context-bar .ctx-sep { width: 1px; height: 18px; background: var(--b); flex-shrink: 0; }
body.layout-v2 #v2-context-bar .ctx-tabs { display: flex; gap: 0; }
body.layout-v2 #v2-context-bar .ctx-tab {
  font-size: 11px; font-weight: 500; color: var(--dim);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 8px; cursor: pointer; font-family: inherit;
}
body.layout-v2 #v2-context-bar .ctx-tab:hover { color: var(--text); }
body.layout-v2 #v2-context-bar .ctx-tab.active { color: var(--text2); border-bottom-color: var(--acc); }
body.layout-v2 #v2-context-bar .ctx-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.layout-v2 #v2-context-bar .ctx-btn {
  font-size: 10px; font-weight: 500; color: var(--dim);
  background: rgba(255,255,255,0.04); border: 1px solid var(--b); padding: 3px 8px;
  border-radius: 3px; cursor: pointer; font-family: inherit;
}
body.layout-v2 #v2-context-bar .ctx-btn:hover { color: var(--text2); background: rgba(255,255,255,0.08); }

/* ── FOOTER — properly aligned ────────────────────────────────────────── */
body.layout-v2 #dash-footer {
  padding: 0 12px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #080B12 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
body.layout-v2 #dash-footer > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
body.layout-v2 #dash-footer > div:nth-child(2) {
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}
body.layout-v2 #dash-footer span, body.layout-v2 #dash-footer a,
body.layout-v2 #dash-footer select { font-size: 11px !important; line-height: 28px !important; }
body.layout-v2 #dash-footer button, body.layout-v2 #dash-footer #theme-toggle-btn,
body.layout-v2 #dash-footer #twitch-hdr-status { width: 20px !important; height: 20px !important; }

/* ── PANEL SWAP — Arena under stream (gcol-2), Match Centre to right (gcol-3) ── */
body.layout-v2 #panel-arena {
  border-top: 1px solid var(--b) !important;
}
body.layout-v2 #panel-match-centre {
  display: flex !important;
}

/* ── FINAL OVERRIDES — must come last to win cascade ─────────────────── */
/* These use higher specificity + !important to override general button rules above */
/* NOTE: #hdr-signin-btn display is controlled by auth.js (set to "inline-block"
   when logged out, "none" when logged in). Do NOT force-hide it here or
   logged-out users lose the only way to sign in from the header. */
body.layout-v2 #hdr #mob-search-btn { display: none !important; }
/* Sign-in button — teal ghost (NOT filled). Solid teal is reserved for
   primary CTAs inside modals and panels. In the nav it should be an
   outlined ghost button so it doesn't dominate the LAYOUT and GO PRO
   buttons next to it.
   IMPORTANT: do NOT !important the `display` property here. auth.js
   sets `#hdr-signin-btn.style.display = "none"` when the user is
   signed in, and an !important CSS rule overrides the inline style,
   making the button stick around for logged-in users. */
body.layout-v2 #hdr #hdr-signin-btn {
  background: transparent !important;
  color: var(--acc, #00d4b8) !important;
  border: 1px solid rgba(0, 212, 184, 0.35) !important;
  padding: 0 13px !important;
  border-radius: 6px !important;
  font-family: "Rajdhani", "Barlow Condensed", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  height: 30px !important;
  min-height: 30px !important;
  display: inline-flex; /* no !important — let auth.js toggle this */
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, border-color 0.15s !important;
}
body.layout-v2 #hdr #hdr-signin-btn:hover {
  background: rgba(0, 212, 184, 0.08) !important;
  border-color: rgba(0, 212, 184, 0.6) !important;
}

/* My Picks — plain text link, no button treatment */
body.layout-v2 #hdr .hright .rbtn[onclick*="openBetTracker"],
body.layout-v2 .hright .rbtn[onclick*="openBetTracker"] {
  display: inline-flex !important;
  width: auto !important;
  height: 36px !important;
  min-width: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #8899a6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  transition: color 0.12s !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.layout-v2 #hdr .hright .rbtn[onclick*="openBetTracker"]:hover,
body.layout-v2 .hright .rbtn[onclick*="openBetTracker"]:hover {
  color: #EFEFF1 !important;
  background: none !important;
}
/* My Picks — ensure no SVG shows if JS hasn't run yet */
body.layout-v2 #hdr .hright .rbtn[onclick*="openBetTracker"] svg,
body.layout-v2 .hright .rbtn[onclick*="openBetTracker"] svg {
  display: none !important;
}

/* ── GAME FILTER TABS BAR — Twitch-style flat tabs ─────────────────── */

/* Bar: dark bg, subtle bottom border, no teal, no bleed-through */
body.layout-v2 #game-bar,
body.layout-v2 .game-bar {
  background: #0A0A0A !important;
  border-bottom: 1px solid #161616 !important;
  border-top: none !important;
  padding: 0 10px !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 199 !important;
  isolation: isolate !important;
}

/* All tabs — flat text, no pill, no box, no uppercase */
body.layout-v2 .gtab {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  color: #8899a6 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.12s, border-color 0.12s !important;
}
body.layout-v2 .gtab:hover {
  color: #aabbcc !important;
  background: none !important;
  box-shadow: none !important;
}

/* Active tab — white text + teal underline only, NO game-specific colors */
body.layout-v2 .gtab.on {
  color: #EFEFF1 !important;
  background: none !important;
  border-bottom: 2px solid #00D4B8 !important;
  box-shadow: none !important;
}
/* Override all game-specific active colors */
body.layout-v2 .gtab.on[data-g] {
  color: #EFEFF1 !important;
  background: none !important;
  border-bottom-color: #00D4B8 !important;
  box-shadow: none !important;
}

/* Live dots — small, red, no ring */
body.layout-v2 .gtab .live-dot,
body.layout-v2 .gtab .gtab-live-dot {
  width: 5px !important;
  height: 5px !important;
  background: #FF4655 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  border: none !important;
  display: inline-block !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}
body.layout-v2 .gtab.on .live-dot,
body.layout-v2 .gtab.on .gtab-live-dot {
  box-shadow: none !important;
}

/* BIG MATCHES — same as other tabs, not a green pill */
body.layout-v2 #game-bar [onclick*="bigMatch"],
body.layout-v2 #game-bar .big-matches-btn,
body.layout-v2 #game-bar [class*="big-match"] {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  color: #555 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.12s !important;
}
body.layout-v2 #game-bar [onclick*="bigMatch"]:hover,
body.layout-v2 #game-bar .big-matches-btn:hover,
body.layout-v2 #game-bar [class*="big-match"]:hover {
  color: #888 !important;
  background: none !important;
}
body.layout-v2 #game-bar [onclick*="bigMatch"].on,
body.layout-v2 #game-bar .big-matches-btn.on {
  color: #EFEFF1 !important;
  border-bottom: 2px solid #00D4B8 !important;
}

/* FOLLOWING — quiet nav item, not CTA */
body.layout-v2 #game-bar [onclick*="following"],
body.layout-v2 #game-bar .following-btn,
body.layout-v2 #game-bar [class*="following"] {
  color: #555 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.layout-v2 #game-bar [onclick*="following"]:hover,
body.layout-v2 #game-bar .following-btn:hover,
body.layout-v2 #game-bar [class*="following"]:hover {
  color: #888 !important;
}

/* Hide gtab-remove (x) buttons in this view */
body.layout-v2 .gtab-remove { display: none !important; }

/* ── NAV BAR — remove teal separator line ─────────────────────────────── */
body.layout-v2 #hdr {
  border-bottom: 1px solid #161616 !important;
}

/* ── NAV ICON ORDERING ────────────────────────────────────────────────── */
body.layout-v2 #frags-balance { order: 1 !important; }
body.layout-v2 #chat-drawer-btn { order: 2 !important; }
body.layout-v2 #whats-new-btn { order: 3 !important; }
body.layout-v2 .hright .rbtn[onclick*="openBetTracker"] { order: 4 !important; }
body.layout-v2 #rbtn { order: 5 !important; }
body.layout-v2 #hdr-user-menu { order: 6 !important; }
body.layout-v2 #dev-indicator { order: 99 !important; }

/* ═══════════════════════════════════════════════════════════════════
   NAV BAR POLISH — uniform heights, hierarchy, separator
   ═══════════════════════════════════════════════════════════════════
   Visual hierarchy left → right:
     LAYOUT (utility)  →  ⚡ GO PRO (CTA)  →  SIGN IN (ghost)
     | [separator] |
     F·frags · Chat · My Picks · Refresh · Avatar
   ═══════════════════════════════════════════════════════════════════ */

/* ── Uniform 30px height across nav controls ─────────────────────────── */
body.layout-v2 #hdr {
  align-items: center !important;
}
body.layout-v2 .hright {
  gap: 6px !important;
}

/* Layout button — slightly de-emphasised utility.
   Specificity boosted with #hdr to outrank the .hright button:not(...) rule
   which has higher base specificity due to its multiple :not() selectors.
   min-height override needed because styles.css sets min-height:36px on all
   buttons globally for touch-target accessibility. */
body.layout-v2 #hdr .hright #layout-btn,
body.layout-v2 #hdr .hright button#layout-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 5px !important;
  color: var(--dim, #6b7280) !important;
  font-family: "Rajdhani", "Barlow Condensed", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
body.layout-v2 #hdr .hright #layout-btn:hover,
body.layout-v2 #hdr .hright button#layout-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text2, #e8f6ff) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Go Pro link — slightly more prominent gold pill (CTA weight).
   Specificity boost via #hdr prefix. */
body.layout-v2 #hdr .hright #hdr-gopro-link,
body.layout-v2 #hdr .hright a#hdr-gopro-link {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  background: rgba(245, 200, 66, 0.1) !important;
  border: 1px solid rgba(245, 200, 66, 0.3) !important;
  color: var(--gold, #f0b429) !important;
  font-family: "Rajdhani", "Barlow Condensed", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 5px !important;
  /* NOTE: display intentionally NOT !important — applyTierGating()
     hides this element via inline style="display:none" for pro users,
     and an !important here would override that. */
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  transition: background 0.15s, border-color 0.15s !important;
}
body.layout-v2 #hdr .hright #hdr-gopro-link:not([style*="display:none"]):not([style*="display: none"]) {
  display: inline-flex;
}
body.layout-v2 #hdr .hright #hdr-gopro-link:hover {
  background: rgba(245, 200, 66, 0.16) !important;
  border-color: rgba(245, 200, 66, 0.5) !important;
}

/* Frags chip — match other nav heights, gold-tinted compact pill */
body.layout-v2 #frags-balance {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  background: rgba(245, 200, 66, 0.08) !important;
  border: 1px solid rgba(245, 200, 66, 0.18) !important;
  border-radius: 5px !important;
  font-family: "Barlow Condensed", "Rajdhani", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--gold, #f0b429) !important;
  letter-spacing: 0.06em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}
body.layout-v2 #frags-balance:hover {
  background: rgba(245, 200, 66, 0.14) !important;
  border-color: rgba(245, 200, 66, 0.32) !important;
}

/* My Picks — match the 30px height, muted text-link feel.
   Specificity boost via #hdr prefix. */
body.layout-v2 #hdr .hright .rbtn[onclick*="openBetTracker"],
body.layout-v2 #hdr .hright button.rbtn[onclick*="openBetTracker"] {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 5px !important;
  color: var(--dim, #6b7280) !important;
  font-family: "Rajdhani", "Barlow Condensed", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transition: color 0.15s, border-color 0.15s !important;
}
body.layout-v2 #hdr .hright .rbtn[onclick*="openBetTracker"]:hover {
  color: var(--text2, #e8f6ff) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Refresh icon — tiny square, muted. Specificity boost via #hdr. */
body.layout-v2 #hdr .hright #rbtn,
body.layout-v2 #hdr .hright button#rbtn {
  height: 30px !important;
  min-height: 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--dim, #6b7280) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
}
body.layout-v2 #hdr .hright #rbtn:hover {
  color: var(--text2, #e8f6ff) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Visual separator between left cluster (Layout/Pro/SignIn) and right
   cluster (Frags/Chat/My Picks/Refresh). Achieved via a left-margin on
   the Frags chip — no extra DOM needed. */
body.layout-v2 #frags-balance {
  margin-left: 8px !important;
  position: relative !important;
}
body.layout-v2 #frags-balance::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PANEL REMOVE BUTTONS — always-visible, not hover-to-reveal
   ═══════════════════════════════════════════════════════════════════
   styles.css originally hid .panel-remove-btn with opacity:0 and only
   showed it on panel hover. That made the feature invisible — users
   never discovered they could remove panels. Fix: always show at
   reduced opacity, brighten on hover. Still only renders when the
   user is pro (body.pro-resize-mode already gates display:flex). */
body.layout-v2.pro-resize-mode .panel-remove-btn {
  opacity: 0.55 !important;
  display: flex !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  margin-right: 6px !important;
  transition: opacity 0.15s, background 0.15s, color 0.15s !important;
}
body.layout-v2.pro-resize-mode .panel-remove-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 78, 106, 0.12) !important;
  color: var(--red, #ff4e6a) !important;
}
/* Also brighten slightly when hovering the panel itself so it's
   discoverable without needing to target the 18×18 button directly. */
body.layout-v2.pro-resize-mode .panel:hover .panel-remove-btn {
  opacity: 0.9 !important;
}