/* All routed pages use the same outer flow. Component interiors keep their own design. */
:root{--page-space:12px;--item-group-space:35px;--auth-entry-space:50px}
#app #main{
 display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--page-space);
 padding-block:var(--page-space);
}
/* A legal footer is in document flow on staff pages. Reserve fixed navigation
   once on the last in-flow element, using its actual height including safe-area padding. */
#app #main.member-page{padding-bottom:calc(var(--fixed-nav-height,0px) + var(--page-space))}
#app>.footer.has-fixed-nav{padding-bottom:calc(var(--fixed-nav-height,0px) + var(--page-space))}
#app #main>:not([hidden]){margin-block:0;min-width:0}
#app #main .page-flow:not([hidden]){
 display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--page-space);min-width:0;
}
#app #main .page-flow>:not([hidden]){margin-block:0;min-width:0}
#app #main :is(.form-error,.form-success,.pagination,.slider-message,[data-update-setting-message],#provider-status):empty{display:none}
/* Flow containers, including asynchronously rendered Wallet/Order/Topup content. */
#app #main.member-page :is(
 #catalog,#catalog-content,#order-content,#member-wallet-content,
 #member-wallet-topup,#member-wallet-overview,#member-wallet-activity,
 #member-wallet-history,.wallet-activity-section,#member-offers,.member-item-group,
 .auth-wrap,#auth-form,#member-registration-form,.registration-step:not([hidden]),#member-pin-form,#email-otp-form,#forgot-pin-form :where(fieldset),#password-form,#deposit-form,#topup-confirm-form,
 .profile-recovery form,.profile-recovery .field,
 #payment-form,.checkout-buyer-fields,.order-delivery,.order-delivery-list,.order-details-view,
 .panel:not(.summary-card):not(.checkout-item-panel)
){display:grid;gap:var(--page-space);align-content:start;min-width:0}
#app #main.member-page :is(
 #catalog,#catalog-content,#order-content,#member-wallet-content,
 #member-wallet-topup,#member-wallet-overview,#member-wallet-activity,
 #member-wallet-history,.wallet-activity-section,#member-offers,.member-item-group,
 .auth-wrap,#auth-form,#member-registration-form,.registration-step:not([hidden]),#member-pin-form,#email-otp-form,#forgot-pin-form :where(fieldset),#password-form,#deposit-form,#topup-confirm-form,
 .profile-recovery form,.profile-recovery .field,
 #payment-form,.checkout-buyer-fields,.order-delivery,.order-delivery-list,.order-details-view,
 .panel:not(.summary-card):not(.checkout-item-panel),.stack
)>:not([hidden]){margin-block:0;min-width:0}

#app #main.member-page :is(
 .split,.stack,.catalog-tools,.catalog-grid,.offer-grid,.order-card-grid,.order-list,
 .member-wallet-tabs,.row,.topup-actions,.member-pin-actions,.pagination,.product-head
){gap:var(--page-space)}
#app #main.member-page .auth-wrap{width:100%;margin-inline:auto}

/* Member form fields use the same label spacing and inset selection ring on every route. */
:is(#app #main.member-page, :root[data-role="member"] #dialog) .field {
 display:grid;
 row-gap:var(--page-space);
}
:is(#app #main.member-page, :root[data-role="member"] #dialog) .field > label {
 margin-block:0;
}
:is(#app #main.member-page, :root[data-role="member"] #dialog) {
 --member-selection-ring:3px solid var(--orange);
}
:is(#app #main.member-page, :root[data-role="member"] #dialog)
 :is(input:not([type="hidden"]), select, textarea):enabled:focus,
#app #main.member-page :is(input[type="checkbox"],input[type="radio"]):enabled:checked,
#app #main.member-page :is(.game-card,.offer-link,.category-strip > button,.member-wallet-tabs > button):is(:focus,:active),
#app #main.member-page :is(.category-strip,.member-wallet-tabs) > button[aria-pressed="true"] {
 outline:var(--member-selection-ring);
 outline-offset:-3px;
}
#app #main.member-page .member-wallet-tabs > button[aria-pressed="true"] {
 background:var(--accent-tint);
 color:var(--orange);
}
/* Paint the radio's ring on top of the visible bank logo. */
#app #main.member-page .payment-option input:enabled:is(:focus,:checked) + .payment-option-body {
 outline:none;
}
#app #main.member-page .payment-option input:enabled:is(:focus,:checked) + .payment-option-body::after {
 content:"";
 position:absolute;
 inset:0;
 z-index:2;
 border-radius:var(--corner-radius);
 outline:var(--member-selection-ring);
 outline-offset:-3px;
 pointer-events:none;
}

