/* Shared storefront chrome — sf-7
   Landing / marketing plus mobile layout order (gap, wrap, alignment).
   Never override Contractor --chrome-top / --chrome-bottom (game iframe).
   Colors and brand stay with each app. */

.sf-install-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  min-height: 40px;
  padding: 7px 14px;
  background: rgba(8, 6, 14, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f6f3fb;
  text-align: center;
  position: relative;
  z-index: 120;
}
.sf-install-top.is-away,
.sf-install-top[hidden] { display: none; }
.sf-install-top__label {
  margin: 0;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.2;
  opacity: 0.82;
}
.sf-install-top__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.sf-install-top__hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 11px;
  opacity: 0.7;
}

/* In-app shells: no install strip, no --chrome-top rewrite. */
html[data-chrome="match"] .sf-install-top,
html.is-room .sf-install-top,
html.is-live-room .sf-install-top,
html[data-game] .sf-install-top,
html:has(.reload-in-room) .sf-install-top,
body.reload-in-room .sf-install-top,
body.is-room .sf-install-top,
body.is-live-room .sf-install-top {
  display: none !important;
}

/* Landing only: sit the fixed header under the in-flow install strip.
   Must not win over Contractor html[data-chrome=match] --chrome-top (104/156). */
html.has-sf-install:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.fixed.site-header,
html.has-sf-install:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.fixed.glass,
html:has(.sf-install-top:not([hidden]):not(.is-away)):not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.fixed.site-header,
html:has(.sf-install-top:not([hidden]):not(.is-away)):not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.fixed.glass {
  top: var(--sf-install-h, 40px) !important;
}
html.has-sf-install:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)),
html:has(.sf-install-top:not([hidden]):not(.is-away)):not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) {
  --chrome-top: calc(56px + var(--sf-install-h, 40px));
}

