:root {
  color-scheme: dark;
  --bg: #05070d;
  --panel: #0c1020;
  --panel-2: #11182d;
  --line: rgba(255, 255, 255, .11);
  --text: #f5f7ff;
  --muted: #929ab6;
  --red: #ff314f;
  --purple: #a855f7;
  --blue: #2f8cff;
  --green: #25f59a;
  --gold: #ffc857;
  --shadow: 0 24px 70px rgba(0, 0, 0, .48);
  --safe-top: max(env(safe-area-inset-top), 20px);
  --safe-bottom: max(env(safe-area-inset-bottom), 16px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Patch 0.52: simplified Comms layout.
   Keep the chat selector compact and reserve the screen for the active thread. */
#view.comms {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 8px 10px 10px !important;
}

#view.comms .comms-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: 150px !important;
  overflow: hidden !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(8, 5, 14, .94), rgba(5, 7, 16, .86)) !important;
  box-shadow: none !important;
}

#view.comms .comms-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 134px !important;
  gap: 8px !important;
  align-items: center !important;
}

#view.comms .comms-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#view.comms .comms-title > span {
  width: 4px !important;
  height: 28px !important;
  min-width: 4px !important;
  border-radius: 999px !important;
}

#view.comms .comms-title h1 {
  margin: 0 !important;
  overflow: hidden !important;
  font-size: clamp(1.45rem, 7vw, 2rem) !important;
  line-height: .95 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-tabs {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 12px !important;
}

#view.comms .comms-tabs button {
  display: grid !important;
  place-items: center !important;
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

#view.comms .comms-search {
  height: 38px !important;
  min-height: 38px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
}

#view.comms .comms-search i {
  width: 18px !important;
  height: 18px !important;
}

#view.comms .comms-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  font-size: 15px !important;
}

#view.comms .comms-friend-dock {
  display: none !important;
}

#view.comms .comms-chat-list {
  display: flex !important;
  gap: 7px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 1px 2px !important;
  scrollbar-width: none !important;
}

#view.comms .comms-chat-list::-webkit-scrollbar {
  display: none !important;
}

#view.comms .comms-chat-item {
  position: relative !important;
  flex: 0 0 min(78vw, 270px) !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border-radius: 12px !important;
  background: rgba(10, 12, 22, .88) !important;
  box-shadow: none !important;
}

#view.comms .comms-chat-item.active {
  background: linear-gradient(135deg, rgba(255, 47, 95, .24), rgba(139, 92, 246, .16)), rgba(10, 12, 22, .94) !important;
  border-color: rgba(255, 47, 95, .8) !important;
  box-shadow: inset 0 -1px 0 rgba(139, 92, 246, .35) !important;
}

#view.comms .comms-chat-item img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

#view.comms .comms-chat-item span {
  min-width: 0 !important;
}

#view.comms .comms-chat-item b,
#view.comms .comms-chat-item em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-chat-item b {
  font-size: .86rem !important;
  line-height: 1.05 !important;
}

#view.comms .comms-chat-item em {
  font-size: .68rem !important;
  font-style: normal !important;
  opacity: .68 !important;
}

#view.comms .comms-chat-item small {
  display: none !important;
}

#view.comms .comms-chat-item > i {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 7px !important;
  height: 7px !important;
}

#view.comms .comms-thread-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(7, 8, 16, .9), rgba(0, 0, 0, .9)) !important;
  box-shadow: none !important;
}

#view.comms .thread-head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(255, 47, 95, .26) !important;
}

#view.comms .thread-head > img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  object-fit: cover !important;
}

#view.comms .thread-head > div {
  min-width: 0 !important;
}

#view.comms .thread-head b,
#view.comms .thread-head p {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .thread-head b {
  font-size: .95rem !important;
  line-height: 1.05 !important;
}

#view.comms .thread-head p {
  margin: 2px 0 0 !important;
  font-size: .72rem !important;
}

#view.comms .thread-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 4px !important;
}

#view.comms .thread-actions .ghost {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
  line-height: 1 !important;
}

#view.comms .messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 7px 0 !important;
  padding: 6px 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#view.comms .date-divider {
  font-size: .68rem !important;
  opacity: .62 !important;
  text-align: center !important;
}

#view.comms .bubble {
  max-width: 80% !important;
  padding: 9px 11px !important;
  border-radius: 13px 13px 13px 4px !important;
  overflow-wrap: anywhere !important;
}

#view.comms .bubble.mine {
  margin-left: auto !important;
  border-radius: 13px 13px 4px 13px !important;
}

#view.comms .bubble:not(.mine) {
  margin-right: auto !important;
}

#view.comms .bubble p {
  margin: 0 !important;
  font-size: .88rem !important;
  line-height: 1.2 !important;
}

#view.comms .bubble small {
  font-size: .64rem !important;
}

#view.comms .composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 70px !important;
  gap: 7px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, .82) !important;
}

#view.comms .composer > span {
  display: none !important;
}

#view.comms .composer input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 8px !important;
  font-size: 15px !important;
}

#view.comms .composer button {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

@media (max-width: 380px) {
  #view.comms {
    padding-inline: 8px !important;
  }

  #view.comms .comms-panel {
    max-height: 136px !important;
    gap: 6px !important;
    padding: 9px !important;
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) 122px !important;
  }

  #view.comms .comms-title h1 {
    font-size: 1.35rem !important;
  }

  #view.comms .comms-tabs {
    height: 34px !important;
    min-height: 34px !important;
  }

  #view.comms .comms-tabs button {
    height: 28px !important;
    font-size: .68rem !important;
  }

  #view.comms .comms-search {
    display: none !important;
  }

  #view.comms .comms-chat-list {
    max-height: 48px !important;
  }
}

@media (max-height: 700px) {
  #view.comms .comms-panel {
    max-height: 132px !important;
  }

  #view.comms .comms-search {
    display: none !important;
  }

  #view.comms .comms-thread-card {
    padding: 8px !important;
  }

  #view.comms .thread-head {
    padding-bottom: 6px !important;
  }

  #view.comms .messages {
    margin: 5px 0 !important;
    padding-block: 4px !important;
  }
}

/* Patch 2.8 polish: denser editor hub, faction counts, mobile card containment. */
.profile-editor-modal .modal-card.profile-edit-hub {
  max-width: min(500px, calc(100vw - 16px));
  padding: 14px 12px calc(var(--safe-bottom) + 14px);
  gap: 10px;
}

.profile-edit-hub .profile-edit-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 2px;
}

.profile-edit-hub .profile-edit-topbar > div:first-child {
  grid-column: auto;
}

.profile-edit-hub .profile-edit-topbar h2 {
  font-size: clamp(2rem, 8vw, 2.8rem);
}

.profile-edit-hub .profile-editor-preview {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 132px;
  padding: 12px;
  gap: 12px;
  border-radius: 18px;
}

.profile-edit-hub .profile-editor-avatar {
  width: 104px;
}

.profile-edit-hub .profile-editor-id h2 {
  margin: 6px 0 4px;
  font-size: clamp(2rem, 8vw, 3.05rem);
}

.profile-edit-hub .profile-editor-id p {
  margin-bottom: 8px;
  max-width: 26ch;
  color: rgba(255,255,255,.86);
  font-size: .9rem;
  line-height: 1.18;
}

.profile-edit-hub .profile-editor-badge-row span,
.profile-edit-hub .profile-editor-meta span,
.profile-edit-hub .profile-editor-meta b {
  min-height: 20px;
  padding: 0 7px;
  font-size: .58rem;
  border-radius: 6px;
}

.profile-edit-loadout-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-edit-loadout-strip div {
  min-height: 58px;
  padding: 10px;
  border-radius: 12px;
}

.profile-edit-loadout-strip span {
  font-size: .6rem;
}

.profile-edit-loadout-strip b {
  font-size: .83rem;
  line-height: 1.08;
}

.profile-edit-tile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-edit-tile {
  min-height: 116px;
  padding: 13px 12px;
  border-radius: 14px;
}

.profile-edit-tile span {
  width: 34px;
  height: 34px;
  font-size: .72rem;
}

.profile-edit-tile b {
  font-size: 1.02rem;
}

.profile-edit-tile em {
  font-size: .78rem;
  line-height: 1.16;
}

.profile-edit-tile small {
  font-size: .76rem;
  line-height: 1.16;
}

.faction-war-room {
  gap: 10px;
}

.faction-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.faction-count-tile {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #ff2f5f) 46%, rgba(255,255,255,.12));
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--faction-accent, #ff2f5f) 22%, transparent), transparent 78%),
    rgba(0,0,0,.52);
}

.faction-count-tile img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 9px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--faction-accent, #ff2f5f) 45%, transparent));
}

.faction-count-tile b,
.faction-count-tile span,
.faction-count-tile em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faction-count-tile b {
  display: block;
  color: #fff;
  font-size: .74rem;
  line-height: 1;
}

.faction-count-tile span,
.faction-count-tile em {
  color: rgba(235,239,255,.66);
  font-size: .65rem;
  font-style: normal;
  line-height: 1.05;
}

.faction-count-tile em {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 78%, #fff);
  font-weight: 900;
}

@media (max-width: 560px) {
  .home-recommended-grid {
    grid-template-columns: 1fr;
  }

  .home-rec-card {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    padding: 10px;
  }

  .home-rec-card > img {
    width: 48px;
    height: 48px;
  }

  .home-rec-card p {
    gap: 5px;
  }

  .home-rec-card small {
    grid-column: 2 / 4;
  }

  .faction-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 86px minmax(0, 1fr);
    padding: 10px;
  }

  .profile-edit-hub .profile-editor-avatar {
    width: 86px;
  }

  .profile-edit-loadout-strip,
  .profile-edit-tile-grid {
    grid-template-columns: 1fr;
  }

  .profile-edit-tile {
    min-height: 96px;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 49, 79, .2), transparent 28rem),
    radial-gradient(circle at 86% 8%, rgba(47, 140, 255, .16), transparent 26rem),
    linear-gradient(145deg, #03040a 0%, #07101f 48%, #05070d 100%);
  color: var(--text);
  overflow: hidden;
}

html, body, #app {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
}

button, input, select, textarea {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}
button { cursor: pointer; }
a { color: inherit; }

.app {
  width: min(100%, 520px);
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  background: rgba(5, 7, 13, .72);
  border-left: 1px solid rgba(255, 255, 255, .06);
  border-right: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
}

.shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  max-width: 100%;
}

.topbar {
  padding: var(--safe-top) 18px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(5, 7, 13, .98), rgba(5, 7, 13, .76));
  border-bottom: 1px solid var(--line);
  z-index: 3;
}

.brand-lockup {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 49, 79, .36));
}

.brand-wordmark {
  width: min(188px, 48vw);
  height: 34px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 12px rgba(94, 92, 255, .24));
}

.icon-btn, .nav-btn, .chip, .primary, .ghost, .danger, .tab, .status-select {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  border-radius: 8px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: relative;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(37, 245, 154, .65);
  background: #101827;
  object-fit: cover;
}

.avatar-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.avatar-btn .avatar {
  display: block;
}

.avatar-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--red);
  color: white;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 900;
}

.badge-dot[hidden] {
  display: none;
}

.view {
  overflow: auto;
  overflow-x: hidden;
  padding: 18px 16px 18px;
  scrollbar-width: none;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.view::-webkit-scrollbar { display: none; }

.view > *,
.panel,
.card,
.squad-card,
.chat-item,
.notification,
.profile-section,
.main-game-card,
.matchmaking-card,
.discover-event,
.discover-squad-row,
.stats-row,
.library-row,
.account-row {
  max-width: 100%;
  min-width: 0;
}

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px 10px var(--safe-bottom);
  min-height: 0;
  background: rgba(5, 7, 13, .97);
  border-top: 1px solid var(--line);
  z-index: 5;
}

.nav-btn {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--muted);
  font-size: .7rem;
  text-decoration: none;
}

.nav-btn svg { width: 20px; height: 20px; }
.nav-btn.active { color: white; background: linear-gradient(135deg, rgba(255, 49, 79, .22), rgba(47, 140, 255, .18)); border-color: rgba(255, 255, 255, .2); }

.auth {
  min-height: 100vh;
  padding: var(--safe-top) 18px var(--safe-bottom);
  display: grid;
  align-content: center;
  gap: 18px;
}

.auth-brand {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.auth-app-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255, 49, 79, .42));
}

.auth-wordmark {
  width: min(360px, 88vw);
  height: auto;
  object-fit: contain;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.3rem, 12vw, 4.6rem);
  line-height: .86;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 1000;
}

.hero-title span { color: var(--red); }
.auth p, .muted { color: var(--muted); }

.auth-brand.compact {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
}

.auth-brand.compact .auth-app-logo { width: 64px; height: 64px; }
.auth-brand.compact .auth-wordmark { width: min(280px, 70vw); }

.auth-submit,
.blaze-auth-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: .76rem;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; background: var(--line); }

.blaze-auth-button {
  border: 1px solid rgba(255, 180, 40, .55);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 180, 40, .2), rgba(38, 25, 4, .88));
  font-weight: 900;
  text-decoration: none;
}

.blaze-auth-button img { width: 30px; height: 30px; object-fit: contain; }

.twitch-auth-button { margin-bottom: 8px; border-color: rgba(145, 70, 255, .55); }
.twitch-live-hero { border-color: rgba(145, 70, 255, .7); box-shadow: 0 0 18px rgba(145, 70, 255, .28); }
.twitch-live-hero span { background: #9146ff; box-shadow: 0 0 10px #9146ff; }
.twitch-live-banner { background: #9146ff; color: #fff; }
.twitch-chip.is-live { filter: drop-shadow(0 0 7px rgba(145, 70, 255, .95)); }
.twitch-chip.is-live img { animation: twitch-live-pulse 1.8s ease-in-out infinite; }
@keyframes twitch-live-pulse { 50% { transform: scale(1.08); filter: brightness(1.35); } }

.blaze-auth-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.blaze-auth-heading img { width: 52px; height: 52px; object-fit: contain; }
.blaze-auth-heading h2 { margin: 0 0 4px; }
.blaze-auth-heading p { margin: 0; }
.blaze-signup-panel { width: 100%; max-width: 520px; justify-self: center; }
.auth-legal { margin: 14px 0 0; font-size: .78rem; line-height: 1.45; }
.auth-error { margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(255,49,79,.45); background: rgba(255,49,79,.1); color: #ffdbe4; border-radius: 6px; font-size: .84rem; line-height: 1.4; }

.panel, .card {
  background: linear-gradient(180deg, rgba(17, 24, 45, .92), rgba(9, 13, 27, .92));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel { padding: 16px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { color: var(--muted); font-size: .78rem; text-transform: uppercase; font-weight: 850; }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  border-radius: 8px;
  padding: 12px;
  outline: none;
}

.field textarea { min-height: 86px; resize: vertical; }

.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
.two { grid-template-columns: 1fr 1fr; }

.primary, .ghost, .danger {
  min-height: 46px;
  padding: 0 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.primary {
  border: 0;
  background: linear-gradient(135deg, var(--red), var(--purple) 52%, var(--blue));
  box-shadow: 0 16px 40px rgba(168, 85, 247, .28);
}

.ghost { background: rgba(255, 255, 255, .07); }
.danger { border-color: rgba(255, 49, 79, .4); color: #ffb5c0; background: rgba(255, 49, 79, .08); }
.primary:disabled, .ghost:disabled { opacity: .45; cursor: not-allowed; }

.status-select {
  width: 100%;
  padding: 12px;
  border-color: rgba(37, 245, 154, .35);
  background: rgba(37, 245, 154, .08);
}

.hero-cta {
  min-height: 124px;
  padding: 18px;
  display: grid;
  align-content: end;
  background:
    linear-gradient(135deg, rgba(255, 49, 79, .85), rgba(168, 85, 247, .52), rgba(47, 140, 255, .45)),
    url("https://images.unsplash.com/photo-1560253023-3ec5d502959f?auto=format&fit=crop&w=1000&q=80") center/cover;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-cta h2, .section-title, .card h3 { margin: 0; }
.hero-cta h2 { font-size: 2rem; text-transform: uppercase; line-height: .92; }
.section-title { font-size: .92rem; color: #dce4ff; text-transform: uppercase; letter-spacing: .08em; }

.event {
  display: block;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none;
}

.event-inner {
  height: 100%;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, .84));
}

.event h3 { margin: 0; font-size: 1.35rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 6px 9px;
  color: #dfe6ff;
  font-size: .75rem;
  font-weight: 850;
}
.chip.green { color: #b9ffdf; border-color: rgba(37, 245, 154, .36); background: rgba(37, 245, 154, .08); }
.chip.red { color: #ffc0c8; border-color: rgba(255, 49, 79, .4); background: rgba(255, 49, 79, .09); }
.chip.gold { color: #ffe3a1; border-color: rgba(255, 200, 87, .44); background: rgba(255, 200, 87, .1); }

.h-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
.mini-player { min-width: 108px; padding: 10px; text-align: center; }
.mini-player .avatar { width: 56px; height: 56px; margin-bottom: 6px; }

.squad-card, .chat-item, .notification, .profile-head { padding: 14px; }
.squad-card.active-squad {
  border-color: rgba(37, 245, 154, .46);
  box-shadow: inset 3px 0 0 rgba(37, 245, 154, .78), var(--shadow);
}
.squad-card img, .game-thumb {
  width: 54px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  background: #141a2c;
}

.profile-page {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
  margin: -18px 0 0;
  background: #05050b;
  border-top: 1px solid rgba(255, 49, 79, .45);
}

.public-profile-page {
  margin: 0;
  border-top: 0;
}

.public-preview-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(47, 140, 255, .5);
  border-radius: 6px;
  color: #b9d8ff;
  background: rgba(47, 140, 255, .12);
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  min-height: 178px;
  padding: 18px 16px 16px;
  border-left: 3px solid var(--red);
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 49, 79, .16), transparent 150px),
    linear-gradient(94deg, rgba(255, 49, 79, .13), rgba(5, 7, 13, .96) 42%, rgba(47, 140, 255, .06));
  overflow: hidden;
}

.profile-edit-btn, .mini-edit {
  border: 1px solid rgba(255, 49, 79, .55);
  background: rgba(255, 49, 79, .12);
  color: #ffd5dc;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.profile-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 30px;
  padding: 0 10px;
}

.mini-edit {
  min-height: 24px;
  padding: 0 8px;
}

.profile-hero::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -62px;
  width: 138px;
  height: 138px;
  background: linear-gradient(135deg, rgba(255, 49, 79, .42), rgba(47, 140, 255, .28));
  transform: rotate(28deg);
  clip-path: polygon(50% 0, 100% 40%, 78% 100%, 18% 82%, 0 24%);
  opacity: .38;
  z-index: 0;
  pointer-events: none;
}

.profile-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 1;
  width: 86px;
  height: 86px;
  padding: 4px;
  border: 2px solid #ff3355;
  background: #090812;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 28px rgba(255, 49, 79, .8);
}

.theme-neon-purple .profile-hero,
.swipe-card.theme-neon-purple { --cosmetic-accent: #a855f7; }
.theme-crimson-red .profile-hero,
.swipe-card.theme-crimson-red { --cosmetic-accent: #ff314f; }
.theme-toxic-green .profile-hero,
.swipe-card.theme-toxic-green { --cosmetic-accent: #25f59a; }
.theme-electric-blue .profile-hero,
.swipe-card.theme-electric-blue { --cosmetic-accent: #2f8cff; }
.theme-recruiter-neon .profile-hero,
.swipe-card.theme-recruiter-neon { --cosmetic-accent: #00ff9c; }
.theme-cyber-gold .profile-hero,
.swipe-card.theme-cyber-gold { --cosmetic-accent: #ffc857; }
.theme-sticksgg-bg .profile-hero,
.swipe-card.theme-sticksgg-bg { --cosmetic-accent: #ff1f31; }

.profile-page[class*="theme-"] .profile-hero {
  border-left-color: var(--cosmetic-accent, var(--red));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 34px color-mix(in srgb, var(--cosmetic-accent, var(--red)) 26%, transparent);
}

.profile-page[class*="theme-"] .profile-section-head span::before {
  background: var(--cosmetic-accent, var(--red));
  box-shadow: 0 0 12px color-mix(in srgb, var(--cosmetic-accent, var(--red)) 65%, transparent);
}

.border-neon-pulse .profile-frame,
.border-rgb-wave .profile-frame,
.border-founder-gold .profile-frame {
  border-color: var(--cosmetic-accent, #a855f7);
  animation: borderPulse 2.8s ease-in-out infinite;
}

.border-rgb-wave .profile-frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  background: conic-gradient(#ff314f, #a855f7, #2f8cff, #25f59a, #ff314f);
  z-index: -1;
  animation: founderSpin 4s linear infinite;
}

.effect-scanlines .profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.7) 6px);
  mix-blend-mode: screen;
}

.xp-panel {
  display: grid;
  gap: 5px;
  margin: 8px 0 10px;
}

.xp-panel div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #e8ecff;
  font-size: .72rem;
  font-weight: 950;
}

.xp-panel em {
  color: var(--muted);
  font-style: normal;
}

.xp-panel > span {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
}

.xp-panel i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--purple), var(--blue), var(--green));
  box-shadow: 0 0 14px rgba(47, 140, 255, .7);
}

.xp-panel small {
  color: #9aa2bd;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.showcase-grid,
.identity-loadout,
.progression-card,
.endorsement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.showcase-grid div,
.identity-loadout div,
.progression-card div,
.endorsement-grid span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.showcase-grid span,
.identity-loadout span,
.progression-card span {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .1em;
}

.showcase-grid b,
.identity-loadout b,
.progression-card b {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.endorsement-grid span {
  color: #aeb6d2;
  font-size: .72rem;
  font-weight: 850;
}

.endorsement-grid b {
  margin-right: 8px;
  color: var(--green);
  font-size: 1rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: #dfe6ff;
  font-size: .7rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.trust-badge b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.trust-elite {
  color: #ead9ff;
  border-color: rgba(168, 85, 247, .62);
  box-shadow: 0 0 18px rgba(168, 85, 247, .25);
}

.trust-trusted {
  color: #b9ffdf;
  border-color: rgba(37, 245, 154, .55);
  box-shadow: 0 0 18px rgba(37, 245, 154, .18);
}

.trust-neutral {
  color: #fff0a8;
  border-color: rgba(255, 200, 87, .46);
}

.trust-unreliable {
  color: #ffd0a0;
  border-color: rgba(255, 132, 49, .55);
}

.trust-flagged {
  color: #ffc0c8;
  border-color: rgba(255, 49, 79, .58);
}

.trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.trust-strip > span:last-child {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
}

.trust-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.trust-actions .ghost,
.trust-actions .danger {
  min-height: 36px;
  font-size: .72rem;
}

.trust-profile-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.trust-profile-card > div {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
  text-align: center;
}

.trust-profile-card b {
  color: var(--green);
  font-size: 1.05rem;
}

.trust-profile-card span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.report-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.report-reasons label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #dfe6ff;
  font-size: .78rem;
  font-weight: 850;
}

.founder-gold-hero {
  border-left-color: #ffd76a;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 215, 106, .18), transparent 150px),
    linear-gradient(135deg, rgba(26, 18, 5, .78), rgba(7, 5, 12, .97) 58%, rgba(47, 140, 255, .05));
}

.founder-gold-profile .profile-section-head span::before {
  background: #ffd76a;
  box-shadow: 0 0 12px rgba(255, 215, 106, .7);
}

.founder-animated-frame {
  border-color: #ffd76a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 34px rgba(255, 215, 106, .85);
}

.founder-animated-frame::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, transparent, #ffd76a, #fff3bf, #d89716, transparent) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: founderSpin 3.5s linear infinite;
  pointer-events: none;
}

@keyframes founderSpin {
  to { transform: rotate(360deg); }
}

@keyframes borderPulse {
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 36px color-mix(in srgb, var(--cosmetic-accent, #a855f7) 82%, transparent); }
}

.profile-avatar-xl {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f4efe7;
}

.profile-id {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
  padding-top: 22px;
}

.profile-id h1 {
  margin: 8px 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: clamp(1.6rem, 8vw, 2.2rem);
  line-height: .9;
  font-weight: 1000;
}

.profile-id p {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.profile-id p span {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .5);
}

.profile-badges { gap: 6px; }

.profile-tags {
  position: relative;
  z-index: 2;
  gap: 6px;
  padding-right: 4px;
}

.cosmetic, .tag-red, .tag-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-decoration: none;
}

button.cosmetic {
  border: 0;
  cursor: pointer;
}

.cosmetic.verified {
  width: 22px;
  height: 22px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3ba6, #7b5cff);
  color: #fff;
  letter-spacing: 0;
  font-size: .78rem;
}

.cosmetic.founder {
  color: #241400;
  background: linear-gradient(135deg, #ffd76a, #d89716);
  border: 1px solid rgba(255, 229, 150, .75);
}

.cosmetic.legend, .tag-red {
  color: #ff5f72;
  border: 1px solid rgba(255, 49, 79, .55);
  background: rgba(255, 49, 79, .1);
}

.cosmetic.live {
  color: #d9c5ff;
  border: 1px solid rgba(168, 85, 247, .55);
  background: rgba(168, 85, 247, .2);
}

.tag-blue {
  color: #9be9ff;
  border: 1px solid rgba(47, 140, 255, .72);
  background: rgba(47, 140, 255, .18);
  box-shadow: 0 0 14px rgba(47, 140, 255, .34);
}

.profile-section {
  padding: 14px 16px;
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(0, 0, 0, .72);
  background: rgba(5, 5, 12, .96);
}

.profile-empty {
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, .16);
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
}

.profile-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #d8ddf4;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .18em;
}

.profile-section-head span {
  position: relative;
  padding-left: 12px;
}

.profile-section-head span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 2px;
  height: 12px;
  background: linear-gradient(var(--red), var(--purple));
}

.profile-section-head em {
  color: var(--muted);
  font-style: normal;
  max-width: 48%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-game-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(5, 5, 12, .72), rgba(5, 5, 12, .92)), linear-gradient(135deg, rgba(255, 49, 79, .08), rgba(47, 140, 255, .05));
}

.main-game-card img, .library-row img, .stats-row img {
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
}

.main-game-card img {
  width: 72px;
  height: 92px;
}

.main-game-card small {
  color: var(--red);
  text-transform: uppercase;
  font-size: .55rem;
  font-weight: 1000;
  letter-spacing: .18em;
}

.main-game-card h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  line-height: .92;
}

.stat-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stat-line b {
  min-width: 0;
  color: var(--green);
  font-size: .9rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.stat-line b:first-child { color: #ffdf2e; }
.stat-line b:nth-child(2) { color: #27dfff; }
.stat-line b:last-child { color: #bd83ff; }
.stat-line small {
  display: block;
  color: #626a87;
  font-size: .46rem;
  letter-spacing: .14em;
}

.platform-name {
  position: absolute;
  right: 12px;
  top: 16px;
  color: #6d5f9a;
  font-size: .62rem;
  font-weight: 900;
}

.profile-copy {
  min-height: 78px;
  margin: 0;
  color: #b5bad3;
  line-height: 1.6;
}

.style-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.style-tabs span, .looking-grid span {
  flex: 1 1 96px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  color: #9298b2;
  text-transform: uppercase;
  font-size: .56rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-align: center;
}

.style-tabs span.active, .looking-grid span.active {
  color: #ffdee3;
  border-color: rgba(255, 49, 79, .72);
  background: rgba(255, 49, 79, .18);
}

.looking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.looking-grid span {
  justify-content: start;
  place-items: center start;
  padding: 0 12px;
}

.looking-grid span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #30364a;
}

.looking-grid span.active::before {
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 49, 79, .9);
}

.library-search {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  color: #8f95ad;
}

.library-row, .stats-row, .account-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
}

.library-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 8px;
  border-color: rgba(255, 49, 79, .28);
  background: rgba(255, 49, 79, .09);
}

.library-row i, .library-row .library-clip {
  display: none;
}

.library-clip {
  color: #9be9ff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .6rem;
  font-weight: 1000;
}

.library-row span {
  padding: 4px 7px;
  border-radius: 2px;
  color: var(--red);
  background: rgba(255, 49, 79, .16);
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 1000;
}

.library-row i, .stats-row i {
  color: #454b63;
  font-style: normal;
  text-align: center;
}

.stats-row {
  grid-template-columns: auto 1fr auto;
  min-height: 64px;
  padding: 8px 12px 8px 8px;
}

.stats-row p {
  margin: 4px 0 0;
  color: var(--green);
  font-size: .72rem;
  font-weight: 900;
}

.accounts-list {
  display: grid;
  border-left: 2px solid rgba(168, 85, 247, .76);
}

.account-row {
  grid-template-columns: 28px minmax(74px, auto) minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 0 12px;
  border-left: 0;
  border-right: 0;
  color: #555b70;
}

.account-row.linked {
  color: white;
  background: rgba(168, 85, 247, .055);
}

.account-row span {
  color: #6f7385;
  font-size: .7rem;
  font-weight: 1000;
}

.account-row.linked span, .account-row.linked b { color: #b784ff; }
.account-row b {
  color: #6e7287;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .82rem;
}
.account-row i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b784ff;
}

.public-account-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  min-width: 0;
}

.profile-account-badge-grid {
  margin-top: 0;
}

.public-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  max-width: 100%;
  padding: 4px 9px 4px 5px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #dce4ff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 900;
  overflow: hidden;
}

.public-account-badge span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-badge b {
  padding: 2px 5px;
  border-radius: 999px;
  color: #08040a;
  background: #ffb428;
  font-size: .54rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.public-account-badge.live {
  border-color: rgba(255, 180, 40, .62);
  box-shadow: 0 0 18px rgba(255, 180, 40, .18);
}

.blaze-live-hero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255, 180, 40, .74);
  border-radius: 999px;
  background: rgba(255, 180, 40, .14);
  color: #ffe2a3;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.blaze-live-hero span,
.live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb428;
  box-shadow: 0 0 12px rgba(255, 180, 40, .9);
  animation: livePulse 1.3s ease-in-out infinite;
}

.account-zone {
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
}

.account-zone p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.account-zone-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-zone-actions .ghost,
.account-zone-actions .danger {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.account-zone-actions .danger {
  border-color: rgba(255, 47, 95, .7);
  background: linear-gradient(135deg, rgba(255, 47, 95, .22), rgba(139, 92, 246, .12));
}

.profile-clips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clip-card {
  min-height: 120px;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, .34);
  border-radius: 8px;
  background: #090b16;
  text-decoration: none;
}

.clip-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
}

.clip-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86));
}

.clip-card span, .clip-card b {
  position: relative;
  z-index: 1;
}

.clip-card span {
  color: #b784ff;
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 1000;
}

.clip-card b {
  color: white;
  font-size: .78rem;
}

.clip-pill {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 2;
  padding: 8px 10px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 8px;
  background: rgba(6, 5, 14, .72);
  color: #eadcff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swipe-clip-strip {
  display: grid;
  gap: 2px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(168, 85, 247, .42);
  border-radius: 8px;
  background: rgba(168, 85, 247, .12);
}

.swipe-clip-strip span {
  color: #b784ff;
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 1000;
}

.swipe-clip-strip b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-form .edit-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.profile-edit-form .edit-chip-grid label {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17, 24, 45, .76), rgba(8, 12, 25, .94));
  color: #f4f6ff;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-edit-form .edit-chip-grid label:has(input:checked) {
  border-color: rgba(47, 140, 255, .72);
  background:
    linear-gradient(180deg, rgba(47, 140, 255, .2), rgba(8, 12, 25, .96)),
    rgba(47, 140, 255, .08);
  box-shadow: inset 3px 0 0 rgba(47, 140, 255, .85);
}

.profile-edit-form .edit-chip-grid input[type="radio"],
.profile-edit-form .edit-chip-grid input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  accent-color: var(--blue);
}

.game-editor {
  display: grid;
  gap: 8px;
}

.edit-game-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 49, 79, .28);
  border-radius: 8px;
  background: rgba(255, 49, 79, .08);
}

.edit-game-row img {
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}

.edit-game-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.manual-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.manual-stats-grid input {
  min-width: 0;
  padding: 8px;
  font-size: .78rem;
}

.show-game-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9e2ff;
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.profile-photo-upload {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.profile-photo-upload img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 2px solid rgba(255, 49, 79, .75);
  background: #090812;
  box-shadow: 0 0 22px rgba(255, 49, 79, .35);
}

.upload-button {
  justify-content: center;
  cursor: pointer;
}

.squad-photo-upload {
  gap: 10px;
}

.squad-photo-edit-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.squad-photo-edit-row img {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255, 47, 95, .55);
  background: rgba(6, 7, 16, .92);
  box-shadow: 0 0 22px rgba(255, 47, 95, .18);
}

.squad-photo-upload .muted {
  margin: 0;
  font-size: .78rem;
}

.cosmetic-grid {
  display: grid;
  gap: 8px;
}

.cosmetic-grid > div,
.cosmetic-editor label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .04);
}

.cosmetic-grid > div.active {
  border-color: rgba(255, 215, 106, .74);
  background: linear-gradient(135deg, rgba(255, 215, 106, .16), rgba(216, 151, 22, .08));
  box-shadow: inset 0 0 18px rgba(255, 215, 106, .08);
}

.cosmetic-grid b,
.cosmetic-editor label {
  color: #fff;
  font-weight: 950;
}

.cosmetic-grid span {
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cosmetic-editor {
  display: grid;
  gap: 10px;
}

.cosmetic-editor label.locked {
  opacity: .55;
}

.cosmetic-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cosmetic-editor .cosmetic-pick {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: start;
  min-height: 78px;
  padding: 12px 12px 12px 34px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.cosmetic-pick input {
  position: absolute;
  left: 12px;
  top: 14px;
}

.cosmetic-pick b {
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.cosmetic-pick span {
  margin-top: 6px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cosmetic-pick.rarity-rare { border-color: rgba(47, 140, 255, .38); }
.cosmetic-pick.rarity-epic { border-color: rgba(168, 85, 247, .45); }
.cosmetic-pick.rarity-legendary { border-color: rgba(255, 200, 87, .55); }
.cosmetic-pick.rarity-mythic { border-color: rgba(37, 245, 154, .55); }

.performance-toggle {
  display: flex;
  justify-content: start !important;
}

.wide { width: 100%; justify-content: center; }

.level-up-card {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.level-up-card small {
  color: var(--gold);
  font-size: .7rem;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.level-up-card h2 {
  margin: 0;
  font-size: 2rem;
  text-transform: uppercase;
}

.level-burst {
  position: absolute;
  inset: -80px;
  background: conic-gradient(from 0deg, transparent, rgba(255,49,79,.32), rgba(47,140,255,.3), rgba(37,245,154,.25), transparent);
  animation: founderSpin 4s linear infinite;
  pointer-events: none;
}

.unlock-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.unlock-list span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 200, 87, .46);
  background: rgba(255, 200, 87, .11);
  color: #ffe5a0;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 1000;
}

@media (prefers-reduced-motion: reduce) {
  .founder-animated-frame::after,
  .border-rgb-wave .profile-frame::before,
  .level-burst,
  .border-neon-pulse .profile-frame,
  .border-rgb-wave .profile-frame,
  .border-founder-gold .profile-frame {
    animation: none !important;
  }
}

.reduced-effects .founder-animated-frame::after,
.reduced-effects.border-rgb-wave .profile-frame::before,
.reduced-effects .level-burst,
.reduced-effects.border-neon-pulse .profile-frame,
.reduced-effects.border-rgb-wave .profile-frame,
.reduced-effects.border-founder-gold .profile-frame {
  animation: none !important;
}

.psn-connect-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 140, 255, .34);
  border-radius: 8px;
  background: rgba(47, 140, 255, .08);
}

.psn-connect-box b {
  color: #b9d8ff;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
}

.platform-connect-box:nth-of-type(2) {
  border-color: rgba(37, 245, 154, .28);
  background: rgba(37, 245, 154, .06);
}

.platform-connect-box:nth-of-type(3) {
  border-color: rgba(168, 85, 247, .32);
  background: rgba(168, 85, 247, .07);
}

.platform-connect-box:nth-of-type(4) {
  border-color: rgba(255, 49, 79, .28);
  background: rgba(255, 49, 79, .06);
}

.psn-connect-box p {
  margin: 4px 0 0;
  font-size: .78rem;
}

.connected-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.connected-editor-head {
  display: grid;
  gap: 6px;
  padding: 2px 2px 4px;
}

.connected-editor-head h3 {
  margin: 0;
  color: #f6f8ff;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.connected-editor-head p {
  margin: 0;
  color: #99a2bd;
  line-height: 1.35;
  font-size: .86rem;
}

.account-row-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.account-connection-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.account-connection-row:hover {
  border-color: rgba(47, 140, 255, .46);
}

.account-accent-green:hover { border-color: rgba(37, 245, 154, .46); }
.account-accent-purple:hover { border-color: rgba(168, 85, 247, .52); }
.account-accent-red:hover { border-color: rgba(255, 49, 79, .46); }
.account-accent-blaze {
  background: linear-gradient(90deg, rgba(255, 180, 40, .11), rgba(255, 255, 255, .035));
}
.account-accent-blaze:hover { border-color: rgba(255, 180, 40, .62); }
.account-accent-vpzone {
  background: linear-gradient(90deg, rgba(255, 47, 118, .1), rgba(98, 229, 255, .08));
}
.account-accent-vpzone:hover { border-color: rgba(98, 229, 255, .5); }

.account-provider-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #dce4ff;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .05em;
}

.account-provider-icon.image-icon {
  padding: 5px;
  overflow: hidden;
}

.account-provider-icon.image-icon img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}

.account-blaze {
  position: relative;
  color: #7c808a;
  background: linear-gradient(135deg, #2b2e36, #17191f);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 0 12px rgba(0, 0, 0, .32);
  filter: grayscale(1) saturate(.35) opacity(.72);
}

.account-blaze.is-live {
  color: #130c00;
  background: linear-gradient(135deg, #ffe179, #ff9f1c 58%, #ff7304);
  border-color: rgba(255, 211, 106, .9);
  box-shadow: 0 0 18px rgba(255, 180, 40, .34);
  filter: none;
}

.account-blaze.is-live::after {
  content: "";
  position: absolute;
  inset: -55% -120%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .78) 49%, transparent 60%);
  animation: blazeBadgeShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

.account-provider-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-provider-main b {
  color: #f5f7ff;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .08em;
}

.account-provider-main strong {
  min-width: 0;
  color: #d9e2ff;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.account-provider-main > span {
  color: #838da8;
  font-size: .75rem;
  line-height: 1.25;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #ffe2a3;
  background: rgba(255, 180, 40, .13);
  text-transform: uppercase;
  font-size: .54rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.visibility-toggle {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  color: #aeb7d1;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.visibility-toggle input {
  position: absolute;
  opacity: 0;
}

.visibility-toggle span {
  width: 34px;
  height: 20px;
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
}

.visibility-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6e7690;
  transition: transform .16s ease, background .16s ease;
}

.visibility-toggle input:checked + span {
  border-color: rgba(37, 245, 154, .45);
  background: rgba(37, 245, 154, .18);
}

.visibility-toggle input:checked + span::after {
  transform: translateX(14px);
  background: #25f59a;
}

.visibility-toggle.disabled {
  opacity: .42;
}

.account-provider-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.account-provider-actions .ghost,
.account-provider-actions .primary {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .68rem;
  white-space: nowrap;
}

.account-provider-actions .primary,
.primary.compact {
  background: linear-gradient(135deg, #ff3150, #a855f7 55%, #2f8cff);
}

.manual-account-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(47, 140, 255, .22);
  border-radius: 8px;
  background: rgba(5, 8, 16, .72);
}

.manual-account-editor label {
  color: #aab2cc;
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 1000;
  letter-spacing: .1em;
}

.account-save-visibility[hidden] {
  display: none;
}

.toast {
  position: absolute;
  z-index: 40;
  left: 16px;
  right: 16px;
  bottom: calc(var(--safe-bottom) + 92px);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(37, 245, 154, .34);
  border-radius: 12px;
  background: rgba(8, 13, 24, .96);
  color: #e7fff4;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .38), 0 0 22px rgba(37, 245, 154, .12);
  font-size: .85rem;
  font-weight: 900;
  text-align: center;
}

.toast-error {
  border-color: rgba(255, 49, 79, .48);
  color: #ffdae1;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .38), 0 0 22px rgba(255, 49, 79, .16);
}

@keyframes livePulse {
  0%, 100% { opacity: .58; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.18); }
}

@media (max-width: 440px) {
  .account-connection-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .account-provider-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

/* FRAGMATCH share-card profile default */
.profile-sharecard {
  position: relative;
  gap: 12px;
  padding: 14px 14px calc(var(--safe-bottom) + 104px);
  background:
    linear-gradient(145deg, rgba(255, 47, 95, .09), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(139, 92, 246, .12), transparent 260px),
    repeating-linear-gradient(150deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 42px),
    #030407;
}

.profile-sharecard::before {
  content: "FRAGMATCH  FRAGMATCH  FRAGMATCH";
  position: absolute;
  inset: 0;
  opacity: .035;
  color: white;
  font-size: 2.4rem;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1.8;
  transform: rotate(-24deg) scale(1.18);
  pointer-events: none;
}

.profile-sharecard > * {
  position: relative;
  z-index: 1;
}

.profile-sharecard .profile-hero {
  grid-template-columns: minmax(150px, 36%) minmax(0, 1fr);
  gap: 20px;
  padding: 18px 16px;
  min-height: 330px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-sharecard .profile-edit-btn {
  top: 18px;
  right: 0;
  min-width: 100px;
  min-height: 46px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .26);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}

.profile-sharecard .profile-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.12;
  align-self: center;
  padding: 7px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 34px rgba(255,47,95,.35), 0 0 40px rgba(139,92,246,.28);
}

.profile-sharecard .profile-frame::after {
  border-radius: 32px;
}

.profile-sharecard .profile-avatar-xl {
  border-radius: 22px;
}

.profile-live-banner {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #ff2f5f;
  color: white;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-live-banner.blaze-live-banner {
  background: linear-gradient(135deg, #ffb428, #ff7304);
  color: #120800;
  box-shadow: 0 0 22px rgba(255, 115, 4, .42);
  font-size: .82rem;
}

.profile-live-banner::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px rgba(255,255,255,.8);
}

.profile-sharecard .profile-id {
  align-self: center;
  padding: 48px 110px 0 0;
  gap: 10px;
}

.profile-sharecard .profile-badges {
  align-items: center;
  gap: 10px;
}

.profile-sharecard .cosmetic {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.profile-sharecard .cosmetic.verified {
  width: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: #f52f3f;
  font-size: 1.4rem;
}

.profile-sharecard .cosmetic.founder {
  color: #161007;
  background: linear-gradient(135deg, #fff0a8, #d89d18);
}

.profile-sharecard .cosmetic.legend {
  display: none;
}

.profile-sharecard .profile-id h1 {
  margin-top: 6px;
  border: 0;
  font-size: clamp(2.6rem, 10vw, 4rem);
  font-style: italic;
  letter-spacing: .02em;
  text-shadow: 0 5px 0 rgba(255,47,95,.18);
}

.profile-sharecard .profile-id .profile-bio-line {
  max-width: 24ch;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  line-height: 1.22;
  font-weight: 500;
}

.profile-sharecard .profile-id .profile-meta-line {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 2.6vw, 1.35rem);
}

.profile-sharecard .profile-id .profile-meta-line b {
  color: #ff2f5f;
}

.profile-sharecard .xp-panel {
  display: none;
}

.profile-sharecard .share-social-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.profile-sharecard .share-social-strip .public-account-badges {
  display: contents;
}

.profile-sharecard .share-social-chip,
.profile-sharecard .public-account-badge {
  min-height: 34px;
  padding: 4px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: white;
  font-size: .82rem;
}

.profile-sharecard .share-social-chip.game-chip {
  max-width: 104px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(47, 140, 255, .22), rgba(139, 92, 246, .18));
}

.profile-sharecard .profile-xp-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(8, 8, 10, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.profile-account-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-account-actions .ghost,
.profile-account-actions .danger {
  min-height: 42px;
  width: 100%;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.profile-account-actions .danger {
  border-color: rgba(255, 47, 95, .65);
  background: linear-gradient(135deg, rgba(255, 47, 95, .2), rgba(139, 92, 246, .08));
}

.level-token {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(135deg, rgba(255,47,95,.7), rgba(139,92,246,.7));
}

@media (max-width: 430px) {
  .profile-account-actions {
    grid-template-columns: 1fr;
  }
}

/* Tournament hub */
.tournaments-page {
  --tournament-accent: #ff2f5f;
  --tournament-purple: #8b5cf6;
}

.tournaments-page .social-page-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.tournaments-page .social-page-head > div {
  grid-template-columns: 4px minmax(0, 1fr);
}

.tournament-create {
  width: auto;
  min-width: 126px;
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}

.tournament-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tournament-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15,18,34,.94), rgba(4,5,10,.96));
}

.tournament-summary strong {
  color: #fff;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.tournament-summary span {
  color: rgba(255,255,255,.58);
  font-size: .76rem;
  line-height: 1.2;
}

.tournament-list-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(3,4,8,.84);
  box-shadow: inset 3px 0 0 rgba(255,47,95,.9), 0 18px 40px rgba(0,0,0,.28);
}

.tournament-past {
  box-shadow: inset 3px 0 0 rgba(139,92,246,.72), 0 18px 40px rgba(0,0,0,.28);
}

.tournament-list {
  display: grid;
  gap: 12px;
}

.tournament-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,18,34,.96), rgba(5,6,12,.98));
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tournament-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,47,95,.46);
  box-shadow: 0 12px 32px rgba(0,0,0,.32), 0 0 22px rgba(255,47,95,.08);
}

.tournament-art {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(139,92,246,.28), rgba(7,8,16,.98));
}

.tournament-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(5,6,12,.9));
  pointer-events: none;
}

.tournament-art img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.tournament-art > span {
  display: grid;
  height: 100%;
  place-items: center;
  color: rgba(255,255,255,.82);
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 2.3rem;
}

.tournament-status {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: .68rem;
  text-transform: uppercase;
}

.tournament-status.status-open,
.tournament-status.status-live { border-color: rgba(0,255,156,.6); color: #00ff9c; }
.tournament-status.status-full { border-color: rgba(255,190,55,.62); color: #ffc857; }
.tournament-status.status-cancelled,
.tournament-status.status-closed { border-color: rgba(255,47,95,.58); color: #ff6d8e; }

.tournament-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.tournament-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tournament-title-row > div { min-width: 0; }
.tournament-title-row small { color: #ff6d8e; font-weight: 800; }
.tournament-title-row h2 {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 1.22rem;
  line-height: 1.05;
}

.tournament-title-row strong {
  flex: 0 0 auto;
  max-width: 150px;
  color: #ffc857;
  font-size: .78rem;
  text-align: right;
}

.tournament-copy > p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: .86rem;
  line-height: 1.35;
}

.tournament-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.tournament-meta > div { min-width: 0; }
.tournament-meta dt {
  margin-bottom: 2px;
  color: rgba(255,255,255,.42);
  font-size: .62rem;
  text-transform: uppercase;
}
.tournament-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: .76rem;
  line-height: 1.2;
}

.tournament-capacity {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
}
.tournament-capacity i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tournament-accent), var(--tournament-purple));
}

.tournament-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.tournament-actions button {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: .76rem;
}

.tournament-joined {
  color: #00ff9c;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-empty {
  display: grid;
  gap: 5px;
  padding: 28px 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 12px;
  text-align: center;
}
.tournament-empty b { color: #fff; }
.tournament-empty span { color: rgba(255,255,255,.54); font-size: .84rem; }

.tournament-modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  align-items: end;
  padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
}

.tournament-modal {
  width: min(100%, 620px);
  max-height: calc(100dvh - max(24px, var(--safe-top)) - max(24px, var(--safe-bottom)));
  margin: 0 auto;
  overflow-y: auto;
  border: 1px solid rgba(255,47,95,.45);
  border-radius: 16px;
  background: linear-gradient(160deg, #111426, #05060c 72%);
  box-shadow: 0 24px 80px rgba(0,0,0,.72), 0 0 34px rgba(255,47,95,.12);
}

.tournament-modal > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(8,9,17,.96);
  backdrop-filter: blur(12px);
}
.tournament-modal header small { color: #ff6d8e; font-size: .68rem; text-transform: uppercase; }
.tournament-modal header h2 { margin: 2px 0 0; color: #fff; font-size: 1.45rem; }
.tournament-modal-close { flex: 0 0 auto; color: #fff; font-size: 1.35rem; }

#tournamentForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 16px;
}

#tournamentForm label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

#tournamentForm label.wide,
#tournamentForm footer { grid-column: 1 / -1; }

#tournamentForm input,
#tournamentForm select,
#tournamentForm textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  background: rgba(0,0,0,.42);
  color: #fff;
  padding: 10px 11px;
  font: inherit;
  font-weight: 500;
  text-transform: none;
}

#tournamentForm textarea { min-height: 76px; resize: vertical; }
#tournamentForm footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
#tournamentForm footer button { width: auto; min-height: 40px; padding: 0 17px; }

.tournament-detail-modal { align-self: center; }
.tournament-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 16px;
}
.tournament-detail-grid > div,
.tournament-detail-copy,
.tournament-roster { padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(0,0,0,.28); }
.tournament-detail-grid span { display: block; color: rgba(255,255,255,.44); font-size: .66rem; text-transform: uppercase; }
.tournament-detail-grid b { display: block; margin-top: 4px; color: #fff; font-size: .84rem; }
.tournament-detail-copy,
.tournament-roster { margin: 0 16px 14px; }
.tournament-detail-copy h3,
.tournament-roster h3 { margin: 0 0 8px; color: #fff; font-size: .94rem; }
.tournament-detail-copy p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.45; }
.tournament-roster h3 { display: flex; justify-content: space-between; }
.tournament-roster h3 span { color: #ff6d8e; }
.tournament-roster > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 0; }
.tournament-roster img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tournament-roster > div > span { color: #fff; }

@media (max-width: 560px) {
  .tournaments-page .social-page-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .tournament-create {
    grid-column: 1 / -1;
    width: 100%;
  }
  .tournament-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tournament-summary > div { padding: 10px; }
  .tournament-summary strong { font-size: 1.45rem; }
  .tournament-card { grid-template-columns: 82px minmax(0, 1fr); }
  .tournament-art,
  .tournament-art img { min-height: 190px; }
  .tournament-copy { padding: 11px; }
  .tournament-title-row { display: grid; gap: 5px; }
  .tournament-title-row strong { max-width: none; text-align: left; }
  .tournament-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-actions button { min-height: 38px; }
  #tournamentForm { grid-template-columns: 1fr; }
  #tournamentForm label.wide,
  #tournamentForm footer { grid-column: auto; }
}

@media (max-width: 360px) {
  .tournament-summary { grid-template-columns: 1fr; }
  .tournament-card { grid-template-columns: 1fr; }
  .tournament-art,
  .tournament-art img { min-height: 132px; max-height: 132px; }
  .tournament-art::after { background: linear-gradient(180deg, transparent 50%, rgba(5,6,12,.92)); }
}

.level-token b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  clip-path: inherit;
  background: #11131e;
  color: white;
  font-size: 1.4rem;
}

.xp-wide {
  display: grid;
  gap: 7px;
}

.xp-wide div {
  display: flex;
  justify-content: space-between;
  color: white;
  gap: 10px;
}

.xp-wide em,
.xp-wide small {
  color: rgba(255,255,255,.82);
  font-style: normal;
}

.xp-wide > span {
  height: 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.xp-wide > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2f5f, #f4b400, #00ff55);
}

.profile-sharecard .profile-section {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(3, 4, 7, .76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 42px rgba(0,0,0,.35);
}

.profile-sharecard .profile-section-head {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 8px;
}

.profile-sharecard .profile-section-head span {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.profile-sharecard .profile-section-head span::before {
  background: #ff2f3f;
}

.profile-sharecard .profile-section:has(.main-game-card),
.profile-sharecard .profile-section:has(.profile-clips),
.profile-sharecard .profile-section:has(.style-tabs),
.profile-sharecard .profile-section:has(.looking-grid),
.profile-sharecard .profile-section:has(.library-search),
.profile-sharecard .profile-section:has(.psn-games),
.profile-sharecard .profile-section:has(.identity-loadout),
.profile-sharecard .profile-section:has(.profile-account-badge-grid),
.profile-sharecard .account-zone {
  display: none;
}

.profile-sharecard .profile-showcase {
  grid-column: span 1;
}

.profile-sharecard .showcase-grid {
  background: transparent;
}

.profile-sharecard .showcase-grid div {
  min-height: 42px;
  padding: 0;
  background: transparent;
}

.profile-sharecard .showcase-grid span {
  font-size: .98rem;
}

.profile-sharecard .showcase-grid b {
  font-size: 1rem;
}

.about-main-game {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.about-main-game > span {
  color: white;
  text-transform: uppercase;
  font-weight: 950;
}

.about-main-game > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.about-main-game img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
}

.about-main-game p {
  display: grid;
  gap: 5px;
  margin: 0;
}

.about-main-game b {
  color: white;
  font-size: 1.05rem;
}

.about-main-game em {
  color: rgba(255,255,255,.86);
  font-style: normal;
}

.about-main-game strong {
  color: #ff2f3f;
}

.profile-sharecard .trust-profile-card {
  grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));
}

.profile-sharecard .trust-profile-card::after {
  content: none;
  display: none;
}

.profile-sharecard .trust-badge {
  min-height: 120px;
  border-color: rgba(0,255,85,.28);
  background: radial-gradient(circle, rgba(0,255,85,.18), rgba(0,0,0,.38));
  color: #00ff55;
  font-size: 1rem;
}

.profile-sharecard .trust-badge b {
  font-size: 3rem;
}

.profile-sharecard .stats-row {
  grid-template-columns: 130px minmax(0, 1fr);
  padding: 14px;
}

.profile-sharecard .stats-row img {
  width: 120px;
  height: 90px;
}

.profile-sharecard .stats-row div {
  display: grid;
  gap: 10px;
}

.profile-sharecard .stats-row div b {
  color: #ff2f3f;
  font-size: 1.4rem;
}

.profile-sharecard .stats-row p {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: white;
  font-size: 1rem;
}

.profile-sharecard .stats-row i {
  display: none;
}

@media (min-width: 480px) {
  .profile-sharecard {
    grid-template-columns: 1fr 1fr;
  }

  .profile-sharecard .profile-hero,
  .profile-sharecard .profile-xp-card,
  .profile-sharecard .profile-section:has(.trust-profile-card),
  .profile-sharecard .profile-section:has(.stats-row) {
    grid-column: 1 / -1;
  }
}

/* Patch 3.3: BattleOS faction command center and profile editor preview cleanup */
body .faction-war-room {
  gap: 14px !important;
}

body .faction-war-room .faction-room-card {
  order: 2;
  border-color: color-mix(in srgb, var(--faction-accent, #39ff88) 58%, rgba(255,255,255,.1)) !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--faction-accent, #39ff88) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(4, 7, 14, .92), rgba(0, 0, 0, .88)) !important;
}

body .faction-war-room .faction-battle-graph {
  order: 3;
}

body .faction-war-room .faction-count-grid {
  order: 4;
}

body .faction-war-room .sector-board {
  order: 5;
}

body .faction-room-card {
  grid-template-columns: 1fr !important;
}

body .faction-room-chat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #39ff88) 42%, rgba(255,255,255,.12)) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--faction-accent, #39ff88) 14%, transparent), rgba(255,255,255,.025)),
    rgba(0,0,0,.35) !important;
}

body .faction-room-chat em {
  white-space: nowrap !important;
}

body .faction-roster:empty {
  display: none !important;
}

body .profile-edit-hub .profile-editor-preview {
  min-height: 198px !important;
  grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) !important;
  align-items: center !important;
  overflow: hidden !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  opacity: .72 !important;
}

body .profile-edit-hub .profile-editor-id {
  position: relative !important;
  z-index: 4 !important;
  align-self: center !important;
  min-width: 0 !important;
  padding: 10px 10px 10px 0 !important;
}

body .profile-edit-hub .profile-editor-badge-row {
  margin-bottom: 8px !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  max-width: 100% !important;
  font-size: clamp(30px, 9vw, 52px) !important;
  line-height: .85 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.72), 0 0 18px rgba(255,255,255,.14) !important;
}

body .profile-edit-hub .profile-editor-id p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 32ch !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}

body .profile-edit-hub .profile-editor-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body .profile-edit-hub .profile-editor-xp {
  margin-top: 8px !important;
  max-width: 100% !important;
}

body .profile-edit-loadout-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .profile-edit-loadout-strip div {
  min-height: 54px !important;
  padding: 9px 10px !important;
}

body .profile-edit-loadout-strip b {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr) !important;
    min-height: 184px !important;
    padding: 14px !important;
  }

  body .profile-edit-hub .profile-editor-id h2 {
    font-size: clamp(27px, 8.6vw, 40px) !important;
  }

  body .faction-room-identity {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  body .faction-room-identity img {
    width: 68px !important;
    height: 68px !important;
  }

  body .faction-room-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .faction-room-stats article {
    padding: 8px 6px !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .profile-sharecard .profile-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .profile-sharecard .profile-frame {
    max-width: 260px;
  }

  .profile-sharecard .profile-id {
    padding: 0;
  }

  .profile-sharecard .profile-edit-btn {
    top: 12px;
    right: 12px;
  }

  .profile-sharecard .profile-xp-card,
  .profile-sharecard .stats-row,
  .about-main-game > div,
  .profile-sharecard .trust-profile-card {
    grid-template-columns: 1fr;
  }
}

/* Profile redesign: clean gamer identity layout without changing profile data flows. */
.profile-page {
  display: grid;
  gap: 14px;
  padding: 14px 14px calc(var(--safe-bottom) + 96px);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, .14), transparent 240px),
    radial-gradient(circle at 100% 10%, rgba(255, 47, 95, .08), transparent 220px),
    #050712;
}

.profile-page .profile-section {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(18, 22, 42, .86), rgba(10, 13, 27, .92));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .24);
}

.profile-page .profile-section-head {
  margin-bottom: 12px;
  color: #f5f7ff;
  font-size: .78rem;
  letter-spacing: .04em;
}

.profile-page .profile-section-head span {
  padding-left: 10px;
}

.profile-page .profile-section-head span::before {
  top: 2px;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff2f5f, #8b5cf6);
}

.profile-page .profile-section-head em {
  color: #9ca3af;
  font-size: .72rem;
  letter-spacing: .03em;
}

.profile-page .profile-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 47, 95, .18), transparent 180px),
    linear-gradient(135deg, rgba(18, 22, 42, .95), rgba(8, 10, 22, .98));
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.profile-page .profile-hero::after {
  display: none;
}

.profile-page .profile-edit-btn {
  top: 14px;
  right: 14px;
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
  font-size: .66rem;
  letter-spacing: .04em;
}

.profile-page .profile-frame {
  width: 92px;
  height: 92px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 47, 95, .75), rgba(139, 92, 246, .72));
  box-shadow: 0 0 28px rgba(139, 92, 246, .2);
}

.profile-page .profile-avatar-xl {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.profile-page .founder-animated-frame {
  border-color: rgba(255, 200, 87, .8);
  background: conic-gradient(from 120deg, #ffd56d, #ff2f5f, #8b5cf6, #ffd56d);
  box-shadow: 0 0 30px rgba(255, 200, 87, .22);
}

.profile-page .profile-id {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding-right: 94px;
}

.profile-page .profile-id h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: .9;
  letter-spacing: 0;
}

.profile-page .profile-id p {
  margin: 0;
  color: #b9c0d4;
  font-size: .9rem;
  line-height: 1.35;
}

.profile-page .profile-id p b {
  color: #ffffff;
}

.profile-page .profile-id p span {
  width: 4px;
  height: 4px;
  margin: 0 8px;
  display: inline-block;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  vertical-align: middle;
}

.profile-page .profile-id .profile-bio-line {
  display: block;
  max-width: 34ch;
  margin: 0;
  color: #d4d9ea;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.4;
}

.profile-page .profile-id .profile-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: #9ca3af;
  font-size: .86rem;
  font-weight: 800;
}

.profile-page .profile-id .profile-meta-line b {
  color: #ffffff;
}

.profile-page .profile-id .profile-meta-line span {
  flex: 0 0 4px;
  margin: 0;
}

.profile-page .profile-frame::before,
.profile-page .profile-frame::after {
  border-radius: 26px;
}

.profile-page .profile-badges {
  gap: 6px;
  padding-right: 0;
}

.profile-page .cosmetic {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .075);
  color: #dfe5ff;
  font-size: .62rem;
  letter-spacing: .04em;
}

.profile-page .cosmetic.verified {
  width: 24px;
  min-width: 24px;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #ff2f8f, #8b5cf6);
}

.profile-page .cosmetic.founder {
  color: #160e00;
  background: linear-gradient(135deg, #ffd56d, #ffb21f);
  border-color: rgba(255, 213, 109, .72);
}

.profile-page .cosmetic.live {
  color: #06120c;
  background: #00ff9c;
  border-color: rgba(0, 255, 156, .7);
}

.profile-page .xp-panel {
  margin: 2px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}

.profile-page .xp-panel div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-page .xp-panel b {
  color: #ffffff;
}

.profile-page .xp-panel em,
.profile-page .xp-panel small {
  color: #9ca3af;
  font-style: normal;
}

.profile-page .xp-panel > span {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}

.profile-page .xp-panel > span i {
  border-radius: inherit;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6);
  box-shadow: 0 0 16px rgba(139, 92, 246, .38);
}

.profile-page .profile-tags {
  display: none;
}

.profile-page .public-account-badges {
  margin-top: 2px;
}

.profile-page .public-account-badge {
  min-height: 28px;
  padding: 4px 9px 4px 4px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .055);
  font-size: .72rem;
}

.profile-page .account-provider-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: .58rem;
}

.profile-page .account-provider-icon.image-icon {
  padding: 3px;
}

.profile-page .blaze-live-hero {
  margin: 0;
  min-height: 30px;
}

.profile-page .showcase-grid,
.profile-page .identity-loadout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  overflow: hidden;
}

.profile-page .showcase-grid div,
.profile-page .identity-loadout div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.profile-page .showcase-grid div:last-child,
.profile-page .identity-loadout div:last-child {
  border-bottom: 0;
}

.profile-page .showcase-grid span,
.profile-page .identity-loadout span {
  color: #9ca3af;
  text-transform: none;
  font-size: .86rem;
  letter-spacing: 0;
}

.profile-page .showcase-grid b,
.profile-page .identity-loadout b {
  color: #ffffff;
  font-size: .92rem;
}

.profile-page .main-game-card {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(5, 7, 18, .2), rgba(5, 7, 18, .86)),
    linear-gradient(135deg, rgba(255, 47, 95, .1), rgba(139, 92, 246, .09));
  overflow: hidden;
}

.profile-page .main-game-card img {
  width: 82px;
  height: 108px;
  border-radius: 12px;
}

.profile-page .main-game-card small {
  color: #ff7b9d;
  font-size: .68rem;
  letter-spacing: .08em;
}

.profile-page .main-game-card h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.45rem, 5vw, 2rem);
  letter-spacing: 0;
}

.profile-page .stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.profile-page .stat-line b {
  font-size: .92rem;
}

.profile-page .stat-line small {
  color: #8f98b5;
  font-size: .62rem;
  letter-spacing: .04em;
}

.profile-page .platform-name {
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #c7b7ff;
}

.profile-page .profile-clips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-page .clip-card {
  min-height: 142px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

.profile-page .clip-card::after {
  background: linear-gradient(180deg, transparent, rgba(5, 7, 18, .9));
}

.profile-page .clip-card span {
  color: #c8b5ff;
  font-size: .64rem;
  letter-spacing: .06em;
}

.profile-page .clip-card b {
  font-size: .92rem;
  line-height: 1.2;
}

.profile-page .profile-copy {
  min-height: 0;
  margin: 0;
  color: #d5dbef;
  font-size: .96rem;
  line-height: 1.55;
}

.profile-page .style-tabs,
.profile-page .looking-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-page .style-tabs span,
.profile-page .looking-grid span {
  flex: 0 1 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #aeb7d1;
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
}

.profile-page .style-tabs span.active,
.profile-page .looking-grid span.active {
  color: #ffffff;
  border-color: rgba(139, 92, 246, .4);
  background: linear-gradient(135deg, rgba(255, 47, 95, .9), rgba(139, 92, 246, .9));
  box-shadow: 0 0 20px rgba(139, 92, 246, .16);
}

.profile-page .looking-grid span::before {
  display: none;
}

.profile-page .trust-profile-card {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-page .trust-profile-card > * {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}

.profile-page .trust-badge {
  width: 100%;
  min-height: 100%;
  justify-content: center;
  border-radius: 14px;
}

.profile-page .trust-profile-card div b {
  color: #00ff9c;
  font-size: 1.22rem;
}

.profile-page .trust-profile-card div span {
  color: #9ca3af;
  font-size: .78rem;
}

.profile-page .endorsement-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-page .endorsement-grid span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #aeb7d1;
  font-size: .78rem;
}

.profile-page .endorsement-grid b {
  color: #00ff9c;
}

.profile-page .library-search {
  height: 42px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  padding: 0 14px;
}

.profile-page .library-row,
.profile-page .stats-row,
.profile-page .psn-game-row {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}

.profile-page .library-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 58px;
  margin-top: 8px;
  padding: 8px;
}

.profile-page .library-row img,
.profile-page .stats-row img,
.profile-page .psn-game-row img {
  width: 48px;
  height: 58px;
  border-radius: 10px;
}

.profile-page .library-row span {
  border-radius: 999px;
  color: #ffd7df;
  background: rgba(255, 47, 95, .16);
  font-size: .64rem;
  letter-spacing: .04em;
}

.profile-page .stats-row {
  margin-top: 8px;
  padding: 9px;
}

.profile-page .stats-row p {
  color: #aeb7d1;
}

.profile-page .profile-empty {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
}

.profile-page .account-zone {
  padding-bottom: 16px;
}

.bottom-nav {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(8, 10, 20, .94);
  box-shadow: 0 -14px 38px rgba(0, 0, 0, .34);
}

.nav-btn {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}

.nav-btn.active {
  border-color: rgba(139, 92, 246, .45);
  background: linear-gradient(135deg, rgba(255, 47, 95, .18), rgba(139, 92, 246, .2));
  color: #ffffff;
}

@media (max-width: 430px) {
  .profile-page {
    padding-inline: 12px;
    gap: 12px;
  }

  .profile-page .profile-hero {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .profile-page .profile-frame {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }

  .profile-page .profile-avatar-xl {
    border-radius: 16px;
  }

  .profile-page .profile-id {
    padding-right: 0;
    padding-top: 36px;
  }

  .profile-page .profile-id h1 {
    font-size: clamp(1.35rem, min(8.5vw, calc(116cqw / max(var(--profile-name-chars, 7), 7))), 2.35rem);
  }

  .profile-page .profile-edit-btn,
  .profile-page .public-preview-chip {
    top: 12px;
    right: 12px;
  }

  .profile-page .profile-clips,
  .profile-page .trust-profile-card {
    grid-template-columns: 1fr;
  }

  .profile-page .main-game-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .profile-page .main-game-card img {
    width: 68px;
    height: 92px;
  }

  .profile-page .platform-name {
    display: none;
  }
}

.psn-games {
  display: grid;
  gap: 8px;
}

.psn-game-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 140, 255, .24);
  background: rgba(47, 140, 255, .06);
}

.psn-game-row img {
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}

.psn-game-row span {
  color: #9be9ff;
  font-size: .68rem;
  font-weight: 1000;
}

.psn-game-row em {
  grid-column: 2 / -1;
  color: #7780a3;
  font-size: .68rem;
  font-style: normal;
  text-transform: uppercase;
}

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tab { padding: 10px 6px; color: var(--muted); font-weight: 850; }
.tab.active { color: white; border-color: rgba(47, 140, 255, .45); background: rgba(47, 140, 255, .11); }

.swipe-stage {
  height: min(65vh, 620px);
  min-height: 500px;
  position: relative;
}

.discover-hub {
  display: grid;
  gap: 22px;
  margin: -18px -16px 0;
  padding: 16px 16px 96px;
  background: linear-gradient(180deg, #070711, #05060d 38%, #03040a);
}

.discover-greeting {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

.discover-greeting span, .discover-section h2, .matchmaking-card span {
  display: block;
  color: #ff4058;
  text-transform: uppercase;
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .28em;
}

.discover-greeting h1 {
  margin: 6px 0 0;
  font-size: 1.55rem;
  line-height: .9;
  font-weight: 1000;
}

.discover-status {
  min-width: 100px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #9aa3bf;
  font-weight: 900;
}

.matchmaking-card {
  position: relative;
  min-height: 250px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  color: white;
  border: 1px solid rgba(255, 49, 79, .76);
  border-radius: 16px;
  background:
    radial-gradient(circle at 68% 56%, rgba(168, 85, 247, .44), transparent 130px),
    linear-gradient(135deg, rgba(255, 49, 79, .28), rgba(38, 9, 72, .95) 42%, rgba(8, 10, 26, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 26px 60px rgba(255, 49, 79, .14);
}

.matchmaking-card strong {
  font-size: 2.15rem;
  line-height: .9;
  text-transform: uppercase;
  font-weight: 1000;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .8);
}

.matchmaking-card em {
  color: #d6c2ff;
  font-style: normal;
  font-weight: 800;
}

.matchmaking-card img {
  position: absolute;
  left: 20px;
  bottom: 18px;
  width: 58px;
  height: 86px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.matchmaking-card i {
  position: absolute;
  right: 20px;
  top: 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 49, 79, .72);
  border-radius: 10px;
  background: rgba(255, 49, 79, .18);
  color: #ffd5dc;
  font-size: 2rem;
  font-style: normal;
  line-height: 1;
}

.discover-section {
  display: grid;
  gap: 12px;
}

.discover-section h2 {
  color: #686f9d;
  margin: 0;
}

.discover-section h2.live-dot {
  color: #27f58d;
}

.discover-section h2.live-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #24f58a;
  box-shadow: 0 0 12px rgba(36, 245, 138, .78);
}

.marathon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.marathon-grid div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}

.marathon-grid div:nth-child(2) { border-color: rgba(23, 218, 255, .25); }
.marathon-grid div:nth-child(3) { border-color: rgba(255, 200, 87, .28); }
.marathon-grid span { font-size: .92rem; }
.marathon-grid b {
  color: #b888ff;
  font-size: 1.3rem;
  line-height: 1;
}
.marathon-grid div:nth-child(2) b { color: #22e0ff; }
.marathon-grid div:nth-child(3) b { color: #ffd42a; }
.marathon-grid small {
  color: #6f7698;
  text-transform: uppercase;
  font-size: .63rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.ready-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ready-row::-webkit-scrollbar { display: none; }

.ready-player {
  width: 62px;
  display: grid;
  gap: 4px;
  justify-items: center;
  color: white;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}

.ready-player img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(37, 245, 154, .65);
  box-shadow: 0 0 0 2px rgba(37, 245, 154, .12);
}

.ready-player b {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
}

.ready-player small {
  color: #21ff8d;
  text-transform: uppercase;
  font-size: .55rem;
  font-weight: 1000;
}

.live-squad-list {
  display: grid;
  gap: 8px;
}

.discover-squad-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid #2f8cff;
  border-radius: 10px;
  background: rgba(255, 255, 255, .048);
}

.discover-squad-row.joinable { border-left-color: var(--red); }

.discover-squad-row img, .discover-game-fallback {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(168, 85, 247, .18);
}

.discover-game-fallback {
  display: grid;
  place-items: center;
  color: #a884ff;
}

.discover-squad-row h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.discover-squad-row p {
  margin: 0;
  color: #8e7cff;
  font-size: .72rem;
  font-weight: 850;
}

.discover-squad-row p span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px;
  border-radius: 50%;
  background: #23f58a;
}

.discover-squad-row p b {
  color: #6f7698;
}

.discover-squad-row button {
  min-width: 64px;
  height: 34px;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .06em;
}

.discover-squad-row .open {
  border: 1px solid rgba(47, 140, 255, .74);
  background: rgba(47, 140, 255, .22);
  color: #b9d8ff;
}

.discover-squad-row .join {
  border: 1px solid rgba(255, 49, 79, .72);
  background: rgba(255, 49, 79, .18);
  color: #ffd3da;
}

.discover-event {
  min-height: 218px;
  display: grid;
  align-content: end;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -130px 90px rgba(0, 0, 0, .86);
}

.discover-event div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.discover-event span, .discover-event time, .discover-event em {
  width: max-content;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255, 49, 79, .92);
  color: white;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.discover-event time {
  background: rgba(255, 255, 255, .12);
  color: #d7ddf8;
}

.discover-event strong {
  font-size: 1.35rem;
  text-transform: uppercase;
}

.discover-event p {
  margin: 0;
  color: #e8eaff;
  font-size: .82rem;
}

.discover-event em {
  background: linear-gradient(135deg, var(--red), var(--purple));
  font-style: normal;
}

.swipe-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  touch-action: pan-y;
  transition: transform .24s ease, opacity .24s ease;
}

.swipe-card.out-right { transform: translateX(120%) rotate(10deg); opacity: 0; }
.swipe-card.out-left { transform: translateX(-120%) rotate(-10deg); opacity: 0; }
.player-art {
  background-size: cover;
  background-position: center;
  position: relative;
}
.player-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.82));
}
.player-info {
  position: relative;
  margin-top: -160px;
  padding: 18px;
  align-self: end;
  z-index: 1;
  min-width: 0;
}
.player-info h2 {
  margin: 0;
  font-size: clamp(1.65rem, 8vw, 2.3rem);
  text-transform: uppercase;
  line-height: .9;
  overflow-wrap: anywhere;
}
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.modal, .drawer {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, .72);
  display: grid;
  align-items: end;
  padding-top: var(--safe-top);
}
.modal-card, .drawer-card {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--safe-top) - 8px);
  overflow: auto;
  border-radius: 14px 14px 0 0;
  padding: 20px 18px calc(var(--safe-bottom) + 12px);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 49, 79, .12), transparent 180px),
    linear-gradient(180deg, #0b1020, #060912 72%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, .55);
}

.profile-edit-form,
.profile-edit-menu {
  gap: 16px;
}

.profile-edit-form > .row:first-child,
.profile-edit-menu > .row:first-child {
  align-items: center;
  padding-bottom: 4px;
}

.profile-edit-form h2,
.profile-edit-menu h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1;
}

.profile-edit-form > .row:first-child .ghost,
.profile-edit-menu > .row:first-child .ghost {
  min-height: 38px;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
}

.profile-edit-form .field {
  margin-bottom: 0;
}

.profile-edit-form .field label {
  color: #aab2cc;
  letter-spacing: .08em;
}

.profile-edit-form .primary {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border-radius: 8px;
}

.profile-editor-modal {
  align-items: stretch;
  padding: max(var(--safe-top), 10px) 10px 0;
}

.profile-editor-modal .modal-card {
  max-width: 520px;
  max-height: calc(100vh - max(var(--safe-top), 10px));
  border-radius: 22px 22px 0 0;
  padding: 16px 14px calc(var(--safe-bottom) + 18px);
  background:
    radial-gradient(circle at 18% -4%, rgba(255, 31, 49, .26), transparent 190px),
    radial-gradient(circle at 92% 12%, rgba(139, 92, 246, .2), transparent 210px),
    linear-gradient(180deg, rgba(6, 7, 15, .98), rgba(2, 3, 7, .98));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 -24px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}

.profile-edit-hub,
.profile-edit-detail {
  display: grid;
  gap: 14px;
  font-family: "Fragmatch UI", Rajdhani, system-ui, sans-serif;
}

.profile-edit-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.profile-edit-topbar > div:first-child {
  grid-column: span 2;
}

.profile-edit-detail .profile-edit-topbar > div:first-child {
  grid-column: auto;
}

.profile-edit-topbar span {
  display: block;
  color: #ff2f49;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.profile-edit-topbar h2 {
  margin: 0;
  color: #fff;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: .86;
  letter-spacing: .02em;
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

.profile-edit-topbar .ghost {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 800;
}

.profile-editor-preview {
  --cosmetic-accent: #ff2f49;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 176px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--cosmetic-accent) 55%, rgba(255,255,255,.16));
  background:
    radial-gradient(circle at 14% 28%, color-mix(in srgb, var(--cosmetic-accent) 32%, transparent), transparent 130px),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(3, 5, 12, .9);
  box-shadow: 0 0 34px color-mix(in srgb, var(--cosmetic-accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
}

.profile-editor-preview-bg {
  position: absolute;
  inset: 0;
  opacity: .32;
  background:
    linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--cosmetic-accent) 24%, transparent) 43% 44%, transparent 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

.profile-editor-avatar {
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 1;
  width: 112px;
  aspect-ratio: 1;
  padding: 5px;
  border-radius: 28px;
  border: 2px solid var(--cosmetic-accent);
  background: #05060c;
  box-shadow: 0 0 28px color-mix(in srgb, var(--cosmetic-accent) 55%, transparent);
}

.profile-editor-avatar.has-frame-asset {
  aspect-ratio: var(--frame-aspect, .86 / 1);
  animation: none !important;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-editor-avatar-mask {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #05060c;
}

.profile-editor-avatar.has-frame-asset .profile-editor-avatar-mask {
  position: absolute;
  inset: var(--avatar-safe-top, 10%) var(--avatar-safe-right, 10%) var(--avatar-safe-bottom, 10%) var(--avatar-safe-left, 10%);
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: var(--avatar-mask-radius, 18px);
}

.profile-editor-avatar-mask img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

.profile-editor-frame-asset {
  position: absolute !important;
  inset: 0;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: fill;
  border-radius: 0 !important;
  pointer-events: none;
  filter: none;
}

.profile-editor-avatar.has-frame-asset::before {
  display: none !important;
}

.profile-editor-avatar i {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #00ff62;
  border: 3px solid #05060c;
  box-shadow: 0 0 14px rgba(0,255,98,.8);
}

.profile-editor-id {
  position: relative;
  z-index: 4;
  min-width: 0;
}

.profile-editor-badge-row,
.profile-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.profile-editor-badge-row span,
.profile-editor-meta span,
.profile-editor-meta b {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-editor-badge-row .verified {
  width: 28px;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #ff2f49, #a855f7);
}

.profile-editor-id h2 {
  margin: 10px 0 6px;
  color: #fff;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: clamp(2.4rem, 12vw, 4.2rem);
  line-height: .82;
  letter-spacing: .02em;
  text-shadow: 0 0 22px rgba(255,255,255,.16);
}

.profile-editor-id p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.2;
}

.profile-editor-xp {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}

.profile-editor-xp span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2438, #ffcc28, #00ff62, var(--cosmetic-accent));
}

.profile-edit-loadout-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-edit-loadout-strip div,
.progression-card div,
.rep-metrics div {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.profile-edit-loadout-strip span,
.progression-card span,
.rep-metrics span {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-edit-loadout-strip b,
.progression-card b,
.rep-metrics b {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: .98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-edit-tile {
  position: relative;
  min-width: 0;
  min-height: 136px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(255,47,73,.08), rgba(139,92,246,.05)),
    rgba(255,255,255,.035);
  color: #fff;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.profile-edit-tile:hover,
.profile-edit-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,47,73,.72);
  box-shadow: 0 0 28px rgba(255,47,73,.2);
}

.profile-edit-tile span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,47,73,.55);
  background: rgba(255,47,73,.12);
  color: #ff344d;
  font-size: .86rem;
  font-weight: 900;
}

.profile-edit-tile b {
  font-size: 1.05rem;
  line-height: 1;
}

.profile-edit-tile em {
  min-height: 34px;
  color: rgba(255,255,255,.68);
  font-style: normal;
  font-size: .86rem;
  line-height: 1.15;
}

.profile-edit-tile small {
  align-self: end;
  color: #d8ddff;
  font-weight: 800;
}

.cosmetic-editor {
  display: grid;
  gap: 14px;
}

.progression-card,
.rep-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cosmetic-loadout-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
}

.cosmetic-loadout-panel b {
  color: #fff;
  font-size: 1.08rem;
}

.cosmetic-loadout-panel span,
.cosmetic-loadout-panel em {
  color: rgba(255,255,255,.62);
  font-style: normal;
}

.loadout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.loadout-chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(168,85,247,.4);
  background: rgba(168,85,247,.12);
  color: #fff;
  font-weight: 800;
}

.takeover-theme-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,115,4,.36);
  background:
    linear-gradient(135deg, rgba(255,115,4,.18), rgba(0,0,0,.2)),
    rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.takeover-theme-control span {
  display: block;
  color: #FF7304;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.takeover-theme-control b {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.1;
}

.takeover-theme-control p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.25;
}

.takeover-toggle {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,115,4,.72);
  background: rgba(255,115,4,.12);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(255,115,4,.16);
}

.takeover-theme-control.active {
  border-color: rgba(255,115,4,.82);
  box-shadow: 0 0 26px rgba(255,115,4,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

.takeover-theme-control.active .takeover-toggle {
  background: #FF7304;
  color: #160801;
}

.takeover-theme-control.locked {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  box-shadow: none;
}

.takeover-theme-control.locked span,
.takeover-theme-control.locked b {
  color: rgba(255,255,255,.58);
}

.takeover-theme-control.locked .takeover-toggle {
  opacity: .55;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  box-shadow: none;
}

.cosmetic-picker > label {
  color: #fff;
  font-size: 1rem;
}

.cosmetic-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cosmetic-pick {
  position: relative;
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 12px 12px 36px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.cosmetic-pick input {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.cosmetic-pick b {
  color: #fff;
  line-height: 1;
}

.cosmetic-pick span {
  color: rgba(255,255,255,.62);
  font-size: .78rem;
}

.cosmetic-pick:has(input:checked) {
  border-color: var(--cosmetic-accent, #ff2f49);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cosmetic-accent, #ff2f49) 28%, transparent);
}

.cosmetic-pick.locked {
  opacity: .72;
  cursor: pointer;
  border-style: dashed;
}

.cosmetic-pick.locked:hover,
.cosmetic-pick.locked:has(input:checked) {
  opacity: 1;
}

.cosmetic-pick.locked:has(input:checked)::after {
  content: "PREVIEW";
  position: absolute;
  top: 5px;
  right: 7px;
  color: #ffca57;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.rarity-common { --cosmetic-accent: #b8c1d9; }
.rarity-rare { --cosmetic-accent: #38bdf8; }
.rarity-epic { --cosmetic-accent: #a855f7; }
.rarity-legendary { --cosmetic-accent: #f6c744; }
.rarity-mythic { --cosmetic-accent: #ff2f49; }

.theme-neon-purple { --cosmetic-accent: #a855f7; }
.theme-crimson-red { --cosmetic-accent: #ff314f; }
.theme-toxic-green { --cosmetic-accent: #25f59a; }
.theme-electric-blue { --cosmetic-accent: #2f8cff; }
.theme-recruiter-neon { --cosmetic-accent: #00ff9c; }
.theme-cyber-gold { --cosmetic-accent: #ffc857; }
.theme-plasma-pink { --cosmetic-accent: #ff4fd8; }
.theme-arctic-white { --cosmetic-accent: #d8f3ff; }
.theme-obsidian-black { --cosmetic-accent: #7a8298; }
.theme-vaporwave { --cosmetic-accent: #ff71ce; }
.theme-synthwave { --cosmetic-accent: #f97316; }
.theme-rgb-reactive { --cosmetic-accent: #67e8f9; }
.theme-takeover { --cosmetic-accent: #FF7304; }

.theme-vaporwave.profile-editor-preview,
.theme-synthwave.profile-editor-preview,
.theme-rgb-reactive.profile-editor-preview {
  animation: themeFlow 7s ease-in-out infinite alternate;
}

.profile-sharecard.profile-page[class*="theme-"] {
  --profile-theme-accent: var(--cosmetic-accent, #ff314f);
}

.profile-sharecard.profile-page[class*="theme-"] .profile-hero,
.public-profile-page[class*="theme-"] .profile-hero {
  border-color: color-mix(in srgb, var(--profile-theme-accent) 48%, rgba(255,255,255,.12));
  box-shadow:
    inset 0 0 44px color-mix(in srgb, var(--profile-theme-accent) 10%, transparent),
    0 0 34px color-mix(in srgb, var(--profile-theme-accent) 18%, transparent);
}

.profile-sharecard.profile-page[class*="theme-"] .profile-section,
.public-profile-page[class*="theme-"] .profile-section {
  border-color: color-mix(in srgb, var(--profile-theme-accent) 32%, rgba(255,255,255,.08));
}

.profile-sharecard.profile-page[class*="theme-"] .profile-section-head span::before,
.public-profile-page[class*="theme-"] .profile-section-head span::before {
  background: var(--profile-theme-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--profile-theme-accent) 70%, transparent);
}

.profile-sharecard.profile-page[class*="theme-"] .profile-edit-btn,
.profile-sharecard.profile-page[class*="theme-"] .showcase-cosmetics-btn,
.public-profile-page[class*="theme-"] .profile-blaze-cta {
  border-color: color-mix(in srgb, var(--profile-theme-accent) 65%, rgba(255,255,255,.16));
  box-shadow: 0 0 24px color-mix(in srgb, var(--profile-theme-accent) 24%, transparent);
}

.profile-sharecard.profile-page[class*="theme-"] .xp-panel span i,
.profile-sharecard.profile-page[class*="theme-"] .xp-wide span i,
.public-profile-page[class*="theme-"] .xp-panel span i,
.public-profile-page[class*="theme-"] .xp-wide span i {
  background: linear-gradient(90deg, #ff314f, var(--profile-theme-accent), #8b5cf6);
}

.theme-cyber-gold.profile-sharecard.profile-page,
.theme-cyber-gold.public-profile-page {
  --profile-theme-accent: #ffc857;
}

.theme-toxic-green.profile-sharecard.profile-page,
.theme-toxic-green.public-profile-page {
  --profile-theme-accent: #25f59a;
}

.theme-electric-blue.profile-sharecard.profile-page,
.theme-electric-blue.public-profile-page {
  --profile-theme-accent: #2f8cff;
}

.theme-plasma-pink.profile-sharecard.profile-page,
.theme-plasma-pink.public-profile-page {
  --profile-theme-accent: #ff4fd8;
}

.theme-vaporwave.profile-sharecard.profile-page,
.theme-synthwave.profile-sharecard.profile-page,
.theme-rgb-reactive.profile-sharecard.profile-page,
.theme-vaporwave.public-profile-page,
.theme-synthwave.public-profile-page,
.theme-rgb-reactive.public-profile-page {
  animation: themeFlow 7s ease-in-out infinite alternate;
}

.profile-editor-preview.border-neon-red .profile-editor-avatar { --cosmetic-accent: #ff314f; }
.profile-editor-preview.border-neon-purple .profile-editor-avatar { --cosmetic-accent: #a855f7; }
.profile-editor-preview.border-neon-blue .profile-editor-avatar { --cosmetic-accent: #2f8cff; }
.profile-editor-preview.border-neon-green .profile-editor-avatar { --cosmetic-accent: #25f59a; }
.profile-editor-preview.border-neon-gold .profile-editor-avatar,
.profile-editor-preview.border-founder-gold .profile-editor-avatar,
.profile-editor-preview.border-founder-ultra .profile-editor-avatar,
.profile-editor-preview.border-legacy-founder .profile-editor-avatar { --cosmetic-accent: #ffc857; }
.profile-editor-preview.border-takeover-orange .profile-editor-avatar { --cosmetic-accent: #FF7304; }
.profile-editor-preview.border-squad-captain .profile-editor-avatar { --cosmetic-accent: #ff314f; }
.profile-editor-preview.border-black-frame .profile-editor-avatar { --cosmetic-accent: #6b7280; }

.profile-editor-preview[class*="border-"] .profile-editor-avatar {
  animation: none;
}

.profile-editor-preview.border-takeover-orange .profile-editor-avatar {
  animation: none;
  aspect-ratio: .86 / 1;
  border-color: #FF7304;
  background: rgba(4, 7, 10, .92);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(255,115,4,.5);
}

.profile-editor-preview.border-takeover-orange .profile-editor-avatar img {
  border-radius: 22px;
}

.profile-editor-preview.border-rgb-wave .profile-editor-avatar::before,
.profile-editor-preview.border-founder-ultra .profile-editor-avatar::before,
.profile-editor-preview.border-mythic-core .profile-editor-avatar::before,
.profile-editor-preview.border-hologram-frame .profile-editor-avatar::before,
.profile-editor-preview.border-lightning-ring .profile-editor-avatar::before,
.profile-editor-preview.border-takeover-orange .profile-editor-avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 32px;
  background: conic-gradient(#ff314f, #ffc857, #25f59a, #2f8cff, #a855f7, #ff314f);
  animation: none;
}

.profile-editor-preview.border-rgb-wave .profile-editor-avatar::before,
.profile-editor-preview.border-founder-ultra .profile-editor-avatar::before,
.profile-editor-preview.border-mythic-core .profile-editor-avatar::before,
.profile-editor-preview.border-hologram-frame .profile-editor-avatar::before,
.profile-editor-preview.border-lightning-ring .profile-editor-avatar::before {
  display: none;
}

.profile-editor-preview.border-takeover-orange .profile-editor-avatar::before {
  display: none;
  inset: -9px;
  z-index: 4;
  border-radius: 34px;
  background: url("/assets/cosmetics/frames/takeover-cartoon-af.svg") center / 100% 100% no-repeat;
  animation: none;
  pointer-events: none;
}

.profile-editor-preview.border-digital-glitch .profile-editor-avatar,
.profile-editor-preview.border-cyber-grid .profile-editor-avatar,
.profile-editor-preview.border-matrix-frame .profile-editor-avatar {
  background:
    repeating-linear-gradient(90deg, rgba(37,245,154,.18) 0 1px, transparent 1px 8px),
    #05060c;
}

.profile-editor-preview.border-ember-ring .profile-editor-avatar,
.profile-editor-preview.border-inferno-frame .profile-editor-avatar {
  --cosmetic-accent: #fb5b21;
}

.profile-editor-preview.border-void .profile-editor-avatar {
  --cosmetic-accent: #6d28d9;
}

.border-neon-red .profile-frame { --cosmetic-accent: #ff314f; }
.border-neon-purple .profile-frame { --cosmetic-accent: #a855f7; }
.border-neon-blue .profile-frame { --cosmetic-accent: #2f8cff; }
.border-neon-green .profile-frame { --cosmetic-accent: #25f59a; }
.border-neon-gold .profile-frame,
.border-founder-ultra .profile-frame,
.border-legacy-founder .profile-frame,
.border-mythic-core .profile-frame,
.border-champion .profile-frame { --cosmetic-accent: #ffc857; }
.border-squad-captain .profile-frame { --cosmetic-accent: #ff314f; }
.border-black-frame .profile-frame { --cosmetic-accent: #6b7280; }
.border-ember-ring .profile-frame,
.border-inferno-frame .profile-frame { --cosmetic-accent: #fb5b21; }
.border-void .profile-frame { --cosmetic-accent: #6d28d9; }
.border-takeover-orange .profile-frame { --cosmetic-accent: #FF7304; }

.profile-page[class*="border-"] .profile-frame,
.public-profile-page[class*="border-"] .profile-frame,
.swipe-card[class*="border-"] .profile-frame {
  border-color: var(--cosmetic-accent, #ff314f);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 14px color-mix(in srgb, var(--cosmetic-accent, #ff314f) 34%, transparent);
  animation: borderPulse 2.6s ease-in-out infinite;
}

.profile-page[class*="border-"] .profile-frame::after,
.public-profile-page[class*="border-"] .profile-frame::after,
.swipe-card[class*="border-"] .profile-frame::after,
.profile-editor-preview[class*="border-"] .profile-editor-avatar::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border-radius: inherit;
  background: #05060c;
  pointer-events: none;
}

.border-rgb-wave .profile-frame::before,
.border-founder-ultra .profile-frame::before,
.border-mythic-core .profile-frame::before,
.border-hologram-frame .profile-frame::before,
.border-lightning-ring .profile-frame::before,
.border-takeover-orange .profile-frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  background: conic-gradient(#ff314f, #ffc857, #25f59a, #2f8cff, #a855f7, #ff314f);
  animation: founderSpin 4s linear infinite;
}

.profile-sharecard.profile-page.border-rgb-wave .profile-frame::before,
.profile-sharecard.profile-page.border-founder-ultra .profile-frame::before,
.profile-sharecard.profile-page.border-mythic-core .profile-frame::before,
.profile-sharecard.profile-page.border-hologram-frame .profile-frame::before,
.profile-sharecard.profile-page.border-lightning-ring .profile-frame::before,
.profile-sharecard.profile-page.border-takeover-orange .profile-frame::before,
.public-profile-page.border-rgb-wave .profile-frame::before,
.public-profile-page.border-founder-ultra .profile-frame::before,
.public-profile-page.border-mythic-core .profile-frame::before,
.public-profile-page.border-hologram-frame .profile-frame::before,
.public-profile-page.border-lightning-ring .profile-frame::before,
.public-profile-page.border-takeover-orange .profile-frame::before {
  display: none !important;
}

.effect-particles.profile-editor-preview::after,
.effect-sparks.profile-editor-preview::after,
.effect-rgb-shimmer.profile-editor-preview::after,
.effect-holo-scan.profile-editor-preview::after,
.effect-glitch-overlay.profile-editor-preview::after,
.profile-sharecard.profile-page.effect-particles::after,
.profile-sharecard.profile-page.effect-sparks::after,
.profile-sharecard.profile-page.effect-rgb-shimmer::after,
.profile-sharecard.profile-page.effect-holo-scan::after,
.profile-sharecard.profile-page.effect-glitch-overlay::after,
.public-profile-page.effect-particles::after,
.public-profile-page.effect-sparks::after,
.public-profile-page.effect-rgb-shimmer::after,
.public-profile-page.effect-holo-scan::after,
.public-profile-page.effect-glitch-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 78%, #fff 0 1px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 8px, rgba(255,255,255,.18) 9px);
  animation: particlesFloat 5s ease-in-out infinite alternate;
}

.profile-sharecard.profile-page.effect-rgb-shimmer::after,
.public-profile-page.effect-rgb-shimmer::after {
  opacity: .22;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.25), transparent 65% 100%);
  animation: themeFlow 4.8s ease-in-out infinite alternate;
}

.profile-sharecard.profile-page.effect-glitch-overlay::after,
.public-profile-page.effect-glitch-overlay::after {
  opacity: .18;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,49,79,.38) 8px, transparent 10px);
  mix-blend-mode: screen;
}

.reputation-editor-card {
  display: grid;
  gap: 14px;
}

.rep-orb {
  width: 148px;
  height: 148px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #050705 54%, transparent 55%),
    conic-gradient(#00e72e 0 74%, rgba(255,255,255,.14) 74% 100%);
  border: 1px solid rgba(0,255,91,.35);
  box-shadow: 0 0 28px rgba(0,255,91,.22);
}

.rep-orb b {
  color: #00e72e;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 3.6rem;
  line-height: .8;
}

.rep-orb span {
  color: #fff;
  font-weight: 800;
}

@keyframes themeFlow {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(28deg); }
}

@keyframes particlesFloat {
  from { transform: translate3d(0, 0, 0); opacity: .18; }
  to { transform: translate3d(0, -10px, 0); opacity: .34; }
}

@media (max-width: 430px) {
  .profile-editor-preview {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .profile-editor-avatar {
    width: 94px;
    border-radius: 24px;
  }

  .profile-editor-id h2 {
    font-size: clamp(2rem, 13vw, 3rem);
  }

  .profile-edit-loadout-strip,
  .progression-card,
  .rep-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-edit-tile-grid,
  .cosmetic-pick-grid {
    grid-template-columns: 1fr;
  }

  .profile-edit-tile {
    min-height: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-editor-preview,
  .profile-editor-avatar,
  .profile-editor-avatar::before,
  .profile-editor-preview::after {
    animation: none !important;
  }
}

.comms {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(180px, 40%) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
}

.chat-list, .thread {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.chat-list-body, .messages {
  overflow: auto;
  min-height: 0;
  height: 100%;
  padding-right: 4px;
}
.chat-item { width: 100%; text-align: left; margin-bottom: 8px; }
.chat-item.active { border-color: rgba(37, 245, 154, .42); }

.thread {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
}
.thread > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.thread-head { padding: 12px; border-bottom: 1px solid var(--line); }
.thread-head .row {
  min-width: 0;
  flex-wrap: wrap;
}
.thread-head .ghost {
  min-height: 34px;
  padding: 0 10px;
}
.messages { padding: 12px; display: grid; align-content: start; gap: 8px; }
.bubble {
  width: fit-content;
  max-width: min(82%, 100%);
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}
.bubble.mine {
  justify-self: end;
  background: linear-gradient(135deg, rgba(255, 49, 79, .9), rgba(168, 85, 247, .78));
}
.date-divider { justify-self: center; color: var(--muted); font-size: .72rem; margin: 6px 0; }
.composer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  padding-bottom: 10px;
}
.composer input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.24);
  color: var(--text);
  border-radius: 8px;
  padding: 12px;
}

.notif-panel {
  position: absolute;
  top: calc(var(--safe-top) + 56px);
  right: 12px;
  left: 12px;
  z-index: 15;
  max-height: min(70vh, 520px);
  overflow: auto;
}

.notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notification-head .row {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notif-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: .62rem;
}

.notification {
  position: relative;
  padding-right: 44px;
}

.notification-open {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-open:focus-visible,
.notification-dismiss:focus-visible {
  outline: 3px solid #8fe8ff;
  outline-offset: 3px;
}

.notification-cta {
  display: inline-flex;
  margin-top: 8px;
  color: #8fe8ff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.notification.unread {
  border-color: rgba(255, 49, 79, .42);
  background: linear-gradient(180deg, rgba(255, 49, 79, .11), rgba(9, 13, 27, .94));
}

.notification.read {
  opacity: .72;
}

.notification-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #dfe6ff;
  font-size: .68rem;
  font-weight: 1000;
}

.notification-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, .14);
}

.public-profile-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  align-items: end;
  padding-top: var(--safe-top);
  background: rgba(0, 0, 0, .72);
}

.public-profile-shell {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--safe-top) - 8px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #05050b;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, .55);
}

.public-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #0b1020, #060912);
}

.public-profile-top span {
  display: block;
  color: var(--red);
  text-transform: uppercase;
  font-size: .6rem;
  font-weight: 1000;
  letter-spacing: .18em;
}

.public-profile-top b {
  display: block;
  margin-top: 4px;
  font-size: .95rem;
}

.public-profile-top .ghost {
  min-height: 36px;
  padding: 0 14px;
}

.public-profile-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.public-profile-scroll > .public-profile-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.public-profile-loading {
  min-height: 420px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  color: #fff;
}

.public-profile-loading span {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--purple), #2f8cff);
  animation: profileLoadPulse 1s ease-in-out infinite alternate;
}

.home-player-card,
.ready-player,
.leaderboard-row[data-player] {
  cursor: pointer;
}

.leaderboard-row[data-player]:focus-visible {
  outline: 2px solid rgba(255, 47, 95, .9);
  outline-offset: 4px;
}

@keyframes profileLoadPulse {
  from { transform: scaleX(.55); opacity: .55; }
  to { transform: scaleX(1.25); opacity: 1; }
}

.edit-section-list {
  display: grid;
  gap: 8px;
}

.edit-section-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  margin: 0;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(17, 24, 45, .76), rgba(8, 12, 25, .94));
  box-shadow: none;
}

.edit-section-choice span {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.edit-section-choice:hover,
.profile-edit-form .edit-chip-grid label:hover {
  border-color: rgba(47, 140, 255, .4);
  background: linear-gradient(180deg, rgba(47, 140, 255, .14), rgba(8, 12, 25, .96));
}

@media (min-width: 860px) {
  .app { width: 100%; max-width: 520px; }
  .view { padding-left: 16px; padding-right: 16px; }
  .desktop-grid { grid-template-columns: 1.25fr .75fr; align-items: start; }
  .comms { grid-template-rows: minmax(180px, 40%) minmax(0, 1fr); grid-template-columns: 1fr; height: 100%; }
}

/* Final default profile pass: match the compact share-card reference. */
.profile-sharecard.profile-page {
  display: grid;
  gap: 12px;
  padding: 14px 14px calc(var(--safe-bottom) + 104px);
  background:
    linear-gradient(145deg, rgba(255, 47, 95, .09), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(139, 92, 246, .12), transparent 260px),
    repeating-linear-gradient(150deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 42px),
    #030407;
}

.profile-sharecard.profile-page .profile-hero {
  grid-template-columns: minmax(165px, 38%) minmax(0, 1fr);
  gap: 18px;
  min-height: 360px;
  padding: 18px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-sharecard.profile-page .profile-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.12;
  align-self: center;
  padding: 7px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 34px rgba(255,47,95,.35), 0 0 40px rgba(139,92,246,.28);
}

.profile-sharecard.profile-page .profile-frame::after {
  border-radius: 32px;
}

.profile-sharecard.profile-page .profile-avatar-xl {
  border-radius: 22px;
}

.profile-sharecard.profile-page .profile-id {
  align-self: center;
  padding: 42px 100px 0 0;
  gap: 9px;
}

.profile-sharecard.profile-page .profile-id h1 {
  border: 0;
  font-size: clamp(2.6rem, 10vw, 4rem);
  font-style: italic;
}

.profile-sharecard.profile-page .profile-id .profile-bio-line {
  max-width: 24ch;
  font-size: clamp(1.08rem, 3vw, 1.5rem);
}

.profile-sharecard.profile-page .xp-panel,
.profile-sharecard.profile-page .profile-tags {
  display: none;
}

.profile-sharecard.profile-page .profile-section:has(.main-game-card),
.profile-sharecard.profile-page .profile-section:has(.profile-clips),
.profile-sharecard.profile-page .profile-section:has(.style-tabs),
.profile-sharecard.profile-page .profile-section:has(.looking-grid),
.profile-sharecard.profile-page .profile-section:has(.library-search),
.profile-sharecard.profile-page .profile-section:has(.psn-games),
.profile-sharecard.profile-page .profile-section:has(.identity-loadout),
.profile-sharecard.profile-page .profile-section:has(.profile-account-badge-grid) {
  display: none;
}

.profile-sharecard.profile-page .profile-xp-card {
  display: grid;
}

@media (min-width: 500px) {
  .profile-sharecard.profile-page {
    grid-template-columns: 1fr 1fr;
  }

  .profile-sharecard.profile-page .profile-hero,
  .profile-sharecard.profile-page .profile-xp-card,
  .profile-sharecard.profile-page .profile-section:has(.trust-profile-card),
  .profile-sharecard.profile-page .profile-section:has(.stats-row),
  .profile-sharecard.profile-page .account-zone {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .profile-sharecard.profile-page .profile-hero,
  .profile-sharecard.profile-page,
  .profile-sharecard.profile-page .profile-xp-card,
  .profile-sharecard.profile-page .stats-row,
  .profile-sharecard.profile-page .trust-profile-card,
  .about-main-game > div {
    grid-template-columns: 1fr;
  }

  .profile-sharecard.profile-page .profile-frame {
    max-width: 270px;
  }

  .profile-sharecard.profile-page .profile-id {
    padding: 0;
  }

  .account-zone-actions {
    grid-template-columns: 1fr;
  }
}

@font-face {
  font-family: "Fragmatch Title";
  src: url("/assets/fonts/russo-one-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fragmatch UI";
  src: url("/assets/fonts/rajdhani-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fragmatch UI";
  src: url("/assets/fonts/rajdhani-700.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fragmatch Condensed";
  src: url("/assets/fonts/teko-700.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Sticks-style default profile card. Uses real user level/XP/rep values from app state. */
.profile-sharecard.profile-page {
  --fm-red: #ff1f31;
  --fm-red-soft: rgba(255, 31, 49, .42);
  --fm-purple: #7147ff;
  --fm-green: #00e72e;
  --fm-gold: #f2c14a;
  --fm-panel: rgba(0, 0, 0, .72);
  --fm-line: rgba(255, 255, 255, .28);
  gap: 8px;
  padding: 14px 18px calc(var(--safe-bottom) + 104px);
  color: #fff;
  font-family: "Fragmatch UI", Rajdhani, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 31, 49, .17), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .58)),
    #020305;
}

.profile-sharecard.profile-page::before {
  display: none;
}

.profile-sharecard.profile-page .profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(176px, 43%) minmax(0, 1fr);
  align-items: center;
  min-height: 318px;
  padding: 12px 0 8px;
  gap: clamp(14px, 4vw, 28px);
  background: transparent;
}

.profile-sharecard.profile-page .profile-edit-btn,
.profile-sharecard.profile-page .public-preview-chip {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 40;
  min-height: 38px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .46);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.035));
  color: #fff;
  font-family: "Fragmatch UI", Rajdhani, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 0 18px rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.28);
  pointer-events: auto;
}

.profile-sharecard.profile-page .profile-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
  align-self: center;
  width: 100%;
  max-width: 272px;
  aspect-ratio: .86 / 1;
  padding: 6px;
  border-radius: 28px;
  background: linear-gradient(140deg, #ff1429 0%, #ff2f5f 45%, #6d39ff 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 10px rgba(255,31,49,.48),
    0 0 14px rgba(113,71,255,.34),
    0 18px 46px rgba(0,0,0,.6);
  animation: none;
}

.profile-sharecard.profile-page .profile-frame.has-frame-asset,
.public-profile-page .profile-frame.has-frame-asset {
  aspect-ratio: var(--frame-aspect, .86 / 1);
  animation: none !important;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-sharecard.profile-page .profile-frame::before {
  display: none !important;
}

.profile-sharecard.profile-page .profile-frame::after {
  border-radius: 23px;
  border: 1px solid rgba(255,255,255,.16);
}

.profile-sharecard.profile-page .profile-avatar-xl {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}

.profile-sharecard.profile-page .profile-frame.has-frame-asset .profile-avatar-xl,
.public-profile-page .profile-frame.has-frame-asset .profile-avatar-xl {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  background: #05060c;
}

.profile-sharecard.profile-page .profile-avatar-mask,
.public-profile-page .profile-avatar-mask {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #05060c;
}

.profile-sharecard.profile-page .profile-frame.has-frame-asset .profile-avatar-mask,
.public-profile-page .profile-frame.has-frame-asset .profile-avatar-mask {
  position: absolute;
  inset: var(--avatar-safe-top, 10%) var(--avatar-safe-right, 10%) var(--avatar-safe-bottom, 10%) var(--avatar-safe-left, 10%);
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: var(--avatar-mask-radius, 18px);
}

.profile-frame-asset {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: none;
}

.profile-frame.has-frame-asset::before {
  display: none !important;
}

.profile-sharecard.profile-page .profile-frame-emblem {
  position: absolute;
  z-index: 6;
  left: 8px;
  bottom: 14px;
  width: clamp(46px, 11vw, 70px);
  height: clamp(46px, 11vw, 70px);
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,47,95,.75));
  pointer-events: none;
}

.profile-sharecard.profile-page .profile-live-banner {
  top: 12px;
  left: 12px;
  right: auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff172d, #ff3768);
  color: #fff;
  font-size: .96rem;
  letter-spacing: 0;
  text-transform: uppercase;
  z-index: 7;
}

.profile-sharecard.profile-page .profile-live-banner::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  background: #fff;
  color: #ff2638;
  font-size: .7rem;
}

.profile-sharecard.profile-page .profile-id {
  align-self: center;
  min-width: 0;
  padding: 34px 0 0;
  gap: 7px;
  position: relative;
  z-index: 10;
  container-type: inline-size;
}

.profile-sharecard.profile-page .profile-id::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px -14px -12px -14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.7), rgba(0,0,0,.38) 48%, transparent 76%),
    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.42) 58%, rgba(0,0,0,.1));
  filter: blur(.2px);
  pointer-events: none;
}

.profile-sharecard.profile-page .profile-badges {
  gap: 12px;
  margin-bottom: 5px;
}

.profile-sharecard.profile-page .cosmetic {
  min-height: 34px;
  padding: 0 18px;
  border-radius: 9px;
  border: 0;
  color: #fff;
  font-size: .8rem;
  font-family: "Fragmatch UI", Rajdhani, sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.profile-sharecard.profile-page .cosmetic.verified {
  width: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff2f3d, #b91c1c);
  font-size: 1.28rem;
}

.profile-sharecard.profile-page .cosmetic.founder {
  color: #151007;
  background: linear-gradient(180deg, #ffe794, #d8a32f 52%, #9a680a);
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

.profile-sharecard.profile-page .cosmetic.legend,
.profile-sharecard.profile-page .cosmetic.live {
  display: none;
}

.profile-sharecard.profile-page .profile-id h1 {
  margin: 0;
  color: #fff;
  max-width: 100%;
  width: fit-content;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  font-family: "Fragmatch Title", "Russo One", Impact, sans-serif;
  font-size: clamp(1.42rem, min(8vw, calc(116cqw / max(var(--profile-name-chars, 7), 7))), 3.85rem);
  font-style: italic;
  line-height: .88;
  letter-spacing: 0;
  transform: skewX(-8deg);
  transform-origin: left center;
  text-shadow:
    0 3px 0 rgba(0,0,0,.82),
    0 7px 14px rgba(0,0,0,.95),
    0 0 18px rgba(255,255,255,.18);
}

.profile-sharecard.profile-page .profile-id .profile-bio-line {
  max-width: 19ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.06rem, 3vw, 1.34rem);
  font-weight: 700;
  line-height: 1.18;
  text-shadow:
    0 2px 3px rgba(0,0,0,.96),
    0 0 12px rgba(0,0,0,.9);
}

.profile-sharecard.profile-page .profile-id .profile-meta-line {
  display: flex;
  gap: 6px;
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.12;
  text-shadow:
    0 2px 3px rgba(0,0,0,.96),
    0 0 12px rgba(0,0,0,.9);
}

.profile-sharecard.profile-page .profile-id .profile-meta-line b {
  color: var(--fm-red);
  font-weight: 800;
  text-shadow:
    0 2px 4px rgba(0,0,0,.96),
    0 0 12px rgba(255,47,95,.45);
}

.profile-sharecard.profile-page .share-social-strip {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 5px;
}

.profile-sharecard.profile-page .share-social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .72rem;
  font-family: "Fragmatch UI", Rajdhani, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.profile-sharecard.profile-page .share-social-chip img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
}

.profile-sharecard.profile-page .share-social-chip.logo-chip {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.profile-sharecard.profile-page .share-social-chip.logo-chip img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.7));
}

.profile-sharecard.profile-page .share-social-chip.game-chip {
  width: auto;
  max-width: 74px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: transparent;
}

.profile-sharecard.profile-page .blaze-chip {
  min-width: 32px;
  width: 32px;
  height: 32px;
}

.profile-sharecard.profile-page .blaze-chip,
.profile-sharecard .blaze-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: linear-gradient(145deg, #30323a, #17181d);
  color: #858891;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .35);
}

.profile-sharecard .blaze-b-symbol,
.profile-sharecard .blaze-b-image {
  position: relative;
  z-index: 1;
}

.profile-sharecard .blaze-b-symbol {
  font-family: "Fragmatch Condensed", Teko, Impact, sans-serif;
  font-size: 1.72rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  transform: translateX(-1px);
}

.profile-sharecard .blaze-b-image {
  width: 23px;
  height: 23px;
  object-fit: contain;
  border-radius: 0;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.profile-sharecard .blaze-chip.is-offline .blaze-b-image {
  filter: grayscale(1) saturate(.1) brightness(.7);
  opacity: .52;
}

.profile-sharecard .blaze-chip.is-live .blaze-b-image {
  filter: drop-shadow(0 0 8px rgba(255, 202, 68, .85));
  opacity: 1;
  transform: scale(1.04);
}

.profile-sharecard .blaze-chip.is-live {
  border-color: rgba(255, 196, 48, .9);
  background: linear-gradient(145deg, #ffd74d, #ef9d00 62%, #b95e00);
  color: #241500;
  box-shadow: 0 0 16px rgba(255, 174, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.profile-sharecard .blaze-chip.is-live::after {
  content: "";
  position: absolute;
  inset: -60% -120%;
  z-index: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .8) 49%, transparent 60%);
  transform: translateX(-45%);
  animation: blazeBadgeShimmer 2.2s ease-in-out infinite;
}

@keyframes blazeBadgeShimmer {
  0%, 35% { transform: translateX(-45%); opacity: 0; }
  48% { opacity: 1; }
  70%, 100% { transform: translateX(45%); opacity: 0; }
}

.sr-only {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

.profile-sharecard.profile-page .sticks-chip {
  min-width: 58px;
  width: 58px;
  height: 32px;
}

.profile-sharecard.profile-page .vpzone-chip {
  min-width: 34px;
  width: 34px;
  height: 34px;
}

.profile-sharecard.profile-page .twitch-chip {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 7px;
  background: #6d37a8;
}

.profile-sharecard.profile-page .twitch-chip img {
  width: 21px;
  height: 21px;
}

.profile-sharecard.profile-page .profile-xp-card,
.profile-sharecard.profile-page .profile-section {
  border: 1px solid var(--fm-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.34);
  backdrop-filter: blur(4px);
}

.profile-sharecard.profile-page .profile-xp-card {
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 82px;
  padding: 11px 18px;
}

.profile-sharecard.profile-page .level-token {
  width: 56px;
  height: 64px;
  background: linear-gradient(145deg, rgba(255,31,49,.22), rgba(113,71,255,.26));
  clip-path: polygon(50% 0, 92% 22%, 92% 76%, 50% 100%, 8% 76%, 8% 22%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}

.profile-sharecard.profile-page .level-token b {
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 2rem;
  font-weight: 800;
}

.profile-sharecard.profile-page .xp-wide > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.profile-sharecard.profile-page .xp-wide b,
.profile-sharecard.profile-page .xp-wide em {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  font-style: normal;
}

.profile-sharecard.profile-page .xp-wide span {
  height: 12px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.profile-sharecard.profile-page .xp-wide span i {
  background: linear-gradient(90deg, #ff2436, #ffba27 28%, #55ff2f 72%, #14b85a);
}

.profile-sharecard.profile-page .xp-wide small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.9);
  text-align: right;
  font-size: .82rem;
}

.profile-sharecard.profile-page .profile-section {
  padding: 12px 14px;
}

.profile-sharecard.profile-page .profile-section-head {
  padding: 0 0 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.profile-sharecard.profile-page .profile-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.profile-sharecard.profile-page .profile-section-head span::before {
  width: 4px;
  height: 22px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: var(--fm-red);
  box-shadow: 0 0 10px rgba(255, 31, 49, .45);
}

.profile-sharecard.profile-page .profile-section-head em {
  color: rgba(255,255,255,.48);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.profile-sharecard.profile-page .showcase-grid {
  display: grid;
  gap: 0;
}

.profile-sharecard.profile-page .showcase-grid div {
  display: grid;
  grid-template-columns: minmax(72px, .72fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
}

.profile-sharecard.profile-page .showcase-grid div:last-child {
  border-bottom: 0;
}

.profile-sharecard.profile-page .showcase-grid span {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.profile-sharecard.profile-page .showcase-grid b {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-sharecard.profile-page .showcase-grid div:last-child b {
  color: #00ff5f;
}

.profile-sharecard.profile-page .showcase-cosmetics-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  color: #fff;
  font-family: "Fragmatch UI", Rajdhani, sans-serif;
  font-size: .98rem;
  font-weight: 700;
}

.profile-sharecard.profile-page .showcase-cosmetics-btn::before {
  content: "✦";
  color: #ffd33d;
  font-size: 1.05rem;
}

.profile-sharecard.profile-page .showcase-cosmetics-btn span {
  text-align: center;
}

.profile-sharecard.profile-page .profile-copy {
  margin: 0 0 16px;
  color: rgba(255,255,255,.94);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.28;
}

.profile-sharecard.profile-page .about-main-game {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.profile-sharecard.profile-page .about-main-game > span {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.profile-sharecard.profile-page .about-main-game > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.profile-sharecard.profile-page .about-main-game img {
  width: 92px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
}

.profile-sharecard.profile-page .about-main-game p {
  display: grid;
  gap: 5px;
  margin: 0;
  color: rgba(255,255,255,.9);
}

.profile-sharecard.profile-page .about-main-game b {
  color: #fff;
  font-size: 1rem;
}

.profile-sharecard.profile-page .about-main-game em {
  color: rgba(255,255,255,.86);
  font-style: normal;
}

.profile-sharecard.profile-page .about-main-game strong {
  color: #ff2f3d;
}

.profile-sharecard.profile-page .trust-profile-card {
  display: grid;
  grid-template-columns: minmax(116px, .9fr) repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.profile-sharecard.profile-page .trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #050705 56%, transparent 57%),
    conic-gradient(#00d227 0 76%, rgba(255,255,255,.08) 76% 100%);
  border: 1px solid rgba(0,255,91,.35);
  color: #fff;
  box-shadow: 0 0 22px rgba(0,255,91,.22);
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.profile-sharecard.profile-page .trust-badge b {
  color: #00e72e;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 3.25rem;
  line-height: 1;
}

.profile-sharecard.profile-page .trust-badge b::after {
  content: "Great Teammate";
  display: block;
  max-width: 70px;
  margin: 4px auto 0;
  color: #fff;
  font-family: "Fragmatch UI", Rajdhani, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.05;
}

.profile-sharecard.profile-page .trust-badge::after {
  content: "*****";
  color: #00e72e;
  font-size: .86rem;
  letter-spacing: .12em;
}

.profile-sharecard.profile-page .trust-profile-card > div {
  min-height: 80px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.035);
}

.profile-sharecard.profile-page .trust-profile-card > div:nth-child(2) {
  border-color: rgba(0,255,91,.22);
  background: rgba(0,255,91,.05);
}

.profile-sharecard.profile-page .trust-profile-card > div.negative {
  border-color: rgba(255,47,49,.3);
  background: rgba(255,47,49,.06);
  min-height: 80px;
}

.profile-sharecard.profile-page .trust-profile-card > div b {
  color: #00e72e;
  font-size: 1.2rem;
}

.profile-sharecard.profile-page .trust-profile-card > div:nth-child(3) b {
  color: #2f8cff;
}

.profile-sharecard.profile-page .trust-profile-card > div.negative b {
  color: #ff2f3d;
}

.profile-sharecard.profile-page .trust-profile-card > div span {
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
}

.profile-sharecard.profile-page .endorsement-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-sharecard.profile-page .endorsement-grid span {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,91,.38);
  background: rgba(0,255,91,.06);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
}

.profile-sharecard.profile-page .endorsement-grid b {
  display: none;
}

.profile-sharecard.profile-page .stats-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-sharecard.profile-page .stats-row img {
  width: 112px;
  height: 82px;
  border-radius: 12px;
  object-fit: cover;
}

.profile-sharecard.profile-page .stats-row div {
  min-width: 0;
}

.profile-sharecard.profile-page .stats-row div b {
  display: block;
  margin-bottom: 12px;
  color: #ff2f3d;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.08;
}

.profile-sharecard.profile-page .stats-row p {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 62px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
}

.profile-sharecard.profile-page .stats-row p span {
  display: grid;
  place-items: center;
  padding: 7px 5px;
  border-right: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 900;
}

.profile-sharecard.profile-page .stats-row p span:last-child {
  border-right: 0;
}

.profile-sharecard.profile-page .stats-row p small {
  color: rgba(255,255,255,.86);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.profile-sharecard.profile-page .stats-row p span:nth-child(1) { color: #a855f7; }
.profile-sharecard.profile-page .stats-row p span:nth-child(2) { color: #14b8ff; }
.profile-sharecard.profile-page .stats-row p span:nth-child(3) { color: #00ff5f; }
.profile-sharecard.profile-page .stats-row p span:nth-child(4) { color: #a855f7; }

.profile-sharecard.profile-page .stats-row i {
  display: none;
}

@media (min-width: 480px) {
  .profile-sharecard.profile-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .profile-sharecard.profile-page .profile-hero,
  .profile-sharecard.profile-page .profile-xp-card,
  .profile-sharecard.profile-page .profile-section:has(.trust-profile-card),
  .profile-sharecard.profile-page .profile-section:has(.stats-row),
  .profile-sharecard.profile-page .account-zone {
    grid-column: 1 / -1;
  }

  .profile-sharecard.profile-page .profile-showcase,
  .profile-sharecard.profile-page .profile-section:has(.about-main-game) {
    min-height: 226px;
  }

  .profile-sharecard.profile-page .profile-section:has(.about-main-game) .about-main-game > div {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .profile-sharecard.profile-page .profile-section:has(.about-main-game) .about-main-game img {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 479px) {
  .profile-sharecard.profile-page {
    grid-template-columns: 1fr;
  }

  .profile-sharecard.profile-page .profile-hero,
  .profile-sharecard.profile-page .profile-xp-card,
  .profile-sharecard.profile-page .profile-section {
    grid-column: 1 / -1;
  }

  .profile-sharecard.profile-page .profile-hero {
    grid-template-columns: minmax(154px, 39%) minmax(0, 1fr);
    gap: 18px;
  }

  .profile-sharecard.profile-page .profile-frame {
    max-width: 210px;
  }

  .profile-sharecard.profile-page .profile-id {
    min-width: 0;
  }

  .profile-sharecard.profile-page .profile-badges,
  .profile-sharecard.profile-page .profile-id h1,
  .profile-sharecard.profile-page .profile-meta-line,
  .profile-sharecard.profile-page .share-social-strip {
    max-width: 100%;
  }

  .profile-sharecard.profile-page .share-social-strip {
    flex-wrap: wrap;
  }
}

/* Final account action placement. Keep compliance actions at the true bottom of Profile. */
.profile-sharecard.profile-page .account-zone {
  display: grid;
  grid-column: 1 / -1;
  order: 999;
  align-self: stretch;
  min-height: 0;
  padding: 16px;
  border-radius: 16px;
}

.profile-sharecard.profile-page .account-zone .section-title {
  margin: 0;
  font-size: 1.15rem;
}

.profile-sharecard.profile-page .account-zone p {
  margin: 0;
  color: #aeb7d1;
  line-height: 1.35;
}

.profile-sharecard.profile-page .account-zone-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.profile-sharecard.profile-page .account-zone-actions .ghost,
.profile-sharecard.profile-page .account-zone-actions .danger {
  min-height: 46px;
  height: auto;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.05;
}

@media (max-width: 430px) {
  .profile-sharecard.profile-page {
    padding: 14px 12px calc(var(--safe-bottom) + 98px);
  }

  .profile-sharecard.profile-page .profile-hero {
    gap: 15px;
    min-height: auto;
  }

  .profile-sharecard.profile-page .profile-frame {
    justify-self: center;
    max-width: 245px;
  }

  .profile-sharecard.profile-page .profile-edit-btn,
  .profile-sharecard.profile-page .public-preview-chip {
    position: static;
    justify-self: end;
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .profile-sharecard.profile-page .profile-id h1 {
    font-size: 2.85rem;
  }

  .profile-sharecard.profile-page .profile-xp-card,
  .profile-sharecard.profile-page .about-main-game > div,
  .profile-sharecard.profile-page .trust-profile-card,
  .profile-sharecard.profile-page .stats-row {
    grid-template-columns: 1fr;
  }

  .profile-sharecard.profile-page .trust-profile-card {
    gap: 10px;
  }

  .profile-sharecard.profile-page .trust-profile-card > div {
    min-height: 68px;
  }

.profile-sharecard.profile-page .stats-row p {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-sharecard.profile-page .account-zone-actions {
    grid-template-columns: 1fr;
  }
}

/* Home command center redesign */
.home-command {
  display: grid;
  gap: 10px;
  padding: 14px 18px calc(var(--safe-bottom) + 104px);
  min-width: 0;
  color: #fff;
  font-family: "Fragmatch UI", Rajdhani, system-ui, sans-serif;
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 31, 49, .13), transparent 220px),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    #030407;
}

.home-status-hero,
.home-panel,
.home-challenge,
.home-takeover-ad {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.64), rgba(0,0,0,.78));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.32);
}

.home-status-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 24%);
  align-items: stretch;
  gap: 18px;
  padding: 18px;
  min-height: 168px;
}

.home-status-copy {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
}

.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-size: .92rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-eyebrow i,
.home-status-hero h1 i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff2438;
  box-shadow: 0 0 14px rgba(255,36,56,.76);
}

.home-status-hero h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f7f7fb;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: .96;
  font-weight: 700;
  letter-spacing: 0;
}

.home-status-hero h1 i {
  width: 11px;
  height: 11px;
  background: #00f060;
  box-shadow: 0 0 14px rgba(0,240,96,.76);
}

.home-game-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  font-weight: 600;
}

.home-game-line svg {
  width: 20px;
  height: 20px;
  color: #ff2438;
}

.home-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: #dce4ff;
  font-weight: 700;
}

.home-tag.tag-0 { color: #74b7ff; border-color: rgba(47,140,255,.5); background: rgba(47,140,255,.12); }
.home-tag.tag-1 { color: #ff928f; border-color: rgba(255,47,49,.48); background: rgba(255,47,49,.1); }
.home-tag.tag-2 { color: #51ff77; border-color: rgba(0,240,96,.42); background: rgba(0,240,96,.1); }
.home-tag.tag-3 { color: #d7b2ff; border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.1); }

.home-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
  max-width: 520px;
}

.home-primary-action,
.home-status-control {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.home-primary-action {
  border-color: rgba(255,31,49,.88);
  background: linear-gradient(135deg, rgba(255,31,49,.82), rgba(104,13,24,.84));
}

.home-primary-action svg,
.home-status-control svg {
  width: 20px;
  height: 20px;
}

.home-status-control select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.home-level-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 13px;
  background: rgba(0,0,0,.34);
}

.home-level-card b {
  text-transform: uppercase;
  font-size: 1rem;
}

.home-level-token {
  width: 76px;
  height: 86px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 22%, 92% 76%, 50% 100%, 8% 76%, 8% 22%);
  background: linear-gradient(145deg, rgba(255,31,49,.25), rgba(113,71,255,.32));
  box-shadow: inset 0 0 0 3px rgba(255,31,49,.82), inset 0 0 0 6px rgba(0,0,0,.8), 0 0 22px rgba(113,71,255,.38);
}

.home-level-token span {
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: 3.1rem;
  line-height: 1;
}

.home-xp-track,
.home-challenge-track {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
}

.home-xp-track i,
.home-challenge-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2438, #ffc627 32%, #2fff48 72%, rgba(255,255,255,.4));
}

.home-level-card small {
  color: rgba(255,255,255,.86);
  font-size: .96rem;
  text-align: center;
}

.home-takeover-ad {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(255, 47, 95, .46);
  background: #030407;
}

.home-takeover-ad a {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.home-takeover-ad img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.home-referral-ad {
  border-color: rgba(72, 126, 255, .58);
  box-shadow: 0 0 28px rgba(32, 83, 255, .16), 0 0 22px rgba(255, 36, 56, .12);
}

.home-takeover-ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(3, 4, 7, .78);
  color: #fff;
  font: 900 1.35rem/1 system-ui, sans-serif;
  box-shadow: 0 0 18px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.home-takeover-ad-close:hover,
.home-takeover-ad-close:focus-visible {
  border-color: rgba(255, 47, 95, .8);
  background: rgba(255, 47, 95, .82);
}

.home-feature-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
}

.home-feature-carousel {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.home-feature-nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 34px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(4, 5, 12, .82);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 47, 95, .22);
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.home-feature-nav:hover,
.home-feature-nav:focus-visible {
  border-color: rgba(255, 47, 95, .75);
  background: linear-gradient(135deg, rgba(255, 47, 95, .72), rgba(139, 92, 246, .64));
  outline: none;
}

.home-feature-prev {
  left: -5px;
}

.home-feature-next {
  right: -5px;
}

.home-feature-grid::-webkit-scrollbar {
  display: none;
}

.home-feature-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.home-feature-grid.is-dragging .home-feature-card {
  pointer-events: none;
}

.home-feature-card {
  flex: 0 0 170px;
  scroll-snap-align: start;
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.58);
  color: #fff;
  text-align: left;
  text-decoration: none;
}

.home-feature-card svg {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  color: #6d63ff;
}

.home-feature-trophy svg,
.home-feature-crown svg { color: #e2a720; }
.home-feature-calendar svg { color: #ff2f3d; }

.home-feature-card b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .98rem;
}

.home-feature-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.7);
  font-size: .88rem;
}

.home-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.home-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.home-panel-head div {
  min-width: 0;
}

.home-panel-head b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-panel-head b::before {
  content: "";
  width: 4px;
  height: 22px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #ff1f31;
  box-shadow: 0 0 10px rgba(255, 31, 49, .45);
}

.home-panel-head span {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: .84rem;
}

.home-panel-head button,
.home-panel-head a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.88);
  font-size: .96rem;
  text-decoration: none;
}

.home-live-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.home-live-row.is-dragging { cursor: grabbing; user-select: none; }

.home-live-carousel {
  position: relative;
  min-width: 0;
}

.home-live-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 34px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(5,7,18,.9);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 0 14px rgba(0,0,0,.6);
}

.home-live-prev { left: -8px; }
.home-live-next { right: -8px; }

.home-live-row::-webkit-scrollbar { display: none; }

.home-player-card {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.44);
  color: #fff;
}

.home-live-player {
  position: relative;
  min-height: 164px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 16px 10px 10px;
  border-radius: 10px;
  scroll-snap-align: start;
}

.live-players-page { display: grid; gap: 14px; padding-bottom: 18px; }
.route-hero.compact { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(0,0,0,.62); }
.route-hero.compact h1 { margin: 2px 0; font-size: 1.9rem; }
.route-hero.compact p { margin: 0; color: rgba(255,255,255,.65); }
.route-hero.compact small { color: #ff2f5f; font-weight: 800; text-transform: uppercase; }
.live-player-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-roster-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(5,7,18,.88); color: #fff; text-align: left; }
.live-roster-card:hover { border-color: rgba(255,47,95,.7); box-shadow: 0 0 18px rgba(255,47,95,.16); }
.live-roster-avatar { position: relative; width: 58px; height: 58px; }
.live-roster-avatar img { width: 100%; height: 100%; border: 2px solid #ff2f5f; border-radius: 50%; object-fit: cover; }
.live-roster-avatar i { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border: 2px solid #050712; border-radius: 50%; background: #00e95a; }
.live-roster-copy { min-width: 0; display: grid; gap: 3px; }
.live-roster-copy b, .live-roster-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-roster-copy small { width: max-content; color: #80b8ff; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.live-roster-copy small.looking { color: #00ff9c; }
.live-roster-copy em { color: rgba(255,255,255,.62); font-style: normal; }
.live-roster-trust { display: grid; grid-template-columns: 20px auto; align-items: center; justify-items: end; gap: 2px 5px; }
.live-roster-trust img { width: 20px; height: 20px; grid-row: 1 / 3; }
.live-roster-trust b { color: #00ff9c; font-size: 1.1rem; }
.live-roster-trust small { color: rgba(255,255,255,.55); font-size: .62rem; text-transform: uppercase; }

@media (max-width: 520px) {
  .live-player-roster { grid-template-columns: 1fr; }
  .home-live-nav { width: 30px; height: 44px; }
  .home-live-prev { left: -5px; }
  .home-live-next { right: -5px; }
}

.home-live-player > img {
  width: 74px;
  height: 74px;
  border: 3px solid #ff2f5f;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(255,47,95,.55);
}

.home-live-player > i,
.home-rec-card b i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #00e95a;
  box-shadow: 0 0 10px rgba(0,233,90,.76);
}

.home-live-player > i {
  right: 28px;
  top: 79px;
}

.home-live-pill {
  position: absolute;
  top: 10px;
  left: 9px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255,31,49,.8);
  border-radius: 6px;
  color: #ff3347;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}

.home-live-player.is-blaze-live {
  border-color: rgba(255, 180, 40, .7);
  box-shadow: 0 0 26px rgba(255, 115, 4, .22);
}

.home-live-player.is-blaze-live .home-live-pill {
  border-color: rgba(255, 180, 40, .9);
  background: rgba(255, 115, 4, .16);
  color: #ffca67;
  box-shadow: 0 0 16px rgba(255, 115, 4, .34);
}

.home-live-player b,
.home-rec-card b {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.04rem;
}

.home-live-player small {
  color: rgba(255,255,255,.64);
  font-size: .92rem;
}

.home-live-player em {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-style: normal;
  font-weight: 700;
}

.home-live-player em img {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 3px;
  background: #6d37a8;
}

.home-live-player em img.trust-metric {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 0 7px rgba(0,255,156,.36));
}

.home-live-player em img.twitch-metric {
  background: #6d37a8;
}

.home-live-player em img.blaze-metric {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 0 7px rgba(255,180,40,.65));
}

.home-recommended-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.home-rec-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-height: 126px;
  padding: 12px;
  border-radius: 10px;
  text-align: left;
}

.home-rec-card > img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
}

.home-rec-card div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-rec-card b {
  position: relative;
  padding-right: 14px;
}

.home-rec-card b i {
  right: 0;
  top: 6px;
  width: 8px;
  height: 8px;
}

.home-rec-card div span,
.home-rec-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.6);
  font-size: .88rem;
}

.home-rec-card strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 46px;
  border: 1px solid rgba(0,240,96,.44);
  border-radius: 8px;
  color: #39ff59;
}

.home-rec-card p {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.home-rec-card p em,
.home-lfg-card footer span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(47,140,255,.45);
  border-radius: 6px;
  color: #74b7ff;
  background: rgba(47,140,255,.1);
  font-style: normal;
  font-size: .86rem;
  font-weight: 700;
}

.home-rec-card p em.tag-1,
.home-lfg-card footer span:nth-child(2) {
  color: #39ff59;
  border-color: rgba(0,240,96,.42);
  background: rgba(0,240,96,.1);
}

.home-rec-card small {
  grid-column: 1 / -1;
}

.home-lfg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-lfg-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,31,49,.55);
  border-radius: 10px;
  background: rgba(0,0,0,.44);
}

.home-lfg-card > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-lfg-card img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
}

.home-lfg-card b,
.home-lfg-card span,
.home-lfg-card h3,
.home-lfg-card p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-lfg-card > div span {
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

.home-lfg-card h3 {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  white-space: nowrap;
}

.home-lfg-card p {
  margin: 0;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

.home-lfg-card footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-lfg-card footer b {
  margin-left: auto;
  color: #fff;
}

.home-challenge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
}

.home-challenge-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.home-challenge b {
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
}

.home-challenge span {
  color: #ff3347;
  font-size: .82rem;
}

.home-challenge h3 {
  margin: 2px 0 0;
  color: #ffffff;
  font-size: clamp(1rem, 4.6vw, 1.28rem);
  line-height: 1.05;
  text-wrap: balance;
}

.home-challenge p {
  margin: 0;
  max-width: 30rem;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  line-height: 1.28;
}

.home-challenge strong {
  text-align: center;
  min-width: 52px;
  color: #ffffff;
  font-size: .98rem;
}

.home-challenge em,
.home-challenge button,
.home-challenge a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-style: normal;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.home-challenge em span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  clip-path: polygon(50% 0, 92% 22%, 92% 76%, 50% 100%, 8% 76%, 8% 22%);
  background: rgba(168,85,247,.25);
  color: #c084ff;
  font-size: .72rem;
}

.daily-challenge-list {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  min-width: 0;
  padding: 2px;
}

.daily-challenge-list span {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.68);
}

.daily-challenge-list span.ready {
  border-color: rgba(0,240,96,.38);
  color: #c9ffd8;
}

.daily-challenge-list span.claimed {
  opacity: .58;
}

.daily-challenge-list span b,
.daily-challenge-list span em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
}

.daily-challenge-list span em {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: .7rem;
}

.home-lfg-card footer button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-weight: 800;
}

.home-lfg-card footer button.reacted {
  color: #00ff9c;
  border-color: rgba(0,255,156,.38);
}

.home-lfg-grid {
  grid-template-columns: 1fr;
}

.home-lfg-card.social-feed-card {
  gap: 10px;
  padding: 12px;
  border-color: rgba(255,255,255,.16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,47,95,.18), transparent 150px),
    linear-gradient(180deg, rgba(16,18,32,.74), rgba(0,0,0,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.26);
}

.home-lfg-card.social-feed-card header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.home-lfg-card.social-feed-card header img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,47,95,.58);
  box-shadow: 0 0 16px rgba(255,47,95,.22);
}

.home-lfg-card.social-feed-card header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-lfg-card.social-feed-card header b {
  color: #fff;
  font-size: .95rem;
  white-space: nowrap;
}

.home-lfg-card.social-feed-card header span {
  color: rgba(255,255,255,.58);
  font-size: .78rem;
  white-space: nowrap;
}

.home-lfg-card.social-feed-card .home-lfg-react {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border-color: rgba(255,47,95,.34);
  background: rgba(255,47,95,.1);
}

.home-lfg-card.social-feed-card .home-lfg-react.reacted {
  color: #00ff9c;
  border-color: rgba(0,255,156,.45);
  background: rgba(0,255,156,.1);
}

.home-lfg-card.social-feed-card h3 {
  font-size: 1rem;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.home-lfg-card.social-feed-card p {
  color: rgba(255,255,255,.78);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.home-lfg-card.social-feed-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.home-lfg-card.social-feed-card .lfg-post-tags,
.full-lfg-post .lfg-post-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-lfg-card.social-feed-card .lfg-social-actions,
.full-lfg-post .lfg-social-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.home-lfg-card.social-feed-card .lfg-social-actions > span {
  min-height: 0;
  padding: 0;
  color: rgba(255,255,255,.56);
  white-space: nowrap;
}

.home-lfg-card.social-feed-card footer span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .72rem;
}

.home-lfg-card.social-feed-card footer b {
  align-self: center;
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: .72rem;
  white-space: nowrap;
}

.home-lfg-card.social-feed-card .home-lfg-comment,
.full-lfg-post .home-lfg-comment {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(139,92,246,.42);
  color: #d8c8ff;
  background: rgba(139,92,246,.12);
  font-size: .72rem;
  white-space: nowrap;
}

.home-lfg-card.social-feed-card .home-lfg-comment b,
.full-lfg-post .home-lfg-comment b {
  margin-left: 5px;
  color: #fff;
}

.home-create-lfg {
  min-height: 42px;
}

.social-page {
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 14px 16px calc(var(--safe-bottom) + 96px);
  background:
    radial-gradient(circle at 15% 0%, rgba(255,31,49,.08), transparent 200px),
    #030407;
}

.social-page-head,
.social-create-card,
.challenge-card,
.full-lfg-post {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,31,49,.12), transparent 180px),
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.32);
}

.social-page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.social-page-head > div {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.social-page-head > div > span {
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: #ff1f31;
  box-shadow: 0 0 14px rgba(255,31,49,.55);
}

.social-page-head h1 {
  margin: 0;
  color: #fff;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: .9;
  text-transform: uppercase;
}

.social-page-head p {
  grid-column: 2;
  margin: 0;
  color: rgba(255,255,255,.62);
}

.social-create-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.social-post-form {
  display: grid;
  gap: 10px;
}

.social-post-form input,
.social-post-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(0,0,0,.48);
  color: #fff;
  padding: 12px;
  font: inherit;
}

.social-post-form textarea {
  min-height: 84px;
  resize: vertical;
}

.social-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.lfg-post-list,
.challenge-grid {
  display: grid;
  gap: 12px;
}

.playtest-code-panel {
  display: grid;
  gap: 12px;
}

.playtest-code-form,
.playtest-code-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.playtest-code-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
}

.playtest-code-admin {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.playtest-code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playtest-code-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,115,4,.36);
  border-radius: 10px;
  background: rgba(255,115,4,.08);
}

.playtest-code-list em {
  color: rgba(255,255,255,.62);
  font-style: normal;
  font-size: .78rem;
}

.full-lfg-post,
.challenge-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.full-lfg-post > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.full-lfg-post img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}

.full-lfg-post span {
  display: grid;
  min-width: 0;
}

.full-lfg-post b,
.full-lfg-post em,
.full-lfg-post h3,
.full-lfg-post p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-lfg-post em,
.full-lfg-post small {
  color: rgba(255,255,255,.58);
  font-style: normal;
}

.full-lfg-post h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
}

.full-lfg-post p {
  margin: 0;
  color: rgba(255,255,255,.74);
}

.full-lfg-post footer,
.challenge-card footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.full-lfg-post footer span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(47,140,255,.38);
  border-radius: 7px;
  color: #74b7ff;
  background: rgba(47,140,255,.1);
}

.full-lfg-post footer button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
}

.lfg-comments-modal {
  z-index: 48;
  place-items: center;
  padding: max(env(safe-area-inset-top), 18px) 14px max(env(safe-area-inset-bottom), 18px);
}

.lfg-comments-card {
  width: min(100%, 520px);
  max-height: min(82vh, 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,47,95,.36);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,47,95,.18), transparent 190px),
    linear-gradient(180deg, rgba(13,16,32,.96), rgba(3,5,14,.96));
  box-shadow: 0 24px 72px rgba(0,0,0,.62), 0 0 34px rgba(255,47,95,.18);
}

.lfg-comments-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.lfg-comments-head small {
  color: #ff2f5f;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.lfg-comments-head h2 {
  margin: 2px 0;
  color: #fff;
  font-size: clamp(1.25rem, 5vw, 2rem);
  line-height: .98;
}

.lfg-comments-head p {
  margin: 0;
  color: rgba(255,255,255,.62);
}

.lfg-comment-list {
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 6px;
}

.lfg-comment-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.lfg-comment-row img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}

.lfg-comment-row b,
.lfg-comment-row p {
  min-width: 0;
  margin: 0;
}

.lfg-comment-row p {
  margin-top: 3px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}

.lfg-comment-row time {
  color: rgba(255,255,255,.46);
  font-size: .72rem;
  white-space: nowrap;
}

.lfg-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.lfg-comment-form input {
  min-width: 0;
  height: 46px;
  border-radius: 12px;
}

.lfg-comment-form .primary {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
}

@media (max-width: 430px) {
  .home-lfg-card.social-feed-card footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-lfg-card.social-feed-card .lfg-social-actions,
  .full-lfg-post .lfg-social-actions {
    width: 100%;
    justify-content: space-between;
  }

  .lfg-comment-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .lfg-comment-row time {
    grid-column: 2;
  }
}

.app-patch-label {
  margin: 16px 0 0;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
  text-align: center;
}

.challenge-card.ready {
  border-color: rgba(0,255,156,.44);
}

.challenge-card.claimed {
  opacity: .7;
}

.challenge-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.challenge-card b {
  color: #fff;
}

.challenge-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
}

.challenge-card footer {
  justify-content: space-between;
}

.challenge-card footer button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
}

@media (max-width: 560px) {
  .playtest-code-form,
  .playtest-code-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* FRAGMATCH command page polish */
.comms {
  grid-template-rows: minmax(250px, 36%) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 16px calc(var(--safe-bottom) + 16px);
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 31, 49, .1), transparent 180px),
    #030407;
}

.comms-panel,
.comms-thread-card,
.squad-command > *,
.discover-swipe-shell {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,31,49,.13), transparent 220px),
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 42px rgba(0,0,0,.38);
}

.comms-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
}

.comms-head,
.squad-command-head,
.discover-swipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.comms-title,
.squad-command-head > div,
.discover-swipe-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.comms-title > span,
.squad-command-head > div > span,
.discover-swipe-head > div > span {
  width: 4px;
  height: 32px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #ff1f31;
  box-shadow: 0 0 14px rgba(255,31,49,.55);
}

.comms-title h1,
.squad-command-head h1,
.discover-swipe-head h1 {
  margin: 0;
  color: #fff;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: clamp(2rem, 8vw, 2.9rem);
  line-height: .9;
  text-transform: uppercase;
}

.squad-command-head p,
.discover-swipe-head p {
  margin: 3px 0 0;
  color: rgba(255,255,255,.6);
}

.comms-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 190px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}

.comms-tabs button {
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-size: 1.2rem;
  font-weight: 800;
}

.comms-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,31,49,.7), rgba(113,71,255,.45));
  box-shadow: 0 0 24px rgba(255,31,49,.34), inset 0 0 0 1px rgba(255,255,255,.18);
}

.comms-search {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(0,0,0,.48);
}

.comms-search i,
.composer > span {
  width: 24px;
  height: 24px;
  opacity: .6;
  background: currentColor;
  clip-path: polygon(45% 6%, 61% 12%, 62% 40%, 87% 65%, 75% 78%, 50% 53%, 23% 80%, 10% 67%, 39% 38%);
}

.comms-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
}

.comms-chat-list {
  display: grid;
  gap: 12px;
  padding: 0 2px 4px;
}

.comms-chat-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: #fff;
}

.comms-chat-item.active {
  border-color: rgba(255,47,95,.82);
  background: linear-gradient(135deg, rgba(255,31,49,.13), rgba(113,71,255,.08));
  box-shadow: 0 0 26px rgba(255,31,49,.2), inset 0 0 0 1px rgba(113,71,255,.22);
}

.comms-chat-item img,
.thread-head > img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,47,95,.42);
}

.comms-chat-item span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.comms-chat-item b,
.comms-chat-item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-chat-item b {
  font-size: 1.22rem;
}

.comms-chat-item em {
  color: rgba(255,255,255,.62);
  font-style: normal;
}

.comms-chat-item > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff1f31;
  box-shadow: 0 0 12px rgba(255,31,49,.82);
}

.comms-thread-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px;
  background:
    radial-gradient(circle at 94% 28%, rgba(113,71,255,.1), transparent 220px),
    radial-gradient(circle at 6% 5%, rgba(255,31,49,.12), transparent 220px),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.88));
}

.thread-head {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,47,49,.48);
}

.thread-head b {
  display: block;
  color: #fff;
  font-size: 1.22rem;
}

.thread-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.thread-actions .ghost {
  min-height: 42px;
  padding: 0 14px;
  border-color: rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #fff;
}

.messages {
  gap: 18px;
  padding: 24px 12px;
}

.bubble {
  display: grid;
  gap: 8px;
  max-width: min(78%, 100%);
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px 14px 14px 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.bubble.mine {
  border-radius: 14px 14px 2px 14px;
  border-color: rgba(255,47,95,.6);
  background: linear-gradient(135deg, rgba(255,31,49,.86), rgba(113,71,255,.78));
}

.bubble p {
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
}

.bubble small {
  color: rgba(255,255,255,.66);
  font-size: .84rem;
  text-align: right;
}

.composer {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(0,0,0,.62);
}

.composer input {
  border: 0;
  background: transparent;
  font-size: 1rem;
}

.composer button {
  min-height: 50px;
  min-width: 112px;
  border-radius: 10px;
  box-shadow: 0 0 28px rgba(255,31,49,.35);
}

.squad-command,
.discover-swipe-shell {
  display: grid;
  gap: 14px;
  padding: 14px 16px calc(var(--safe-bottom) + 16px);
  background:
    radial-gradient(circle at 15% 0%, rgba(255,31,49,.08), transparent 200px),
    #030407;
}

.profile-sharecard.profile-page.theme-sticksgg-bg,
.shell.theme-sticksgg-bg,
.shell.theme-sticksgg-bg #view,
.shell.theme-sticksgg-bg .home-command,
.shell.theme-sticksgg-bg .social-page,
.shell.theme-sticksgg-bg .comms,
.shell.theme-sticksgg-bg .squad-command,
.shell.theme-sticksgg-bg .discover-swipe-shell {
  background:
    radial-gradient(circle at 18% 8%, rgba(255,31,49,.12), transparent 220px),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.62)),
    url("/assets/cosmetics/sticksgg-bg.png") center top / cover repeat-y,
    #030407;
}

.profile-editor-preview.theme-takeover-bg,
.profile-sharecard.profile-page.theme-takeover-bg,
.public-profile-page.theme-takeover-bg,
.shell.theme-takeover-bg .home-command,
.shell.theme-takeover-bg .social-page,
.shell.theme-takeover-bg .comms,
.shell.theme-takeover-bg .squad-command,
.shell.theme-takeover-bg .discover-swipe-shell,
.shell.theme-takeover-bg #view {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,115,4,.18), transparent 240px),
    linear-gradient(180deg, rgba(4,6,10,.18), rgba(4,6,10,.74)),
    url("/assets/cosmetics/takeover-bg.png") center top / cover no-repeat,
    #04070a;
}

.profile-editor-preview.theme-takeover-bg .profile-editor-preview-bg {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,115,4,.2), transparent 210px),
    linear-gradient(180deg, rgba(4,6,10,.12), rgba(4,6,10,.66)),
    url("/assets/cosmetics/takeover-bg.png") center / cover no-repeat;
  opacity: .95;
}

.theme-takeover.profile-sharecard.profile-page .profile-section,
.theme-takeover.public-profile-page .profile-section,
.shell.theme-takeover .glass,
.shell.theme-takeover .card {
  border-color: rgba(255,115,4,.32);
}

.border-takeover-orange .profile-frame::before {
  background: url("/assets/cosmetics/frames/takeover-cartoon-af.svg") center / 100% 100% no-repeat;
}

.profile-sharecard.profile-page.border-takeover-orange .profile-frame,
.public-profile-page.border-takeover-orange .profile-frame {
  background: rgba(4, 7, 10, .86);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 24px rgba(255,115,4,.42),
    0 18px 46px rgba(0,0,0,.66);
}

.profile-sharecard.profile-page.border-takeover-orange .profile-frame::before,
.public-profile-page.border-takeover-orange .profile-frame::before {
  display: none !important;
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 8;
  border-radius: 34px;
  background: url("/assets/cosmetics/frames/takeover-cartoon-af.svg") center / 100% 100% no-repeat;
  animation: none;
  pointer-events: none;
}

.profile-sharecard.profile-page.border-takeover-orange .profile-frame-emblem {
  z-index: 9;
  filter: drop-shadow(0 0 10px rgba(255,115,4,.9));
}

.profile-page[class*="border-"] .profile-frame.has-frame-asset,
.public-profile-page[class*="border-"] .profile-frame.has-frame-asset,
.profile-sharecard.profile-page.border-takeover-orange .profile-frame.has-frame-asset,
.public-profile-page.border-takeover-orange .profile-frame.has-frame-asset {
  background: transparent !important;
}

.profile-page[class*="border-"] .profile-frame.has-frame-asset::after,
.public-profile-page[class*="border-"] .profile-frame.has-frame-asset::after,
.profile-editor-preview[class*="border-"] .profile-editor-avatar.has-frame-asset::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.profile-frame.has-frame-asset .profile-avatar-xl,
.profile-editor-avatar.has-frame-asset > img:not(.profile-editor-frame-asset) {
  background: transparent !important;
}

.profile-frame.has-frame-asset .profile-avatar-mask > .profile-avatar-xl,
.profile-editor-avatar.has-frame-asset .profile-editor-avatar-mask > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #05060c !important;
}

.profile-frame.has-frame-asset .profile-avatar-mask,
.profile-editor-avatar.has-frame-asset .profile-editor-avatar-mask {
  overflow: hidden !important;
  pointer-events: auto;
}

.profile-frame.has-frame-asset .profile-frame-asset,
.profile-editor-avatar.has-frame-asset .profile-editor-frame-asset {
  pointer-events: none !important;
}

/* Cosmetic effects use a dedicated visual layer so previews and saved profiles match. */
.profile-sharecard.profile-page,
.public-profile-page,
.profile-editor-preview,
.swipe-card {
  position: relative;
  isolation: isolate;
}

.profile-sharecard.profile-page > :not(.profile-effect-layer),
.public-profile-page > :not(.profile-effect-layer),
.profile-editor-preview > :not(.profile-effect-layer),
.swipe-card > :not(.profile-effect-layer) {
  position: relative;
  z-index: 2;
}

.profile-effect-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: paint;
}

/* Saved/public profiles keep effects behind content so faction/background art
   does not wash over readable panels. */
.profile-sharecard.profile-page > .profile-effect-layer,
.public-profile-page > .profile-effect-layer {
  z-index: 1;
  filter: saturate(1.35) brightness(1.12);
}

.profile-effect-layer .effect-surface,
.profile-effect-layer .effect-surface::before,
.profile-effect-layer .effect-surface::after,
.profile-effect-layer .effect-motes {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.profile-sharecard.profile-page.effect-particles::after,
.profile-sharecard.profile-page.effect-sparks::after,
.profile-sharecard.profile-page.effect-rgb-shimmer::after,
.profile-sharecard.profile-page.effect-holo-scan::after,
.profile-sharecard.profile-page.effect-glitch-overlay::after,
.public-profile-page.effect-particles::after,
.public-profile-page.effect-sparks::after,
.public-profile-page.effect-rgb-shimmer::after,
.public-profile-page.effect-holo-scan::after,
.public-profile-page.effect-glitch-overlay::after,
.profile-editor-preview.effect-particles::after,
.profile-editor-preview.effect-sparks::after,
.profile-editor-preview.effect-rgb-shimmer::after,
.profile-editor-preview.effect-holo-scan::after,
.profile-editor-preview.effect-glitch-overlay::after {
  content: none !important;
  display: none !important;
}

.profile-sharecard.profile-page.effect-scanlines .profile-hero::before,
.public-profile-page.effect-scanlines .profile-hero::before {
  content: none !important;
  display: none !important;
}

.profile-effect-layer.effect-scanlines .effect-surface {
  opacity: .52;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 5px,
    rgba(111, 224, 255, .48) 6px,
    rgba(255, 255, 255, .16) 7px,
    transparent 8px 11px
  );
  background-size: 100% 22px;
  mix-blend-mode: screen;
  animation: fmScanlines 2.2s linear infinite;
}

.profile-effect-layer.effect-scanlines .effect-surface::after {
  content: "";
  opacity: .48;
  background: linear-gradient(180deg, transparent, rgba(99, 225, 255, .88), rgba(139, 92, 246, .5), transparent);
  filter: drop-shadow(0 0 12px rgba(47, 180, 255, .78));
  transform: translate3d(0, -110%, 0);
  animation: fmScanBeam 4.2s ease-in-out infinite;
}

.profile-effect-layer.effect-particles .effect-surface {
  opacity: .46;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 95, .75) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 31%, rgba(139, 92, 246, .72) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 70%, rgba(47, 140, 255, .68) 0 1px, transparent 3px);
  filter: blur(.1px) drop-shadow(0 0 9px rgba(139, 92, 246, .95));
}

.effect-motes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px #fff, 0 0 17px #8b5cf6, 0 0 27px rgba(255, 47, 159, .75);
  opacity: 0;
  animation: fmParticleFloat var(--duration) ease-in-out var(--delay) infinite;
  will-change: transform, opacity;
}

.profile-effect-layer.effect-rgb-shimmer .effect-surface {
  inset: -25%;
  opacity: .58;
  background: linear-gradient(
    112deg,
    transparent 25%,
    rgba(255, 47, 95, .68) 38%,
    rgba(255, 255, 255, .42) 48%,
    rgba(47, 140, 255, .7) 58%,
    transparent 72%
  );
  mix-blend-mode: screen;
  transform: translate3d(-55%, 0, 0) skewX(-12deg);
  animation: fmRgbShimmer 4.6s cubic-bezier(.45, 0, .25, 1) infinite;
  will-change: transform;
}

.profile-effect-layer.effect-rgb-shimmer .effect-surface::after {
  content: "";
  opacity: .26;
  background: linear-gradient(90deg, #ff2f5f, #8b5cf6, #2f8cff, #25f59a, #ff2f5f);
  background-size: 240% 100%;
  mix-blend-mode: color-dodge;
  animation: fmRgbFlow 6s linear infinite;
}

.profile-effect-layer.effect-holo-scan .effect-surface {
  opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgba(47, 190, 255, .24) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}

.profile-effect-layer.effect-holo-scan .effect-surface::before,
.profile-effect-layer.effect-holo-scan .effect-surface::after {
  content: "";
  height: 26%;
  opacity: .74;
  background: linear-gradient(180deg, transparent, rgba(60, 240, 255, .78), rgba(181, 92, 255, .48), transparent);
  filter: drop-shadow(0 0 14px rgba(60, 240, 255, .7));
  mix-blend-mode: screen;
  transform: translate3d(0, -150%, 0);
  animation: fmHoloScan 4.8s ease-in-out infinite;
  will-change: transform;
}

.profile-effect-layer.effect-holo-scan .effect-surface::after {
  animation-delay: -2.4s;
  filter: hue-rotate(90deg);
}

.profile-effect-layer.effect-sparks .effect-motes i {
  width: calc(var(--size) * 3.2);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff6ad 35%, #ff8a1f 75%, transparent);
  box-shadow: 0 0 8px #fff2a3, 0 0 16px #ff9d24, 0 0 25px rgba(255, 47, 95, .86);
  transform: rotate(-28deg);
  animation-name: fmSparkFly;
  animation-timing-function: cubic-bezier(.2, .65, .25, 1);
}

.profile-effect-layer.effect-sparks .effect-surface {
  opacity: .46;
  background:
    radial-gradient(circle at 15% 86%, rgba(255, 119, 20, .8), transparent 22%),
    radial-gradient(circle at 90% 15%, rgba(255, 47, 95, .62), transparent 20%);
  mix-blend-mode: screen;
}

.profile-effect-layer.effect-glitch-overlay .effect-surface {
  opacity: .58;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 47, 95, .48) 8% 9%, transparent 9% 63%, rgba(47, 140, 255, .46) 63% 64%, transparent 64%),
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, .16) 14px, transparent 16px);
  mix-blend-mode: screen;
  animation: fmGlitchJitter 2.7s steps(1, end) infinite;
}

.profile-effect-layer.effect-glitch-overlay .effect-surface::before,
.profile-effect-layer.effect-glitch-overlay .effect-surface::after {
  content: "";
  opacity: .68;
  background: linear-gradient(90deg, rgba(255, 47, 95, .88), transparent 34%, rgba(47, 140, 255, .82));
  clip-path: polygon(0 18%, 100% 18%, 100% 23%, 0 23%, 0 67%, 100% 67%, 100% 72%, 0 72%);
  transform: translate3d(-4px, 0, 0);
  animation: fmGlitchSlice 2.2s steps(1, end) infinite;
}

.profile-effect-layer.effect-glitch-overlay .effect-surface::after {
  filter: hue-rotate(120deg);
  transform: translate3d(4px, 0, 0);
  animation-delay: -.85s;
}

/* Neon Pulse is a border cosmetic, not an aura. Keep it outside the image mask. */
.profile-sharecard.profile-page.border-neon-pulse .profile-frame:not(.has-frame-asset),
.public-profile-page.border-neon-pulse .profile-frame:not(.has-frame-asset) {
  --cosmetic-accent: #ff2f9f;
  background: linear-gradient(140deg, #ff2f5f, #c026ff 52%, #2f8cff);
  animation: fmNeonPulse 1.9s ease-in-out infinite !important;
}

.profile-editor-preview.border-neon-pulse .profile-editor-avatar {
  --cosmetic-accent: #ff2f9f;
  border-color: #ff4bc7;
  animation: fmEditorNeonPulse 1.9s ease-in-out infinite !important;
}

.swipe-card.border-neon-pulse {
  animation: fmCardNeonPulse 2.1s ease-in-out infinite;
}

@keyframes fmScanlines {
  to { background-position: 0 22px; }
}

@keyframes fmScanBeam {
  0%, 15% { transform: translate3d(0, -110%, 0); }
  70%, 100% { transform: translate3d(0, 110%, 0); }
}

@keyframes fmParticleFloat {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.55); }
  24% { opacity: 1; }
  75% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.35); }
}

@keyframes fmRgbShimmer {
  0%, 12% { transform: translate3d(-55%, 0, 0) skewX(-12deg); }
  68%, 100% { transform: translate3d(55%, 0, 0) skewX(-12deg); }
}

@keyframes fmRgbFlow {
  to { background-position: 240% 0; }
}

@keyframes fmHoloScan {
  0%, 12% { transform: translate3d(0, -150%, 0); }
  70%, 100% { transform: translate3d(0, 480%, 0); }
}

@keyframes fmSparkFly {
  0% { opacity: 0; transform: translate3d(-18px, 18px, 0) rotate(-28deg) scaleX(.5); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--drift-y), 0) rotate(-28deg) scaleX(1.25); }
}

@keyframes fmGlitchJitter {
  0%, 86%, 100% { transform: translate3d(0, 0, 0); filter: none; }
  88% { transform: translate3d(3px, -1px, 0); filter: hue-rotate(35deg); }
  90% { transform: translate3d(-4px, 1px, 0); }
  93% { transform: translate3d(2px, 0, 0); filter: saturate(1.7); }
}

@keyframes fmGlitchSlice {
  0%, 78%, 100% { clip-path: polygon(0 18%, 100% 18%, 100% 23%, 0 23%, 0 67%, 100% 67%, 100% 72%, 0 72%); }
  80% { clip-path: polygon(0 8%, 100% 8%, 100% 13%, 0 13%, 0 52%, 100% 52%, 100% 59%, 0 59%); }
  86% { clip-path: polygon(0 31%, 100% 31%, 100% 36%, 0 36%, 0 80%, 100% 80%, 100% 85%, 0 85%); }
}

@keyframes fmNeonPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 12px rgba(255,47,95,.62), 0 0 22px rgba(47,140,255,.38), 0 18px 46px rgba(0,0,0,.62); }
  50% { box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 28px rgba(255,47,159,.95), 0 0 48px rgba(47,140,255,.7), 0 18px 46px rgba(0,0,0,.62); }
}

@keyframes fmEditorNeonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,47,95,.55), 0 0 22px rgba(47,140,255,.25); }
  50% { box-shadow: 0 0 28px rgba(255,47,159,.92), 0 0 42px rgba(47,140,255,.62); }
}

@keyframes fmCardNeonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,47,95,.24); }
  50% { box-shadow: 0 0 28px rgba(255,47,159,.58), 0 0 42px rgba(47,140,255,.3); }
}

.reduced-effects .profile-effect-layer {
  opacity: .9;
}

.reduced-effects .profile-effect-layer.effect-scanlines .effect-surface {
  animation-duration: 4.4s;
  opacity: .42;
}

.reduced-effects .profile-effect-layer.effect-scanlines .effect-surface::after,
.reduced-effects .profile-effect-layer.effect-holo-scan .effect-surface::before,
.reduced-effects .profile-effect-layer.effect-holo-scan .effect-surface::after {
  animation-duration: 7.5s;
}

.reduced-effects .profile-effect-layer.effect-particles .effect-motes i,
.reduced-effects .profile-effect-layer.effect-sparks .effect-motes i {
  animation-duration: 7s;
}

.reduced-effects .profile-effect-layer.effect-rgb-shimmer .effect-surface {
  animation-duration: 7.8s;
  opacity: .48;
}

.reduced-effects .profile-effect-layer.effect-glitch-overlay .effect-surface,
.reduced-effects .profile-effect-layer.effect-glitch-overlay .effect-surface::before,
.reduced-effects .profile-effect-layer.effect-glitch-overlay .effect-surface::after {
  animation-duration: 4.8s;
  opacity: .5;
}

.reduced-effects.border-neon-pulse .profile-frame,
.reduced-effects.border-neon-pulse .profile-editor-avatar,
.reduced-effects.swipe-card.border-neon-pulse {
  animation-duration: 3.8s !important;
}

.performance-toggle span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .profile-effect-layer,
  .profile-effect-layer *,
  .border-neon-pulse .profile-frame,
  .border-neon-pulse .profile-editor-avatar,
  .swipe-card.border-neon-pulse {
    animation: none !important;
  }
}

.squad-command-head,
.squad-tabs,
.squad-grid {
  padding: 14px;
}

.squad-command-head {
  align-items: center;
}

.squad-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.squad-grid {
  display: grid;
  gap: 12px;
}

.squad-command-card {
  padding: 14px;
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.52);
}

.squad-command-card.active-squad {
  border-color: rgba(0,255,156,.48);
  box-shadow: 0 0 24px rgba(0,255,156,.12);
}

.squad-command-card .row {
  min-width: 0;
  flex-wrap: wrap;
}

.squad-command-card > .row > img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(255, 47, 95, .36);
}

.squad-command-card h3 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 1.2rem;
}

.squad-session-panel {
  margin: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(0,0,0,.68), rgba(20, 8, 28, .54));
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
}

.squad-session-panel .section-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.squad-session-panel .section-head > span {
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff2f5f, #8b5cf6);
  box-shadow: 0 0 18px rgba(255,47,95,.4);
  flex: 0 0 auto;
}

.squad-session-panel h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
}

.squad-session-panel p {
  margin: 3px 0 0;
  color: var(--muted);
}

.squad-session-list {
  display: grid;
  gap: 10px;
}

.squad-session-row {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(10, 12, 24, .76);
}

.squad-session-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.squad-session-main img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,47,95,.28);
  flex: 0 0 auto;
}

.squad-session-main h3 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.squad-session-main p {
  margin: 2px 0 0;
  font-size: .86rem;
}

.squad-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.squad-session-actions button,
.squad-session-actions .chip {
  min-height: 38px;
}

.squad-session-empty {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

.squad-session-empty b {
  color: #fff;
}

.squad-session-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.squad-session-recent span {
  padding: 7px 9px;
  border: 1px solid rgba(0,255,156,.2);
  border-radius: 999px;
  color: #bfffe3;
  background: rgba(0,255,156,.06);
  font-size: .82rem;
}

.squad-session-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 9px;
}

.squad-session-history-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.squad-session-history-head span {
  color: var(--muted);
  font-size: .78rem;
}

.squad-session-history {
  display: grid;
  gap: 8px;
}

.squad-session-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #fff;
  text-align: left;
}

.squad-session-history-row b,
.squad-session-history-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-session-history-row small {
  grid-column: 2;
  color: var(--muted);
}

.session-history-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #dfe6ff;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.session-history-status.status-completed { border-color: rgba(0,255,156,.36); color: #aaffd6; background: rgba(0,255,156,.08); }
.session-history-status.status-cancelled { border-color: rgba(255,86,113,.38); color: #ffb0bf; background: rgba(255,47,95,.08); }
.session-history-status.status-expired { border-color: rgba(255,190,92,.38); color: #ffd394; background: rgba(255,175,64,.08); }
.session-history-status.status-open { border-color: rgba(105,206,255,.4); color: #a5e8ff; background: rgba(58,181,255,.08); }

.squad-session-history-row:focus-visible,
.session-details:focus-visible,
.squad-session-detail-card button:focus-visible {
  outline: 3px solid #8fe8ff;
  outline-offset: 3px;
}

.squad-session-modal {
  z-index: 30;
  align-items: center;
  padding: max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom));
  overflow: auto;
}

.squad-session-detail-card {
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  padding: 18px;
}

.squad-session-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.squad-session-detail-head h2 { margin: 8px 0 0; color: #fff; }
.squad-session-detail-head p { margin: 3px 0 0; color: var(--muted); }

.squad-session-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

.squad-session-detail-meta > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.squad-session-detail-meta span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.squad-session-detail-meta b { color: #fff; font-size: .86rem; }

.session-status-copy,
.session-endorsement-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid #8fe8ff;
  border-radius: 8px;
  background: rgba(83,196,255,.08);
  color: #dceeff;
}

.squad-session-participant-list { display: grid; gap: 8px; }

.squad-session-participant {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(5,7,15,.58);
}

.squad-session-participant > img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.squad-session-participant > div:not(.participant-actions) { display: grid; min-width: 0; }
.squad-session-participant b { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.squad-session-participant span { color: var(--muted); font-size: .76rem; }

.participant-response { padding: 4px 7px; border-radius: 999px; text-transform: capitalize; }
.participant-response.response-confirmed { color: #9dffd0; background: rgba(0,255,156,.1); }
.participant-response.response-declined { color: #ffadba; background: rgba(255,47,95,.1); }
.participant-response.response-pending { color: #ffd194; background: rgba(255,175,64,.1); }

.participant-actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.participant-actions button { min-height: 34px; padding: 0 10px; }

.squad-session-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.auth-legal-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  margin: 12px 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

.auth-legal-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ff2f5f; }
.auth-legal-consent a, .auth-legal a { color: #8fe8ff; }

.legal-consent-modal,
.moderation-modal {
  z-index: 45;
  align-items: center;
  padding: max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom));
  overflow: auto;
}

.legal-consent-card,
.moderation-card {
  width: min(680px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 20px;
}

.legal-consent-card h2 { margin: 10px 0 6px; }
.legal-consent-card > p,
.legal-consent-card li { color: var(--muted); }
.legal-consent-card a { color: #8fe8ff; }
.legal-consent-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.moderation-head,
.moderation-report > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.moderation-head h2 { margin: 9px 0 2px; }
.moderation-head p { margin: 0; color: var(--muted); }
.moderation-list { display: grid; gap: 10px; margin-top: 16px; }
.moderation-report { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(5,7,15,.62); }
.moderation-report p { margin: 0; }
.moderation-report label { display: grid; gap: 5px; color: #fff; font-size: .78rem; font-weight: 800; }
.moderation-report select,
.moderation-report textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: #100d19; color: #fff; }
.moderation-report textarea { min-height: 82px; resize: vertical; }
.moderation-card :focus-visible,
.legal-consent-card :focus-visible { outline: 3px solid #8fe8ff; outline-offset: 3px; }

@media (max-width: 520px) {
  .squad-session-detail-meta { grid-template-columns: 1fr; }
  .squad-session-participant { grid-template-columns: 38px minmax(0, 1fr); }
  .participant-response { grid-column: 2; width: max-content; }
  .participant-actions { grid-column: 1 / -1; }
}

.discover-swipe-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.discover-swipe-head {
  padding: 0;
  min-height: 0;
}

.discover-swipe-head .chip {
  flex: 0 0 auto;
}

.swipe-stage {
  height: auto;
  min-height: 0;
  max-height: 100%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(0,0,0,.54);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}

.swipe-card {
  border-radius: 18px;
  min-height: 0;
  grid-template-rows: minmax(160px, 1fr) auto;
}

.swipe-actions {
  padding: 0;
  min-height: 0;
}

.swipe-actions button {
  min-height: 52px;
  border-radius: 12px;
}

@media (max-width: 430px) {
  .comms {
    grid-template-rows: minmax(230px, 38%) minmax(0, 1fr);
    padding-inline: 12px;
  }
  .comms-panel,
  .comms-thread-card {
    padding: 14px;
    border-radius: 16px;
  }
  .comms-head,
  .thread-head,
  .squad-command-head,
  .discover-swipe-head {
    align-items: stretch;
    flex-direction: column;
  }
  .thread-head {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .thread-actions {
    grid-column: 1 / -1;
    justify-content: start;
  }
  .comms-tabs {
    width: 100%;
    min-width: 0;
  }
  .daily-challenge-list {
    grid-template-columns: 1fr;
  }
  .home-challenge {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .home-challenge strong,
  .home-challenge em,
  .home-challenge button,
  .home-challenge a {
    width: 100%;
  }
  .discover-swipe-shell {
    gap: 10px;
    padding: 12px;
  }
  .discover-swipe-head h1 {
    font-size: clamp(1.7rem, 9vw, 2.15rem);
  }
  .discover-swipe-head p {
    font-size: .82rem;
  }
  .swipe-card {
    grid-template-rows: minmax(135px, 1fr) auto;
  }
  .player-info {
    margin-top: -92px;
    padding: 12px;
  }
  .player-info .row.wrap {
    gap: 6px;
  }
  .player-info .chip,
  .player-info .trust-badge {
    font-size: .68rem;
    padding: 5px 7px;
  }
  .player-info p.muted {
    margin: 6px 0;
    font-size: .78rem;
    line-height: 1.25;
  }
  .trust-strip,
  .swipe-clip-strip,
  .trust-actions {
    margin-top: 6px;
  }
  .swipe-actions {
    gap: 8px;
  }
  .swipe-actions button {
    min-height: 46px;
  }
  .social-page {
    padding-inline: 12px;
  }
  .social-page-head,
  .social-form-grid,
  .full-lfg-post > div {
    grid-template-columns: 1fr;
  }
  .social-page-head > div {
    grid-template-columns: 4px minmax(0, 1fr);
  }
  .social-page-head p {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .home-feature-grid {
    display: flex;
    overflow-x: auto;
  }

  .home-feature-card {
    flex: 0 0 190px;
  }
}

@media (max-width: 480px) {
  .home-command {
    padding: 12px 12px calc(var(--safe-bottom) + 100px);
  }

  .home-status-hero {
    grid-template-columns: 1fr;
  }

  .home-level-card {
    grid-template-columns: 88px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
  }

  .home-level-card b,
  .home-level-card small {
    text-align: left;
  }

  .home-level-token {
    grid-row: 1 / 4;
  }

  .home-live-row {
    grid-template-columns: repeat(5, 128px);
  }

  .home-recommended-grid,
  .home-lfg-grid {
    grid-template-columns: 1fr;
  }

  .home-challenge {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .home-actions,
  .home-status-hero,
  .home-level-card {
    grid-template-columns: 1fr;
  }

  .home-level-token {
    grid-row: auto;
    justify-self: center;
  }

  .home-status-hero h1 {
    font-size: 1.85rem;
  }
}

/* 2026-06-03: compact profile editing, default avatars, and live status polish. */
.shell.status-looking-now { --live-status-color: #00ff9c; }
.shell.status-online { --live-status-color: #2f8cff; }
.shell.status-away { --live-status-color: #ffd33d; }
.shell.status-offline { --live-status-color: #6b7280; }

.shell .brand-icon {
  border-radius: 9px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--live-status-color, #ff2f5f) 58%, rgba(255,255,255,.18)),
    0 0 16px color-mix(in srgb, var(--live-status-color, #ff2f5f) 38%, transparent);
}

.home-eyebrow i,
.home-status-hero h1 i {
  background: var(--live-status-color, #00ff9c) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--live-status-color, #00ff9c) 80%, transparent) !important;
}

.cosmetic.verified,
.profile-page .cosmetic.verified,
.profile-sharecard.profile-page .cosmetic.verified,
.profile-editor-badge-row .verified {
  color: #fff !important;
  background: linear-gradient(135deg, #ff3fb4, #d946ef) !important;
  border-color: rgba(255, 91, 206, .82) !important;
  box-shadow: 0 0 18px rgba(255, 63, 180, .34) !important;
}

.profile-editor-modal {
  padding: max(var(--safe-top), 8px) 8px 0;
}

.profile-editor-modal .modal-card {
  max-width: min(500px, calc(100vw - 18px));
  padding: 12px 12px calc(var(--safe-bottom) + 12px);
  border-radius: 16px 16px 0 0;
}

.profile-edit-hub,
.profile-edit-detail {
  gap: 9px;
}

.profile-edit-topbar {
  gap: 8px;
}

.profile-edit-topbar h2 {
  font-size: clamp(1.8rem, 7vw, 2.45rem);
  line-height: .9;
}

.profile-edit-topbar span {
  font-size: .62rem;
  letter-spacing: .11em;
}

.profile-edit-topbar .ghost {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
}

.profile-edit-detail .profile-editor-preview {
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: auto;
  padding: 10px;
  gap: 10px;
}

.profile-edit-detail .profile-editor-avatar {
  width: 82px;
}

.profile-edit-detail .profile-editor-id h2 {
  margin: 5px 0 3px;
  font-size: clamp(1.9rem, 9vw, 2.7rem);
}

.profile-edit-detail .profile-editor-id p {
  margin-bottom: 6px;
  font-size: .9rem;
  line-height: 1.15;
}

.profile-edit-form .field {
  display: grid;
  gap: 5px;
}

.profile-edit-form .field label {
  font-size: .68rem;
}

.profile-edit-form input,
.profile-edit-form textarea,
.profile-edit-form select {
  min-height: 40px;
  padding: 10px 11px;
  border-radius: 10px;
}

.profile-edit-form textarea {
  min-height: 92px;
}

.profile-edit-form .primary {
  min-height: 48px;
  border-radius: 11px;
}

.profile-photo-upload {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.profile-photo-upload img {
  width: 68px;
  height: 68px;
}

.default-avatar-field {
  margin-top: -2px;
}

.default-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.default-avatar-pick {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: #fff;
  cursor: pointer;
}

.default-avatar-pick.active {
  border-color: rgba(255, 47, 95, .78);
  box-shadow: 0 0 16px rgba(255, 47, 95, .22);
}

.default-avatar-pick img {
  width: 100%;
  max-width: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.default-avatar-pick span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.76);
  font-size: .64rem;
}

.trust-profile-card {
  grid-template-columns: minmax(88px, 1.1fr) repeat(3, minmax(72px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.trust-profile-card > div:not(.trust-badge) {
  min-height: 78px;
  padding: 10px 8px;
}

.trust-profile-card .negative span {
  white-space: normal;
  line-height: 1;
}

@media (max-width: 430px) {
  .default-avatar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-profile-card {
    grid-template-columns: 1fr 1fr;
  }
}

/* Final compact pass for profile editors and social utility pages. */
.profile-editor-modal .modal-card.profile-edit-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: auto;
  max-height: calc(100dvh - max(var(--safe-top), 8px));
  overflow-y: auto;
}

.profile-edit-form .profile-edit-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.profile-edit-form .profile-edit-topbar .ghost,
.social-page-head > .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.profile-edit-form .field {
  min-height: 0;
  padding: 0;
}

.profile-edit-form .field:has(input),
.profile-edit-form .field:has(textarea),
.profile-edit-form .field:has(select),
.profile-edit-form .field.main-game-edit {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
}

.profile-edit-form input,
.profile-edit-form textarea,
.profile-edit-form select {
  font-size: .95rem;
}

.profile-edit-form textarea {
  min-height: 74px;
  resize: vertical;
}

.profile-edit-form .profile-save-action {
  width: auto;
  min-width: 150px;
  min-height: 38px !important;
  justify-self: end;
  padding: 0 16px !important;
  border-radius: 10px;
  font-size: .86rem;
  box-shadow: 0 0 18px rgba(139, 92, 246, .18);
}

.main-game-edit {
  gap: 9px;
}

.main-game-choice-grid {
  display: grid;
  gap: 8px;
}

.main-game-choice {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 8px 36px 8px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  overflow: hidden;
}

.main-game-choice:hover,
.main-game-choice:has(input:checked) {
  border-color: rgba(255, 47, 95, .72);
  background: linear-gradient(135deg, rgba(255, 47, 95, .14), rgba(139, 92, 246, .1));
  box-shadow: 0 0 18px rgba(255, 47, 95, .14);
}

.main-game-choice img {
  width: 54px;
  height: 64px;
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255,255,255,.06);
}

.main-game-choice span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.main-game-choice b,
.main-game-choice em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-game-choice b {
  color: #fff;
  font-size: .95rem;
  line-height: 1.05;
}

.main-game-choice em {
  color: rgba(255,255,255,.58);
  font-size: .74rem;
  font-style: normal;
}

.main-game-choice input {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: #ff2f5f;
}

.social-page {
  gap: 12px;
}

.social-page-head {
  padding: 14px 16px;
  gap: 14px;
}

.social-page-head h1 {
  font-size: clamp(1.95rem, 7.2vw, 2.65rem);
}

.social-page-head p {
  max-width: 34ch;
  font-size: .94rem;
  line-height: 1.25;
}

.social-create-card {
  padding: 14px;
}

.social-post-form input,
.social-post-form textarea {
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 10px;
}

.social-post-form textarea {
  min-height: 78px;
}

.social-post-form .primary {
  min-height: 42px;
  border-radius: 10px;
}

.profile-sharecard.profile-page .profile-section:has(.trust-profile-card) {
  gap: 10px;
}

.profile-sharecard.profile-page .trust-profile-card,
.profile-page .trust-profile-card,
.trust-profile-card {
  grid-template-columns: minmax(94px, .86fr) repeat(3, minmax(74px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.profile-sharecard.profile-page .trust-badge,
.profile-page .trust-badge,
.trust-badge {
  width: 104px;
  height: 104px;
  min-height: 104px;
}

.profile-sharecard.profile-page .trust-badge b,
.profile-page .trust-badge b,
.trust-badge b {
  font-size: 2.55rem;
}

.profile-sharecard.profile-page .trust-badge b::after {
  max-width: 62px;
  font-size: .68rem;
}

.profile-sharecard.profile-page .trust-profile-card > div,
.profile-page .trust-profile-card > *,
.trust-profile-card > div {
  min-height: 70px;
  padding: 9px 8px;
}

.profile-sharecard.profile-page .trust-profile-card > div span,
.profile-page .trust-profile-card div span,
.trust-profile-card span {
  font-size: .76rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.profile-sharecard.profile-page .trust-profile-card > div b,
.profile-page .trust-profile-card div b,
.trust-profile-card b {
  font-size: 1.08rem;
}

.profile-sharecard.profile-page .endorsement-grid,
.profile-page .endorsement-grid,
.endorsement-grid {
  gap: 7px;
  margin-top: 9px;
}

.profile-sharecard.profile-page .endorsement-grid span,
.profile-page .endorsement-grid span,
.endorsement-grid span {
  min-height: 28px;
  padding: 0 10px;
  font-size: .78rem;
}

.profile-sharecard.profile-page .profile-edit-btn,
.profile-page .profile-edit-btn {
  z-index: 120 !important;
  pointer-events: auto !important;
}

.profile-sharecard.profile-page .profile-hero::before,
.profile-sharecard.profile-page .profile-hero::after,
.profile-page .profile-hero::before,
.profile-page .profile-hero::after {
  pointer-events: none !important;
}

.primary,
.ghost,
.danger,
.tab,
.nav-btn,
.icon-btn,
.home-create-lfg,
.challenge-card footer button,
.home-panel-head button,
.home-lfg-card footer button,
.thread-actions .ghost,
.composer button,
.swipe-actions button,
.profile-edit-btn,
.showcase-cosmetics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
}

.ghost,
.primary,
.danger,
.home-create-lfg {
  text-decoration: none;
}

.nav-btn {
  flex-direction: column;
}

.profile-editor-modal .profile-edit-form .primary,
.profile-editor-modal .profile-edit-detail .primary,
.profile-editor-modal .profile-save-action,
.profile-editor-modal .account-save-visibility {
  width: auto !important;
  max-width: 190px;
  min-width: 118px;
  min-height: 34px !important;
  height: 36px;
  justify-self: end;
  padding: 0 12px !important;
  border-radius: 9px;
  font-size: .78rem;
  line-height: 1;
}

.profile-editor-modal .manual-account-editor .primary,
.profile-editor-modal .manual-account-editor .ghost {
  max-width: none;
  min-width: 92px;
  height: 34px;
}

.profile-edit-detail[data-section="cosmetics"] {
  gap: 8px;
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-preview {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  min-height: 86px;
  padding: 7px 8px;
  border-radius: 13px;
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar {
  width: 64px;
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-id h2 {
  margin: 3px 0 2px;
  font-size: clamp(1.45rem, 7vw, 2rem);
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-id p {
  margin-bottom: 4px;
  font-size: .74rem;
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-badge-row span,
.profile-edit-detail[data-section="cosmetics"] .profile-editor-meta span,
.profile-edit-detail[data-section="cosmetics"] .profile-editor-meta b {
  min-height: 20px;
  padding: 0 7px;
  font-size: .58rem;
  border-radius: 6px;
}

.profile-edit-detail[data-section="cosmetics"] .profile-editor-xp {
  height: 5px;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-editor {
  gap: 8px;
}

.profile-edit-detail[data-section="cosmetics"] .progression-card {
  gap: 7px;
}

.profile-edit-detail[data-section="cosmetics"] .progression-card > div,
.profile-edit-detail[data-section="cosmetics"] .rep-metrics > div {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 12px;
}

.profile-edit-detail[data-section="cosmetics"] .progression-card span {
  font-size: .58rem;
}

.profile-edit-detail[data-section="cosmetics"] .progression-card b {
  font-size: .9rem;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel {
  gap: 7px;
  padding: 10px;
  border-radius: 13px;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel > div:first-child {
  display: grid;
  gap: 2px;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel b {
  font-size: .92rem;
  line-height: 1.05;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel span,
.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel em {
  font-size: .78rem;
  line-height: 1.2;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel input {
  min-height: 34px;
  padding: 8px 10px;
}

.profile-edit-detail[data-section="cosmetics"] .takeover-theme-control {
  gap: 8px;
  padding: 10px;
  border-radius: 13px;
}

.profile-edit-detail[data-section="cosmetics"] .takeover-theme-control span {
  font-size: .58rem;
}

.profile-edit-detail[data-section="cosmetics"] .takeover-theme-control b {
  font-size: 1rem;
}

.profile-edit-detail[data-section="cosmetics"] .takeover-theme-control p {
  font-size: .78rem;
  line-height: 1.2;
}

.profile-edit-detail[data-section="cosmetics"] .takeover-toggle {
  min-height: 34px;
  padding: 0 12px;
  font-size: .72rem;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-picker {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.24);
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-picker > label {
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.72);
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-pick-grid {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 6px;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-pick {
  min-height: 54px;
  gap: 3px;
  padding: 8px 30px 8px 9px;
  border-radius: 10px;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-pick input {
  left: auto;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  accent-color: var(--cosmetic-accent, #ff2f49);
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-pick b {
  font-size: .72rem;
  line-height: 1.05;
}

.profile-edit-detail[data-section="cosmetics"] .cosmetic-pick span {
  font-size: .62rem;
  line-height: 1.05;
}

.profile-edit-detail[data-section="cosmetics"] .performance-toggle {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .78rem;
}

.friends-add-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,.16), transparent 180px),
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.32);
}

.friend-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.friend-add-form input {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(0,0,0,.48);
  color: #fff;
}

.friend-add-form .primary {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 10px;
}

.referral-card {
  border-color: rgba(0,255,156,.25);
}

.referral-card .home-panel-head strong {
  color: #00ff9c;
  font-size: .82rem;
  white-space: nowrap;
}

.referral-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.referral-code-row code {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(0,255,156,.24);
  border-radius: 10px;
  background: rgba(0,255,156,.07);
  color: #eafff7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.referral-rewards span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-size: .74rem;
}

.friend-list {
  display: grid;
  gap: 10px;
}

.friend-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.friend-row img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.friend-row > div:nth-child(2) {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.friend-row b {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(255,255,255,.68);
}

.friend-row em {
  color: rgba(255,255,255,.62);
  font-style: normal;
}

.friend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.friend-actions .primary,
.friend-actions .ghost {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 9px;
}

/* Patch 4.4.3: friends list responsive card layout */
.friend-list {
  gap: 12px;
}

.friend-row {
  position: relative;
  grid-template-columns: 58px minmax(0, 1fr) minmax(170px, auto);
  gap: 12px;
  min-height: 92px;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,47,95,.12), transparent 120px),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.friend-row img {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.35);
}

.friend-row > div:nth-child(2) {
  align-self: center;
  gap: 6px;
}

.friend-row b {
  max-width: 100%;
  font-size: .98rem;
  line-height: 1.05;
}

.friend-row span {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.friend-row span .status-chip {
  max-width: 100%;
}

.friend-row em {
  font-size: .86rem;
  line-height: 1.1;
}

.friend-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(76px, auto));
  justify-content: end;
  gap: 7px;
  min-width: 0;
}

.friend-actions .primary,
.friend-actions .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  font-size: .76rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.friend-actions .friend-message {
  border-color: rgba(139,92,246,.45);
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6 58%, #3b82f6);
  color: #fff;
  box-shadow: 0 10px 24px rgba(139,92,246,.2);
}

.friend-actions .friend-remove {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.075);
}

@media (max-width: 430px) {
  .profile-editor-modal .modal-card {
    padding-inline: 10px;
  }

  .profile-edit-topbar h2 {
    font-size: clamp(1.55rem, 9vw, 2.15rem);
  }

  .profile-edit-form .profile-save-action,
  .profile-editor-modal .profile-edit-form .primary,
  .profile-editor-modal .profile-edit-detail .primary,
  .profile-editor-modal .account-save-visibility {
    width: auto !important;
    justify-self: end;
    min-height: 34px !important;
  }

  .social-page-head {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 12px;
  }

  .social-page-head > .ghost {
    width: 64px;
    min-width: 64px;
  }

  .social-page-head h1 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
  }

  .social-form-grid {
    grid-template-columns: 1fr;
  }

  .friend-add-form,
  .friend-row {
    grid-template-columns: 1fr;
  }

  .friend-row {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .friend-row img {
    width: 54px;
    height: 54px;
  }

  .friend-row > div:nth-child(2) {
    min-width: 0;
  }

  .friend-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .friend-actions .primary,
  .friend-actions .ghost {
    width: 100%;
    min-height: 34px;
    padding-inline: 8px;
    font-size: .72rem;
  }

  .profile-sharecard.profile-page .trust-profile-card,
  .profile-page .trust-profile-card,
  .trust-profile-card {
    grid-template-columns: minmax(106px, .86fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .profile-sharecard.profile-page .trust-profile-card > div.negative,
  .profile-page .trust-profile-card > div.negative,
  .trust-profile-card > div.negative {
    grid-column: 2 / 4;
  }
}

.profile-sharecard.profile-page .profile-hero .profile-edit-btn,
.profile-page .profile-hero .profile-edit-btn {
  position: absolute !important;
  top: 6px !important;
  right: 0 !important;
  z-index: 999 !important;
  isolation: isolate;
  pointer-events: auto !important;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: linear-gradient(135deg, #ff7304, #ff2f5f) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .7),
    0 0 22px rgba(255, 115, 4, .58),
    0 12px 26px rgba(0, 0, 0, .62) !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
}

.profile-sharecard.profile-page .profile-hero .profile-edit-btn::before,
.profile-page .profile-hero .profile-edit-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(0, 0, 0, .28);
  pointer-events: none;
}

.profile-sharecard.profile-page.theme-takeover-bg .profile-hero .profile-edit-btn,
.profile-page.theme-takeover-bg .profile-hero .profile-edit-btn {
  background: #ff7304 !important;
  color: #05060c !important;
  border-color: rgba(255, 255, 255, .88) !important;
  text-shadow: none;
  font-weight: 900;
}

.shell.theme-takeover-bg .discover-swipe-head {
  position: relative;
  isolation: isolate;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .58) 62%, rgba(0, 0, 0, .22));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 10px 28px rgba(0, 0, 0, .42);
}

.shell.theme-takeover-bg .discover-swipe-head h1,
.shell.theme-takeover-bg .discover-swipe-head p {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 1),
    0 0 14px rgba(0, 0, 0, .95);
}

.shell.theme-takeover-bg .discover-swipe-head p {
  color: rgba(255, 255, 255, .88);
  font-weight: 800;
}

.profile-sharecard.profile-page .profile-id,
.profile-page .profile-id {
  padding-top: 52px !important;
}

.profile-sharecard.profile-page .profile-hero .profile-edit-btn,
.profile-page .profile-hero .profile-edit-btn,
.profile-sharecard.profile-page.theme-takeover-bg .profile-hero .profile-edit-btn,
.profile-page.theme-takeover-bg .profile-hero .profile-edit-btn {
  background: #11131a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .72),
    0 10px 24px rgba(0, 0, 0, .68),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9) !important;
  font-weight: 800;
}

.profile-sharecard.profile-page .profile-hero .profile-edit-btn::before,
.profile-page .profile-hero .profile-edit-btn::before {
  background: rgba(0, 0, 0, .46);
}

/* Keep the tournament utility page compact inside the 520px app shell. */
.tournaments-page {
  align-content: start;
}

.tournaments-page .social-page-head {
  grid-template-columns: auto minmax(0, 1fr);
}

.tournaments-page .tournament-create {
  grid-column: 1 / -1;
  width: 100%;
}

.tournaments-page .tournament-summary > div {
  align-content: start;
  min-height: 76px;
}

#tournamentForm label.wide {
  justify-content: stretch;
}

/* 2026-06-14: mobile containment and durable avatar presentation. */
#view,
#view > *,
.home-command,
.profile-sharecard.profile-page,
.profile-sharecard.profile-page > *,
.home-panel,
.home-status-hero,
.home-feature-grid,
.home-feature-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#view img {
  max-width: 100%;
}

.profile-sharecard.profile-page {
  grid-template-columns: minmax(0, 1fr) !important;
}

.profile-sharecard.profile-page > * {
  grid-column: 1 / -1 !important;
}

.home-feature-grid {
  scroll-padding-inline: 0;
  overscroll-behavior-inline: contain;
}

.home-feature-card {
  scroll-snap-stop: always;
}

@media (max-width: 560px) {
  .app,
  .shell {
    width: 100%;
    max-width: 100%;
  }

  .topbar {
    gap: 8px;
    padding-inline: 12px;
  }

  .brand-lockup {
    min-width: 0;
  }

  .brand-wordmark {
    width: min(160px, 37vw);
  }

  .home-command {
    gap: 10px;
    padding: 10px 12px calc(var(--safe-bottom) + 96px);
  }

  .home-status-hero {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 29%);
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }

  .home-status-copy {
    gap: 7px;
  }

  .home-status-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
  }

  .home-game-line {
    font-size: .96rem;
  }

  .home-tag-row,
  .home-actions {
    gap: 7px;
  }

  .home-tag {
    min-height: 26px;
    padding-inline: 10px;
    font-size: .82rem;
  }

  .home-primary-action,
  .home-status-control {
    min-height: 44px;
    padding: 7px 9px;
    font-size: .92rem;
    line-height: 1.05;
    text-align: center;
  }

  .home-level-card {
    gap: 8px;
    padding: 11px 8px;
  }

  .home-level-token {
    width: 64px;
    height: 72px;
  }

  .home-level-token span {
    font-size: 2.55rem;
  }

  .home-level-card small {
    font-size: .79rem;
  }

  .home-feature-card {
    flex: 0 0 100%;
    width: 100%;
    min-height: 72px;
  }

  .home-panel {
    gap: 10px;
    padding: 12px;
  }

  .home-panel .muted:only-child,
  .home-live-row > .muted,
  .home-recommended-grid > .muted,
  .home-lfg-grid > .muted {
    margin: 4px 0;
    padding: 4px 0;
    min-height: 0;
    line-height: 1.35;
  }

  .profile-sharecard.profile-page {
    gap: 10px;
    padding: 10px 12px calc(var(--safe-bottom) + 98px);
  }

  .profile-sharecard.profile-page .profile-hero {
    grid-template-columns: minmax(148px, 42%) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0;
    padding: 48px 0 10px;
  }

  .profile-sharecard.profile-page .profile-frame {
    width: 100%;
    max-width: 210px;
  }

  .profile-sharecard.profile-page .profile-id {
    padding-top: 0 !important;
    gap: 6px;
  }

  .profile-sharecard.profile-page .profile-id h1 {
    font-size: clamp(1.7rem, 8vw, 2.7rem);
  }

  .profile-sharecard.profile-page .profile-id .profile-bio-line,
  .profile-sharecard.profile-page .profile-id .profile-meta-line {
    font-size: clamp(.84rem, 3.3vw, 1.05rem);
  }

  .profile-sharecard.profile-page .share-social-strip {
    gap: 7px;
    flex-wrap: wrap;
  }

  .profile-sharecard.profile-page .profile-section,
  .profile-sharecard.profile-page .profile-showcase,
  .profile-sharecard.profile-page .profile-section:has(.about-main-game) {
    min-height: 0 !important;
  }

  .profile-sharecard.profile-page .trust-profile-card,
  .profile-page .trust-profile-card,
  .trust-profile-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }

  .profile-sharecard.profile-page .trust-profile-card > div.negative,
  .profile-page .trust-profile-card > div.negative,
  .trust-profile-card > div.negative {
    grid-column: auto !important;
  }
}

@media (max-width: 400px) {
  .view {
    padding-inline: 10px;
  }

  .topbar {
    padding-inline: 10px;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
  }

  .brand-wordmark {
    width: min(145px, 36vw);
  }

  .icon-btn,
  .avatar-btn,
  .avatar {
    width: 40px;
    height: 40px;
  }

  .bottom-nav {
    gap: 4px;
    padding-inline: 6px;
  }

  .nav-btn {
    min-width: 0;
    min-height: 52px;
    font-size: .66rem;
  }

  .home-status-hero {
    grid-template-columns: 1fr;
  }

  .home-level-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .home-level-token {
    grid-row: 1 / 4;
  }

  .profile-sharecard.profile-page .profile-hero {
    grid-template-columns: 1fr !important;
    padding-top: 48px;
  }

  .profile-sharecard.profile-page .profile-frame {
    justify-self: center;
    width: min(220px, 70vw);
  }

  .profile-sharecard.profile-page .profile-id {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-sharecard .blaze-chip.is-live::after {
    animation: none;
    opacity: .35;
    transform: translateX(0);
  }
}

/* 0.2: keep Comms usable above the persistent mobile navigation. */
#view.comms {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 560px) {
  #view.comms {
    grid-template-rows: minmax(210px, 32%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  .comms-panel {
    grid-template-rows: auto auto minmax(54px, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .comms-head {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr);
    align-items: center;
    gap: 10px;
  }

  .comms-title h1 {
    font-size: 1.85rem;
  }

  .comms-title > span {
    height: 28px;
  }

  .comms-tabs {
    width: 100%;
    min-width: 0;
  }

  .comms-tabs button {
    min-height: 40px;
    font-size: .98rem;
  }

  .comms-search {
    min-height: 44px;
    padding-inline: 12px;
  }

  .comms-search input {
    font-size: 1rem;
  }

  .comms-chat-item {
    grid-template-columns: 46px minmax(0, 1fr) 10px;
    gap: 10px;
    min-height: 58px;
    padding: 7px 9px;
  }

  .comms-chat-item img {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .comms-chat-item b {
    font-size: 1rem;
  }

  .comms-thread-card {
    min-height: 0;
    padding: 10px;
  }

  .thread-head {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    padding-bottom: 9px;
  }

  .thread-head > img {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .thread-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .thread-actions .ghost {
    min-width: 0;
    min-height: 34px;
    padding: 0 7px;
    font-size: .78rem;
  }

  .messages {
    padding: 10px 4px;
    gap: 10px;
  }

  .bubble {
    max-width: 86%;
    padding: 10px 12px;
  }

  .composer {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px;
  }

  .composer > span {
    width: 18px;
    height: 18px;
  }

  .composer input {
    width: 100%;
    min-width: 0;
    padding: 10px 4px;
    font-size: .9rem;
  }

  .composer button {
    min-width: 72px;
    min-height: 42px;
    padding-inline: 12px;
  }
}

/* Compact empty-game prompt used for newly created profiles. */
.matchmaking-empty-game {
  align-self: end;
  width: fit-content;
  max-width: 70%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
}

/* Keep the message composer visible on phone-height viewports. */
@media (max-width: 430px), (max-height: 760px) {
  #view.comms {
    grid-template-rows: minmax(172px, 27%) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }

  .comms-panel,
  .comms-thread-card {
    border-radius: 12px;
  }

  .comms-panel {
    padding: 8px;
    gap: 6px;
  }

  .comms-title h1 {
    font-size: 1.55rem;
  }

  .comms-tabs button,
  .comms-search {
    min-height: 36px;
  }

  .comms-chat-item {
    min-height: 50px;
    padding: 5px 7px;
  }

  .comms-chat-item img {
    width: 38px;
    height: 38px;
  }

  .comms-thread-card {
    padding: 8px;
  }

  .thread-head {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-bottom: 6px;
  }

  .thread-head > img {
    width: 36px;
    height: 36px;
  }

  .thread-actions .ghost {
    min-height: 30px;
    font-size: .7rem;
  }

  .messages {
    padding-block: 7px;
  }

  .composer {
    min-height: 48px;
    padding: 5px 6px;
  }

  .composer input {
    padding-block: 7px;
  }

  .composer button {
    min-width: 64px;
    min-height: 38px;
    padding-inline: 10px;
  }
}

/* 0.6: auth recovery, louder GG matches, and Comms polish. */
.auth-link,
.auth-secondary {
  width: 100%;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-family: "Fragmatch UI", Rajdhani, system-ui, sans-serif;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.auth-secondary {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  text-decoration: none;
}

.gg-match-modal {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,47,95,.28), transparent 34%),
    rgba(0,0,0,.78);
}

.gg-match-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,47,95,.78);
  box-shadow: 0 0 42px rgba(255,47,95,.36), 0 0 58px rgba(139,92,246,.24);
  text-align: center;
  animation: ggMatchPop .38s cubic-bezier(.2, 1.5, .4, 1);
}

.gg-match-card::before,
.gg-match-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, transparent, rgba(255,47,95,.42), transparent, rgba(139,92,246,.38), transparent);
  opacity: .6;
  animation: ggSpin 2.2s linear infinite;
  pointer-events: none;
}

.gg-match-card::after {
  animation-direction: reverse;
  opacity: .35;
}

.gg-match-card > * {
  position: relative;
  z-index: 1;
}

.gg-match-card small {
  color: #00ff9c;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 900;
}

.gg-match-card h2 {
  margin: 0;
  color: #fff;
  font-family: "Fragmatch Title", "Fragmatch Condensed", Impact, sans-serif;
  font-size: clamp(2.6rem, 12vw, 4.8rem);
  line-height: .82;
  text-shadow: 0 0 18px rgba(255,47,95,.85), 0 4px 0 rgba(0,0,0,.55);
}

.gg-match-card p {
  margin: 0;
  font-size: 1.05rem;
}

.gg-match-versus {
  position: relative;
  display: grid;
  grid-template-columns: 76px auto 76px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 2px auto 0;
}

.gg-match-versus img {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow:
    0 0 0 3px rgba(255,47,95,.28),
    0 0 28px rgba(255,47,95,.62),
    0 0 34px rgba(139,92,246,.45);
  background: #080a14;
}

.gg-match-versus span {
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6 58%, #2f8cff);
  font-family: "Fragmatch Title", "Fragmatch Condensed", Impact, sans-serif;
  font-size: 2.1rem;
  line-height: .9;
  box-shadow:
    0 0 26px rgba(255,47,95,.74),
    0 0 32px rgba(47,140,255,.44);
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
  transform: rotate(-2deg);
}

@keyframes ggMatchPop {
  from { transform: scale(.84) rotate(-1deg); opacity: 0; }
  70% { transform: scale(1.04) rotate(.4deg); }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes ggSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 420px) {
  .gg-match-versus {
    grid-template-columns: 62px auto 62px;
    gap: 7px;
  }

  .gg-match-versus img {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .gg-match-versus span {
    min-width: 58px;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 1.75rem;
  }
}

#view.comms {
  grid-template-rows: minmax(200px, 34%) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

#view.comms .comms-panel,
#view.comms .comms-thread-card {
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,47,95,.12), rgba(139,92,246,.07) 46%, rgba(0,0,0,.72)),
    rgba(3,5,13,.82);
  box-shadow: 0 14px 42px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}

#view.comms .comms-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(72px, 1fr);
  gap: 14px;
}

#view.comms .comms-friend-dock {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,.34);
}

#view.comms .comms-friend-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#view.comms .comms-friend-dock-head b {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
}

#view.comms .comms-friend-dock-head button {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .72rem;
}

#view.comms .comms-friend-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(156px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

#view.comms .comms-friend-contact {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 8px;
  min-height: 68px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,47,95,.28);
  background: linear-gradient(135deg, rgba(255,47,95,.12), rgba(139,92,246,.08)), rgba(10,12,22,.84);
  color: #fff;
  text-align: left;
}

#view.comms .comms-friend-contact img {
  grid-row: 1 / -1;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
}

#view.comms .comms-friend-contact span {
  min-width: 0;
}

#view.comms .comms-friend-contact b,
#view.comms .comms-friend-contact em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view.comms .comms-friend-contact em {
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
}

#view.comms .comms-friend-contact strong {
  color: #ff6b92;
  font-size: .72rem;
  text-transform: uppercase;
}

#view.comms .comms-head {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
}

#view.comms .comms-title h1 {
  text-shadow: 0 3px 0 rgba(0,0,0,.65), 0 0 16px rgba(255,47,95,.28);
}

#view.comms .comms-tabs {
  min-height: 56px;
  border-radius: 13px;
  padding: 4px;
  background: rgba(0,0,0,.42);
}

#view.comms .comms-tabs button {
  border-radius: 10px;
  font-size: 1.12rem;
}

#view.comms .comms-search {
  border-radius: 14px;
  background: rgba(0,0,0,.52);
}

#view.comms .comms-chat-list {
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

#view.comms .comms-chat-item {
  border-radius: 16px;
  border-color: rgba(255,255,255,.12);
  background: rgba(7,9,19,.78);
}

#view.comms .comms-chat-item.active {
  border-color: rgba(255,47,95,.9);
  background:
    linear-gradient(135deg, rgba(255,47,95,.22), rgba(139,92,246,.13)),
    rgba(9,8,20,.92);
  box-shadow: 0 0 24px rgba(255,47,95,.24), inset 0 0 0 1px rgba(139,92,246,.18);
}

#view.comms .comms-thread-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

#view.comms .thread-head {
  border-bottom: 1px solid rgba(255,47,95,.38);
}

#view.comms .thread-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: stretch;
  gap: 8px;
}

#view.comms .thread-actions .ghost {
  min-width: 0;
  width: 100%;
  padding: 0 8px;
  justify-content: center;
  text-align: center;
  font-size: .82rem;
}

#view.comms .thread-head b {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

#view.comms .messages {
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 80% 10%, rgba(139,92,246,.1), transparent 34%),
    radial-gradient(circle at 8% 0%, rgba(255,47,95,.09), transparent 30%),
    rgba(0,0,0,.36);
  border-radius: 14px;
  margin: 10px 0;
  padding: 14px 12px;
}

#view.comms .bubble {
  border-radius: 13px 13px 13px 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

#view.comms .bubble.mine {
  border-radius: 13px 13px 3px 13px;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6);
  box-shadow: 0 0 22px rgba(255,47,95,.22);
}

#view.comms .composer {
  position: relative;
  z-index: 2;
  border-radius: 14px;
  background: rgba(0,0,0,.64);
}

#view.comms .composer button {
  border-radius: 11px;
}

@media (max-width: 520px) {
  #view.comms {
    grid-template-rows: minmax(180px, 29%) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #view.comms .comms-panel {
    grid-template-rows: auto auto auto minmax(52px, 1fr);
    padding: 12px;
    gap: 10px;
  }

  #view.comms .comms-friend-dock {
    padding: 8px;
  }

  #view.comms .comms-friend-strip {
    grid-auto-columns: minmax(138px, 70%);
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 180px);
  }

  #view.comms .comms-tabs {
    min-height: 46px;
  }

  #view.comms .comms-chat-item {
    min-height: 60px;
  }

  #view.comms .comms-thread-card {
    padding: 12px;
  }

  #view.comms .thread-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #view.comms .thread-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: stretch;
    gap: 8px;
  }

  #view.comms .thread-actions .ghost {
    min-width: 0;
    min-height: 38px;
    width: 100%;
    padding: 0 8px;
    justify-content: center;
    text-align: center;
    font-size: .82rem;
  }

  #view.comms .messages {
    margin: 8px 0;
    padding: 10px;
  }

  #view.comms .composer {
    grid-template-columns: 18px minmax(0, 1fr) minmax(70px, auto);
  }
}

/* Discover player cards: use real profile imagery and keep identity readable. */
.discover-player-card {
  --card-accent: var(--cosmetic-accent, #ff315d);
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(220px, 55%) minmax(0, 45%) !important;
  border: 1px solid color-mix(in srgb, var(--card-accent) 52%, rgba(255,255,255,.15));
  background: #070913;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 46px rgba(0,0,0,.5);
}

.discover-player-card .player-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #101425;
}

.discover-photo-open,
.discover-name-open {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.discover-photo-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.discover-name-open {
  display: block;
  max-width: 100%;
}

.discover-name-open:focus-visible,
.discover-photo-open:focus-visible {
  outline: 2px solid rgba(255, 47, 95, .9);
  outline-offset: 3px;
  border-radius: 12px;
}

.discover-player-card .player-art::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,5,12,.08) 30%, rgba(3,5,12,.4) 67%, #070913 100%);
}

.discover-player-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  background: #111525;
}

.discover-card-status,
.discover-card-badges,
.discover-game-lockup,
.discover-player-card .clip-pill {
  position: absolute;
  z-index: 3;
}

.discover-card-status {
  top: 12px;
  left: 12px;
}

.discover-card-status .chip {
  border: 1px solid rgba(37,245,154,.5);
  border-radius: 999px;
  background: rgba(3,8,13,.82);
  box-shadow: 0 0 18px rgba(37,245,154,.18);
}

.discover-card-badges {
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.discover-verified {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f03eb2;
  color: white;
  font-weight: 1000;
  box-shadow: 0 0 18px rgba(240,62,178,.4);
}

.discover-founder {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #e5b425;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffe88b, #c99110);
  color: #171007;
  font-family: "Fragmatch Condensed", Teko, sans-serif;
  font-size: .82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.discover-player-card .clip-pill {
  top: auto;
  right: 12px;
  bottom: 13px;
  left: auto;
  max-width: 43%;
  border-color: rgba(168,85,247,.72);
  border-radius: 999px;
  background: rgba(6,5,14,.84);
}

.discover-game-lockup {
  left: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  max-width: 58%;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(4,6,13,.84);
  backdrop-filter: blur(10px);
}

.discover-game-lockup img {
  width: 44px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
}

.discover-game-lockup span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.discover-game-lockup small,
.discover-player-heading small,
.discover-player-facts small {
  color: #9aa4c2;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.discover-game-lockup b {
  overflow: hidden;
  color: white;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-player-card .player-info {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0 !important;
  padding: 13px 14px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0e1a, #070913);
}

.discover-player-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.discover-player-heading > div {
  min-width: 0;
}

.discover-player-heading h2 {
  max-width: 100%;
  margin: 1px 0 0;
  color: white;
  font-size: clamp(1.45rem, 6.5vw, 2rem);
  line-height: .95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-player-heading em {
  color: #8e98b7;
  font-size: .72rem;
  font-style: normal;
}

.discover-player-card .trust-badge {
  flex: 0 0 auto;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  font-size: .61rem !important;
}

.discover-player-card .trust-badge b {
  min-width: 24px;
  height: 20px;
  font-size: .84rem !important;
}

.discover-player-bio {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #c8cee0;
  font-size: .82rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-player-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
}

.discover-player-facts > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.discover-player-facts b {
  overflow: hidden;
  color: white;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-player-tags {
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.discover-player-tags span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, rgba(255,255,255,.1));
  border-radius: 999px;
  color: #dce2f6;
  background: color-mix(in srgb, var(--card-accent) 8%, transparent);
  font-size: .65rem;
  font-weight: 800;
}

.discover-card-tools {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr) !important;
  gap: 6px;
  margin-top: auto;
}

.discover-card-tools .ghost,
.discover-card-tools .danger {
  min-width: 0;
  min-height: 32px;
  padding: 0 7px;
  font-size: .65rem;
}

@media (max-width: 430px) {
  .discover-player-card {
    grid-template-rows: minmax(210px, 54%) minmax(0, 46%) !important;
  }

  .discover-player-card .player-info {
    gap: 6px;
    padding: 10px 11px;
  }

  .discover-player-facts > div {
    padding: 5px 6px;
  }

  .discover-player-bio {
    font-size: .76rem;
    -webkit-line-clamp: 1;
  }

  .discover-game-lockup {
    max-width: 66%;
  }
}

@media (max-height: 740px) {
  .discover-player-card {
    grid-template-rows: minmax(0, 58%) minmax(0, 42%) !important;
  }

  .discover-player-bio,
  .discover-player-facts,
  .discover-player-tags {
    display: none;
  }

  .discover-player-card .player-info {
    justify-content: space-between;
    gap: 4px;
    padding: 7px 10px;
  }

  .discover-player-heading h2 {
    font-size: 1.25rem;
  }

  .discover-player-heading em,
  .discover-player-heading small {
    font-size: .58rem;
  }

  .discover-game-lockup {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 7px 4px 4px;
  }

  .discover-game-lockup img {
    width: 32px;
    height: 38px;
  }

  .discover-card-tools .ghost,
  .discover-card-tools .danger {
    min-height: 28px;
  }
}

/* Persistent topbar controls must remain visible in production and at phone widths. */
.topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-actions .icon-btn,
.topbar-actions .avatar-btn {
  flex: 0 0 42px;
  position: relative;
  z-index: 2;
}

.topbar-actions .icon-btn svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Trust leaderboard. */
.leaderboards-page {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.leaderboard-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.leaderboard-summary > div {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.leaderboard-summary b {
  color: white;
  font-size: 1.7rem;
}

.leaderboard-summary span,
.leaderboard-summary p {
  color: #9ca6c2;
}

.leaderboard-summary p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .78rem;
}

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.36);
}

.leaderboard-tabs button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.leaderboard-tabs button.active {
  color: white;
  border-color: rgba(255,47,95,.62);
  background: linear-gradient(135deg, rgba(255,47,95,.72), rgba(139,92,246,.58));
  box-shadow: 0 0 22px rgba(255,47,95,.16);
}

.referral-event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, .38fr);
  gap: 12px;
  align-items: stretch;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,47,95,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,47,95,.1), rgba(139,92,246,.08)),
    rgba(0,0,0,.58);
}

.referral-event-hero h2 {
  margin: 4px 0 7px;
  color: white;
  font-size: clamp(1.45rem, 7vw, 2.2rem);
  line-height: .96;
  text-transform: uppercase;
}

.referral-event-hero p {
  max-width: 48ch;
  margin: 0;
  color: rgba(255,255,255,.74);
  line-height: 1.38;
}

.event-kicker {
  color: #ff2f5f;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.referral-event-hero aside,
.referral-current {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.34);
}

.referral-event-hero aside {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  text-align: center;
}

.referral-event-hero aside b {
  color: #00ff9c;
  font-size: 1.35rem;
}

.referral-event-hero aside span {
  color: rgba(255,255,255,.68);
  font-size: .76rem;
  line-height: 1.25;
}

.referral-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.referral-current div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.referral-current span,
.referral-current small {
  color: rgba(255,255,255,.64);
}

.referral-current b {
  color: white;
  font-size: 1.32rem;
}

.referral-current code {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #dce5ff;
  background: rgba(255,255,255,.04);
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-rating.referral-count b {
  color: #f5c542;
}

.referral-rules {
  display: grid;
  gap: 7px;
  padding: 13px;
}

.referral-rules b {
  color: white;
}

.referral-rules span,
.referral-rules small {
  color: rgba(255,255,255,.66);
  line-height: 1.35;
}

.leaderboard-list {
  min-width: 0;
  padding: 8px;
}

.leaderboard-list > header,
.leaderboard-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(104px, .55fr);
  align-items: center;
  gap: 10px;
}

.leaderboard-list > header {
  padding: 7px 10px;
  color: #7f89a7;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leaderboard-list > header span:last-child {
  text-align: right;
}

.leaderboard-row {
  min-width: 0;
  padding: 11px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid transparent;
  border-radius: 7px;
  background: rgba(5,7,16,.62);
}

.leaderboard-row.current-user {
  border-left-color: #f03eb2;
  background: linear-gradient(90deg, rgba(240,62,178,.12), rgba(139,92,246,.05));
}

.leaderboard-row.top-1 { border-left-color: #f5c542; }
.leaderboard-row.top-2 { border-left-color: #b9c5d7; }
.leaderboard-row.top-3 { border-left-color: #d98a4d; }

.leaderboard-rank {
  color: #9ba5c3;
  text-align: center;
  font-size: 1.1rem;
}

.leaderboard-rank i {
  color: #f5c542;
  font-style: normal;
}

.leaderboard-player {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.leaderboard-player img {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  object-fit: cover;
}

.leaderboard-player span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.leaderboard-player b,
.leaderboard-player small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-player b {
  color: white;
  font-size: .95rem;
}

.leaderboard-player b em {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  border-radius: 50%;
  background: #f03eb2;
  color: white;
  font-size: .7rem;
  font-style: normal;
}

.leaderboard-player small,
.leaderboard-rating small {
  color: #8993b1;
  font-size: .69rem;
}

.leaderboard-rating {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.leaderboard-rating b {
  color: #00ff9c;
  font-size: 1.35rem;
}

.leaderboard-rating span {
  color: white;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leaderboard-empty {
  display: grid;
  gap: 5px;
  padding: 28px 16px;
  text-align: center;
}

@media (max-width: 430px) {
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-btn,
  .topbar-actions .avatar-btn { flex-basis: 38px; width: 38px; height: 38px; }
  .brand-icon { width: 34px; height: 34px; }
  .brand-wordmark { max-width: 116px; }
  .leaderboards-page { padding: 10px; }
  .referral-event-hero,
  .referral-current {
    grid-template-columns: 1fr;
  }
  .referral-current .primary {
    width: 100%;
  }
  .leaderboard-list > header,
  .leaderboard-row { grid-template-columns: 38px minmax(0, 1fr) 84px; gap: 7px; }
  .leaderboard-player { grid-template-columns: 40px minmax(0, 1fr); gap: 7px; }
  .leaderboard-player img { width: 40px; height: 40px; }
  .leaderboard-rating span { display: none; }
  .leaderboard-rating b { font-size: 1.1rem; }
}

/* 2026-06-16: verified asset, frame overlay, and profile stability polish. */
.verified-icon {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  min-width: 16px;
  min-height: 16px;
  object-fit: contain;
  vertical-align: -0.18em;
  filter:
    drop-shadow(0 0 5px rgba(255,47,95,.72))
    drop-shadow(0 0 7px rgba(47,140,255,.48));
}

.cosmetic.verified,
.profile-page .cosmetic.verified,
.profile-sharecard.profile-page .cosmetic.verified,
.profile-editor-badge-row .verified {
  display: inline-grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(5, 7, 18, .72) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 18px rgba(255,47,95,.22),
    0 0 18px rgba(47,140,255,.16) !important;
}

.verified-badge-icon {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

.profile-verified-icon {
  width: 27px;
  height: 27px;
}

.leaderboard-verified-icon,
.chip-verified-icon,
.roster-verified-icon,
.discover-verified-icon,
.editor-verified-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}

.verified-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

.discover-verified {
  display: inline-grid !important;
  place-items: center;
  background: rgba(5, 7, 18, .78) !important;
  border-color: rgba(255,255,255,.24) !important;
}

.profile-sharecard.profile-page .profile-frame,
.public-profile-page .profile-frame,
.profile-editor-avatar.has-frame-asset {
  isolation: isolate;
  overflow: visible !important;
}

.profile-sharecard.profile-page .profile-frame.has-frame-asset::before,
.profile-sharecard.profile-page .profile-frame.has-frame-asset::after,
.public-profile-page .profile-frame.has-frame-asset::before,
.public-profile-page .profile-frame.has-frame-asset::after {
  content: none !important;
  display: none !important;
}

.profile-sharecard.profile-page .profile-frame.has-frame-asset .profile-avatar-mask,
.public-profile-page .profile-frame.has-frame-asset .profile-avatar-mask,
.profile-editor-avatar.has-frame-asset .profile-editor-avatar-mask {
  z-index: 1 !important;
  overflow: hidden !important;
  background: #05060c !important;
  box-shadow: none !important;
}

.profile-frame.has-frame-asset .profile-avatar-mask > .profile-avatar-xl,
.profile-editor-avatar.has-frame-asset .profile-editor-avatar-mask > img {
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

.profile-frame.has-frame-asset .profile-frame-asset,
.profile-editor-avatar.has-frame-asset .profile-editor-frame-asset {
  z-index: 12 !important;
  pointer-events: none !important;
  user-select: none !important;
  object-fit: fill !important;
}

.profile-sharecard.profile-page .profile-frame-emblem {
  z-index: 13 !important;
  pointer-events: none !important;
}

.profile-sharecard.profile-page .profile-live-banner {
  z-index: 14 !important;
}

.profile-sharecard.profile-page .profile-hero .profile-edit-btn,
.profile-page .profile-hero .profile-edit-btn {
  z-index: 30 !important;
  pointer-events: auto !important;
}

/* 2026-06-17: profile hero verified should be the icon only, no extra panel. */
.profile-badges .verified-badge-icon,
.profile-page .profile-badges .verified-badge-icon,
.profile-sharecard.profile-page .profile-badges .verified-badge-icon,
.public-profile-page .profile-badges .verified-badge-icon {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.profile-badges .profile-verified-icon {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  filter:
    drop-shadow(0 0 5px rgba(255,47,95,.8))
    drop-shadow(0 0 9px rgba(47,140,255,.55)) !important;
}

/* 2026-06-17: Trust card fit pass. Keep the data, tighten the HUD. */
.profile-sharecard.profile-page .profile-section:has(.trust-profile-card),
.profile-page .profile-section:has(.trust-profile-card),
.profile-section:has(.trust-profile-card) {
  overflow: hidden !important;
}

.profile-sharecard.profile-page .trust-profile-card,
.profile-page .trust-profile-card,
.trust-profile-card {
  display: grid !important;
  grid-template-columns: minmax(86px, 104px) repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 0 !important;
}

.profile-sharecard.profile-page .trust-badge,
.profile-page .trust-badge,
.trust-badge {
  width: clamp(82px, 22vw, 104px) !important;
  height: clamp(82px, 22vw, 104px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  justify-self: start !important;
  padding: 11px 8px 9px !important;
  border-width: 6px !important;
  box-shadow:
    inset 0 0 18px rgba(0, 255, 156, .10),
    0 0 16px rgba(0, 255, 88, .34) !important;
}

.profile-sharecard.profile-page .trust-badge b,
.profile-page .trust-badge b,
.trust-badge b {
  font-size: clamp(2rem, 7vw, 2.7rem) !important;
  line-height: .82 !important;
}

.profile-sharecard.profile-page .trust-badge b::after,
.profile-page .trust-badge b::after,
.trust-badge b::after {
  max-width: 54px !important;
  font-size: .48rem !important;
  letter-spacing: .06em !important;
  margin-top: 2px !important;
}

.profile-sharecard.profile-page .trust-badge,
.profile-page .trust-badge,
.trust-badge {
  font-size: .58rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.profile-sharecard.profile-page .trust-profile-card > div:not(.trust-badge),
.profile-page .trust-profile-card > div:not(.trust-badge),
.trust-profile-card > div:not(.trust-badge) {
  min-height: 76px !important;
  height: 100% !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 10px 8px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(5, 7, 18, .66) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
  min-width: 0 !important;
}

.profile-sharecard.profile-page .trust-profile-card > div:nth-child(2),
.profile-page .trust-profile-card > div:nth-child(2),
.trust-profile-card > div:nth-child(2) {
  border-color: rgba(0, 255, 156, .34) !important;
  background:
    linear-gradient(180deg, rgba(0,255,156,.10), rgba(0,255,156,.025)),
    rgba(5, 18, 13, .70) !important;
}

.profile-sharecard.profile-page .trust-profile-card > div.negative,
.profile-page .trust-profile-card > div.negative,
.trust-profile-card > div.negative {
  grid-column: auto !important;
  border-color: rgba(255,47,95,.36) !important;
  background:
    linear-gradient(180deg, rgba(255,47,95,.10), rgba(255,47,95,.02)),
    rgba(18, 5, 9, .68) !important;
}

.profile-sharecard.profile-page .trust-profile-card > div b,
.profile-page .trust-profile-card > div b,
.trust-profile-card > div b {
  font-size: clamp(1rem, 4.4vw, 1.35rem) !important;
  line-height: 1 !important;
  color: #00ff66 !important;
  text-align: center !important;
}

.profile-sharecard.profile-page .trust-profile-card > div:nth-child(3) b,
.profile-page .trust-profile-card > div:nth-child(3) b,
.trust-profile-card > div:nth-child(3) b {
  color: #3b91ff !important;
}

.profile-sharecard.profile-page .trust-profile-card > div.negative b,
.profile-page .trust-profile-card > div.negative b,
.trust-profile-card > div.negative b {
  color: #ff3c53 !important;
}

.profile-sharecard.profile-page .trust-profile-card > div span,
.profile-page .trust-profile-card > div span,
.trust-profile-card > div span {
  max-width: 100% !important;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(.62rem, 2.4vw, .72rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.profile-sharecard.profile-page .endorsement-grid,
.profile-page .endorsement-grid,
.endorsement-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 13px !important;
  width: 100% !important;
}

.profile-sharecard.profile-page .endorsement-grid span,
.profile-page .endorsement-grid span,
.endorsement-grid span {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,255,156,.46) !important;
  background: rgba(0,255,156,.055) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.profile-sharecard.profile-page .endorsement-grid span b,
.profile-page .endorsement-grid span b,
.endorsement-grid span b {
  color: #00ff66 !important;
  font-size: .72rem !important;
}

.reputation-editor-card {
  gap: 14px !important;
}

.reputation-editor-card .rep-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 430px) {
  .profile-sharecard.profile-page .trust-profile-card,
  .profile-page .trust-profile-card,
  .trust-profile-card {
    grid-template-columns: 82px repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .profile-sharecard.profile-page .trust-profile-card > div:not(.trust-badge),
  .profile-page .trust-profile-card > div:not(.trust-badge),
  .trust-profile-card > div:not(.trust-badge) {
    min-height: 68px !important;
    padding: 8px 5px !important;
    border-radius: 11px !important;
  }

  .profile-sharecard.profile-page .trust-profile-card > div span,
  .profile-page .trust-profile-card > div span,
  .trust-profile-card > div span {
    font-size: .56rem !important;
    line-height: 1.12 !important;
  }

  .profile-sharecard.profile-page .endorsement-grid,
  .profile-page .endorsement-grid,
  .endorsement-grid {
    gap: 6px !important;
  }

  .profile-sharecard.profile-page .endorsement-grid span,
  .profile-page .endorsement-grid span,
  .endorsement-grid span {
    min-height: 27px !important;
    padding: 0 9px !important;
    font-size: .66rem !important;
  }
}

@media (max-width: 360px) {
  .profile-sharecard.profile-page .trust-profile-card,
  .profile-page .trust-profile-card,
  .trust-profile-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .profile-sharecard.profile-page .trust-badge,
  .profile-page .trust-badge,
  .trust-badge {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

/* 2026-06-17: leaderboard verified icon should not carry a badge panel. */
.leaderboard-player b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.leaderboard-verified-slot {
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.leaderboard-verified-slot .leaderboard-verified-icon,
.leaderboard-player .leaderboard-verified-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter:
    drop-shadow(0 0 4px rgba(255,47,95,.72))
    drop-shadow(0 0 5px rgba(47,140,255,.45)) !important;
}

/* 2026-06-17: public profile trust actions. */
.public-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.public-profile-actions .compact {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: .78rem;
}

.endorse-modal-card {
  max-width: 460px;
}

.endorse-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.endorse-reasons label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,156,.35);
  background: rgba(0,255,156,.055);
  color: rgba(255,255,255,.92);
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.endorse-reasons input {
  accent-color: #00ff9c;
}

@media (max-width: 520px) {
  .public-profile-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .public-profile-actions {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .public-profile-actions .compact {
    width: 100%;
  }
}

/* 2026-06-20: Comms containment fix.
   Let the top chat picker size to its content so selected chats do not clip
   into a tiny nested scroller on mobile. */
#view.comms {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  gap: 16px !important;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

#view.comms .comms-panel {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px !important;
  gap: 14px !important;
}

#view.comms .comms-chat-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

#view.comms .comms-chat-item {
  width: 100% !important;
  min-height: 78px !important;
  padding: 12px !important;
  grid-template-columns: 56px minmax(0, 1fr) 12px !important;
}

#view.comms .comms-chat-item img {
  width: 54px !important;
  height: 54px !important;
}

#view.comms .comms-thread-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

@media (max-width: 520px) {
  #view.comms {
    gap: 14px !important;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #view.comms .comms-panel {
    padding: 14px !important;
    gap: 12px !important;
  }

  #view.comms .comms-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #view.comms .comms-title h1 {
    font-size: clamp(2rem, 8.5vw, 2.55rem) !important;
  }

  #view.comms .comms-tabs {
    min-height: 54px !important;
  }

  #view.comms .comms-search {
    min-height: 56px !important;
  }

  #view.comms .comms-chat-item {
    min-height: 76px !important;
    grid-template-columns: 52px minmax(0, 1fr) 10px !important;
    gap: 12px !important;
  }

  #view.comms .comms-thread-card {
    flex-basis: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 340px) {
  #view.comms .comms-head {
    grid-template-columns: 1fr !important;
  }

  #view.comms .comms-tabs {
    width: 100% !important;
  }
}

@media (max-height: 760px) {
  #view.comms {
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #view.comms .comms-panel {
    padding: 12px !important;
    gap: 9px !important;
  }

  #view.comms .comms-title h1 {
    font-size: clamp(1.72rem, 7.2vw, 2.12rem) !important;
  }

  #view.comms .comms-tabs,
  #view.comms .comms-search {
    min-height: 44px !important;
  }

  #view.comms .comms-chat-item {
    min-height: 66px !important;
    padding: 9px !important;
  }

  #view.comms .comms-chat-item img {
    width: 46px !important;
    height: 46px !important;
  }

  #view.comms .comms-thread-card {
    min-height: 0 !important;
  }

  #view.comms .messages {
    margin: 6px 0 !important;
    padding: 8px !important;
  }

  #view.comms .composer {
    min-height: 48px !important;
  }
}

@media (max-height: 640px) {
  #view.comms .comms-panel {
    max-height: 236px !important;
    overflow: hidden !important;
  }

  #view.comms .comms-search {
    min-height: 40px !important;
  }

  #view.comms .comms-chat-item {
    min-height: 58px !important;
  }
}

/* 2026-06-20: restore squad discovery as a first-class Discover mode. */
#view .discover-swipe-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

#view .discover-swipe-shell.discover-squad-mode {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#view .discover-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.52);
  box-shadow: inset 0 0 18px rgba(255,47,95,.08);
}

#view .discover-mode-toggle button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.7);
  font-weight: 1000;
  text-align: center;
}

#view .discover-mode-toggle button.active {
  color: #fff;
  border-color: rgba(255,47,95,.78);
  background: linear-gradient(135deg, rgba(255,47,95,.72), rgba(139,92,246,.58));
  box-shadow: 0 0 24px rgba(255,47,95,.22);
}

#view .discover-squad-feed {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

#view .discover-squad-feed .discover-squad-row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  min-height: 86px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,47,95,.11), rgba(13,16,32,.88) 46%, rgba(139,92,246,.1));
}

#view .discover-squad-feed .discover-squad-row.member {
  border-left-color: #23f58a;
}

#view .discover-squad-feed .discover-squad-row img,
#view .discover-squad-feed .discover-game-fallback {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

#view .discover-squad-feed .discover-squad-row h3,
#view .discover-squad-feed .discover-squad-row p,
#view .discover-squad-feed .discover-squad-row small {
  overflow: hidden;
  text-overflow: ellipsis;
}

#view .discover-squad-feed .discover-squad-row small {
  display: block;
  margin-top: 4px;
  color: rgba(220,226,255,.72);
  font-size: .72rem;
  line-height: 1.25;
  white-space: nowrap;
}

#view .discover-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
}

@media (max-width: 390px) {
  #view .discover-squad-feed .discover-squad-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #view .discover-squad-feed .discover-squad-row button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* TAKEOVER faction system */
.faction-pledge-overlay {
  align-items: stretch;
  padding: max(env(safe-area-inset-top), 16px) 14px max(env(safe-area-inset-bottom), 16px);
}

.faction-pledge-modal,
.faction-hub {
  width: min(100%, 520px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faction-pledge-modal {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255,47,95,.16), rgba(11,13,25,.94) 38%, rgba(139,92,246,.14)),
    #050712;
  box-shadow: 0 28px 80px rgba(0,0,0,.7);
}

.faction-later-btn {
  position: sticky;
  top: 0;
  justify-self: end;
  z-index: 4;
}

.faction-ai-card,
.faction-war-room,
.faction-roster,
.sector-board,
.faction-ai-panel {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.28);
}

.faction-ai-card,
.faction-ai-panel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  align-items: center;
}

.faction-ai-card img,
.faction-ai-panel img {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,115,4,.45);
}

.faction-ai-card span,
.faction-ai-panel span,
.faction-card span,
.sector-board-head span {
  display: block;
  color: #ff2f5f;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faction-ai-card h2,
.faction-ai-panel h2,
.faction-hero h1 {
  margin: 3px 0 6px;
  line-height: .95;
  text-transform: uppercase;
}

.faction-ai-card p,
.faction-ai-panel p,
.faction-card p,
.faction-card small {
  margin: 0;
  color: rgba(235,239,255,.78);
  line-height: 1.35;
}

.faction-choice-grid {
  display: grid;
  gap: 12px;
}

.faction-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.faction-carousel .faction-card {
  grid-column: 2;
}

.faction-nav-btn {
  width: 44px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 2rem;
  font-weight: 1000;
}

.faction-nav-btn:hover {
  border-color: rgba(255,47,95,.5);
  background: rgba(255,47,95,.14);
}

.faction-carousel-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: rgba(235,239,255,.78);
  font-size: .82rem;
  font-weight: 900;
}

.faction-carousel-meta div {
  display: flex;
  gap: 5px;
}

.faction-carousel-meta i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.faction-carousel-meta i.active {
  width: 18px;
  background: linear-gradient(90deg, #ff2f5f, #8b5cf6);
}

.faction-card {
  display: grid;
  grid-template-columns: minmax(132px, 34%) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 34px);
  min-width: 0;
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #ff2f5f) 52%, rgba(255,255,255,.12));
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--faction-accent, #ff2f5f) 18%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,.96), rgba(3,4,10,.96) 54%, rgba(0,0,0,.98));
  box-shadow:
    0 22px 60px rgba(0,0,0,.46),
    0 0 28px color-mix(in srgb, var(--faction-accent, #ff2f5f) 18%, transparent);
}

.faction-card.featured {
  grid-template-columns: minmax(210px, 35%) minmax(0, 1fr);
  min-height: clamp(460px, 68vh, 620px);
}

.faction-card-art {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.92)),
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--faction-accent, #ff2f5f) 24%, transparent), transparent 55%),
    #05050a;
}

.faction-card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  border: 0;
  padding: 0;
  opacity: .82;
  transform: scale(1.14);
  filter:
    saturate(1.08)
    contrast(1.05)
    drop-shadow(0 0 20px color-mix(in srgb, var(--faction-accent, #ff2f5f) 46%, transparent));
}

.faction-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 45%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
  pointer-events: none;
}

.faction-card-art b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 5px 10px 6px;
  border-radius: 8px;
  color: #fff;
  background: color-mix(in srgb, var(--faction-accent, #ff2f5f) 42%, rgba(0,0,0,.86));
  box-shadow: 0 0 18px color-mix(in srgb, var(--faction-accent, #ff2f5f) 42%, transparent);
  font-size: .82rem;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

.faction-card-body {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  align-content: start;
  padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 36px) clamp(18px, 3vw, 28px) 0;
}

.faction-card h3 {
  margin: 8px 0 18px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5vw, 3.3rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,.88);
}

.faction-card.featured h3 {
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  line-height: .92;
}

.faction-card-body > span {
  color: #ff2f72;
  font-size: clamp(.92rem, 2.4vw, 1.1rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.faction-card-body > p {
  max-width: 760px;
  color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  line-height: 1.2;
}

.faction-facts {
  display: grid;
  gap: 10px;
  margin: clamp(18px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.faction-facts li {
  position: relative;
  padding-left: 24px;
  color: rgba(235,239,255,.76);
  font-size: clamp(.96rem, 2.2vw, 1.12rem);
  line-height: 1.2;
}

.faction-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #ff7a2f;
  box-shadow: 0 0 12px rgba(255,122,47,.72);
}

.faction-card small {
  display: block;
  max-width: 760px;
  margin-top: clamp(18px, 3vw, 28px);
  color: #ffb08a;
  font-weight: 800;
  font-size: clamp(1.02rem, 2.8vw, 1.45rem);
  line-height: 1.12;
}

.faction-card-bottom {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  justify-content: space-between;
  margin-top: clamp(16px, 4vw, 42px);
}

.faction-card-preview {
  width: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.88);
}

.faction-reward-stage {
  position: relative;
  isolation: isolate;
  width: 96px;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #ff2f5f) 54%, rgba(255,255,255,.12));
  border-radius: 14px;
  background: rgba(0,0,0,.68);
  box-shadow: 0 0 22px color-mix(in srgb, var(--faction-accent, #ff2f5f) 24%, transparent);
}

.faction-reward-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--faction-accent, #ff2f5f) 18%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54));
  pointer-events: none;
}

.faction-reward-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .52;
  filter: saturate(1.1) contrast(1.08);
}

.faction-reward-avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 58px;
  aspect-ratio: 194 / 225;
  transform: translate(-50%, -50%);
}

.faction-reward-avatar-fill {
  position: absolute;
  inset: 12% 13% 13%;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.86));
}

.faction-reward-avatar-fill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 5px;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.7));
}

.faction-reward-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--faction-accent, #ff2f5f) 60%, transparent));
}

.faction-reward-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.faction-reward-copy em {
  font-style: normal;
  color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 72%, #fff);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faction-reward-copy b,
.faction-reward-copy span {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-height: 1.08;
}

.faction-reward-copy b {
  -webkit-line-clamp: 2;
}

.faction-reward-copy span {
  -webkit-line-clamp: 1;
}

.faction-reward-copy b {
  color: #fff;
  font-size: .9rem;
}

.faction-reward-copy span {
  color: rgba(221,226,248,.66);
  font-size: .76rem;
}

.faction-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  min-width: 0;
}

.faction-card footer b {
  color: #fff;
  white-space: nowrap;
}

.faction-card button {
  min-height: 38px;
  padding: 0 14px;
}

.faction-war-room {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.sector-board {
  padding: 12px;
}

.sector-board-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.sector-board-head b {
  color: #fff;
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sector-tile {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.sector-tile.claimed {
  border-color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 72%, rgba(255,255,255,.12));
  background: linear-gradient(135deg, color-mix(in srgb, var(--faction-accent, #ff2f5f) 24%, transparent), rgba(255,255,255,.035));
}

.sector-tile span {
  color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 72%, white);
  font-size: .7rem;
  font-weight: 1000;
}

.sector-tile b,
.sector-tile em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sector-tile em {
  color: rgba(226,232,255,.74);
  font-style: normal;
}

.faction-roster {
  padding: 12px;
}

.faction-profile-chip {
  border-color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 72%, rgba(255,255,255,.14)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--faction-accent, #ff2f5f) 70%, #111827), rgba(10,12,22,.88)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--faction-accent, #ff2f5f) 30%, transparent);
}

.theme-faction-puf { --theme-accent: #A6D43A; --theme-accent-2: #E8F7BA; }
.theme-faction-legion { --theme-accent: #A15CFF; --theme-accent-2: #FF6A00; }
.theme-faction-sentioids { --theme-accent: #7ee8ff; }
.theme-faction-chickows { --theme-accent: #ffcc3d; }
.theme-faction-aquafeelya { --theme-accent: #35c7ff; }
.theme-faction-vvibe { --theme-accent: #5EF2C4; --theme-accent-2: #ff4bd8; }
.theme-faction-digiu { --theme-accent: #79E235; }
.theme-faction-dollar { --theme-accent: #f4d33f; }

.theme-faction-puf .profile-section,
.theme-faction-legion .profile-section,
.theme-faction-sentioids .profile-section,
.theme-faction-chickows .profile-section,
.theme-faction-aquafeelya .profile-section,
.theme-faction-vvibe .profile-section,
.theme-faction-digiu .profile-section,
.theme-faction-dollar .profile-section {
  border-color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 50%, rgba(255,255,255,.12));
}

.theme-faction-bg-puf {
  background-image:
    linear-gradient(rgba(2,6,10,.64), rgba(2,8,6,.82)),
    radial-gradient(circle at 22% 24%, rgba(166,212,58,.26), transparent 30%),
    url("/assets/factions/puf-background.webp") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-legion {
  background-image:
    linear-gradient(rgba(3,2,8,.58), rgba(0,0,0,.82)),
    radial-gradient(circle at 70% 15%, rgba(161,92,255,.38), transparent 34%),
    url("/assets/factions/legion-ghost-background.webp") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-sentioids {
  background-image:
    linear-gradient(rgba(3,9,14,.66), rgba(1,3,8,.84)),
    repeating-linear-gradient(90deg, rgba(126,232,255,.08) 0 1px, transparent 1px 20px),
    url("/assets/factions/sentioids-background.webp") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-chickows {
  background-image:
    linear-gradient(rgba(13,5,0,.7), rgba(2,2,2,.84)),
    radial-gradient(circle at 28% 18%, rgba(255,204,61,.34), transparent 34%),
    url("/assets/factions/chickows-background.webp") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-aquafeelya {
  background-image:
    linear-gradient(rgba(0,13,22,.64), rgba(2,6,12,.84)),
    radial-gradient(circle at 24% 18%, rgba(53,199,255,.34), transparent 34%),
    repeating-linear-gradient(0deg, rgba(53,199,255,.06) 0 2px, transparent 2px 18px),
    url("/assets/factions/aquafeelya-background.webp") !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-vvibe {
  background-image:
    linear-gradient(rgba(2,3,10,.66), rgba(4,1,8,.86)),
    radial-gradient(circle at 24% 18%, rgba(94,242,196,.28), transparent 32%),
    radial-gradient(circle at 78% 28%, rgba(255,75,216,.25), transparent 30%),
    url("/assets/factions/vvibe-background.webp") !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-digiu {
  background-image:
    linear-gradient(rgba(0,15,12,.64), rgba(1,5,8,.84)),
    repeating-linear-gradient(90deg, rgba(121,226,53,.07) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 26% 22%, rgba(121,226,53,.3), transparent 34%),
    url("/assets/factions/digiu-background.webp") !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, center, center top !important;
  background-repeat: no-repeat !important;
}

.theme-faction-bg-dollar {
  background-image:
    linear-gradient(rgba(15,10,0,.66), rgba(2,2,2,.84)),
    radial-gradient(circle at 22% 18%, rgba(244,211,63,.34), transparent 34%),
    linear-gradient(135deg, rgba(244,211,63,.08), transparent 45%),
    url("/assets/factions/dollar-holler-background.webp") !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, center, center top !important;
  background-repeat: no-repeat !important;
}

:is(.theme-sticksgg-bg, .theme-takeover-bg, .theme-faction-bg-puf, .theme-faction-bg-legion, .theme-faction-bg-sentioids, .theme-faction-bg-chickows, .theme-faction-bg-aquafeelya, .theme-faction-bg-vvibe, .theme-faction-bg-digiu, .theme-faction-bg-dollar) :is(.home-panel, .panel, .profile-section, .social-create-card, .discover-squad-row, .thread, .chat-list) {
  background-image:
    linear-gradient(135deg, rgba(2, 3, 8, .92), rgba(7, 9, 18, .74)),
    var(--cosmetic-panel-art, none);
  background-size: cover, min(72%, 440px) auto;
  background-position: center, right -42px center;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen;
}

.theme-sticksgg-bg { --cosmetic-panel-art: url("/assets/cosmetics/sticksgg-bg.png"); }
.theme-takeover-bg { --cosmetic-panel-art: url("/assets/cosmetics/takeover-bg.png"); }
.theme-faction-bg-puf { --cosmetic-panel-art: url("/assets/factions/puf-background.webp"); }
.theme-faction-bg-legion { --cosmetic-panel-art: url("/assets/factions/legion-ghost-background.webp"); }
:is(.theme-faction-bg-puf, .theme-faction-bg-legion, .theme-faction-bg-sentioids, .theme-faction-bg-chickows, .theme-faction-bg-aquafeelya, .theme-faction-bg-vvibe, .theme-faction-bg-digiu, .theme-faction-bg-dollar) :is(.home-panel, .panel, .profile-section, .social-create-card, .discover-squad-row, .thread, .chat-list),
:is(.theme-faction-bg-puf, .theme-faction-bg-legion, .theme-faction-bg-sentioids, .theme-faction-bg-chickows, .theme-faction-bg-aquafeelya, .theme-faction-bg-vvibe, .theme-faction-bg-digiu, .theme-faction-bg-dollar) .profile-sharecard.profile-page .profile-section {
  background-image:
    linear-gradient(135deg, rgba(2, 3, 8, .88), rgba(7, 9, 18, .7)),
    var(--cosmetic-panel-art) !important;
  background-size: cover, cover;
  background-position: center, center 34%;
  background-blend-mode: normal, soft-light;
}
.theme-faction-bg-sentioids { --cosmetic-panel-art: url("/assets/factions/sentioids-background.webp"); }
.theme-faction-bg-chickows { --cosmetic-panel-art: url("/assets/factions/chickows-background.webp"); }
.theme-faction-bg-aquafeelya { --cosmetic-panel-art: url("/assets/factions/aquafeelya-background.webp"); }
.theme-faction-bg-vvibe { --cosmetic-panel-art: url("/assets/factions/vvibe-background.webp"); }
.theme-faction-bg-digiu { --cosmetic-panel-art: url("/assets/factions/digiu-background.webp"); }
.theme-faction-bg-dollar { --cosmetic-panel-art: url("/assets/factions/dollar-holler-background.webp"); }

.discover-clip-player {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.discover-clip-player iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}

.discover-clip-player > button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(3, 4, 8, .86);
  color: #fff;
  font-size: 1.4rem;
}

.border-faction-puf .profile-frame { --cosmetic-accent: #A6D43A; border-color: #A6D43A; box-shadow: 0 0 30px rgba(166,212,58,.42), inset 0 0 22px rgba(139,92,246,.18); }
.border-faction-legion .profile-frame { --cosmetic-accent: #A15CFF; border-color: #A15CFF; box-shadow: 0 0 34px rgba(161,92,255,.58), 0 0 18px rgba(255,106,0,.26), inset 0 0 22px rgba(0,0,0,.58); }
.border-faction-sentioids .profile-frame { --cosmetic-accent: #7ee8ff; border-color: #7ee8ff; box-shadow: 0 0 32px rgba(126,232,255,.44), inset 0 0 20px rgba(126,232,255,.14); }
.border-faction-chickows .profile-frame { --cosmetic-accent: #ffcc3d; border-color: #ffcc3d; box-shadow: 0 0 36px rgba(255,204,61,.46), 0 0 12px rgba(255,47,47,.25); }
.border-faction-aquafeelya .profile-frame { --cosmetic-accent: #35c7ff; border-color: #35c7ff; box-shadow: 0 0 34px rgba(53,199,255,.46), inset 0 0 18px rgba(0,229,255,.16); }
.border-faction-vvibe .profile-frame { --cosmetic-accent: #5EF2C4; border-color: #5EF2C4; box-shadow: 0 0 30px rgba(94,242,196,.42), 0 0 20px rgba(255,75,216,.28); }
.border-faction-digiu .profile-frame { --cosmetic-accent: #79E235; border-color: #79E235; box-shadow: 0 0 32px rgba(121,226,53,.42), inset 0 0 22px rgba(121,226,53,.14); }
.border-faction-dollar .profile-frame { --cosmetic-accent: #f4d33f; border-color: #f4d33f; box-shadow: 0 0 34px rgba(244,211,63,.44), inset 0 0 18px rgba(44,255,82,.14); }

.border-faction-puf .profile-frame:not(.has-frame-asset)::after,
.border-faction-legion .profile-frame:not(.has-frame-asset)::after,
.border-faction-sentioids .profile-frame:not(.has-frame-asset)::after,
.border-faction-chickows .profile-frame:not(.has-frame-asset)::after,
.border-faction-aquafeelya .profile-frame:not(.has-frame-asset)::after,
.border-faction-vvibe .profile-frame:not(.has-frame-asset)::after,
.border-faction-digiu .profile-frame:not(.has-frame-asset)::after,
.border-faction-dollar .profile-frame:not(.has-frame-asset)::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  border: 2px solid color-mix(in srgb, var(--cosmetic-accent, #ff2f5f) 72%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cosmetic-accent, #ff2f5f) 44%, transparent);
  pointer-events: none;
}

.effect-faction-puf .effect-surface { background: radial-gradient(circle at 18% 22%, rgba(166,212,58,.34), transparent 30%), linear-gradient(135deg, rgba(139,92,246,.12), transparent 45%); }
.effect-faction-legion .effect-surface { background: radial-gradient(circle at 72% 18%, rgba(161,92,255,.34), transparent 32%), radial-gradient(circle at 12% 78%, rgba(255,106,0,.16), transparent 28%); }
.effect-faction-sentioids .effect-surface { background: linear-gradient(90deg, rgba(126,232,255,.22), transparent 28%, rgba(126,232,255,.14)), repeating-linear-gradient(90deg, rgba(126,232,255,.12) 0 1px, transparent 1px 18px); }
.effect-faction-chickows .effect-surface { background: radial-gradient(circle at 72% 20%, rgba(255,204,61,.32), transparent 30%), radial-gradient(circle at 18% 80%, rgba(255,47,47,.16), transparent 24%); }
.effect-faction-aquafeelya .effect-surface { background: linear-gradient(180deg, rgba(53,199,255,.24), transparent 42%), radial-gradient(circle at 18% 22%, rgba(0,229,255,.18), transparent 30%); }
.effect-faction-vvibe .effect-surface { background: radial-gradient(circle at 50% 30%, rgba(94,242,196,.26), transparent 34%), radial-gradient(circle at 76% 18%, rgba(255,75,216,.22), transparent 26%); }
.effect-faction-digiu .effect-surface { background: repeating-linear-gradient(90deg, rgba(121,226,53,.2) 0 1px, transparent 1px 18px), radial-gradient(circle at 22% 20%, rgba(121,226,53,.24), transparent 30%); }
.effect-faction-dollar .effect-surface { background: radial-gradient(circle at 84% 18%, rgba(244,211,63,.3), transparent 32%), linear-gradient(135deg, rgba(44,255,82,.12), transparent 46%); }

@media (max-width: 560px) {
  .faction-ai-card,
  .faction-ai-panel {
    grid-template-columns: 98px minmax(0, 1fr);
  }

  .faction-carousel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-inline: 0;
  }

  .faction-carousel .faction-card {
    grid-column: 1;
  }

  .faction-nav-btn {
    position: absolute;
    top: clamp(92px, 32vw, 148px);
    z-index: 4;
    width: 32px;
    height: 54px;
    border-radius: 14px;
    background: rgba(0,0,0,.66);
    border-color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 54%, rgba(255,255,255,.18));
    box-shadow: 0 0 18px rgba(0,0,0,.48);
    backdrop-filter: blur(10px);
  }

  .faction-nav-btn.prev {
    left: 8px;
  }

  .faction-nav-btn.next {
    right: 8px;
  }

  .faction-ai-card img,
  .faction-ai-panel img {
    width: 76px;
    height: 76px;
  }

  .faction-card,
  .faction-card.featured {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .faction-card-art {
    min-height: clamp(176px, 46vw, 242px);
    border-radius: 20px 20px 0 0;
  }

  .faction-card-art img {
    object-fit: contain;
    padding: 10px 18px;
    transform: none;
  }

  .faction-card-art::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.7)),
      linear-gradient(90deg, transparent, rgba(0,0,0,.22));
  }

  .faction-card-body {
    grid-template-rows: auto auto auto auto auto auto;
    padding: 12px 13px 14px;
  }

  .faction-card h3,
  .faction-card.featured h3 {
    margin: 4px 0 8px;
    font-size: clamp(1.45rem, 8.6vw, 2.05rem);
  }

  .faction-card-body > span {
    font-size: .78rem;
  }

  .faction-card-body > p {
    font-size: .9rem;
    line-height: 1.18;
  }

  .faction-facts {
    gap: 5px;
    margin-top: 9px;
  }

  .faction-facts li {
    padding-left: 17px;
    font-size: .83rem;
    line-height: 1.16;
  }

  .faction-card small {
    margin-top: 9px;
    font-size: .86rem;
    line-height: 1.14;
  }

  .faction-card-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .faction-card-preview {
    width: 100%;
    max-width: none;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 9px;
  }

  .faction-reward-stage {
    width: 76px;
    border-radius: 12px;
  }

  .faction-reward-avatar {
    width: 48px;
  }

  .faction-reward-avatar-fill {
    border-radius: 11px;
  }

  .faction-reward-avatar-fill img {
    padding: 4px;
  }

  .faction-reward-copy em {
    font-size: .68rem;
  }

  .faction-reward-copy b {
    font-size: .82rem;
  }

  .faction-reward-copy span {
    font-size: .71rem;
  }

  .faction-card footer {
    align-items: stretch;
    flex-direction: column;
    justify-content: stretch;
    gap: 7px;
  }

  .faction-card footer b {
    white-space: normal;
    font-size: .88rem;
  }

  .faction-card button {
    width: 100%;
    min-height: 34px;
    padding-inline: 10px;
  }

  .sector-grid {
    grid-template-columns: 1fr;
  }
}

/* Final Patch 2.8 overrides. Keep at EOF so older profile/faction rules cannot win. */
body .profile-editor-modal .modal-card.profile-edit-hub {
  max-width: min(500px, calc(100vw - 16px));
  padding: 14px 12px calc(var(--safe-bottom) + 14px);
  gap: 10px;
}

body .profile-edit-hub .profile-edit-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 2px;
}

body .profile-edit-hub .profile-edit-topbar > div:first-child {
  grid-column: auto;
}

body .profile-edit-hub .profile-edit-topbar h2 {
  font-size: clamp(2rem, 8vw, 2.8rem);
}

body .profile-edit-hub .profile-editor-preview {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 132px;
  padding: 12px;
  gap: 12px;
  border-radius: 18px;
}

body .profile-edit-hub .profile-editor-avatar {
  width: 104px;
}

body .profile-edit-hub .profile-editor-id h2 {
  margin: 6px 0 4px;
  font-size: clamp(2rem, 8vw, 3.05rem);
}

body .profile-edit-hub .profile-editor-id p {
  margin-bottom: 8px;
  max-width: 26ch;
  color: rgba(255,255,255,.86);
  font-size: .9rem;
  line-height: 1.18;
}

body .profile-edit-hub .profile-editor-badge-row span,
body .profile-edit-hub .profile-editor-meta span,
body .profile-edit-hub .profile-editor-meta b {
  min-height: 20px;
  padding: 0 7px;
  font-size: .58rem;
  border-radius: 6px;
}

body .profile-edit-loadout-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body .profile-edit-loadout-strip div {
  min-height: 58px;
  padding: 10px;
  border-radius: 12px;
}

body .profile-edit-loadout-strip span {
  font-size: .6rem;
}

body .profile-edit-loadout-strip b {
  font-size: .83rem;
  line-height: 1.08;
}

body .profile-edit-tile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body .profile-edit-tile {
  min-height: 116px;
  padding: 13px 12px;
  border-radius: 14px;
}

body .profile-edit-tile span {
  width: 34px;
  height: 34px;
  font-size: .72rem;
}

body .profile-edit-tile b {
  font-size: 1.02rem;
}

body .profile-edit-tile em,
body .profile-edit-tile small {
  font-size: .76rem;
  line-height: 1.16;
}

body .faction-war-room {
  gap: 10px;
}

body .faction-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body .faction-count-tile {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #ff2f5f) 46%, rgba(255,255,255,.12));
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--faction-accent, #ff2f5f) 22%, transparent), transparent 78%),
    rgba(0,0,0,.52);
}

body .faction-count-tile img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 9px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--faction-accent, #ff2f5f) 45%, transparent));
}

body .faction-count-tile b,
body .faction-count-tile span,
body .faction-count-tile em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .faction-count-tile b {
  display: block;
  color: #fff;
  font-size: .74rem;
  line-height: 1;
}

body .faction-count-tile span,
body .faction-count-tile em {
  color: rgba(235,239,255,.66);
  font-size: .65rem;
  font-style: normal;
  line-height: 1.05;
}

body .faction-count-tile em {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--faction-accent, #ff2f5f) 78%, #fff);
  font-weight: 900;
}

@media (max-width: 560px) {
  body .home-recommended-grid {
    grid-template-columns: 1fr;
  }

  body .home-rec-card {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    padding: 10px;
  }

  body .home-rec-card > img {
    width: 48px;
    height: 48px;
  }

  body .home-rec-card small {
    grid-column: 2 / 4;
  }

  body .faction-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 86px minmax(0, 1fr);
    padding: 10px;
  }

  body .profile-edit-hub .profile-editor-avatar {
    width: 86px;
  }

  body .profile-edit-loadout-strip,
  body .profile-edit-tile-grid {
    grid-template-columns: 1fr;
  }

  body .profile-edit-tile {
    min-height: 96px;
  }
}

/* Patch 2.9: tighten profile editor preview and Discover fit for production phones. */
body .profile-editor-modal .modal-card.profile-edit-hub {
  max-height: calc(100dvh - max(env(safe-area-inset-top), 10px) - max(env(safe-area-inset-bottom), 10px));
  overflow-y: auto;
}

body .profile-edit-hub .profile-editor-preview {
  position: relative;
  min-height: 118px;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
  gap: 12px;
  border-color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 55%, rgba(255,255,255,.18));
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--theme-accent, #ff2f5f) 28%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255,47,95,.18), rgba(139,92,246,.14) 48%, rgba(0,0,0,.72));
}

body .profile-edit-hub .profile-editor-preview::before {
  content: "Live Preview";
  position: absolute;
  top: 9px;
  left: 12px;
  z-index: 4;
  color: #ff2f5f;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body .profile-edit-hub .profile-editor-preview-bg {
  opacity: .42;
}

body .profile-edit-hub .profile-editor-avatar {
  width: 92px;
  margin-top: 12px;
}

body .profile-edit-hub .profile-editor-id {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: grid;
  gap: 5px;
}

body .profile-edit-hub .profile-editor-badge-row {
  min-height: 22px;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

body .profile-edit-hub .profile-editor-id h2 {
  margin: 0;
  font-size: clamp(1.55rem, 6.5vw, 2.55rem);
  line-height: .9;
  text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 18px rgba(255,255,255,.12);
}

body .profile-edit-hub .profile-editor-id p {
  margin: 0;
  max-width: 31ch;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  line-height: 1.22;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .profile-edit-hub .profile-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

body .profile-edit-hub .profile-editor-xp {
  height: 7px;
  margin-top: 2px;
}

#view .discover-swipe-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
}

#view .discover-swipe-head {
  align-items: start;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.45)),
    radial-gradient(circle at 10% 20%, rgba(255,47,95,.18), transparent 48%);
}

.shell.theme-takeover-bg #view .discover-swipe-head {
  background:
    linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.68)),
    rgba(0,0,0,.5);
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}

#view .discover-swipe-head h1 {
  font-size: clamp(2.15rem, 8.4vw, 3rem);
  line-height: .88;
}

#view .discover-swipe-head p {
  max-width: 18ch;
  color: rgba(255,255,255,.82);
  font-weight: 800;
}

#view .discover-mode-toggle {
  min-height: 46px;
}

#view .swipe-stage {
  min-height: 0;
}

#view .discover-empty-card {
  height: 100%;
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 20px;
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(139,92,246,.13), transparent 40%),
    #101629;
}

#view .discover-empty-card span {
  color: #ff2f5f;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#view .discover-empty-card h2 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: clamp(1.45rem, 6vw, 2.05rem);
}

#view .discover-empty-card p {
  max-width: 31ch;
  margin: 0 auto;
  color: rgba(221,227,255,.72);
  line-height: 1.35;
}

#view .discover-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#view .discover-empty-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
}

@media (max-width: 430px) {
  #view .discover-swipe-shell {
    padding: 10px;
    gap: 8px;
  }

  #view .discover-swipe-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 11px;
  }

  #view .discover-swipe-head > div {
    gap: 9px;
  }

  #view .discover-swipe-head h1 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  #view .discover-swipe-head p {
    max-width: none;
    font-size: .9rem;
  }

  #view .discover-swipe-head .chip {
    justify-self: start;
    min-height: 30px;
  }

  #view .discover-mode-toggle button {
    min-height: 39px;
  }

  #view .discover-empty-card {
    min-height: 230px;
    padding: 16px;
  }

  #view .swipe-actions button {
    min-height: 44px;
  }

  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 108px;
    gap: 10px;
  }

  body .profile-edit-hub .profile-editor-avatar {
    width: 82px;
  }
}

@media (max-height: 760px) {
  #view .discover-swipe-head {
    padding: 9px 10px;
  }

  #view .discover-swipe-head h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.3rem);
  }

  #view .discover-swipe-head p {
    font-size: .78rem;
  }

  #view .discover-mode-toggle button {
    min-height: 36px;
  }

  #view .discover-empty-card {
    min-height: 190px;
  }

  #view .swipe-actions button {
    min-height: 40px;
  }
}

/* Patch 2.9b: make the editor preview read like a compact player loadout card. */
body .profile-edit-hub .profile-editor-preview {
  overflow: hidden;
  isolation: isolate;
}

body .profile-edit-hub .profile-editor-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
  pointer-events: none;
}

body .profile-edit-hub .profile-editor-preview-bg,
body .profile-edit-hub .profile-effect-layer {
  z-index: 0;
}

body .profile-edit-hub .profile-editor-avatar {
  z-index: 3;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--theme-accent, #ff2f5f) 52%, transparent));
}

body .profile-edit-hub .profile-editor-id {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,0,0,.54), rgba(9,11,23,.32));
  backdrop-filter: blur(7px);
}

body .profile-edit-hub .profile-editor-meta b,
body .profile-edit-hub .profile-editor-meta span {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.82);
  font-size: .62rem;
  font-weight: 900;
}

body .profile-edit-hub .profile-editor-meta b {
  color: #fff;
  border-color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 38%, rgba(255,255,255,.12));
}

@media (max-width: 390px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 9px;
  }

  body .profile-edit-hub .profile-editor-avatar {
    width: 76px;
  }

  body .profile-edit-hub .profile-editor-id {
    padding: 8px 9px;
  }

  body .profile-edit-hub .profile-editor-id h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }
}

/* Patch 2.9b: Discover must keep the card and actions visible on browser-mobile heights. */
@media (max-height: 700px) {
  #view .discover-swipe-shell {
    gap: 6px;
    padding: 8px;
  }

  #view .discover-swipe-head {
    padding: 8px 9px;
  }

  #view .discover-swipe-head h1 {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
  }

  #view .discover-mode-toggle {
    min-height: 34px;
  }

  #view .discover-mode-toggle button {
    min-height: 32px;
  }

  #view .swipe-actions {
    gap: 7px;
  }

  #view .swipe-actions button {
    min-height: 38px;
    border-radius: 12px;
    font-size: .82rem;
  }

  .discover-player-card {
    grid-template-rows: minmax(0, 62%) minmax(0, 38%) !important;
  }

  .discover-card-badges {
    gap: 4px;
  }

  .discover-founder {
    min-height: 26px;
    padding: 0 7px;
    font-size: .7rem;
  }

  .discover-verified {
    width: 26px;
    height: 26px;
  }

  .discover-player-heading h2 {
    font-size: 1.08rem;
  }
}

/* Patch 2.9c: the editor preview background must not consume grid space. */
body .profile-edit-hub .profile-editor-preview {
  display: grid !important;
  grid-template-columns: clamp(82px, 24vw, 108px) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: center !important;
  min-height: 178px !important;
  gap: 12px !important;
  padding: 12px !important;
}

body .profile-edit-hub .profile-editor-preview-bg,
body .profile-edit-hub .profile-effect-layer {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  pointer-events: none !important;
}

body .profile-edit-hub .profile-editor-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: clamp(82px, 24vw, 108px) !important;
  margin: 0 !important;
}

body .profile-edit-hub .profile-editor-id {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: center !important;
  padding: 9px 10px !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(1.65rem, 7vw, 2.45rem) !important;
  line-height: .86 !important;
  margin: 3px 0 !important;
}

body .profile-edit-hub .profile-editor-badge-row {
  flex-wrap: nowrap !important;
}

body .profile-edit-hub .profile-editor-badge-row span:not(.verified) {
  max-width: 96px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-edit-hub .profile-editor-id p {
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
  font-size: .76rem !important;
}

body .profile-edit-hub .profile-editor-meta {
  gap: 4px !important;
}

body .profile-edit-hub .profile-editor-meta b,
body .profile-edit-hub .profile-editor-meta span {
  min-height: 18px !important;
  padding-inline: 6px !important;
  font-size: .56rem !important;
}

body .profile-edit-loadout-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .profile-edit-loadout-strip div {
  min-height: 54px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
}

body .profile-edit-loadout-strip b {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .78rem !important;
}

body .profile-edit-hub .profile-edit-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body .profile-edit-hub .profile-edit-tile {
  min-height: 92px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  gap: 5px !important;
}

body .profile-edit-hub .profile-edit-tile span {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: .68rem !important;
}

body .profile-edit-hub .profile-edit-tile b {
  font-size: .92rem !important;
  line-height: 1 !important;
}

body .profile-edit-hub .profile-edit-tile em,
body .profile-edit-hub .profile-edit-tile small {
  font-size: .66rem !important;
  line-height: 1.15 !important;
}

body .profile-edit-hub .profile-edit-tile small {
  margin-top: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 370px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 164px !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  body .profile-edit-hub .profile-editor-avatar {
    width: 76px !important;
  }

  body .profile-edit-hub .profile-editor-id {
    padding: 8px !important;
  }

  body .profile-edit-loadout-strip {
    gap: 6px !important;
  }

  body .profile-edit-hub .profile-edit-tile-grid {
    gap: 8px !important;
  }

  body .profile-edit-hub .profile-edit-tile {
    min-height: 88px !important;
    padding: 9px !important;
  }
}

/* Patch 3.0: BattleOS faction hub and required pledge flow */
.battleos-breach-overlay {
  background:
    radial-gradient(circle at 50% 20%, rgba(37, 255, 136, .16), transparent 38%),
    rgba(0, 0, 0, .82) !important;
}

.battleos-breach-modal {
  border-color: rgba(57, 255, 136, .45) !important;
  background:
    linear-gradient(180deg, rgba(4, 18, 13, .96), rgba(2, 4, 8, .98)),
    repeating-linear-gradient(0deg, rgba(57, 255, 136, .04) 0 1px, transparent 1px 7px) !important;
  box-shadow: 0 0 45px rgba(57, 255, 136, .16), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

.battleos-breach-head,
.battleos-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(57, 255, 136, .26);
  border-radius: 14px;
  background: rgba(0, 0, 0, .46);
  color: #caffdf;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  font-weight: 1000;
}

.battleos-breach-head b {
  color: #39ff88;
  text-shadow: 0 0 16px rgba(57,255,136,.6);
}

.battleos-ai-card {
  border: 1px solid rgba(57, 255, 136, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 115, 4, .14), transparent 38%),
    rgba(0, 0, 0, .42);
}

.battleos-ai-card span,
.battleos-console-head span {
  color: #39ff88 !important;
}

.battleos-breach-modal .faction-pledge-btn,
.battleos-breach-modal .primary {
  background: linear-gradient(135deg, #39ff88, #ff7304) !important;
  color: #050712 !important;
  box-shadow: 0 0 22px rgba(57,255,136,.26) !important;
}

.faction-battle-graph,
.faction-room-card {
  border: 1px solid rgba(57,255,136,.24);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(2, 12, 10, .82), rgba(0, 0, 0, .82)),
    repeating-linear-gradient(90deg, rgba(57,255,136,.035) 0 1px, transparent 1px 20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 36px rgba(0,0,0,.32);
}

.faction-battle-graph {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.battleos-graph-ring {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.battleos-sector-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(57,255,136,.16);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(57,255,136,.11), transparent 36%),
    linear-gradient(135deg, rgba(57,255,136,.06), rgba(255,115,4,.04)),
    rgba(0,0,0,.52);
}

.battleos-sector-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49%, rgba(57,255,136,.16) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(57,255,136,.12) 50%, transparent 51%),
    repeating-linear-gradient(135deg, rgba(57,255,136,.045) 0 1px, transparent 1px 17px);
  opacity: .66;
}

.battleos-sector {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 78px;
  display: grid;
  align-content: end;
  gap: 2px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #4b5563) 42%, rgba(255,255,255,.12));
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--faction-accent, #4b5563) 18%, transparent), transparent 52%),
    rgba(3,6,12,.78);
  box-shadow: inset 0 0 16px rgba(0,0,0,.35);
}

.battleos-sector.claimed {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--faction-accent, #39ff88) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--faction-accent, #39ff88) 20%, transparent);
}

.battleos-sector span,
.battleos-sector b,
.battleos-sector em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battleos-sector span {
  color: color-mix(in srgb, var(--faction-accent, #39ff88) 80%, #fff);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.battleos-sector b {
  color: #fff;
  font-size: .68rem;
}

.battleos-sector em {
  color: rgba(235,239,255,.66);
  font-size: .61rem;
  font-style: normal;
  text-transform: uppercase;
}

.battleos-faction-node {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #39ff88) 44%, rgba(255,255,255,.1));
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.54);
}

.battleos-faction-node::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--node-level, 30%);
  height: 4px;
  background: linear-gradient(90deg, var(--faction-accent, #39ff88), rgba(57,255,136,.2));
  box-shadow: 0 0 14px var(--faction-accent, #39ff88);
}

.battleos-faction-node.active {
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--faction-accent, #39ff88) 18%, transparent), rgba(0,0,0,.54) 62%);
}

.battleos-faction-node img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
}

.battleos-faction-node b,
.battleos-faction-node span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battleos-faction-node b {
  color: #fff;
  font-size: .82rem;
}

.battleos-faction-node span {
  color: rgba(235,239,255,.72);
  font-size: .68rem;
}

.battleos-faction-node em {
  color: #39ff88;
  font-style: normal;
  font-weight: 1000;
  font-size: .78rem;
}

.faction-room-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.faction-room-identity {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.faction-room-identity img {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #39ff88) 48%, rgba(255,255,255,.16));
  background: rgba(0,0,0,.44);
}

.faction-room-identity span {
  color: #39ff88;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faction-room-identity h2 {
  margin: 4px 0;
  line-height: .95;
  text-transform: uppercase;
}

.faction-room-identity p {
  margin: 0;
  color: rgba(235,239,255,.78);
  line-height: 1.3;
}

.faction-room-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.faction-room-stats article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.faction-room-stats b,
.faction-room-stats span {
  display: block;
}

.faction-room-stats b {
  color: #39ff88;
  font-size: 1.1rem;
}

.faction-room-stats span {
  color: rgba(235,239,255,.68);
  font-size: .68rem;
  text-transform: uppercase;
}

.faction-room-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.faction-room-actions button {
  min-height: 44px;
}

.faction-room-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.faction-room-sectors span {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #39ff88) 38%, rgba(255,255,255,.11));
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.04);
  font-size: .72rem;
  font-weight: 900;
}

@media (max-width: 430px) {
  .battleos-sector-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battleos-sector {
    min-height: 66px;
  }

  .battleos-graph-ring {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battleos-faction-node {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 56px;
    padding: 8px;
  }

  .battleos-faction-node img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .faction-room-identity {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .faction-room-identity img {
    width: 64px;
    height: 64px;
  }

  .faction-room-actions {
    grid-template-columns: 1fr;
  }
}

/* Patch 3.0b: tighten the profile editor loadout hero and short-screen Discover stage. */
body .profile-editor-modal .modal-card.profile-edit-hub {
  gap: 10px !important;
}

body .profile-edit-hub .profile-edit-topbar {
  margin-bottom: 0 !important;
}

body .profile-edit-hub .profile-editor-preview {
  min-height: 148px !important;
  grid-template-columns: clamp(96px, 27vw, 126px) minmax(0, 1fr) !important;
  padding: 12px !important;
  gap: 12px !important;
  border-color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 58%, rgba(255,255,255,.14)) !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0 37%, rgba(8,8,18,.9) 37% 100%),
    radial-gradient(circle at 16% 38%, color-mix(in srgb, var(--theme-accent, #ff2f5f) 38%, transparent), transparent 42%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 45px rgba(0,0,0,.42),
    0 0 28px color-mix(in srgb, var(--theme-accent, #ff2f5f) 18%, transparent) !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  content: "LIVE LOADOUT";
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 4;
  color: var(--theme-accent, #ff2f5f);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent, #ff2f5f) 55%, transparent);
  pointer-events: none;
}

body .profile-edit-hub .profile-editor-preview::after {
  height: 100% !important;
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(0,0,0,.52) 40% 100%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.35)) !important;
  z-index: 1 !important;
}

body .profile-edit-hub .profile-editor-avatar {
  width: clamp(92px, 26vw, 120px) !important;
  z-index: 5 !important;
}

body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  width: clamp(78px, 22vw, 104px) !important;
}

body .profile-edit-hub .profile-editor-id {
  z-index: 5 !important;
  border-color: rgba(255,255,255,.06) !important;
  background:
    linear-gradient(135deg, rgba(4,5,12,.78), rgba(12,13,30,.54)) !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,.025) !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  font-size: clamp(1.7rem, 6.2vw, 2.55rem) !important;
}

body .profile-edit-hub .profile-editor-badge-row {
  gap: 5px !important;
  margin-bottom: 4px !important;
}

body .profile-edit-hub .profile-editor-meta {
  margin-top: 6px !important;
}

body .profile-edit-hub .profile-editor-xp {
  height: 6px !important;
  margin-top: 7px !important;
  max-width: 100% !important;
}

body .profile-edit-loadout-strip {
  margin-top: 0 !important;
}

body .profile-edit-loadout-strip div {
  min-height: 48px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(5,7,14,.74) !important;
}

@media (max-width: 430px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    min-height: 136px !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  body .profile-edit-hub .profile-editor-preview::before {
    top: 8px;
    left: 11px;
    font-size: .54rem;
  }

  body .profile-edit-hub .profile-editor-avatar {
    width: 90px !important;
  }

  body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
    width: 76px !important;
  }

  body .profile-edit-hub .profile-editor-id {
    padding: 8px 9px !important;
  }

  body .profile-edit-hub .profile-editor-id p {
    font-size: .7rem !important;
    line-height: 1.2 !important;
  }

  body .profile-edit-loadout-strip div {
    min-height: 44px !important;
    padding: 7px !important;
  }
}

/* Patch 3.1: BattleOS faction hub polish and compact profile loadout preview. */
.faction-hub {
  position: relative;
}

.faction-war-room {
  position: relative;
  overflow: hidden;
  border-color: rgba(57,255,136,.22) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(57,255,136,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(255,115,4,.13), transparent 34%),
    linear-gradient(180deg, rgba(2,6,10,.88), rgba(0,0,0,.88)) !important;
}

.faction-war-room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(57,255,136,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(57,255,136,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.18));
  opacity: .55;
}

.faction-war-room > * {
  position: relative;
  z-index: 1;
}

.faction-ai-panel {
  border-color: rgba(255,115,4,.28) !important;
  background:
    linear-gradient(135deg, rgba(255,115,4,.12), transparent 42%),
    rgba(0,0,0,.58) !important;
}

.faction-ai-panel img {
  box-shadow: 0 0 24px rgba(255,115,4,.18);
}

.faction-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.faction-count-tile {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #ff2f5f) 42%, rgba(255,255,255,.1));
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--faction-accent, #ff2f5f) 18%, transparent), transparent 58%),
    rgba(0,0,0,.54);
}

.faction-count-tile img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
}

.faction-count-tile b,
.faction-count-tile span,
.faction-count-tile em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faction-count-tile b {
  color: #fff;
  font-size: .74rem;
}

.faction-count-tile span {
  color: #39ff88;
  font-size: .7rem;
  font-weight: 900;
}

.faction-count-tile em {
  grid-column: 1 / -1;
  color: rgba(235,239,255,.62);
  font-size: .64rem;
  font-style: normal;
  text-transform: uppercase;
}

.faction-room-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--faction-accent, #39ff88) 46%, rgba(255,255,255,.12)) !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--faction-accent, #39ff88) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(3,4,10,.92), rgba(0,0,0,.9)) !important;
}

.faction-room-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--faction-accent, #39ff88) 12%, transparent), transparent),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--faction-accent, #39ff88) 8%, transparent) 0 1px, transparent 1px 18px);
  opacity: .28;
}

.faction-room-card > * {
  position: relative;
  z-index: 1;
}

.faction-room-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.faction-room-chat span {
  display: block;
  color: color-mix(in srgb, var(--faction-accent, #39ff88) 78%, #fff);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faction-room-chat b {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 1rem;
}

.faction-room-chat p {
  margin: 3px 0 0;
  color: rgba(235,239,255,.68);
  line-height: 1.25;
}

.faction-room-chat em {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(235,239,255,.68);
  background: rgba(255,255,255,.04);
  font-size: .66rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.faction-room-chat em.online {
  border-color: rgba(57,255,136,.38);
  color: #39ff88;
  background: rgba(57,255,136,.08);
}

body .profile-edit-hub .profile-editor-preview {
  min-height: 118px !important;
  grid-template-columns: clamp(82px, 23vw, 104px) minmax(0, 1fr) !important;
  align-items: center !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  content: "LOADOUT PREVIEW";
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  width: clamp(74px, 21vw, 96px) !important;
  justify-self: center;
}

body .profile-edit-hub .profile-editor-id {
  align-self: center;
  padding: 10px !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  font-size: clamp(1.35rem, 5.2vw, 2.1rem) !important;
  line-height: .9 !important;
}

body .profile-edit-hub .profile-editor-id p,
body .profile-edit-hub .profile-editor-meta {
  font-size: .78rem !important;
  line-height: 1.18 !important;
}

@media (max-width: 430px) {
  .faction-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faction-room-chat {
    grid-template-columns: 1fr;
  }

  .faction-room-chat em {
    justify-self: start;
  }

  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 108px !important;
    padding: 9px !important;
  }
}

@media (max-height: 760px) {
  #view .discover-swipe-shell {
    grid-template-rows: auto auto minmax(250px, 1fr) auto !important;
  }

  #view .discover-swipe-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  #view .discover-swipe-head h1 {
    font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
  }

  #view .discover-swipe-head p {
    max-width: 15ch !important;
  }

  #view .discover-empty-card {
    min-height: 250px !important;
  }
}

@media (max-width: 430px) and (max-height: 760px) {
  #view .discover-swipe-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view .discover-swipe-head p {
    max-width: none !important;
  }
}

/* Patch 3.1b: final profile editor preview containment override */
body .profile-editor-modal .modal-card.profile-edit-hub {
  --editor-preview-avatar: clamp(98px, 27vw, 124px);
}

body .profile-edit-hub .profile-editor-preview {
  min-height: clamp(150px, 38vw, 176px) !important;
  grid-template-columns: var(--editor-preview-avatar) minmax(0, 1fr) !important;
  gap: clamp(12px, 3vw, 18px) !important;
  align-items: center !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  top: 10px !important;
  left: 12px !important;
  transform: none !important;
  opacity: .82 !important;
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  width: var(--editor-preview-avatar) !important;
  max-width: var(--editor-preview-avatar) !important;
  justify-self: center !important;
  align-self: center !important;
}

body .profile-edit-hub .profile-editor-id {
  min-width: 0 !important;
  align-self: center !important;
  padding: 0 !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body .profile-edit-hub .profile-editor-badge-row {
  gap: 5px !important;
  margin-bottom: 7px !important;
}

body .profile-edit-hub .profile-editor-badge-row span {
  min-height: 22px !important;
  padding: 4px 7px !important;
}

@media (max-width: 390px) {
  body .profile-edit-hub .profile-editor-preview {
    min-height: 142px !important;
    padding: 14px !important;
    gap: 10px !important;
  }
}

/* Patch 3.2: profile editor, discover, and faction hub final mobile polish */
body .profile-editor-modal .modal-card.profile-edit-hub {
  --editor-preview-avatar: clamp(116px, 33vw, 150px);
}

body .profile-edit-hub .profile-editor-preview {
  position: relative !important;
  min-height: clamp(176px, 44vw, 220px) !important;
  grid-template-columns: var(--editor-preview-avatar) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(14px, 3.4vw, 22px) !important;
  padding: clamp(16px, 3.8vw, 24px) !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #ff2f5f) 74%, rgba(255,255,255,.16)) !important;
  background:
    radial-gradient(circle at 18% 42%, color-mix(in srgb, var(--theme-accent, #ff2f5f) 34%, transparent) 0 16%, transparent 34%),
    linear-gradient(115deg, rgba(255,47,95,.2), rgba(139,92,246,.16) 44%, rgba(5,7,18,.92) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 18px 42px rgba(0,0,0,.42),
    0 0 28px color-mix(in srgb, var(--theme-accent, #ff2f5f) 22%, transparent) !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  content: "Live Loadout" !important;
  top: 13px !important;
  left: 16px !important;
  letter-spacing: .16em !important;
  font-size: 9px !important;
  opacity: .95 !important;
  color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 78%, #fff) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--theme-accent, #ff2f5f) 60%, transparent) !important;
}

body .profile-edit-hub .profile-editor-preview-bg {
  opacity: .42 !important;
  filter: saturate(1.18) contrast(1.1) brightness(.7) !important;
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  width: var(--editor-preview-avatar) !important;
  max-width: var(--editor-preview-avatar) !important;
  justify-self: start !important;
  margin-top: 14px !important;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--theme-accent, #ff2f5f) 58%, transparent)) !important;
}

body .profile-edit-hub .profile-editor-id {
  position: relative !important;
  z-index: 3 !important;
  align-self: center !important;
  padding: 8px 0 0 !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  margin: 5px 0 4px !important;
  font-size: clamp(30px, 9.2vw, 46px) !important;
  line-height: .9 !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.9), 0 0 18px rgba(255,255,255,.18) !important;
}

body .profile-edit-hub .profile-editor-id p {
  max-width: 22ch !important;
  margin: 0 !important;
  font-size: clamp(11px, 3.1vw, 14px) !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.9) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.86) !important;
}

body .profile-edit-hub .profile-editor-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 9px !important;
}

body .profile-edit-hub .profile-editor-meta b,
body .profile-edit-hub .profile-editor-meta span {
  max-width: 100% !important;
  min-height: 21px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.38) !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-edit-hub .profile-editor-xp {
  margin-top: 10px !important;
  height: 7px !important;
  background: rgba(255,255,255,.16) !important;
}

body .profile-edit-hub .cosmetic-loadout-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .profile-edit-hub .cosmetic-loadout-summary > div {
  min-height: 50px !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
}

body .profile-edit-hub .cosmetic-loadout-summary span {
  font-size: 8px !important;
  letter-spacing: .1em !important;
}

body .profile-edit-hub .cosmetic-loadout-summary b {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-edit-hub .profile-edit-tile-grid {
  gap: 10px !important;
}

body .profile-edit-hub .profile-edit-tile {
  min-height: 128px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

body .profile-edit-hub .profile-edit-tile span {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 10px !important;
  font-size: 11px !important;
}

body .profile-edit-hub .profile-edit-tile b {
  font-size: 17px !important;
}

body .profile-edit-hub .profile-edit-tile em {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body .profile-edit-hub .profile-edit-tile small {
  margin-top: auto !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body #view .discover-empty-card {
  min-height: clamp(300px, 44vh, 410px) !important;
  align-content: center !important;
  gap: 22px !important;
  padding: clamp(22px, 6vw, 34px) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 78% 15%, rgba(139,92,246,.28), transparent 42%),
    radial-gradient(circle at 18% 90%, rgba(255,47,95,.18), transparent 42%),
    linear-gradient(180deg, rgba(18,22,42,.98), rgba(5,7,18,.98)) !important;
}

body #view .discover-empty-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 22px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

body #view .discover-empty-card span {
  display: inline-flex !important;
  width: fit-content !important;
  margin: 0 auto 8px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255,47,95,.35) !important;
  border-radius: 999px !important;
  background: rgba(255,47,95,.13) !important;
}

body #view .discover-empty-card h2 {
  max-width: 13ch !important;
  margin-inline: auto !important;
  font-size: clamp(25px, 7vw, 34px) !important;
  line-height: 1.02 !important;
}

body #view .discover-empty-card p {
  max-width: 28ch !important;
  margin-inline: auto !important;
}

body #view .discover-empty-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}

body #view .discover-empty-actions button,
body #view .swipe-actions button {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.05 !important;
}

body #view .discover-player-card {
  min-height: clamp(480px, 63vh, 580px) !important;
  display: grid !important;
  grid-template-rows: minmax(218px, 42%) minmax(0, 1fr) !important;
}

body #view .discover-player-card .player-art {
  min-height: 218px !important;
}

body #view .discover-player-card .player-info {
  min-height: 0 !important;
  padding: 16px !important;
  gap: 9px !important;
}

body #view .discover-player-heading h2 {
  font-size: clamp(24px, 7.6vw, 38px) !important;
  max-width: 11ch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #view .discover-card-tools {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}

body #view .discover-card-tools button {
  min-height: 42px !important;
  padding-inline: 8px !important;
  font-size: 12px !important;
}

body .faction-count-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.26) !important;
}

body .faction-count-tile {
  min-height: 88px !important;
  padding: 8px 6px !important;
  gap: 4px !important;
  text-align: center !important;
}

body .faction-count-tile img {
  width: 30px !important;
  height: 30px !important;
}

body .faction-count-tile b {
  font-size: 9px !important;
  line-height: 1.05 !important;
  min-height: 20px !important;
}

body .faction-count-tile span {
  font-size: 18px !important;
}

body .faction-count-tile em {
  font-size: 8px !important;
}

body .battleos-sector-map {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (max-width: 390px) {
  body .profile-editor-modal .modal-card.profile-edit-hub {
    --editor-preview-avatar: clamp(108px, 34vw, 132px);
  }

  body .profile-edit-hub .profile-editor-preview {
    min-height: 174px !important;
    padding: 15px !important;
    gap: 12px !important;
  }

  body .profile-edit-hub .profile-editor-id h2 {
    font-size: clamp(27px, 8.8vw, 36px) !important;
  }

  body .profile-edit-hub .profile-editor-id p {
    max-width: 19ch !important;
  }

  body .profile-edit-hub .profile-edit-tile {
    min-height: 118px !important;
  }
}

@media (max-width: 360px) {
  body .profile-editor-modal .modal-card.profile-edit-hub {
    --editor-preview-avatar: 98px;
  }

  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 98px minmax(0, 1fr) !important;
  }

  body #view .discover-swipe-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #view .discover-player-card {
    min-height: 456px !important;
  }

  body #view .discover-player-card .player-art {
    min-height: 194px !important;
  }
}

/* Patch 3.4: cleaner profile editor command card and tighter Discover fit */
body .profile-editor-modal .modal-card.profile-edit-hub {
  --editor-preview-avatar: clamp(118px, 29vw, 154px);
  max-width: min(520px, calc(100vw - 16px)) !important;
  padding: clamp(14px, 3.2vw, 18px) !important;
}

body .profile-edit-hub .profile-edit-topbar {
  margin-bottom: 10px !important;
}

body .profile-edit-hub .profile-editor-preview {
  isolation: isolate !important;
  min-height: clamp(178px, 38vw, 212px) !important;
  grid-template-columns: var(--editor-preview-avatar) minmax(0, 1fr) !important;
  gap: clamp(14px, 4vw, 22px) !important;
  align-items: center !important;
  padding: clamp(18px, 4vw, 24px) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.18) 48%, rgba(0,0,0,.72)),
    radial-gradient(circle at 16% 52%, color-mix(in srgb, var(--theme-accent, #ff2f5f) 38%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255,47,95,.22), rgba(139,92,246,.2) 58%, rgba(5,7,18,.96)) !important;
}

body .profile-edit-hub .profile-editor-preview::before {
  content: "Live Profile Preview" !important;
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  z-index: 4 !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.42) !important;
  color: color-mix(in srgb, var(--theme-accent, #ff2f5f) 72%, #fff) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body .profile-edit-hub .profile-editor-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  z-index: 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 17px !important;
  pointer-events: none !important;
}

body .profile-edit-hub .profile-editor-preview-bg,
body .profile-edit-hub .profile-effect-layer {
  z-index: 0 !important;
  opacity: .35 !important;
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  position: relative !important;
  z-index: 2 !important;
  width: var(--editor-preview-avatar) !important;
  max-width: var(--editor-preview-avatar) !important;
  margin: 12px 0 0 !important;
  justify-self: center !important;
}

body .profile-edit-hub .profile-editor-id {
  z-index: 3 !important;
  min-width: 0 !important;
  padding: 12px 10px 12px 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.28)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--theme-accent, #ff2f5f) 78%, #fff) !important;
}

body .profile-edit-hub .profile-editor-id h2 {
  max-width: 100% !important;
  margin: 5px 0 5px !important;
  font-size: clamp(31px, 8.6vw, 48px) !important;
  line-height: .86 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .profile-edit-hub .profile-editor-id p {
  max-width: 25ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body .profile-edit-hub .profile-editor-badge-row {
  min-height: 22px !important;
  gap: 5px !important;
  margin-bottom: 2px !important;
}

body .profile-edit-hub .profile-editor-badge-row span {
  min-height: 20px !important;
  padding: 4px 7px !important;
  border-radius: 8px !important;
  font-size: 8px !important;
}

body .profile-edit-hub .profile-editor-meta {
  gap: 6px !important;
}

body .profile-edit-hub .profile-editor-xp {
  max-width: 100% !important;
}

body .profile-edit-hub .profile-edit-loadout-strip {
  margin: 10px 0 12px !important;
  gap: 8px !important;
}

body .profile-edit-hub .profile-edit-loadout-strip > div {
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
}

body .profile-edit-hub .profile-edit-tile-grid {
  gap: 9px !important;
}

body .profile-edit-hub .profile-edit-tile {
  min-height: 116px !important;
  padding: 12px !important;
}

body #view .discover-swipe-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 100% !important;
  padding-bottom: 10px !important;
}

body #view .discover-swipe-head {
  padding: clamp(18px, 5vw, 24px) !important;
  align-items: end !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.5)),
    radial-gradient(circle at 80% 16%, rgba(255,115,4,.22), transparent 38%) !important;
  backdrop-filter: blur(5px) !important;
}

body #view .discover-swipe-head h1 {
  max-width: 9ch !important;
  font-size: clamp(35px, 10.8vw, 54px) !important;
  line-height: .92 !important;
}

body #view .discover-swipe-head p {
  max-width: 17ch !important;
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9) !important;
}

body #view .swipe-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
}

body #view .discover-player-card {
  min-height: min(58vh, 560px) !important;
  max-height: none !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

body #view .discover-player-card .player-art {
  min-height: clamp(204px, 32vh, 282px) !important;
}

body #view .discover-player-card .player-info {
  padding: 14px !important;
}

body #view .discover-player-heading h2 {
  max-width: 12ch !important;
  font-size: clamp(25px, 7.4vw, 36px) !important;
}

body #view .discover-player-bio {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body #view .discover-player-tags {
  gap: 6px !important;
}

body #view .swipe-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px 0 0 !important;
  background: linear-gradient(180deg, transparent, rgba(5,7,18,.88) 38%, rgba(5,7,18,.98)) !important;
}

body #view .swipe-actions button {
  min-height: clamp(48px, 12vw, 58px) !important;
  border-radius: 13px !important;
  font-size: clamp(14px, 4vw, 18px) !important;
}

body #view .discover-empty-card {
  min-height: min(52vh, 430px) !important;
  place-content: center !important;
  padding: 26px 20px !important;
}

body #view .discover-empty-card h2 {
  max-width: 11ch !important;
}

@media (max-width: 390px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 178px !important;
    padding: 15px !important;
  }

  body .profile-edit-hub .profile-editor-avatar,
  body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
    width: 92px !important;
    max-width: 92px !important;
    margin-top: 16px !important;
  }

  body .profile-edit-hub .profile-editor-id {
    padding: 10px 8px 10px 12px !important;
  }

  body .profile-edit-hub .profile-editor-id h2 {
    font-size: clamp(27px, 8.5vw, 36px) !important;
  }

  body .profile-edit-hub .profile-editor-id p,
  body .profile-edit-hub .profile-editor-meta {
    font-size: 10px !important;
  }

  body #view .discover-swipe-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body #view .discover-swipe-head .chip {
    width: fit-content !important;
  }

  body #view .discover-player-card {
    min-height: min(55vh, 520px) !important;
  }
}

/* Patch 4.1: compact editor preview, faction hub, and Discover mobile fit */
body .profile-editor-modal {
  align-items: flex-start;
  padding: max(12px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
}

body .profile-editor-modal .modal-card.profile-edit-hub,
body .profile-editor-modal .modal-card.profile-edit-detail {
  width: min(100%, 492px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
  overflow: auto;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 47, 95, .2), transparent 30%),
    radial-gradient(circle at 100% 2%, rgba(139, 92, 246, .18), transparent 34%),
    rgba(5, 7, 18, .96);
}

body .profile-edit-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

body .profile-edit-topbar > div {
  min-width: 0;
}

body .profile-edit-topbar h2 {
  font-size: clamp(28px, 8vw, 44px);
  line-height: .92;
}

body .profile-edit-topbar button,
body .back-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body .profile-edit-hub .profile-editor-preview {
  min-height: 156px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(104px, 128px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px !important;
  overflow: hidden;
  border-radius: 20px;
}

body .profile-edit-hub .profile-editor-preview::before {
  opacity: .42 !important;
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
  position: relative !important;
  inset: auto !important;
  width: clamp(104px, 28vw, 128px) !important;
  height: clamp(118px, 32vw, 148px) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2;
}

body .profile-edit-hub .profile-editor-id {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100%;
  align-self: center;
  z-index: 3;
}

body .profile-edit-hub .profile-editor-id h2 {
  font-size: clamp(30px, 9vw, 52px) !important;
  line-height: .88;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .95);
}

body .profile-edit-hub .profile-editor-id p {
  max-width: 100%;
  margin: 7px 0 9px;
  font-size: 13px !important;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

body .profile-edit-hub .profile-editor-badge-row,
body .profile-edit-hub .profile-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body .profile-edit-hub .profile-editor-badge-row span,
body .profile-edit-hub .profile-editor-meta b,
body .profile-edit-hub .profile-editor-meta span {
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .profile-edit-loadout-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

body .profile-edit-loadout-strip > div {
  min-height: 58px;
  padding: 10px;
  border-radius: 12px;
}

body .profile-edit-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body .profile-edit-tile {
  min-height: 122px;
  padding: 13px;
  border-radius: 16px;
}

body .profile-edit-tile span {
  width: 38px;
  height: 38px;
}

body .profile-edit-form .profile-save-action,
body .profile-edit-detail .primary.profile-save-action,
body .profile-edit-detail button.primary {
  width: auto;
  min-width: 170px;
  min-height: 44px;
  padding: 12px 18px;
  margin: 14px 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

body .faction-hub {
  gap: 12px;
}

body .faction-war-room {
  padding: 12px;
  gap: 12px;
  border-radius: 18px;
}

body .faction-ai-panel {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  padding: 12px;
  border-radius: 16px;
}

body .faction-ai-panel img {
  width: 82px;
  height: 82px;
  border-radius: 15px;
  object-fit: cover;
}

body .faction-ai-panel h2 {
  font-size: clamp(24px, 6vw, 32px);
}

body .faction-room-card {
  padding: 14px;
  border-radius: 18px;
}

body .faction-room-identity {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
}

body .faction-room-identity img {
  width: 74px;
  height: 74px;
  padding: 6px;
  object-fit: contain;
}

body .faction-room-stats,
body .faction-count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body .faction-count-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body .faction-count-tile {
  min-height: 96px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
}

body .faction-count-tile img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

body .faction-count-tile b {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .faction-count-tile span,
body .faction-count-tile em {
  font-size: 10px;
  line-height: 1.1;
}

body .battleos-sector-map,
body .sector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body .battleos-sector,
body .sector-tile {
  min-height: 86px;
  padding: 9px;
}

body .faction-card.featured {
  display: grid;
  grid-template-columns: minmax(98px, 34%) minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
}

body .faction-card.featured .faction-card-art {
  min-height: 340px;
}

body .faction-card.featured .faction-card-body h3 {
  font-size: clamp(30px, 8vw, 48px);
  line-height: .95;
}

body .faction-card-preview {
  min-height: 126px;
}

body #view .discover-swipe-shell {
  min-height: 0;
  gap: 10px;
  padding-bottom: 8px;
}

body #view .discover-swipe-head {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .42)),
    var(--takeover-bg, none);
  background-size: cover;
  background-position: center;
  border-radius: 18px;
}

body #view .discover-swipe-head > div {
  min-width: 0;
}

body #view .discover-swipe-head h1 {
  font-size: clamp(36px, 11vw, 56px);
  line-height: .9;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .95);
}

body #view .discover-swipe-head p {
  max-width: 18ch;
  font-size: clamp(13px, 3.7vw, 17px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

body #view .discover-mode-toggle {
  margin: 0;
}

body #view .swipe-stage {
  min-height: 0;
}

body #view .discover-player-card {
  min-height: min(58dvh, 560px);
  max-height: none;
}

body #view .discover-player-card .player-art {
  min-height: 230px;
}

body #view .discover-player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body #view .swipe-actions {
  position: relative;
  bottom: auto;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 0 2px;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 18, .86) 42%, rgba(5, 7, 18, .96));
}

body #view .discover-empty-card {
  min-height: min(40dvh, 340px) !important;
  height: auto !important;
}

body #view .swipe-stage {
  display: block;
  min-height: 0 !important;
}

body #view .swipe-actions button {
  min-width: 0;
  min-height: 54px;
}

body .verified-badge-icon,
body .discover-verified,
body .leaderboard-verified-slot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .verified-icon {
  filter: drop-shadow(0 0 10px rgba(255, 47, 95, .55)) drop-shadow(0 0 10px rgba(139, 92, 246, .45));
}

@media (max-width: 430px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 12px;
    padding: 12px !important;
  }

  body .profile-edit-loadout-strip,
  body .profile-edit-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .profile-edit-tile {
    min-height: 108px;
    padding: 11px;
  }

  body .profile-edit-tile em,
  body .profile-edit-tile small {
    font-size: 11px;
    line-height: 1.2;
  }

  body .faction-card.featured {
    grid-template-columns: 1fr;
  }

  body .faction-card.featured .faction-card-art {
    min-height: 210px;
  }

  body .faction-count-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body .faction-count-tile {
    min-height: 82px;
    padding: 6px 4px;
  }

  body .faction-count-tile img {
    width: 30px;
    height: 30px;
  }

  body .faction-count-tile b {
    font-size: 9px;
  }

  body .faction-count-tile span,
  body .faction-count-tile em {
    font-size: 8px;
  }

  body #view .discover-swipe-head {
    grid-template-columns: 1fr;
  }

  body #view .discover-swipe-head .chip {
    justify-self: start;
  }
}

@media (max-height: 760px) {
  body #view .discover-player-card .player-art {
    min-height: 190px;
  }

  body #view .discover-player-bio,
  body #view .discover-player-tags {
    display: none;
  }

  body #view .discover-player-card {
    min-height: 500px;
  }
}

/* Patch 4.2: keep Faction Hub pledge totals in the first information block. */
body .faction-war-room .faction-ai-panel {
  order: 1;
}

body .faction-war-room .faction-count-grid {
  order: 2 !important;
  margin-top: 0;
}

body .faction-war-room .faction-room-card {
  order: 3;
}

body .faction-war-room .faction-battle-graph {
  display: none !important;
  order: 4 !important;
}

body .faction-war-room .sector-board {
  order: 5;
}

body .faction-count-grid {
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7, 9, 18, 0.94), rgba(3, 4, 9, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body .faction-count-tile {
  min-height: 76px;
  gap: 3px;
}

body .faction-count-tile img {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--faction-accent, #ff2f5f) 55%, transparent));
}

body .faction-count-tile > div {
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 0;
  width: 100%;
}

body .faction-count-tile b {
  font-size: 10px !important;
  line-height: 1;
}

body .faction-count-tile span {
  display: block;
  max-width: 100%;
  font-size: 10px !important;
  line-height: 1.05;
  white-space: normal;
  text-wrap: balance;
}

body .faction-count-tile em {
  font-size: 8px !important;
  line-height: 1;
}

/* Patch 4.3: BattleOS pledge flow, command room focus, and active faction telemetry. */
body .battleos-breach-terminal {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 11px 12px 13px;
  border: 1px solid rgba(57, 255, 136, .3);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(57,255,136,.12), transparent 45%, rgba(255,115,4,.1)),
    rgba(0,0,0,.54);
  overflow: hidden;
}

body .battleos-breach-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(57,255,136,.08) 0 1px, transparent 1px 6px);
  opacity: .5;
}

body .battleos-breach-terminal span,
body .battleos-breach-terminal b,
body .battleos-breach-terminal i {
  position: relative;
  z-index: 1;
}

body .battleos-breach-terminal span {
  color: #ff2f5f;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body .battleos-breach-terminal b {
  color: #f4fff8;
  font-size: 13px;
  line-height: 1.25;
}

body .battleos-breach-terminal i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2f5f 0 34%, #ff7304 34% 68%, #39ff88 68%);
  box-shadow: 0 0 18px rgba(57,255,136,.25);
}

body .faction-war-room .faction-room-card {
  order: 2 !important;
}

body .faction-war-room .faction-count-grid {
  order: 3 !important;
}

body .faction-command-card {
  display: grid;
  gap: 12px;
  padding: 13px;
}

body .faction-command-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body .faction-command-feed article {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #39ff88) 34%, rgba(255,255,255,.08));
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--faction-accent, #39ff88) 18%, transparent), transparent 60%),
    rgba(0,0,0,.45);
}

body .faction-command-feed span {
  display: block;
  color: color-mix(in srgb, var(--faction-accent, #39ff88) 80%, #fff);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body .faction-command-feed b {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 14px;
}

body .faction-command-feed p {
  margin: 4px 0 0;
  color: rgba(235,239,255,.68);
  font-size: 12px;
  line-height: 1.25;
}

body .battleos-count-grid {
  border-color: rgba(57,255,136,.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(57,255,136,.09), transparent 45%),
    linear-gradient(180deg, rgba(7, 9, 18, .94), rgba(3, 4, 9, .98));
}

body .battleos-count-grid .faction-count-tile {
  position: relative;
  overflow: hidden;
}

body .battleos-count-grid .faction-count-tile::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--faction-accent, #ff2f5f);
  box-shadow: 0 0 14px var(--faction-accent, #ff2f5f);
}

body .battleos-count-grid .faction-count-tile i {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

body .battleos-count-grid .faction-count-tile i::before {
  content: "";
  display: block;
  width: var(--node-load, 12%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--faction-accent, #ff2f5f), #39ff88);
  box-shadow: 0 0 12px var(--faction-accent, #ff2f5f);
}

@media (max-width: 430px) {
  body .faction-command-feed {
    grid-template-columns: 1fr;
  }
}

/* Patch 4.4: profile editor loadout preview density and readability */
body .profile-edit-hub .profile-editor-preview {
  min-height: 178px !important;
  align-items: stretch !important;
}

body .profile-edit-hub .profile-editor-preview::after {
  opacity: .28 !important;
}

body .profile-edit-hub .profile-editor-id {
  display: flex !important;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
}

body .profile-edit-hub .profile-editor-id h2,
body .profile-edit-hub .profile-editor-id p {
  max-width: 100% !important;
}

body .profile-edit-hub .cosmetic-loadout-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

body .profile-edit-hub .cosmetic-loadout-summary > div {
  min-width: 0;
  min-height: 44px !important;
  padding: 8px 9px !important;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #ff2f5f) 42%, rgba(255,255,255,.1)) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.34)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body .profile-edit-hub .cosmetic-loadout-summary span {
  display: block !important;
  color: rgba(190,198,225,.78) !important;
  font-size: 7px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body .profile-edit-hub .cosmetic-loadout-summary b {
  display: block !important;
  margin-top: 4px !important;
  color: #fff !important;
  font-size: clamp(10px, 2.7vw, 12px) !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip {
  display: none !important;
}

@media (max-width: 430px) {
  body #view .discover-player-card {
    min-height: 0 !important;
  }

  body #view .discover-player-card .player-art {
    min-height: clamp(155px, 43vw, 190px) !important;
  }

  body #view .discover-player-card .player-info {
    padding: 12px 14px 14px !important;
    gap: 8px !important;
  }

  body #view .discover-player-bio {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
  }

  body #view .discover-player-tags {
    display: none !important;
  }

  body #view .discover-player-facts {
    gap: 6px !important;
  }

  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: minmax(92px, 116px) minmax(0, 1fr) !important;
    min-height: 168px !important;
    gap: 12px !important;
    padding: 13px !important;
  }

  body .profile-edit-hub .profile-editor-avatar,
  body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
    width: clamp(92px, 28vw, 112px) !important;
    height: clamp(108px, 34vw, 132px) !important;
  }

  body .profile-edit-hub .profile-editor-id h2 {
    font-size: clamp(24px, 8vw, 36px) !important;
  }

  body .profile-edit-hub .profile-editor-badge-row {
    gap: 4px !important;
  }

  body .profile-edit-hub .profile-editor-badge-row span,
  body .profile-edit-hub .profile-editor-meta b,
  body .profile-edit-hub .profile-editor-meta span {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 370px) {
  body .profile-edit-hub .profile-editor-preview {
    grid-template-columns: 1fr !important;
  }

  body .profile-edit-hub .profile-editor-avatar,
  body .profile-edit-hub .profile-editor-avatar.has-frame-asset {
    justify-self: center !important;
  }

  body .profile-edit-hub .profile-editor-id {
    text-align: center;
  }

  body .profile-edit-hub .profile-editor-badge-row,
  body .profile-edit-hub .profile-editor-meta {
    justify-content: center;
  }
}

/* Patch 4.4.1: faction hub ordering and compact Home command layout. Keep at EOF. */
body .faction-war-room {
  gap: 10px !important;
  padding: 10px !important;
}

body .faction-hub {
  gap: 12px !important;
}

body .faction-hub .route-hero.faction-hero {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 10px 10px 8px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 47, 95, .12), rgba(139, 92, 246, .08)),
    rgba(5, 7, 18, .82) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32) !important;
}

body .faction-hub .route-hero.faction-hero::before {
  content: "";
  width: 4px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff2f5f, #8b5cf6);
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  transform: translateX(-9px);
}

body .faction-hub .route-hero.faction-hero .back-btn {
  min-width: 54px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  grid-column: 1 !important;
  align-self: center !important;
}

body .faction-hub .route-hero.faction-hero > div {
  grid-column: 2 !important;
  min-width: 0 !important;
  padding-left: 6px !important;
}

body .faction-hub .route-hero.faction-hero h1 {
  font-size: clamp(2rem, 8vw, 3rem) !important;
  line-height: .92 !important;
  margin: 2px 0 8px !important;
}

body .faction-hub .route-hero.faction-hero p {
  margin: 0 !important;
  max-width: 34ch !important;
}

body .faction-war-room .faction-ai-panel {
  order: 1 !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 12px !important;
  min-height: 0 !important;
}

body .faction-war-room .faction-ai-panel img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

body .faction-war-room .faction-ai-panel h2 {
  font-size: clamp(1.2rem, 5.2vw, 1.72rem) !important;
  line-height: .95 !important;
  margin: 2px 0 5px !important;
}

body .faction-war-room .faction-ai-panel p {
  font-size: .86rem !important;
  line-height: 1.28 !important;
  margin: 0 !important;
}

body .faction-war-room .faction-count-grid {
  order: 2 !important;
}

body .faction-war-room .sector-board {
  order: 3 !important;
}

body .faction-war-room .faction-room-card {
  order: 4 !important;
}

body .faction-war-room .faction-battle-graph {
  display: none !important;
}

body .faction-war-room .faction-count-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
}

body .faction-war-room .faction-count-tile {
  min-height: 68px !important;
  padding: 7px 5px !important;
  border-radius: 12px !important;
}

body .faction-war-room .faction-count-tile img {
  width: clamp(26px, 7vw, 36px) !important;
  height: clamp(26px, 7vw, 36px) !important;
}

body .faction-war-room .faction-count-tile b {
  font-size: 10px !important;
  line-height: 1 !important;
}

body .faction-war-room .faction-count-tile span,
body .faction-war-room .faction-count-tile em {
  font-size: 8px !important;
  line-height: 1.05 !important;
}

body .home-status-hero {
  grid-template-columns: minmax(0, 1fr) clamp(118px, 28%, 156px) !important;
}

body .home-level-card {
  min-width: 118px !important;
  padding: 12px 10px !important;
  overflow: hidden;
}

body .home-level-card b,
body .home-level-card small {
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: normal;
}

body .home-level-card b {
  white-space: nowrap;
  font-size: clamp(.78rem, 2.7vw, 1rem) !important;
}

body .home-level-card small {
  font-size: clamp(.68rem, 2.5vw, .88rem) !important;
  line-height: 1.15 !important;
}

body .home-feature-grid {
  scroll-padding-inline: 0;
}

body .home-feature-card {
  min-width: 0;
}

@media (max-width: 560px) {
  body .home-command {
    padding-inline: 10px !important;
  }

  body .home-status-hero {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  body .home-status-copy {
    gap: 6px !important;
  }

  body .home-status-hero h1 {
    font-size: clamp(1.62rem, 7.4vw, 2.35rem) !important;
  }

  body .home-game-line {
    font-size: .88rem !important;
  }

  body .home-tag {
    min-height: 24px !important;
    padding-inline: 8px !important;
    font-size: .76rem !important;
  }

  body .home-actions {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-width: 180px;
  }

  body .home-primary-action,
  body .home-status-control {
    min-height: 42px !important;
    font-size: .84rem !important;
  }

  body .home-level-card {
    min-width: 0 !important;
    gap: 6px !important;
  }

  body .home-level-token {
    width: 58px !important;
    height: 66px !important;
  }

  body .home-level-token span {
    font-size: 2.28rem !important;
  }

  body .home-feature-card {
    flex: 0 0 calc((100% - 8px) / 2) !important;
    min-height: 72px !important;
    padding: 10px !important;
  }

  body .home-feature-card b {
    font-size: .86rem !important;
  }

  body .home-feature-card span {
    font-size: .76rem !important;
  }
}

@media (max-width: 390px) {
  body .home-status-hero {
    grid-template-columns: 1fr !important;
  }

  body .home-actions {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .home-status-copy {
    min-width: 0;
  }

  body .home-level-card {
    width: 100% !important;
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    grid-template-areas:
      "token label"
      "token bar"
      "token xp" !important;
    align-items: center !important;
    text-align: left !important;
  }

  body .home-level-token {
    grid-area: token;
    width: 58px !important;
    height: 66px !important;
    justify-self: start;
  }

  body .home-level-token span {
    font-size: 2.22rem !important;
  }

  body .home-level-card b {
    grid-area: label;
    justify-self: start;
    text-align: left;
  }

  body .home-level-card small {
    grid-area: xp;
    justify-self: start;
    font-size: .78rem !important;
    text-align: left;
    white-space: normal;
  }

  body .home-level-card .home-xp-track {
    grid-area: bar;
    width: 100%;
    min-width: 0;
  }

  body .faction-war-room .faction-count-grid {
    gap: 5px !important;
    padding: 6px !important;
  }

  body .faction-war-room .faction-count-tile {
    min-height: 62px !important;
    padding-inline: 4px !important;
  }
}

/* Patch 4.4.2: fix Discover header overlap and wasted space. Keep at EOF. */
body #view .discover-swipe-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
}

body #view .discover-swipe-head > div {
  display: grid !important;
  grid-template-columns: 5px minmax(0, 1fr) !important;
  grid-template-areas:
    "marker title"
    "marker note" !important;
  column-gap: 12px !important;
  row-gap: 5px !important;
  align-items: center !important;
  min-width: 0 !important;
}

body #view .discover-swipe-head > div > span {
  grid-area: marker !important;
  width: 5px !important;
  height: 54px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff2f5f, #8b5cf6) !important;
}

body #view .discover-swipe-head h1 {
  grid-area: title !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(2rem, 8.2vw, 3.15rem) !important;
  line-height: .9 !important;
}

body #view .discover-swipe-head p {
  grid-area: note !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(.78rem, 2.8vw, .98rem) !important;
  line-height: 1.22 !important;
  text-wrap: balance !important;
}

body #view .discover-swipe-head .chip {
  justify-self: end !important;
  align-self: end !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: clamp(.66rem, 2.5vw, .82rem) !important;
}

@media (max-width: 560px) {
  body #view .discover-swipe-shell {
    gap: 8px !important;
  }

  body #view .discover-swipe-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  body #view .discover-swipe-head .chip {
    justify-self: start !important;
    align-self: start !important;
  }

  body #view .discover-mode-toggle {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  body #view .discover-swipe-head h1 {
    font-size: clamp(1.86rem, 9.2vw, 2.35rem) !important;
  }

  body #view .discover-swipe-head p {
    font-size: .78rem !important;
  }

body #view .discover-swipe-head > div > span {
    height: 48px !important;
  }
}

/* Patch 4.4.4: fix mobile Home status card level panel clipping */
@media (max-width: 560px) {
  body .home-status-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body .home-status-copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .home-actions {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .home-primary-action,
  body .home-status-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .home-level-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-areas:
      "token label"
      "token bar"
      "token xp" !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
    text-align: left !important;
  }

  body .home-level-token {
    grid-area: token !important;
    width: 62px !important;
    height: 70px !important;
    justify-self: start !important;
  }

  body .home-level-token span {
    font-size: 2.25rem !important;
  }

  body .home-level-card b {
    grid-area: label !important;
    justify-self: start !important;
    max-width: 100% !important;
    font-size: .96rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body .home-level-card .home-xp-track {
    grid-area: bar !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .home-level-card small {
    grid-area: xp !important;
    justify-self: start !important;
    max-width: 100% !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  body .home-actions {
    grid-template-columns: 1fr !important;
  }

  body .home-level-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 5px 9px !important;
    padding-inline: 12px !important;
  }

  body .home-level-token {
    width: 54px !important;
    height: 62px !important;
  }
}

/* Patch 4.4.5: never squeeze Home level card into a narrow side column */
body .home-status-hero {
  grid-template-columns: 1fr !important;
}

body .home-level-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-areas:
    "token label"
    "token bar"
    "token xp" !important;
  align-items: center !important;
  gap: 6px 12px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
  text-align: left !important;
}

body .home-level-token {
  grid-area: token !important;
  justify-self: start !important;
}

body .home-level-card b {
  grid-area: label !important;
  justify-self: start !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body .home-level-card .home-xp-track {
  grid-area: bar !important;
  width: 100% !important;
  min-width: 0 !important;
}

body .home-level-card small {
  grid-area: xp !important;
  justify-self: start !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: .78rem !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}

/* Patch 4.4.6: keep the Cosmetics live preview readable inside the detail modal */
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview {
  min-height: 188px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-areas:
    "avatar identity"
    "summary summary" !important;
  align-items: center !important;
  gap: 12px 14px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview-bg,
body .profile-edit-detail[data-section="cosmetics"] .profile-effect-layer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-effect-layer {
  z-index: 1 !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview > :not(.profile-editor-preview-bg):not(.profile-effect-layer) {
  position: relative !important;
  z-index: 2 !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar.has-frame-asset {
  grid-area: avatar !important;
  width: 104px !important;
  max-width: 104px !important;
  justify-self: center !important;
  align-self: center !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id {
  grid-area: identity !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 6px !important;
  align-content: center !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id h2 {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(1.7rem, 9vw, 2.45rem) !important;
  line-height: .9 !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id p {
  margin: 0 !important;
  max-width: 28ch !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.84) !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-badge-row,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-badge-row span,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta span,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta b {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .58rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body .profile-edit-detail[data-section="cosmetics"] .profile-editor-xp {
  width: 100% !important;
  height: 6px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary {
  grid-area: summary !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary > div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary span {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.6) !important;
  text-transform: uppercase !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary b {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

@media (max-width: 380px) {
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar,
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar.has-frame-asset {
    width: 88px !important;
    max-width: 88px !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-26: Comms mobile usability pass.
   Keep the chat picker compact and give the active thread/composer the usable
   height on phones. This block intentionally sits last in the cascade. */
#view.comms {
  display: grid !important;
  grid-template-rows: minmax(154px, 30%) minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  gap: 12px !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

#view.comms .comms-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px !important;
  gap: 10px !important;
}

#view.comms .comms-friend-dock {
  display: none !important;
}

#view.comms .comms-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(142px, 188px) !important;
  align-items: center !important;
  gap: 10px !important;
}

#view.comms .comms-title h1 {
  font-size: clamp(2rem, 8vw, 2.65rem) !important;
  line-height: .92 !important;
}

#view.comms .comms-tabs {
  min-height: 46px !important;
  height: 46px !important;
}

#view.comms .comms-tabs button {
  min-height: 0 !important;
  height: 36px !important;
  font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
  display: grid !important;
  place-items: center !important;
}

#view.comms .comms-search {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
}

#view.comms .comms-search input {
  min-width: 0 !important;
  font-size: 16px !important;
}

#view.comms .comms-chat-list {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 2px 2px 0 !important;
}

#view.comms .comms-chat-item {
  min-height: 66px !important;
  padding: 10px !important;
  grid-template-columns: 48px minmax(0, 1fr) 10px !important;
  gap: 10px !important;
}

#view.comms .comms-chat-item img {
  width: 48px !important;
  height: 48px !important;
}

#view.comms .comms-thread-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px !important;
}

#view.comms .thread-head {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 0 0 10px !important;
}

#view.comms .thread-head > img {
  width: 50px !important;
  height: 50px !important;
}

#view.comms .thread-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#view.comms .thread-actions .ghost {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(.72rem, 3.2vw, .84rem) !important;
  line-height: 1 !important;
}

#view.comms .messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  margin: 8px 0 !important;
  padding: 10px !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

#view.comms .bubble {
  max-width: min(86%, 330px) !important;
  overflow-wrap: anywhere !important;
}

#view.comms .bubble p {
  margin: 0 !important;
}

#view.comms .composer {
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 78px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.78) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

#view.comms .composer input {
  min-width: 0 !important;
  width: 100% !important;
  height: 42px !important;
  font-size: 16px !important;
  padding: 0 8px !important;
}

#view.comms .composer button {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: .86rem !important;
  line-height: 1 !important;
}

@media (max-width: 420px) {
  #view.comms {
    grid-template-rows: minmax(142px, 28%) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #view.comms .comms-panel,
  #view.comms .comms-thread-card {
    padding: 12px !important;
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 158px) !important;
  }

  #view.comms .comms-title h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.15rem) !important;
  }

  #view.comms .comms-tabs {
    height: 42px !important;
    min-height: 42px !important;
  }

  #view.comms .comms-tabs button {
    height: 32px !important;
  }

  #view.comms .composer {
    grid-template-columns: 18px minmax(0, 1fr) 70px !important;
  }
}

@media (max-height: 720px) {
  #view.comms {
    grid-template-rows: minmax(124px, 25%) minmax(0, 1fr) !important;
  }

  #view.comms .comms-search {
    min-height: 40px !important;
    height: 40px !important;
  }

  #view.comms .comms-chat-item {
    min-height: 58px !important;
    padding: 8px !important;
  }

  #view.comms .comms-chat-item img {
    width: 42px !important;
    height: 42px !important;
  }

  #view.comms .thread-head > img {
    width: 42px !important;
    height: 42px !important;
  }

  #view.comms .thread-actions .ghost {
    min-height: 34px !important;
  }
}

/* Patch 4.5: admin-only Saturday sector result controls. */
body .faction-sector-admin {
  order: 2 !important;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 115, 4, .36);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 115, 4, .16), transparent 46%),
    linear-gradient(135deg, rgba(0, 0, 0, .82), rgba(16, 7, 3, .78));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 22px rgba(255,115,4,.09);
}

body .faction-sector-admin .profile-section-head {
  margin: 0;
  padding-bottom: 6px;
}

body .faction-sector-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 8px;
}

body .faction-sector-admin label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body .faction-sector-admin label span {
  color: rgba(235,239,255,.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body .faction-sector-admin select,
body .faction-sector-admin input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 9px 10px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(2,4,10,.82);
  outline: none;
}

body .faction-sector-admin select:focus,
body .faction-sector-admin input:focus {
  border-color: rgba(255,115,4,.72);
  box-shadow: 0 0 0 2px rgba(255,115,4,.16);
}

body .faction-sector-admin button {
  justify-self: end;
  width: min(100%, 220px);
  min-height: 40px;
}

@media (max-width: 560px) {
  body .faction-sector-admin-grid {
    grid-template-columns: 1fr;
  }

  body .faction-sector-admin button {
    justify-self: stretch;
    width: 100%;
  }
}

/* v0.44: two-player mutual GG cinematic */
body .gg-match-modal {
  z-index: 42;
  overflow: hidden;
  place-items: center;
  padding: max(env(safe-area-inset-top), 18px) 14px max(env(safe-area-inset-bottom), 18px);
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 47, 95, .35), transparent 24%),
    radial-gradient(circle at 84% 70%, rgba(47, 140, 255, .32), transparent 28%),
    linear-gradient(135deg, rgba(0, 0, 0, .88), rgba(4, 6, 18, .92));
}

body .gg-electric-bolt {
  position: absolute;
  left: -24%;
  top: 48%;
  width: 148%;
  height: clamp(22px, 7vw, 48px);
  transform: rotate(-22deg);
  transform-origin: center;
  clip-path: polygon(0 41%, 18% 41%, 22% 8%, 31% 58%, 43% 58%, 47% 22%, 56% 68%, 67% 68%, 71% 36%, 100% 36%, 100% 63%, 75% 63%, 70% 94%, 61% 48%, 50% 48%, 46% 84%, 37% 34%, 26% 34%, 22% 67%, 0 67%);
  background:
    linear-gradient(90deg, transparent, #2f8cff 10%, #e9f8ff 28%, #8b5cf6 50%, #ff2f5f 72%, #fff2f6 88%, transparent);
  box-shadow:
    0 0 28px rgba(47, 140, 255, .95),
    0 0 46px rgba(139, 92, 246, .75),
    0 0 62px rgba(255, 47, 95, .72);
  opacity: .95;
  pointer-events: none;
  animation: ggBoltFlash 1.1s ease-in-out infinite;
}

body .gg-spark {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .72), rgba(47, 140, 255, .26) 24%, transparent 62%);
  filter: blur(2px);
  opacity: .42;
  animation: ggSparkPulse 1.6s ease-in-out infinite;
}

body .gg-spark-a {
  left: -44px;
  top: 18%;
}

body .gg-spark-b {
  right: -48px;
  bottom: 14%;
  background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 47, 95, .28) 25%, transparent 62%);
  animation-delay: -.45s;
}

body .gg-match-card {
  width: min(100%, 500px);
  padding: clamp(18px, 5vw, 28px);
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 47, 95, .20), rgba(139, 92, 246, .11) 44%, rgba(47, 140, 255, .18)),
    rgba(3, 5, 14, .92);
  box-shadow:
    0 0 0 1px rgba(255, 47, 95, .38),
    0 0 42px rgba(255, 47, 95, .34),
    0 0 72px rgba(47, 140, 255, .18);
  backdrop-filter: blur(18px);
}

body .gg-match-card::before,
body .gg-match-card::after {
  z-index: 0;
}

body .gg-match-versus {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: clamp(8px, 2.8vw, 16px);
  width: 100%;
  margin: 4px 0;
}

body .gg-match-player {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .04);
}

body .gg-match-avatar-wrap {
  width: clamp(82px, 23vw, 126px);
  aspect-ratio: 1;
  padding: 3px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6, #2f8cff);
  box-shadow:
    0 0 22px rgba(255, 47, 95, .55),
    0 0 28px rgba(47, 140, 255, .35);
}

body .gg-match-avatar-wrap img,
body .gg-match-versus .gg-match-avatar-wrap img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  background: #080a14;
  box-shadow: none;
}

body .gg-match-player span {
  color: #00ff9c;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body .gg-match-player b {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: "Fragmatch Title", "Fragmatch Condensed", Impact, sans-serif;
  font-size: clamp(1rem, 4.8vw, 1.5rem);
  line-height: .96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .gg-match-player em {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .gg-match-core,
body .gg-match-versus span.gg-match-core {
  display: grid;
  place-items: center;
  width: clamp(58px, 15vw, 88px);
  min-width: 0;
  min-height: clamp(48px, 12vw, 72px);
  padding: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff2f5f, #8b5cf6 54%, #2f8cff);
  box-shadow:
    0 0 30px rgba(255, 47, 95, .84),
    0 0 38px rgba(47, 140, 255, .56);
  font-family: "Fragmatch Title", "Fragmatch Condensed", Impact, sans-serif;
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  line-height: .9;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .4);
  transform: rotate(-5deg);
  animation: ggCorePunch 1.28s ease-in-out infinite;
}

body .gg-match-actions {
  flex-wrap: wrap;
  justify-content: center;
}

body .gg-match-actions button,
body .gg-match-close {
  min-height: 42px;
}

@keyframes ggBoltFlash {
  0%,
  100% {
    opacity: .72;
    filter: saturate(1.1) brightness(1);
  }

  45% {
    opacity: 1;
    filter: saturate(1.65) brightness(1.35);
  }

  58% {
    opacity: .82;
  }
}

@keyframes ggSparkPulse {
  0%,
  100% {
    opacity: .28;
    transform: scale(.86);
  }

  50% {
    opacity: .58;
    transform: scale(1.12);
  }
}

@keyframes ggCorePunch {
  0%,
  100% {
    transform: rotate(-5deg) scale(1);
  }

  48% {
    transform: rotate(-5deg) scale(1.08);
  }
}

@media (max-width: 420px) {
  body .gg-match-card {
    padding: 16px 12px;
    border-radius: 22px;
  }

  body .gg-match-versus {
    gap: 7px;
  }

  body .gg-match-player {
    padding: 8px 5px;
    border-radius: 16px;
  }

  body .gg-match-avatar-wrap {
    border-radius: 18px;
  }

  body .gg-match-avatar-wrap img,
  body .gg-match-versus .gg-match-avatar-wrap img {
    border-radius: 15px;
  }

  body .gg-match-player em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .gg-electric-bolt,
  body .gg-spark,
  body .gg-match-core {
    animation: none;
  }
}

/* Patch 0.45: mobile-first Comms rewrite.
   Chat selection is compact and horizontal; the thread owns the screen. */
#view.comms {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

#view.comms .comms-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 9px !important;
  max-height: clamp(184px, 34vh, 286px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,47,95,.18), transparent 200px),
    linear-gradient(180deg, rgba(3,4,11,.88), rgba(3,4,11,.72)) !important;
}

#view.comms .comms-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 176px) !important;
  gap: 8px !important;
  align-items: center !important;
}

#view.comms .comms-title {
  min-width: 0 !important;
}

#view.comms .comms-title h1 {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
  line-height: .9 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-tabs {
  min-width: 0 !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 3px !important;
  border-radius: 12px !important;
}

#view.comms .comms-tabs button {
  display: grid !important;
  place-items: center !important;
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  font-size: clamp(.82rem, 3.6vw, 1rem) !important;
  line-height: 1 !important;
}

#view.comms .comms-search {
  height: 42px !important;
  min-height: 42px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
}

#view.comms .comms-search i,
#view.comms .composer > span {
  width: 20px !important;
  height: 20px !important;
}

#view.comms .comms-search input {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 16px !important;
}

#view.comms .comms-friend-dock {
  display: grid !important;
  gap: 7px !important;
  min-height: 0 !important;
}

#view.comms .comms-friend-dock-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#view.comms .comms-friend-dock-head b {
  color: rgba(255,255,255,.82) !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#view.comms .comms-friend-dock-head button {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: .72rem !important;
}

#view.comms .comms-friend-strip,
#view.comms .comms-chat-list {
  display: flex !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 2px 4px !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: thin !important;
}

#view.comms .comms-friend-contact {
  flex: 0 0 132px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 7px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  scroll-snap-align: start !important;
}

#view.comms .comms-friend-contact img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  object-fit: cover !important;
}

#view.comms .comms-friend-contact span,
#view.comms .comms-chat-item span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#view.comms .comms-friend-contact b,
#view.comms .comms-friend-contact em,
#view.comms .comms-chat-item b,
#view.comms .comms-chat-item em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-friend-contact b {
  font-size: .84rem !important;
}

#view.comms .comms-friend-contact em {
  color: rgba(255,255,255,.58) !important;
  font-size: .72rem !important;
  font-style: normal !important;
}

#view.comms .comms-chat-item {
  position: relative !important;
  flex: 0 0 min(72vw, 238px) !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(7,9,18,.84) !important;
  color: #fff !important;
  scroll-snap-align: start !important;
}

#view.comms .comms-chat-item[hidden] {
  display: none !important;
}

#view.comms .comms-chat-item.active {
  border-color: rgba(255,47,95,.9) !important;
  background:
    linear-gradient(135deg, rgba(255,47,95,.22), rgba(139,92,246,.16)),
    rgba(7,9,18,.92) !important;
  box-shadow: 0 0 22px rgba(255,47,95,.22), inset 0 0 0 1px rgba(139,92,246,.2) !important;
}

#view.comms .comms-chat-item img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,47,95,.38) !important;
}

#view.comms .comms-chat-item b {
  color: #fff !important;
  font-size: .98rem !important;
  line-height: 1.05 !important;
}

#view.comms .comms-chat-item em {
  color: rgba(255,255,255,.6) !important;
  font-size: .78rem !important;
  font-style: normal !important;
}

#view.comms .comms-chat-item small {
  align-self: start !important;
  max-width: 62px !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.5) !important;
  font-size: .64rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-chat-item > i {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 8px !important;
  height: 8px !important;
}

#view.comms .comms-thread-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(139,92,246,.15), transparent 240px),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.9)) !important;
}

#view.comms .thread-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 0 0 9px !important;
  border-bottom: 1px solid rgba(255,47,95,.34) !important;
}

#view.comms .thread-head > img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
}

#view.comms .thread-head > div {
  min-width: 0 !important;
}

#view.comms .thread-head b {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .thread-head p {
  margin: 2px 0 0 !important;
  font-size: .84rem !important;
}

#view.comms .thread-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#view.comms .thread-actions .ghost {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: .76rem !important;
  line-height: 1 !important;
}

#view.comms .messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 8px 0 !important;
  padding: 10px 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#view.comms .date-divider {
  width: 100% !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .72rem !important;
  text-align: center !important;
}

#view.comms .bubble {
  max-width: min(84%, 360px) !important;
  padding: 12px 13px !important;
  border-radius: 15px 15px 15px 4px !important;
  overflow-wrap: anywhere !important;
}

#view.comms .bubble.mine {
  margin-left: auto !important;
  border-radius: 15px 15px 4px 15px !important;
}

#view.comms .bubble:not(.mine) {
  margin-right: auto !important;
}

#view.comms .bubble p {
  margin: 0 !important;
  font-size: .96rem !important;
  line-height: 1.25 !important;
}

#view.comms .bubble small {
  font-size: .72rem !important;
}

#view.comms .composer {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) minmax(64px, 80px) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.82) !important;
}

#view.comms .composer input {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 8px !important;
  font-size: 16px !important;
}

#view.comms .composer button {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

@media (max-width: 430px) {
  #view.comms {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #view.comms .comms-panel {
    max-height: clamp(172px, 32vh, 248px) !important;
    padding: 10px !important;
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) 132px !important;
  }

  #view.comms .comms-chat-item {
    flex-basis: 158px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 58px !important;
  }

  #view.comms .comms-chat-item img {
    width: 40px !important;
    height: 40px !important;
  }

  #view.comms .comms-chat-item small {
    display: none !important;
  }

  #view.comms .thread-head {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  #view.comms .thread-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-height: 700px) {
  #view.comms .comms-panel {
    max-height: 178px !important;
  }

  #view.comms .comms-search {
    height: 38px !important;
    min-height: 38px !important;
  }

  #view.comms .messages {
    margin: 6px 0 !important;
    padding-block: 7px !important;
  }
}

/* Patch 0.45: Home quick-action carousel keeps normal clicks while supporting horizontal drag. */
body .home-feature-grid {
  touch-action: pan-y !important;
}

/* Patch 0.46: Direct Comms cleanup.
   Direct chats should read like a compact contact list, not nested horizontal rails. */
#view.comms.comms-direct {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#view.comms.comms-direct .comms-panel {
  max-height: clamp(252px, 42vh, 360px) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#view.comms.comms-direct .comms-friend-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 104px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 1px 2px 4px !important;
  scrollbar-width: none !important;
}

#view.comms.comms-direct .comms-friend-strip::-webkit-scrollbar,
#view.comms.comms-direct .comms-chat-list::-webkit-scrollbar,
#view.comms.comms-squad .comms-chat-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#view.comms.comms-direct .comms-friend-contact {
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  min-height: 48px !important;
}

#view.comms.comms-direct .comms-chat-list,
#view.comms.comms-squad .comms-chat-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-height: 132px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 1px 2px 4px !important;
  scrollbar-width: thin !important;
}

#view.comms .comms-chat-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
}

#view.comms.comms-direct .comms-chat-item {
  min-height: 58px !important;
  padding: 7px 9px !important;
}

#view.comms.comms-direct .comms-chat-item small {
  max-width: 54px !important;
  justify-self: end !important;
}

@media (max-width: 430px) {
  #view.comms.comms-direct .comms-panel {
    max-height: clamp(238px, 40vh, 322px) !important;
  }

  #view.comms.comms-direct .comms-friend-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 100px !important;
  }

  #view.comms.comms-direct .comms-chat-list,
  #view.comms.comms-squad .comms-chat-list {
    max-height: 118px !important;
  }

  #view.comms .comms-chat-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
}

@media (max-height: 740px) {
  #view.comms.comms-direct .comms-panel {
    max-height: 230px !important;
  }

  #view.comms.comms-direct .comms-friend-strip {
    max-height: 54px !important;
    overflow-y: hidden !important;
  }

  #view.comms.comms-direct .comms-chat-list,
  #view.comms.comms-squad .comms-chat-list {
    max-height: 84px !important;
  }
}

/* Patch 0.47: slim Direct Comms for phone-height screens.
   Direct messages should prioritize the selected conversation and input. */
#view.comms.comms-direct .comms-friend-dock {
  min-height: 0 !important;
}

@media (max-width: 430px) {
  #view.comms.comms-direct {
    gap: 8px !important;
  }

  #view.comms.comms-direct .comms-panel {
    max-height: 198px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 8px !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  #view.comms.comms-direct .comms-head {
    gap: 8px !important;
  }

  #view.comms.comms-direct .comms-title h1 {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
    line-height: .92 !important;
  }

  #view.comms.comms-direct .comms-tabs {
    width: auto !important;
    min-width: 138px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  #view.comms.comms-direct .comms-tabs button {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: .78rem !important;
  }

  #view.comms.comms-direct .comms-search {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  #view.comms.comms-direct .comms-search input {
    height: 34px !important;
    font-size: .9rem !important;
  }

  #view.comms.comms-direct .comms-friend-dock {
    display: none !important;
  }

  #view.comms.comms-direct .comms-chat-list {
    max-height: 86px !important;
    gap: 6px !important;
    padding: 0 1px 2px !important;
  }

  #view.comms.comms-direct .comms-chat-item {
    min-height: 54px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
  }

  #view.comms.comms-direct .comms-chat-item img {
    width: 38px !important;
    height: 38px !important;
  }

  #view.comms.comms-direct .comms-chat-item b {
    font-size: .92rem !important;
  }

  #view.comms.comms-direct .comms-chat-item em,
  #view.comms.comms-direct .comms-chat-item small {
    font-size: .7rem !important;
  }

  #view.comms.comms-direct .comms-thread-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #view.comms.comms-direct .thread-head {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 7px !important;
  }

  #view.comms.comms-direct .thread-head > img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  #view.comms.comms-direct .thread-head b {
    font-size: .98rem !important;
  }

  #view.comms.comms-direct .thread-head p {
    font-size: .72rem !important;
  }

  #view.comms.comms-direct .messages {
    gap: 7px !important;
    margin: 6px 0 !important;
    padding: 7px 3px !important;
  }

  #view.comms.comms-direct .bubble {
    max-width: 82% !important;
    padding: 8px 10px !important;
    border-radius: 13px 13px 13px 4px !important;
  }

  #view.comms.comms-direct .bubble.mine {
    border-radius: 13px 13px 4px 13px !important;
  }

  #view.comms.comms-direct .bubble p {
    font-size: .9rem !important;
    line-height: 1.18 !important;
  }

  #view.comms.comms-direct .bubble small {
    font-size: .66rem !important;
  }

  #view.comms.comms-direct .composer {
    grid-template-columns: 18px minmax(0, 1fr) minmax(58px, 70px) !important;
    min-height: 48px !important;
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  #view.comms.comms-direct .composer input {
    height: 34px !important;
    font-size: 15px !important;
    padding: 0 6px !important;
  }

  #view.comms.comms-direct .composer button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: .74rem !important;
  }
}

@media (max-width: 430px) and (max-height: 700px) {
  #view.comms.comms-direct .comms-panel {
    max-height: 154px !important;
    padding: 9px !important;
    gap: 6px !important;
    grid-template-rows: 34px 34px minmax(0, 48px) !important;
  }

  #view.comms.comms-direct .comms-chat-list {
    max-height: 48px !important;
  }

  #view.comms.comms-direct .comms-chat-item {
    min-height: 44px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    padding: 5px 7px !important;
  }

  #view.comms.comms-direct .comms-chat-item img {
    width: 34px !important;
    height: 34px !important;
  }

  #view.comms.comms-direct .comms-title h1 {
    font-size: 1.35rem !important;
  }

  #view.comms.comms-direct .comms-tabs {
    height: 34px !important;
    min-width: 126px !important;
  }

  #view.comms.comms-direct .comms-tabs button {
    min-height: 28px !important;
    font-size: .72rem !important;
    padding: 0 9px !important;
  }

  #view.comms.comms-direct .comms-search {
    min-height: 34px !important;
  }

  #view.comms.comms-direct .comms-search input {
    height: 30px !important;
    font-size: .84rem !important;
  }

  #view.comms.comms-direct .thread-head {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  #view.comms.comms-direct .thread-head > img {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Patch 0.50: clean mobile Squad Hub cards.
   Prevents long squad names, chips, and owner actions from crushing each other. */
.squad-command-card {
  max-width: 100%;
  overflow: hidden;
}

.squad-card-main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.squad-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255, 47, 95, .42);
  box-shadow: 0 0 18px rgba(255, 47, 95, .12);
  background: rgba(255,255,255,.05);
}

.squad-card-copy {
  min-width: 0;
}

.squad-command-card .squad-card-copy h3 {
  margin: 0 0 4px;
  max-width: 100%;
  font-size: clamp(1.12rem, 4.2vw, 1.35rem);
  line-height: 1.03;
  overflow-wrap: anywhere;
}

.squad-card-meta {
  margin: 0 0 8px !important;
  font-size: .9rem;
  line-height: 1.18;
}

.squad-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
}

.squad-card-chips .chip {
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: .72rem;
  line-height: 1.05;
}

.squad-card-main .manage {
  width: 42px;
  height: 42px;
  align-self: center;
  justify-self: end;
  flex: 0 0 auto;
}

.squad-card-brief {
  margin: 12px 0 0 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.38;
}

.squad-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.squad-card-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1;
  text-align: center;
}

@media (max-width: 430px) {
  .squad-command {
    gap: 10px;
    padding: 10px 10px calc(var(--safe-bottom) + 12px);
  }

  .squad-command-head,
  .squad-tabs,
  .squad-grid {
    padding: 10px;
  }

  .squad-command-card {
    padding: 12px;
    border-radius: 16px;
  }

  .squad-card-main {
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    gap: 10px;
  }

  .squad-card-photo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .squad-command-card .squad-card-copy h3 {
    font-size: clamp(1.05rem, 5.6vw, 1.25rem);
  }

  .squad-card-meta {
    font-size: .8rem;
  }

  .squad-card-chips .chip {
    min-height: 26px;
    padding: 5px 8px;
    font-size: .66rem;
  }

  .squad-card-main .manage {
    width: 40px;
    height: 40px;
  }

  .squad-card-brief {
    -webkit-line-clamp: 3;
    font-size: .88rem;
  }

  .squad-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .squad-card-actions button {
    min-height: 38px;
    font-size: .74rem;
  }
}

@media (max-width: 360px) {
  .squad-card-main {
    grid-template-columns: 56px minmax(0, 1fr) 36px;
    gap: 8px;
  }

  .squad-card-photo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  .squad-card-main .manage {
    width: 36px;
    height: 36px;
  }

  .squad-card-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Patch 0.49: compact Discover for short mobile phones.
   Keeps swipe controls visible above the bottom nav at 390px-wide short heights. */
@media (max-width: 430px) and (max-height: 700px) {
  body #view .discover-swipe-shell {
    gap: 5px !important;
    padding: 8px 8px 4px !important;
    min-height: 0 !important;
  }

  body #view .discover-swipe-head {
    min-height: 88px !important;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  body #view .discover-swipe-head > div {
    column-gap: 9px !important;
    row-gap: 3px !important;
  }

  body #view .discover-swipe-head > div > span {
    width: 4px !important;
    height: 40px !important;
  }

  body #view .discover-swipe-head h1 {
    font-size: clamp(1.45rem, 7.6vw, 1.88rem) !important;
    line-height: .92 !important;
    letter-spacing: 0 !important;
  }

  body #view .discover-swipe-head p {
    font-size: .72rem !important;
    line-height: 1.12 !important;
  }

  body #view .discover-swipe-head .chip {
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: .62rem !important;
  }

  body #view .discover-mode-toggle {
    min-height: 38px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  body #view .discover-mode-toggle button {
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
  }

  body #view .swipe-stage {
    min-height: 0 !important;
  }

  body #view .discover-empty-card {
    min-height: 206px !important;
    max-height: 230px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body #view .discover-empty-card span {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    margin-bottom: 5px !important;
  }

  body #view .discover-empty-card h2 {
    font-size: clamp(1.35rem, 7.2vw, 1.68rem) !important;
    line-height: .98 !important;
    max-width: 11ch !important;
  }

  body #view .discover-empty-card p {
    max-width: 24ch !important;
    font-size: .83rem !important;
    line-height: 1.24 !important;
    margin: 8px auto 0 !important;
  }

  body #view .discover-empty-actions {
    display: none !important;
  }

  body #view .discover-player-card {
    min-height: 292px !important;
    max-height: 318px !important;
    overflow: hidden !important;
  }

  body #view .discover-player-card .player-art {
    min-height: 140px !important;
  }

  body #view .discover-player-heading h2 {
    font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body #view .discover-player-bio,
  body #view .discover-player-facts,
  body #view .discover-player-tags {
    display: none !important;
  }

  body #view .discover-card-tools {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  body #view .discover-card-tools button {
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: .68rem !important;
    border-radius: 10px !important;
  }

  body #view .swipe-actions {
    gap: 7px !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body #view .swipe-actions button {
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
  }
}

/* Patch 0.51: tighter Squad cards for short/narrow mobile screens. */
@media (max-width: 430px) {
  .squad-command-card {
    padding: 10px !important;
  }

  .squad-card-main {
    align-items: start !important;
  }

  .squad-command-card .squad-card-copy h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: .98 !important;
    margin: 0 0 4px !important;
  }

  .squad-card-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding-bottom: 1px !important;
  }

  .squad-card-chips::-webkit-scrollbar {
    display: none !important;
  }

  .squad-card-chips .chip {
    flex: 0 0 auto !important;
    max-width: 11rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .squad-card-brief {
    -webkit-line-clamp: 2 !important;
    margin: 8px 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }

  .squad-card-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  .squad-card-actions button {
    min-height: 36px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    font-size: .64rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
}

/* Patch 0.52b: final Comms density override.
   This sits at EOF so older Comms rules cannot expand the mobile layout again. */
#view.comms {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 8px 10px 10px !important;
}

#view.comms .comms-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  max-height: 150px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

#view.comms .comms-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 134px !important;
  gap: 8px !important;
  align-items: center !important;
}

#view.comms .comms-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#view.comms .comms-title > span {
  width: 4px !important;
  min-width: 4px !important;
  height: 28px !important;
  border-radius: 999px !important;
}

#view.comms .comms-title h1 {
  margin: 0 !important;
  overflow: hidden !important;
  font-size: clamp(1.45rem, 7vw, 2rem) !important;
  line-height: .95 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-tabs {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 12px !important;
}

#view.comms .comms-tabs button {
  display: grid !important;
  place-items: center !important;
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

#view.comms .comms-search {
  height: 38px !important;
  min-height: 38px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
}

#view.comms .comms-search i {
  width: 18px !important;
  height: 18px !important;
}

#view.comms .comms-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  font-size: 15px !important;
}

#view.comms .comms-friend-dock {
  display: none !important;
}

#view.comms .comms-chat-list {
  display: flex !important;
  gap: 7px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 1px 2px !important;
  scrollbar-width: none !important;
}

#view.comms .comms-chat-list::-webkit-scrollbar {
  display: none !important;
}

#view.comms .comms-chat-item {
  position: relative !important;
  flex: 0 0 min(78vw, 270px) !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#view.comms .comms-chat-item img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

#view.comms .comms-chat-item span,
#view.comms .thread-head > div {
  min-width: 0 !important;
}

#view.comms .comms-chat-item b,
#view.comms .comms-chat-item em,
#view.comms .thread-head b,
#view.comms .thread-head p {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view.comms .comms-chat-item b {
  font-size: .86rem !important;
  line-height: 1.05 !important;
}

#view.comms .comms-chat-item em {
  font-size: .68rem !important;
  font-style: normal !important;
  opacity: .68 !important;
}

#view.comms .comms-chat-item small {
  display: none !important;
}

#view.comms .comms-chat-item > i {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 7px !important;
  height: 7px !important;
}

#view.comms .comms-thread-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

#view.comms .thread-head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(255, 47, 95, .26) !important;
}

#view.comms .thread-head > img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  object-fit: cover !important;
}

#view.comms .thread-head b {
  font-size: .95rem !important;
  line-height: 1.05 !important;
}

#view.comms .thread-head p {
  margin: 2px 0 0 !important;
  font-size: .72rem !important;
}

#view.comms .thread-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

#view.comms .thread-actions .ghost {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
  line-height: 1 !important;
}

#view.comms .messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 7px 0 !important;
  padding: 6px 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#view.comms .bubble {
  max-width: 80% !important;
  padding: 9px 11px !important;
  border-radius: 13px 13px 13px 4px !important;
  overflow-wrap: anywhere !important;
}

#view.comms .bubble.mine {
  margin-left: auto !important;
  border-radius: 13px 13px 4px 13px !important;
}

#view.comms .bubble p {
  margin: 0 !important;
  font-size: .88rem !important;
  line-height: 1.2 !important;
}

#view.comms .bubble small,
#view.comms .date-divider {
  font-size: .64rem !important;
}

#view.comms .composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 70px !important;
  gap: 7px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 14px !important;
}

#view.comms .composer > span {
  display: none !important;
}

#view.comms .composer input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 8px !important;
  font-size: 15px !important;
}

#view.comms .composer button {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #view.comms .comms-panel {
    max-height: 132px !important;
    gap: 6px !important;
  }

  #view.comms .comms-search {
    display: none !important;
  }

  #view.comms .comms-title h1 {
    font-size: 1.35rem !important;
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) 122px !important;
  }

  #view.comms .comms-tabs {
    height: 34px !important;
    min-height: 34px !important;
  }

  #view.comms .comms-tabs button {
    height: 28px !important;
    font-size: .68rem !important;
  }

  #view.comms .comms-thread-card {
    padding: 8px !important;
  }
}

/* Patch 0.53: simplify Comms for mobile.
   One selected chat should not render twice; the thread gets the screen. */
#view.comms {
  gap: 7px !important;
  padding: 7px 9px 9px !important;
}

#view.comms .comms-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  max-height: 104px !important;
  padding: 9px !important;
  gap: 7px !important;
}

#view.comms .comms-panel.single-chat {
  grid-template-rows: auto !important;
  max-height: 54px !important;
  min-height: 54px !important;
}

#view.comms .comms-search {
  display: none !important;
}

#view.comms .comms-head {
  grid-template-columns: minmax(0, 1fr) 132px !important;
}

#view.comms .comms-title {
  gap: 8px !important;
}

#view.comms .comms-title > span {
  height: 30px !important;
}

#view.comms .comms-title h1 {
  font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
  letter-spacing: 0 !important;
}

#view.comms .comms-tabs {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 13px !important;
}

#view.comms .comms-tabs button {
  height: 30px !important;
  font-size: .74rem !important;
}

#view.comms .comms-panel.single-chat .comms-chat-list {
  display: none !important;
}

#view.comms .comms-chat-list {
  min-height: 38px !important;
  max-height: 38px !important;
  gap: 6px !important;
}

#view.comms .comms-chat-item {
  flex-basis: min(74vw, 238px) !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 4px 8px !important;
  border-radius: 11px !important;
}

#view.comms .comms-chat-item img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

#view.comms .comms-chat-item b {
  font-size: .78rem !important;
}

#view.comms .comms-chat-item em {
  display: none !important;
}

#view.comms .comms-thread-card {
  padding: 9px !important;
  border-radius: 15px !important;
}

#view.comms .thread-head {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding-bottom: 7px !important;
}

#view.comms .thread-head > img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
}

#view.comms .thread-head b {
  font-size: .88rem !important;
}

#view.comms .thread-head p {
  display: none !important;
}

#view.comms .thread-actions {
  gap: 5px !important;
  margin-top: 3px !important;
}

#view.comms .thread-actions .ghost {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  font-size: .64rem !important;
}

#view.comms .messages {
  gap: 7px !important;
  margin: 6px 0 !important;
  padding: 5px 1px !important;
}

#view.comms .bubble {
  max-width: 82% !important;
  padding: 8px 10px !important;
}

#view.comms .bubble p {
  font-size: .84rem !important;
}

#view.comms .composer {
  grid-template-columns: minmax(0, 1fr) 64px !important;
  min-height: 42px !important;
  padding: 5px !important;
  gap: 6px !important;
  border-radius: 13px !important;
}

#view.comms .composer input,
#view.comms .composer button {
  height: 32px !important;
  min-height: 32px !important;
}

#view.comms .composer button {
  font-size: .68rem !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #view.comms {
    gap: 6px !important;
    padding: 6px 8px 8px !important;
  }

  #view.comms .comms-panel {
    max-height: 94px !important;
    padding: 8px !important;
  }

  #view.comms .comms-panel.single-chat {
    max-height: 50px !important;
    min-height: 50px !important;
  }

  #view.comms .comms-head {
    grid-template-columns: minmax(0, 1fr) 118px !important;
  }

  #view.comms .comms-title h1 {
    font-size: 1.25rem !important;
  }

  #view.comms .comms-title > span {
    height: 25px !important;
  }

  #view.comms .comms-tabs {
    height: 32px !important;
    min-height: 32px !important;
  }

  #view.comms .comms-tabs button {
    height: 26px !important;
    font-size: .64rem !important;
  }

  #view.comms .thread-actions .ghost {
    height: 26px !important;
    min-height: 26px !important;
    font-size: .58rem !important;
  }
}

/* Patch 0.54: Direct Comms final mobile containment.
   Older direct-only rules used a 3-column composer and oversized selector panel. */
#view.comms.comms-direct .comms-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  max-height: 104px !important;
  min-height: 0 !important;
}

#view.comms.comms-direct .comms-search,
#view.comms.comms-direct .comms-friend-dock {
  display: none !important;
}

#view.comms.comms-direct .comms-chat-list {
  min-height: 38px !important;
  max-height: 38px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 1px 2px !important;
  scrollbar-width: none !important;
}

#view.comms.comms-direct .comms-chat-item {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 4px 8px !important;
}

#view.comms.comms-direct .comms-chat-item img {
  width: 30px !important;
  height: 30px !important;
}

#view.comms.comms-direct .comms-chat-item em,
#view.comms.comms-direct .comms-chat-item small {
  display: none !important;
}

#view.comms.comms-direct .composer {
  grid-template-columns: minmax(0, 1fr) 68px !important;
  min-height: 42px !important;
  padding: 5px !important;
}

#view.comms.comms-direct .composer > span {
  display: none !important;
}

#view.comms.comms-direct .composer input {
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 8px !important;
}

#view.comms.comms-direct .composer button {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 6px !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #view.comms.comms-direct .comms-panel {
    max-height: 94px !important;
  }

  #view.comms.comms-direct .comms-chat-list {
    max-height: 36px !important;
    min-height: 36px !important;
  }

  #view.comms.comms-direct .comms-chat-item {
    min-height: 36px !important;
    max-height: 36px !important;
  }
}

/* Patch 0.55: smaller translucent Comms bubbles. */
#view.comms .bubble {
  max-width: 72% !important;
  padding: 6px 8px !important;
  border-radius: 12px 12px 12px 4px !important;
  background: rgba(18, 20, 30, .58) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(6px) !important;
}

#view.comms.comms-direct .bubble,
#view.comms.comms-squad .bubble {
  max-width: 72% !important;
  padding: 6px 8px !important;
}

#view.comms .bubble.mine {
  border-radius: 12px 12px 4px 12px !important;
  background: linear-gradient(135deg, rgba(255, 47, 95, .70), rgba(139, 92, 246, .58)) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  box-shadow: 0 8px 24px rgba(255, 47, 95, .16) !important;
}

#view.comms .bubble p {
  font-size: .76rem !important;
  line-height: 1.18 !important;
}

#view.comms.comms-direct .bubble p,
#view.comms.comms-squad .bubble p {
  font-size: .76rem !important;
  line-height: 1.18 !important;
}

#view.comms .bubble small {
  margin-top: 3px !important;
  font-size: .58rem !important;
  opacity: .72 !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #view.comms .bubble {
    max-width: 70% !important;
    padding: 5px 8px !important;
  }

  #view.comms.comms-direct .bubble,
  #view.comms.comms-squad .bubble {
    max-width: 70% !important;
    padding: 5px 8px !important;
  }

  #view.comms .bubble p {
    font-size: .74rem !important;
  }

  #view.comms.comms-direct .bubble p,
  #view.comms.comms-squad .bubble p {
    font-size: .74rem !important;
  }
}

/* Patch 0.56: mobile-ready Edit Profile overhaul.
   This final layer intentionally overrides older profile editor experiments. */
body .profile-editor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding:
    max(10px, env(safe-area-inset-top))
    8px
    calc(82px + env(safe-area-inset-bottom))
    8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  background: rgba(3, 5, 12, .82) !important;
  backdrop-filter: blur(10px) !important;
}

body .profile-editor-modal .modal-card.profile-edit-hub,
body .profile-editor-modal .modal-card.profile-edit-detail {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 14px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 47, 95, .17), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, .2), transparent 30%),
    linear-gradient(180deg, rgba(13, 16, 32, .98), rgba(5, 7, 18, .98)) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55) !important;
}

body .profile-edit-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
}

body .profile-edit-hub .profile-edit-topbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body .profile-edit-topbar > div {
  min-width: 0 !important;
}

body .profile-edit-topbar span {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: .6rem !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  color: #ff2f5f !important;
}

body .profile-edit-topbar h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 9vw, 3rem) !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .profile-edit-topbar .ghost,
body .profile-editor-modal button.ghost {
  min-width: 58px !important;
  width: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 11px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

body .profile-edit-hub .profile-editor-preview,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 94px minmax(0, 1fr) !important;
  grid-template-areas: "avatar identity" !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 128px !important;
  height: auto !important;
  margin: 0 0 10px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(8, 10, 22, .62)),
    var(--takeover-bg, none) center / cover no-repeat !important;
}

body .profile-edit-hub .profile-editor-preview::before,
body .profile-edit-hub .profile-editor-preview::after,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview::before,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview::after {
  opacity: .24 !important;
  pointer-events: none !important;
}

body .profile-edit-hub .profile-editor-preview-bg,
body .profile-edit-hub .profile-effect-layer,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview-bg,
body .profile-edit-detail[data-section="cosmetics"] .profile-effect-layer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body .profile-edit-hub .profile-editor-avatar,
body .profile-edit-hub .profile-editor-avatar.has-frame-asset,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar.has-frame-asset {
  grid-area: avatar !important;
  position: relative !important;
  inset: auto !important;
  width: 86px !important;
  max-width: 86px !important;
  height: 100px !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 3 !important;
}

body .profile-edit-hub .profile-editor-avatar-mask,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar-mask {
  inset: var(--frame-safe-top, 13%) var(--frame-safe-right, 13%) var(--frame-safe-bottom, 13%) var(--frame-safe-left, 13%) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

body .profile-edit-hub .profile-editor-frame-asset,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-frame-asset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body .profile-edit-hub .profile-editor-id,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id {
  grid-area: identity !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  z-index: 3 !important;
}

body .profile-edit-hub .profile-editor-badge-row,
body .profile-edit-hub .profile-editor-meta,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-badge-row,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body .profile-edit-hub .profile-editor-badge-row span,
body .profile-edit-hub .profile-editor-meta b,
body .profile-edit-hub .profile-editor-meta span,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-badge-row span,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta b,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta span {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 21px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border-radius: 7px !important;
  font-size: .55rem !important;
  line-height: 1 !important;
  background: rgba(0, 0, 0, .45) !important;
}

body .profile-edit-hub .profile-editor-id h2,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id h2 {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
  line-height: .88 !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .95) !important;
}

body .profile-edit-hub .profile-editor-id p,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-id p {
  display: none !important;
}

body .profile-edit-hub .profile-editor-xp,
body .profile-edit-detail[data-section="cosmetics"] .profile-editor-xp {
  width: 100% !important;
  height: 5px !important;
  margin: 2px 0 0 !important;
}

body .profile-edit-hub .cosmetic-loadout-summary,
body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-summary {
  display: none !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip > div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 8px !important;
  border-radius: 11px !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip span,
body .profile-edit-hub > .profile-edit-loadout-strip b {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip span {
  font-size: .5rem !important;
}

body .profile-edit-hub > .profile-edit-loadout-strip b {
  margin-top: 4px !important;
  font-size: .74rem !important;
}

body .profile-edit-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body .profile-edit-tile {
  min-width: 0 !important;
  min-height: 104px !important;
  height: auto !important;
  padding: 11px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 5px !important;
  border-radius: 14px !important;
}

body .profile-edit-tile span {
  width: 30px !important;
  height: 30px !important;
  font-size: .72rem !important;
}

body .profile-edit-tile b,
body .profile-edit-tile em,
body .profile-edit-tile small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .profile-edit-tile b {
  font-size: .9rem !important;
  line-height: 1.05 !important;
}

body .profile-edit-tile em,
body .profile-edit-tile small {
  font-size: .68rem !important;
  line-height: 1.18 !important;
}

body .profile-edit-form .field {
  margin: 0 0 12px !important;
}

body .profile-edit-form .field label,
body .profile-edit-form label {
  font-size: .66rem !important;
  letter-spacing: .08em !important;
}

body .profile-edit-form input,
body .profile-edit-form textarea,
body .profile-edit-form select {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
}

body .profile-edit-form textarea {
  min-height: 104px !important;
  max-height: 170px !important;
  resize: vertical !important;
}

body .profile-photo-upload {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

body .profile-photo-upload img {
  width: 78px !important;
  height: 86px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

body .profile-photo-upload .grid {
  min-width: 0 !important;
  gap: 8px !important;
}

body .main-game-choice-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body .main-game-choice,
body .edit-game-row {
  min-width: 0 !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  border-radius: 12px !important;
}

body .main-game-choice img,
body .edit-game-row > img {
  width: 52px !important;
  height: 58px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

body .edit-game-main {
  min-width: 0 !important;
}

body .manual-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body .profile-edit-form .row {
  gap: 8px !important;
  align-items: center !important;
}

body .profile-edit-form .profile-save-action,
body .profile-editor-modal .profile-edit-form .primary,
body .profile-editor-modal .profile-edit-detail .primary,
body .profile-editor-modal .account-save-visibility {
  width: auto !important;
  max-width: 100% !important;
  min-width: 132px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 12px 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 11px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

body .profile-editor-modal .account-save-visibility {
  width: 100% !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-editor {
  display: grid !important;
  gap: 12px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .progression-card {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .progression-card > div {
  min-height: 48px !important;
  padding: 8px !important;
  border-radius: 11px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel {
  padding: 10px !important;
  border-radius: 13px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel > div:first-child {
  display: grid !important;
  gap: 2px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .takeover-theme-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .takeover-theme-control p {
  margin: 3px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
}

body .profile-edit-detail[data-section="cosmetics"] .takeover-toggle {
  min-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-picker {
  padding: 8px !important;
  border-radius: 12px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-picker > label {
  min-height: 26px !important;
  padding: 0 4px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick {
  min-height: 64px !important;
  padding: 9px 34px 9px 9px !important;
  border-radius: 11px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick input {
  right: 9px !important;
  width: 18px !important;
  height: 18px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick b {
  font-size: .72rem !important;
  line-height: 1.08 !important;
}

body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick span {
  margin-top: 5px !important;
  font-size: .55rem !important;
  line-height: 1.1 !important;
}

body .connected-editor {
  gap: 10px !important;
}

body .account-connection-row {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 13px !important;
}

body .account-provider-actions {
  grid-column: 2 / -1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

body .account-provider-actions button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: .64rem !important;
}

body .visibility-toggle {
  justify-self: end !important;
}

body .reputation-editor-card {
  padding: 12px !important;
  border-radius: 14px !important;
}

body .reputation-editor-card .rep-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .endorsement-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

@media (max-width: 380px) {
  body .profile-editor-modal {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body .profile-editor-modal .modal-card.profile-edit-hub,
  body .profile-editor-modal .modal-card.profile-edit-detail {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body .profile-edit-hub .profile-editor-preview,
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-preview {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 112px !important;
    padding: 10px !important;
  }

  body .profile-edit-hub .profile-editor-avatar,
  body .profile-edit-hub .profile-editor-avatar.has-frame-asset,
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar,
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-avatar.has-frame-asset {
    width: 72px !important;
    max-width: 72px !important;
    height: 84px !important;
  }

  body .profile-edit-hub .profile-editor-meta,
  body .profile-edit-detail[data-section="cosmetics"] .profile-editor-meta {
    display: none !important;
  }

  body .profile-edit-tile-grid {
    grid-template-columns: 1fr !important;
  }

  body .profile-edit-tile {
    min-height: 88px !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick-grid,
  body .manual-stats-grid {
    grid-template-columns: 1fr !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .takeover-theme-control {
    grid-template-columns: 1fr !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .takeover-toggle {
    width: 100% !important;
  }
}

/* Patch 0.57: compress Edit Profile hub and cosmetics on small phones. */
body .profile-edit-detail[data-section="cosmetics"] .progression-card {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .progression-card > div {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 8px !important;
}

body .profile-edit-detail[data-section="cosmetics"] .progression-card span,
body .profile-edit-detail[data-section="cosmetics"] .progression-card b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  body .profile-edit-tile-grid,
  body .profile-edit-hub .profile-edit-tile-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body .profile-edit-tile,
  body .profile-edit-hub .profile-edit-tile {
    min-height: 62px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 9px !important;
    row-gap: 2px !important;
    align-items: center !important;
  }

  body .profile-edit-tile span,
  body .profile-edit-hub .profile-edit-tile span {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    width: 28px !important;
    height: 28px !important;
  }

  body .profile-edit-tile b,
  body .profile-edit-hub .profile-edit-tile b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: .86rem !important;
  }

  body .profile-edit-tile em,
  body .profile-edit-hub .profile-edit-tile em {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    display: block !important;
    font-size: .62rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    opacity: .78 !important;
  }

  body .profile-edit-tile small,
  body .profile-edit-hub .profile-edit-tile small {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    max-width: 96px !important;
    font-size: .62rem !important;
    text-align: right !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel,
  body .profile-edit-detail[data-section="cosmetics"] .takeover-theme-control {
    padding: 9px !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .cosmetic-loadout-panel input {
    min-height: 38px !important;
  }

  body .profile-edit-detail[data-section="cosmetics"] .cosmetic-pick {
    min-height: 56px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Patch 0.59: compact Game Library editor rows for mobile. */
body .profile-edit-detail[data-section="game-library"] {
  gap: 10px !important;
}

body .profile-edit-detail[data-section="game-library"] .field {
  gap: 8px !important;
  padding: 9px !important;
  border-radius: 13px !important;
}

body .profile-edit-detail[data-section="game-library"] .field > label {
  min-height: 24px !important;
  padding: 0 2px !important;
  font-size: .64rem !important;
}

body .profile-edit-detail[data-section="game-library"] .game-editor {
  display: grid !important;
  gap: 7px !important;
}

body .profile-edit-detail[data-section="game-library"] .edit-game-row {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-height: 58px !important;
  padding: 7px 8px !important;
  border-radius: 11px !important;
}

body .profile-edit-detail[data-section="game-library"] .edit-game-row > img {
  width: 42px !important;
  height: 48px !important;
  border-radius: 7px !important;
}

body .profile-edit-detail[data-section="game-library"] .edit-game-main {
  display: grid !important;
  gap: 5px !important;
  align-content: center !important;
}

body .profile-edit-detail[data-section="game-library"] .edit-game-main b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .84rem !important;
  line-height: 1.05 !important;
}

body .profile-edit-detail[data-section="game-library"] .show-game-toggle {
  width: fit-content !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(238, 244, 255, .82) !important;
  font-size: .52rem !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body .profile-edit-detail[data-section="game-library"] .show-game-toggle input {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  background: rgba(120, 129, 150, .38) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

body .profile-edit-detail[data-section="game-library"] .show-game-toggle input::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important;
  transition: transform .15s ease, background .15s ease !important;
}

body .profile-edit-detail[data-section="game-library"] .show-game-toggle input:checked {
  border-color: rgba(0, 255, 156, .55) !important;
  background: linear-gradient(135deg, rgba(0, 255, 156, .84), rgba(139, 92, 246, .82)) !important;
}

body .profile-edit-detail[data-section="game-library"] .show-game-toggle input:checked::after {
  transform: translateX(12px) !important;
  background: #fff !important;
}

body .profile-edit-detail[data-section="game-library"] .remove-game {
  min-width: 68px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: .64rem !important;
  line-height: 1 !important;
}

body .profile-edit-detail[data-section="game-library"] .field > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

body .profile-edit-detail[data-section="game-library"] #profileGameSearch {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
}

body .profile-edit-detail[data-section="game-library"] #addCustomGame {
  min-width: 92px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: .62rem !important;
  line-height: 1.05 !important;
}

body .profile-edit-detail[data-section="game-library"] #profileGameResults {
  gap: 7px !important;
}

body .profile-edit-detail[data-section="game-library"] .profile-save-action {
  min-width: 150px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  font-size: .66rem !important;
  border-radius: 10px !important;
}

@media (max-width: 380px) {
  body .profile-edit-detail[data-section="game-library"] .edit-game-row {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  body .profile-edit-detail[data-section="game-library"] .edit-game-row > img {
    width: 38px !important;
    height: 44px !important;
  }

  body .profile-edit-detail[data-section="game-library"] .show-game-toggle {
    max-width: 128px !important;
    padding-right: 7px !important;
    font-size: .49rem !important;
  }

  body .profile-edit-detail[data-section="game-library"] .remove-game {
    min-width: 62px !important;
    padding: 0 8px !important;
    font-size: .58rem !important;
  }

  body .profile-edit-detail[data-section="game-library"] #addCustomGame {
    min-width: 82px !important;
  }
}

/* Performance/readability pass: Home recommendations and Discover queue transitions */
body .home-recommended-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
}

body .home-rec-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 42px !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: 7px 10px !important;
  min-height: 112px !important;
  padding: 10px !important;
  overflow: hidden !important;
  text-align: left !important;
}

body .home-rec-card > img {
  grid-row: 1 / 3 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

body .home-rec-card > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

body .home-rec-card b,
body .home-rec-card span,
body .home-rec-card small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .home-rec-card b {
  display: block !important;
  padding-right: 0 !important;
}

body .home-rec-card b i {
  position: static !important;
  display: inline-block !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}

body .home-rec-card > strong {
  justify-self: end !important;
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 255, 156, .42) !important;
  background: rgba(0, 255, 156, .10) !important;
  color: #00ff9c !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

body .home-rec-card > p {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body .home-rec-card > p em {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .64rem !important;
}

body .home-rec-card > small {
  grid-column: 1 / -1 !important;
  color: rgba(217, 226, 255, .76) !important;
  font-size: .68rem !important;
}

body #swipeStage {
  transition: opacity .16s ease, transform .16s ease !important;
}

body #swipeStage.is-advancing {
  opacity: .9 !important;
  transform: translateY(2px) scale(.998) !important;
}

@media (max-width: 430px) {
  body .home-recommended-grid {
    grid-template-columns: 1fr !important;
  }

  body .home-rec-card {
    min-height: 104px !important;
  }
}