/* PIN/OTP rows span the Member content area while other form controls keep their width. */
#app #main.member-page:has(.member-secret-field){container-type:inline-size}
#app #main.member-page .member-secret-field{grid-template-columns:minmax(0,1fr)}
#app #main.member-page .member-secret-field>:is(label,.otp-reference){
 grid-area:1/1;align-self:center;padding-inline-end:44px;min-width:0;
}
#app #main.member-page .member-secret-field>.otp-reference{padding-inline:44px}
#app #main.member-page .secret-eye{
 grid-area:1/1;justify-self:end;align-self:center;width:44px;min-width:0;min-height:36px;
 display:grid;place-items:center;padding:0;margin:0;border:0;background:transparent;color:var(--muted);transform:none;
}
#app #main.member-page .secret-eye:is(:hover,:focus-visible,[aria-pressed="true"]){color:var(--orange)}
#app #main.member-page .secret-eye:focus-visible{outline-offset:-4px}
#app #main.member-page .secret-eye[aria-pressed="true"] .eye-slash{display:none}
#app #main.member-page .member-code-strip{
 grid-area:2/1;justify-self:center;position:relative;min-width:0;width:100%;direction:ltr;
}
@supports(width:100cqi){
 #app #main.member-page .member-code-strip{width:100cqi}
}
/* Align the two PIN verification actions with the full row of seven OTP cells. */
#app #main.member-page #email-otp-form:has(.pin-otp-actions){grid-template-columns:minmax(0,1fr)}
#app #main.member-page #email-otp-form .pin-otp-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;
 width:100%;justify-self:center;gap:var(--page-space);
}
@supports(width:100cqi){
 #app #main.member-page #email-otp-form .pin-otp-actions{width:100cqi}
}
#app #main.member-page #email-otp-form .pin-otp-actions>button{
 width:100%;min-width:0;min-height:44px;margin:0;display:grid;place-items:center;
}
#app #main.member-page .member-code-strip>input{
 position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;margin:0;padding:0;
}
#app #main.member-page .member-code-cells{
 display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:min(2vw,var(--page-space));pointer-events:none;
}
#app #main.member-page .member-code-cells>span{
 display:grid;place-items:center;min-height:48px;border:1px solid #3a4352;border-radius:var(--corner-radius);
 background:#111822;color:var(--text);font-variant-numeric:tabular-nums;user-select:none;
}
#app #main.member-page .member-code-cells>:is(.code-active,.code-selected){
 outline:var(--member-selection-ring);outline-offset:-3px;
}
#app #main.member-page .member-code-cells>.code-selected{background:var(--accent-tint)}
#app #main.member-page .member-code-strip>input:disabled + .member-code-cells{opacity:.55}

