/* Full-height account navigation shared by the lobby, profile and settings. */
body[data-account-navigation] { --account-menu-width:240px; }
body[data-account-menu-pinned] { padding-inline-start:var(--account-menu-width); }
.account-navigation { position:fixed; inset-block:0; inset-inline-start:0; inset-inline-end:auto; z-index:70; width:var(--account-menu-width,240px); height:100dvh; max-width:none; max-height:none; margin:0; padding:max(12px,var(--ncb-tg-inset-top,0px)) 12px max(16px,env(safe-area-inset-bottom,0px),var(--ncb-tg-inset-bottom,0px)); border:0; border-inline-end:1px solid var(--line); border-radius:0; background:var(--surface); color:var(--ink); font:13px/1.4 var(--body); overflow-y:auto; overscroll-behavior:contain; }
.account-navigation:not([open]) { display:none; }
.account-navigation[open] { display:flex; flex-direction:column; gap:12px; }
.account-navigation::backdrop { background:#050718a6; }
.account-navigation-top { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:8px; }
.account-navigation-top > strong { padding-inline:8px; font-size:13px; color:var(--muted); font-weight:600; }
body[data-account-navigation] :is(.account-menu-toggle,.account-menu-close) { display:grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--theme-field,var(--paper)); color:var(--ink); cursor:pointer; }
body[data-account-navigation] :is(.account-menu-toggle,.account-menu-close) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.account-menu-profile { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 8px; border:1px solid var(--line); border-radius:10px; color:var(--ink); text-decoration:none; background:var(--theme-field,var(--paper)); }
.account-menu-avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:var(--raised); color:var(--lavender,var(--accent)); }
.account-menu-avatar svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-menu-identity { display:grid; min-width:0; gap:4px; }
.account-menu-identity > strong { min-width:0; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.account-menu-id { display:flex; align-items:baseline; gap:5px; min-width:0; color:var(--muted); font-size:10px; }
.account-menu-id > code { min-width:0; font:10px/1.5 var(--body); overflow-wrap:anywhere; }
.account-menu-account-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.account-menu-account-actions { grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); }
.account-navigation :is(.account-menu-item,.lobby-nav-item) { display:flex; align-items:center; justify-content:flex-start; width:100%; min-width:0; min-height:44px; margin:0; padding:10px; gap:10px; border:0; border-radius:8px; background:none; color:var(--muted); font:600 13px/1.4 var(--body); text-align:start; text-decoration:none; cursor:pointer; }
.account-navigation :is(.account-menu-item,.lobby-nav-item) > span { min-width:0; overflow-wrap:anywhere; }
.account-navigation :is(.account-menu-item,.lobby-nav-item) svg { flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-navigation .account-menu-account-actions > :is(.account-menu-item,.lobby-nav-item) { justify-content:center; padding:9px 5px; gap:5px; border:1px solid var(--line); background:var(--theme-field,var(--paper)); font-size:11px; }
.account-menu-account-actions > :is(.account-menu-item,.lobby-nav-item) svg { width:17px; height:17px; }
.account-navigation .account-navigation-links { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; width:100%; margin:0; padding:12px 0 0; border:0; border-top:1px solid var(--line); background:none; }
.account-navigation-extra { display:grid; gap:4px; padding-top:12px; margin-top:auto; border-top:1px solid var(--line); }
.account-navigation :is(.account-menu-item,.lobby-nav-item):is(:hover,[aria-current="page"]) { background:var(--raised); color:var(--ink); }
.account-navigation :is(.account-menu-item,.lobby-nav-item):disabled { opacity:.55; cursor:wait; }
body[data-account-navigation] :is(.account-menu-toggle,.account-menu-close):hover { background:var(--raised); }
body[data-account-navigation] :is(.account-menu-toggle,.account-menu-close,.account-menu-profile,.account-navigation a,.account-navigation button):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.account-menu-status { margin:0; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.account-menu-status:empty { display:none; }
.account-navigation [hidden] { display:none!important; }
.account-nav-header-brand { display:flex; align-items:center; gap:8px; min-width:0; }
.account-header-auth { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:none; justify-self:end; }
.account-header-auth[hidden] { display:none!important; }
.account-header-auth > a { display:inline-flex; align-items:center; justify-content:center; min-width:0; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--theme-field,var(--paper)); color:var(--ink); font:650 12px/1.3 var(--body); text-decoration:none; text-align:center; }
.account-header-auth > .account-header-signup { border-color:transparent; background:var(--neon,var(--accent)); color:var(--theme-on-accent,#fff); }
.account-header-auth > a:hover { background:var(--raised); }
.account-header-auth > .account-header-signup:hover { background:var(--accent); }
.account-header-auth > a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body[data-account-navigation] .lobby-profile-shortcut { display:none!important; }
body.settings-page[data-account-auth="guest"][data-site-chrome="bluerabbit"]:not([data-lobby-layout]) > .settings-header.site-header { grid-template-columns:minmax(0,1fr) auto 44px auto; }
body.settings-page[data-account-auth="guest"] .account-header-auth { grid-column:4; grid-row:1; }
body.profile-page[data-account-auth="guest"][data-site-chrome="bluerabbit"] > .profile-header.site-header { display:grid; grid-template-columns:minmax(0,1fr) auto 44px auto; }
body.profile-page[data-account-auth="guest"] .account-nav-header-brand { grid-column:1; grid-row:1; }
body.profile-page[data-account-auth="guest"] .profile-header > .theme-control { grid-column:2; grid-row:1; }
body.profile-page[data-account-auth="guest"] .profile-header > .sound-toggle { grid-column:3; grid-row:1; }
body.profile-page[data-account-auth="guest"] .account-header-auth { grid-column:4; grid-row:1; }
body.profile-page[data-account-auth="guest"] .profile-header > a.button { grid-column:1; grid-row:2; justify-self:start; }
body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) { grid-template-columns:minmax(0,1fr) auto auto; }
body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .lobby-utilities { grid-column:2; grid-row:1; }
body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .account-header-auth { grid-column:3; grid-row:1; }
body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-wallet { display:none; }
body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .wallet-view-shell { display:none; }
body[data-account-navigation][data-lobby-layout="reference"] .game-header .header-left { align-items:center; gap:10px; }
@media(max-width:900px) {
  body[data-account-navigation] { --account-menu-width:min(288px,calc(100vw - 48px)); }
  html.account-menu-modal { overflow:hidden; }
  body[data-account-navigation][data-game-ui="compact"][data-lobby-layout="reference"] .site-header.game-header:has(#header-settings) { grid-template-columns:max-content minmax(0,1fr) 42px 32px; }
  body[data-account-navigation][data-lobby-layout="reference"] .game-header .header-left { gap:6px; }
  body[data-account-navigation][data-lobby-layout="reference"] .game-header .account-menu-toggle { width:38px; }
}
@media(max-width:600px) {
  body[data-account-navigation][data-game-ui="compact"][data-lobby-layout="reference"] .site-header.game-header:has(#header-settings) { grid-template-columns:minmax(0,1fr) 44px 32px; grid-template-rows:minmax(44px,auto) auto; min-height:0; }
  body[data-account-navigation][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .brand > .lobby-brand-wordmark { display:none; }
  body[data-account-navigation][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .brand-logo { width:30px; height:30px; }
  body[data-account-navigation] :is(.settings-header,.profile-header) .brand > .lobby-brand-wordmark { display:none; }
  .account-nav-header-brand { gap:6px; }
  .account-header-auth > a { padding:8px 7px; font-size:11px; }
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) { grid-template-columns:minmax(0,1fr) auto; padding-inline:12px; }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .account-header-auth { grid-column:2; grid-row:1; }
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .lobby-utilities { grid-column:2; grid-row:2; justify-self:end; }
  body.settings-page[data-account-auth="guest"][data-site-chrome="bluerabbit"]:not([data-lobby-layout]) > .settings-header.site-header,
  body.profile-page[data-account-auth="guest"][data-site-chrome="bluerabbit"] > .profile-header.site-header { grid-template-columns:minmax(0,1fr) 44px minmax(44px,auto); }
  body:is(.settings-page,.profile-page)[data-account-auth="guest"] .account-header-auth { grid-column:2/-1; grid-row:1; }
  body.settings-page[data-account-auth="guest"] .settings-back { grid-column:1; grid-row:2; justify-self:start; }
  body.settings-page[data-account-auth="guest"] .settings-header > .sound-toggle { grid-column:3; grid-row:2; justify-self:end; }
  body.profile-page[data-account-auth="guest"] .profile-header > .theme-control { grid-column:2; grid-row:2; }
  body.profile-page[data-account-auth="guest"] .profile-header > .sound-toggle { grid-column:3; grid-row:2; justify-self:end; width:44px; max-width:44px; margin:0; }
  body[data-account-navigation][data-account-auth="guest"] .account-nav-header-brand .brand,
  body[data-account-navigation][data-account-auth="guest"] .game-header:has(#header-settings) .header-left .brand { flex-direction:column; align-items:flex-start; gap:4px; }
}
@media(max-width:380px) {
  .account-header-auth { gap:4px; max-inline-size:166px; flex-wrap:wrap; }
  .account-header-auth > a { padding-inline:4px; }
  body[data-account-navigation][data-account-auth="guest"] .account-menu-toggle { width:38px; }
}

/* Lobby header on phones and the Telegram Mini App (<=600px).
   Row 1: menu, logo, online counter, then deposit + settings (signed in) or log in / sign up (guest).
   Row 2 (signed in only): the wallet bar across the full width.
   Checked at PC large, PC medium, tablet, phone and Telegram sizes; wider layouts are unchanged. */
@media(max-width:600px) {
  body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) {
    grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto; align-items:center; column-gap:6px; row-gap:8px;
    min-height:0; padding:8px 12px;
  }
  body[data-account-navigation][data-account-auth][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-left {
    grid-column:1; grid-row:1; position:static; display:flex; flex-direction:row; align-items:center; gap:6px; min-width:0; padding:0;
  }
  body[data-account-navigation][data-account-auth][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-left .brand { flex:none; flex-direction:row; }
  body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-left > .visitor-stats {
    position:static; transform:none; flex:none; margin:0 0 0 2px; padding:4px 8px; font-size:11px; line-height:1.2;
  }
  body[data-account-navigation][data-account-auth][data-lobby-layout="reference"] .game-header .header-left > .visitor-stats :is(.visitor-stat,.stat-value) { align-items:center; line-height:1; }
  html[dir="rtl"] body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-left > .visitor-stats { margin:0 2px 0 0; transform:none; }
  /* Signed in: deposit and settings stay on row 1, the wallet gets its own clean row. */
  body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-wallet { grid-column:2; grid-row:1; align-self:center; }
  body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .lobby-utilities { grid-column:3; grid-row:1; align-self:center; justify-self:end; }
  body[data-account-navigation][data-account-auth]:not([data-account-auth="guest"])[data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .wallet-view-shell {
    grid-column:1/-1; grid-row:2; justify-self:stretch; width:100%; max-width:none; margin:0;
  }
  body[data-account-navigation][data-account-auth]:not([data-account-auth="guest"])[data-lobby-layout="reference"] .game-header:has(#header-settings) .wallet-view-shell > .wallet-profile-box {
    flex:1 1 auto; justify-content:space-between; width:100%; min-width:0; min-height:44px; padding:0 4px 0 6px;
    border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface,var(--paper)) 70%,transparent);
  }
  body[data-account-navigation][data-account-auth]:not([data-account-auth="guest"])[data-lobby-layout="reference"] .game-header:has(#header-settings) .wallet-profile-box > .header-profile { flex:1 1 auto; justify-content:flex-start; }
  /* Guest: log in / sign up share row 1 with the brand and online counter. */
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) { grid-template-columns:auto auto auto; justify-content:space-between; }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .game-header .account-header-auth { grid-column:2; grid-row:1; gap:6px; flex-wrap:nowrap; max-inline-size:none; }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .game-header .account-header-auth > a { min-height:40px; padding:8px 10px; font-size:12px; white-space:nowrap; }
}
/* Phone-width guests: the settings shortcut lives in the menu drawer (it already links Settings),
   so log in / sign up keep full-size tap targets beside the logo and online counter. */
@media(max-width:440px) {
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) { grid-template-columns:auto auto; }
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .lobby-utilities { display:none; }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .game-header .account-header-auth > a { padding-inline:8px; font-size:11.5px; }
}
/* Below ~380px log in / sign up no longer fit beside the brand, so they take a full-width second row. */
@media(max-width:379px) {
  body[data-account-navigation][data-account-auth="guest"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header:has(#header-settings) { grid-template-columns:minmax(0,1fr); }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .game-header .account-header-auth { grid-column:1; grid-row:2; justify-self:stretch; }
  body[data-account-navigation][data-account-auth="guest"][data-lobby-layout="reference"] .game-header .account-header-auth > a { flex:1 1 0; }
}
@media(max-width:350px) {
  body[data-account-navigation][data-account-auth][data-game-ui="compact"][data-lobby-layout="reference"] .game-header:has(#header-settings) .header-left > .visitor-stats { padding-inline:6px; }
}