/* Dark landing headers stay readable over scrolled content.
   Do not use backdrop-filter/filter/transform on the header: those make
   it the containing block for position:fixed children, so the mobile
   drawer (Flex / Reload / Contractor) is trapped in the 60px bar and
   composites over the hero video. An opaque bar is enough. */
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.glass,
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header.glass {
  background: rgba(8, 10, 12, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile nav drawer must cover the viewport, not the header box. */
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-drawer {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 240 !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-drawer-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
}
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-drawer-panel {
  background: #101114 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Compact lockups in dark landing headers — Winoverwin-sized on the phone. */
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left,
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand,
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left a {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left a,
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand img,
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: plus-lighter;
}
html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-actions {
  flex: 0 0 auto !important;
}
@media (max-width: 1023px) {
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-nav { display: none !important; }
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-actions .online-chip,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header .online-chip { display: none !important; }
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-inner,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-actions {
    align-items: center !important;
  }
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-actions { gap: 0.35rem !important; }
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left svg,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left img,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand svg,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand img,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.site-header .site-header-left svg,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header.glass .site-header-left svg {
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    max-width: min(38vw, 132px) !important;
  }
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) header .chrome-inner {
    flex-wrap: nowrap !important;
  }
}
@media (min-width: 1024px) {
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left svg,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-left img,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand svg,
  html:not([data-chrome="match"]):not(.is-room):not(.is-live-room):not([data-game]):not(:has(.reload-in-room)) .site-header-brand img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: min(36vw, 220px) !important;
  }
}

/* Meirl / Maker family — no header plate; lockup sits on the page wash. */
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) body {
  padding-top: 0 !important;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .shell:not(.shell-fill) {
  padding-top: 14px !important;
  background: transparent !important;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar,
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .shell:not(.shell-fill) > .topbar,
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .shell-wide:not(.shell-fill) > .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 8;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 4px 0 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar::before,
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .brand,
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar .brand-lockup-img {
  background: transparent !important;
  box-shadow: none !important;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}
html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar .brand-lockup-img {
  height: 44px !important;
  width: auto !important;
  max-width: min(72vw, 440px) !important;
  object-fit: contain;
}
@media (max-width: 767px) {
  html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .shell:not(.shell-fill) {
    padding-top: 10px !important;
  }
  html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar {
    gap: 8px;
    margin-bottom: 6px !important;
    padding: 2px 0 8px !important;
  }
  html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar-actions { gap: 8px; }
  html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar .brand-lockup-img {
    height: 38px !important;
    max-width: min(62vw, 280px) !important;
  }
}
@media (max-width: 479px) {
  html:not(.is-room):not(.is-live-room):not([data-chrome="match"]):not([data-game]) .topbar .brand-lockup-img {
    height: 34px !important;
    max-width: min(58vw, 220px) !important;
  }
}

/* sf-6: Flex / Reload hamburger lives INSIDE header.site-header.glass.
   .glass uses backdrop-filter + a translucent gradient, which (1) makes
   the header the containing block for position:fixed and (2) lets the
   hero video show through the open menu. These rules do not use :has()
   so they cannot be dropped. Room chrome is .room-topbar, not these. */
html:not([data-chrome="match"]):not([data-game]) header.site-header.glass,
html:not([data-chrome="match"]):not([data-game]) header.site-header {
  background: rgba(8, 10, 12, 0.96) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
  isolation: auto !important;
}
html:not([data-chrome="match"]):not([data-game]) header.site-header .site-header-drawer,
html:not([data-chrome="match"]):not([data-game]) .site-header-drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 400 !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}
html:not([data-chrome="match"]):not([data-game]) .site-header-drawer-backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
}
html:not([data-chrome="match"]):not([data-game]) header.site-header .site-header-drawer-panel,
html:not([data-chrome="match"]):not([data-game]) .site-header-drawer-panel {
  background: #101114 !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* sf-7 — mobile order, spacing, alignment. Layout only. No color restyle.
   Room topbar stays ONE compact row (share must NOT force a full-width 2nd row
   that inflates --reload-chrome-h and clips the PNM pre-join card). */
@media (max-width: 767px) {
  .room-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    row-gap: 0 !important;
  }
  .room-topbar-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .room-action-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .room-action-group .room-action-btn,
  .room-topbar-actions > .room-action-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 2.25rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
  }
  .room-action-group [data-reload-share],
  .room-topbar-actions > [data-reload-share] {
    flex: 0 1 auto !important;
    order: 0 !important;
    width: auto !important;
  }
  .room-topbar-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
  }
  .action-overlay .flex,
  .action-overlay > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .action-overlay .btn {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: 0 !important;
  }

  .site-header-actions,
  .topbar-actions,
  .chat-head-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
  }

  .composer {
    align-items: flex-end !important;
    gap: 6px !important;
    max-width: 100% !important;
  }
  .composer-pill {
    overflow: visible !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .composer-pill textarea {
    min-width: 72px !important;
  }
  .video-dock,
  .dock-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  [role="toolbar"].flex.w-full {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
  }
  [role="toolbar"].absolute.right-2 {
    bottom: 10.75rem !important;
  }
  form.flex.min-w-0.items-center.gap-2 {
    width: 100% !important;
    max-width: 100% !important;
  }
  form.sticky.bottom-16 {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  form.sticky.bottom-16 .grid.grid-cols-3 {
    gap: 0.5rem !important;
  }
  form.sticky.bottom-16 .grid.grid-cols-3 > * {
    min-width: 0 !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-chrome="match"] nav.glass .chrome-inner > .flex,
  html[data-chrome="match"] nav.fixed .chrome-inner > .flex {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
  }
  html[data-chrome="match"] nav.glass .chrome-inner button.tap,
  html[data-chrome="match"] nav.fixed .chrome-inner button.tap {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .room-topbar-right .online-chip,
  .room-topbar-right .room-presence {
    display: none !important;
  }
  .room-action-group .room-action-btn,
  .room-topbar-actions > .room-action-btn {
    flex: 0 1 auto !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.72rem !important;
  }
}

html.is-keyboard .tb-glass-nav,
html.is-keyboard nav.tb-glass-nav {
  display: none !important;
}
html.is-keyboard .composer {
  padding-bottom: 8px !important;
}
html.is-keyboard form.sticky.bottom-16 {
  bottom: 0.5rem !important;
}

/* ── sf-21 premium selects + drawers (brand tokens) ───────────────────── */
:root {
  --sf-c1: #7c3aed;
  --sf-c2: #ec4899;
  --sf-ink: #07080a;
  --sf-panel: #12141a;
  --sf-text: #f6f3fb;
  --sf-muted: rgba(246, 243, 251, 0.68);
  --sf-stroke: rgba(255, 255, 255, 0.12);
}
html[data-sf-app="meirl"] { --sf-c1: #c8b6ff; --sf-c2: #6d28d9; }
html[data-sf-app="maker"] { --sf-c1: #e14bff; --sf-c2: #ff2d95; }
html[data-sf-app="badly"] { --sf-c1: #ff1a2e; --sf-c2: #ffffff; }
html[data-sf-app="curly"] { --sf-c1: #00d4ff; --sf-c2: #ff2d95; }
html[data-sf-app="purple"] { --sf-c1: #8a2bff; --sf-c2: #e14bff; }
html[data-sf-app="thumblr"] { --sf-c1: #7c3aed; --sf-c2: #ec4899; }
html[data-sf-app="4heures"] { --sf-c1: #ffe600; --sf-c2: #111111; }
html[data-sf-app="underrated"] { --sf-c1: #8a2bff; --sf-c2: #ffffff; }
html[data-sf-app="winoverwin"] { --sf-c1: #c8ff00; --sf-c2: #2d4bff; }
html[data-sf-app="reggit"] { --sf-c1: #ff1a2e; --sf-c2: #111111; }
html[data-sf-app="reload"] { --sf-c1: #ccff00; --sf-c2: #d8ff3d; }
html[data-sf-app="flex"] { --sf-c1: #2d4bff; --sf-c2: #ffe600; }
html[data-sf-app="novel"] { --sf-c1: #ff2d95; --sf-c2: #ffffff; }
html[data-sf-app="xerox"] { --sf-c1: #00d4ff; --sf-c2: #ffffff; }
html[data-sf-app="bubble"] { --sf-c1: #00d4ff; --sf-c2: #e14bff; }
/* Reload family CTAs stay the original lime. Brand color is --sf-c1 only. */
html[data-sf-app="reload"],
html[data-sf-app="flex"],
html[data-sf-app="novel"],
html[data-sf-app="xerox"],
html[data-sf-app="bubble"] {
  --lime: #ccff00;
  --lime-hot: #d8ff3d;
  --color-lime: #ccff00;
  --color-lime-hot: #d8ff3d;
}
html[data-sf-app="contractor"] { --sf-c1: #7dffb3; --sf-c2: #c8ff00; }
html[data-sf-app="timpie"] { --sf-c1: #ffe600; --sf-c2: #ff1a2e; }
html[data-sf-app="melter"] { --sf-c1: #ff1a2e; --sf-c2: #8a2bff; }
html[data-sf-app="toudoum"] { --sf-c1: #c8ff00; --sf-c2: #111111; }
html[data-sf-app="nexxt"] { --sf-c1: #2d4bff; --sf-c2: #ffffff; }
html[data-sf-app="tdlr"] { --sf-c1: #7e2fd4; --sf-c2: #c8b6ff; }

.sf-install-top__btn {
  background: var(--sf-c1) !important;
  color: #0b0b0d !important;
}
html[data-sf-app="badly"] .sf-install-top__btn,
html[data-sf-app="4heures"] .sf-install-top__btn,
html[data-sf-app="timpie"] .sf-install-top__btn,
html[data-sf-app="toudoum"] .sf-install-top__btn,
html[data-sf-app="winoverwin"] .sf-install-top__btn,
html[data-sf-app="contractor"] .sf-install-top__btn {
  color: #0b0b0d !important;
}
html[data-sf-app="nexxt"] .sf-install-top__btn,
html[data-sf-app="thumblr"] .sf-install-top__btn,
html[data-sf-app="meirl"] .sf-install-top__btn,
html[data-sf-app="purple"] .sf-install-top__btn,
html[data-sf-app="underrated"] .sf-install-top__btn {
  color: #fff !important;
}
html[data-sf-app="reload"] .sf-install-top__btn,
html[data-sf-app="flex"] .sf-install-top__btn,
html[data-sf-app="novel"] .sf-install-top__btn,
html[data-sf-app="xerox"] .sf-install-top__btn,
html[data-sf-app="bubble"] .sf-install-top__btn {
  background: #ccff00 !important;
  color: #0b0b0d !important;
}
html[data-sf-app="reload"] .sf-install-top__btn:hover,
html[data-sf-app="flex"] .sf-install-top__btn:hover,
html[data-sf-app="novel"] .sf-install-top__btn:hover,
html[data-sf-app="xerox"] .sf-install-top__btn:hover,
html[data-sf-app="bubble"] .sf-install-top__btn:hover {
  background: #d8ff3d !important;
}

/* Native fallback: dark trigger, never white system chrome on the closed field. */
select.field,
select.sf-select-native,
.field select,
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(10, 12, 16, 0.92);
  background-image: linear-gradient(45deg, transparent 50%, var(--sf-c1) 50%),
    linear-gradient(135deg, var(--sf-c1) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--sf-text);
  border: 1px solid var(--sf-stroke);
  border-radius: 14px;
  min-height: 44px;
  padding: 0.65rem 2.1rem 0.65rem 0.95rem;
  color-scheme: dark;
}
select:focus,
select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sf-c1) 70%, white);
  outline-offset: 2px;
}

.sf-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.sf-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  background: none !important;
}
.sf-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 2.4rem 0.7rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--sf-stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(12, 14, 18, 0.92);
  color: var(--sf-text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sf-select__btn::after {
  content: "";
  position: absolute;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sf-c1);
  border-bottom: 2px solid var(--sf-c1);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.sf-select { isolation: isolate; }
.sf-select__btn { position: relative; }
.sf-select.is-open .sf-select__btn {
  border-color: color-mix(in srgb, var(--sf-c1) 70%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-c1) 28%, transparent);
}
.sf-select.is-empty .sf-select__btn { color: var(--sf-muted); }
.sf-select.is-disabled .sf-select__btn { opacity: 0.5; cursor: not-allowed; }
.sf-select__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sf-c1) 80%, white);
  outline-offset: 2px;
}
.sf-select__panel {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(22rem, 70vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--sf-c1) 35%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sf-c1) 10%, #12141a), #101218 40%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.sf-select__panel[hidden] { display: none !important; }
.sf-select__search {
  margin: 10px 10px 6px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--sf-stroke);
  background: rgba(0, 0, 0, 0.35);
  color: var(--sf-text);
  padding: 0 12px;
  font: inherit;
  font-size: 0.9rem;
}
.sf-select__search:focus {
  outline: 2px solid color-mix(in srgb, var(--sf-c1) 70%, white);
}
.sf-select__list {
  overflow: auto;
  padding: 4px 6px 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sf-select__group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-c1);
}
.sf-select__opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--sf-text);
  font: inherit;
  font-size: 0.92rem;
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  min-height: 48px;
  cursor: pointer;
}
.sf-select__flag {
  flex: 0 0 auto;
  min-width: 1.7rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 6px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15rem;
  color: #0b0b0d;
  background: var(--sf-c1);
}
.sf-select__opt-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.sf-select__opt-name { line-height: 1.2; }
.sf-select__opt-meta {
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--sf-muted);
}
.sf-select__opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--sf-c1) 22%, transparent);
  color: #fff;
}
.sf-select__opt[aria-selected="true"] .sf-select__opt-meta { color: rgba(255, 255, 255, 0.78); }
.sf-select__opt.is-active,
.sf-select__opt:hover {
  background: color-mix(in srgb, var(--sf-c1) 14%, rgba(255, 255, 255, 0.04));
}
.sf-select__empty {
  margin: 0;
  padding: 12px;
  color: var(--sf-muted);
  font-size: 0.85rem;
}
@media (max-width: 639px) {
  .sf-select.is-open .sf-select__panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: min(70dvh, 28rem);
    z-index: 420;
  }
}

/* Premium hamburger drawer — lockup, icons, brand edge. No header trap. */
html:not([data-chrome="match"]):not([data-game]) .site-header-drawer-backdrop,
.sf-drawer-backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
}
html:not([data-chrome="match"]):not([data-game]) .site-header-drawer-panel,
html:not([data-chrome="match"]):not([data-game]) header.site-header .site-header-drawer-panel,
.sf-drawer-panel {
  display: flex;
  flex-direction: column;
  width: min(22.5rem, 88vw) !important;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1.15rem + env(safe-area-inset-bottom, 0px)) !important;
  border-left: 1px solid color-mix(in srgb, var(--sf-c1) 48%, rgba(255, 255, 255, 0.12)) !important;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--sf-c1) 22%, transparent), transparent 56%),
    linear-gradient(165deg, color-mix(in srgb, var(--sf-c1) 14%, #12141c) 0%, #0d0f14 48%, #090a0e 100%) !important;
  background-image:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--sf-c1) 22%, transparent), transparent 56%),
    linear-gradient(165deg, color-mix(in srgb, var(--sf-c1) 14%, #12141c) 0%, #0d0f14 48%, #090a0e 100%) !important;
  color: var(--sf-text);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}
.sf-drawer-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--sf-c1) 28%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--sf-c1) 10%, rgba(8, 10, 14, 0.55));
}
.sf-drawer-wordmark {
  display: block;
  height: 28px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
}
.sf-drawer-lockup-copy { min-width: 0; }
.sf-drawer-app {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sf-drawer-tag {
  margin: 0.15rem 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--sf-muted);
}
.site-header-drawer-panel strong,
.sf-drawer-panel strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.site-header-drawer-panel nav a,
.site-header-drawer-panel nav .site-header-link,
.sf-drawer-panel nav a,
.sf-drawer-panel nav button,
.sf-drawer-link {
  border-radius: 16px !important;
  min-height: 50px;
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem !important;
  color: var(--sf-text) !important;
  border: 1px solid transparent;
  font-weight: 550;
}
.sf-drawer-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sf-c1) 18%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-c1) 28%, transparent);
  position: relative;
}
.sf-drawer-ico::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--sf-c1);
  -webkit-mask: var(--sf-ico, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/></svg>")) center / contain no-repeat;
  mask: var(--sf-ico, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/></svg>")) center / contain no-repeat;
}
[data-sf-nav="home"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 11.5 12 4l8 7.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/></svg>"); }
[data-sf-nav="search"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm6.3 9.3 4.4 4.4-1.4 1.4-4.4-4.4z'/></svg>"); }
[data-sf-nav="settings"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10.2 3h3.6l.4 2.2a7 7 0 0 1 1.8.8l2.1-1 1.8 3.1-1.7 1.5a7 7 0 0 1 0 1.8l1.7 1.5-1.8 3.1-2.1-1a7 7 0 0 1-1.8.8L13.8 21h-3.6l-.4-2.2a7 7 0 0 1-1.8-.8l-2.1 1-1.8-3.1 1.7-1.5a7 7 0 0 1 0-1.8L3.1 11l1.8-3.1 2.1 1a7 7 0 0 1 1.8-.8L10.2 3zM12 9.5A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5z'/></svg>"); }
[data-sf-nav="terms"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 3h8l4 4v14H7zM15 3v5h5M9 12h8M9 16h8'/></svg>"); }
[data-sf-nav="privacy"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3 5 6v6c0 5 3.2 8.4 7 9.7C15.8 20.4 19 17 19 12V6z'/></svg>"); }
[data-sf-nav="safety"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2 4 6v6c0 5.2 3.4 9 8 10 4.6-1 8-4.8 8-10V6zM11 7h2v6h-2zm0 8h2v2h-2z'/></svg>"); }
[data-sf-nav="support"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v2a3 3 0 0 0 3 3h1v-6H6a6 6 0 0 1 12 0h-2v6h1a3 3 0 0 0 3-3v-2a8 8 0 0 0-8-8z'/></svg>"); }
[data-sf-nav="login"] .sf-drawer-ico,
[data-sf-nav="signup"] .sf-drawer-ico,
[data-sf-nav="profile"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 10c4.4 0 8 2.2 8 5v1H4v-1c0-2.8 3.6-5 8-5z'/></svg>"); }
[data-sf-nav="play"] .sf-drawer-ico { --sf-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l12-7z'/></svg>"); }
.site-header-drawer-panel nav a:hover,
.sf-drawer-panel nav a:hover,
.sf-drawer-panel nav button:hover,
.sf-drawer-link:hover {
  background: color-mix(in srgb, var(--sf-c1) 16%, rgba(255, 255, 255, 0.04)) !important;
  border-color: color-mix(in srgb, var(--sf-c1) 30%, transparent);
}
.sf-drawer-cta,
.sf-drawer-panel .btn-lime,
.sf-drawer-panel a.btn-lime {
  margin-top: auto;
  min-height: 48px;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--sf-c1) 28%, transparent);
}
.site-header-menu-btn,
.tb-chrome button[aria-controls][aria-expanded] {
  border-color: color-mix(in srgb, var(--sf-c1) 40%, rgba(255, 255, 255, 0.12)) !important;
  background: color-mix(in srgb, var(--sf-c1) 10%, rgba(7, 8, 10, 0.55)) !important;
}
img.sf-wordmark-img {
  display: block;
  height: 2.45rem;
  width: auto;
  max-width: min(220px, 56vw);
  object-fit: contain;
}
@media (min-width: 640px) {
  img.sf-wordmark-img { height: 2.9rem; }
}
.site-header-menu-icon,
.site-header-menu-icon::before,
.site-header-menu-icon::after {
  background: var(--sf-c1) !important;
}

/* Thumblr / marketing drawers that do not use site-header-* classes */
.sf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  border: 0;
  background: rgba(0, 0, 0, 0.58);
}
.sf-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
}

/* Meirl family is a light wash — dark listboxes looked like a black brick. */
html[data-sf-app="meirl"] select.field,
html[data-sf-app="meirl"] select.sf-select-native,
html[data-sf-app="meirl"] select:not([multiple]):not([size]),
html[data-sf-app="maker"] select.field,
html[data-sf-app="maker"] select:not([multiple]):not([size]),
html[data-sf-app="badly"] select.field,
html[data-sf-app="badly"] select:not([multiple]):not([size]),
html[data-sf-app="curly"] select.field,
html[data-sf-app="curly"] select:not([multiple]):not([size]),
html[data-sf-app="purple"] select.field,
html[data-sf-app="purple"] select:not([multiple]):not([size]) {
  background-color: rgba(255, 255, 255, 0.92);
  color: #1b1428;
  border-color: color-mix(in srgb, var(--sf-c1) 38%, #d5cbe4);
  color-scheme: light;
}
html[data-sf-app="meirl"] .sf-select__btn,
html[data-sf-app="maker"] .sf-select__btn,
html[data-sf-app="badly"] .sf-select__btn,
html[data-sf-app="curly"] .sf-select__btn,
html[data-sf-app="purple"] .sf-select__btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 252, 0.96));
  color: #1b1428;
  border-color: color-mix(in srgb, var(--sf-c1) 40%, #d5cbe4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(80, 40, 120, 0.08);
}
html[data-sf-app="meirl"] .sf-select__panel,
html[data-sf-app="maker"] .sf-select__panel,
html[data-sf-app="badly"] .sf-select__panel,
html[data-sf-app="curly"] .sf-select__panel,
html[data-sf-app="purple"] .sf-select__panel {
  background: linear-gradient(180deg, #fff, #f7f2fc);
  border-color: color-mix(in srgb, var(--sf-c1) 36%, #d5cbe4);
  box-shadow: 0 22px 50px rgba(60, 30, 90, 0.16);
  color: #1b1428;
}
html[data-sf-app="meirl"] .sf-select__search,
html[data-sf-app="maker"] .sf-select__search,
html[data-sf-app="badly"] .sf-select__search,
html[data-sf-app="curly"] .sf-select__search,
html[data-sf-app="purple"] .sf-select__search {
  background: #f4eefb;
  color: #1b1428;
  border-color: color-mix(in srgb, var(--sf-c1) 28%, #d5cbe4);
}
html[data-sf-app="meirl"] .sf-select__opt,
html[data-sf-app="maker"] .sf-select__opt,
html[data-sf-app="badly"] .sf-select__opt,
html[data-sf-app="curly"] .sf-select__opt,
html[data-sf-app="purple"] .sf-select__opt {
  color: #1b1428;
}
html[data-sf-app="meirl"] .sf-select__opt[aria-selected="true"],
html[data-sf-app="maker"] .sf-select__opt[aria-selected="true"],
html[data-sf-app="badly"] .sf-select__opt[aria-selected="true"],
html[data-sf-app="curly"] .sf-select__opt[aria-selected="true"],
html[data-sf-app="purple"] .sf-select__opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--sf-c1) 26%, #fff);
  color: #1b1428;
}
html[data-sf-app="meirl"] .sf-select__opt-meta,
html[data-sf-app="maker"] .sf-select__opt-meta,
html[data-sf-app="badly"] .sf-select__opt-meta,
html[data-sf-app="curly"] .sf-select__opt-meta,
html[data-sf-app="purple"] .sf-select__opt-meta,
html[data-sf-app="meirl"] .sf-select__empty,
html[data-sf-app="maker"] .sf-select__empty,
html[data-sf-app="badly"] .sf-select__empty,
html[data-sf-app="curly"] .sf-select__empty,
html[data-sf-app="purple"] .sf-select__empty,
html[data-sf-app="meirl"] .sf-select.is-empty .sf-select__btn,
html[data-sf-app="maker"] .sf-select.is-empty .sf-select__btn,
html[data-sf-app="badly"] .sf-select.is-empty .sf-select__btn,
html[data-sf-app="curly"] .sf-select.is-empty .sf-select__btn,
html[data-sf-app="purple"] .sf-select.is-empty .sf-select__btn {
  color: rgba(27, 20, 40, 0.56);
}