/* 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: #0a0f1a; --pf-card: #101b2e; --pf-line: #1d2c45; --pf-line2: #28395a;
  --pf-ink: #e8eef7; --pf-muted: #8da2be; --pf-faint: #5f6f88;
  --pf-cyan: #5cc8ff; --pf-good: #46c08a; --pf-danger: #e0533d;
  --pf-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: 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: #fff; border-color: var(--pf-cyan); background: 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 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: #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: #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 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: #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: #fff; border-color: var(--pf-muted); }
#profilePage button.pf-danger:hover { color: var(--pf-danger); border-color: var(--pf-danger); background: 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: #0a1220; border: 1px solid var(--pf-line); border-radius: 10px; cursor: pointer; }
#profilePage .pf-flag:hover { border-color: var(--pf-line2); background: #0d1728; }
#profilePage .pf-flag.on { border-color: var(--pf-cyan); background: 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: #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: #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: #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 'Chakra Petch', system-ui, sans-serif; color: #5f6f88; margin-left: 8px; }
.lb-namehint button { background: none; border: none; color: #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; }
}