/* Reversible control system; no background or transaction logic overrides. */
.ub-controls {
  --control-bg: #ffffff04;
  --control-line: #ffffff30;
  --control-hover: #ffffff65;
  --control-text: #e2e6ec;
  --control-sweep: #ffffff09;
}
.ub-controls.ub-pro button:not(.boxSelect),
.ub-controls.ub-pro :is(.navDiscord, .ubchip, .inventoryJump) {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 14px; border-radius: 6px !important;
  border: 1px solid var(--control-line); color: var(--control-text);
  background: linear-gradient(100deg, transparent 40%, var(--control-sweep) 50%, transparent 60%) 140% 0 / 300% 100%, var(--control-bg);
  font-family: var(--font-body); font-size: 12px; font-weight: 550; line-height: 1.3;
  text-transform: none; text-decoration: none; text-shadow: none; letter-spacing: 0;
  box-shadow: inset 0 1px 0 #ffffff04; transform: none; clip-path: none;
  transition: background-position 550ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ub-controls.ub-pro button:not(.boxSelect):hover:not(:disabled),
.ub-controls.ub-pro :is(.navDiscord, .ubchip, .inventoryJump):hover {
  background-position: -40% 0; border-color: var(--control-hover); color: #fff;
  transform: none; filter: none;
}
.ub-controls.ub-pro button:not(.boxSelect):active:not(:disabled) {
  box-shadow: inset 0 2px 5px #00000055; border-color: var(--control-hover); transform: none;
}
.ub-controls.ub-pro button:disabled {
  opacity: .42; cursor: not-allowed; box-shadow: none;
}
.ub-controls :is(button, a, input, select, summary):focus-visible {
  outline: 2px solid #a0dceb; outline-offset: 3px;
}
.ub-controls.ub-pro :is(.primary, .boxBuy, #ubAcct, #ubLogout)::before { display: none; }
.ub-controls.ub-pro :is(.primary, #ubBuy) {
  --control-bg: #d4b96d0b; --control-line: #cdb2758c;
  --control-hover: #edd79d; --control-text: #f2dca5; --control-sweep: #ffe6a214;
}
.ub-controls.ub-pro .wrap #ubBuy { font-weight: 600; padding-inline: 12px; color: var(--control-text); border-color: var(--control-line); }
.ub-controls.ub-pro .wrap #ubLogout,
.ub-controls.ub-pro button.iconButton {
  width: 40px; height: 40px; min-height: 40px; flex: 0 0 40px; padding: 0;
}
.ub-controls .ico { width: 17px; height: 17px; flex: 0 0 17px; }
.ub-controls .ico-plus { mask-image: url('ui-controls/plus.svg'); }
.ub-controls .ico-down { mask-image: url('ui-controls/arrow-down.svg'); }
.ub-controls .ico-open { mask-image: url('ui-controls/package-open.svg'); }
.ub-controls .ico-close { mask-image: url('ui-controls/x.svg'); }
.ub-controls .ico-case { mask-image: url('ui-controls/package.svg'); }
.ub-controls .ico-key { mask-image: url('ui-controls/key-round.svg'); }
.ub-controls .ico-bag { mask-image: url('ui-controls/backpack.svg'); }
.ub-controls .ico-claim { mask-image: url('ui-controls/package-check.svg'); }
.ub-controls .ico-sound { mask-image: url('ui-controls/volume-2.svg'); }
.ub-controls .ico-mute { mask-image: url('ui-controls/volume-x.svg'); }
.ub-controls .ico-redo { mask-image: url('ui-controls/rotate-cw.svg'); }
.ub-controls.ub-pro .navDiscord {
  --control-text: #c3c7fa; --control-line: #757baf70; --control-hover: #a4aae3;
}
.ub-controls.ub-pro .inventoryJump { border-color: #ffffff24; background-color: #0e121a8a; padding-inline: 13px; font-size: 12px; }
.ub-controls .inventoryJump .ico-down { color: #919ba9; width: 14px; height: 14px; flex-basis: 14px; }
.ub-controls.ub-pro .boxCard { border-radius: 8px !important; padding: 14px 12px 12px; }
.ub-controls .boxCard.active { box-shadow: inset 0 2px 0 var(--ba), 0 5px 18px #00000030; }
.ub-controls .boxCard .boxSelect { border-radius: 4px !important; }
.ub-controls .boxTag::after { font-size: 14px; }
.ub-controls .boxCard-own { padding-top: 10px; margin-top: 10px; font-size: 11px; }
.ub-controls .boxCard-buys { gap: 8px; }
.ub-controls.ub-pro button.boxBuy {
  flex: 1 1 0; min-width: 0; min-height: 64px; padding: 9px 8px;
  flex-direction: column; align-items: flex-start; gap: 5px;
  --control-bg: #ffffff03; --control-line: #ffffff24;
  --control-hover: #d7bf81; --control-sweep: #ffe7a911;
}
.ub-controls .boxBuy .buyLabel { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 450; color: #adb5c2; }
.ub-controls .boxCard .boxBuy .ico { width: 13px; height: 13px; flex-basis: 13px; color: #adb5c2; }
.ub-controls .boxBuy .buyPrice { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ub-controls .boxCard .priceCurrency { display: inline; font-size: 9px; font-weight: 450; color: #aab2bf; }
.ub-controls .boxCard .keyBuy .buyPrice { color: #c7dbe6; }
.ub-controls .boxCard .boxBuy:hover .buyLabel { color: #e3dcc6; }
.ub-controls .btnRow { gap: 18px; align-items: flex-start; margin-top: 18px; }
.ub-controls .openingAction { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 1 216px; min-width: 164px; }
.ub-controls.ub-pro .wrap #btnOpen {
  width: 100%; height: 48px; min-height: 48px; padding: 0 16px;
  font-size: 13px; font-weight: 650; justify-content: flex-start;
  color: var(--control-text); border-color: var(--control-line); background-color: var(--control-bg);
  box-shadow: inset 0 1px 0 #ffe4a013, 0 3px 10px #00000026;
}
.ub-controls #btnOpen .ico-right { margin-left: auto; color: #b9a77c; }
.ub-controls .openingCost { font-size: 10px; line-height: 1.4; color: #aab2bf; }
.ub-controls .openingSettings { display: flex; align-items: center; gap: 16px; margin-left: auto; padding-top: 4px; }
.ub-controls.ub-pro button.settingSwitch {
  position: relative; min-height: 40px; padding: 0; border: 0; margin: 0;
  background: none; box-shadow: none; color: #c2c8d1; gap: 9px; font-size: 11px; overflow: visible;
}
.ub-controls.ub-pro button.settingSwitch:hover:not(:disabled),
.ub-controls.ub-pro button.settingSwitch:active:not(:disabled) { box-shadow: none; }
.ub-controls.ub-pro button.settingSwitch::before {
  display: block; width: 30px; height: 18px; border-radius: 12px; flex: 0 0 30px;
  border-color: #697482; background: #343d49;
}
.ub-controls.ub-pro button.settingSwitch::after { left: 4px; top: 50%; width: 12px; height: 12px; margin: 0; transform: translateY(-50%); background: #e5e9ef; }
.ub-controls.ub-pro button.settingSwitch[aria-checked='true']::before { border-color: #8bd3b0; background: #37604d; }
.ub-controls.ub-pro button.settingSwitch[aria-checked='true']::after { transform: translate(12px, -50%); }
.ub-controls.ub-pro .wrap #btnSound[aria-pressed='true'] { color: #a7d8bd; border-color: #81b69a60; background-color: #8bcba307; }
.ub-controls .seedDetails { margin-top: 12px; }
.ub-controls .seedDetails summary { min-height: 32px; display: list-item; align-content: center; }
.ub-controls .chance { padding-block: 3px; }
.ub-controls.ub-pro button.rarityClick {
  min-height: 38px; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none;
  text-align: left; text-decoration: none; color: #d8dee7 !important; font-weight: 500;
}
.ub-controls.ub-pro button.rarityClick::after {
  content: ''; width: 12px; height: 12px; background: #8e9aab;
  mask: url('ui-controls/chevron-right.svg') center / contain no-repeat;
}
.ub-controls.ub-pro button.rarityClick:hover:not(:disabled) { color: #fff !important; text-decoration: none; }
.ub-controls.ub-pro button.rarityClick:active:not(:disabled) { box-shadow: none; }
.ub-controls .inventoryTools { gap: 10px; padding-block: 2px; margin-bottom: 12px; }
.ub-controls .inventoryTools :is(input, select) { height: 42px; border-radius: 6px; background-color: #121922dd; font-size: 12px; }
.ub-controls .inventorySearch:focus-within .ico { color: #a0dceb; }
.ub-controls.ub-pro .inventoryTabs { padding: 3px; gap: 3px; border: 1px solid #ffffff20; border-radius: 7px; background: #10151b; }
.ub-controls.ub-pro .inventoryTabs button {
  min-height: 34px; padding: 7px 14px; border: 1px solid transparent; color: #a9b2bf;
  box-shadow: none; font-size: 11px; background-color: transparent;
}
.ub-controls.ub-pro .inventoryTabs button[aria-pressed='true'] {
  background: #ffffff09; border-color: #dcc08370; color: #eed8a5; box-shadow: none;
}
.ub-controls.ub-pro .wrap .historyItem .claimBtn { min-width: 86px; min-height: 38px; padding: 8px 12px; font-size: 11px; color: #dce1e9; border-color: #ffffff2b; }
.ub-controls.ub-pro .wrap .historyItem .claimBtn:hover:not(:disabled) { border-color: #d8c080; color: #f0daad; }
.ub-controls.ub-pro .wrap #btnClaimAll { font-size: 11px; min-height: 38px; }
.ub-controls #btnClaimAll::before { content: ''; width: 16px; height: 16px; background: currentColor; mask: url('ui-controls/package-check.svg') center / contain no-repeat; }
.ub-controls .inventoryPager { padding-top: 18px; }
.ub-controls .inventoryPager > div { gap: 12px; }
.ub-controls .inventoryPager #inventoryPage { min-width: 42px; font-size: 12px; color: #c9d0da; }
.ub-controls.ub-pro .infoBox { position: relative; border: 1px solid #ffffff30; border-radius: 8px !important; background: #161b22; padding: 24px; text-align: left; }
.ub-controls .infoBox h3 { font: 600 18px/1.4 var(--font-body); letter-spacing: 0; margin: 0 52px 16px 0; text-transform: none; }
.ub-controls.ub-pro #infoClose { position: absolute; top: 12px; right: 12px; margin: 0; }
.ub-controls .claimBtns { justify-content: flex-start; flex-wrap: wrap; }
.ub-controls .claimBtns button { margin-top: 8px; }
.ub-controls .claimInput { background: #0e141c; border: 1px solid #ffffff40; border-radius: 6px; min-height: 44px; }
.ub-controls.ub-pro .revealBtns button { min-height: 46px; }
.ub-controls .toast { max-width: calc(100% - 32px); text-align: center; overflow-wrap: anywhere; border-radius: 6px !important; border-color: #687487; font-size: 12px; font-weight: 500; background: #1a222f; }
/* The payment provider retains its own checkout buttons. */
.ub-controls #swgcStore > div { border-radius: 8px !important; background: #161b22 !important; }
.ub-controls #swgcStore button.swgcPack { display: block; border-radius: 6px !important; background: #11171f !important; overflow: visible; }
.ub-controls #swgcStore button.swgcPack:hover { background: #1a222d !important; }
.ub-controls #swgcStoreX { width: 40px; height: 40px; padding: 0 !important; min-height: 40px; }
@media (min-width: 541px) and (max-width: 1150px) {
  .ub-controls .boxStore { grid-auto-columns: 196px; }
}
@media (min-width: 541px) and (max-width: 900px) {
  .ub-controls .chance { min-width: 0; }
  .ub-controls .chance .tag { gap: 6px; }
  .ub-controls.ub-pro button.rarityClick { font-size: 11px; gap: 4px; }
  .ub-controls .chance .pct { margin-top: 0; }
}
@media (max-width: 540px) {
  .ub-controls.ub-pro .navDiscord { display: none; }
  .ub-controls.ub-pro .navRight { gap: 7px; }
  .ub-controls.ub-pro .navRight #ubAcct { width: 40px; min-width: 40px; height: 40px; padding: 4px !important; }
  .ub-controls.ub-pro .wrap #ubBuy { min-width: 68px; padding-inline: 8px; font-size: 11px; gap: 5px; }
  .ub-controls .pageHeading { align-items: center; }
  .ub-controls.ub-pro .inventoryJump { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; }
  .ub-controls .inventoryJump span, .ub-controls .inventoryJump .ico-down { display: none; }
  .ub-controls.ub-pro button.iconButton { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  .ub-controls .boxStore { grid-auto-columns: 182px; }
  .ub-controls .boxCard .priceCurrency { font-size: 8px; }
  .ub-controls .btnRow { gap: 16px; }
  .ub-controls .openingAction { flex: 1 0 100%; width: 100%; }
  .ub-controls .openingSettings { width: 100%; margin-left: 0; padding-top: 0; justify-content: space-between; }
  .ub-controls.ub-pro button.settingSwitch { min-height: 44px; }
  .ub-controls .openingCost { font-size: 11px; }
  .ub-controls .chance { padding-block: 2px; }
  .ub-controls.ub-pro button.rarityClick { min-height: 44px; }
  .ub-controls .inventoryTools :is(input, select) { height: 44px; }
  .ub-controls.ub-pro .inventoryTabs button { min-height: 38px; }
  .ub-controls.ub-pro .wrap :is(#btnClaimAll, .historyItem .claimBtn) { min-height: 44px; }
  .ub-controls .infoBox { padding: 18px; }
  .ub-controls .claimBtns button { flex: 1 1 auto; min-height: 44px; }
  .ub-controls .revealBtns { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-controls.ub-pro button, .ub-controls.ub-pro a { transition: none; }
}