.pf { display: grid; gap: 16px; }
.pf-missing { color: #fff; font-size: 20px; text-shadow: 2px 2px 0 var(--title-a); }
.card-pf { background: var(--panel); border-radius: 18px; overflow: hidden; }
.pf-banner { height: clamp(120px, 22vw, 240px); background: linear-gradient(120deg, #ff5fa2, #8b6cff 50%, #3ee6ff); background-size: cover; background-position: center; }
.pf-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 20px; margin-top: -56px; flex-wrap: wrap; }
.pf-frame { position: relative; display: inline-grid; flex: none; border-radius: 50%; align-self: flex-end; }
.pf-frame.avf::after { inset: -7px; border-width: 6px; }
.pf-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: #f4efff; border: 5px solid #1a1147; flex: none; }
.pf-id { flex: 1; min-width: 200px; padding-bottom: 6px; }
.pf-id h1 { margin: 0; font: 700 clamp(26px, 4vw, 40px)/1.1 var(--body); color: #fff; text-shadow: none; }
.pf-id h1 .nt-arcade, .pf-id h1 .nt-vapor { font-family: var(--display); }
.pf-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pf-meta .on { color: #4dff8f; font-weight: 700; }
.pf-actions { display: flex; gap: 8px; padding-bottom: 10px; }
.pf-bio { margin: 12px 20px 20px; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-bio:empty { display: none; }
.pf-featured { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-stats div { background: var(--panel); border-radius: 14px; padding: 12px 14px; }
.pf-stats small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-stats b { font: 700 20px ui-monospace, Consolas, monospace; color: #fff; }
.pf-stats b.up { color: #7dff9b; } .pf-stats b.down { color: #ff8aa8; }

/* badges */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; }
.badge .ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #f4efff; }
.badge .ring img { width: 30px; height: 30px; }
.badge b { display: block; font-size: 14px; color: #fff; }
.badge small { color: var(--muted); font-size: 12px; }
.badge.locked { opacity: .7; }
.badge.locked .ring { filter: grayscale(1); }
.tier-bronze .ring { box-shadow: 0 0 0 3px #d68a4c; }
.tier-silver .ring { box-shadow: 0 0 0 3px #dfe3ff; }
.tier-gold .ring { box-shadow: 0 0 0 3px #ffd84d; }
.tier-rainbow .ring { box-shadow: 0 0 0 3px #ff5fa2, 0 0 0 6px #3ee6ff; }
.chipbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 8px 3px 3px; border-radius: 999px; background: var(--panel-2); color: #fff; }
.chipbadge img { width: 20px; height: 20px; background: #f4efff; border-radius: 50%; padding: 2px; }

/* move & zoom editor */
.cropper { border: 0; border-radius: 18px; background: #1a1147; color: var(--text); padding: 18px; width: min(620px, calc(100% - 20px)); }
.cropper::backdrop { background: rgba(5, 3, 20, .75); }
.cropper h2 { margin: 0 0 4px; font: 400 22px var(--display); color: var(--gold); }
.crop-view { position: relative; overflow: hidden; margin: 12px auto; background: #000; touch-action: none; cursor: grab; user-select: none;
             width: var(--vw); height: var(--vh); border-radius: 12px; }
.crop-view:active { cursor: grabbing; }
.crop-view:focus-visible { outline: 3px dashed var(--pink); outline-offset: 3px; }
.crop-view img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; will-change: transform; }
/* avatar: dim everything outside the circle */
.crop-view.round .crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(5, 3, 20, .6); pointer-events: none;
                              outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -2px; }
.crop-view.wide .crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); border-radius: 12px; }
.crop-zoom { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--pink); }
.crop-btns { display: flex; gap: 8px; margin-top: 14px; }
.crop-btns .grow { flex: 1; }

/* editing */
.edit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.edit-grid .wide { grid-column: span 2; }
.file-btn { cursor: pointer; }
textarea { width: 100%; font: 400 16px var(--body); padding: 10px; border-radius: 10px; border: 0; background: #f7f3ff; color: var(--ink); resize: vertical; }
.pick-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-badges button { border: 0; cursor: pointer; }
.pick-badges button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.pick-badges .none { color: var(--muted); font-size: 14px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) { .edit-grid { grid-template-columns: 1fr; } .edit-grid .wide { grid-column: auto; } .pf-head { margin-top: -44px; } .pf-avatar { width: 96px; height: 96px; } }

/* leaderboard place next to the name: top 3 big, coloured and twinkling; the rest small and plain */
.pf-nameline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-rank { font: 700 16px/1 ui-monospace, Consolas, monospace; color: var(--muted); text-decoration: none; padding: 3px 8px; border-radius: 999px; background: rgba(185, 173, 223, .14); }
.pf-rank:hover { text-decoration: underline; }
.pf-rank.top { position: relative; font: 400 clamp(24px, 3.4vw, 34px)/1 var(--display); background: none; padding: 0 6px; --c: #ffd84d; color: var(--c);
  text-shadow: 2px 2px 0 #1a1147, 0 0 12px var(--c); animation: rank-glow 2.4s ease-in-out infinite; }
.pf-rank.r2 { --c: #e4e9ff; }
.pf-rank.r3 { --c: #ff9a5a; }
.pf-rank.top::before, .pf-rank.top::after { content: "\2726"; position: absolute; font-size: 13px; color: #fff; text-shadow: 0 0 6px var(--c); animation: rank-twinkle 1.8s ease-in-out infinite; pointer-events: none; }
.pf-rank.top::before { top: -8px; right: -6px; }
.pf-rank.top::after { bottom: -6px; left: -4px; font-size: 10px; animation-delay: .9s; }
@keyframes rank-glow { 50% { text-shadow: 2px 2px 0 #1a1147, 0 0 22px var(--c), 0 0 4px #fff; } }
@keyframes rank-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .pf-rank.top, .pf-rank.top::before, .pf-rank.top::after { animation: none; } }

/* custom page background + profile colour */
body.pf-has-bg { background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
@media (max-width: 820px) { body.pf-has-bg { background-attachment: scroll; } }
.pf.has-accent .card-pf, .pf.has-accent .gpanel, .pf.has-accent .pf-stats div { background: color-mix(in srgb, var(--accent) 30%, rgba(12, 7, 36, .93)); }
.pf.has-accent .badge, .pf.has-accent .chipbadge { background: color-mix(in srgb, var(--accent) 45%, rgba(20, 12, 56, .95)); }
.pf.has-accent .card-pf { box-shadow: 0 0 0 3px var(--accent); }
.pf.has-accent .gpanel h3 { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.pf.has-accent .pf-banner { background-image: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #1a1147)); }
.pf.has-accent .pf-avatar { border-color: color-mix(in srgb, var(--accent) 40%, #1a1147); }
#accent-in { width: 56px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }