/* SweetDrop skin: loaded after the app's own stylesheets (app/index.html, through rebrand/build-map.mjs), so it can
   restyle and rearrange the compiled LuxDrop front-end without touching its code. Class names are the build's CSS
   module names (name_hash), matched by prefix. See rebrand/layout-plan.md. */

/* --- Held back until the owner supplies verified content (27 October 2026) ------------------------------------
   These sections show LuxDrop's history under the SweetDrop name: other people's tweets and videos about LuxDrop,
   deliveries from LuxDrop's users, LuxDrop's payout and user figures, a Trustpilot score that links to luxdrop.com,
   social handles nobody has confirmed, and LuxDrop's operating company in the footer. */
[class*="_socialProofSection_c77ag"],        /* landing: "Trusted by thousands of winners" (tweets) */
[class*="_freshDeliveriesSection_1lpad"],    /* landing: "Fresh deliveries" */
[class*="_recordsSection_itrjz"],            /* landing: "Breaking records … since our launch in 2024" */
[class*="_heroSectionHeader_1ta09"] > p,     /* landing hero: "Over $50,000,000 paid out …" */
[class*="_rating_scqq7"],                    /* landing hero: Trustpilot rating */
.trustpilot-widget,                          /* footer: Trustpilot rating */
[class*="_wrapper_1kk7g"],                   /* home: "Real Win Moments" (LuxDrop's YouTube videos) */
[class*="_wrapper_1xmoq"],                   /* home: "Follow our socials" */
[class*="_footerSocials_1obfu"],             /* footer: social links */
[class*="_contactUsSocial_1nmjg"],           /* contact page: "Connect with us on social media" */
[class*="_footerText_idq1d"]                 /* footer: the operating company */
{ display: none !important; }

