/* profile.css — the full-screen USER PROFILE page. Render-only; deliberately reuses the clan page's dark "command"
   palette so the two full-screen surfaces read as one product. Single centred column (not the clan page's 3 rails):
   this is a settings surface, and settings read best as one narrow column of stacked cards. */

#profilePage {
  --pf-bg: var(--site-ui-panel, #0a0f1a); --pf-card: var(--site-ui-panel, #101b2e); --pf-line: var(--site-ui-line, #1d2c45); --pf-line2: var(--site-ui-line, #28395a);
  --pf-ink: var(--site-ui-ink, #e8eef7); --pf-muted: var(--site-ui-muted, #8da2be); --pf-faint: var(--site-ui-muted, #5f6f88);
  --pf-cyan: var(--site-ui-ink, #5cc8ff); --pf-good: var(--site-ui-accent, #46c08a); --pf-danger: var(--site-ui-danger, #e0533d);
  --pf-font: var(--site-ui-font, 'Chakra Petch'), 'Twemoji Mozilla', 'Segoe UI', system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 75; display: none; flex-direction: column;
  background: var(--pf-bg); color: var(--pf-ink); font-family: var(--pf-font); -webkit-font-smoothing: antialiased;
}
#profilePage.show { display: flex; }

/* ---- top bar (same shape + z-order as the clan page's, so the two never look like different apps) ---- */
#profilePage .pf-top { display: flex; align-items: center; gap: 16px; padding: 11px clamp(14px, 2.5vw, 26px);
  background: var(--site-ui-panel, rgba(8, 12, 20, .85)); border-bottom: 1px solid var(--pf-line); }
#profilePage .pf-back { background: none; border: 1px solid var(--pf-line2); color: var(--pf-muted); border-radius: 8px;
  padding: 7px 13px; font: 600 12px var(--pf-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#profilePage .pf-back:hover { color: var(--site-ui-ink, #fff); border-color: var(--pf-cyan); background: var(--site-ui-hover, rgba(92, 200, 255, .1)); }
#profilePage .pf-brand { display: flex; align-items: baseline; gap: 8px; }
#profilePage .lb-logo { font: 700 22px var(--pf-font); letter-spacing: .04em; color: var(--pf-cyan); text-shadow: 0 0 18px var(--site-ui-shadow, rgba(92, 200, 255, .5)); }
#profilePage .pf-brandsub { font: 600 11px var(--pf-font); letter-spacing: .22em; text-transform: uppercase; color: var(--pf-muted); }

#profilePage .pf-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 16px 60px; }
#profilePage .pf-col { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* ---- identity header ---- */
#profilePage .pf-head { display: flex; align-items: center; gap: 16px; }
#profilePage .pf-av { width: 68px; height: 68px; flex: none; border-radius: 16px; display: grid; place-items: center;
  font: 700 28px var(--pf-font); color: var(--site-ui-muted, #0a0f1a); overflow: hidden; }
#profilePage .pf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#profilePage .pf-who { min-width: 0; }
#profilePage .pf-name { font: 700 25px var(--pf-font); letter-spacing: .02em; overflow-wrap: anywhere; }
#profilePage .pf-headflag { width: 30px; height: 20px; object-fit: fill; vertical-align: middle; margin-left: 10px; border-radius: 2px; }   /* 3:2 + fill — the banner's shape, so a flag looks identical everywhere it appears */
#profilePage .pf-sub { font: 500 12.5px var(--pf-font); color: var(--pf-muted); margin-top: 3px; }
#profilePage .pf-clantag { color: var(--pf-cyan); font-weight: 700; }

/* ---- stat row (the SAME numbers the public profile card shows — one query, one truth) ---- */
#profilePage .pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#profilePage .pf-stat { background: var(--pf-card); border: 1px solid var(--pf-line); border-radius: 12px; padding: 12px 14px; }
#profilePage .pf-stat b { display: block; font: 700 21px var(--pf-font); color: var(--pf-cyan); }
#profilePage .pf-stat span { font: 600 10.5px var(--pf-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-faint); }

/* ---- section cards ---- */
#profilePage .pf-card { background: var(--pf-card); border: 1px solid var(--pf-line); border-radius: 14px; padding: 18px 20px; }
#profilePage .pf-card > h2 { margin: 0 0 4px; font: 700 15px var(--pf-font); letter-spacing: .05em; text-transform: uppercase; color: var(--pf-ink); }
#profilePage .pf-card > .pf-hint { margin: 0 0 14px; font: 500 12px var(--pf-font); color: var(--pf-faint); }
#profilePage label.pf-field { display: block; margin-bottom: 13px; font: 600 11px var(--pf-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); }
#profilePage label.pf-field i { display: block; font: italic 400 11px var(--pf-font); letter-spacing: 0; text-transform: none; color: var(--pf-faint); margin-top: 3px; }
#profilePage .pf-field input { width: 100%; margin-top: 6px; box-sizing: border-box; background: var(--site-ui-panel, #0a1220); border: 1px solid var(--pf-line2);
  border-radius: 9px; padding: 10px 12px; color: var(--pf-ink); font: 500 14px var(--pf-font); }
#profilePage .pf-field input:focus { outline: none; border-color: var(--pf-cyan); box-shadow: 0 0 0 3px var(--site-ui-shadow, rgba(92, 200, 255, .13)); }

#profilePage .pf-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
#profilePage button.pf-btn { background: var(--pf-cyan); border: none; color: var(--site-ui-muted, #06121f); border-radius: 9px; padding: 10px 20px;
  font: 700 13px var(--pf-font); letter-spacing: .04em; cursor: pointer; }
#profilePage button.pf-btn:hover { filter: brightness(1.1); }
#profilePage button.pf-btn:disabled { opacity: .5; cursor: default; filter: none; }
#profilePage button.pf-ghost { background: none; border: 1px solid var(--pf-line2); color: var(--pf-muted); border-radius: 9px;
  padding: 10px 18px; font: 600 13px var(--pf-font); cursor: pointer; }
