/* Menu panel shared by the phone drawer and the desktop sidebar: 215px, rounded, translucent teal, 44px items */
#mobileSideMenu .tw-header { padding: 25px 16px 16px; border-bottom: 0; }
#mobileSideMenu .tw-menu .tw-header, .tw-menu .tw-header { padding-inline: 16px; }
#mobileSideMenu .tw-logo { max-width: 171px; max-height: 35px; height: auto; }
#mobileSideMenu .tw-body { padding: 8px 16px 12px; }
#mobileSideMenu .tw-nav-section { margin: 14px 0 6px; }
#mobileSideMenu .tw-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.5); }
#mobileSideMenu .tw-nav-items { gap: 4px; }
#mobileSideMenu .tw-nav-item {
    height: 44px; padding: 12px 16px; gap: 12px; border-radius: 8px; border: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); justify-content: flex-start;
}
#mobileSideMenu .tw-nav-item i { font-size: 18px; width: 20px; color: rgba(255,255,255,.75); }
#mobileSideMenu .tw-nav-item:hover { background: rgba(255,255,255,.08); transform: none; }
#mobileSideMenu .tw-nav-item.is-active {
    background: rgba(255,255,255,.15); border-color: #ffde39; color: #ffde39; box-shadow: none;
}
#mobileSideMenu .tw-nav-item.is-active i { color: #ffde39; }
/* language row fits the 215px panel: label above, three equal buttons */
#mobileSideMenu .tw-footer-row { flex-direction: column; align-items: stretch; gap: 6px; }
#mobileSideMenu .tw-lang { display: flex; width: 100%; }
#mobileSideMenu .tw-lang-btn { flex: 1 1 0; min-width: 0; padding-inline: 0; text-align: center; justify-content: center; }


@media (max-width: 991px) {
    #mobileSideMenu.tw-menu {
        top: 20px; left: 0; width: 215px; max-width: 215px; height: calc(100vh - 20px); height: calc(100dvh - 20px);
        border-radius: 8px 8px 0 0; padding-top: 0;
    }
    [dir="rtl"] #mobileSideMenu.tw-menu { left: auto; right: 0; border-radius: 8px 8px 0 0; }
    #mobileSideMenu .tw-header, .tw-menu .tw-header { padding: 40px 16px 14px; }
    /* the sticky page header must not cover the panel's top edge while the menu is open */
    html.tw-menu-open header.header { z-index: 9000 !important; }
    #mobileSideMenu .tw-footer { padding: 8px 16px 12px; }
    #mobileSideMenu .tw-footer-row:first-child { display: none; }
}

/* Desktop (>=992px): the menu is a persistent left sidebar and the header is a plain top-right action bar.
   Values measured on the reference desktop layout: sidebar 215px wide, items 44px / 13px bold / 8px radius,
   active item white .15 bg + yellow #ffde39 text, buttons 36px high with 2px yellow outline. */
