/* WO-MAPMOG-PORT-007: Profile full view. --v-* tokens and full-view.css parts only.
   Live lane batch2 (founder: "UI quality degrades when maximized"): copy the
   full-settings.css fix -- the big view is a grid of cards that look like the
   small #pc-profile-panel card (same .pc-cap / .pc-srow / .pc-later / .pc-psec
   parts from style.css, same card recipe as full-settings.css's .pc-fs-set),
   never plain bordered boxes of stretched rows. */
.pc-fp { flex: 1; min-width: 0; overflow: auto; }
.pc-fp-main {
  padding: 18px 20px 24px; max-width: 100%; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
/* .pc-fp-cols/.pc-fp-col stay in the DOM (render() still builds them) but take
   no box of their own, so gallery/activity/spots/badges become direct items of
   the .pc-fp-main grid above -- same flattening trick as .pc-fs-main's cards. */
.pc-fp-cols, .pc-fp-col { display: contents; }

.pc-fp-ident, .pc-fp-acts, .pc-fp-gallery, .pc-fp-activity, .pc-fp-spots, .pc-fp-badges, .pc-fp-editor {
  border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-surf2);
  padding: 14px 18px; margin: 0; overflow: hidden;
}
.pc-fp-ident, .pc-fp-acts, .pc-fp-editor { grid-column: 1 / -1; }
.pc-fp-side { min-width: 0; max-width: 100%; }
.pc-fp-ident { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; max-width: 100%; box-sizing: border-box; }
/* LIVE LANE (f16): name + "#id" + flag on one line, badges on their own
   full-width row beneath the avatar/name row (same flex-basis trick stats
   already uses). */
.pc-fp-namerow { display: flex; align-items: baseline; min-width: 0; max-width: 100%; }
.pc-fp-badgesrow { flex: 1 1 100%; order: 2; }
.pc-fp-stats { order: 3; }
.pc-fp-xpwrap { order: 4; }
.pc-fp-av { width: 56px; height: 56px; border-radius: 16px; background: var(--v-acc); color: var(--v-accink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pc-fp-who { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.pc-fp-name { font: 700 20px/1.2 var(--v-font); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line + ellipsis (full name in the title); never breaks mid-word */
.pc-fp-namerow > .pc-id-num, .pc-fp-namerow > .pc-id-flag { flex: none; }
.pc-fp-sub, .pc-fp-xp { color: var(--v-mut); font: 500 13px/1.4 var(--v-font); }
/* Live lane batch2: stats carries .pc-psec (style.css) for the same border-top
   divider the compact card uses between its head and its level/coins rows;
   flex-basis 100% forces it onto its own line below the avatar/name row. */
.pc-fp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 1 1 100%; max-width: 360px; }
.pc-fp-stat { display: flex; flex-direction: column; }
.pc-fp-stat b { font: 700 18px/1.2 var(--v-font); color: var(--v-ink); }
.pc-fp-stat span { color: var(--v-mut); font: 500 12px/1.4 var(--v-font); }
.pc-fp-xpwrap { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; }
.pc-fp-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--v-trk); overflow: hidden; }
.pc-fp-fill { display: block; height: 100%; width: 0; background: var(--v-acc); border-radius: inherit; }
/* Shop + Save stack like the compact panel's full-width blue Shop button. */
.pc-fp-acts { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* Later rows carry "pc-srow pc-full-row" (shared classes) for the hook; this
   cancels full-view.css's bordered-row look so they read like the compact
   card's rows (settings' laterRow does the same cancel-and-adopt). */
.pc-fp-later.pc-full-row { padding: 6.5px 0; gap: 8.6px; border-bottom: 0; }
.pc-fp-acts .pc-fp-later { border-bottom: 0; }
/* Settings' pattern: .pc-fs-cap.pc-full-cap zeroes the old padding so .pc-cap's
   own margin (style.css) is the only spacing; same zero here. */
.pc-fp-cap.pc-full-cap { padding: 0; margin: 0 0 8.6px; font: 700 13px/1.45 var(--v-font); letter-spacing: 1.44px; }
.pc-fp-label { font: 600 14px/1.3 var(--v-font); }
.pc-fp-later { color: var(--v-mut); }
.pc-fp-btn {
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--v-line); background: transparent;
  color: var(--v-ink); font: 700 14px/1.2 var(--v-font); cursor: pointer;
}
.pc-fp-btn:disabled { opacity: .5; cursor: not-allowed; }
.pc-fp-shop { width: 100%; padding: 10px 14px; background: var(--v-acc); color: var(--v-accink); border-color: var(--v-acc); }
@media (max-width: 600px) {
  /* P5 r7: minmax(0,1fr) lets the column shrink below its content, so a wide name ellipsizes instead of pushing the card past the viewport. */
  .pc-fp-main { padding: 12px; grid-template-columns: minmax(0, 1fr); }
}

