/* Keep profile artwork unfiltered on both desktop and mobile. Text receives a
   local shadow instead of darkening the entire selected background. */
.profile-hero[class*="profile-background-"]::before {
  background: none !important;
}

.profile-hero[class*="profile-background-"] .profile-identity,
.profile-hero[class*="profile-background-"] .profile-level-summary {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .62);
}

.account-menu-avatar {
  display: block;
}

.account-menu-identity {
  min-width: 0;
}

/* Profile and Leaderboard are app pages on mobile; desktop remains modal. */
@media (max-width: 768px) {
  :root { --mobile-app-header-height: calc(74px + env(safe-area-inset-top)); }

  body:has(.profile-modal[open]),
  body:has(.leaderboard-page-modal[open]) { overflow: hidden; }

  body:has(.profile-modal[open]) .topbar,
  body:has(.leaderboard-page-modal[open]) .topbar {
    position: fixed;
    z-index: 995;
    inset: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--mobile-app-header-height);
    margin: 0;
    padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: var(--body-bg);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
  }

  .profile-modal[open],
  .leaderboard-page-modal[open] {
    position: fixed !important;
    z-index: 980 !important;
    inset: var(--mobile-app-header-height) 0 calc(var(--mobile-nav-height, 70px) + env(safe-area-inset-bottom)) 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--body-bg) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .profile-modal::backdrop,
  .leaderboard-page-modal::backdrop { background: transparent; }

  .profile-modal form,
  .leaderboard-page-modal > form {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 0 max(10px, env(safe-area-inset-right)) 20px max(10px, env(safe-area-inset-left)) !important;
  }

  .profile-modal > form > .close-button,
  .leaderboard-page-header .close-button { display: none !important; }

  .profile-tabs-shell {
    top: 0 !important;
    min-height: 58px !important;
    margin: 0 max(-10px, calc(env(safe-area-inset-right) * -1)) 10px max(-10px, calc(env(safe-area-inset-left) * -1)) !important;
    padding: 0 54px 0 8px !important;
    border-radius: 0 !important;
  }

  .profile-tabs-shell::before { content: none !important; }
  .profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 58px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .profile-tabs button {
    min-width: 0 !important;
    padding-inline: 2px !important;
    font-size: clamp(.62rem, 1.65vw, .75rem) !important;
  }

  .profile-menu-toggle:not(.hidden) {
    position: absolute !important;
    z-index: 8 !important;
    top: 8px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: 42px;
    min-height: 42px;
  }

  .profile-back-button:not(.hidden) {
    position: absolute !important;
    z-index: 8 !important;
    top: 8px !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: 42px;
    min-height: 42px;
  }

  .profile-hero,
  .profile-hero:has(.profile-avatar-wrap .profile-hero-souvenirs) {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar identity"
      "avatar level"
      "edit edit"
      "message message"
      "stats stats" !important;
    align-items: start !important;
    gap: 8px 14px !important;
    min-height: 0 !important;
    padding: 14px 14px 0 !important;
    text-align: left !important;
  }

  .profile-avatar-wrap,
  .profile-hero:has(.profile-avatar-wrap .profile-hero-souvenirs) .profile-avatar-wrap {
    grid-area: avatar !important;
    width: 112px !important;
    min-width: 112px !important;
    margin: 0 !important;
  }

  .profile-avatar-portrait {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
  }

  .profile-avatar .profile-preset-image-bust {
    width: 100px !important;
    height: 106px !important;
  }

  .profile-identity,
  .profile-hero:has(.profile-avatar-wrap .profile-hero-souvenirs) .profile-identity {
    grid-area: identity !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    align-self: start !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .profile-name-row {
    align-items: flex-start !important;
    gap: 6px !important;
    order: 2 !important;
  }

  .profile-identity > .profile-kicker { order: 1 !important; }
  .profile-identity > .profile-title-line { order: 3 !important; }
  .profile-identity > .profile-member { order: 4 !important; }
  .profile-identity > .profile-status-line { order: 5 !important; }

  .profile-name-row h2 {
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
  }

  .profile-member {
    position: static !important;
    display: block !important;
    align-self: flex-start !important;
    margin-top: 5px !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .profile-title-line,
  .profile-status-line {
    width: 100% !important;
  }

  .profile-hero-actions {
    display: contents !important;
  }

  .profile-level-summary {
    grid-area: level !important;
    align-self: end !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    padding: 4px 0 2px !important;
  }

  .profile-level-summary strong,
  .profile-level-summary small {
    text-align: left !important;
  }

  .profile-edit-button,
  .profile-inline-edit-actions {
    grid-area: edit !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 138px !important;
    margin: 4px 0 12px !important;
  }

  .profile-edit-button {
    min-height: 40px !important;
    border-color: color-mix(in srgb, var(--accent) 78%, var(--line)) !important;
    background: rgba(9, 12, 18, .72) !important;
    font-size: .74rem !important;
    backdrop-filter: blur(7px);
  }

  .profile-edit-button::after {
    content: none !important;
  }

  .profile-inline-edit-message {
    grid-area: message !important;
  }

  .profile-core-stats {
    grid-area: stats !important;
    margin-top: 0 !important;
  }

  .leaderboard-page-header {
    top: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 70px;
    margin: 0 max(-10px, calc(env(safe-area-inset-right) * -1)) 14px max(-10px, calc(env(safe-area-inset-left) * -1));
    padding: 9px max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left));
    border-radius: 0;
  }

  .profile-menu-backdrop:not(.hidden) {
    inset: var(--mobile-app-header-height) 0 calc(var(--mobile-nav-height, 70px) + env(safe-area-inset-bottom)) 0 !important;
  }

  .profile-menu-panel:not(.hidden) {
    top: var(--mobile-app-header-height) !important;
    right: 0 !important;
    bottom: calc(var(--mobile-nav-height, 70px) + env(safe-area-inset-bottom)) !important;
    border-radius: 14px 0 0 14px;
  }
}