@media (min-width: 992px) {
    :root { --tw-side-w: 215px; --tw-side-gap: 16px; }
    body { padding-inline-start: calc(var(--tw-side-w) + var(--tw-side-gap)); }

    /* guests already have Register/Login in the top bar; the mobile bottom bar is not part of the desktop layout */
    #mobileSideMenu .tw-actions--guest { display: none !important; }

    #mobileSideMenu.tw-menu {
        top: 20px; bottom: 20px; left: 0; right: auto;
        width: var(--tw-side-w); max-width: none; height: auto;
        transform: none; visibility: visible; transition: none;
        border-radius: 8px;
        background: rgba(255,255,255,.05);
        box-shadow: none;
        padding-top: 0;
        z-index: 1000;
    }
    [dir="rtl"] #mobileSideMenu.tw-menu { left: auto; right: 0; }

    /* compact footer so the menu list keeps most of the sidebar height */
    #mobileSideMenu .tw-footer { padding: 8px 16px 12px; }
    #mobileSideMenu .tw-footer-row:first-child { display: none; }
    #mobileSideMenu .tw-footer-btn { height: 40px; }
    /* section headings are labels on desktop, not controls */
    #mobileSideMenu .tw-section-header { pointer-events: none; cursor: default; padding-bottom: 8px; }
    #mobileSideMenu .tw-section-toggle { display: none; }
    #mobileSideMenu .tw-nav-items, #mobileSideMenu .tw-nav-items.collapsed { max-height: none !important; opacity: 1 !important; overflow: visible; }
    /* Top bar: actions only, right aligned, no panel background */
    html body header.header {
        position: static; height: 58px !important; margin: 0; padding: 0 16px !important;
        background: transparent !important; box-shadow: none !important; border: 0 !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        justify-content: flex-end;
    }
    header.header .header-left, header.header .desktop-nav { display: none !important; }
    header.header .header-actions { margin-inline-start: auto; gap: 4px; }
    header.header .bonus-badge {
        width: 36px; height: 36px; border-radius: 8px; background: #f8df37 !important; color: #134e5e;
        box-shadow: none; font-size: 16px;
    }
    header.header .register-btn, header.header .login-btn {
        height: 36px !important; padding: 0 16px !important; border-radius: 8px;
        background: transparent !important; border: 2px solid #ffde39 !important; color: #fff !important;
        font-size: 13px !important; font-weight: 700; text-transform: uppercase; box-shadow: none !important;
    }
    header.header .login-btn i { display: none; }

    /* ── Reference-style account cluster (logged in): N tile · balance chip · profile square ── */
    .hd-n { display: none; }
    header.header .hd-n { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: #f8df37 !important; filter: drop-shadow(0 5px 15px rgba(249,177,9,.5)) !important;  }
    header.header .hd-n svg { width: 26px !important; height: 26px !important;  }
    header.header .header-actions { gap: 8px !important;  }
    header.header .wallet-box { height: 38px !important; padding: 3px 7px !important; gap: 0 !important; border: 0 !important; border-radius: 3.3px !important; background: rgba(255,255,255,.05) !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; transform: none !important;  }
    header.header .wallet-box:hover { background: rgba(255,255,255,.10) !important; transform: none !important;  }
    header.header .wallet-box > i { display: none !important;  }
    header.header .wallet-info { align-items: flex-end !important; gap: 3px !important;  }
    header.header .wallet-info small { font-size: 9.75px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.1 !important;  }
    header.header .wallet-info span.wb-val { display: inline-flex !important; gap: 4px !important; font-size: 11.4px !important; font-weight: 700 !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 0 !important; line-height: 1.1 !important;  }
    header.header .wb-cur { order: 2 !important;  }
    header.header .wb-cur::after { content: none !important;  }
    header.header .wb-num { order: 1 !important;  }
    header.header .menu-btn { color: #fff !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; border: 0 !important; background: rgba(255,255,255,.05) !important; font-size: 17px !important; transform: none !important;  }
    header.header .menu-btn:hover { background: rgba(255,255,255,.12) !important; transform: none !important;  }
    header.header .wallet-box:focus-visible, header.header .menu-btn:focus-visible, header.header .hd-n:focus-visible { outline: 2px solid #ffde39; outline-offset: 2px; }
    header.header .login-btn span { display: inline !important; }

    /* Casino lobby, signed in, desktop only: hide the top-right account cluster (.hd-account-widget = N tile + balance chip + profile button) and
       collapse the then-empty top bar so no blank strip is left above the content. Mobile / tablet (<992px) keep the cluster; the sidebar profile card,
       balance and Deposit button are different elements and stay. The guest bar (Register / Login) never has .hd-account-widget. */
    header.header.header--lobby-quiet .hd-account-widget { display: none !important; }
    html body header.header.header--lobby-quiet { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* brand tile only exists in the desktop top bar */
.hd-n { display: none; }
.wb-cur::after { content: "\00a0"; }