/* SHELFLINGS commerce theme. Loaded after the original page styles.
   Scope the visual override to the selected theme; keep artwork, rarity
   accents, markup, server states and payment behavior unchanged. */

html[data-ui-theme="binance"] body:is(.social-account-page,.billing-page,.limited-shop-page),
html[data-ui-theme="binance"] body:has(> .game-shop) {
  background:var(--sf-bg);
  color:var(--sf-text);
  color-scheme:dark;
}

/* Invitation center */
html[data-ui-theme="binance"] .social-account {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .social-account :is(.social-hero h1,.social-card h2,.social-metrics strong) {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .social-account :is(.social-kicker,.social-identity-card strong,.social-code-row code) {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .social-account :is(.social-hero p:not(.social-kicker),#socialIdentityHint,.social-bind-card>p:not(.social-kicker),.social-square>p:not(.social-kicker)) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .social-account :is(.social-muted,.social-metrics span,.social-footer) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .social-account .social-label {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .social-account .social-card {
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
  box-shadow:0 8px 24px rgb(0 0 0 / .12);
}
html[data-ui-theme="binance"] .social-account .social-status {
  border:1px solid var(--sf-border);
  border-left:3px solid var(--sf-accent);
  border-radius:8px;
  background:var(--sf-surface-2);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .social-account .social-status[data-error="true"] {
  border-color:rgb(246 70 93 / .4);
  border-left-color:var(--sf-danger);
  background:rgb(246 70 93 / .1);
  color:#FFADB8;
}
html[data-ui-theme="binance"] .social-account .social-record-error {
  color:#FFADB8;
}
html[data-ui-theme="binance"] .social-account :is(.social-pending,.social-review) {
  border-color:rgb(240 185 11 / .4);
  border-radius:8px;
  background:var(--sf-accent-soft);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .social-account :is(.social-metrics,.social-records li) {
  border-color:var(--sf-border);
}
html[data-ui-theme="binance"] .social-account .social-metrics {
  border-top-style:solid;
}
html[data-ui-theme="binance"] .social-account :is(button,.social-home,.social-square a) {
  min-height:44px;
  border:1px solid var(--sf-border);
  border-radius:9px!important;
  background:var(--sf-surface-3);
  color:var(--sf-text);
  box-shadow:none;
  transform:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
/* Legacy secondary actions used !important, so override those explicitly. */
html[data-ui-theme="binance"] .social-account :is(.social-actions button:nth-child(2),.social-actions button:nth-child(3),.social-text-button) {
  background:var(--sf-surface-3)!important;
  color:var(--sf-text)!important;
}
html[data-ui-theme="binance"] .social-account :is(button,.social-home,.social-square a):hover:not(:disabled) {
  background:var(--sf-border);
  border-color:var(--sf-subtle);
  box-shadow:none;
  transform:none;
}
html[data-ui-theme="binance"] .social-account :is(.social-actions button:nth-child(2),.social-actions button:nth-child(3),.social-text-button):hover:not(:disabled) {
  background:var(--sf-border)!important;
}
html[data-ui-theme="binance"] .social-account :is(#binanceLogin,#confirmBind,#bindForm button,.social-square a) {
  border-color:var(--sf-primary);
  background:var(--sf-primary);
  color:var(--sf-on-accent);
}
html[data-ui-theme="binance"] .social-account :is(#binanceLogin,#confirmBind,#bindForm button,.social-square a):hover:not(:disabled) {
  border-color:var(--sf-primary-hover);
  background:var(--sf-primary-hover);
  color:var(--sf-on-accent);
}
html[data-ui-theme="binance"] .social-account input {
  min-height:44px;
  border:1px solid var(--sf-border);
  border-radius:8px;
  background:var(--sf-bg);
  color:var(--sf-text);
  caret-color:var(--sf-primary);
}
html[data-ui-theme="binance"] .social-account input[readonly] {
  background:var(--sf-surface-2);
  color:var(--sf-muted);
}

/* Billing: account totals and activity are deliberately neutral except for
   existing positive / negative semantic states. */
html[data-ui-theme="binance"] body.billing-page main {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page main :is(h1,h2,.record-main strong,.wallet-available strong) {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page main .eyebrow {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .billing-page main :is(.subtitle,.caption,.explanation,.status,.record-main small,.amount small,.wallet-available span,.wallet-available small,footer) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .billing-page :is(.finance-summary,.history,.summary>div) {
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page :is(.finance-grid>div,.details-body,.record-icon) {
  border-color:var(--sf-border);
  background:var(--sf-surface-2);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page .finance-grid :is(span,small) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .billing-page .finance-grid strong {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page .summary .balance {
  border-color:rgb(240 185 11 / .4);
  background:var(--sf-accent-soft);
}
html[data-ui-theme="binance"] .billing-page .summary .balance strong {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .billing-page :is(.wallet,.filters,.records details) {
  border-color:var(--sf-border);
}
html[data-ui-theme="binance"] .billing-page .records summary {
  border-radius:8px;
}
html[data-ui-theme="binance"] .billing-page .records summary:hover {
  background:var(--sf-surface-2);
}
html[data-ui-theme="binance"] .billing-page .record-main .record-character {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .billing-page .details-body {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .billing-page .details-body a {
  color:var(--sf-primary);
  text-decoration:underline;
  text-underline-offset:3px;
}
html[data-ui-theme="binance"] .billing-page .finance-grid>div[data-kind="profit"] {
  background:var(--sf-surface-2);
  border-color:var(--sf-border);
}
html[data-ui-theme="binance"] .billing-page .finance-grid>div[data-state="profit"] {
  border-color:rgb(46 189 133 / .4);
  background:rgb(46 189 133 / .08);
}
html[data-ui-theme="binance"] .billing-page :is(.positive,.finance-grid>div[data-state="profit"] strong) {
  color:var(--sf-success);
}
html[data-ui-theme="binance"] .billing-page .finance-grid>div[data-state="loss"] {
  border-color:rgb(246 70 93 / .4);
  background:rgb(246 70 93 / .08);
}
html[data-ui-theme="binance"] .billing-page :is(.finance-grid>div[data-state="loss"] strong,.details-body .consumed-role) {
  color:var(--sf-danger);
}
html[data-ui-theme="binance"] .billing-page .finance-grid>div[data-state="pending"] strong {
  color:var(--sf-subtle);
}
html[data-ui-theme="binance"] .billing-page main :is(button,.back) {
  min-height:44px;
  border:1px solid var(--sf-border);
  background:var(--sf-surface-3);
  color:var(--sf-text);
  box-shadow:none;
}
html[data-ui-theme="binance"] .billing-page main :is(button,.back):hover:not(:disabled) {
  background:var(--sf-border);
  border-color:var(--sf-subtle);
}
html[data-ui-theme="binance"] .billing-page main :is(.filters button[aria-pressed="true"],.login) {
  border-color:var(--sf-primary)!important;
  background:var(--sf-primary)!important;
  color:var(--sf-on-accent)!important;
  box-shadow:none!important;
}
html[data-ui-theme="binance"] .billing-page main :is(.filters button[aria-pressed="true"],.login):hover:not(:disabled) {
  border-color:var(--sf-primary-hover)!important;
  background:var(--sf-primary-hover)!important;
  color:var(--sf-on-accent)!important;
}
html[data-ui-theme="binance"] .billing-page .test-tag {
  background:var(--sf-accent-soft);
  color:var(--sf-primary);
}

/* Supplies and token deposit use the same compact content shell. */
html[data-ui-theme="binance"] .game-shop {
  box-sizing:border-box;
  color:var(--sf-text);
  line-height:1.65;
}
html[data-ui-theme="binance"] .game-shop :is(h1,h2,h3) {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .game-shop>p,
html[data-ui-theme="binance"] .game-shop :is(.shop-product-card p,section>p,label) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .game-shop .eyebrow {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .game-shop a {
  color:var(--sf-primary);
  text-underline-offset:4px;
}
html[data-ui-theme="binance"] .game-shop a:hover {
  color:var(--sf-primary-hover);
  text-decoration:underline;
}
html[data-ui-theme="binance"] .game-shop nav {
  gap:10px;
}
html[data-ui-theme="binance"] .game-shop nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:7px 14px;
  border:1px solid var(--sf-border);
  border-radius:8px;
  background:var(--sf-surface);
  color:var(--sf-text);
  text-decoration:none;
}
html[data-ui-theme="binance"] .game-shop nav a:hover {
  background:var(--sf-surface-3);
  border-color:var(--sf-subtle);
}
html[data-ui-theme="binance"] .game-shop .shop-product-card {
  min-width:0;
  border-color:var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
}
html[data-ui-theme="binance"] .game-shop .shop-product-card button {
  margin-top:auto;
}
html[data-ui-theme="binance"] .game-shop :is(button,select,input) {
  box-sizing:border-box;
  min-height:44px;
  border:1px solid var(--sf-border);
  border-radius:9px!important;
  background:var(--sf-surface-2);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .game-shop :is(input,select) {
  max-width:100%;
  background:var(--sf-bg);
  caret-color:var(--sf-primary);
}
html[data-ui-theme="binance"] .game-shop button {
  border-color:var(--sf-primary);
  background:var(--sf-primary);
  color:var(--sf-on-accent);
  font-weight:700;
}
html[data-ui-theme="binance"] .game-shop button:hover:not(:disabled) {
  border-color:var(--sf-primary-hover);
  background:var(--sf-primary-hover);
}
html[data-ui-theme="binance"] .game-shop #gameShopCancel {
  border-color:var(--sf-border);
  background:var(--sf-surface-3);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .game-shop #gameShopCancel:hover {
  background:var(--sf-border);
}
html[data-ui-theme="binance"] .game-shop #shopBalance {
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
  color:var(--sf-text);
  padding:16px 20px;
}
html[data-ui-theme="binance"] .game-shop :is(#gameShopStatus,#depositAccess,#depositStatus):not(:empty) {
  padding:12px 16px;
  border-left:3px solid var(--sf-accent);
  border-radius:6px;
  background:var(--sf-accent-soft);
  color:var(--sf-muted);
  overflow-wrap:anywhere;
}
html[data-ui-theme="binance"] .game-shop :is(#depositInstructions,#depositForm) {
  margin-top:28px;
  padding:24px;
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
}
html[data-ui-theme="binance"] .game-shop #depositInstructions h2 {
  margin-top:0;
}
html[data-ui-theme="binance"] .game-shop #depositInstructions code {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .game-shop #depositReceipt {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--sf-success);
}
html[data-ui-theme="binance"] .game-shop #depositReceipt[hidden] {
  display:none;
}

/* Limited shop: neutral interface around the original pixel gallery. */
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-feature,.shop-details,.shop-draws,.shop-header,.shop-receipt) {
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
  color:var(--sf-text);
  box-shadow:none;
}
html[data-ui-theme="binance"] .limited-shop-page .shop-art {
  border-color:var(--sf-border);
  background:var(--sf-bg);
  box-shadow:inset 0 0 0 5px var(--sf-surface),inset 0 0 0 6px var(--sf-border);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-model-stage {
  border-color:var(--sf-border);
  background:var(--sf-bg);
  box-shadow:0 0 0 3px var(--sf-bg),inset 0 0 0 4px var(--sf-surface-2);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-model-stage::before {
  border-color:rgb(240 185 11 / .28);
}
html[data-ui-theme="binance"] .limited-shop-page :is(#shopTitle,.shop-product h2,.shop-details h2,.shop-draws h2,.shop-receipt h2,.shop-stock-heading strong,.shop-countdown b,.shop-facts dd,.shop-draws summary strong,.shop-draws summary code,.shop-reveal-stage>strong) {
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-intro-copy,.shop-product-copy,.shop-stock-heading,.shop-stock-heading strong small,.shop-stock-note,.shop-timer-heading,.shop-timer-heading small,.shop-countdown small,.shop-price,.shop-purchase-note,.shop-details-heading>span,.shop-facts dt,.shop-preview-note,.shop-footer,.shop-chain-label,.shop-probabilities,.shop-result-bonus,.shop-draws-status,.shop-draws summary time,.shop-preview-actions p,.shop-header-label) {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-eyebrow,.shop-series,.shop-art-code,.shop-mini-gem,.shop-preview-note>span:first-child,.shop-issue strong) {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-issue>span,.shop-issue strong>span,.shop-countdown i),
html[data-ui-theme="binance"] .limited-shop-page .shop-draws summary::after {
  color:var(--sf-subtle);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-status {
  background:var(--sf-accent-soft);
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-timer {
  border-color:var(--sf-border);
  background:var(--sf-surface-2);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-stock-track {
  background:var(--sf-surface-3);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-stock-track span {
  background:var(--sf-accent);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-fixed-price {
  color:var(--sf-primary)!important;
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-facts>div+div,.shop-preview-note,.shop-probabilities,.shop-draws li+li) {
  border-color:var(--sf-border);
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-draw-full,.shop-language select) {
  border-color:var(--sf-border);
  background:var(--sf-surface-2);
  color:var(--sf-text);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-payment-status {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-receipt-links a,.shop-draws details>a,.shop-footer a,.shop-order-actions a) {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-receipt {
  border-color:rgb(46 189 133 / .4);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-receipt-heading .shop-eyebrow {
  color:var(--sf-success);
}
/* Gold traits keep their original meaning, made legible on a dark card. */
html[data-ui-theme="binance"] .limited-shop-page .shop-result-traits {
  color:#E8BF70;
}
html[data-ui-theme="binance"] .limited-shop-page .shop-draws li {
  padding:10px 0;
  overflow-wrap:anywhere;
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-buy,.shop-new-purchase,.shop-receipt-heading button,.shop-draws>button,.shop-order-actions button,#shopRandomPreview,.shop-confirm button) {
  min-height:44px;
  border:1px solid var(--sf-border);
  border-radius:9px!important;
  background:var(--sf-surface-3);
  color:var(--sf-text);
  box-shadow:none;
  transform:none;
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-new-purchase,.shop-receipt-heading button,.shop-draws>button,.shop-order-actions button,#shopRandomPreview,.shop-confirm button):hover:not(:disabled) {
  border-color:var(--sf-subtle);
  background:var(--sf-border);
  color:var(--sf-text);
  box-shadow:none;
  transform:none;
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-buy:not(:disabled),.shop-new-purchase:not(:disabled),#shopConfirmPay:not(:disabled)) {
  border-color:var(--sf-primary);
  background:var(--sf-primary);
  color:var(--sf-on-accent);
  box-shadow:none;
  font-weight:700;
}
html[data-ui-theme="binance"] .limited-shop-page :is(.shop-buy,.shop-new-purchase,#shopConfirmPay):hover:not(:disabled) {
  border-color:var(--sf-primary-hover);
  background:var(--sf-primary-hover);
  color:var(--sf-on-accent);
  box-shadow:none;
}
html[data-ui-theme="binance"] .limited-shop-page #shopRandomPreview:is([aria-busy="true"],.is-preview-changing) {
  border-color:var(--sf-accent);
  background:var(--sf-accent-soft);
  color:var(--sf-primary);
  box-shadow:none;
  transform:none;
  opacity:1;
}
html[data-ui-theme="binance"] .limited-shop-page #shopPreviewStatus {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-model-error {
  border-color:rgb(246 70 93 / .5);
  background:var(--sf-surface);
  color:#FFADB8;
}
html[data-ui-theme="binance"] .limited-shop-page .shop-skip {
  border-radius:8px;
  background:var(--sf-primary);
  color:var(--sf-on-accent);
}

/* Confirmations stay native dialogs; only their surface and control colors
   change. Address text can wrap without widening a mobile dialog. */
html[data-ui-theme="binance"] :is(.game-shop dialog,.limited-shop-page .shop-confirm) {
  box-sizing:border-box;
  width:min(480px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  background:var(--sf-surface);
  color:var(--sf-text);
  box-shadow:0 24px 80px rgb(0 0 0 / .5);
}
html[data-ui-theme="binance"] :is(.game-shop dialog,.limited-shop-page .shop-confirm)::backdrop {
  background:rgb(0 0 0 / .7);
  backdrop-filter:blur(4px);
}
html[data-ui-theme="binance"] :is(.game-shop dialog,.limited-shop-page .shop-confirm) p {
  color:var(--sf-muted);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-confirm .shop-confirm-price {
  color:var(--sf-primary);
}
html[data-ui-theme="binance"] .limited-shop-page .shop-confirm code,
html[data-ui-theme="binance"] .game-shop #gameShopConfirmWallet {
  padding:12px;
  border:1px solid var(--sf-border);
  border-radius:8px;
  background:var(--sf-bg);
  color:var(--sf-muted);
  overflow-wrap:anywhere;
}

/* Shared input and interaction states, scoped to commerce content. */
html[data-ui-theme="binance"] :is(.social-account,.game-shop) input::placeholder {
  color:var(--sf-subtle);
  opacity:1;
}
html[data-ui-theme="binance"] :is(.social-account,.game-shop) :is(input,select):focus {
  border-color:var(--sf-accent);
}
html[data-ui-theme="binance"] :is(.social-account,.game-shop) input:is([aria-invalid="true"],:user-invalid) {
  border-color:var(--sf-danger);
}
html[data-ui-theme="binance"] :is(.social-account,.game-shop,.billing-page main,.limited-shop-page .shop-main) :is(button,a,input,select,summary):focus-visible {
  outline:2px solid var(--sf-primary)!important;
  outline-offset:3px!important;
}
html[data-ui-theme="binance"] :is(.social-account,.game-shop,.billing-page main,.limited-shop-page .shop-main) :is(button:disabled,input:disabled,select:disabled,[aria-disabled="true"]) {
  border-color:var(--sf-border)!important;
  background:var(--sf-surface-2)!important;
  color:var(--sf-subtle)!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  cursor:not-allowed;
}

@media(max-width:760px) {
  html[data-ui-theme="binance"] .social-account .social-card {
    box-shadow:none;
  }
  html[data-ui-theme="binance"] .game-shop {
    margin-top:calc(var(--nav-offset,140px) + 20px);
    padding-inline:16px;
  }
  html[data-ui-theme="binance"] body:has(> .game-shop #depositForm) .game-shop {
    margin-top:40px;
  }
  html[data-ui-theme="binance"] .game-shop .shop-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  }
  html[data-ui-theme="binance"] .game-shop :is(#depositForm,#depositInstructions) {
    padding:18px;
  }
  html[data-ui-theme="binance"] :is(.social-account,.game-shop) :is(input,select) {
    font-size:16px;
  }
  html[data-ui-theme="binance"] .limited-shop-page .shop-facts>div:nth-child(even) {
    border-color:var(--sf-border);
  }
}
@media(max-width:440px) {
  html[data-ui-theme="binance"] .social-account .social-actions {
    align-items:stretch;
  }
  html[data-ui-theme="binance"] .social-account .social-actions button {
    flex:1 1 100%;
  }
  html[data-ui-theme="binance"] .billing-page .history-heading {
    align-items:flex-start;
    flex-wrap:wrap;
  }
  html[data-ui-theme="binance"] .game-shop :is(#gameShopPay,#gameShopCancel) {
    width:100%;
    margin-top:8px;
  }
  html[data-ui-theme="binance"] .limited-shop-page .shop-confirm-actions {
    flex-wrap:wrap;
  }
  html[data-ui-theme="binance"] .limited-shop-page .shop-confirm-actions button {
    flex:1 1 140px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html[data-ui-theme="binance"] :is(.social-account,.game-shop,.billing-page main,.limited-shop-page .shop-main) :is(button,a,input,select) {
    transition:none;
  }
}