@media (max-width: 420px) {
  .profile-hero,
  .profile-hero:has(.profile-avatar-wrap .profile-hero-souvenirs) {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 7px 10px !important;
    padding-inline: 10px !important;
  }

  .profile-avatar-wrap,
  .profile-hero:has(.profile-avatar-wrap .profile-hero-souvenirs) .profile-avatar-wrap {
    width: 94px !important;
    min-width: 94px !important;
  }

  .profile-avatar-portrait {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
  }

  .profile-avatar .profile-preset-image-bust {
    width: 86px !important;
    height: 90px !important;
  }

  .profile-edit-button,
  .profile-inline-edit-actions {
    min-width: 132px !important;
  }
}

/* The avatar is the single mobile account entry point. */
@media (max-width: 768px) {
  .profile-menu-toggle,
  .profile-menu-backdrop,
  .profile-menu-panel {
    display: none !important;
  }

  .profile-tabs-shell {
    padding-inline: 8px !important;
  }

  .profile-modal form:has(.profile-back-button:not(.hidden)) .profile-tabs-shell {
    padding-left: 54px !important;
  }

  .topbar .profile-icon:not(.hidden) {
    position: relative;
    z-index: 63;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
  }

  .topbar .profile-icon .profile-button-preset {
    display: block;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
    transform: none !important;
  }

  .account-menu.hidden,
  .account-drawer-overlay.hidden {
    display: none !important;
  }

  .account-drawer-overlay:not(.hidden) {
    position: fixed;
    z-index: 60;
    inset: var(--mobile-app-header-height) 0 calc(var(--mobile-nav-height, 70px) + env(safe-area-inset-bottom)) 0;
    display: block !important;
    width: 100%;
    height: calc(100dvh - var(--mobile-app-header-height) - var(--mobile-nav-height, 70px) - env(safe-area-inset-bottom));
    padding: 0;
    border: 0;
    background: rgba(3, 5, 9, .48);
    backdrop-filter: blur(4px) saturate(.8);
  }

  body.account-drawer-open {
    overflow: hidden;
  }

  .account-menu:not(.hidden) {
    position: fixed;
    z-index: 62;
    top: calc(var(--mobile-app-header-height) - 3px);
    right: max(10px, env(safe-area-inset-right));
    display: grid;
    width: min(336px, calc(100vw - 20px));
    max-height: calc(100dvh - var(--mobile-app-header-height) - var(--mobile-nav-height, 70px) - 14px - env(safe-area-inset-bottom));
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
    border-radius: 14px;
    background:
      linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--accent) 13%, transparent) 12px 13px, transparent 13px calc(100% - 13px), color-mix(in srgb, var(--accent) 13%, transparent) calc(100% - 13px) calc(100% - 12px), transparent calc(100% - 12px)),
      radial-gradient(circle at 92% -4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 12rem),
      color-mix(in srgb, var(--panel-strong) 98%, #080b10);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .58),
      0 5px 18px rgba(0, 0, 0, .3),
      inset 0 1px 0 color-mix(in srgb, var(--accent) 28%, transparent);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: mobile-account-menu-in 160ms ease-out both;
  }

  .account-menu:not(.hidden)::before {
    content: "";
    display: block;
    height: 3px;
    margin: -10px -10px 8px;
    background:
      linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--accent) 45%, transparent) 12%,
        var(--accent) 50%,
        color-mix(in srgb, var(--accent) 45%, transparent) 88%,
        transparent);
  }

  .account-menu-header {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 6px 11px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  }

  .account-menu-header::after {
    content: "PLAYER MENU";
    position: absolute;
    right: 10px;
    bottom: 11px;
    color: color-mix(in srgb, var(--muted) 76%, transparent);
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .16em;
  }

  .account-menu-avatar {
    display: block;
    width: 52px;
    height: 52px;
    padding: 2px;
    object-fit: contain;
    image-rendering: pixelated;
    border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    border-radius: 10px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--field-bg)), var(--field-bg));
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--body-bg) 75%, transparent),
      0 4px 12px rgba(0, 0, 0, .26);
  }

  .account-menu-identity {
    min-width: 0;
  }

  .account-menu-name {
    max-width: 100%;
    padding-bottom: 17px;
    color: var(--accent-strong);
    font-size: 1.08rem;
    line-height: 1.05;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  }

  .account-menu-group {
    gap: 5px;
    padding: 9px 4px;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  }

  .account-menu button {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 11px;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--field-bg) 64%, transparent);
    font-size: .88rem;
    letter-spacing: .01em;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
  }

  .account-menu button:hover:not(:disabled),
  .account-menu button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, var(--field-bg));
    color: var(--text);
    outline: none;
    transform: translateX(2px);
  }

  .account-menu-icon {
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent) 8%, var(--field-bg));
    color: var(--accent-strong);
  }

  .account-menu-icon svg {
    width: 17px;
    height: 17px;
  }

  #accountDrawerClose {
    display: none !important;
  }

  .account-appearance {
    margin: 0 4px;
    padding: 10px 6px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--field-bg) 50%, transparent);
  }

  .account-appearance > strong {
    display: block;
    margin: 0 6px 9px;
    color: color-mix(in srgb, var(--accent-strong) 86%, var(--text));
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .account-appearance > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--body-bg) 76%, var(--field-bg));
  }

  .account-appearance button {
    display: block;
    min-height: 34px;
    padding: 0 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: .66rem;
    text-align: center;
    transform: none !important;
  }

  .account-appearance button[aria-pressed="true"] {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, var(--field-bg)), var(--accent-soft));
    color: var(--accent-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  .account-menu-footer {
    padding: 9px 4px 2px;
  }

  .account-menu .account-menu-signout {
    background: transparent;
    color: var(--muted);
  }

  .account-menu .account-menu-signout:hover,
  .account-menu .account-menu-signout:focus-visible {
    border-color: color-mix(in srgb, #e85d5d 48%, var(--line));
    background: color-mix(in srgb, #e85d5d 10%, var(--field-bg));
    color: #f37b7b;
  }

  @keyframes mobile-account-menu-in {
    from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
}

/* Focused mobile search: the field owns the keyboard edge and primary
   navigation stays out of the way until search is closed. */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    transition: transform 160ms ease, opacity 120ms ease, visibility 0s linear 160ms;
  }

  body.mobile-search-active {
    padding-bottom: 0 !important;
  }

  body.mobile-search-active::before {
    content: "";
    position: fixed;
    z-index: 70;
    inset: 0;
    background: rgba(5, 8, 12, .38);
    backdrop-filter: blur(3px);
    pointer-events: none;
  }

  body.mobile-search-active .mobile-bottom-nav {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translate3d(0, 110%, 0) !important;
    pointer-events: none !important;
  }

  body.mobile-search-active .guess-panel {
    position: fixed;
    z-index: 90;
    top: var(--mobile-search-top, auto);
    right: auto;
    bottom: var(--mobile-search-bottom, calc(8px + env(safe-area-inset-bottom)));
    left: 50%;
    box-sizing: border-box;
    width: min(560px, calc(100vw - 24px));
    margin: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--panel-strong) 97%, transparent);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .48), 0 3px 14px rgba(0, 0, 0, .3);
    backdrop-filter: blur(18px);
    transform: translateX(-50%);
  }

  body.mobile-search-active .input-row {
    grid-template-columns: 1fr;
  }

  body.mobile-search-active #guessButton {
    display: none;
  }

  body.mobile-search-active #guessInput {
    min-height: 56px;
    padding: 0 50px 0 15px;
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--field-bg) 98%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  }

  body.mobile-search-active #guessInput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-focus), inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  body.mobile-search-active .clear-search-button {
    display: inline-flex;
    top: 50%;
    right: 11px;
    width: 36px;
    min-height: 36px;
    border-color: color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--muted);
  }

  body.mobile-search-active .suggestions {
    position: absolute;
    top: auto;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(var(--mobile-search-results-height, 34dvh), 280px);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-strong) 99%, transparent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .46), 0 2px 12px rgba(0, 0, 0, .24);
    touch-action: pan-y;
  }

  body.mobile-search-active .suggestion-empty {
    order: -1;
    padding: 12px 15px 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .02em;
  }

  body.mobile-search-active .suggestion-option {
    min-height: 62px;
    padding: 11px 15px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  }

  body.mobile-search-active .suggestion-option:last-child {
    border-bottom: 0;
  }

  body.mobile-search-active .suggestion-title {
    font-size: .94rem;
  }

  body.mobile-search-active .suggestion-detail {
    font-size: .76rem;
  }
}

