/* ══════════════════════════════════════════════════════════════════════════
   THE PROFILE, REDESIGNED (2026-09-22)
   ══════════════════════════════════════════════════════════════════════════
   Linked after each page's inline <style>, so these win on cascade order and
   the original selectors, and every id the JS binds to, stay where they were.
   One file, linked by ship.html and index.html, because the profile is the
   same object on both and a fix belongs in one place.

   The palette is the one the game preview page settled on: gold means value,
   blue means progress, green means done, and nothing else is coloured. The
   panel accent (cyan) stays the shell's, so the modal still reads as part of
   the ship.
   ────────────────────────────────────────────────────────────────────────── */

.auth-profile {
  --pf-ground: #080D18;
  --pf-card: #0A101C;
  --pf-line: #1B2540;
  --pf-line-2: #22304E;
  --pf-rule: #16203A;
  --pf-bright: #E8EEF8;
  --pf-body: #8496B2;
  --pf-muted: #6C7C97;
  --pf-dim: #5A6A85;
  --pf-gold: #FFC861;
  --pf-blue: #7FC4FF;
  --pf-green: #34D399;
}

/* ── The panel scrolls. It did not before ────────────────────────────────────
   #authProfile is overflow:hidden inside the fixed-height modal and no child
   was a scroller, so the Badges tab (114 cards, 7,600px tall) was clipped at
   640px with no way to reach the rest of it. Each tab is its own scroll
   region now, which is also what lets a sticky Save bar work. */
.auth-modal.profile-fixed .profile-section.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 196, 255, 0.28) transparent;
  padding-right: 6px;
}

.auth-modal.profile-fixed .profile-section.active::-webkit-scrollbar {
  width: 8px;
}

.auth-modal.profile-fixed .profile-section.active::-webkit-scrollbar-thumb {
  background: rgba(127, 196, 255, 0.24);
  border-radius: 999px;
}

.auth-modal.profile-fixed .profile-section.active::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Six tabs in a 700px modal ───────────────────────────────────────────────
   The old five were already near the edge at 11px with 18px of padding.
   Tightening the strip fits Commendations without truncation, and the row
   scrolls sideways rather than wrapping if a translation ever runs long. */
.profile-tabs {
  gap: 0;
  /* The panel is a fixed-height flex column: without this the tab strip is a
     shrinkable flex item, and a tall tab (Badges is 1,400px) squeezed it until
     the labels were cut in half. */
  flex: 0 0 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  padding: 11px 13px;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* [hidden] has to beat the flex and grid displays below it: the UA rule is
   display:none, and any author rule that sets display wins over it. Every
   block on this panel that hides itself relies on this. */
.auth-profile [hidden] {
  display: none !important;
}

/* ── Shared block furniture ─────────────────────────────────────────────── */
.pf-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pf-blue);
}

.pf-head .pf-count {
  font-size: 11.5px;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

.pf-head .pf-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--pf-rule);
}