/* WO-MAPMOG-PORT-009: the compact profile pane on desktop (style.css shows it on a phone only). */
@media (min-width: 601px) {
  #pc-profile-panel:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; top: 79px; right: 80px; width: 300px; z-index: 60;
    padding: 17.3px 20.2px 18px; border-radius: 18.7px; background: var(--v-surf);
    border: 1px solid var(--v-edge); box-shadow: inset 0 0 0 1px var(--v-hair), var(--v-sh);
    color: var(--v-ink); font-family: var(--v-font);
    zoom: var(--pc-ui-scale); /* live lane batch2: shrinks with the rest of the chrome */
  }
}

/* WO-MAPMOG live (batch2): dress the desktop profile panel like #settings-panel's
   .pc-pane/.pc-ph/.pc-psec family -- it was unstyled raw text above 600px (founder:
   "Profile page is missing CSS"). The phone rules this parallels live untouched in
   style.css's "@media (max-width: 600px)" block (.pc-prof-head/.pc-prof-lv/.pc-prof-bar/
   .pc-prof-coins/.pc-prof-shop/.pc-prof-stats) -- the two breakpoints never overlap
   (<=600 vs >=601), so nothing here can regress the phone sheet. */
.pc-prof-dtop { display: none; }
@media (min-width: 601px) {
  .pc-prof-dtop { display: flex; align-items: center; gap: 10.1px; margin-bottom: 10.1px; }
  .pc-prof-dtop b { font-size: 19.4px; font-weight: 700; }
  #pc-profile-panel .pc-prof-head > .pc-hcb,
  #pc-profile-panel .pc-prof-head > .pc-sheet-x { display: none; } /* desktop close/expand live in .pc-prof-dtop instead */
  #pc-profile-panel .pc-prof-head {
    display: flex; align-items: center; gap: 12px; padding-top: 2px; margin: 0 0 14.4px;
  }
  #pc-profile-panel .pc-prof-av {
    width: 44px; height: 44px; border-radius: 14px; background: var(--v-acc); color: var(--v-accink);
    display: grid; place-items: center; flex: none;
  }
  #pc-profile-panel .pc-prof-who h2 { margin: 0; font-size: 16px; font-weight: 800; }
  #pc-profile-panel .pc-prof-sub { display: block; font-size: 13px; color: var(--v-mut); margin-top: 2px; }
  #pc-profile-panel .pc-prof-lv {
    display: flex; flex-direction: column; gap: 4px; padding-top: 14.4px; border-top: 1px solid var(--v-line);
    font-size: 13px; color: var(--v-mut);
  }
  #pc-profile-panel .pc-prof-lv b { color: var(--v-ink); font-size: 14px; }
  #pc-profile-panel .pc-prof-bar {
    height: 8px; border-radius: 99px; background: var(--v-trk); overflow: hidden; margin: 8px 0 14.4px;
  }
  #pc-profile-panel .pc-prof-bar i { display: block; height: 100%; width: 0; background: var(--v-acc); border-radius: inherit; }
  /* Live lane batch2: flatten the coins wrapper so Coins and Pixels sit together and the Shop button goes last. */
  #pc-profile-panel .pc-prof-coins { display: contents; }
  #pc-profile-panel .pc-prof-coins > #pc-prof-coins {
    display: flex; justify-content: space-between; font-weight: 400; font-size: 14px;
    padding: 14.4px 0 0; border-top: 1px solid var(--v-line);
  }
  #pc-profile-panel .pc-prof-coins > #pc-prof-shop { order: 1; }
  #pc-profile-panel .pc-prof-coins > #pc-prof-coins::before { content: "Coins"; color: var(--v-ink); font-weight: 600; }
  #pc-profile-panel .pc-prof-stats {
    display: block; padding: 14.4px 0 0; border-top: 1px solid var(--v-line); margin: 0;
  }
  #pc-profile-panel .pc-prof-stats > div {
    display: flex; align-items: baseline; gap: 4px; padding: 0; border: 0; font-size: 14px;
  }
  #pc-profile-panel .pc-prof-stats > div::before { content: "Pixels"; color: var(--v-ink); font-weight: 600; margin-right: auto; }
  #pc-profile-panel .pc-prof-stats b,
  #pc-profile-panel .pc-prof-stats span { font-size: 14px; font-weight: 400; color: var(--v-ink); }
  #pc-profile-panel .pc-prof-shop {
    width: 100%; display: block; box-sizing: border-box; text-align: center; margin-top: 14.4px;
    padding: 10px 14px; border-radius: 12px; border: 1px solid var(--v-acc); background: var(--v-acc);
    color: var(--v-accink); font: 700 14px/1.2 var(--v-font); cursor: pointer; min-height: 0;
  }
}

/* LIVE LANE (f18): founder -- "most of the fullscreen profile is just empty or
   whitespace ... you took a smaller element and just dragged it open". The box
   is now content-sized (fit:{w:860,h:560} in full-profile.js) and split in two:
   a "you" column (big avatar, name, badges, stat tiles, XP, Shop) and the editor
   filling the rest. Phone (<=600) keeps one column. */
@media (min-width: 601px) {
  .pc-fp-main {
    grid-template-columns: 300px minmax(0, 1fr); gap: 18px; padding: 18px 20px;
    height: 100%; box-sizing: border-box; align-items: stretch;
    align-content: stretch; grid-template-rows: minmax(0, 1fr);
  }
  .pc-fp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .pc-fp-ident, .pc-fp-acts, .pc-fp-editor { grid-column: auto; }
  .pc-fp-ident {
    flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px 18px;
  }
  .pc-fp-av { width: 104px; height: 104px; border-radius: 26px; }
  .pc-fp-av .pc-id-default { width: 52px; height: 52px; }
  .pc-fp-av .pc-id-pencil { width: 28px; height: 28px; right: -6px; bottom: -6px; }
  .pc-fp-av .pc-id-pencil .pc-icon { width: 14px; height: 14px; }
  .pc-fp-who { align-items: center; }
  .pc-fp-name { font-size: 22px; }
  .pc-fp-badgesrow { order: 0; flex: none; justify-content: center; min-height: 22px; }
  .pc-fp-ident > .pc-grow { display: none; }
  .pc-fp-stats {
    order: 0; flex: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    border-top: 0; padding-top: 4px; margin: 0;
  }
  .pc-fp-stat {
    align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--v-surf);
    border: 1px solid var(--v-line);
  }
  .pc-fp-stat b { font-size: 16px; }
  .pc-fp-xpwrap { order: 0; flex: none; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .pc-fp-bar { flex: none; }
  .pc-fp-acts { padding: 14px 18px; }
  .pc-fp-editor { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
  .pc-fp-editor .pc-ped-field { max-width: 420px; }
  .pc-fp-ident { flex: 1 1 auto; justify-content: center; }
  /* Editor fills its column; Close/Save pin to the bottom-right, normal size. */
  .pc-fp-editor-mount { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .pc-fp-editor-mount > .pc-ped { flex: 1 1 auto; }
  .pc-fp-editor .pc-ped-footer { margin-top: auto; }
  .pc-fp-editor .pc-ped-footer .pc-fp-shop { width: auto; min-width: 140px; }
}
@media (min-width: 601px) {
  .pc-fp-editor .pc-ped { display: flex; flex-direction: column; }
  .pc-fp-editor .pc-ped-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
}
@media (min-width: 601px) {
  /* Flag list grows to fill the editor column instead of a fixed 280px box. */
  .pc-fp-editor .pc-ped-pane { flex: 1 1 auto; min-height: 0; }
  .pc-fp-editor .pc-ped-flaglist { flex: 1 1 auto; max-height: none; min-height: 120px; }
}

/* LIVE LANE (f18 r2): founder -- text "a little hard to read because of how
   small everything is", match the info page. Info uses 15px body, 12px caps,
   15px rows; the big profile now uses the same scale. Desktop big view only. */
@media (min-width: 601px) {
  .pc-full[data-page-pattern="profile"] .pc-fp-cap.pc-full-cap { font-size: 12px; }
  .pc-fp-name { font-size: 24px; }
  .pc-fp-sub, .pc-fp-xp { font-size: 14px; }
  .pc-fp-stat b { font-size: 18px; }
  .pc-fp-stat span { font-size: 13px; }
  .pc-fp-label, .pc-fp-btn { font-size: 15px; }
  .pc-fp-shop { padding: 11px 14px; }
  .pc-fp-editor .pc-ped-tab { font-size: 15px; padding: 8px 14px; }
  .pc-fp-editor .pc-ped-field > label, .pc-fp-editor .pc-ped-field b, .pc-fp-editor .pc-ped-pane > b { font-size: 15px; }
  .pc-fp-editor .pc-ped-input { font-size: 15px; padding: 10px 13px; }
  .pc-fp-editor .pc-ped-caption, .pc-fp-editor .pc-ped-err { font-size: 14px; }
  .pc-fp-editor .pc-ped-flaglist button, .pc-fp-editor .pc-ped-flaglist > * { font-size: 15px; padding-top: 7px; padding-bottom: 7px; }
  .pc-fp-editor .pc-ped-flagemoji { font-size: 22px; }
  .pc-fp-editor .pc-ped-badge b { font-size: 14px; }
  .pc-fp-editor .pc-ped-badge .pc-sm { font-size: 13px; }
  .pc-fp-editor .pc-ped-pane, .pc-fp-editor .pc-ped-pane p { font-size: 15px; }
}
@media (min-width: 601px) {
  .pc-fp-editor .pc-ped-flagrow { font-size: 15px; padding: 9px 10px; gap: 12px; }
  .pc-fp-editor .pc-ped-search, .pc-fp-editor input[type="search"] { font-size: 15px; }
  .pc-fp-editor .pc-ped-avslot { width: 76px; height: 76px; font-size: 13px; }
  .pc-fp-editor .pc-ped-slot { width: 44px; height: 44px; font-size: 15px; }
  .pc-fp-editor .pc-ped-frame { font-size: 15px; }
  .pc-fp-editor .pc-ped-sw { width: 30px; height: 30px; }
}
@media (min-width: 601px) {
  /* Keep Close/Save in view on long tabs (flags): only the list scrolls. */
  .pc-fp-editor { overflow: hidden; }
  .pc-fp-editor .pc-ped { min-height: 0; }
  .pc-fp-editor .pc-ped-body { overflow: hidden; }
  .pc-fp-editor .pc-ped-pane { overflow: auto; }
  .pc-fp-editor .pc-ped-footer { flex: none; }
}

/* Login: the account row in the full profile (replaces the old "Save player" row). */
.pc-fp-acct { padding: 6.5px 0; gap: 12px; border-bottom: 0; }
.pc-fp-acct-who { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-fp-acct-mail { color: var(--v-mut); font: 500 13px/1.3 var(--v-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-fp-signout { white-space: nowrap; flex: none; }
/* Compact card: the old Shop slot is now a quiet Sign out (not accent-coloured). */
#pc-profile-panel .pc-prof-shop.si-quiet {
  background: transparent; color: var(--v-ink); border: 1px solid var(--v-line);
}
@media all {
  /* Same pill as the crew row (34px desktop, 36px phone), same width, same 8px column gap; secondary, so no accent fill. */
  #pc-profile-panel .pc-prof-shop.si-quiet {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; box-sizing: border-box;
    margin-top: 8px; width: 100%; padding: 0 13px 0 8px; border-radius: 99px; font: 600 14px/1 var(--v-font);
    color: var(--v-mut); background: color-mix(in srgb, var(--v-ic) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--v-ic) 24%, transparent);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  #pc-profile-panel .pc-prof-shop.si-quiet:hover { color: var(--v-ink); }
  #pc-profile-panel .pc-prof-shop.si-quiet::before {
    content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5h1.5v15h-1.5zM4.5 4.5h6v1.5h-6zM4.5 18h6v1.5h-6zM9 11.25h10.5v1.5h-10.5zM18 9.75h1.5v1.5h-1.5zM18 12.75h1.5v1.5h-1.5zM16.5 8.25h1.5v1.5h-1.5zM16.5 14.25h1.5v1.5h-1.5zM19.5 11.25h1.5v1.5h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5h1.5v15h-1.5zM4.5 4.5h6v1.5h-6zM4.5 18h6v1.5h-6zM9 11.25h10.5v1.5h-10.5zM18 9.75h1.5v1.5h-1.5zM18 12.75h1.5v1.5h-1.5zM16.5 8.25h1.5v1.5h-1.5zM16.5 14.25h1.5v1.5h-1.5zM19.5 11.25h1.5v1.5h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* Progress batch: streak + achievements row beneath the identity/editor columns.
   The box scrolls (.pc-fp is overflow:auto) when the window is shorter than the
   content; the editor row keeps its own height so its flag list still fills. */
.pc-fp { display: flex; flex-direction: column; }
.pc-fp-prog { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; padding: 0 20px 22px; flex: none; }
.pc-fp-streak, .pc-fp-achv {
  border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-surf2); padding: 14px 18px; margin: 0; overflow: hidden;
}
.pc-fp-streak { align-self: start; }
@media (min-width: 601px) {
  .pc-fp-main { height: auto; flex: 0 0 auto; min-height: 440px; }
}
@media (max-width: 600px) {
  .pc-fp-prog { grid-template-columns: 1fr; padding: 0 12px 16px; }
}

/* P5 (founder 2026-10-04: "Wplace does a better job presenting information in a
   more visual manner ... colors and pills"): the compact pane's stats are pills,
   icon + number + soft tint, in the crew pill's shape. Old text rows stay in
   the markup for the phone sheet and hide here. The Edit button sits at the end
   of the name row at header-button size (.pc-hcb). */
/* Phone and desktop both show the pills; the old text rows hide at every width. */
#pc-profile-panel .pc-prof-lv, #pc-profile-panel .pc-prof-bar,
#pc-profile-panel .pc-prof-coins > #pc-prof-coins, #pc-profile-panel .pc-prof-stats,
#pc-profile-panel #pc-prof-badges:empty { display: none; }
@media (min-width: 601px) {
  #pc-profile-panel .pc-prof-sub { display: none; }
  #pc-profile-panel .pc-prof-who { flex: 1 1 auto; min-width: 0; }
  #pc-profile-panel .pc-prof-head > .pc-hcb.pc-prof-edit { display: grid; flex: none; transition: background-color .16s ease, color .16s ease; }
  /* One quiet hover for every header button (Edit, Close): a step darker, never accent-filled. */
  #pc-profile-panel .pc-hcb { transition: background-color .16s ease, color .16s ease; }
  #pc-profile-panel .pc-hcb:hover { background: var(--v-line); color: var(--v-ink); }
  /* 4: long names stay on one line; the copy button stays inline; Edit stays centred on the row. */
  #pc-profile-panel #pc-prof-title { flex-wrap: nowrap; align-items: center; min-width: 0; }
  #pc-profile-panel #pc-prof-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pc-profile-panel #pc-prof-title .pc-id-flag:empty { display: none; } /* an empty flag still took 6px of name room */
  #pc-profile-panel .pc-prof-head > .pc-prof-edit .pc-icon { width: 17.3px; height: 17.3px; }
  #pc-profile-panel .pc-prof-shop { margin-top: 14.4px; }
}
/* Pills: unscoped by width (the phone sheet wears the same pills as the desktop pane). */
@media all {
  .pc-pp { display: flex; flex-direction: column; gap: 8px; padding-top: 14.4px; border-top: 1px solid var(--v-line); }
  /* Pills size to their content and the row wraps: a number is never ellipsised (123.5K, 9.9M, 100). */
  .pc-pp-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .pc-pp-row > .pc-pp-pill { flex: 1 1 auto; min-width: 0; padding-right: 9px; } /* P5 r7: no forced wrap (min-width:max-content gave streak its own row at 999,999); flex-basis is the content width, so the row still wraps only when the pills cannot fit and a number is never clipped */
  .pc-pp-pill {
    --pp-tint: var(--v-acc);
    display: flex; align-items: center; gap: 6px; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 11px 0 8px;
    border-radius: 99px; color: var(--v-ink);
    background: color-mix(in srgb, var(--pp-tint) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pp-tint) 32%, transparent);
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  /* One quiet hover for the controls that act (crew, Sign out): a soft grey wash over the pill's own tint and a
     darker border in the same tint. Never blue; blue is only an open toggle. The stat pills (level, coins, pixels,
     streak) are display-only: no hover, default cursor. */
  #pc-profile-panel { --pp-hov: color-mix(in srgb, var(--v-line) 80%, transparent); }
  #pc-profile-panel .pc-pp-pill { cursor: default; }
  #pc-profile-panel .pc-pp .mm-cr-rowbtn:hover, #pc-profile-panel .pc-prof-shop.si-quiet:hover {
    box-shadow: inset 0 0 0 99px var(--pp-hov);
    border-color: color-mix(in srgb, var(--pp-tint, var(--v-ic)) 48%, transparent);
  }
  .pc-pp-ic { width: 20px; height: 20px; flex: none; color: var(--pp-tint); }
  .pc-pp-num {
    font: 700 15px/1 var(--v-font); font-variant-numeric: tabular-nums;
    flex: none; white-space: nowrap;
  }
  .pc-pp-pill[data-stat="coins"] { --pp-tint: var(--pc-gold); }
  .pc-pp-pill[data-stat="pixels"] { --pp-tint: var(--v-acc2, var(--v-acc)); }
  /* Dark's accent is yellow, next to the gold coin: pixels go neutral there. */
  :root[data-theme="dark"] .pc-pp-pill[data-stat="pixels"] { --pp-tint: var(--v-ic); }
  /* Streak: one red flame token (--pc-flame, profile.css). Three looks: zero is muted and flat,
     painted today is lit with a stronger tint and glow, alive-but-not-painted is dimmed with a dashed outline. */
  .pc-pp-pill[data-stat="streak"] { --pp-tint: var(--pc-flame); }
  /* The pixel fire fills 15 of 24 units tall, coin and star fill 18: draw it at 24px (-2px margin keeps the 20px slot) so all three read 15px. */
  .pc-pp-pill[data-stat="streak"] .pc-pp-ic { width: 24px; height: 24px; margin: -2px; }
  .pc-pp-pill[data-stat="streak"][data-state="today"] {
    background: color-mix(in srgb, var(--pc-flame) 20%, transparent);
    border-color: color-mix(in srgb, var(--pc-flame) 60%, transparent);
  }
  .pc-pp-pill[data-stat="streak"][data-state="today"] .pc-pp-ic { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pc-flame) 70%, transparent)); }
  .pc-pp-pill[data-stat="streak"][data-state="risk"] {
    background: color-mix(in srgb, var(--pc-flame) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--pc-flame) 70%, transparent);
  }
  .pc-pp-pill[data-stat="streak"][data-state="risk"] .pc-pp-ic { opacity: .85; }
  .pc-pp-pill[data-stat="streak"][data-state="zero"], .pc-pp-pill[data-stat="streak"][data-state="none"] {
    --pp-tint: var(--v-mut);
    background: color-mix(in srgb, var(--v-mut) 7%, transparent);
    border-color: var(--v-line);
  }
  .pc-pp-pill[data-stat="streak"][data-state="zero"] .pc-pp-ic, .pc-pp-pill[data-stat="streak"][data-state="none"] .pc-pp-ic { opacity: .6; }
  .pc-pp-pill[data-stat="streak"][data-state="zero"] .pc-pp-num, .pc-pp-pill[data-stat="streak"][data-state="none"] .pc-pp-num { color: var(--v-mut); }
  /* Level: neutral pill, accent star and XP bar inside it; the level badge reads in the pixel face. */
  .pc-pp-level { --pp-tint: var(--v-ic); background: color-mix(in srgb, var(--pp-tint) 10%, transparent); border-color: color-mix(in srgb, var(--pp-tint) 24%, transparent); }
  .pc-pp-level .pc-pp-ic { color: var(--v-acc); }
  .pc-pp-level .pc-pp-num { flex: none; font: 700 13px/1 var(--pc-font-num); letter-spacing: .5px; }
  .pc-pp-bar { flex: 1 1 auto; height: 8px; margin: 0 2px 0 4px; border-radius: 99px; background: var(--v-trk); overflow: hidden; }
  .pc-pp-fill { display: block; height: 100%; width: 0; background: var(--v-acc); border-radius: inherit; transition: width .28s ease-out; }
  .pc-pp-pct { flex: none; font: 600 13px/1 var(--v-font); color: var(--v-mut); font-variant-numeric: tabular-nums; }

  /* Crew row (crews.js) joins the pills: same shape, users icon, chevron, no "Crew" word. */
  #pc-profile-panel .pc-pp .mm-cr-row { margin: 0; padding: 0; border: 0; }
  #pc-profile-panel .pc-pp .mm-cr-rowbtn {
    --pp-tint: var(--v-ic);
    height: 34px; padding: 0 13px 0 8px; gap: 6px; justify-content: flex-start; border-radius: 99px;
    background: color-mix(in srgb, var(--pp-tint) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pp-tint) 24%, transparent);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  }
  #pc-profile-panel .pc-pp .mm-cr-rowbtn::before {
    content: ""; flex: none; width: 20px; height: 20px; background: var(--pp-tint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.75 4.5h4.5v1.5h-4.5zM14.25 4.5h3v1.5h-3zM5.25 6h1.5v4.5h-1.5zM11.25 6h1.5v4.5h-1.5zM17.25 6h1.5v4.5h-1.5zM6.75 10.5h4.5v1.5h-4.5zM14.25 10.5h3v1.5h-3zM6 13.5h6v1.5h-6zM15 13.5h3v1.5h-3zM4.5 15h1.5v1.5h-1.5zM12 15h1.5v1.5h-1.5zM18 15h1.5v1.5h-1.5zM3 16.5h1.5v3h-1.5zM13.5 16.5h1.5v3h-1.5zM19.5 16.5h1.5v3h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.75 4.5h4.5v1.5h-4.5zM14.25 4.5h3v1.5h-3zM5.25 6h1.5v4.5h-1.5zM11.25 6h1.5v4.5h-1.5zM17.25 6h1.5v4.5h-1.5zM6.75 10.5h4.5v1.5h-4.5zM14.25 10.5h3v1.5h-3zM6 13.5h6v1.5h-6zM15 13.5h3v1.5h-3zM4.5 15h1.5v1.5h-1.5zM12 15h1.5v1.5h-1.5zM18 15h1.5v1.5h-1.5zM3 16.5h1.5v3h-1.5zM13.5 16.5h1.5v3h-1.5zM19.5 16.5h1.5v3h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #pc-profile-panel .pc-pp .mm-cr-rowbtn::after {
    content: ""; flex: none; width: 6px; height: 6px; margin-left: auto;
    border-top: 2px solid var(--v-mut); border-right: 2px solid var(--v-mut); transform: rotate(45deg);
  }
  #pc-profile-panel .pc-pp .mm-cr-rowl { display: none; }
  #pc-profile-panel .pc-pp .mm-cr-rowr { min-width: 0; color: var(--v-ink); font: 600 15px/1 var(--v-font); }
  #pc-profile-panel .pc-pp .mm-cr-chip { height: 22px; min-width: 0; }
}
/* Avatar and name are the primary way into the full Player card (the pencil is the way in with the name field focused). */
#pc-profile-panel #pc-prof-av[role="button"] {
  cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .16s ease;
}
#pc-profile-panel #pc-prof-av[role="button"]:hover { outline-color: color-mix(in srgb, var(--v-ic) 40%, transparent); }
#pc-profile-panel #pc-prof-name[role="button"] {
  cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; transition: background-color .16s ease;
}
#pc-profile-panel #pc-prof-name[role="button"]:hover { background: var(--v-line); }
#pc-profile-panel #pc-prof-av[role="button"]:focus-visible, #pc-profile-panel #pc-prof-name[role="button"]:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
/* One idea per card: the full Player card owns Copy ID, so the compact name row has no copy button. */
#pc-profile-panel .pc-id-copy { display: none; }
@media (max-width: 600px) {
  /* Phone pills: 36px tall so the tappable crew pill meets the 36px target; the row wraps. */
  .pc-pp-pill, #pc-profile-panel .pc-pp .mm-cr-rowbtn { height: 36px; }
  #pc-profile-panel .pc-pp .mm-cr-row { width: 100%; }
  #pc-profile-panel .pc-pp .mm-cr-rowbtn { width: 100%; min-height: 36px; }
  .pc-pp-level { width: 100%; }
  /* Header only: Edit, Expand and Close are the same 36px square on one centre line (Close used to be absolute at top 12px). */
  #pc-profile-panel .pc-prof-head { gap: 8px; }
  #pc-profile-panel .pc-prof-head > .pc-hcb, #pc-profile-panel .pc-prof-head > .pc-sheet-x {
    position: static; flex: none; width: 36px; height: 36px; margin: 0; border-radius: 12px; display: grid; place-items: center;
  }
  #pc-profile-panel .pc-prof-head > .pc-hcb .pc-icon, #pc-profile-panel .pc-prof-head > .pc-sheet-x .pc-icon { width: 17.3px; height: 17.3px; }
  #pc-profile-panel .pc-prof-who { flex: 1 1 auto; min-width: 0; }
  #pc-profile-panel .pc-prof-av { flex: none; } /* a long name must truncate, never squeeze the 48px avatar */
  #pc-profile-panel #pc-prof-title { flex-wrap: nowrap; align-items: center; min-width: 0; }
  #pc-profile-panel #pc-prof-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pc-profile-panel #pc-prof-title .pc-id-flag:empty { display: none; }
  /* Sign out: the coins wrapper's own box (padding, fill) goes away so the pill sits in the same 340px column as the crew row. */
  #pc-profile-panel .pc-prof-coins { display: contents; }
  #pc-profile-panel .pc-prof-shop.si-quiet { height: 36px; min-height: 36px; width: 100%; margin-top: 8px; }
}

