/* Global protected-page shell: header + bottom nav */
:root{
    --app-bg: var(--ds-bg, #0F172A);
    --app-green: var(--ds-green, #22C55E);
    --app-text: var(--ds-text, #E5E7EB);
    --app-muted: var(--ds-muted, #94A3B8);
    --app-stroke: var(--ds-stroke, rgba(148,163,184,.18));
}

.requires-valid-token{
    background: radial-gradient(1200px 600px at 30% -10%, rgba(34,197,94,.12), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(59,130,246,.10), transparent 60%),
        var(--app-bg);
}

.app-header{
    top: 0;
    left: 0;
    right: 0;
    max-width: min(480px, 100%);
    width: 100%;
    margin: 0 auto;
    min-height: var(--ds-header-height);
    padding: calc(var(--ds-header-padding-y) + env(safe-area-inset-top, 0px)) var(--ds-header-padding-x) var(--ds-header-padding-y);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--ds-header-gap-lg);
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    z-index: 999;
    background: var(--app-bg);
}
.app-header-left{
    display:flex;
    align-items:center;
    gap: var(--ds-header-gap-lg);
    min-width:0;
}
.app-header-titles{ min-width:0; }
.app-header-title{
    font-weight: var(--ds-header-title-weight);
    letter-spacing:.02em;
    font-size: var(--ds-header-title-size);
    line-height: var(--ds-header-title-leading);
    color: var(--app-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.app-header-title-accent{ color: var(--app-green); }
.app-header-title--logo{
    display:flex;
    align-items:center;
    overflow:visible;
    line-height: 0;
    position: relative;
    z-index: 2;
}
.app-header-title-logo{
    display:block;
    height: clamp(2.1rem, 7.5vw, 2.75rem);
    width: auto;
    max-width: min(58vw, 14.5rem);
    object-fit: contain;
    object-position: left center;
    position: relative;
    z-index: 3;
}
/* Keep default header height — allow logo to overflow above the bar */
.app-header:has(.app-header-title-logo){
    overflow: visible;
}
.app-header:has(.app-header-title-logo) .app-header-titles,
.app-header:has(.app-header-title-logo) .app-header-left{
    overflow: visible;
}
.app-header-tagline{
    margin: 0;
    color: var(--app-muted);
    font-size: var(--ds-header-tagline-size);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.app-header-sub{
    color: var(--app-muted);
    font-size: var(--ds-header-subtitle-size);
    font-weight: 500;
    line-height: 1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.app-header-right{
    display:flex;
    align-items:center;
    gap: var(--ds-header-gap);
    flex-shrink: 0;
}

/* Icon buttons — button box vs glyph size are separate tokens */
.app-icon-btn,
.app-icon-btn.app-icon-btn{
    width: var(--ds-header-icon-button-size);
    height: var(--ds-header-icon-button-size);
    min-width: var(--ds-header-icon-button-size);
    min-height: var(--ds-header-icon-button-size);
    padding: 0;
    border-radius: var(--ds-header-icon-radius);
    border:1px solid rgba(148,163,184,.16);
    background: rgba(148,163,184,.08);
    color: #E2E8F0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
    transition: transform .12s ease, filter .16s ease;
    font-size: var(--ds-header-icon-size);
    line-height: 1;
}
.app-icon-btn > i,
.app-icon-btn > .bi,
.app-header-icon{
    font-size: var(--ds-header-icon-size);
    line-height: 1;
    display: block;
}
.app-icon-btn.is-ghost{
    border-color: transparent;
    background: transparent;
    color: rgba(226,232,240,.55);
}
.app-icon-btn.neon-press,
.app-icon-btn:active{ transform: scale(.98); }
.app-icon-btn:hover{ filter: brightness(1.05); }
.app-icon-btn.dropdown-toggle:after{ display:none; }

.app-coin-pill{
    display:inline-flex;
    align-items:center;
    gap: 0.25rem;
    padding: 0.1875rem 0.25rem 0.1875rem 0.4375rem;
    border-radius: 999px;
    border:1px solid rgba(34,197,94,.28);
    background: rgba(10, 16, 28, .9);
    color: rgba(34,197,94,.98);
    font-weight: var(--ds-header-balance-font-weight);
    font-size: var(--ds-header-balance-font-size);
    line-height: 1.1;
    white-space: nowrap;
    max-width: min(44vw, 10rem);
    min-width: 0;
    min-height: var(--ds-header-icon-button-size);
    box-sizing: border-box;
}
.app-coin-pill .bi-wallet2,
.app-coin-pill .app-header-wallet-icon{
    font-size: var(--ds-header-balance-icon-size);
    line-height: 1;
    flex-shrink: 0;
}
.app-coin-value,
.app-header-balance-value,
[data-app-wallet-balance]{
    overflow:hidden;
    text-overflow:ellipsis;
    min-width: 0;
    font-size: var(--ds-header-balance-font-size);
    font-weight: var(--ds-header-balance-font-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.app-coin-add{
    display:inline-grid;
    place-items:center;
    width: var(--ds-header-balance-add-size);
    height: var(--ds-header-balance-add-size);
    border-radius: 50%;
    background: #22c55e;
    color: #07111f;
    font-size: var(--ds-header-balance-add-icon-size);
    line-height: 1;
    flex-shrink: 0;
}
.app-coin-add > i,
.app-coin-add > .bi{
    font-size: var(--ds-header-balance-add-icon-size);
    line-height: 1;
}

/* Game topbars — color/theme only; sizes come from header tokens above */
.cg-topbar .app-icon-btn,
.cg-info-row ~ .cg-controls .app-icon-btn {
    border: 1px solid rgba(245, 197, 24, 0.55);
    background: linear-gradient(180deg, rgba(42, 18, 72, 0.92), rgba(10, 6, 28, 0.94));
    color: #fde68a;
    border-radius: 0.55rem;
}
.lr-topbar .app-icon-btn,
.game-lucky-reels-page .lr-topbar .app-icon-btn {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.85);
    color: #e2e8f0;
}
/* Slide sidebar — compact 300px premium drawer */
.app-sidebar{
    --bs-offcanvas-width: var(--ds-sidebar-width, 300px);
    width: var(--ds-sidebar-width, 300px) !important;
    max-width: min(300px, 92vw);
    background: #0b1220;
    color: var(--app-text);
    border-right: 1px solid rgba(148,163,184,.1);
    border-left: 0;
    box-shadow: 12px 0 28px rgba(0,0,0,.45);
    z-index: 1060;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-nav);
    font-weight: var(--ds-weight-nav);
    line-height: var(--ds-leading-nav);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.app-sidebar *,
.app-sidebar *::before,
.app-sidebar *::after{ box-sizing: border-box; }
.app-sidebar a{ color: inherit; }
.app-sidebar-inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    padding: 0.75rem var(--ds-sidebar-pad-x) max(0.65rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}
.app-sidebar-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-bottom: 0.45rem;
}
.app-sidebar-user{
    min-width: 0;
    flex: 1 1 auto;
}
.app-sidebar-kicker{
    margin: 0 0 0.15rem;
    padding: 0;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-signed);
    font-weight: var(--ds-weight-section);
    letter-spacing: var(--ds-letter-signed);
    text-transform: uppercase;
    color: var(--ds-muted);
    line-height: 1;
}
.app-sidebar-name{
    margin: 0;
    padding: 0;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-user);
    font-weight: 700;
    line-height: var(--ds-sidebar-leading-user);
    color: #f8fafc;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
    min-width: 0;
}
.app-sidebar-wave{
    display: inline-block;
    font-size: 0.62em;
    font-weight: 400;
    line-height: 1;
    vertical-align: 0.08em;
    opacity: 0.9;
}
.app-sidebar-close{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border-radius: 0.7rem;
    border: 1px solid rgba(148,163,184,.2);
    background: rgba(15,23,42,.9);
    color: rgba(226,232,240,.86);
    font-size: var(--ds-icon-close);
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.app-sidebar-close:hover,
.app-sidebar-close:focus-visible{
    background: rgba(148,163,184,.1);
    border-color: rgba(148,163,184,.3);
    color: #fff;
    outline: 0;
}
.app-sidebar-close:active,
.app-sidebar-close.neon-press{ transform: scale(.97); }

.app-sidebar-balance{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin: 0 0 0.4rem;
    padding: 0.55rem 0.75rem;
    min-height: 0;
    height: auto;
    border-radius: 0.875rem;
    border: 1px solid rgba(34,197,94,.26);
    background:
        linear-gradient(180deg, rgba(34,197,94,.08), rgba(34,197,94,.02)),
        #0a1524;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.app-sidebar-balance-copy{ min-width: 0; flex: 1 1 auto; }
.app-sidebar-balance-label{
    margin: 0 0 0.05rem;
    padding: 0;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-coin-label);
    font-weight: var(--ds-weight-section);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-muted);
    line-height: 1.1;
}
.app-sidebar-balance-value{
    margin: 0;
    padding: 0;
    font-family: var(--ds-font-sans);
    font-weight: 700;
    font-size: var(--ds-text-balance);
    line-height: 1.15;
    color: var(--ds-green);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.app-sidebar-balance-icon{
    flex-shrink: 0;
    width: var(--ds-icon-wallet);
    font-size: var(--ds-icon-wallet);
    color: rgba(34,197,94,.86);
    line-height: 1;
    text-align: center;
}

.app-sidebar-nav{
    display: flex;
    flex-direction: column;
    gap: 0.125rem; /* 2px between rows */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.05rem;
    overscroll-behavior: contain;
}
.app-sidebar-group{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.55rem 0 0.2rem; /* ~9px / 3px — compact section breaks */
}
.app-sidebar-group:first-child{ margin-top: 0; }
.app-sidebar-group-rule{
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: rgba(148,163,184,.08);
}
.app-sidebar-group-label{
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-section);
    font-weight: var(--ds-weight-section);
    letter-spacing: var(--ds-letter-section);
    text-transform: uppercase;
    color: rgba(34,197,94,.88);
    line-height: 1.15;
}

.app-sidebar-link{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ds-sidebar-icon-gap);
    min-height: var(--ds-row-nav);
    height: var(--ds-row-nav);
    max-height: var(--ds-row-nav);
    padding: 0 0.625rem;
    margin: 0;
    border: 0;
    border-radius: var(--ds-sidebar-radius);
    background: transparent;
    text-decoration: none !important;
    color: #e5e7eb;
    font-family: var(--ds-font-sans);
    font-weight: var(--ds-weight-nav);
    font-size: var(--ds-text-nav);
    line-height: var(--ds-leading-nav);
    letter-spacing: 0;
    min-width: 0;
    transition: background-color .15s ease, color .15s ease;
}
.app-sidebar-link-icon{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-sidebar-icon-box);
    height: var(--ds-sidebar-icon-box);
    font-size: var(--ds-icon-nav);
    line-height: 1;
    color: #94a3b8;
    text-align: center;
}
.app-sidebar-link-label{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-nav);
    font-weight: var(--ds-weight-nav);
    line-height: var(--ds-leading-nav);
    letter-spacing: 0;
    color: inherit;
}
.app-sidebar-link-chevron{
    flex: 0 0 auto;
    font-size: var(--ds-icon-chevron);
    color: rgba(148,163,184,.38);
    line-height: 1;
}
.app-sidebar-link:hover,
.app-sidebar-link:focus-visible{
    background: rgba(148,163,184,.05);
    color: #f8fafc;
    outline: 0;
}
.app-sidebar-link:hover .app-sidebar-link-icon,
.app-sidebar-link:focus-visible .app-sidebar-link-icon{
    color: #cbd5e1;
}
.app-sidebar-link:active,
.app-sidebar-link.neon-press{ transform: scale(.99); }

.app-sidebar-link.is-active{
    background: linear-gradient(90deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
    color: #fff;
}
.app-sidebar-link.is-active .app-sidebar-link-label{
    font-weight: var(--ds-weight-nav);
    color: #fff;
}
.app-sidebar-link.is-active::before{
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ds-green);
}
.app-sidebar-link.is-active .app-sidebar-link-icon,
.app-sidebar-link.is-active .app-sidebar-link-chevron{
    color: var(--ds-green);
}

.app-sidebar-footer{
    flex: 0 0 auto;
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(148,163,184,.09);
}
.app-sidebar-logout{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ds-sidebar-icon-gap);
    width: 100%;
    min-height: 2.75rem;
    height: 2.75rem;
    max-height: 2.75rem;
    margin: 0 0 0.25rem;
    padding: 0 0.625rem;
    border-radius: var(--ds-sidebar-radius);
    border: 1px solid rgba(239,68,68,.14);
    background: rgba(239,68,68,.055);
    color: #f87171;
    font-family: var(--ds-font-sans);
    font-weight: var(--ds-weight-nav);
    font-size: var(--ds-text-nav);
    line-height: var(--ds-leading-nav);
    text-align: left;
    min-width: 0;
    transition: background-color .15s ease, border-color .15s ease;
}
.app-sidebar-logout .app-sidebar-link-label{
    color: inherit;
    font-size: var(--ds-text-nav);
    font-weight: var(--ds-weight-nav);
    line-height: var(--ds-leading-nav);
}
.app-sidebar-logout .app-sidebar-link-icon,
.app-sidebar-logout .app-sidebar-link-chevron{
    color: #f87171;
}
.app-sidebar-logout:hover,
.app-sidebar-logout:focus-visible{
    background: rgba(239,68,68,.09);
    border-color: rgba(239,68,68,.22);
    outline: 0;
}
.app-sidebar-logout:active{ transform: scale(.99); }

.app-sidebar-safe{
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding-top: 0.5rem;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-safe);
    font-weight: 500;
    line-height: var(--ds-leading-safe);
    color: rgba(148,163,184,.68);
}
.app-sidebar-safe .bi{
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    color: var(--ds-green);
}
.app-sidebar-safe-copy{
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    min-width: 0;
}