.pf-see {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(127, 196, 255, 0.26);
  background: rgba(127, 196, 255, 0.08);
  color: var(--pf-blue);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pf-see:hover {
  border-color: rgba(127, 196, 255, 0.6);
  background: rgba(127, 196, 255, 0.16);
  color: #DCEBFF;
}

.pf-empty {
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--pf-line);
  background: var(--pf-ground);
  color: var(--pf-muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* ── Overview: who you are, then how far along ──────────────────────────── */
.pf-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 15px;
  border: 1px solid var(--pf-line-2);
  background: linear-gradient(112deg, rgba(127, 196, 255, 0.09) 0%, rgba(14, 22, 38, 0.92) 46%, #0A0F1B 100%);
}

.pf-identity-avatar {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  flex: 0 0 auto;
}

.pf-identity-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pf-identity-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--pf-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-identity-sub {
  font-size: 12px;
  color: var(--pf-muted);
}

.pf-xp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.pf-xp-level {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-gold);
}

.pf-xp-nums {
  font-size: 11.5px;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

.pf-xp-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #131C30;
  overflow: hidden;
}

.pf-xp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4C7FB8, #7FC4FF);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-identity-rank {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}

.pf-identity-rank img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.pf-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pf-tile {
  padding: 14px 12px;
  border-radius: 13px;
  border: 1px solid var(--pf-line);
  background: linear-gradient(170deg, #0E1626, #0A0F1B);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pf-tile-value {
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  color: var(--pf-bright);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-tile-value.gold { color: var(--pf-gold); }
.pf-tile-value.blue { color: var(--pf-blue); }

.pf-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

/* ── Summary header, shared by Badges and Commendations ─────────────────── */
.pf-summary {
  padding: 16px 18px;
  border-radius: 15px;
  border: 1px solid var(--pf-line-2);
  background: linear-gradient(170deg, #0E1626, #0A0F1B);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pf-summary-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pf-summary-value {
  font-size: 38px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--pf-gold);
  font-variant-numeric: tabular-nums;
}

.pf-summary-value.blue { color: var(--pf-blue); }

.pf-summary-divider {
  width: 1px;
  align-self: stretch;
  background: var(--pf-rule);
}

.pf-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-summary-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #DCE7F7;
}

.pf-summary-note {
  font-size: 12px;
  color: var(--pf-muted);
}

.pf-summary-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #131C30;
  overflow: hidden;
}

.pf-summary-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #B4862F, #FFC861);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-summary-bar.blue i {
  background: linear-gradient(90deg, #4C7FB8, #7FC4FF);
}

/* ── Filters ────────────────────────────────────────────────────────────── */
.pf-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.pf-filter {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--pf-line);
  background: var(--pf-ground);
  color: var(--pf-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pf-filter:hover {
  border-color: rgba(127, 196, 255, 0.4);
  color: #DCEBFF;
}

.pf-filter.active {
  border-color: rgba(127, 196, 255, 0.55);
  background: rgba(127, 196, 255, 0.13);
  color: var(--pf-blue);
}

.pf-filter-count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ── Badges: one card per game, because every game's six are the same six ──
   Game badges are attendance tiers (first, 25, 50, 100, 500, 1000), so the
   tier label is short and uniform and a card can show all six at once. That
   is what replaces 114 stacked rows: 19 cards you can read in one pass.
   A badge is binary, so there is no bar on a pip, only the card's own count.
   The first unearned pip is ringed: that is the one you are playing toward. */
.pf-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.pf-game-card {
  padding: 13px 14px 14px;
  border-radius: 13px;
  border: 1px solid var(--pf-line);
  background: var(--pf-ground);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pf-game-card.is-complete {
  border-color: #5A4415;
  background: linear-gradient(165deg, rgba(255, 200, 97, 0.08), #0A101C 62%);
}

.pf-game-card.is-empty {
  opacity: 0.66;
}

.pf-game-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pf-game-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pf-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-game-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

.pf-game-card.is-complete .pf-game-count { color: var(--pf-gold); }

.pf-game-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #131C30;
  overflow: hidden;
}

.pf-game-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #B4862F, #FFC861);
}

.pf-pips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.pf-pip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 2px 4px;
  border-radius: 9px;
  border: 1px solid transparent;
  min-width: 0;
}

.pf-pip img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(0.5);
  opacity: 0.4;
}

.pf-pip span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* --pf-dim measured 3.55:1 on this ground, under the 4.5:1 floor for small
     text. Muted is 4.59:1 and still reads clearly quieter than the gold. */
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

.pf-pip.is-earned img {
  filter: none;
  opacity: 1;
}

.pf-pip.is-earned span { color: var(--pf-gold); }

.pf-pip.is-next {
  border-color: rgba(127, 196, 255, 0.34);
  background: rgba(127, 196, 255, 0.07);
}

.pf-pip.is-next img { opacity: 0.62; }
.pf-pip.is-next span { color: var(--pf-blue); }

/* The arcade card: founder, seasons and the two weekly drops. These have no
   roster behind them, so it holds only what is held, spans the grid, and sizes
   its tiles to their own names rather than to a six-tier row. */
.pf-game-card.is-general {
  grid-column: 1 / -1;
}