/* Legal pages: the notice that replaces LuxDrop's documents (rebrand/build-map.mjs renders it as a note) as a card. */
.info > .info-block[role="note"] { max-width: 720px; margin: 24px 0 48px; padding: 20px 24px; border: 1px solid #3F353D; border-radius: 12px; background: #191619; }
.info > .info-block[role="note"] .info-text { margin: 0; color: #E9D9E3; font-size: 16px; line-height: 1.6; }

/* --- Affiliates hero: the title's highlight and the floating "+$" marks in pink (they were LuxDrop's green) ---------- */
[class*="_heroSectionHeaderText_nnc9r"] span { color: #FF4F9A !important; }
[class*="_floatingIcons_nnc9r"] path[fill="#56E7A3"] { fill: #FF8CBE; }

/* --- Race: the weekly pool in champagne gold (it was LuxDrop's green); the daily pool keeps its pink ----------------- */
[class*="_prizePool_8gzfl"][class*="_weekly_8gzfl"] {
  background: radial-gradient(59.32% 130.39% at 49.95% -31.7%, #FFF1D640, #F2C14E40 24.04%, #19161940), #3A2A1E !important;
}
[class*="_prizePool_8gzfl"][class*="_weekly_8gzfl"][class*="_activePool_8gzfl"] { background: radial-gradient(59.32% 130.39% at 49.95% -31.7%, #FFF1D640, #F2C14E40 24.04%, #19161940), #5A4224 !important; }
[class*="_prizePool_8gzfl"][class*="_weekly_8gzfl"][class*="_activePool_8gzfl"],
[class*="_prizePool_8gzfl"][class*="_weekly_8gzfl"]:hover { outline-color: #F2C14E !important; }
[class*="_weekly_8gzfl"] [class*="_poolAmount_8gzfl"] { color: #F2C14E !important; }

/* --- The rain's "Join" and the market's buy button on hover: pink like the other primary actions (were lime green) -- */
[class*="_joinBtn_4yw61"] { border-color: #FF4F9A !important; background: #FF4F9A !important; box-shadow: none !important; color: #23061A !important; }
[class*="_joinBtn_4yw61"]:hover { background: #FF6BAA !important; }
[class*="_card_a2q93"]:hover [class*="_buyBtn_a2q93"] { border-color: #FF4F9A !important; background: #FF4F9A !important; box-shadow: 0 0 0 2px #D62A74 !important; color: #23061A !important; }

/* --- Pack cards: SweetDrop's own hover. The pouch swings forward from its base and catches a pink light (LuxDrop's
   lifted straight up); calmer with reduced motion. ------------------------------------------------------------------ */
[class*="_card_1jp6o"] [class*="_imgContainer_1jp6o"] { transform-origin: 50% 92%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease !important; }
[class*="_card_1jp6o"]:hover [class*="_imgContainer_1jp6o"] { transform: rotate(-3deg) scale(1.05) !important; filter: drop-shadow(0 16px 22px rgba(255, 79, 154, .32)) brightness(1.06); }
[class*="_card_1jp6o"]:hover [class*="_panel_1jp6o"]::before { background: rgba(255, 79, 154, .14) !important; }
@media (prefers-reduced-motion: reduce) {
  [class*="_card_1jp6o"]:hover [class*="_imgContainer_1jp6o"] { transform: none !important; }
}

/* --- "All Packs" heading: the Liquid drop instead of LuxDrop's pouch icon --------------------------------------- */
[class*="_packIcon_1ejv6"] { background: url(/favicon.svg) center / contain no-repeat; }
[class*="_packIcon_1ejv6"] > * { display: none; }

/* --- Keyboard focus: one visible pink ring on buttons, links and ticks (mouse clicks don't show it). Text fields show
   focus on their own frame instead (a ring around the bare text box looked like a stray pink rectangle). Menus and their
   items (role menu/menuitem, tabindex="-1") are focused by script as the pointer moves, so they show their own highlight, not the ring. */
:is(a, button, select, [role="button"], [tabindex]:not(input):not(textarea)):not([tabindex="-1"]):not([role^="menu"]):focus-visible,
input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
  outline: 2px solid #FF8CBE !important; outline-offset: 2px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, textarea:focus-visible { outline: none; }
html [class*="_priceInput_62us6"]:focus-within { border-color: #FF4F9A; }

/* --- Primary actions: solid pink, no green glow ------------------------------------------------------------------ */
[class*="_green_x732d"] {
  --btn-border: #FF4F9A !important;
  --btn-text-color: #23061A !important;
  --btn-shadow-default: none !important;
  --btn-shadow-hover: none !important;
  --btn-shadow-active: 0 0 0 2px #D62A74 !important;
  --btn-bg-default: #FF4F9A !important;
  --btn-bg-hover: #FF6BAA !important;
  --btn-bg-active: #D62A74 !important;
}

/* --- Type: Outfit for the interface, Unbounded (the logo's typeface) for page and section titles -------------------
   The app names Golos Text (LuxDrop's font) in about 275 rules, so the interface font is set once for everything. */
body, body *:not(code):not(pre):not(kbd):not(samp) { font-family: 'Outfit', 'Golos Text', sans-serif !important; }
h1, h2 { font-family: 'Unbounded', 'Outfit', sans-serif !important; letter-spacing: -0.01em; font-weight: 700 !important; }

/* === Owner-requested layout pass (27 October 2026): header, market, Rewards and VIP ================================
   Page chunks load their stylesheets after this file, so these rules start with "html" to outrank the chunks' single-
   class rules instead of relying on load order. Only layout and presentation change; every control, value and rule
   stays the app's own. The Rewards banner's picture and the market "How does it work?" modal (_5mf37_) come from the
   animation chat's rebrand/rewards-banner.mjs and rebrand/market-explainer.mjs. */

/* --- One centred column (owner's choice, 27 October 2026): the header's logo, links and buttons and every page's
   content sit in the same --sd-column wide column in the middle of the window, with --sd-gutter at its sides; wide
   screens get empty margins. The header bar and full-width banners (Rewards, VIP) still reach the window's edges.
   Pages with their own narrower centred column (deals, race, the games, VIP) keep it. Phones and tablets unchanged. */
:root { --sd-column: 1280px; --sd-gutter: 24px; }
@media (min-width: 1440px) { :root { --sd-gutter: 40px; } }
@media (min-width: 1024px) {
  html [class*="_header_1tlst"] [class*="_headerContent_1tlst"] { padding-inline: max(var(--sd-gutter), calc((100% - var(--sd-column)) / 2)); }
  html [class*="_appLayoutContent_1yynx"] { width: 100%; max-width: calc(var(--sd-column) + 2 * var(--sd-gutter)); margin-inline: auto; }
  html [class*="_root_ar7jm"], html [class*="_battles_o8pu8"], html [class*="_page_tz45v"], html [class*="_container_tw496"] { padding-inline: var(--sd-gutter); }
  html [class*="_container_tw496"] { max-width: none; }
}
/* The header's pink glow strip, softer, so the bar reads neutral like the rest of the surfaces */
html [class*="_headerBottomGlow_1tlst"] { opacity: .35; }
/* No "Buy XP" (owner, 27 October 2026): the button on the Rewards progress panel and the "Buy EXP" button on the
   profile's level card are left out; XP and levels still work as before */
html [class*="_buyXpButton_6fmeu"], html [class*="_buyExpBtn_14og0"] { display: none; }
/* Nor "Ultimate XP Rewards" (owner, same day): with both buttons gone the level progress takes the panel's full width */
html [class*="_actionButtons_6fmeu"] { display: none; }
html [class*="_levelPanel_6fmeu"] { grid-template-columns: minmax(0, 1fr); }
/* Promo code: SweetDrop's gold voucher (Codex's current voucher art) instead of the old pink ticket, as the small icon
   by the title and as the faint decoration */
html img[class*="_promoCodeImg_uct1y"], html img[class*="_ticketDecor_uct1y"] { object-position: -9999px 0; background: url(/assets/items/voucher-gold.png) center / contain no-repeat; }
html img[class*="_ticketDecor_uct1y"] { opacity: .3; }
/* Likewise the VIP page's pink top glow and the Rewards promo box's pink fill */
html [class*="_headerBg_16p8l"] { opacity: .5; }
html [class*="_promoCodeSection_uct1y"] { background: radial-gradient(120% 90% at 100% 0%, #FF4F9A24, transparent 60%), #1F1A1F; }

/* --- The money-green button (the market's Open Cart, the order review and Blackjack): SweetDrop's primary pink --- */
html [class*="_button_1i2m0"] { border-color: #FF8CBE; box-shadow: 0 0 0 2px #6E2444; background: #FF4F9A; color: #23061A; }
html [class*="_button_1i2m0"]::before { background: linear-gradient(104deg, #6E2444BF -18%, #FF8CBEBF 20%, #FF4F9ABF 44%, #D62A74BF 80%); }
html [class*="_button_1i2m0"]::after { background: linear-gradient(177deg, #FF8CBE 0%, #FF4F9A 60%, #D62A74 100%); }
html [class*="_button_1i2m0"]:hover { box-shadow: 0 0 0 2px #6E2444, 0 0 0 4px #FF4F9A; }
html [class*="_button_1i2m0"]:active { box-shadow: 0 0 0 2px #6E2444, 0 0 0 4px #FF8CBE, 0 0 0 6px #6E2444; }

/* --- Section titles: one pink marker for the market rows, the Rewards blocks and the VIP sections ------------------- */
html [class*="_title_1asa0"], html [class*="_rewardsListTitle_tw496"], html [class*="_rewardsListTitle_4cdov"] { display: flex; align-items: center; gap: 10px; }
html [class*="_title_1asa0"]::before, html [class*="_rewardsListTitle_tw496"]::before, html [class*="_rewardsListTitle_4cdov"]::before,
html [class*="_advantagesHeader_1c5in"] [class*="_title_1c5in"]::before, html [class*="_title_1xsdp"]::before {
  content: ""; flex-shrink: 0; width: 4px; height: .9em; border-radius: 2px; background: linear-gradient(180deg, #FF8CBE, #FF4F9A);
}

/* --- Market ------------------------------------------------------------------------------------------------------- */
/* SweetDrop's own market structure (owner, 27 October 2026: change it up so it doesn't copy LuxDrop): no left
   sidebar. From 1024px the page is one grid: every category as a chip row on top, then one toolbar band (product
   search, price, brand, sort), then the collections and product rows across the full width. The sidebar's own sections,
   lists, inputs and buttons are reused as they are and only placed differently; the price slider is left out of the
   band (the two price fields remain). Phones and tablets keep their search bar and filter drawer. */
@media (min-width: 1024px) {
  html [class*="_layout_1sqn8"] {
    grid-template-columns: minmax(0, 1fr) 280px 240px 220px; grid-template-areas: "cats cats cats cats" "search price brand sort" "main main main main";
    gap: 20px 12px; align-items: start;
  }
  html [class*="_layout_1sqn8"]:has([class*="_resetSelectionBar_1mqj5"]) { grid-template-areas: "cats cats cats reset" "search price brand sort" "main main main main"; }
  html [class*="_layout_1sqn8"]::before { content: ""; grid-area: 2 / 1 / 3 / -1; margin: -8px; border: 1px solid #2B262B; border-radius: 16px; background: #161316; }
  html [class*="_layout_1sqn8"] > aside, html [class*="_layout_1sqn8"] > [class*="_content_1dbmb"], html [class*="_layout_1sqn8"] [class*="_desktopRow_twco4"] { display: contents; }
  html [class*="_layout_1sqn8"] > aside > section { border: none; border-radius: 0; background: none; }
  html [class*="_layout_1sqn8"] > aside > section > [class*="_sectionHeader_1a3kz"] { display: none; }
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(1) { grid-area: cats; }
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(2) { grid-area: price; }
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(3) { grid-area: brand; position: relative; z-index: 8; }
  html [class*="_layout_1sqn8"] > aside > [class*="_resetSelectionBar_1mqj5"] { grid-area: reset; }
  html [class*="_layout_1sqn8"] [class*="_searchField_twco4"] { grid-area: search; }
  html [class*="_layout_1sqn8"] [class*="_searchBar_1vx15"] { box-shadow: none; }
  html [class*="_layout_1sqn8"] [class*="_sortDropdown_1sqn8"] { grid-area: sort; width: auto; position: relative; z-index: 8; }
  /* Their open lists float over the products at 8, under the fixed header (9) and its menus. */
  html [class*="_layout_1sqn8"] [class*="_main_1v0r8"], html [class*="_layout_1sqn8"] [class*="_main_ex1l1"] { grid-area: main; margin-top: 12px; }
  /* Categories as chips; the chosen one in pink (its tick box is redundant here) */
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(1) [class*="_searchWrapper_o2lgr"] { display: none; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] { display: flex; flex-wrap: wrap; gap: 8px; max-height: none; overflow: visible; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] [class*="_item_1flpf"] { width: auto; height: 38px; gap: 8px; padding: 0 16px; border: 1px solid #302930; border-radius: 999px; background: #1A161A; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] [class*="_item_1flpf"]:hover { border-color: #4A424A; background: #221D21; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] [class*="_itemActive_1flpf"] { border-color: #FF4F9A; background: #FF4F9A1F; color: #FFFFFF; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] [class*="_info_1flpf"] { gap: 8px; }
  html [class*="_layout_1sqn8"] [class*="_innerScrollList_1mqj5"] [class*="_checkbox_1flpf"] { display: none; }
  /* Price: the two fields in the band */
  html [class*="_layout_1sqn8"] [class*="_container_62us6"] { padding: 0; }
  html [class*="_layout_1sqn8"] [class*="_slider_62us6"] { display: none; }
  /* Brand: its search field in the band, the list drops down while it has focus (or the pointer); outlined in pink
     while a brand is chosen */
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(3) [class*="_searchWrapper_o2lgr"] { padding: 0; border: none; background: none; }
  html [class*="_layout_1sqn8"] [class*="_list_4nb6n"] {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px;
    border: 1px solid #302930; border-radius: 12px; background: #1A161A; box-shadow: 0 18px 40px #00000099;
  }
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(3):focus-within [class*="_list_4nb6n"], html [class*="_layout_1sqn8"] [class*="_list_4nb6n"]:hover { display: block; }
  html [class*="_layout_1sqn8"] > aside > section:nth-of-type(3):has([class*="_itemActive_1flpf"]) [class*="_searchField_o2lgr"] { border-color: #FF4F9A; }
  /* Collection tiles share the width */
  html [class*="_collectionGrid_1v0r8"] [class*="_banner_n408g"] { flex: 1 0 210px; width: auto; }
}
html [class*="_searchBar_1vx15"]:focus-within, html [class*="_searchField_o2lgr"]:focus-within { border-color: #FF4F9A; box-shadow: 0 0 0 3px #FF4F9A29; }
/* Filters in the phone/tablet drawer: rounder panels, small-caps headings */
html [class*="_section_1a3kz"] { border-color: #2F2A2F; border-radius: 14px; background: #1B171A; }
html [class*="_section_1a3kz"] > [class*="_sectionHeader_1a3kz"] { border-radius: 13px 13px 0 0; background: #252024; }
html [class*="_section_1a3kz"] > [class*="_sectionHeader_1a3kz"]:last-child { border-radius: 13px; }
html [class*="_section_1a3kz"] > [class*="_sectionHeader_1a3kz"]:hover { background: #2F2A2F; }
html [class*="_sectionTitle_1a3kz"] { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* More air between the rows; rounder collection tiles */
html [class*="_main_1v0r8"] { gap: 28px; }
html [class*="_header_1asa0"] { margin-bottom: 2px; }
html [class*="_banner_n408g"] { border-radius: 12px; }
html [class*="_banner_n408g"] [class*="_bottomBar_n408g"] { border-radius: 10px; }
html [class*="_banner_n408g"] [class*="_image_n408g"] { object-fit: cover; } /* wider tiles crop instead of stretching */
/* Category and search results: even columns, the same gutter as the rows, two per row on phones */
html [class*="_grid_ex1l1"] { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 16px; }
@media (max-width: 767px) { html [class*="_grid_ex1l1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Buy on hover: the button's two glow layers were still LuxDrop's green under the pink */
html [class*="_card_a2q93"]:hover [class*="_buyBtn_a2q93"]::before { background: linear-gradient(104deg, #6E2444 -18%, #FF8CBE 20%, #FF4F9A 44%, #D62A74 100%); }
html [class*="_card_a2q93"]:hover [class*="_buyBtn_a2q93"]::after { background: linear-gradient(177deg, #FF8CBE 0%, #FF4F9A 60%, #D62A74 100%); }
html [class*="_card_a2q93"]:hover [class*="_buyBtn_a2q93"]:hover { box-shadow: 0 0 0 2px #6E2444, 0 0 0 4px #FF4F9A !important; }
html [class*="_card_a2q93"]:hover [class*="_buyBtn_a2q93"]:active { box-shadow: 0 0 0 2px #6E2444, 0 0 0 4px #FF8CBE, 0 0 0 6px #6E2444 !important; }

/* --- Rewards top (owner's choice "C", 28 October 2026) ---------------------------------------------------------------
   The banner is a card in the page column: the page's own title (h1, which LuxDrop kept for screen readers only) on the
   left in the display face, the three level pouches on the right, and the progress and promo code cards rise into its
   lower edge. The pouches come from the animation chat's banner (rewards-banner/desktop.webp) as a background cropped to
   them at every width, so its baked English "Rewards." title never shows (the phone picture has it baked in as well). */
html [class*="_header_tw496"] { left: auto; transform: none; width: 100%; max-width: var(--sd-column); height: 380px; aspect-ratio: auto; margin: 28px auto 0;
  border: 1px solid #2F2A2F; border-radius: 20px; background: radial-gradient(60% 110% at 82% 30%, #FF4F9A33, transparent 70%), linear-gradient(160deg, #2A1D27, #151115 70%); }
html [class*="_headerImage_tw496"] { left: 44%; bottom: 120px; background: url(/assets/sweetdrop/rewards-banner/desktop.webp) 88% 50% / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
html [class*="_headerImage_tw496"] img { display: none; }
html [class*="_header_tw496"] [class*="_headerTitle_tw496"] { position: absolute; left: 48px; top: 72px; z-index: 2; width: auto; max-width: 44%; height: auto; margin: 0;
  clip: auto; overflow: visible; white-space: normal; font: 800 clamp(28px, 2.7vw, 48px) / 1.05 Unbounded, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; color: #FFF2F8; }
html [class*="_header_tw496"] [class*="_headerTitle_tw496"]::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 18px; border-radius: 2px; background: #FF4F9A; }
html [class*="_progressSection_tw496"] { position: relative; z-index: 3; margin-top: -132px; padding-inline: 24px; }
html [class*="_progressSection_tw496"] > [class*="_rewardsListTitle_tw496"] { display: none; } /* "Your progress": the cards say it */
html [class*="_levelSection_6fmeu"], html [class*="_promoCodeSection_uct1y"] { box-shadow: 0 18px 40px #0009; }
html [class*="_ticketDecor_uct1y"] { display: none; } /* the voucher picture the card's corner cut in half */
/* The three empty Halloween decoration boxes took the first grid cells of the tablet layout and pushed the title and
   the field out of place */
html [class*="_promoCodeSection_uct1y"] > [class*="_halloweenDecor"] { display: none; }
html [class*="_promoCodeInputBtn_uct1y"] { color: #FF8CBE; border: 1px solid #FF4F9A55; border-radius: 8px; background: #FF4F9A14; }
@media (max-width: 767px) {
  html [class*="_header_tw496"] { height: 300px; margin: 16px 0 0; }
  html [class*="_headerImage_tw496"] { left: 0; top: 64px; bottom: 60px; -webkit-mask-image: none; mask-image: none; }
  html [class*="_header_tw496"] [class*="_headerTitle_tw496"] { left: 20px; top: 22px; max-width: calc(100% - 40px); font-size: 22px; }
  html [class*="_header_tw496"] [class*="_headerTitle_tw496"]::after { display: none; }
  html [class*="_progressSection_tw496"] { margin-top: -56px; padding-inline: 12px; }
}
/* Progress and promo code side by side from laptop width, the promo box as a narrower column */
@media (min-width: 1280px) {
  html [class*="_content_tw496"] { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
  html [class*="_promoCodeSection_tw496"] { max-width: none; justify-self: stretch; }
}
html [class*="_levelSection_6fmeu"] { padding: 32px; border: 1px solid #2F2A2F; border-radius: 16px; background: linear-gradient(160deg, #262025 0%, #1A171A 70%); }
@media (max-width: 1199px) { html [class*="_levelSection_6fmeu"] { padding: 24px; } }
@media (max-width: 767px) { html [class*="_levelSection_6fmeu"] { padding: 16px; } }
html [class*="_guestHeader_6fmeu"] { margin-bottom: 20px; }
html [class*="_guestText_6fmeu"] { color: #B5A0AE; max-width: 640px; }
html [class*="_guestCallToAction_6fmeu"] { color: #F2EFF1; font-weight: 600; }
html [class*="_guestHowToButton_6fmeu"] { padding: 8px 16px; border: 1px solid #FF4F9A66; border-radius: 999px; font-size: 14px; }
html [class*="_guestHowToButton_6fmeu"]:hover { background: #FF4F9A1A; }
/* Readable progress: a thicker bar, a pink fill and lighter secondary numbers */
html [class*="_progressBar_6fmeu"] { height: 18px; background: #131013; box-shadow: inset 0 0 0 1px #332D33; }
html [class*="_progressFill_6fmeu"] { height: 10px; background: linear-gradient(90deg, #FF4F9A, #FF8CBE); }
html [class*="_expSeparator_6fmeu"], html [class*="_totalExp_6fmeu"], html [class*="_expLabel_6fmeu"] { color: #A28E9E; }
html [class*="_levelBadgeMuted_6fmeu"] [class*="_levelText_6fmeu"] { color: #8A7787; }
/* Promo code: the field and its Apply button on one line, a visible focus state */
html [class*="_promoCodeSection_uct1y"] { overflow: hidden; padding: 20px; border-radius: 16px; }
@media (min-width: 768px) and (max-width: 1279px) {
  html [class*="_promoCodeSection_uct1y"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); align-items: center; gap: 24px; min-height: auto; }
}
html [class*="_promoCodeWrapper_uct1y"] { padding: 16px; border-radius: 12px; }
html [class*="_promoCodeInputWrapper_uct1y"] { min-height: 52px; padding: 4px 4px 4px 16px; border-radius: 10px; border-color: #FF6AA980; }
html [class*="_promoCodeInputWrapper_uct1y"]:focus-within { border-color: #FF4F9A; box-shadow: 0 0 0 3px #FF4F9A33; }
html [class*="_promoCodeInputBtn_uct1y"] { height: 44px; }
/* No tab bar while Daily Packs is the only tab (the Bonuses tab is gone, rebrand/build-map.mjs) */
html [class*="_tabsHeader_tw496"]:not(:has([class*="_trigger_1oykv"] ~ [class*="_trigger_1oykv"])) { display: none; }
/* The tab bar when there is more than one tab: a framed switch, the chosen tab in pink, a clear keyboard ring */
html [class*="_tabsList_tw496"] { padding: 4px; border: 1px solid #2F2A2F; border-radius: 12px; background: #131113; }
@media (min-width: 768px) { html [class*="_tabsList_tw496"] { min-width: 360px; } }
html [class*="_tabsList_tw496"] [class*="_indicator_1oykv"] { border-radius: 9px; background: linear-gradient(180deg, #FF4F9A38, #FF4F9A1F); box-shadow: inset 0 0 0 1px #FF4F9A99; }
html [class*="_tabsList_tw496"] [class*="_trigger_1oykv"] { min-height: 44px; border-radius: 9px; font-size: 15px; }
html [class*="_tabsList_tw496"] [class*="_trigger_1oykv"][data-state="active"] { color: #FFFFFF; }
html [class*="_trigger_1oykv"]:focus-visible { outline: 2px solid #FF8CBE; outline-offset: 2px; }

/* --- VIP: SweetDrop's own composition (owner-requested redesign) -----------------------------------------------------
   The same parts in a different arrangement: the intro and the programme text on the left, the status card (sign-in
   or your progress) on the right, the advantages as four upright cards with Codex's 3D set, section titles on the left,
   and the rank table keeps its labels in view while it scrolls. Ranks, requirements, rewards and controls unchanged. */
html [class*="_landingPageContent_16p8l"][class*="_loggedOutView_16p8l"], html [class*="_wrapper_wdv46"] {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "status" "exp";
  align-items: center; justify-items: stretch; gap: 24px; width: 100%; max-width: 1133px; margin: 0 auto; padding-top: 24px;
}
html [class*="_landingPageContent_16p8l"][class*="_loggedOutView_16p8l"] { min-height: 0; align-content: start; }
html [class*="_landingPageContent_16p8l"][class*="_loggedOutView_16p8l"] > section { grid-column: 1 / -1; margin-top: 24px; margin-bottom: 40px; }
@media (min-width: 1024px) {
  html [class*="_landingPageContent_16p8l"][class*="_loggedOutView_16p8l"], html [class*="_wrapper_wdv46"] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "intro status" "exp status"; column-gap: 56px; row-gap: 24px; padding-top: 48px;
  }
}
/* The status card's old frame and divider give way; its halves become the grid's pieces */
html [class*="_container_vyf08"], html [class*="_wrapper_1l77n"], html [class*="_content_1l77n"] { display: contents; }
html [class*="_container_vyf08"]::before, html [class*="_container_vyf08"]::after, html [class*="_wrapper_1l77n"]::before, html [class*="_wrapper_1l77n"]::after { content: none; }
html [class*="_divider_vyf08"], html [class*="_divider_1l77n"], html [class*="_cardBackgroundDecor_1l77n"] { display: none; }
html [class*="_content_1mkqv"] { grid-area: intro; align-self: end; align-items: flex-start; max-width: none; padding-top: 0; text-align: left; }
html [class*="_contentContainer_1mkqv"] { align-items: flex-start; }
html [class*="_welcomeTo_1mkqv"] { margin: 0 0 18px; padding: 6px 12px; border: 1px solid #FF4F9A59; border-radius: 999px; background: #FF4F9A1A; color: #FF8CBE; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
html [class*="_logoContainer_1mkqv"] { justify-content: flex-start; }
html [class*="_logoText_1mkqv"] { width: auto; max-width: 100%; height: 56px; }
html [class*="_cardRight_vyf08"], html [class*="_experienceColumn_yb2ds"] { grid-area: exp; align-self: start; }
html [class*="_cardRight_vyf08"] > div { padding: 0; }
html [class*="_experienceColumn_yb2ds"] { flex: initial; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 0; text-align: left; }
html [class*="_vipBadge_yb2ds"] { font-size: 20px; }
html [class*="_info_yb2ds"] { max-width: 520px; font-size: 15px; text-align: left; }
html [class*="_vipButtons_yb2ds"] { justify-content: flex-start; width: auto; }
html [class*="_howItWorksBtn_yb2ds"] { flex: 0 0 auto; padding: 0 24px; }
@media (max-width: 767px) {
  html [class*="_vipButtons_yb2ds"] { width: 100%; align-items: stretch; }
}
/* The status cards: plum glass (the rewards card keeps the pink crystal; the VIP page's card doesn't, owner 30 October) */
html [class*="_cardLeft_vyf08"], html [class*="_statusColumn_1l77n"] {
  grid-area: status; align-self: stretch; position: relative; border: 1px solid #4B3C47; border-radius: 20px; box-shadow: 0 24px 60px #00000052;
}
html [class*="_cardLeft_vyf08"] {
  min-height: 300px; padding: 164px 28px 32px; gap: 20px;
  background: url(/assets/sweetdrop/motion/vip-crystal.webp) center 28px / 112px auto no-repeat, radial-gradient(120% 80% at 50% 0%, #FF4F9A40, transparent 60%), linear-gradient(180deg, #312830, #1A1619);
}
html [class*="_statusColumn_1l77n"] {
  padding: 28px; gap: 24px; justify-content: space-between;
  background: radial-gradient(120% 80% at 100% 0%, #FF4F9A33, transparent 60%), linear-gradient(180deg, #312830, #1A1619);
}
@media (max-width: 767px) { html [class*="_statusColumn_1l77n"] { padding: 20px; } }
/* Section titles on the left */
html [class*="_advantagesHeader_1c5in"], html [class*="_benefitsHeader_3m2p9"] { text-align: left; margin-bottom: 28px; }
html [class*="_titleWrap_1c5in"], html [class*="_titleWrap_3m2p9"] { justify-content: flex-start; }
html [class*="_advantagesHeader_1c5in"] [class*="_title_1c5in"], html [class*="_benefitsHeader_3m2p9"] [class*="_title_3m2p9"], html [class*="_title_1xsdp"] { display: flex; align-items: center; gap: 12px; font-size: 30px; line-height: 1.2; text-align: left; }
html [class*="_benefitsHeader_3m2p9"] [class*="_subtitle_3m2p9"], html [class*="_subtitle_1xsdp"] { text-align: left; }
html [class*="_headerContent_1xsdp"] { align-items: flex-start; gap: 12px; }
html [class*="_benefitsContent_3m2p9"] { margin-top: 0; }
/* Advantages: four upright cards, the 3D piece on a lit plinth above the text (two per row on tablets, compact rows on phones) */
html [class*="_vipAdvantages_12v0h"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 16px; }
@media (max-width: 1199px) { html [class*="_vipAdvantages_12v0h"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { html [class*="_vipAdvantages_12v0h"] { grid-template-columns: minmax(0, 1fr); } }
html [class*="_vipAdvantage_12v0h"] {
  min-width: 0; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 20px; padding: 22px 22px 26px;
  border: 1px solid #332D33; border-radius: 18px; background: linear-gradient(180deg, #252025 0%, #191619 100%);
}
html [class*="_vipIcon_12v0h"] {
  width: 112px; height: 112px; min-width: 0; padding: 10px; border-radius: 22px;
  background: radial-gradient(circle at 50% 42%, #FF4F9A3D, transparent 68%), #1D191D; box-shadow: inset 0 0 0 1px #3F353D;
}
html [class*="_info_12v0h"] { gap: 10px; }
html [class*="_title_12v0h"] { font-size: 20px; line-height: 1.25; white-space: normal; }
html [class*="_description_12v0h"] { font-size: 15px; }
@media (max-width: 599px) {
  html [class*="_vipAdvantage_12v0h"] { flex-direction: row-reverse; align-items: center; gap: 16px; padding: 16px; }
  html [class*="_vipIcon_12v0h"] { width: 76px; height: 76px; flex-shrink: 0; padding: 6px; border-radius: 16px; }
}
/* Rank table: the benefit names stay pinned while the ranks scroll sideways; rows light up under the pointer */
html [class*="_tableWrapper_161zu"] { padding: 16px; border-radius: 18px; background: #1B171A; box-shadow: inset 0 0 0 1px #2F2A2F; scrollbar-color: #FF4F9A #252024; }
html [class*="_tableWrapper_161zu"]::-webkit-scrollbar { height: 6px; }
html [class*="_tableWrapper_161zu"]::-webkit-scrollbar-thumb { background: #FF4F9A; }
html [class*="_tableHeader_161zu"] > [class*="_columnHeader_161zu"]:first-child, html [class*="_tierCell_277g2"] {
  position: sticky; left: 0; z-index: 3; align-self: stretch; margin-left: -16px; padding-left: 16px; background: #1B171A; box-shadow: 12px 0 12px -12px #000000B3;
}
html [class*="_even_277g2"] [class*="_tierCell_277g2"] { background: linear-gradient(#3D333C80, #3D333C80), #1B171A; }
html [class*="_tableBody_161zu"] [class*="_tierRow_277g2"]:hover { box-shadow: inset 0 0 0 1px #FF4F9A66; }
html [class*="_checkSuccessIcon_277g2"] { color: #FF8CBE; }
@media (max-width: 767px) {
  html [class*="_tableHeader_161zu"], html [class*="_tierRow_277g2"] { grid-template-columns: 136px repeat(11, minmax(0, 1fr)); }
  html [class*="_tierCell_277g2"] { white-space: normal; }
}

/* --- Filter checkboxes: the ticked box in pink (its icon had LuxDrop's blue baked in) --- */
html [class*="_checkboxActive_1flpf"] { background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20overflow='visible'%20preserveAspectRatio='none'%20style='display:block'%20viewBox='0%200%2020%2020'%3e%3cpath%20fill='var(--fill-0,%20%23ff4f9a)'%20fill-rule='evenodd'%20d='M2.349%203.747C2%204.432%202%205.327%202%207.12v5.76c0%201.792%200%202.688.349%203.373a3.2%203.2%200%200%200%201.398%201.398C4.432%2018%205.327%2018%207.12%2018h5.76c1.792%200%202.688%200%203.373-.349a3.2%203.2%200%200%200%201.398-1.398c.349-.685.349-1.58.349-3.373V7.12c0-1.792%200-2.688-.349-3.373a3.2%203.2%200%200%200-1.398-1.398C15.568%202%2014.673%202%2012.88%202H7.12c-1.792%200-2.688%200-3.373.349A3.2%203.2%200%200%200%202.35%203.747m12.617%204.019a.8.8%200%200%200-1.132-1.132L8.4%2012.07%206.166%209.834a.8.8%200%200%200-1.132%201.132l2.8%202.8a.8.8%200%200%200%201.132%200z'%20clip-rule='evenodd'/%3e%3c/svg%3e") no-repeat center/contain }


/* --- Text fields (the app's shared input): a visible frame and a readable placeholder (both were almost the field's
   own colour), labels a step lighter; focus keeps the app's pink frame ------------------------------------------- */
html [class*="_field_13hkp"] { border-color: #3A333A; background: #141114; }
html [class*="_field_13hkp"]::placeholder { color: #8A7F88; }
html [class*="_field_13hkp"]:not([readonly]):focus { border-color: #FF4F9A; }
html [class*="_label_13hkp"] { color: #CFC4CC; }

/* --- Sign-up / log-in window: a plum panel with a pink glow instead of solid pink, no LuxDrop green, readable tabs and
   tick-box text -------------------------------------------------------------------------------------------------- */
html [class*="_leftPanel_v3k28"] { background: radial-gradient(120% 70% at 50% 0%, #FF4F9A3D, transparent 65%), linear-gradient(180deg, #2B2029 0%, #1A161A 100%); }
html [class*="_leftPanelInfo_v3k28"] { background: #FF4F9A1A; box-shadow: inset 0 0 0 1px #FF4F9A59; }
html [class*="_leftPanelInfoTextGreen_v3k28"], html [class*="_leftPanelBottomTextAccent_v3k28"] { color: #FF8CBE; }
html [class*="_tabsList_v3k28"] [class*="_trigger_1oykv"][data-state="inactive"] { color: #A89DA5; }
html [class*="_checkboxText_v3k28"] { color: #B9AEB6; }
/* The two gift icons beside "Claim your 3 free packs": the same icon in pink, shown in place of the green one */
html [class*="_leftPanelInfo_v3k28"] > img { object-position: -999px 0; background: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='gift-box-14%203'%20clip-path='url(%23clip0_0_351)'%3e%3cpath%20id='Vector'%20d='M21.2135%205.83352H18.7923C18.986%205.43953%2019.1081%205.0143%2019.1529%204.57763C19.2347%203.66357%2018.9582%202.75345%2018.3816%202.03909C17.805%201.32473%2016.9734%200.86192%2016.062%200.748189C15.5234%200.63282%2014.9657%200.640483%2014.4305%200.770605C13.8953%200.900727%2013.3964%201.14995%2012.9711%201.49967C12.5495%201.87185%2012.2002%202.31854%2011.9408%202.81732C11.6813%202.31854%2011.3321%201.87185%2010.9105%201.49967C10.4851%201.14995%209.98625%200.900727%209.45105%200.770605C8.91584%200.640483%208.35813%200.63282%207.81954%200.748189C6.90812%200.86192%206.07649%201.32473%205.49989%202.03909C4.9233%202.75345%204.64679%203.66357%204.72863%204.57763C4.77345%205.0143%204.89554%205.43953%205.08924%205.83352H2.66803C2.12152%205.83352%201.5974%206.05043%201.21096%206.43654C0.824521%206.82265%200.607422%207.34632%200.607422%207.89236V8.92178C0.607422%209.46782%200.824521%209.99149%201.21096%2010.3776C1.5974%2010.7637%202.12152%2010.9806%202.66803%2010.9806H21.2135C21.76%2010.9806%2022.2841%2010.7637%2022.6705%2010.3776C23.057%209.99149%2023.2741%209.46782%2023.2741%208.92178V7.89236C23.2741%207.34632%2023.057%206.82265%2022.6705%206.43654C22.2841%206.05043%2021.76%205.83352%2021.2135%205.83352ZM15.2995%202.74526C15.4365%202.73054%2015.5747%202.73054%2015.7117%202.74526C15.9139%202.75635%2016.1116%202.80897%2016.2926%202.89985C16.4735%202.99072%2016.6338%203.11789%2016.7634%203.27342C16.8929%203.42894%2016.989%203.60949%2017.0456%203.80378C17.1022%203.99807%2017.1181%204.20193%2017.0923%204.40263C17.0717%204.61163%2017.01%204.81451%2016.9107%204.99964C16.8114%205.18476%2016.6766%205.34849%2016.5139%205.48143C16.3511%205.61436%2016.1637%205.7139%2015.9624%205.77432C15.7611%205.83474%2015.5499%205.85486%2015.3408%205.83352H13.0947C13.1912%204.80793%2013.6219%203.84233%2014.3208%203.08497C14.596%202.85869%2014.9432%202.73821%2015.2995%202.74526ZM6.78924%204.40263C6.76344%204.20193%206.77934%203.99807%206.83593%203.80378C6.89252%203.60949%206.98859%203.42894%207.11815%203.27342C7.24771%203.11789%207.40796%202.99072%207.58892%202.89985C7.76987%202.80897%207.96763%202.75635%208.16985%202.74526C8.30682%202.73054%208.44499%202.73054%208.58197%202.74526C8.93834%202.73821%209.2855%202.85869%209.56075%203.08497C10.257%203.84509%2010.6905%204.80863%2010.7971%205.83352H8.54075C8.33165%205.85486%208.12038%205.83474%207.91907%205.77432C7.71776%205.7139%207.53037%205.61436%207.36765%205.48143C7.20492%205.34849%207.07007%205.18476%206.97081%204.99964C6.87155%204.81451%206.80985%204.61163%206.78924%204.40263ZM10.9105%2023.3337H6.78924C5.42297%2023.3337%204.11267%2022.7914%203.14657%2021.8261C2.18047%2020.8608%201.63772%2019.5517%201.63772%2018.1866V13.0395H10.9105V23.3337ZM22.2438%2013.0395V18.1866C22.2438%2018.8625%2022.1105%2019.5318%2021.8516%2020.1563C21.5928%2020.7807%2021.2133%2021.3482%2020.7349%2021.8261C20.2566%2022.3041%2019.6887%2022.6832%2019.0637%2022.9419C18.4387%2023.2005%2017.7688%2023.3337%2017.0923%2023.3337H12.9711V13.0395H22.2438Z'%20fill='%23FF4F9A'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_351'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") center / contain no-repeat; }

/* === Owner's fix list, 27 October 2026 (evening) ===================================================================== */

/* --- Pack page: the title and controls bars sit flush on the spinner frame's inner ring (they were inset 12px, which
   left a dark strip between ring and bar), and the pack picture no longer sticks out over the frame ----------------- */
html [class*="_headerOverlay_1rf9k"] { inset: var(--spinner-frame-inset, 5px) var(--spinner-frame-inset, 5px) auto; }
html [class*="_controlsOverlay_1rf9k"] { inset: auto var(--spinner-frame-inset, 5px) var(--spinner-frame-inset, 5px); }
html [class*="_headerOverlay_1rf9k"] [class*="_header_1krzj"] { border-radius: 7px 7px 4px 4px; }
html [class*="_controlsOverlay_1rf9k"] [class*="_controlsBar_1rf9k"] { border-radius: 4px 4px 7px 7px; }
@media (min-width: 768px) {
  html [class*="_headerOverlay_1rf9k"] [class*="_headerItemImageWrapper_1krzj"], html [class*="_headerOverlay_1rf9k"] [class*="_headerItemImage_1krzj"] { height: 64px; }
}
/* Pack page: Best and Recent unpackings as a slim side panel OUTSIDE the centred column, in the empty right-hand margin
   (owner, 28 October 2026: the spinner keeps its full width). Only from 1920px, where the margin holds the 260px panel;
   below that the original rows under the full-width spinner. PackDraw-style rows: picture, name, price; Recent scrolls
   inside the panel. The app's own columns and cards, placed by a grid that reaches 280px past the column; Potential Drop
   stays in the column. Packs without recorded drops keep the plain layout. */
.sd-unboxTitle { display: none; }
@media (min-width: 1920px) {
  html [class*="_pageContent_y87fu"]:has(> [class*="_historyRoot_547k5"] > [class*="_unboxingWrapper_547k5"]) {
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "game side" "stats ." "drops ."; column-gap: 20px; align-items: start;
    margin-right: -280px;
  }
  html [class*="_pageContent_y87fu"] > [class*="_boxesGameViewContainer_1rf9k"] { grid-area: game; min-width: 0; }
  html [class*="_pageContent_y87fu"] > [class*="_stats_6yb4x"] { grid-area: stats; }
  html [class*="_pageContent_y87fu"] > [class*="_historyRoot_547k5"]:has(> [class*="_unboxingWrapper_547k5"]) { display: contents; }
  html [class*="_historyRoot_547k5"] > [class*="_wrapper_1e2j3"] { grid-area: drops; }
  html [class*="_historyRoot_547k5"] > [class*="_unboxingWrapper_547k5"] {
    grid-area: side; align-self: stretch; display: flex; flex-direction: column; height: 0; min-height: calc(100% - 24px); margin-top: 24px;
  }
  html [class*="_unboxingWrapper_547k5"] > [class*="_arrows_547k5"], html [class*="_unboxingWrapper_547k5"] > [class*="_unboxingShadow_547k5"] { display: none; }
  html [class*="_unboxingWrapper_547k5"] > [class*="_unboxing_547k5"] {
    flex: 1 1 auto; min-height: 0; margin-top: 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px; overflow: hidden;
    border: 1px solid #302930; border-radius: 12px; background: #161316;
  }
  html [class*="_unboxingWrapper_547k5"] [class*="_columnBest_547k5"] { width: auto; }
  html [class*="_unboxingWrapper_547k5"] [class*="_columnRecent_547k5"] { flex: 1 1 0; min-height: 0; }
  html [class*="_unboxingWrapper_547k5"] [class*="_columnContent_547k5"] { flex-direction: column; gap: 8px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_columnContentRecent_547k5"] { flex: 1 1 0; min-height: 0; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #423A41 transparent; }
  html [class*="_unboxingWrapper_547k5"] [class*="_subtitle_547k5"] { font-size: 16px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_card_1owb4"] { width: 100%; height: 64px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_front_1owb4"] { flex-direction: row; justify-content: space-between; gap: 12px; padding: 3px 12px 3px 4px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_imageStage_1owb4"] { flex-shrink: 0; width: 56px; height: 56px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_asset_1owb4"] { width: 52px; height: 52px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_pricePill_1owb4"] { flex-shrink: 0; width: auto; }
  html [class*="_unboxingWrapper_547k5"] .sd-unboxTitle { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; color: #E9D9E3; }
  html [class*="_unboxingWrapper_547k5"] [class*="_back_1owb4"] { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px 8px 14px; }
  html [class*="_unboxingWrapper_547k5"] [class*="_userInfoBtn_1owb4"] { width: auto; flex: 1 1 auto; }
  html [class*="_unboxingWrapper_547k5"] [class*="_decorPos_1owb4"] { right: auto; width: 64px; --decor-pattern-top: -30px; --decor-overlay-top: 50%; --decor-glow-top: 50%; }
}
@media (min-width: 1920px) { html [class*="_historyRoot_547k5"] > [class*="_unboxingWrapper_547k5"] { min-height: calc(100% - 40px); margin-top: 40px; } }

/* --- Prize cards: the odds label sits over the photo's top-right corner in white. Over a tall or light photo (a silver
   bar, an espresso machine) its digits disappeared, so it gets a dark translucent pill. The photo keeps its size and
   place; values and odds are unchanged (owner via Codex, 28 October 2026). --------------------------------------------- */
html [class*="_cardInner_1esqt"] [class*="_odds_1esqt"] { top: 6px; right: 6px; padding: 0 6px; border-radius: 6px; background: #120E12C7; box-shadow: 0 0 0 1px #FFFFFF14; }

/* --- Filter dropdowns ("Sorter etter: Dato", "Type: Offisielle pakker"): the app title-cases every word, which reads as
   English in Norwegian. Sentence case instead: only the label's and the value's first letter goes up. -------------- */
html [class*="_capitalizeText_19gsv"] { text-transform: none; }
html [class*="_capitalizeText_19gsv"] > span::first-letter { text-transform: uppercase; }

/* --- Race: the table's prize amounts in the race gold (they were LuxDrop's green) ------------------------------------ */
html [class*="_raceItem_16eyw"] [class*="_prize_16eyw"]:not([class*="_noPrize_16eyw"]) { color: #F2C14E !important; }

/* --- Home "How does SweetDrop work?" (also on the invite page): three equal step cards, the illustration on top, then
   the number, a white title and grey text; one column on phones. The chunk nests its rules up to five classes deep,
   hence the !important. The illustrations are the animation chat's motion and keep their own drawing. ------------- */
html [class*="_howItWorksSection_ter9t"] { max-width: 1700px; }
@media (min-width: 1025px) { html [class*="_howItWorksSection_ter9t"] { padding-inline: 0; } }
html [class*="_howItWorksSectionSteps_ter9t"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 16px !important; }
@media (max-width: 767px) { html [class*="_howItWorksSectionSteps_ter9t"] { grid-template-columns: minmax(0, 1fr); } }
html [class*="_howItWorksSectionStep_ter9t"] {
  flex-direction: column-reverse !important; justify-content: flex-end; align-items: stretch !important; gap: 20px !important;
  padding: 20px 20px 24px; border: 1px solid #332D33; border-radius: 18px; background: linear-gradient(180deg, #252025 0%, #191619 100%);
}
html [class*="_stepVideo_ter9t"] { max-width: none !important; max-height: 200px; }
html [class*="_howItWorksSectionStepContent_ter9t"] { display: block !important; max-width: none !important; }
html [class*="_howItWorksSection_ter9t"] [class*="_badgeWrapper_ter9t"] { display: none !important; }
html [class*="_badgeWrapperMobile_ter9t"] { display: block !important; }
html [class*="_titleRow_ter9t"] { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; }
html [class*="_howItWorksSection_ter9t"] [class*="_badge_1fv39"] { width: 36px; height: 36px; -webkit-backdrop-filter: none; backdrop-filter: none; background: #FF4F9A1F; box-shadow: inset 0 0 0 1px #FF4F9A59; }
html [class*="_howItWorksSection_ter9t"] [class*="_badge_1fv39"]::before { content: none; }
html [class*="_number_1fv39"] { background: none; -webkit-text-fill-color: currentColor; color: #FF8CBE; font-size: 16px; line-height: 1; }
html [class*="_howItWorksSectionStepTitle_ter9t"] { background: none !important; -webkit-text-fill-color: currentColor !important; color: #F2EFF1; font-size: 20px !important; line-height: 1.3 !important; }
html [class*="_howItWorksSectionStepDescription_ter9t"] { margin-top: 10px !important; font-size: 15px !important; }
html [class*="_howItWorksSectionStepButton_ter9t"] { margin-top: 20px !important; }

/* --- Home, signed in: "How SweetDrop works?" cards (owner, 30 October 2026; rebrand/qa/HOW-IT-WORKS-V3.md). The three
   media share one 3:2 frame with rounded corners, 384 x 256 at most (the old frames' height): card 1 the recorded Demo
   spin, 2 the delivery van, 3 the watch unboxing (both photo-like scenes, cover). Headings, text and layout unchanged.
   Card 1's pause/play button sits in the frame's corner, shown on hover or keyboard focus (faintly always on touch). */
html [class*="_item_po920"][data-variant] [class*="_imageFrame_po920"] { position: relative; width: min(384px, 100%); height: auto; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden;
  background: radial-gradient(80% 90% at 50% 40%, #3A2433, #171217); }
html [class*="_item_po920"] [class*="_imageFrame_po920"] [class*="_image_po920"] { display: block; width: 100%; height: 100%; object-fit: cover; }
html .sd-how-pause { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(20, 10, 24, .7) center / 12px 12px no-repeat; cursor: pointer; opacity: 0; transition: opacity .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2 1h3v10H2zM7 1h3v10H7z'/%3E%3C/svg%3E"); }
html .sd-how-pause[data-paused="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M3 1l8 5-8 5z'/%3E%3C/svg%3E"); }
html [class*="_imageFrame_po920"]:hover .sd-how-pause, html .sd-how-pause:focus-visible, html .sd-how-pause[data-paused="true"] { opacity: 1; }
html .sd-how-pause:focus-visible { outline: 2px solid #FF4F9A; outline-offset: 2px; }
@media (hover: none) { html .sd-how-pause { opacity: .75; } }

/* --- Home "Best Rewards System": calm text cards with the site's pink title marker (no gold wash, gold titles or 3D
   pieces); a side gutter on tablets and phones (the cards touched the window edges) ----------------------------------- */
html [class*="_prizeCard_1hws0"] {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 22px 26px; text-align: left;
  border: 1px solid #332D33; border-radius: 18px; background: linear-gradient(180deg, #252025 0%, #191619 100%); box-shadow: none;
}
html [class*="_prizeCard_1hws0"]:hover:not(:disabled) { transform: translateY(-2px); border-color: #FF4F9A66; box-shadow: none; }
html [class*="_prizeIcon_1hws0"] { display: none; }
html [class*="_prizeContent_1hws0"] [class*="_prizeTitle_1hws0"] {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; background: none; -webkit-text-fill-color: currentColor; color: #F2EFF1; font-size: 20px;
}
html [class*="_prizeContent_1hws0"] [class*="_prizeTitle_1hws0"]::before { content: ""; flex-shrink: 0; width: 4px; height: .9em; border-radius: 2px; background: linear-gradient(180deg, #FF8CBE, #FF4F9A); }
@media (max-width: 1024px) { html [class*="_rewardsSystemSection_1jshv"] { padding-inline: 16px; } }
@media (max-width: 768px) {
  html [class*="_prizeCard_1hws0"] { padding: 16px; }
  html [class*="_prizeContent_1hws0"] [class*="_prizeTitle_1hws0"] { font-size: 17px; margin-bottom: 6px; }
}

/* --- Crypto only to start with (owner, 27 October 2026): no card, Apple Pay or Google Pay logos in the deposit
   blocks (signed out and signed in); the texts are changed in rebrand/build-map.mjs ------------------------------ */
html [class*="_depositMethodsSection_1jldi"] [class*="_paymentMethodItem_1jldi"]:has(img[src$="/master-card.svg"], img[src$="/apple-pay.svg"], img[src$="/g-pay.svg"], img[src$="/visa.svg"]) { display: none; }
html [class*="_depositsMethodsContainer_16cad"] img:is([alt="mastercard"], [alt="apple"], [alt="google"], [alt="visa"]) { display: none !important; }

/* --- Wallet window in packy.gg's layout (owner, 31 October 2026). rebrand/build-map.mjs gives the deposit and withdraw
   tabs two parts each: a left panel (the chosen coin's address and QR, or the withdraw form; a picture until a coin is
   picked) and the coins as a grid of tiles on the right under the tabs; the Rewards promo box and the app's bonus cards
   sit under the coins. The art is Codex's wallet-v1 (rebrand/assets/import.mjs VERBATIM, under assets/sweetdrop/wallet/
   and assets/images/wallet/). ------------------------------------------------------------------------------------ */
html [class*="_container_823w6"] {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "side head" "side main" "side extra"; gap: 16px 20px; width: 880px;
}
html [class*="_container_823w6"] > [class*="_header_1h49j"] { grid-area: head; }
html :is([class*="_content_823w6"], [class*="_root_1ousm"], [class*="_root_6vgp1"]) { display: contents; }
html :is([class*="_empty_1ousm"], [class*="_empty_6vgp1"]) { grid-area: main; }
html .sd-walletSide { grid-area: side; display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 16px; overflow-y: auto; border-radius: 12px; background: #1A161A; }
html .sd-walletArt { background: #2A1426 url(/assets/sweetdrop/wallet/side.webp) center / cover no-repeat; }
html .sd-walletMain { grid-area: main; min-height: 0; overflow-y: auto; }
html .sd-walletExtra { grid-area: extra; display: flex; flex-direction: column; gap: 10px; }
html .sd-walletExtra:empty { display: none; }
html .sd-walletCoin { display: flex; align-items: center; gap: 8px; color: #F2F0F1; font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
html .sd-walletCoinIcon { width: 22px; height: 22px; flex: none; }
html .sd-walletCoin .sd-coinSwap { position: relative; width: 40px; height: 40px; margin: -6px 0 -6px -6px; }
html .sd-coinSwap canvas { display: block; width: 100%; height: 100%; }
html .sd-coinSwapFallback { position: absolute; inset: 9px; width: 22px; height: 22px; }

/* Smooth changes: the panel's content glides in when the player picks a coin (it is keyed by the coin), the picture and
   the coin grid fade in with each tab, and the tiles ease their highlight; the badge's flip is the Rive file
   (sweetdrop-coin-swap.js). */
@keyframes sd-wallet-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sd-wallet-fade { from { opacity: 0; } }
html .sd-walletSideBody { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; }
html .sd-walletSideBody > * { animation: sd-wallet-rise .42s cubic-bezier(.2, .8, .2, 1) both; }
html .sd-walletSideBody > :nth-child(2) { animation-delay: .05s; }
html .sd-walletSideBody > :nth-child(3) { animation-delay: .1s; }
html .sd-walletSideBody > :nth-child(n+4) { animation-delay: .14s; }
html .sd-walletCoinName { animation: sd-wallet-rise .32s cubic-bezier(.2, .8, .2, 1) both; }
html :is(.sd-walletArt, .sd-walletMain) { animation: sd-wallet-fade .35s ease both; }
html .sd-coinTile { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
html .sd-coinTile:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  html :is(.sd-walletSideBody > *, .sd-walletCoinName, .sd-walletArt, .sd-walletMain) { animation: none; }
  html .sd-coinTile:active { transform: none; }
}

/* Tabs: two full-width buttons, the chosen one pink. */
html [class*="_header_1h49j"] { gap: 12px; }
html [class*="_header_1h49j"] [class*="_icon_1h49j"] { position: static; flex: none; }
html [class*="_tabsRoot_1h49j"] { flex: 1; max-width: none; }
html [class*="_tabs_1h49j"] { width: 100%; height: 40px; padding: 0; gap: 8px; border: 0; background: none; }
html [class*="_tabs_1h49j"] [class*="_tab_1h49j"] { min-height: 40px; border-radius: 8px; background: #2C252B; color: #AFA6AC; font-size: 14px; font-weight: 700 !important; text-transform: none; }
html [class*="_tabs_1h49j"] [class*="_tab_1h49j"]:hover { color: #F2F0F1; }
html [class*="_tabs_1h49j"] [class*="_tab_1h49j"][data-state="active"] { background: none; color: #23061A; }
html [class*="_tabs_1h49j"] [class*="_indicator_1h49j"] { top: 0; bottom: 0; left: 0; width: calc((100% - 8px) / 2); border-radius: 8px; background: #FF4F9A; box-shadow: none; }
html [class*="_tabs_1h49j"] [class*="_tab_1h49j"]:nth-child(2)[data-state="active"] ~ [class*="_indicator_1h49j"] { transform: translate(calc(100% + 8px)); }

/* The coin grid. */
html .sd-coinPicker { display: flex; flex-direction: column; gap: 10px; }
html .sd-coinPickerLabel { color: #F2F0F1; font-size: 13px; font-weight: 700; }
html .sd-coinGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html .sd-coinTile { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 10px; border: 1px solid #3A3139; border-radius: 10px; background: #2C252B; color: #F2F0F1; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
html .sd-coinTile:hover { background: #3A3139; }
html .sd-coinTile[aria-pressed="true"] { border-color: #E9D9E3; background: #3A3139; box-shadow: 0 0 0 1px #E9D9E3; }
html .sd-coinTileIcon { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .07); }
html .sd-coinTileIcon > svg:first-child { width: 22px; height: 22px; }
html .sd-coinTileNet { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #2C252B; }
html .sd-coinTileText { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
html .sd-coinTileName { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html .sd-coinTileSub { color: #AFA6AC; font-size: 11px; font-weight: 600; }

/* Deposit panel: QR on a white card, the address under a small label with a pink Copy button, the minimum as an amber note. */
html [class*="_qrPanel_1ousm"] { flex: none; padding: 0; background: none; }
html [class*="_qrPanel_1ousm"]::before { display: none; }
html [class*="_qrPanel_1ousm"] > :first-child { display: block; padding: 12px; border-radius: 12px; background: #FFF; line-height: 0; }
html [class*="_qrPanel_1ousm"] .react-loading-skeleton { --base-color: #ECE6EA !important; --highlight-color: #FFF !important; }
html [class*="_qrPanel_1ousm"] > svg path[fill="#f2f0f1"] { fill: #121012; }
html [class*="_addressGroup_1ousm"] { flex: none; gap: 12px; }
html [class*="_copyRow_1ousm"] { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0; border-radius: 0; background: none; }
html [class*="_copyRowLabel_1ousm"] { color: #AFA6AC; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html [class*="_copyRowLabel_1ousm"] svg, html [class*="_copyRowDivider_1ousm"] { display: none; }
html :is([class*="_copyRowValue_1ousm"], [class*="_copyRowSkeleton_1ousm"]) { display: block; grid-area: 2 / 1; height: 46px; padding: 0 92px 0 12px; border: 1px solid #302930; border-radius: 10px; background: #121012; font-size: 13px; line-height: 44px; }
html [class*="_copyButton_1ousm"] { grid-area: 2 / 1; justify-self: end; gap: 6px; height: 32px; margin-right: 7px; padding: 0 12px; border-radius: 7px; background: #FF4F9A; color: #23061A; font-size: 13px; font-weight: 700; }
html [class*="_copyButton_1ousm"]:hover:not(:disabled) { background: #FF6BAA; color: #23061A; }
html [class*="_copyButton_1ousm"] svg { width: 14px; height: 14px; }
html [class*="_copyButton_1ousm"]::after { content: attr(aria-label); }
html [class*="_minNote_1ousm"] { position: relative; margin: 0; padding: 11px 12px 11px 38px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 8px; background: rgba(242, 193, 78, .08); color: #F5E3B8; font-size: 13px; font-weight: 600; text-align: left; }
html [class*="_minNote_1ousm"]::before { content: "i"; position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid #F2C14E; border-radius: 50%; box-sizing: border-box; color: #F2C14E; font: 700 10px/13px system-ui, sans-serif; text-align: center; }

/* Withdraw panel: the form, balances and submit stacked in the left panel (the market banner stays on the Market page). */
html .sd-walletSide [class*="_panel_6vgp1"] { flex: none; flex-direction: column; gap: 16px; padding: 0; background: none; }
html .sd-walletSide [class*="_panel_6vgp1"]::before { display: none; }
html .sd-walletSide [class*="_formColumn_6vgp1"] { padding: 0; }
html .sd-walletSide [class*="_summaryColumn_6vgp1"] { padding: 0; border-radius: 0; background: none; backdrop-filter: none; }
html .sd-walletSide :is([class*="_marketBanner_6vgp1"], [class*="_marketBannerMobile_6vgp1"], [class*="_dotsHandle_6vgp1"]) { display: none; }
html .sd-walletSide [class*="_resultBar_6vgp1"] { margin-top: auto; padding: 0; background: none; box-shadow: none; }

/* Promo box (the Rewards page's own) and the bonus cards as slim strips under the coins. */
html .sd-walletExtra [class*="_promoCodeSection_uct1y"] { display: flex; flex-direction: row; align-items: center; gap: 16px; height: auto; min-height: 0; margin: 0; padding: 10px 12px; border-radius: 12px; background: #221D21 url(/assets/sweetdrop/wallet/promo-bg.webp) left center / cover no-repeat; box-shadow: none; }
html .sd-walletExtra [class*="_promoCodeSection_uct1y"]::before { display: none; }
html .sd-walletExtra [class*="_promoCodeSection_uct1y"] > [class*="_halloweenDecor"] { display: none; }
html .sd-walletExtra [class*="_sectionHeader_uct1y"] { flex: 1; min-width: 0; margin: 0; padding: 0; }
html .sd-walletExtra [class*="_ticketDecor_uct1y"] { display: none; }
html .sd-walletExtra [class*="_promoCodeImgWrapper_uct1y"] { width: 44px; height: 44px; padding: 0; border: 0; background: none; box-shadow: none; }
html .sd-walletExtra img[class*="_promoCodeImg_uct1y"] { width: 44px; height: 44px; background: url(/assets/sweetdrop/wallet/promo-icon.png) center / contain no-repeat; }
html .sd-walletExtra [class*="_sectionTitle_uct1y"] { font-size: 14px; line-height: 1.25; }
html .sd-walletExtra [class*="_promoCodeWrapper_uct1y"] { flex: 0 1 280px; margin: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; }
html .sd-walletExtra [class*="_promoCodeInputWrapper_uct1y"] { min-height: 44px; padding: 3px 3px 3px 12px; }
html .sd-walletExtra [class*="_promoCodeInputBtn_uct1y"] { height: 36px; border: 0; background: #FF4F9A; color: #23061A; }
html .sd-walletExtra [class*="_row_5upn8"] { gap: 10px; }
html .sd-walletExtra [class*="_card_5upn8"] { padding: 10px 12px; background: #221D21 url(/assets/sweetdrop/wallet/bonus-bg.webp) left center / cover no-repeat; }
html .sd-walletExtra [class*="_card_5upn8"]:hover { background: #221D21 url(/assets/sweetdrop/wallet/bonus-bg.webp) left center / cover no-repeat; filter: brightness(1.08); }

@media (max-width: 767px) {
  html [class*="_container_823w6"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "main" "side" "extra"; width: calc(100vw - 32px); }
  html .sd-walletArt { display: none; }
  html .sd-walletSide, html .sd-walletMain { overflow: visible; }
  html .sd-coinGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .sd-walletExtra [class*="_promoCodeSection_uct1y"] { flex-direction: column; align-items: stretch; }
  html .sd-walletExtra [class*="_promoCodeWrapper_uct1y"] { flex: none; }
}

/* === QA follow-up (independent review of the evening fixes, 28 October 2026) ======================================== */
/* Market: the collection tiles share the column instead of running past it; the toolbar band is drawn as a panel; the
   price fields focus like the other fields; Reset filter matches the chips; no light edge around the tiles' bottom bar */
@media (min-width: 1024px) {
  html [class*="_collectionGrid_1v0r8"] { gap: 8px; }
  html [class*="_collectionGrid_1v0r8"] [class*="_banner_n408g"] { flex: 1 1 0; min-width: 0; }
  html [class*="_layout_1sqn8"]::before { align-self: stretch; }
  html [class*="_layout_1sqn8"] > aside > [class*="_resetSelectionBar_1mqj5"] button { height: 38px; border-radius: 999px; }
}
html [class*="_priceInput_62us6"]:focus-within { position: relative; z-index: 1; box-shadow: 0 0 0 3px #FF4F9A29; }
html [class*="_banner_n408g"] [class*="_bottomBar_n408g"] { left: 0; right: 0; bottom: 0; border-radius: 0 0 12px 12px; }

/* Pack page side panel: product names get their own line above the price, and the Recent list fades at the bottom */
@media (min-width: 1920px) {
  html [class*="_unboxingWrapper_547k5"] [class*="_front_1owb4"] {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center; justify-content: stretch;
  }
  html [class*="_unboxingWrapper_547k5"] [class*="_imageStage_1owb4"] { grid-row: 1 / 3; }
  html [class*="_unboxingWrapper_547k5"] [class*="_pricePill_1owb4"] { justify-self: start; }
  html [class*="_unboxingWrapper_547k5"] [class*="_columnContentRecent_547k5"] { overscroll-behavior: contain; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
}

/* Race: places and prizes fit a phone (the Opened column, $0 for open places, makes room); the claim box glows pink, not
   LuxDrop green; the page backdrop fades into the page instead of ending in a hard line */
@media (max-width: 767px) {
  html [class*="_raceTableContainer_16eyw"] [class*="_raceHeader_16eyw"], html [class*="_raceTableContainer_16eyw"] [class*="_raceList_16eyw"] { min-width: 0; }
  html [class*="_raceHeader_16eyw"] [class*="_openedColumn_16eyw"], html [class*="_raceItem_16eyw"] [class*="_opened_16eyw"] { display: none; }
}
html [class*="_rewardContainer_fx7z1"] { background: linear-gradient(253deg, #FF4F9A33 19.24%, #0000 46.63%), #4A414980 !important; }
html [class*="_notificationBadge_fx7z1"] { background: linear-gradient(104deg, #FF8CBE, #FF4F9A) !important; }
html [class*="_raceWrapper_zis3q"]::before { -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }

/* LuxDrop green left on signed-in pages: the balance menu (chevron, open state, selected row), Deals Highlights prices,
   battle highlights' unpacked values and the deposit banner button's own background */
html { --chevron-color: #FF8CBE; }
html [class*="_chevron_5tase"] { color: #FF8CBE !important; }
html [class*="_balanceOpen_1de7p"] { background-image: linear-gradient(#FF4F9A1F, #FF4F9A1F) !important; }
html [class*="_rowRegular_5tase"] { background-color: #FF4F9A33 !important; }
html [class*="_rowIcon_5tase"], html [class*="_radio_5tase"] { color: #FF8CBE !important; border-color: #FF8CBE !important; }
html [class*="_radio_5tase"]::after { background-color: #FF8CBE !important; }
html [class*="_priceBlock_vdhuq"], html [class*="_profit_vdhuq"] { color: #FF8CBE !important; }
html [class*="_caseBattleStatsCurrency_fdju4"] { color: #F2C14E !important; }
html [class*="_btn_16cad"] { background-image: none !important; }

/* Sign-up window on phones: the offer card in plum and pink like the desktop panel (it was LuxDrop green); field frames a
   step stronger; disabled buttons stay findable */
html [class*="_mobileOfferCard_v3k28"] { background: radial-gradient(120% 140% at 0% 0%, #FF4F9A3D, transparent 65%), linear-gradient(90deg, #2B2029, #1A161A) !important; box-shadow: inset 0 0 0 1px #FF4F9A59, 0 4px 4px #1A161A26 !important; }
html [class*="_field_13hkp"] { border-color: #4A424A; }
html [class*="_button_x732d"]:is(:disabled, [aria-disabled="true"]) { color: #8A7F88 !important; background: #221D21 !important; box-shadow: inset 0 0 0 1px #3A333A !important; }

/* Home: a side gutter for the two card sections on laptops (the cards touched the window edges), equal illustration
   heights in the step cards, no orphan divider beside 18+ in the footer, and the signed-in deposit title on one line */
@media (min-width: 1025px) and (max-width: 1440px) {
  html [class*="_howItWorksSection_ter9t"], html [class*="_rewardsSystemSection_1jshv"] { padding-inline: 20px !important; }
}
html [class*="_stepVideo_ter9t"] { height: 200px !important; width: 100% !important; aspect-ratio: auto !important; }
html [class*="_footerAgeWrapper"] { border-right: 0 !important; padding-right: 0 !important; }
html [class*="_depositsMethodsContainer_16cad"] [class*="_title_16cad"] { white-space: nowrap; line-height: 1.15 !important; margin-top: 0 !important; }

/* Home (signed in): Deals Highlights and Battle highlights list only what is played here (app/live-events.mjs);
   while there is nothing yet, the heading isn't left standing alone. */
html [class*="_wrapper_moz6o"]:has(> [class*="_grid_moz6o"]:empty),
html [class*="_root_9gy06"]:has(> [class*="_list_9gy06"]:empty) { display: none; }

/* Landing "Deposit with crypto" strip (from 1553px, where the app draws the coin picture; below that it shows stars):
   in the 1280px column the banner is narrower than the picture, so "cover, top left" cut off the right coin cluster.
   Each end now shows its own cluster, joined in the plum middle. */
@media (min-width: 1553px) {
  html [class*="_depositsMethodsContainer_16cad"]::before { background-size: auto 100%; background-position: left center; }
  html [class*="_depositsMethodsContainer_16cad"]::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url(/assets/landing/deposit-banner/bg.webp) right center / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 62%); mask-image: linear-gradient(90deg, transparent 50%, #000 62%);
  }
}

/* Same banner (owner, 28 October 2026): two currencies on each side of the Deposit block, as the app already does from
   1024 to 1552px; above that it put all four on the right, over the coin cluster. */
@media (min-width: 1553px) {
  html [class*="_sectionSecondLeft_16cad"] [class*="_content_16cad"] { display: grid; grid-template-columns: repeat(2, auto); gap: 32px; }
  html [class*="_sectionSecondRight_16cad"] { grid-template-columns: repeat(2, auto); }
  html [class*="_sectionSecondRight_16cad"] img:nth-child(-n+4) { display: none; }
}

/* === The page after sign-up and email verification (/sign-in-bonus) =============================================
   LuxDrop marked every finished step in its own green (#3fd68f) and swapped its header emblem for a green one; here the
   pink emblem stays and "finished" is SweetDrop's pink. */
html [class*="_emblemGreen_5bl6x"], html [class*="_bgGreen_5bl6x"], html [class*="_bgGreen_1hg2c"] { display: none; }
html [class*="_completed_w8wkx"] { background: linear-gradient(90deg, #FF6AA900 67.29%, #FF6AA9 98.13%), #FF4F9A; }
html [class*="_completedFull_w8wkx"], html [class*="_stepFinished_w8wkx"], html [class*="_plusBtn_18wm8"], html [class*="_fill_18wm8"],
html [class*="_progressFill_ff7lb"], html [class*="_tile_ditq3"][class*="_completed_ditq3"] [class*="_icon_ditq3"] { background: #FF4F9A; }
html [class*="_labelFinished_w8wkx"], html [class*="_text_18wm8"], html [class*="_description_18wm8"] [class*="_green_18wm8"],
html [class*="_boxOpenCompleted_kfvfi"] [class*="_currentCount_kfvfi"],
html [class*="_tile_ditq3"][class*="_completed_ditq3"] [class*="_tileText_ditq3"], html [class*="_tile_ditq3"][class*="_completed_ditq3"] [class*="_current_ditq3"] { color: #FF4F9A; }
html [class*="_boxOpened_kfvfi"][class*="_boxOpenCompleted_kfvfi"] { background: #FF4F9A0D; color: #FF4F9A80; }
html [class*="_green_oqpu9"] { background: radial-gradient(44% 166% at 50% 151%, #F2F0F1, #FFB3D2, #FF4F9A 20%, #D62A74BF, #8A1B4B80, #45102640, #0000); }
/* The header emblem is a backdrop: in full pink it cut through the greeting and "Congratulations". */
html [class*="_headerSection_5bl6x"] img[class*="_emblem_5bl6x"] { opacity: .14; }
/* Step 2 ("Unlock prizes", PostAuthPage): the same pink emblem instead of the green one, and the finished step pills in
   pink instead of LuxDrop's green gradient. */
html [class*="_emblemGreen_1hg2c"] { display: none; }
html img[class*="_emblem_1hg2c"]:not([class*="_emblemGreen_"]) { opacity: .14 !important; }
html [class*="_pill_1l1l6"][class*="_completed_1l1l6"] { --fill-color: rgba(214, 42, 116, .55) !important; }
html [class*="_pill_1l1l6"][class*="_completed_1l1l6"] [class*="_number_1l1l6"], html [class*="_pill_1l1l6"][class*="_completed_1l1l6"] [class*="_label_1l1l6"] { color: #FFB3D2 !important; }
html [class*="_button_nk8rw"][class*="_green_nk8rw"] { background-image: linear-gradient(113deg, #E2357E, #FF4F9A 30%, #FF8CBE 60%, #E2357E) !important; color: #23061A !important; }

/* --- Transactions: a txHash that links to the chain's explorer (rebrand/build-map.mjs, COPY_CELL) */
html a[class*="_hashCellValue_"] { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 79, 154, .55); text-underline-offset: 3px; }
html a[class*="_hashCellValue_"]:hover { color: #FF8CBE; }

/* --- Language suggestion on phones: LuxDrop turns the dropdown into a static block under 600 px but leaves its desktop
   `top: 100%`, which pushed the language list some 600 px below the button, out of the 400 px window ("Switch to…" then
   showed nothing). The list now sits right under the button and the window may grow to fit it. */
@media (max-width: 600px) {
  html [class*="_dropdown_fsxlv"] { top: auto !important; }
  html [class*="_modal_fsxlv"] { max-height: min(85vh, 640px) !important; }
}

/* --- VIP page status card: the wager left to the next tier under the progress bar (rebrand/build-map.mjs, PROGRAM);
   the corner crystal is gone from this card (owner, 30 October 2026) */
html .sd-vip-left { margin: 10px 0 0; color: #F2F0F1; font-size: 14px; font-weight: 600; line-height: 1.4; }

/* --- Home banners whole, never cropped (owner, 31 October 2026): LuxDrop's slide is 315 px tall with the picture
   covering it, and from 1023 to 1599 px and on phones it swaps in narrower cuts, so the right of the picture was lost.
   Now always the full picture at its own 3:1, the slide's height following its width. */
html [class*="_carousel_5rtfz"] { height: auto !important; }
html [class*="_slide_5rtfz"] { background-image: var(--image-default) !important; background-size: contain !important; background-position: center !important; aspect-ratio: 2835 / 945; height: auto !important; }