/* ===========================================================================
   BLUFFWIN — the site chrome
   ---------------------------------------------------------------------------
   The top bar, the bottom tab bar, the ⋯ and account menus, the chat panel
   and the notice toasts: everything shared/site.js draws around a page.

   It is its own stylesheet so that it can sit on a page that ALSO carries
   the game frame (shared/shell.css), which uses some of the same class names
   (.seg is the games' Manual | Auto, .iconbtn their mute and turbo) and the
   same colour tokens with different values (--panel, --stroke). So, in this
   file and nowhere else:

     - every rule is written under its container (.topbar .seg, never .seg),
       so nothing here can reach a game's panel;
     - the colour tokens are set ON the chrome's own elements, never on
       :root, so a page's own palette is left alone;
     - the resets a page may not have (links, [hidden], the font) are set
       inside the chrome, for the same reason.

   Only the bar GEOMETRY is page-wide (--barH, --tabH, --safeB, --chatW),
   because page layouts are written against it (the book's sticky rail, the
   slip, the Casino grid). The game frame uses none of those names.

   Page layout that answers to the bars (the body's bottom padding over the
   tab bar, the book's slip) stays with the page: shared/site.css,
   shared/sportsbook.css.
   =========================================================================== */
:root{
  --barH:64px;
  --tabH:62px;      /* the bottom tab bar's height (it only shows at ≤1000px) */
  /* the iPhone home-indicator strip under the tab bar (34px on a notched
     iPhone, 0 on Android). ONE token, so everything that sits on the tab bar
     clears it the same way, and a test can set it to 34px to stand in for an
     iPhone — no emulator reports the real inset */
  --safeB:env(safe-area-inset-bottom, 0px);
  --chatW:380px;    /* desktop chat panel */
}

/* ---- the chrome's own palette, font and resets ---- */
.topbar,.tabbar,.moremenu,.chat,.toasts{
  --nav:#11132b;
  --panel:#191c38;
  --card:#232544;
  --inset:#15172c;
  --stroke:#2a2d55;
  --text:#eef0ff;
  --muted:#8b91bd;
  --dim:#666c99;
  --indigo:#5b5be2;
  --indigo-hi:#6a6aec;
  --gold:#f5a623;
  --green:#4ade80;
  color:var(--text);
  font:500 14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}
.topbar *,.tabbar *,.moremenu *,.chat *,.toasts *{box-sizing:border-box}
.topbar a,.tabbar a,.moremenu a,.chat a{color:inherit;text-decoration:none}
.topbar button,.tabbar button,.moremenu button,.chat button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.topbar [hidden],.tabbar [hidden],.moremenu [hidden],.chat [hidden]{display:none!important}
/* ...and the containers themselves: the chat panel is mounted `hidden`, and
   .chat's own display:flex beats the browser's [hidden]. site.css has a
   global [hidden] rule; a game page does not, and there the closed panel sat
   invisible (opacity 0) over the right of the board, taking its taps */
.topbar[hidden],.tabbar[hidden],.moremenu[hidden],.chat[hidden],.toasts[hidden]{display:none!important}

/* ================= top bar =================
   Three columns — the toggle, the logo dead centre, the account cluster —
   as a GRID with shrinkable outer columns, not an absolutely centred logo:
   under browser zoom (Ctrl +/-) the bar is 900–1100 CSS pixels wide with
   desktop-sized contents, and an absolute logo sat on top of the balance.
   Each cluster gives up its words before anything overlaps: the wordmark
   under 1180px, the wallet's label under 1100px, the toggle's labels under
   1060px, and the balance pill ellipsises last. */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--barH);display:flex;align-items:center;gap:18px;
  padding:0 clamp(14px,3vw,28px);background:var(--nav);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar .brand{display:flex;align-items:center;flex:none;min-width:0}