#profilePage button.pf-ghost:hover { color: var(--site-ui-ink, #fff); border-color: var(--pf-muted); }
#profilePage button.pf-danger:hover { color: var(--pf-danger); border-color: var(--pf-danger); background: var(--site-ui-hover, rgba(224, 83, 61, .08)); }
#profilePage .pf-msg { min-height: 17px; font: 600 12px var(--pf-font); color: var(--pf-muted); margin-top: 2px; }
#profilePage .pf-msg.ok { color: var(--pf-good); }
#profilePage .pf-msg.err { color: var(--pf-danger); }

/* ---- unit-flag picker ----
   A dense grid so every option is visible without a scroll trap inside a scrolling page.
   The tile is the BANNER'S box (3:2) and the art fills it, because that is exactly what the battle banner does — a
   preview drawn at each PNG's own aspect would show the player a flag they will never see on the map. */
#profilePage .pf-flagsel { font: 600 13px var(--pf-font); color: var(--pf-cyan); margin-bottom: 12px; }
#profilePage .pf-flaggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
#profilePage .pf-flag { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px;
  background: var(--site-ui-panel, #0a1220); border: 1px solid var(--pf-line); border-radius: 10px; cursor: pointer; }
#profilePage .pf-flag:hover { border-color: var(--pf-line2); background: var(--site-ui-panel, #0d1728); }
#profilePage .pf-flag.on { border-color: var(--pf-cyan); background: var(--site-ui-hover, rgba(92, 200, 255, .12)); box-shadow: 0 0 0 1px var(--pf-cyan) inset; }
#profilePage .pf-flagart { width: 36px; height: 24px; display: grid; place-items: center; }   /* 3:2 — the banner's box */
#profilePage .pf-flagart img { width: 100%; height: 100%; object-fit: fill; display: block; border-radius: 1px; }   /* fill, NOT contain: the banner stretches to 3:2, so the preview must too */
#profilePage .pf-flagnone { color: var(--pf-faint); font: 700 16px var(--pf-font); }
#profilePage .pf-flaglbl { font: 600 9.5px var(--pf-font); letter-spacing: .04em; color: var(--pf-muted); text-align: center;
  line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profilePage .pf-flag.on .pf-flaglbl { color: var(--pf-ink); }

/* ---- match history ---- */
#profilePage .pf-mstat { font: 600 13px var(--pf-font); color: var(--pf-muted); margin-bottom: 11px; }
#profilePage .pf-mstat b { color: var(--pf-cyan); }
#profilePage .pf-matches { display: flex; flex-direction: column; gap: 5px; }
#profilePage .pf-match { display: grid; grid-template-columns: 46px 1fr auto auto auto; gap: 10px; align-items: center;
  background: var(--site-ui-panel, #0a1220); border: 1px solid var(--pf-line); border-left: 3px solid var(--pf-danger); border-radius: 8px;
  padding: 8px 11px; font: 600 12px var(--pf-font); color: var(--pf-muted); }
#profilePage .pf-match.won { border-left-color: var(--pf-good); }
#profilePage .pf-mres { font: 800 10.5px var(--pf-font); letter-spacing: .08em; color: var(--pf-danger); }
#profilePage .pf-match.won .pf-mres { color: var(--pf-good); }
#profilePage .pf-mmap { color: var(--pf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
#profilePage .pf-mtiles::after { content: " tiles"; color: var(--pf-faint); font-weight: 500; }
#profilePage .pf-mafk { font: 700 9px var(--pf-font); letter-spacing: .08em; color: var(--site-ui-muted, #0a0f1a); background: var(--pf-faint);
  border-radius: 3px; padding: 1px 4px; vertical-align: middle; font-style: normal; }