/* Smooth offcanvas animation (subtle) */
.offcanvas.app-sidebar{
    transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility .34s;
}
.offcanvas-backdrop{
    z-index: 1055;
}
.offcanvas-backdrop.show{
    opacity: .58;
    background-color: #020617;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
    .offcanvas-backdrop.show{
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}
body:has(.app-sidebar.show) .app-bottom-nav{
    pointer-events: none;
}

.app-bottom-nav{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: min(720px, calc(100% - 24px));
    background: rgba(10,16,32,.72);
    border: 1px solid rgba(148,163,184,.16);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0,0,0,.45);
    padding: 10px 10px;
    z-index: 1050;
}
.app-bottom-nav-inner{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:8px;
}
.app-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius: 14px;
    padding: 10px 6px;
    color: rgba(226,232,240,.80);
    text-decoration:none;
    border: 1px solid transparent;
}
.app-nav-item.is-active{
    color:#061016;
    background: rgba(34,197,94,.95);
    border-color: rgba(34,197,94,.35);
    box-shadow: 0 12px 22px rgba(34,197,94,.18);
}
.app-nav-item .bi{ font-size: var(--ds-text-lg); }
.app-nav-label{ font-size: var(--ds-text-xs); font-weight: 900; letter-spacing:.02em; }

