/* Casino lobby layout (loaded last on the homepage).
   Rearranges existing elements after the common pattern of modern casino lobbies:
   - balance and Deposit form one wallet unit (centered on desktop, one header row on phones);
   - game tiles come first, the Bonus Drops banner follows them;
   - phones show three game tiles per row and tablets desktop-sized tiles, so more games sit above the fold
     (chest tiles keep their own grid: they carry names and prices);
   - phones, tablets and the Telegram Mini App get a bottom tab bar in the thumb zone,
     which takes over the header menu button there.
   Checked at PC large, PC medium, tablet, phone and Telegram sizes in light and dark. */

/* ---- Lobby order: games first, Bonus Drops after them ---- */
:root body[data-lobby-layout="reference"] #games-hub #game-catalog > .catalog-holder:not(.crypto-markets) { order:-1; }
:root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops { margin-bottom:0; }
:root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops .bonus-drops-heading { font-size:18px; }
:root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops .bonus-drop-card { padding:16px 20px; }
:root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops .bonus-drop-gift { width:56px; height:56px; }

/* ---- Desktop header: the wallet unit sits in the middle, Deposit attached to the balance ---- */
@media(min-width:901px) {
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header#lobby-header {
    grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr); column-gap:0;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-left { grid-column:1; padding-inline-end:16px; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell { grid-column:2; grid-row:1; justify-self:end; margin:0; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet { grid-column:3; grid-row:1; justify-self:start; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell > .wallet-profile-box {
    min-height:44px; padding:0 4px 0 8px; border:1px solid var(--line); border-inline-end:0; border-radius:12px 0 0 12px;
    background:color-mix(in srgb,var(--surface,var(--paper)) 82%,transparent);
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-deposit {
    min-height:46px; border-radius:0 12px 12px 0; padding-inline:20px;
  }
}

/* ---- Phones, tablets, Telegram: bottom tab bar + slimmer header ---- */
.lobby-tabbar { display:none; }
@media(max-width:900px) {
  :root body[data-lobby-tabbar] { --lobby-tabbar-height:62px; padding-bottom:calc(var(--lobby-tabbar-height) + max(env(safe-area-inset-bottom,0px),var(--ncb-tg-inset-bottom,0px))); }
  :root.telegram-mini-app body[data-lobby-tabbar][data-game-ui="compact"][data-lobby-layout="reference"] { padding-bottom:calc(var(--lobby-tabbar-height) + max(env(safe-area-inset-bottom,0px),var(--ncb-tg-inset-bottom,0px))); }
  :root body[data-lobby-tabbar] .lobby-tabbar {
    position:fixed; inset-inline:0; bottom:0; z-index:60; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    height:calc(var(--lobby-tabbar-height) + max(env(safe-area-inset-bottom,0px),var(--ncb-tg-inset-bottom,0px)));
    padding:0 max(6px,env(safe-area-inset-right,0px)) max(env(safe-area-inset-bottom,0px),var(--ncb-tg-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));
    border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface,var(--paper)) 92%,transparent);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 -10px 30px #0000002e;
  }
  :root body[data-lobby-tabbar] .lobby-tab {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:var(--lobby-tabbar-height); margin:0; padding:6px 2px;
    border:0; background:none; color:var(--muted); font:600 11px/1.15 var(--body); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  :root body[data-lobby-tabbar] .lobby-tab[hidden] { display:none; }
  :root body[data-lobby-tabbar] .lobby-tab > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :root body[data-lobby-tabbar] .lobby-tab svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  :root body[data-lobby-tabbar] .lobby-tab.is-current { color:var(--ink); }
  :root body[data-lobby-tabbar] .lobby-tab.is-current svg { color:var(--accent); }
  :root body[data-lobby-tabbar] .lobby-tab[data-tab="bonus"] svg { color:#e9c77f; }
  :root body[data-lobby-tabbar] .lobby-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:10px; }
  /* An open game keeps the whole screen for its own controls. */
  :root body[data-lobby-tabbar]:has(#games-hub:not([hidden]):not([data-game-view="catalog"])) .lobby-tabbar { display:none; }
  :root body[data-lobby-tabbar]:has(#games-hub:not([hidden]):not([data-game-view="catalog"])) { padding-bottom:0; }
  /* The menu button moves from the header to the tab bar. */
  :root body[data-lobby-tabbar][data-account-navigation][data-lobby-layout="reference"] .game-header#lobby-header .account-menu-toggle { display:none; }

  /* Tablets: desktop-sized game tiles (six a row at 768px) instead of three oversized ones. */
  :root body[data-lobby-layout="reference"] #games-hub #game-catalog .catalog-grid.game-tabs:not(.slots-catalog) { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px; }

  /* Balance and Deposit read as one wallet unit. */
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell > .wallet-profile-box {
    min-height:42px; padding:0 2px 0 10px; border:1px solid var(--line); border-inline-end:0; border-radius:10px 0 0 10px;
    background:color-mix(in srgb,var(--surface,var(--paper)) 82%,transparent);
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell { margin:0; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .site-header.game-header#lobby-header { column-gap:0; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-deposit { min-height:44px; border-radius:0 10px 10px 0; }
}
/* Tablets have room for the Deposit label. */
@media(min-width:601px) and (max-width:900px) {
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header#lobby-header { grid-template-columns:max-content minmax(0,1fr) auto; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-deposit { width:auto; min-width:0; gap:8px; padding-inline:16px; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-deposit > span { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; }
}

/* Phones and Telegram: one header row (logo, online, balance, Deposit) and three tiles a row. */
@media(max-width:600px) {
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header#lobby-header {
    grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; column-gap:6px; padding:8px 10px;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-left { grid-column:1; grid-row:1; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell {
    grid-column:2; grid-row:1; justify-self:stretch; width:auto; min-width:0;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet { grid-column:3; grid-row:1; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell > .wallet-profile-box {
    min-height:42px; padding:0 2px 0 8px; border-radius:10px 0 0 10px; border-inline-end:0;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-deposit {
    min-height:44px; border-radius:0 10px 10px 0;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-profile-box > .header-profile { min-width:0; padding-inline:0; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-usd-total { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Demo switch stacks its label under the track, and the currency picker narrows, so balance + Deposit fit one row. */
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-demo-toggle {
    flex-direction:column; gap:3px; min-width:40px; padding-inline:3px; font-size:9px; line-height:1;
  }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-profile-box .wallet-view-control { width:54px; min-width:54px; max-width:54px; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .header-usd-total { font-size:15px; }

  :root body[data-lobby-layout="reference"] #games-hub #game-catalog .catalog-grid.game-tabs:not(.slots-catalog) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  :root body[data-lobby-layout="reference"] #games-hub[data-game-type="games"] #game-catalog .game-tab:not(.case-tile),
  :root body[data-lobby-layout="reference"] #games-hub #game-catalog .game-tile-art,
  :root body[data-lobby-layout="reference"] #games-hub #game-catalog .game-tile-art > img { border-radius:12px; }
  :root body[data-lobby-layout="reference"] #games-hub[data-game-type="games"] .game-panels > #game-catalog { gap:24px; }
  :root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops .bonus-drop-card { padding:12px 14px; }
  :root body[data-lobby-layout="reference"] #games-hub #game-catalog > .bonus-drops .bonus-drop-gift { width:44px; height:48px; }
}

/* The withdrawal arrow stays beside Deposit with its own accessible tap target. */
:root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions { flex-wrap:nowrap; }
:root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-withdraw {
  flex:none; width:44px; min-width:44px; margin-inline-start:6px; padding:10px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface,var(--paper)); color:var(--ink);
}
:root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-withdraw:hover { background:var(--raised); }
:root body[data-lobby-layout="reference"] .game-header#lobby-header .header-withdraw svg { display:block; }
@media(max-width:379px) {
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] > .site-header.game-header#lobby-header { grid-template-columns:minmax(0,1fr) auto; row-gap:8px; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet { grid-column:2; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell { grid-column:1/-1; grid-row:2; width:100%; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-lobby-layout="reference"] .game-header#lobby-header .wallet-view-shell > .wallet-profile-box { width:100%; border-inline-end:1px solid var(--line); border-radius:10px; }
  :root body[data-account-navigation][data-account-auth="signed-in"][data-game-ui="compact"][data-lobby-layout="reference"] .game-header#lobby-header .header-wallet-actions > .header-deposit { border-radius:10px; }
}
@media(max-width:900px) {
  :root[data-theme="light"] body[data-lobby-tabbar] .lobby-tab[data-tab="bonus"] svg { color:#a8771f; }
}