/* Unboxing presentation. Prices, prize definitions and payment logic are unchanged. */
.ub-studio {
  --text: #f2f4f7;
  --muted: #a7afb9;
  --panel: #171b20;
  --stroke: #ffffff17;
  --stroke2: #ffffff32;
  --tone: #9cbcd9;
  color-scheme: dark;
}
.ub-studio .wrap { width: min(1360px, calc(100% - 64px)); }
.ub-studio .siteNav { gap: 24px; min-height: 84px; border-bottom-color: #ffffff1c; }
.ub-studio .siteNav .navLinks a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; box-shadow: none; border-radius: 4px;
}
.ub-studio .siteNav .navLinks a::after {
  content: ''; position: absolute; bottom: 5px; left: 0; right: 0;
  height: 2px; background: currentColor; transform: scaleX(0); transition: transform 180ms ease;
}
.ub-studio .siteNav .navLinks a:hover::after { transform: scaleX(1); }
.ub-studio .navRight { gap: 9px; }
.ub-studio .navRight .wallet { gap: 7px; padding-right: 10px; }
.ub-studio #swgcVal { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ub-studio .wallet .cur { font-size: 10px; color: #b4bac3; }
.ub-studio .pageHeading { padding: 32px 0 24px; }
.ub-studio .pageHeading h1 { font-size: 30px; line-height: 1.25; font-weight: 650; }
.ub-studio .pageEyebrow { color: #dbbd79; font-size: 10px; margin-bottom: 8px; }
.ub-studio .card-h { padding-bottom: 18px; }
.ub-studio .card-h h2 { font-size: 16px; font-weight: 600; }
.ub-studio :is(#storeTitle, #inventoryTitle, #statsTitle) { display: flex; align-items: center; gap: 10px; }
.ub-studio :is(#storeTitle, #inventoryTitle, #statsTitle)::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 18px; background: #e4c184;
  mask: url('ui-controls/package.svg') center / contain no-repeat;
}
.ub-studio #inventoryTitle::before { background: #bba6ed; mask-image: url('ui-controls/backpack.svg'); }
.ub-studio #statsTitle::before { background: #80ccb0; mask-image: url('ui-vivid/chart-no-axes-combined.svg'); }
.ub-studio .currencyLabel { font-size: 11px; color: #a6aeb9; }

/* Coloured controls share one light sweep, without opaque hover fills. */
.ub-studio.ub-controls.ub-pro .wrap button:where(:not(.boxSelect, .rarityClick, .settingSwitch)),
.ub-studio.ub-controls.ub-pro :is(.navDiscord, .ubchip, .inventoryJump),
.ub-studio.ub-controls.ub-pro :is(.claimBtns, .revealBtns) button {
  border-radius: 10px !important;
  color: color-mix(in srgb, var(--tone) 30%, #ffffff);
  border-color: color-mix(in srgb, var(--tone) 34%, #24282e);
  background:
    linear-gradient(110deg, transparent 35%, #ffffff12 50%, transparent 65%) 150% 0 / 300% 100%,
    color-mix(in srgb, var(--tone) 12%, #14181e);
  box-shadow: inset 0 1px 0 #ffffff09;
  transition: background-position 500ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.ub-studio.ub-controls.ub-pro .wrap button:where(:not(.boxSelect, .rarityClick, .settingSwitch)):hover:not(:disabled),
.ub-studio.ub-controls.ub-pro :is(.navDiscord, .ubchip, .inventoryJump):hover,
.ub-studio.ub-controls.ub-pro :is(.claimBtns, .revealBtns) button:hover:not(:disabled) {
  background-position: -50% 0, 0 0;
  border-color: color-mix(in srgb, var(--tone) 70%, #ffffff);
  box-shadow: inset 0 1px 0 #ffffff16, 0 3px 10px #00000020;
}
.ub-studio.ub-controls.ub-pro .wrap button:active:not(:disabled) { box-shadow: inset 0 2px 5px #00000045; }
.ub-studio.ub-controls.ub-pro .wrap button:disabled { opacity: .38; box-shadow: none; }
.ub-studio.ub-controls.ub-pro .wrap button.iconButton,
.ub-studio.ub-controls.ub-pro .wrap #ubLogout { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; border-radius: 50% !important; }
.ub-studio.ub-controls.ub-pro .wrap #ubBuy { --tone: #e9b950; min-height: 44px; }
.ub-studio .navDiscord { --tone: #b6a4e2; }
.ub-studio #ubAcct { --tone: #a7b7c9; min-height: 44px; }
.ub-studio .inventoryJump { --tone: #b6a4e2; min-height: 44px; }
.ub-studio .inventoryJump .ico { color: #cdbdec; }
.ub-studio :is(button, a, input, select, summary):focus-visible {
  outline: 2px solid #a8e6ef !important; outline-offset: 3px; scroll-margin: 20px;
}

/* Real crate artwork is the primary visual, framed by restrained case accents. */
.ub-studio .boxStore { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 3px 2px 12px; }
.ub-studio.ub-controls.ub-pro .boxCard {
  position: relative; padding: 14px; border-radius: 8px !important; overflow: hidden;
  border: 1px solid #ffffff25; background: #15191fee; box-shadow: 0 5px 16px #00000024;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.ub-studio .boxCard::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px;
  background: var(--ba); opacity: .35; pointer-events: none; transition: opacity 180ms ease;
}
.ub-studio.ub-controls.ub-pro .boxCard:hover { border-color: color-mix(in srgb, var(--ba) 50%, #464b52); background: #191e25f5; }
.ub-studio.ub-controls.ub-pro .boxCard.active {
  border-color: color-mix(in srgb, var(--ba) 75%, #8d939a);
  background: color-mix(in srgb, var(--ba) 6%, #171b21);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba) 12%, transparent), 0 6px 18px #00000030;
}
.ub-studio .boxCard.active::after { opacity: 1; }
.ub-studio .boxCard .boxSelect { padding: 0; overflow: visible; }
.ub-studio .boxCard .boxCard-art {
  height: 148px; margin: 0 0 12px; background-size: contain; background-position: center;
  filter: drop-shadow(0 10px 8px #00000050); transform: none;
}
.ub-studio .boxSelect:hover .boxCard-art { transform: translateY(-3px); }
.ub-studio .boxCard .boxCard-name { min-height: 22px; font-size: 15px; font-weight: 600; }
.ub-studio .boxCard .boxCard-badges { min-height: 22px; gap: 6px; margin-top: 6px; }
.ub-studio .srvBadge { border-radius: 4px !important; font-size: 9px; padding: 2px 6px; }
.ub-studio .boxCard-own { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #ffffff13; color: #a8b0bc; font-size: 11px; }
.ub-studio .boxCard-own b { color: #f3f4f7; font-weight: 600; }
.ub-studio .boxTag {
  display: none; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  color: #fff; background: color-mix(in srgb, var(--ba) 24%, #1d232b);
  border: 1px solid color-mix(in srgb, var(--ba) 65%, transparent); box-shadow: none;
}
.ub-studio .boxCard.active .boxTag { display: grid; place-items: center; }
.ub-studio .boxTag::after { font-size: 13px; }
.ub-studio .boxCard-buys { gap: 8px; margin-top: 12px; }
.ub-studio.ub-controls.ub-pro .wrap .boxBuy { --tone: var(--ba); min-height: 62px; padding: 9px 10px; gap: 6px; }
.ub-studio.ub-controls.ub-pro .wrap .keyBuy { --tone: #6dcada; }
.ub-studio .boxBuy .buyLabel { color: color-mix(in srgb, var(--tone) 28%, #d9e0e7); font-size: 11px; }
.ub-studio .boxCard .boxBuy .ico { color: var(--tone); }
.ub-studio .boxBuy .buyPrice { color: #f7f8fa; font-size: 16px; gap: 5px; }
.ub-studio .boxCard .priceCurrency { display: inline; font-size: 9px; color: #aab5c2; }

.ub-studio :is(.openingLayout, .inventorySection, .statsSection) {
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  background: none; position: relative; isolation: isolate;
}
.ub-studio .openingLayout { grid-template-columns: minmax(0, 1fr) 296px; gap: 36px; margin-top: 24px; padding-top: 28px; padding-bottom: 28px; border-color: #ffffff1c; }
.ub-studio .openingSection .card-h { align-items: center; }
.ub-studio .openingSection #stateText { gap: 7px; font-size: 10px; color: #a5d8c0; font-weight: 500; }
.ub-studio .openingSection #stateText::before { width: 6px; height: 6px; background: #83d7b2; }
.ub-studio:has(#boxStore.isLocked) #stateText { color: #f4d69b; }
.ub-studio:has(#boxStore.isLocked) #stateText::before { background: #ecc16c; }
.ub-studio .caseHead {
  display: grid; grid-template-columns: 156px minmax(0, 1fr); grid-template-rows: auto auto;
  gap: 12px 24px; align-items: center; min-height: 150px; margin: 0 0 24px;
}
.ub-studio .caseHead .caseArt { grid-column: 1; grid-row: 1 / 3; width: 156px; height: 136px; }
.ub-studio .caseHead .caseArt-img { filter: drop-shadow(0 8px 10px #00000050); }
.ub-studio .caseHead .caseInfo { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ub-studio .caseHead .caseInfo h2 { order: -1; margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; }
.ub-studio .caseSeries { font-size: 11px; color: color-mix(in srgb, var(--ba) 35%, #c4c9d0); line-height: 1.5; }
.ub-studio .caseInfo .serverBadges { display: none; }
.ub-studio .caseHead .caseResources {
  grid-column: 2; grid-row: 2; align-self: start; display: grid; gap: 8px;
  width: 144px; max-width: 100%; margin: 0; padding: 0; border: 0;
}
.ub-studio .caseResource { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ub-studio .resourceLabel { display: flex; align-items: center; gap: 8px; color: #acb6c4; font-size: 11px; }
.ub-studio .resourceLabel .ico { color: var(--ba); width: 15px; height: 15px; flex-basis: 15px; }
.ub-studio .resourceLabel .ico-key { color: #86d5e3; }
.ub-studio .caseResource b { min-width: 0; font-size: 16px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ub-studio #openingTitle { display: flex; align-items: center; gap: 10px; }
.ub-studio #openingTitle::before { content: ''; width: 18px; height: 18px; background: #dec18e; mask: url('ui-controls/package-open.svg') center / contain no-repeat; }
.ub-studio .rollerWrap { border-radius: 8px !important; border-color: #ffffff24; background: #090c11; padding-block: 16px; }
.ub-studio .csItem { border-radius: 6px !important; border-color: #ffffff1b; }
.ub-studio .csItem-bg { background: color-mix(in srgb, var(--rc) 7%, #1a1e25); }
.ub-studio .csItem-glow { display: none; }
.ub-studio .csItem-icon { top: 26px; bottom: 66px; }
.ub-studio .csItem-name { padding-bottom: 16px; }
.ub-studio .csItem-bar { left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 3px; }
.ub-studio .csItem-srv { left: 8px; top: 7px; }
.ub-studio .btnRow { align-items: center; margin-top: 20px; }
.ub-studio .openingAction { flex-basis: 240px; }
.ub-studio.ub-controls.ub-pro .wrap #btnOpen { --tone: #f0c169; min-height: 50px; height: 50px; font-size: 14px; border-color: #c9a65e99; }
.ub-studio .openingCost { color: #aab3bf; font-size: 11px; }
.ub-studio .openingSettings { padding-top: 0; }
.ub-studio.ub-controls.ub-pro .wrap #btnSound[aria-pressed='true'] { --tone: #73cfaa; }
.ub-studio.ub-controls.ub-pro button.settingSwitch { min-height: 44px; color: #bdc5cf; }
.ub-studio.ub-controls.ub-pro button.settingSwitch[aria-checked='true']::before { background: #2a755c; border-color: #81d8b3; }
.ub-studio .seedDetails { margin-top: 12px; }
.ub-studio .seedDetails summary { min-height: 36px; color: #8f9ba9; }
.ub-studio .oddsSection { padding-left: 28px; border-color: #ffffff18; }
.ub-studio .oddsSection .oddsBar { height: 5px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.ub-studio.ub-vivid .oddsSection .chance .pct { font-size: 16px; }
.ub-studio.ub-vivid.ub-controls.ub-pro .oddsSection button.rarityClick { min-height: 58px; padding: 11px 8px; }

.ub-studio .inventorySection { padding-top: 30px; padding-bottom: 30px; }
.ub-studio .inventorySection { border-top: 1px solid #ffffff1a; }
.ub-studio .inventorySection .card-h { align-items: center; }
.ub-studio .inventorySection #invStat { color: #a9b3c0; font-size: 11px; }
.ub-studio .inventoryTools { gap: 10px; margin-bottom: 16px; }
.ub-studio.ub-controls.ub-pro .inventoryTools :is(input, select) {
  height: 44px; border-radius: 10px; border-color: #ffffff24; background-color: #171d25;
}
.ub-studio .inventoryTools .inventorySearch { flex: 1; max-width: 400px; }
.ub-studio.ub-controls.ub-pro .inventoryTabs { background: #10151c; border: 1px solid #ffffff1c; border-radius: 12px; padding: 3px; }
.ub-studio.ub-controls.ub-pro .wrap .inventoryTabs button { --tone: #b7a2e9; border: 1px solid transparent; background: none; box-shadow: none; color: #a9b4c2; min-height: 36px; }
.ub-studio.ub-controls.ub-pro .wrap .inventoryTabs button[aria-pressed='true'] { background: #b7a2e921; color: #e4d9fb; border-color: #b7a2e94a; }
.ub-studio .history { gap: 0 32px; }
.ub-studio .historyItem { min-height: 92px; padding: 14px 0; border-bottom-color: #ffffff12; }
.ub-studio .historyItem:hover { background: #ffffff03; }
.ub-studio .historyItem .hLeft { grid-template-columns: 60px minmax(0, 1fr); gap: 5px 14px; }
.ub-studio .hThumb { width: 60px; height: 60px; border-radius: 6px !important; background-color: color-mix(in srgb, var(--rc) 9%, #1c232b); border: 1px solid #ffffff1b; border-bottom: 3px solid var(--rc); background-size: 88%; }
.ub-studio .historyItem .hName { font-size: 13px; font-weight: 500; }
.ub-studio .historyItem .hWear { font-size: 10px; color: #adb9c6; }
.ub-studio .historyItem .hRarity { color: color-mix(in srgb, var(--rc) 38%, #f0f3f6); font-size: 10px; grid-column: 1 / -1; }
.ub-studio.ub-controls.ub-pro .wrap :is(#btnClaimAll, .claimBtn) { --tone: #79cdae; border-radius: 10px !important; min-height: 40px; }
.ub-studio .historyItem .delivered {
  display: block; max-width: 138px; min-width: 0; white-space: normal; overflow: visible;
  background: #79cdae0a; color: #a4dfc7; border: 0; border-radius: 4px !important; padding: 5px 7px;
}
.ub-studio .deliveryState { font-size: 11px; font-weight: 550; }
.ub-studio .deliveryTarget { display: block; margin-top: 3px; color: #a6b7ba; font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.ub-studio .historyItem .delivered.pend { color: #e0c68d; background: #e0c68d0f; }
.ub-studio .inventoryPager { min-height: 62px; }
.ub-studio .emptyInv { text-wrap: balance; border-block: 1px solid #ffffff12; }
.ub-studio .statsSection { padding: 30px 0 36px; margin-top: 0; border-color: #ffffff1a; }
.ub-studio .statsSection .statNum { color: #b9d7ee; font-weight: 600; }
.ub-studio .statsSection #stSpent { color: #e9c782; }
.ub-studio .statsSection #stWon { color: #8ed6b7; }
.ub-studio .statsSection .statNum.best { color: #ead5a9; }
.ub-studio .statsBreakdowns { column-gap: 48px; margin-top: 30px; }
.ub-studio .distributionTrack { height: 4px; }
.ub-studio .siteFooter { padding-top: 24px; }
.ub-studio .infoBox { background: #191f27; border-color: #ffffff32; }
.ub-studio .infoBox #infoDesc li { border-radius: 6px !important; }
.ub-studio .claimInput { color: #eef3f8; }
.ub-studio #claimConfirm, .ub-studio #btnKeep { --tone: #79cdae; }
.ub-studio #btnRevealAgain { --tone: #b7a2e9; }

@media (max-width: 1150px) {
  .ub-studio .boxStore { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 222px; }
  .ub-studio .openingLayout { grid-template-columns: minmax(0, 1fr) 252px; gap: 24px; }
  .ub-studio .oddsSection { padding-left: 20px; }
  .ub-studio .siteNav { gap: 12px; }
  .ub-studio .caseHead { grid-template-columns: 132px minmax(0, 1fr); gap: 12px 20px; }
  .ub-studio .caseHead .caseArt { width: 132px; height: 120px; }
  .ub-studio .caseHead .caseInfo h2 { font-size: 22px; }
}
@media (max-width: 900px) {
  .ub-studio .wrap { width: calc(100% - 40px); }
  .ub-studio .openingLayout { grid-template-columns: minmax(0, 1fr); }
  .ub-studio .oddsSection { padding: 24px 0 0; }
  .ub-studio .inventoryTools .inventorySearch { max-width: none; }
  .ub-studio .history { grid-template-columns: minmax(0, 1fr); }
  .ub-studio .navRight { margin-left: auto; }
}
@media (max-width: 620px) {
  .ub-studio .siteNav { padding: 16px 0; }
  .ub-studio .navRight { width: 100%; justify-content: space-between; gap: 6px; }
  .ub-studio .navRight .wallet { padding-right: 4px; }
  .ub-studio .navLinks { margin-left: auto; }
  .ub-studio #ubAcctName { display: none; }
  .ub-studio.ub-controls.ub-pro .navDiscord { display: none; }
  .ub-studio.ub-controls.ub-pro .navRight #ubAcct { min-width: 44px; width: 44px; height: 44px; padding: 4px !important; justify-content: center; }
  .ub-studio .pageHeading { padding: 26px 0 22px; }
  .ub-studio .pageHeading h1 { font-size: 25px; }
  .ub-studio.ub-controls.ub-pro .inventoryJump { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 50% !important; }
  .ub-studio .inventoryJump span, .ub-studio .inventoryJump .ico-down { display: none; }
  .ub-studio .boxStore { grid-auto-columns: 208px; gap: 12px; }
  .ub-studio .boxCard .boxCard-art { height: 128px; margin-bottom: 14px; }
  .ub-studio .openingLayout { margin-top: 16px; padding-top: 24px; }
  .ub-studio .caseHead { grid-template-columns: 116px minmax(0, 1fr); gap: 12px 16px; min-height: 134px; margin-bottom: 22px; }
  .ub-studio .caseHead .caseArt { width: 116px; height: 108px; }
  .ub-studio .caseHead .caseInfo h2 { font-size: 20px; }
  .ub-studio .caseSeries { font-size: 10px; }
  .ub-studio .caseHead .caseResources { width: 132px; }
  .ub-studio .btnRow { gap: 14px; }
  .ub-studio .openingAction { flex: 1 0 100%; }
  .ub-studio .openingSettings { width: 100%; justify-content: space-between; }
  .ub-studio .inventorySection .card-h { flex-wrap: wrap; gap: 12px; }
  .ub-studio .inventorySection .card-h-right { width: 100%; justify-content: space-between; }
  .ub-studio .inventoryTools .inventorySearch { flex-basis: 100%; }
  .ub-studio .inventoryTabs { width: 100%; }
  .ub-studio.ub-controls.ub-pro .wrap .inventoryTabs button { flex: 1; min-height: 40px; }
  .ub-studio.ub-controls.ub-pro .wrap :is(#btnClaimAll, .claimBtn) { min-height: 44px; }
}
@media (max-width: 540px) {
  .ub-studio .wrap { width: calc(100% - 32px); }
  .ub-studio #swgcVal { font-size: 14px; }
  .ub-studio .caseHead { grid-template-columns: 104px minmax(0, 1fr); gap: 12px 14px; }
  .ub-studio .caseHead .caseArt { width: 104px; height: 100px; }
  .ub-studio .historyItem .hLeft { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; }
  .ub-studio .hThumb { width: 52px; height: 56px; }
  .ub-studio .historyItem .hName { font-size: 12px; }
  .ub-studio .historyItem .hRight { gap: 4px 5px; }
  .ub-studio.ub-controls.ub-pro .wrap .historyItem .claimBtn { min-width: 72px; padding-inline: 9px; }
  .ub-studio .statsSection .statNum { font-size: 24px; overflow-wrap: anywhere; }
  .ub-studio .statsSection .statNum.best { font-size: 14px; }
}
@media (max-width: 380px) {
  .ub-studio.ub-controls.ub-pro .wrap #ubBuy { width: 44px; min-width: 44px; padding: 0; gap: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-studio .boxSelect:hover .boxCard-art { transform: none; }
}

/* Contents and inventory share a readable, art-first reward presentation. */
.ub-studio .catalogSection { position: relative; isolation: isolate; padding: 28px 0; margin: 0; background: none; }
.ub-studio .catalogSection .card-h { align-items: center; gap: 16px; }
.ub-studio .sectionHeading { min-width: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ub-studio .sectionHeading > span { font-size: 12px; color: #a9b4c3; }
.ub-studio #catalogTitle { display: flex; align-items: center; gap: 10px; }
.ub-studio #catalogTitle::before { content: ''; width: 18px; height: 18px; background: #8dc9dc; mask: url('ui-controls/package.svg') center / contain no-repeat; }
.ub-studio .catalogFilters { display: flex; gap: 10px; }
.ub-studio :is(.catalogFilters, .inventorySort) select {
  color: #d4dce6; background-color: #1b212a; border: 1px solid #ffffff29; border-radius: 10px;
  font: 450 12px/1.4 var(--font-body); padding: 0 32px 0 12px; height: 44px; max-width: 100%;
}
.ub-studio .catalogFilters select:disabled { opacity: .6; cursor: default; }
.ub-studio .catalogSummary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0 0 16px; font-size: 11px; line-height: 1.5; color: #aab4c2; }
.ub-studio #catalogOdds { color: color-mix(in srgb, var(--rc) 30%, #dce5ef); }
.ub-studio .prizeGallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ub-studio .prizeCard {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px;
  background: #1a2028; border: 1px solid #ffffff17; border-radius: 8px; overflow: hidden;
}
.ub-studio .prizeCard::after { content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px; background: var(--rc); }
.ub-studio .prizeServer { color: #b3bdca; font-size: 9px; font-weight: 550; min-height: 14px; line-height: 1.4; }
.ub-studio .prizeArt { display: block; width: 100%; height: 100px; object-fit: contain; margin: 12px 0 16px; filter: drop-shadow(0 6px 7px #00000030); }
.ub-studio .prizeName { color: #edf1f5; font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; flex: 1; }
.ub-studio .prizeRarity { color: color-mix(in srgb, var(--rc) 40%, white); font-size: 10px; line-height: 1.5; margin-top: 8px; }
.ub-studio .catalogEmpty { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--muted); font-size: 13px; }
.ub-studio .catalogPager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; color: #aab5c3; font-size: 11px; }
.ub-studio .catalogPager > div { display: flex; align-items: center; gap: 12px; }
.ub-studio #catalogPage { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.ub-studio .inventoryViewBar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 20px; }
.ub-studio .inventorySort { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ub-studio .inventorySort > span { color: #a8b2c0; font-size: 11px; }
.ub-studio .viewModes { display: flex; gap: 4px; padding: 3px; border: 1px solid #ffffff17; background: #10151c; border-radius: 12px; }
.ub-studio.ub-controls.ub-pro .wrap .viewModes button { width: 40px; height: 38px; min-height: 38px; padding: 0; background: none; border-color: transparent; box-shadow: none; color: #9eabba; }
.ub-studio.ub-controls.ub-pro .wrap .viewModes button[aria-pressed='true'] { background: #96c5df1d; border-color: #96c5df40; color: #c5e4f6; }
.ub-studio .ico-grid { mask-image: url('ui-pro-20260905/layout-grid.svg'); }
.ub-studio .ico-list { mask-image: url('ui-pro-20260905/list.svg'); }
.ub-studio #historyList[data-view='grid'] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ub-studio #historyList[data-view='grid'] .historyItem {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px;
  border: 1px solid #ffffff1c; border-bottom: 2px solid color-mix(in srgb, var(--rc) 65%, #242c38);
  border-radius: 8px !important; background: #171d26; min-height: 276px; overflow: hidden;
}
.ub-studio #historyList[data-view='grid'] .hLeft { display: flex; flex-direction: column; gap: 0; align-items: stretch; padding-top: 18px; }
.ub-studio #historyList[data-view='grid'] .hLeft .srvBadge { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 55px); }
.ub-studio #historyList[data-view='grid'] .hThumb { width: 100%; height: 104px; border: 0; background-color: transparent; background-size: contain; margin-bottom: 14px; }
.ub-studio #historyList[data-view='grid'] .hName { align-self: stretch; min-height: 36px; font-size: 12px; line-height: 1.5; }
.ub-studio #historyList[data-view='grid'] .hRight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 4px; align-items: center; justify-items: stretch; margin-top: auto; }
.ub-studio #historyList[data-view='grid'] .hRarity { grid-column: auto; font-size: 10px; }
.ub-studio #historyList[data-view='grid'] .hWear { justify-self: end; }
.ub-studio #historyList[data-view='grid'] .hSt { position: absolute; right: 12px; top: 15px; font-size: 8px; }
.ub-studio #historyList[data-view='grid'] :is(.claimBtn, .delivered) { width: 100%; max-width: 100%; min-height: 44px; text-align: center; }
.ub-studio #historyList[data-view='grid'] .delivered { display: flex; flex-direction: column; justify-content: center; padding: 4px; }
.ub-studio #historyList[data-view='grid'] .claimBtn::before { content: ''; width: 15px; height: 15px; background: currentColor; mask: url('ui-controls/package-check.svg') center / contain no-repeat; }
.ub-studio #historyList[data-view='list'] .hRight { max-width: 138px; }

/* The dialog header stays visible while its prize gallery scrolls. */
.ub-studio #infoModal .infoBox { width: min(900px, calc(100vw - 32px)); padding: 24px; overflow: hidden; }
.ub-studio #infoModal #infoTitle { font-size: 18px; line-height: 1.4; margin-right: 44px; color: #eef3f8 !important; }
.ub-studio #infoDesc { margin: 0; max-height: calc(100dvh - 170px); overflow-y: auto; padding: 4px 6px 4px 2px; overscroll-behavior: contain; }
.ub-studio #infoDesc .prizeGallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ub-studio #infoDesc .prizeCard { border-radius: 8px !important; }
.ub-studio .prizeModalSummary { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px; color: #aab6c5; font-size: 12px; }
.ub-studio .prizeModalSummary strong { color: #e0e7ef; font-weight: 500; }
.ub-studio #infoClose { width: 44px; height: 44px; min-height: 44px; border-radius: 50% !important; }
@media (max-width: 1150px) {
  .ub-studio .prizeGallery, .ub-studio #historyList[data-view='grid'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ub-studio #infoDesc .prizeGallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ub-studio .catalogSection .card-h { flex-direction: column; align-items: stretch; gap: 16px; }
  .ub-studio .catalogFilters > label { flex: 1; min-width: 0; }
  .ub-studio .catalogFilters select { width: 100%; }
  .ub-studio .prizeGallery, .ub-studio #historyList[data-view='grid'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ub-studio .prizeCard { padding: 12px; }
  .ub-studio .prizeArt { height: 92px; margin: 10px 0 14px; }
  .ub-studio .inventorySort { gap: 8px; }
  .ub-studio .inventorySort select { width: 170px; font-size: 11px; }
  .ub-studio .inventorySort > span { display: none; }
  .ub-studio.ub-controls.ub-pro .wrap .viewModes button { width: 44px; min-height: 44px; height: 44px; }
  .ub-studio #historyList[data-view='grid'] .historyItem { padding: 12px; min-height: 280px; }
  .ub-studio #historyList[data-view='grid'] .hThumb { height: 98px; }
  .ub-studio #infoModal .infoBox { padding: 20px 14px 14px; }
  .ub-studio #infoModal #infoTitle { font-size: 16px; margin-right: 52px; }
  .ub-studio #infoDesc .prizeGallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .ub-studio .inventorySort select { width: 150px; }
  .ub-studio #infoDesc .prizeGallery { grid-template-columns: minmax(0, 1fr); }
  .ub-studio #infoDesc .prizeCard { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
  .ub-studio #infoDesc .prizeArt { grid-column: 1; grid-row: 1 / 4; height: 88px; margin: 0; }
  .ub-studio #infoDesc .prizeServer, .ub-studio #infoDesc .prizeName, .ub-studio #infoDesc .prizeRarity { grid-column: 2; margin: 0; }
  .ub-studio .caseHead { grid-template-columns: 90px minmax(0, 1fr); gap: 12px 14px; }
  .ub-studio .caseHead .caseArt { grid-row: 1; width: 90px; height: 90px; }
  .ub-studio .caseHead .caseInfo { align-self: center; }
  .ub-studio .caseHead .caseResources { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding-top: 12px; border-top: 1px solid #ffffff14; column-gap: 20px; }
  .ub-studio .caseHead .caseInfo h2 { font-size: 19px; }
}