/* Header redesign (founder 2026-10-31: "too squashed"). Loaded last; it only re-lays out the existing header.
   Wide screens: one airy row - logo | centred menu | Watch live, one wallet capsule, round icon buttons.
   Tablets / small laptops: the menu gets its own centred row so nothing is pushed off screen.
   2026-11-01: the same header on every page, so the game rail is gone (the Games page lists them). */

@media (min-width:761px) {
  header.topbar { column-gap:24px; row-gap:0; padding:14px 28px; min-height:78px; background:rgba(10,6,22,.86); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); }
  header.topbar .logo img { height:50px !important; }
  header.topbar .nav-games { display:none !important; } /* the header is the same everywhere (founder 2026-11-01); games are on the Games page */

  /* menu: calm text links, the open section in a soft neon pill */
  header.topbar .nav-main { gap:2px; align-items:center; }
  header.topbar .nav-main button { position:relative; padding:10px 15px; border-radius:999px; color:#b9b0d6; font:600 14px/1 Inter, sans-serif; letter-spacing:.01em; text-transform:none; white-space:nowrap; }
  header.topbar .nav-main button:hover { color:#fff; background:rgba(255,255,255,.06); }
  header.topbar .nav-main button.on { color:#fff; background:linear-gradient(90deg, rgba(255,47,180,.24), rgba(34,230,255,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
  header.topbar .nav-main #navWatch:not([hidden]) { margin-left:10px; padding:9px 14px 9px 12px; color:#ff9db4; border:1px solid rgba(255,77,109,.45); background:rgba(255,40,80,.08); display:inline-flex; align-items:center; gap:8px; }
  header.topbar .nav-main #navWatch:hover { color:#fff; background:rgba(255,40,80,.18); }

  /* right cluster: wallet capsule, then round icon buttons, evenly spaced */
  header.topbar .wallet { gap:10px; }
  header.topbar .coin-pill { height:42px; padding:0 5px 0 6px; border-radius:999px; }
  header.topbar .coin-pill img { width:30px; height:30px; }
  header.topbar .coin-pill strong { font-size:15px !important; padding:0 6px !important; }
  header.topbar .coin-pill i { width:30px; height:30px; }
  header.topbar .cash-pill:not([hidden]) { height:42px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; }
  header.topbar .cash-pill small { color:#9be8c9; font:700 10px/1 Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase; }
  header.topbar #msgBtn, header.topbar #soundBtn, header.topbar #acctBtn:not([hidden]) { width:42px !important; height:42px !important; border-radius:50% !important; display:grid; place-items:center; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important; transition:background .15s, border-color .15s; }
  header.topbar #msgBtn:hover, header.topbar #soundBtn:hover, header.topbar #acctBtn:hover { background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.22) !important; }
  header.topbar .hd-btn img { width:26px; height:26px; }
  header.topbar .hd-btn svg, header.topbar #acctBtn svg { width:20px; height:20px; }

  /* game rail (inside games): a quieter, roomier strip */
  header.topbar .nav-games { gap:10px; padding:2px 0 0; }
  header.topbar .nav-games button { padding:4px 16px 4px 4px; border-radius:14px; font:600 13px Inter, sans-serif; text-transform:none; }
  header.topbar .nav-games button img { width:56px; height:38px; }
}

/* one row from 1500px: logo | menu | wallet */
@media (min-width:1500px) {
  header.topbar { grid-template-columns:auto 1fr auto !important; grid-template-areas:"logo main wallet" "rail rail rail" !important; }
  header.topbar .nav-main { justify-content:center; }
}

/* 761-1499: logo and wallet on top, the menu centred on its own row underneath */
@media (min-width:761px) and (max-width:1499px) {
  header.topbar { grid-template-columns:auto 1fr !important; grid-template-areas:"logo wallet" "main main" "rail rail" !important; row-gap:10px; padding:12px 22px 10px; }
  header.topbar .wallet { justify-content:flex-end; }
  header.topbar .nav-main { grid-area:main; justify-content:safe center; overflow-x:auto; scrollbar-width:none; padding:8px 0 0; border-top:1px solid rgba(255,255,255,.07); }
  header.topbar .nav-main::-webkit-scrollbar { display:none; }
  header.topbar .nav-main button { padding:9px 13px; font-size:13.5px; }
}

/* phones: Games lives on the home card (the app bar keeps its five), and the top row gets even, roomier buttons */
@media (max-width:760px) {
  header.topbar #navGames { display:none !important; }
  header.topbar { padding-left:14px; padding-right:14px; column-gap:8px; }
  header.topbar #msgBtn, header.topbar #soundBtn, header.topbar #acctBtn:not([hidden]) { width:36px !important; height:36px !important; border-radius:50% !important; border:1px solid rgba(255,255,255,.1) !important; }
}
@media (max-width:760px) { header.topbar { column-gap:8px !important; } }
@media (min-width:761px) and (max-width:959px) { header.topbar .nav-main button { padding:9px 9px; font-size:13px; } header.topbar .nav-main #navWatch:not([hidden]) { margin-left:4px; } }