.pf-game-card.is-general .pf-pips {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

.pf-game-card.is-general .pf-pip span {
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* ── Commendations ──────────────────────────────────────────────────────────
   Ninety-five of them is a list nobody reads, so the arcade collapses to one
   row per game and opens the five you asked for. The open rows are the game
   preview page's exact design: criteria in full, an XP chip, and a bar only
   where progress is countable. */
.pf-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-acc {
  border-radius: 12px;
  border: 1px solid var(--pf-line);
  background: var(--pf-ground);
  overflow: hidden;
}

.pf-acc.is-open {
  border-color: rgba(127, 196, 255, 0.34);
}

.pf-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 46px;
}

.pf-acc-head:hover { background: rgba(127, 196, 255, 0.05); }

.pf-acc-name {
  flex: 0 0 auto;
  max-width: 44%;
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-acc-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

.pf-acc-count.all-done { color: var(--pf-green); }

.pf-acc-bar {
  flex: 1 1 auto;
  min-width: 40px;
  height: 6px;
  border-radius: 3px;
  background: #131C30;
  overflow: hidden;
}

.pf-acc-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4C7FB8, #7FC4FF);
}

.pf-acc.all-done .pf-acc-bar i {
  background: linear-gradient(90deg, #2FA97C, #34D399);
}

.pf-acc-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pf-body);
  border-bottom: 2px solid var(--pf-body);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.pf-acc.is-open .pf-acc-chevron {
  transform: rotate(-135deg) translateY(-2px);
}

/* The open and close.
   A zero-height grid row is the one collapse a browser can interpolate without
   anyone measuring anything: the track goes 0fr to 1fr, the inner element hides
   its own overflow, and the content keeps its natural height throughout. Height
   auto does not animate, and a max-height guess eases wrongly for every row
   count. The rows fade a beat behind the opening so the panel does not appear
   to push its text out of the way. */
.pf-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-acc.is-open .pf-acc-body {
  grid-template-rows: 1fr;
}

.pf-acc-body-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* The inset belongs to the list, not to the collapsing element. Padding on the
   element whose track is 0fr sits outside the collapsed height and left every
   closed row ten pixels taller than it looked. */
.pf-acc-body-inner .pf-comm-list {
  padding: 0 10px 10px;
}

.pf-acc.is-open .pf-acc-body-inner {
  opacity: 1;
  transition: opacity 220ms ease 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .pf-acc-body,
  .pf-acc-body-inner,
  .pf-acc-chevron {
    transition: none;
  }
}

.pf-comm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-comm {
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px solid var(--pf-line);
  background: var(--pf-card);
}

.pf-comm.is-earned {
  border-color: #2A3E33;
  background: linear-gradient(100deg, rgba(52, 211, 153, 0.07), #0A101C 44%);
}

.pf-comm-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.pf-comm-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111A2B;
  border: 1px solid #1E2942;
}

.pf-comm-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.5;
}

.pf-comm.is-earned .pf-comm-icon {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
}

.pf-comm.is-earned .pf-comm-icon img {
  filter: none;
  opacity: 1;
}

.pf-comm-body {
  /* Basis 0, not auto: on the phone the row wraps so the state can take its
     own line, and a content-sized basis pushed the whole body under the icon
     whenever the criteria ran long. */
  flex: 1 1 0;
  min-width: 0;
}

.pf-comm-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.pf-comm-name b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-body);
}

.pf-comm.is-earned .pf-comm-name b { color: var(--pf-bright); }

.pf-comm-xp {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(127, 196, 255, 0.12);
  border: 1px solid rgba(127, 196, 255, 0.28);
  color: var(--pf-blue);
}

.pf-comm-game {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-comm-crit {
  display: block;
  font-size: 12px;
  color: var(--pf-muted);
  line-height: 1.4;
}

.pf-comm-state {
  flex: 0 0 auto;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  /* LOCKED in #4E5E79 measured 2.96:1. Muted is 4.59:1. */
  color: var(--pf-muted);
}

.pf-comm-state.done { color: var(--pf-green); }

.pf-comm-state.count {
  font-size: 14px;
  font-weight: 800;
  color: var(--pf-blue);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pf-comm-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #131C30;
  overflow: hidden;
  margin-top: 12px;
}

.pf-comm-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4C7FB8, #7FC4FF);
}

.pf-comm.is-earned .pf-comm-bar i {
  background: linear-gradient(90deg, #2FA97C, #34D399);
}

/* ── The latest-badges strip on Overview ────────────────────────────────── */
.pf-badge-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.pf-badge-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid #5A4415;
  background: linear-gradient(165deg, rgba(255, 200, 97, 0.09), #0A101C 60%);
  min-width: 0;
}

.pf-badge-slot img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

.pf-badge-slot .pf-badge-slot-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--pf-gold);
  text-align: center;
  line-height: 1.25;
}