.app-page-pad{
    max-width: 720px;
    margin: 0 auto;
    /* !important beats Bootstrap pt-* utilities and page inner padding-top overrides */
    padding-top: calc(
        var(--ds-header-offset) + var(--ds-header-content-gap) + env(safe-area-inset-top, 0px)
    ) !important;
    padding-bottom: 96px;
}

/* Global API loader overlay */
.global-loader{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display:flex;
    align-items:center;
    justify-content:center;
}
.global-loader-backdrop{
    position:absolute;
    inset:0;
    background: rgba(2,6,23,.62);
    backdrop-filter: blur(6px);
}
.global-loader-panel{
    position: relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(10,16,32,.92);
    border: 1px solid rgba(34,197,94,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 2px rgba(34,197,94,.08);
    color: rgba(226,232,240,.92);
}
.global-loader-text{
    font-weight: 800;
    letter-spacing: .02em;
    font-size: var(--ds-text-md);
}

@media (prefers-reduced-motion: reduce){
    .app-icon-btn{ transition:none; }
    .offcanvas.app-sidebar{ transition:none; }
    .app-sidebar-link,
    .app-sidebar-logout,
    .app-sidebar-close{ transition:none; }
}

@media (max-width: 390px){
    .app-header{
        padding-left: var(--ds-header-mobile-padding-x);
        padding-right: var(--ds-header-mobile-padding-x);
    }
    .app-bottom-nav{ bottom: 8px; }
    .app-sidebar{
        width: min(300px, 92vw) !important;
        max-width: min(300px, 92vw);
    }
    .app-sidebar-name{ font-size: var(--ds-sidebar-user-mobile); }
    .app-sidebar-balance{ padding: 0.5rem 0.65rem; }
}

@media (min-width: 481px){
    .app-header{
        padding-left: var(--ds-header-desktop-padding-x);
        padding-right: var(--ds-header-desktop-padding-x);
    }
}