#profilePage .pf-mwhen { color: var(--pf-faint); min-width: 62px; text-align: right; }
@media (max-width: 560px) {
  #profilePage .pf-match { grid-template-columns: 42px 1fr auto; }
  #profilePage .pf-mtiles, #profilePage .pf-mwhen { display: none; }
}

/* ---- avatar row ---- */
#profilePage .pf-avrow { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
#profilePage .pf-avprev { width: 72px; height: 72px; flex: none; border-radius: 16px; display: grid; place-items: center;
  font: 700 28px var(--pf-font); color: var(--site-ui-muted, #0a0f1a); overflow: hidden; }
#profilePage .pf-avprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
#profilePage .pf-avacts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#profilePage .pf-avacts .pf-hint { margin: 0; }
#profilePage label.pf-file { cursor: pointer; display: inline-block; }
#profilePage label.pf-file input { display: none; }

/* ---- preference toggles ---- */
#profilePage label.pf-toggle { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; cursor: pointer; }
#profilePage label.pf-toggle input { margin: 2px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--pf-cyan); cursor: pointer; }
#profilePage label.pf-toggle span { font: 600 13.5px var(--pf-font); color: var(--pf-ink); }
#profilePage label.pf-toggle i { display: block; font: italic 400 11.5px var(--pf-font); color: var(--pf-faint); margin-top: 2px; }

/* ---- connections (Discord) ---- */
#profilePage .pf-conn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#profilePage .pf-conn span { font: 600 13px var(--pf-font); color: var(--pf-muted); }
#profilePage button.pf-link { background: none; border: none; color: var(--pf-cyan); font: 600 13px var(--pf-font); cursor: pointer; padding: 0; text-decoration: underline; }

/* ---- the lobby name box, once the profile owns it ---- */
.lb-tag.isLocked input { opacity: .72; cursor: default; }
.lb-namehint { font: 500 11px var(--site-ui-font, 'Chakra Petch'), system-ui, sans-serif; color: var(--site-ui-muted, #5f6f88); margin-left: 8px; }
.lb-namehint button { background: none; border: none; color: var(--site-ui-ink, #5cc8ff); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

@media (max-width: 560px) {
  #profilePage .pf-stats { grid-template-columns: 1fr; }
  #profilePage .pf-scroll { padding: 18px 12px 48px; }
  #profilePage .pf-name { font-size: 21px; }
}

/* "Message on Discord" — a door, not a delivery: it opens Discord at that player so they write it themselves.
   The dimmed variant means "they are on Discord, but connect yours first" — presence is disclosed only to somebody
   who has disclosed theirs, so the button exists but does not point anywhere yet. */
#playerProfile .pp-dscbtn { background: var(--site-ui-accent, #4a54c4); border-color: var(--site-ui-accent, #4a54c4); color: var(--site-ui-ink, #fff); }
#playerProfile .pp-dscbtn:hover { background: var(--site-ui-accent, #5a64d4); }
#playerProfile .pp-dscbtn.pp-dscoff { background: transparent; border: 1px solid var(--site-ui-line, #3a4570); color: var(--site-ui-muted, #8da2be); }
#playerProfile .pp-dscbtn.pp-dscoff:hover { color: var(--site-ui-ink, #e8eef7); border-color: var(--site-ui-accent, #4a54c4); }

/* the Discord-alerts opt-out, beside the connection it belongs to */
#pfProfile .pf-connopt, .pf-connopt { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin-top: 9px;
  color: var(--site-ui-ink, #9fb2cc); font: 500 12.5px/1.45 var(--site-ui-font, 'Chakra Petch'), system-ui, sans-serif; cursor: pointer; }
.pf-connopt input { margin: 2px 0 0; accent-color: #2f86d6; cursor: pointer; }
.pf-connopt:hover { color: var(--site-ui-ink, #d7e3f4); }

/* ---- THE RANK LADDER (migration 0030) ---------------------------------------------------------------------------
   Two surfaces, one visual language: the full card on your own profile page, and a single compact line inside the
   shared player popover. The insignia is an inline SVG on a small integer grid, so it MUST stay pixel-crisp —
   `image-rendering: pixelated` is the whole reason it reads as pixel art rather than a blurry sticker. */
.pf-card.pf-rank { display: flex; flex-direction: column; gap: 12px; }
.pf-rhead { display: flex; align-items: center; gap: 16px; }
.pf-rins { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 56px; }
.pf-rins svg, .pp-ins svg { image-rendering: pixelated; display: block; }
.pf-rid { flex: 1 1 auto; min-width: 0; }
.pf-rname { font-size: 20px; font-weight: 700; line-height: 1.2; }
.pf-rtier { font-size: 12px; opacity: .62; margin-top: 2px; }
.pf-rpts { text-align: right; flex: none; }
.pf-rpts b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.pf-rpts span { font-size: 11px; opacity: .62; text-transform: uppercase; letter-spacing: 1px; }

.pf-rnext { display: flex; flex-direction: column; gap: 6px; font-size: 12px; opacity: .78; }
.pf-rbar { height: 6px; border-radius: 3px; background: var(--site-ui-hover, rgba(255, 255, 255, .09)); overflow: hidden; }
.pf-rbar i { display: block; height: 100%; border-radius: 3px; }

/* the popover's one line: insignia, rank, total */
.pp-rank { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 0 0;
           background: var(--site-ui-hover, rgba(255, 255, 255, .04)); border-radius: 8px; }
.pp-ins { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; }
.pp-ins svg { max-width: 30px; max-height: 26px; }
.pp-rank b { font-size: 13px; font-weight: 600; }
.pp-rpts { margin-left: auto; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }

/* THE RANK BESIDE A NAME IN CHAT — used by BOTH renderers (the dock's .cmsg and the clan page's .cp-cmeta), which is
   why it lives here with the rest of the rank artwork rather than being written twice in two stylesheets.
   The svg is already scaled to the box by insigniaFor(rank, 20, 15) — the numbers below only place it, because CSS
   cannot preserve an inline svg's aspect ratio when the element carries both a width and a height attribute. */
/* ⚠ A FIXED BOX WITH line-height:0 AND vertical-align:middle, not a baseline-aligned flex. As an inline-FLEX the
   span was aligned by its own last line box, so a short insignia hung below the text baseline and the name row's
   HEIGHT depended on the author's rank — measured 17.00px for a Recruit against 19.63px for a Private in the same
   column. Rows that jitter as people talk is a worse artefact than the mark is a feature.
   Both chat headers are flex rows with gap:8px, so the -2px lands the mark 6px from the name on BOTH surfaces: the
   dock measured 12px and the clan page 4px, the second correcting for a difference that was never there.
   The pull is on the LEFT edge because the mark sits AFTER the name — it belongs to the name on its left, not to
   the timestamp on its right, and the two gaps have to say so. */
.whorank { display: inline-block; width: 28px; height: 16px; line-height: 0; flex: none;
           margin-left: -2px; vertical-align: middle; text-align: center; }
.whorank svg { display: inline-block; vertical-align: middle; }

/* ---- BADGES (migration 0031) --------------------------------------------------------------------------------------
   One card per badge, three tiers each. An UNEARNED tier is drawn greyed in the same silhouette as an earned one — an
   empty shape is a goal, a blank space is nothing — and a badge whose counter is not kept yet says so rather than
   pretending to be merely unearned. */
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.pf-badge { background: var(--site-ui-hover, rgba(255,255,255,.03)); border: 1px solid var(--site-ui-line, rgba(255,255,255,.09)); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pf-badge.earned { border-color: var(--site-ui-accent, rgba(255,201,60,.35)); background: var(--site-ui-hover, rgba(255,201,60,.05)); }
.pf-badge.locked { opacity: .55; }
.pf-bhead { display: flex; align-items: flex-start; gap: 10px; }
.pf-bicon { font-size: 22px; line-height: 1; flex: none; }
.pf-bname { font-weight: 700; font-size: 14px; }
.pf-bdesc { font-size: 12px; opacity: .62; line-height: 1.4; margin-top: 2px; }
.pf-btiers { display: flex; flex-direction: column; gap: 5px; }
.pf-btier { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .38; }
.pf-btier.got { opacity: 1; }
.pf-bmed { flex: none; width: 20px; display: flex; justify-content: center; }
.pf-bmed svg { height: 22px; width: auto; image-rendering: pixelated; display: block; }
.pf-btier:not(.got) .pf-bmed svg { filter: grayscale(1); }   /* the silhouette stays, the metal goes */
.pf-breq { flex: 1 1 auto; }
.pf-bmetal { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.pf-bnext { font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.pf-bnext.pf-blocked { opacity: .5; font-style: italic; }

/* the popover's compact row: icon + the metal they reached, nothing else */
.pp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pp-badge { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 7px;
  background: var(--site-ui-hover, rgba(255,255,255,.05)); }
.pp-bicon { font-size: 14px; line-height: 1; }
.pp-bmed svg { height: 15px; width: auto; image-rendering: pixelated; display: block; }