#app #main.member-page :is(.section-heading,.section-heading h2){margin-block:0}
#app #main.member-page :is(.catalog-tools,.member-wallet-tabs,.pagination,.section-space){margin-block:0}
#app #main.member-page .category-strip{gap:var(--page-space);padding-block:0}
@media(min-width:761px){#app #main.member-page .catalog-tools{align-items:flex-start}}
#app #main.member-page .payment-options{gap:var(--page-space);padding-block:0}
#app #main.member-page :is(.form-error,.form-success,.pagination,#pin-status,#deposit-payment-details):empty{display:none}

/* Empty infinite-scroll sentinel must stay observable without a blank loading box. */
#catalog-count{display:flex;justify-content:space-between;gap:var(--page-space);font-variant-numeric:tabular-nums}
#catalog-count>span:last-child{text-align:right}
#app #main.member-page #catalog-content{position:relative}
#app #main.member-page .catalog-load{margin:0}
#app #main.member-page .catalog-load:empty{position:absolute;bottom:0;left:0;width:100%;height:1px;min-height:0}

/* Keep compact summary rows and all card interiors as designed. Only the external
   transitions between summary, buyer fields, confirmation and submit are spaced. */
#app #main.member-page .summary-card>.notice{margin:0 0 var(--page-space)}
#app #main.member-page .summary-card>h2{margin:0 0 var(--page-space)}
#app #main.member-page .checkout-buyer-fields{margin-block:var(--page-space)}
#app #main.member-page #checkout-funding-status{margin-block:var(--page-space)}
#app #main.member-page .summary-card>.form-error:not(:empty){margin:var(--page-space) 0}

/* The moving notice touches the Slider; the shared 12px parent gap
   separates this combined block from the Game category buttons. */
#app #main.member-page .shop-slider-notice{display:grid;gap:0;min-width:0}
#app #main.member-page .shop-slider-notice>*{margin-block:0;min-width:0}

/* Separate complete Game Item Groups by 35px; each group's contents stay 12px apart. */
#app #main.member-page #member-offers{row-gap:var(--item-group-space)}

/* Staff pages: only the flow between components changes. Keep data rows, cards,
   bank headings, and existing grid columns / flex direction intact. */
#app #main:not(.member-page) :is(.auth-wrap,.seller-profile){width:100%;margin-inline:auto}
#app #main:not(.member-page) :is(
 .auth-wrap,.seller-profile,.section-space,section.panel:not(.supplier-balance),
 .bank-account-form,.sell-editor-page,.topup-review-form,.topup-review-fields,
 #auth-form,#staff-form,#password-form,#settings-form,#provider-form,#order-content,
 #slider-manager,#sell-percent-page,#sell-item-page,#sell-prices,#sell-group-names-form,
 .sell-percent-form,.telegram-contacts-form,.order-details-view,.order-delivery
):not([hidden]){
 display:grid;align-content:start;grid-template-columns:minmax(0,1fr);gap:var(--page-space);min-width:0;
}
#app #main:not(.member-page) :is(
 .auth-wrap,.seller-profile,.section-space,section.panel:not(.supplier-balance),
 .bank-account-form,.sell-editor-page,.topup-review-form,.topup-review-fields,
 #auth-form,#staff-form,#password-form,#settings-form,#provider-form,#order-content,
 #slider-manager,#sell-percent-page,#sell-item-page,#sell-prices,#sell-group-names-form,
 .sell-percent-form,.telegram-contacts-form,.order-details-view,.order-delivery,
 .split,.stack,.profile-grid,.settings-grid,.bank-account-grid,.sell-editor-grid,.stats,
 .order-list,.order-card-grid,.slider-manager-list,.report-filters
)>:not([hidden]){margin-block:0;min-width:0}
#app #main:not(.member-page) :is(
 .split,.stack,.profile-grid,.settings-grid,.bank-account-grid,.sell-editor-grid,
 .stats,.order-list,.order-card-grid,.slider-manager-list,.report-filters,.report-tabs,
 .dashboard-tabs,.saved-price-search,.pagination,.order-delivery-list,.topup-review-modes,.report-filter-actions,
 .slider-upload,.section-heading,.category-strip,.sell-editor-page>.actions
){gap:var(--page-space)}
#app #main:not(.member-page) .auth-wrap .brand{justify-self:center}
#app #main:not(.member-page) :is(.seller-profile,section.panel,form) > :is(button,a.button):not(.full){justify-self:start}
#app #main:not(.member-page) .sell-percent-form{width:100%}
#app #main:not(.member-page) .section-heading>h2{margin-block:0}

#shop-regional-games .region-game-strip{
 position:relative;display:flex;align-items:start;justify-content:space-between;gap:var(--page-space);overflow-x:auto;overscroll-behavior-x:contain;
 min-width:0;max-width:100%;scrollbar-width:thin;scrollbar-color:rgba(90,90,90,.28) transparent;user-select:none;
}
#shop-regional-games .region-game-strip::-webkit-scrollbar{height:3px;background:transparent}
#shop-regional-games .region-game-strip::-webkit-scrollbar-track{background:transparent}
#shop-regional-games .region-game-strip::-webkit-scrollbar-thumb{background:rgba(90,90,90,.28);border-radius:var(--corner-radius)}
#shop-regional-games .region-game-strip>button{
 flex:0 0 var(--logo-size,64px);width:var(--logo-size,64px);min-width:0;aspect-ratio:1;position:relative;display:block;
 padding:0;border:0;background:transparent;color:inherit;
}
#shop-regional-games .region-game-strip .game-art{display:grid;width:100%;height:100%;border:0;margin:0;filter:grayscale(1);opacity:.6}
#shop-regional-games .region-game-strip .game-art img{object-fit:cover}
#shop-regional-games .region-game-strip>button[aria-pressed=true] .game-art{filter:none;opacity:1}
#shop-regional-games .region-game-strip>button:is(:focus-visible,[aria-pressed=true])::after{
 content:"";position:absolute;inset:0;border-radius:var(--corner-radius);outline:var(--member-selection-ring);outline-offset:-3px;pointer-events:none;
}
#shop-regional-games .region-game-title{
 text-align:center;
 overflow-wrap:anywhere;
 border-block:var(--member-divider);
 padding-block:calc(var(--page-space) / 2);
}
#shop-regional-games .region-game-strip[hidden]{display:none}
#shop-regional-games .all-games-button{width:100%;justify-content:center}
#shop-regional-games .region-game-grid:empty{display:none}

#shop-regional-games .region-game-strip.dragging{cursor:grabbing}


/* Background updates keep their content. An explicit browser reload also skips the boot indicator. */
html[data-role="member"]:not([data-member-start="open"]) #boot-loading,
html[data-role="member"][data-member-start="reload"] #main .spinner{visibility:hidden}