/* 888 LOTTO Player v3.10.65 — compact mobile/tablet wallet header.
   Wallet + Withdraw + Deposit stay on one row. */
.wallet-quick-action-icon {
  display:block;
  width:20px;
  height:20px;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.wallet-quick-action-icon path,
.wallet-quick-action-icon circle,
.wallet-quick-action-icon rect,
.wallet-quick-action-icon line,
.wallet-quick-action-icon polyline {
  fill:none !important;
  stroke:currentColor !important;
}
.mobile-lobby-shortcuts { display:none; }

@media (max-width:1180px) {
  .topbar {
    position:sticky !important;
    top:0 !important;
    z-index:190 !important;
    display:grid !important;
    grid-template-columns:40px minmax(52px,1fr) auto !important;
    grid-template-areas:"menu brand utility" !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    min-height:62px !important;
    height:auto !important;
    padding:7px 9px !important;
    background:linear-gradient(180deg,rgba(8,8,9,.995),rgba(13,12,9,.99)) !important;
    border-bottom:1px solid rgba(221,185,79,.24) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.34) !important;
    overflow:visible !important;
  }

  .mobile-menu-button {
    grid-area:menu !important;
    position:static !important;
    display:grid !important;
    place-items:center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    border:1px solid rgba(221,185,79,.27) !important;
    border-radius:11px !important;
    background:linear-gradient(180deg,#171719,#0d0d0f) !important;
    color:#f2ca4d !important;
    box-shadow:0 6px 16px rgba(0,0,0,.22) !important;
  }
  .topbar-sidebar-toggle,
  #desktopSidebarToggle,
  .topbar-title { display:none !important; }

  .header-brand-home {
    grid-area:brand !important;
    display:flex !important;
    align-items:center !important;
    justify-self:start !important;
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    padding:3px 7px 3px 4px !important;
    gap:8px !important;
    border:1px solid rgba(221,185,79,.17) !important;
    border-radius:14px !important;
    background:linear-gradient(145deg,rgba(35,29,17,.76),rgba(11,11,12,.86)) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.2) !important;
    overflow:hidden !important;
  }
  .header-brand-mark,
  .header-brand-mark.has-logo {
    flex:0 0 42px !important;
    width:42px !important;
    height:40px !important;
    border-radius:11px !important;
  }
  .header-brand-copy { min-width:0 !important; }
  .header-brand-copy strong {
    display:block !important;
    max-width:min(30vw,265px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:clamp(13px,1.7vw,19px) !important;
    line-height:1.05 !important;
  }
  .header-brand-copy small {
    display:block !important;
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  .topbar-actions {
    grid-area:utility !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    justify-self:end !important;
    gap:5px !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    position:relative !important;
    z-index:192 !important;
  }
  .guest-auth-actions { display:flex !important; flex-wrap:nowrap !important; }
  .notification-wrap {
    order:0 !important;
    flex:0 0 auto !important;
    grid-area:auto !important;
  }
  .notification-button {
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:11px !important;
    color:#f5d86d !important;
    background:linear-gradient(180deg,#171719,#0e0e10) !important;
    border:1px solid rgba(221,185,79,.26) !important;
  }

  .topbar-wallet-cluster {
    order:1 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .topbar-wallet-card,
  .game-wallet-balance-card.topbar-wallet-card {
    display:flex !important;
    flex:0 1 148px !important;
    width:148px !important;
    max-width:148px !important;
    min-width:116px !important;
    height:42px !important;
    min-height:42px !important;
    padding:4px 6px !important;
    gap:5px !important;
    border-radius:11px !important;
    cursor:pointer !important;
    background:linear-gradient(180deg,#171719,#0e0e10) !important;
    border:1px solid rgba(221,185,79,.3) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.24) !important;
    overflow:hidden !important;
  }
  .topbar-wallet-card .game-wallet-icon {
    display:grid !important;
    place-items:center !important;
    flex:0 0 27px !important;
    width:27px !important;
    height:27px !important;
    border-radius:8px !important;
  }
  .topbar-wallet-card .game-wallet-icon svg { width:16px !important; height:16px !important; }
  .topbar-wallet-card .game-wallet-copy {
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .topbar-wallet-card .game-wallet-copy span {
    display:none !important;
  }
  .topbar-wallet-card .game-wallet-copy strong {
    display:block !important;
    max-width:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:18px !important;
    line-height:1 !important;
    color:#fff0b7 !important;
  }
  .wallet-refresh-button {
    position:static !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 27px !important;
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    padding:0 !important;
    border-radius:8px !important;
    pointer-events:auto !important;
  }
  .wallet-refresh-button svg { width:16px !important; height:16px !important; }

  .topbar-wallet-actions,
  .game-wallet-actions.topbar-wallet-actions {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    gap:5px !important;
    width:auto !important;
    min-width:0 !important;
  }
  .topbar-wallet-actions .wallet-quick-action {
    display:grid !important;
    place-items:center !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:11px !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18) !important;
    line-height:1 !important;
    overflow:hidden !important;
  }
  .topbar-wallet-actions .wallet-quick-action span {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  #gamesWithdrawButton {
    order:1 !important;
    color:#fff !important;
    background:linear-gradient(145deg,#2988ff,#0d4ba8) !important;
    border-color:#5aa5ff !important;
  }
  #gamesDepositButton {
    order:2 !important;
    color:#fff8e6 !important;
    background:linear-gradient(145deg,#ffb52f,#d64320) !important;
    border-color:#ffc360 !important;
  }
  #gamesApplyCreditsButton,
  #logoutButton { display:none !important; }

  .mobile-lobby-shortcuts {
    order:1 !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100% !important;
    padding:7px 6px !important;
    border:1px solid rgba(221,185,79,.18) !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,#151517,#0d0d0f) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
  }
  .mobile-lobby-shortcut {
    appearance:none !important;
    display:grid !important;
    justify-items:center !important;
    align-content:center !important;
    gap:5px !important;
    min-width:0 !important;
    min-height:64px !important;
    padding:6px 2px !important;
    border:0 !important;
    border-radius:11px !important;
    color:#fff0ba !important;
    background:transparent !important;
    font:inherit !important;
    font-size:9px !important;
    font-weight:850 !important;
    line-height:1 !important;
    cursor:pointer !important;
  }
  .mobile-lobby-shortcut:active {
    background:rgba(221,185,79,.1) !important;
    transform:translateY(1px) !important;
  }
  .mobile-lobby-shortcut-icon {
    display:grid !important;
    place-items:center !important;
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    color:#171006 !important;
    background:linear-gradient(180deg,#f3d46b,#c99b2c) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.24) !important;
  }
  .mobile-lobby-shortcut-icon svg {
    width:18px !important;
    height:18px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #gameLobby > .lobby-announcement { order:0 !important; }
  #gameLobby > .mobile-lobby-shortcuts { order:1 !important; }
  #gameLobby > .lobby-category-nav { order:2 !important; }
  #gameLobby > .game-showcase-section,
  #gameLobby > .game-provider-section,
  #gameLobby > #featuredSection { order:3 !important; }
  .content { padding-bottom:88px !important; }
}

@media (max-width:720px) {
  .topbar {
    grid-template-columns:38px 44px minmax(0,1fr) !important;
    grid-template-areas:"menu brand utility" !important;
    gap:5px !important;
    min-height:56px !important;
    padding:6px !important;
  }
  .mobile-menu-button { width:38px !important; min-width:38px !important; height:38px !important; }
  .header-brand-home {
    width:44px !important;
    max-width:44px !important;
    height:42px !important;
    padding:2px !important;
    border-radius:11px !important;
  }
  .header-brand-mark,
  .header-brand-mark.has-logo { flex-basis:38px !important; width:38px !important; height:36px !important; }
  .header-brand-copy { display:none !important; }
  .notification-button { width:38px !important; min-width:38px !important; height:38px !important; }
  .topbar-wallet-card,
  .game-wallet-balance-card.topbar-wallet-card {
    flex-basis:128px !important;
    width:128px !important;
    max-width:128px !important;
    min-width:104px !important;
    height:38px !important;
    min-height:38px !important;
  }
  .topbar-wallet-card .game-wallet-icon { flex-basis:24px !important; width:24px !important; height:24px !important; }
  .topbar-wallet-card .game-wallet-copy strong { font-size:16px !important; }
  .wallet-refresh-button { flex-basis:24px !important; width:24px !important; min-width:24px !important; height:24px !important; }
  .topbar-wallet-actions .wallet-quick-action {
    flex-basis:38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
  .wallet-quick-action-icon { width:18px !important; height:18px !important; }
}

@media (max-width:520px) {
  .notification-wrap { display:none !important; }
  .topbar-wallet-cluster { gap:4px !important; }
  .topbar-wallet-card,
  .game-wallet-balance-card.topbar-wallet-card {
    flex-basis:112px !important;
    width:112px !important;
    max-width:112px !important;
    min-width:92px !important;
    padding:4px 5px !important;
  }
  .topbar-wallet-card .game-wallet-icon { display:none !important; }
  .topbar-wallet-card .game-wallet-copy strong { font-size:15px !important; }
  .mobile-lobby-shortcuts { gap:3px !important; padding:5px 3px !important; }
  .mobile-lobby-shortcut { min-height:57px !important; padding:5px 1px !important; font-size:8px !important; }
  .mobile-lobby-shortcut-icon { width:30px !important; height:30px !important; }
  .mobile-lobby-shortcut-icon svg { width:16px !important; height:16px !important; }
  #gameLobby.game-lobby { gap:9px !important; padding-top:6px !important; }
  #gameLobby .compact-games-grid,
  #gameLobby #categoriesSection .compact-games-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }
}

@media (max-width:380px) {
  .topbar { grid-template-columns:34px 38px minmax(0,1fr) !important; gap:4px !important; padding:5px 4px !important; }
  .mobile-menu-button { width:34px !important; min-width:34px !important; height:34px !important; border-radius:9px !important; }
  .header-brand-home { width:38px !important; max-width:38px !important; height:38px !important; }
  .header-brand-mark,
  .header-brand-mark.has-logo { width:34px !important; height:33px !important; }
  .topbar-wallet-card,
  .game-wallet-balance-card.topbar-wallet-card {
    flex-basis:96px !important;
    width:96px !important;
    max-width:96px !important;
    min-width:86px !important;
    height:34px !important;
    min-height:34px !important;
  }
  .topbar-wallet-card .game-wallet-copy strong { font-size:14px !important; }
  .wallet-refresh-button { flex-basis:22px !important; width:22px !important; min-width:22px !important; height:22px !important; }
  .topbar-wallet-actions .wallet-quick-action {
    flex-basis:34px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
  }
}