.pf-badge-slot .pf-badge-slot-date {
  font-size: 10px;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Levels and Stats: same furniture, existing content ─────────────────── */
#profileStats .stats-overview {
  gap: 10px;
}

#profileStats .stat-card {
  border-radius: 13px;
  border: 1px solid var(--pf-line);
  background: linear-gradient(170deg, #0E1626, #0A0F1B);
  padding: 16px 12px 14px;
  min-height: 0;
  gap: 6px;
  justify-content: center;
}

#profileStats .stat-num {
  font-size: 26px;
  color: var(--pf-bright);
}

#profileStats .stat-label {
  margin-top: 0;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--pf-muted);
}

#profileStats .stats-highscores { margin-top: 0; }

#profileRanks .rank-summary,
#profileAccount .profile-card,
#profileAccount .profile-subscription-hero {
  border-radius: 13px;
}

/* ── Account: the settings that used to be the landing tab ──────────────── */
.pf-account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.pf-account-divider h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pf-blue);
}

.pf-account-divider .pf-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--pf-rule);
}

/* The Save bar tracked #profileMain, which is the Overview now. */
.auth-modal.profile-fixed #profileAccount.profile-section.active {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.auth-modal.profile-fixed #profileAccount .profile-two-col {
  align-content: start;
}

.auth-modal.profile-fixed #profileAccount .profile-actions {
  margin-top: 14px;
  padding-top: 8px;
}

.auth-modal.profile-fixed #profileMain .profile-actions {
  margin-top: 0;
  padding-top: 0;
}

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Six tabs, three to a row. The columns size to their content rather than
     to equal thirds, because Commendations is twice the width of Stats and an
     even split clipped it on a 390px phone. Column widths are still shared
     between the two rows, so the grid stays aligned. */
  .auth-modal.profile-fixed .profile-tabs {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    overflow: visible;
  }

  .auth-modal.profile-fixed .profile-tab,
  .auth-modal.profile-fixed .profile-tab:nth-child(4),
  .auth-modal.profile-fixed .profile-tab:nth-child(5) {
    grid-column: auto;
  }

  .auth-modal.profile-fixed .profile-tab {
    padding: 10px 6px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .auth-modal.profile-fixed #profileAccount .profile-two-col {
    padding-bottom: 8px;
  }

  .auth-modal.profile-fixed #profileAccount .profile-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: auto;
    padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(10, 18, 34, 0), rgba(10, 18, 34, 0.94) 34%, rgba(10, 18, 34, 0.98) 100%);
  }

  .auth-modal.profile-fixed #profileMain .profile-two-col {
    padding-bottom: 0;
  }

  .pf-identity {
    gap: 13px;
    padding: 14px;
  }

  .pf-identity-avatar {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }

  .pf-identity-name { font-size: 17px; }
  .pf-identity-rank { display: none; }

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

  .pf-game-grid {
    grid-template-columns: 1fr;
  }

  .pf-badge-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-summary-value { font-size: 32px; }

  .pf-acc-name { max-width: 50%; }
  .pf-acc-bar { display: none; }

  /* A phone column is too narrow for name, criteria and state side by side.
     The state wraps to its own line under the text, indented past the icon,
     instead of squeezing the criteria into four words a line. */
  .pf-comm-top {
    gap: 11px;
    flex-wrap: wrap;
  }

  .pf-comm-state {
    order: 3;
    width: 100%;
    margin-left: 49px;
    margin-top: 6px;
    text-align: left;
    font-size: 10.5px;
  }

  .pf-comm-state.count { font-size: 13px; }

  .pf-comm-bar { margin-top: 10px; }

  .pf-filter {
    padding: 7px 10px;
    font-size: 10.5px;
  }
}

@media (max-width: 420px) {
  .pf-pip img { width: 30px; height: 30px; }
  .pf-pip span { font-size: 9px; }
  .pf-tile-value { font-size: 20px; }
}

/* Glorp, the first-run guide, is fixed at z-index 9040 and the auth overlay is
   at 1200, so he floated over the profile and sat on the See all button. He
   has nothing to say while the profile is open. */
body:has(.auth-overlay.active) .glorp-guide {
  opacity: 0;
  pointer-events: none;
}