/* Responsive geometry for the same shared popup component. */
@media (max-width: 768px) {
  .topbar .profile-icon:not(.hidden),
  .topbar .account-menu-trigger.signed-in { width:44px !important; min-width:44px !important; height:44px !important; padding:0 !important; }
  .topbar .profile-icon:not(.hidden) { border:1px solid #a87818 !important; border-radius:7px; }
  .topbar .profile-icon .profile-button-preset { width:38px !important; height:38px !important; }
  .topbar .account-menu-trigger.signed-in { display:grid !important; }
  .account-pixel-popup:not(.hidden):not([hidden]) { top:calc(var(--mobile-app-header-height) - 3px); right:max(12px,env(safe-area-inset-right)); width:min(320px,calc(100% - 24px)); padding:8px 10px 7px; border:1px solid var(--account-panel-border); border-radius:3px; color:var(--account-panel-text); background:linear-gradient(180deg,var(--account-panel-top) 0%,var(--account-panel-bg) 58%,var(--account-panel-bottom) 100%); box-shadow:inset 0 0 0 3px var(--account-panel-pixel),inset 0 0 0 4px color-mix(in srgb,var(--account-panel-border) 12%,transparent),var(--account-panel-shadow); overflow:visible; }
  .account-pixel-popup:not(.hidden):not([hidden])::before { content:""; position:absolute; top:-7px; right:33px; display:block; width:13px; height:13px; margin:0; border-left:1px solid var(--account-panel-border); border-top:1px solid var(--account-panel-border); background:var(--account-panel-top); transform:rotate(45deg); }
  .account-pixel-popup .account-menu-scroll { max-height:calc(100dvh - var(--mobile-app-header-height) - var(--mobile-nav-height,70px) - 12px - env(safe-area-inset-bottom)); }
  .account-pixel-popup .account-menu-header { grid-template-columns:46px minmax(0,1fr); min-height:64px; padding:4px 5px 9px; }
  .account-pixel-popup .account-menu-header::after { content:none; }
  .account-pixel-popup .account-menu-avatar { width:46px; height:46px; padding:0; border-radius:6px; }
  .account-pixel-popup .account-menu-name { max-width:100%; padding-bottom:0; font-size:.86rem; }
  .account-pixel-popup .account-menu-group { gap:1px; padding:4px 2px; }
  .account-pixel-popup button { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; min-height:44px; padding:5px 8px; border:0; border-radius:3px; color:var(--account-panel-text); background:transparent; font-size:.8rem; }
  .account-pixel-popup .account-menu-icon { width:24px; height:24px; border:0; border-radius:0; background:transparent; }
  .account-pixel-popup #accountProfileButton,
  .account-pixel-popup #friendsButton,
  .account-pixel-popup #menuLeaderboardButton,
  .account-pixel-popup #menuStatisticsButton,
  .account-pixel-popup #menuAchievementsButton,
  .account-pixel-popup #accountHelpButton,
  .account-pixel-popup #settingsButton,
  .account-pixel-popup #menuSignOutButton { display:grid !important; }
  .account-pixel-popup .account-appearance { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
  .account-pixel-popup .account-appearance-choices { display:grid; grid-template-columns:1fr; margin-left:27px; padding:2px; border:1px solid var(--account-panel-inner-border); border-radius:3px; background:var(--account-panel-surface); }
  .account-pixel-popup .account-appearance-choices[hidden] { display:none; }
  .account-pixel-popup .account-appearance-choices button { min-height:37px; border-radius:2px; text-align:left; }
  .account-pixel-popup .account-menu-footer { padding:4px 2px 1px; }
  .account-pixel-popup .account-signout-confirm { width:min(258px,calc(100% - 24px)); }
  :root[data-theme="light"] .account-drawer-overlay:not(.hidden) { background:rgba(73,59,36,.28); backdrop-filter:blur(3px) saturate(.82); }
}