.topbar .brand img{display:block;flex:none}
.topbar .brand .logo{height:30px;width:auto}
@media (min-width:1001px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
  .topbar .brand{justify-self:center}
  .topbar .seg{justify-self:start}
  .topbar .barright{justify-self:end;min-width:0;margin-left:0;max-width:100%}
  .topbar .barright .signedin,.topbar .barright .signedout{min-width:0}
}
.topbar #moreBtn{display:none}   /* shown by the ≤1100 tier below; declared first so the tier wins */
/* THE COLLAPSE ORDER under zoom (a zoom level is a narrower viewport with
   desktop content: 1440 at 125% is 1152px, at 150% 960px). Tier by tier,
   never all at once, and the bar itself never scrolls:
     ≤1180  the wordmark shrinks a size
     ≤1100  the Wallet label, and the Chat icon folds into the ⋯ menu
     ≤1060  the toggle's labels (icons only)
     ≤1000  the phone layout: toggle and Chat live in the bottom tab bar
   The ⋯ menu (#moreBtn) groups what was folded — Chat, Account, Cashier,
   Sign out — so nothing becomes unreachable; it is hidden while everything
   fits. Above 300% the layout is allowed to break. */
@media (min-width:1001px) and (max-width:1180px){ .topbar .brand .logo{height:24px} }
@media (min-width:1001px) and (max-width:1100px){ .topbar .walletbtn span{display:none} .topbar .walletbtn{padding:10px 12px} .topbar #chatBtn{display:none} .topbar #moreBtn{display:grid} }
@media (min-width:1001px) and (max-width:1060px){ .topbar .seg a span{display:none} .topbar .seg a{padding:0 14px} .topbar .seg a svg{width:22px;height:22px} }
.moremenu{position:fixed;z-index:80;min-width:190px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;gap:2px}
.moremenu a,.moremenu button{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:8px;
  font-weight:700;font-size:13.5px;color:var(--text);text-align:left;width:100%}
.moremenu a:hover,.moremenu button:hover{background:var(--inset)}
.moremenu svg{width:18px;height:18px;color:var(--muted);flex:none}

/* the section switcher: one pill, the current option filled. Desktop only
   (the phone has the tab bar); sized up 27 Sep 2026 (owner: "make the
   switch larger on desktop") — 52px of the 64px bar */
.topbar .seg{display:flex;align-items:center;gap:4px;flex:none;padding:4px;border-radius:13px;
  background:var(--inset);border:1px solid var(--stroke)}
.topbar .seg a{display:flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:10px;
  font-weight:800;font-size:15.5px;color:var(--muted);white-space:nowrap;transition:color .15s,background .15s}
.topbar .seg a svg{width:21px;height:21px;opacity:.85}
.topbar .seg a:hover{color:var(--text)}
.topbar .seg a.on{color:#fff;background:var(--indigo);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.topbar .seg a.on svg{opacity:1}

.topbar .barright{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.topbar .iconbtn{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--panel);border:1px solid var(--stroke);color:var(--muted);transition:color .15s,background .15s}
.topbar .iconbtn svg{width:20px;height:20px}
.topbar .iconbtn:hover{color:var(--text);background:var(--card)}
.topbar .iconbtn.on{color:#fff;background:var(--indigo);border-color:var(--indigo)}
.topbar .coins{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--stroke);
  border-radius:9px;padding:9px 14px;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .coins .sym{font-size:.85em;font-weight:600;color:var(--muted)}
.topbar .coins svg{width:18px;height:18px;flex:none}
/* the pill is the coin dropdown's trigger (shared/walletui.js) */
.topbar button.coins{cursor:pointer;color:var(--text);text-align:left;transition:background .15s,border-color .15s}
.topbar button.coins:hover,.topbar button.coins.open{background:var(--card);border-color:#3a3e72}
.topbar button.coins:focus-visible,.topbar .avatar:focus-visible{outline:2px solid #a9aeff;outline-offset:2px}
.topbar .coins .chev{width:14px;height:14px;color:var(--muted);transition:transform .15s;margin-left:-2px}
.topbar .coins.open .chev{transform:rotate(180deg)}
/* the balance in the bar is the demo balance while the player is in demo */
.topbar .coins .cv{display:flex;align-items:baseline;gap:6px;min-width:0}
.topbar .coins .usd{font-size:.8em;font-weight:600;color:var(--muted);white-space:nowrap}
/* narrower bars: the dollar value stacks under the amount, in the same pill */
@media (max-width:1180px){
  .topbar .coins .cv{flex-direction:column;align-items:flex-start;gap:0;line-height:1.12}
  .topbar .coins .usd{font-size:10.5px}
  .topbar .coins:has(.usd){padding-top:5px;padding-bottom:5px}
}
.topbar .coins .modetag{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#231500;background:#f5a623;border-radius:999px;padding:2px 7px}
.topbar .walletbtn{display:flex;align-items:center;gap:7px;background:var(--indigo);border-radius:9px;
  padding:10px 15px;font-weight:700;font-size:14px;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.28);transition:background .15s}
.topbar .walletbtn:hover{background:var(--indigo-hi)}
.topbar .walletbtn svg{width:18px;height:18px;flex:none}
.topbar .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#5b5be2,#8b46d6);
  display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.5px;flex:none;color:#fff;cursor:pointer;padding:0}
.topbar .avatar:hover{filter:brightness(1.12)}
.topbar .avatar[aria-current]{box-shadow:0 0 0 2px #0d0f24,0 0 0 4px #a9aeff}

/* signed out: the bar offers sign in and sign up in the account's place */
.topbar .signedin,.topbar .signedout{display:flex;align-items:center;gap:10px}
.topbar .signedin[hidden],.topbar .signedout[hidden]{display:none}
.topbar .authbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9px;background:var(--indigo);color:#fff;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.topbar .authbtn.ghost{background:var(--panel);border:1px solid var(--stroke);color:var(--text)}

/* ================= bottom tab bar (mobile) ================= */
/* Hidden outright on desktop rather than merely off-screen, so it cannot trap
   a tab stop or read out to a screen reader while the top toggle is showing. */
.tabbar{display:none}
@media (max-width:1000px){
  .topbar .seg,.topbar .iconbtn,.topbar #moreBtn{display:none}
  .tabbar{
    display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--nav);border-top:1px solid rgba(255,255,255,.07);
    padding-bottom:var(--safeB);
  }
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:calc(var(--tabH) - 1px);font-size:11px;font-weight:600;color:var(--dim);position:relative;border-radius:0}
  /* (-1px: the bar's top border is inside --tabH, so the bar is exactly that tall
     and the chat panel above it meets it with no gap and no overlap) */
  .tabbar svg{width:23px;height:23px}
  .tabbar .on{color:var(--text)}
  .tabbar .on svg{color:var(--indigo-hi)}
  /* the active tab reads as active from the icon tint AND a bar, so it does not
     rely on colour alone */
  .tabbar .on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2.5px;
    border-radius:0 0 3px 3px;background:var(--indigo)}
  /* while a panel is open its button is the active one, not the page's section */
  body.chat-open .tabbar a.on{color:var(--dim)}
  body.chat-open .tabbar a.on svg{color:inherit}
  body.chat-open .tabbar a.on::before{display:none}
}

/* ================= chat panel ================= */
/* desktop: a column pinned to the right edge under the top bar.
   mobile:  fills the space between the top bar and the bottom tab bar. */
.chat{position:fixed;top:var(--barH);right:0;bottom:0;z-index:55;width:var(--chatW);max-width:100%;
  display:flex;flex-direction:column;background:var(--nav);border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-18px 0 44px rgba(0,0,0,.45);transform:translateX(16px);opacity:0;transition:transform .18s,opacity .18s}
.chat.in{transform:none;opacity:1}
.chat .chat-head{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px 0 16px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.06)}
.chat .chat-head h3{margin:0;font-size:15px;font-weight:800}
.chat .chat-chip{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#b9c0e8;
  background:rgba(91,91,226,.16);border:1px solid rgba(91,91,226,.4);padding:3px 8px;border-radius:999px}
.chat .chat-online{font-size:12px;color:var(--dim);white-space:nowrap}
.chat .chat-online::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.chat .chat-close{margin-left:auto;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--stroke);color:var(--muted)}
.chat .chat-close svg{width:15px;height:15px}
.chat .chat-close:hover{color:var(--text)}
.chat .chat-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:#3b4070 transparent}
.chat .chat-row{display:flex;align-items:flex-start;gap:9px;background:var(--panel);border-radius:10px;padding:9px 11px;
  font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.chat .chat-row.me{background:rgba(91,91,226,.16);box-shadow:inset 2px 0 0 var(--indigo)}
.chat .chat-av{flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;
  background:hsl(var(--h) 55% 58%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.chat .chat-txt b{font-weight:700;color:#cfd4ff}
.chat .chat-txt .chat-you{color:#a9a9ff}
.chat .chat-bot{display:inline-block;margin:0 2px 0 5px;padding:0 5px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;
  line-height:1.6;vertical-align:1px;background:#3b4070;color:#c8cdff}
.chat .chat-form{display:flex;gap:8px;padding:10px 12px;flex:none;border-top:1px solid rgba(255,255,255,.06)}
.chat .chat-form input{flex:1;min-width:0;height:42px;border-radius:9px;padding:0 13px;font:inherit;color:var(--text);
  background:var(--inset);border:1px solid var(--stroke);outline:none}
.chat .chat-form input::placeholder{color:var(--dim)}
.chat .chat-form input:focus{border-color:var(--indigo)}
.chat .chat-form button{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:var(--indigo);color:#fff}
.chat .chat-form button svg{width:17px;height:17px}
.chat .chat-form button:hover{background:var(--indigo-hi)}
.chat .chat-foot{flex:none;padding:8px 14px 10px;font-size:11px;line-height:1.5;color:var(--dim)}
@media (max-width:1000px){
  .chat{left:0;right:0;width:auto;bottom:calc(var(--tabH) + var(--safeB));
    border-left:0;box-shadow:none;transform:translateY(10px)}
  .chat.in{transform:none}
  .chat .chat-foot{padding-bottom:8px}
  .chat .chat-form input{font-size:16px}   /* iOS zooms into any field under 16px */
}

/* ================= phones: the top bar ================= */
@media (max-width:640px){
  .topbar{gap:10px;padding:0 12px}
  /* the bar has no centred logo here, so the right cluster may take the room and shrink the balance readout */
  .topbar .barright{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:8px}
  .topbar .barright .signedin,.topbar .barright .signedout{min-width:0;gap:8px}
  .topbar .coins{padding:8px 10px;font-size:13px;flex:0 1 auto}
  .topbar .walletbtn{padding:9px 12px;flex:none}
  .topbar .avatar{width:32px;height:32px}
  /* the wordmark shrinks before the balance does, and on the narrowest
     phones gives way to the compact mark: the bar still reads as ours */
  .topbar .brand{flex:0 0 auto}
  .topbar .brand .logo{height:26px}
}
@media (max-width:420px){ .topbar .brand .logo{height:22px} }
@media (max-width:370px){ .topbar .brand .logo{height:19px} }
/* the narrowest phones: the balance pill alone would push Wallet off the bar */
@media (max-width:400px){
  .topbar .coins{padding:8px 9px;gap:6px}
  .topbar .coins .sym{display:none}                /* the number stays; the coin is its icon, and named in the dropdown */
  .topbar .walletbtn span{display:none}
  .topbar .walletbtn{padding:10px 11px}
  .topbar .authbtn{padding:0 10px;font-size:13px}
  .topbar .authbtn.ghost{display:none}
}

/* ================= notices ================= */
.toasts{position:fixed;left:50%;bottom:calc(var(--tabH,0px) + var(--safeB,0px) + 16px);transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toasts .toast{background:#12152a;border:1px solid #5b5be2;color:#e6e8f5;border-radius:12px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .4s,transform .4s}
.toasts .toast.out{opacity:0;transform:translateY(8px)}

/* SHORT SCREENS (owner, 28 Sep 2026): at 700px tall or less — a 375x667
   phone, a landscape phone, a short laptop window — both bars slim down, on
   every page, so the page between them keeps its room. Everything placed
   against the bars reads these two tokens, so nothing else changes. Last in the file, so it
   wins over the rules above at equal weight. */
@media (max-height:700px){
  :root{--barH:56px;--tabH:54px}
  .topbar .seg{padding:3px}
  .topbar .seg a{height:40px}
  .tabbar a,.tabbar button{gap:2px}
  .tabbar svg{width:22px;height:22px}
}