/* P5 r4: the full card's stat tiles wear the compact pill's icon and tint (star, coin, brush). */
.pc-fp-stat { --pp-tint: var(--v-acc); gap: 2px; align-items: center; background: color-mix(in srgb, var(--pp-tint) 12%, var(--v-surf)); border: 1px solid color-mix(in srgb, var(--pp-tint) 30%, transparent); border-radius: 12px; padding: 10px 4px; }
.pc-fp-stat[data-stat="level"] { --pp-tint: var(--v-ic); }
.pc-fp-stat[data-stat="coins"] { --pp-tint: var(--pc-gold); }
.pc-fp-stat[data-stat="pixels"] { --pp-tint: var(--v-acc2, var(--v-acc)); }
:root[data-theme="dark"] .pc-fp-stat[data-stat="pixels"] { --pp-tint: var(--v-ic); }
.pc-fp-stat-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--pp-tint); }
.pc-fp-stat[data-stat="level"] .pc-fp-stat-ic { color: var(--v-acc); }
.pc-fp-stat-ic .pc-pp-ic { width: 22px; height: 22px; margin: 0; }
.pc-fp-stats .pc-fp-stat b { white-space: nowrap; }
.pc-fp-sub[hidden], .pc-prof-sub[hidden], #pc-profile-panel .pc-prof-sub[hidden] { display: none; }
.pc-fp-stat[data-stat="level"] .pc-pp-ic { color: var(--v-acc); }
@media (max-width: 600px) {
  /* Phone: three equal tiles (the flex row sized each tile to its own text). */
  .pc-fp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .pc-fp-stats .pc-fp-stat { padding: 10px 2px; min-width: 0; }
  .pc-fp-stats .pc-fp-stat b { font-size: 16px; }
}

/* P5 r6: on the phone the player card's header and body sit over the map; --v-surf is ~90% opaque, so the map's
   logo showed through the "Player card" title. Layer the surface over the solid page colour: same look, no see-through. */
@media (max-width: 600px) {
  .pc-full[data-view="profile"], .pc-full[data-view="profile"] .pc-full-head {
    background: linear-gradient(var(--v-surf), var(--v-surf)), var(--v-bg);
  }
}