/* Survivor Profile, Details, Account, Settings (client/panels-profile.js) — Chaos Barricade's own look:
   dark wasteland panels, gold trim, dog-tag portrait on a chain, rust/steel accents. */
.pf2-root { min-height: 100%; display: flex; flex-direction: column; }
.pf2-time { align-self: flex-start; margin: 0 0 8px; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.45); font-size: 12px; color: var(--muted); }
.pf2-time b { color: var(--pn-gold); font-family: ui-monospace, Menlo, monospace; }
.pf2-hero { position: relative; display: grid; justify-items: center; gap: 8px; padding: 6px 0 4px; }
.pf2-tag { position: relative; display: grid; justify-items: center; }
.pf2-tag .chain { position: absolute; top: -18px; width: 120px; height: 30px; border-top: 3px dotted #a6a9ad; border-radius: 50% 50% 0 0; }
.pf2-photo { position: relative; padding: 8px 8px 30px; border-radius: 14px 14px 22px 22px; cursor: pointer;
  background: linear-gradient(160deg, #c9ced3, #7f868d 40%, #a9afb5 70%, #5d646b); box-shadow: 0 0 0 2px #2a2f33, 0 10px 22px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.6); }
.pf2-photo::before { content: ''; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #2a2f33; box-shadow: inset 0 1px 2px #000; }
.pf2-photo .pn-portrait, .pf2-photo img { width: 150px !important; height: 150px !important; border-radius: 10px !important; border: 3px solid #3a3f44 !important; object-fit: cover; object-position: top; margin-top: 8px; }
.pf2-likes { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font: 800 14px/1 system-ui; color: #2a1a12; }
.pf2-vip { display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(var(--c-amber-pale), var(--c-amber) 55%, #b8741f); color: #3a2304; font: 900 16px/1 system-ui; box-shadow: 0 0 0 2px #6b3f0e, 0 4px 10px rgba(240,180,60,.35); }
.pf2-vip span { font-size: 20px; }
.pf2-vipbar { position: relative; width: min(320px, 90%); height: 18px; border-radius: 9px; overflow: hidden; background: #1a1206; box-shadow: 0 0 0 2px #6b3f0e; display: grid; place-items: center; }
.pf2-vipbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--c-amber-lo), #ffd27a); }
.pf2-vipbar b { position: relative; font: 800 11px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000; }
.pf2-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0; font: 900 22px/1.1 system-ui; }
.pf2-name .flag { font-size: 24px; cursor: pointer; }
.pf2-copy { min-height: 28px; padding: 3px 10px; font: 700 12px/1.2 system-ui; border-radius: 999px; background: var(--c-ink); border: 1px solid var(--line); color: var(--muted); }
.pf2-rows { display: grid; gap: 6px; }
.pf2-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: linear-gradient(#1f2a22, #151d18); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--pn-gold2); }
.pf2-row .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--c-ink); }
.pf2-row .k { color: var(--muted); font-size: 14px; } .pf2-row b { font-size: 16px; font-weight: 800; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf2-row .go { opacity: .6; font-size: 14px; }
.pf2-bio { position: relative; margin-top: 10px; padding: 12px 36px 12px 12px; border-radius: 12px; background: #0f1611; border: 1px dashed #3a4a3e; color: #dfe8e1; font-size: 14px; line-height: 1.45; white-space: pre-wrap; cursor: pointer; }
.pf2-bio .pen { position: absolute; right: 10px; top: 10px; color: var(--pn-gold); }
.pf2-bio.edit { padding: 10px; cursor: default; }
.pf2-spacer { flex: 1 0 16px; }
.pf2-bar { position: sticky; bottom: 0; margin: 12px -12px 0; padding: 8px 10px calc(10px + var(--safe-bottom)); display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 4px; align-items: center;
  background: linear-gradient(#1a2420, #0e1411); border-top: 2px solid var(--pn-gold2); box-shadow: 0 -6px 14px rgba(0,0,0,.45); }
.pf2-bar button { padding: 4px 0; border: 0; background: none; display: grid; justify-items: center; gap: 2px; color: #fff; }
.pf2-bar button span { font-size: 24px; } .pf2-bar button b { font: 800 11px/1 system-ui; color: var(--muted); }
.pf2-bar .back { width: 48px; height: 48px; border-radius: 50%; font-size: 22px; background: radial-gradient(circle at 50% 35%, #3a4a3e, #1a241e); box-shadow: 0 0 0 2px var(--pn-gold2); }
/* sheets */
.pf2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 10px; padding: 3px; border-radius: 12px; background: var(--c-ink); }
.pf2-tabs button { border: 0; padding: 8px 4px; border-radius: 9px; background: none; font-weight: 700; color: var(--muted); }
.pf2-tabs button.on { background: linear-gradient(var(--c-amber-hi), #e3a03a); color: #2a1a04; }
.pf2-dsec { margin-bottom: 10px; border-radius: 12px; overflow: hidden; background: #141c17; border: 1px solid var(--line); }
.pf2-dsec h4 { margin: 0; padding: 8px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pn-gold); background: var(--c-panel); }
.pf2-drow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 14px; border-top: 1px solid rgba(255,255,255,.04); }
.pf2-drow:nth-child(even) { background: rgba(255,255,255,.02); } .pf2-drow span { color: var(--muted); } .pf2-drow b { font-weight: 800; }
.pf2-acc { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 10px; margin: 6px 0 12px; border-radius: 12px; background: #141c17; border: 1px solid var(--line); }
.pf2-acc .pn-portrait, .pf2-acc img { width: 64px !important; height: 64px !important; border-radius: 12px !important; object-fit: cover; object-position: top; }
.pf2-arow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0; } .pf2-arow span { color: var(--muted); }
.pf2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; padding: 6px 0 8px; }
.pf2-tile { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); }
.pf2-tile .ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: radial-gradient(circle at 50% 35%, #2f3e34, #121a15); box-shadow: 0 0 0 2px var(--pn-gold2), 0 5px 10px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.08); }
.pf2-tile:active .ic { transform: scale(.94); } .pf2-tile b { font: 700 12px/1.1 system-ui; text-align: center; }
.pf2-char { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #1f2a22; border: 1px solid var(--pn-gold2); }
.pf2-char .ic { font-size: 30px; } .pf2-char small { display: block; color: var(--muted); font-size: 12px; } .pf2-char .ok { color: var(--good); font-size: 20px; }
.pf2-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--c-ink); }
.pf2-seg button { min-height: 28px; padding: 5px 10px; border: 0; border-radius: 8px; background: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.pf2-seg button.on { background: var(--pn-gold); color: var(--c-amber-ink); }
.pf2-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pf2-langs button { text-align: left; } .pf2-langs button.on { border-color: var(--pn-gold); color: var(--pn-gold); }
.pf2-flags { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pf2-flags button { font-size: 28px; padding: 8px 0; } .pf2-flags button.on { border-color: var(--pn-gold); box-shadow: 0 0 0 2px var(--pn-gold); }

/* ---------- profile v3: banner card, animated frame, stat tiles, portrait picker ---------- */
.pf3-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; margin: 0 0 10px; padding: 10px 12px 22px; border-radius: 18px;
  background: radial-gradient(120% 80% at 50% 0%, #3a2a12 0%, #1a1f17 55%, #0d120e 100%); border: 1px solid #6b4a17;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.15), 0 10px 24px rgba(0,0,0,.45); isolation: isolate; }
.pf3-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; object-position: top; filter: blur(18px) saturate(1.3) brightness(.45); z-index: -2; transform: scale(1.1); }
.pf3-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 38%, transparent, rgba(5,8,6,.75)); pointer-events: none; }
.pf3-embers { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.pf3-embers i { position: absolute; bottom: -6px; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 6px 2px rgba(255,140,40,.7);
  animation: pf3Ember var(--d) linear infinite; opacity: 0; }
@keyframes pf3Ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(var(--w), -260px) scale(.3); opacity: 0; } }
.pf3-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.pf3-top .pf2-time { margin: 0; }
.pf3-likes { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); font-size: 13px; } .pf3-likes b { color: #ff8fa3; }
.pf3-frame { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-top: 2px; }
.pf3-frame.mine { cursor: pointer; } .pf3-frame.mine:active { transform: scale(.97); }
@property --pf3a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pf3-ring { position: absolute; inset: 0; border-radius: 34px; background: conic-gradient(from var(--pf3a), var(--c-amber-pale), #b8741f, #fff3c4, var(--c-amber-lo), var(--c-amber-deep), var(--c-amber-pale));
  animation: pf3Spin 5s linear infinite, pf3Glow 2.6s ease-in-out infinite; }
.pf3-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 30px; background: #120d06; }
@keyframes pf3Spin { to { --pf3a: 360deg; } }
@keyframes pf3Glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(240,180,60,.4)); } 50% { filter: drop-shadow(0 0 16px rgba(255,190,70,.8)); } }
.pf3-pic { position: relative; width: 132px; height: 132px; border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.6); }
.pf3-pic .pn-portrait, .pf3-pic img { width: 132px !important; height: 132px !important; border-radius: 28px !important; object-fit: cover; object-position: top; }
.pf3-pic .pn-portrait-fallback { background: linear-gradient(150deg, #2b3a2f, #101712); color: var(--pn-gold); font: 900 52px/1 system-ui; letter-spacing: .02em; }
.pf3-cam { position: absolute; right: -2px; bottom: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(var(--c-amber-pale), #e3a03a); box-shadow: 0 0 0 3px #2a1a04, 0 4px 10px rgba(0,0,0,.5); animation: pf3Pulse 2.4s ease-in-out infinite; }
@keyframes pf3Pulse { 50% { transform: scale(1.1); } }
.pf3-name { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 900 24px/1.1 system-ui; text-shadow: 0 2px 0 #000, 0 0 18px rgba(240,180,60,.35); }
.pf3-name .flag { font-size: 24px; cursor: pointer; }
.pf3-tag { padding: 2px 8px; border-radius: 7px; background: linear-gradient(var(--c-amber-hi), #e3a03a); color: #2a1a04; font: 900 13px/1.3 system-ui; text-shadow: none; }
.pf3-sub { display: flex; align-items: center; gap: 8px; color: #e8d9b8; font-size: 13px; }
.pf3-vip { cursor: pointer; display: flex; align-items: center; gap: 10px; width: min(360px, 100%); margin-top: 4px; }
.pf3-vip .pf2-vip { padding: 4px 10px; font-size: 13px; flex: none; } .pf3-vip .pf2-vip span { font-size: 15px; }
.pf3-vip .pf2-vipbar { flex: 1; width: auto; }
.pf3-hazard { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--c-amber) 0 10px, #1a1206 10px 20px); opacity: .85; }
.pf3-power { width: 100%; display: grid; grid-template-columns: 44px auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; text-align: left;
  position: relative; overflow: hidden; background: linear-gradient(100deg, #2a1d08, #3d2a0b 50%, #2a1d08); border: 1px solid #8a5e1c; box-shadow: inset 0 1px 0 rgba(255,220,150,.2); }
.pf3-power::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,230,160,.18), transparent); animation: pf3Sheen 3.5s ease-in-out infinite; }
@keyframes pf3Sheen { 60%, 100% { left: 120%; } }
.pf3-power .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: rgba(0,0,0,.35); }
.pf3-power .k { color: #e8d9b8; font-weight: 700; } .pf3-power b { justify-self: end; font: 900 22px/1 system-ui; color: var(--c-amber-hi); text-shadow: 0 0 12px rgba(255,190,70,.4); }
.pf3-power .go { color: var(--pn-gold); font-size: 22px; }
.pf3-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf3-stat { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; text-align: left; min-width: 0;
  background: linear-gradient(160deg, #1f2a22, #121a15); border: 1px solid var(--line); --c: var(--c-muted); box-shadow: inset 0 -3px 0 var(--c); }
.pf3-stat:disabled { opacity: 1; cursor: default; }
.pf3-stat .ic { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--c); }
.pf3-stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pf3-stat b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf3-stat.red { --c: var(--c-blood); } .pf3-stat.blue { --c: var(--c-blue); } .pf3-stat.gold { --c: var(--c-amber); } .pf3-stat.green { --c: var(--c-good); }
/* portrait picker */
.pf3-now { display: grid; place-items: center; margin: 4px 0 10px; }
.pf3-now .pn-portrait { border-radius: 24px !important; border: 3px solid var(--pn-gold); box-shadow: 0 0 18px rgba(240,180,60,.4); object-position: top; }
.pf3-upload { width: 100%; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(var(--c-amber-hi), #e3a03a); color: #2a1a04; border: 0; box-shadow: 0 4px 0 #8a5e1c; }
.pf3-upload span { grid-row: 1 / 3; font-size: 32px; } .pf3-upload b { font-size: 17px; } .pf3-upload small { opacity: .75; }
.pf3-upload:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a5e1c; }
.pf3-remove { width: 100%; margin-top: 8px; color: #ff9a8f; }
.pf3-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf3-pick { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; }
.pf3-pick .pn-portrait { border-radius: 12px !important; object-position: top; }
.pf3-pick b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pf3-pick.on { border-color: var(--pn-gold); box-shadow: 0 0 0 2px var(--pn-gold); }
img.pn-photo { object-position: center !important; object-fit: cover; } /* a GIF is not cropped square on upload */

/* screen orientation picker */
.pf3-orient { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf3-or { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; text-align: center; background: linear-gradient(160deg, #1f2a22, #121a15); }
.pf3-or .ic { font-size: 34px; } .pf3-or.land .ic { transform: rotate(-90deg); } .pf3-or b { font-size: 14px; } .pf3-or small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.pf3-or.on { border-color: var(--pn-gold); box-shadow: 0 0 0 2px var(--pn-gold), 0 0 16px rgba(240,180,60,.3); }
.pf3-emb { display: inline-flex; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

/* ---------- profile v4: survivor dossier layout (dark theme) — polaroid on a line, VIP badge, edit fields, stat lines ---------- */
.pf4-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px 22px; border-radius: 18px;
  background: radial-gradient(120% 80% at 50% 0%, #3a2a12 0%, #1a1f17 55%, #0d120e 100%); border: 1px solid #6b4a17;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.15), 0 10px 24px rgba(0,0,0,.45); isolation: isolate; }
.pf4-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 38%, transparent, rgba(5,8,6,.75)); pointer-events: none; }
.pf4-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf4-top .pf2-time { margin: 0; padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,.5); font-size: 12px; }
/* the line the polaroid hangs from: a sagging rope across the card */
.pf4-line-rope { position: absolute; left: -10px; right: -10px; top: 58px; height: 40px; border-top: 2px solid #7a5a32; border-radius: 50% / 100% 100% 0 0;
  transform: scaleY(-1); transform-origin: top; opacity: .85; filter: drop-shadow(0 2px 1px rgba(0,0,0,.6)); pointer-events: none; }
.pf4-polaroid { position: relative; width: 172px; margin-top: 18px; padding: 10px 10px 0; background: linear-gradient(#f3ead6, #e2d5b8); border-radius: 3px;
  transform: rotate(-1.5deg); box-shadow: 0 10px 20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(80,55,20,.25); }
.pf4-polaroid .sheet { position: absolute; inset: 0; z-index: -1; background: #d8ccb0; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pf4-polaroid .s1 { transform: rotate(4deg) translate(6px, 4px); } .pf4-polaroid .s2 { transform: rotate(-4deg) translate(-5px, 6px); background: #cfc2a4; }
.pf4-polaroid .pin { position: absolute; left: 50%; top: -16px; width: 16px; height: 30px; margin-left: -8px; border-radius: 3px; z-index: 2;
  background: linear-gradient(90deg, #8a5a2a, #c88a46 45%, #7a4c20); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.pf4-polaroid .photo { width: 152px; height: 152px; overflow: hidden; background: #222; cursor: pointer; }
.pf4-polaroid .photo .pn-portrait, .pf4-polaroid .photo img { width: 152px !important; height: 152px !important; border-radius: 0 !important; object-fit: cover; object-position: top; }
.pf4-polaroid .photo .pn-portrait-fallback { background: linear-gradient(150deg, #2b3a2f, #101712); color: var(--pn-gold); font: 900 56px/1 system-ui; }
.pf4-polaroid .foot { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 2px; }
.pf4-polaroid .likes { color: #3a2a18; font: 900 17px/1 system-ui; } .pf4-polaroid .likes b { color: #3a2a18; }
.pf4-polaroid .swap { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font-size: 16px; background: radial-gradient(circle at 40% 35%, #7cc4ff, #2a6fc0); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); }
/* VIP: a big badge with the level, then the points bar and a + */
.pf4-vip { display: grid; justify-items: center; gap: 8px; width: min(380px, 100%); padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; }
.pf4-vip .badge { position: relative; display: grid; place-items: center; width: 74px; height: 66px; clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%);
  background: linear-gradient(var(--c-amber-pale), var(--c-amber) 50%, #b8741f); }
.pf4-vip .badge .crown { position: absolute; top: 6px; font-size: 18px; }
.pf4-vip .badge b { margin-top: 18px; padding: 1px 10px; border-radius: 4px; background: linear-gradient(#e2502e, #a42612); color: #fff; font: 900 20px/1.1 system-ui; text-shadow: 0 1px 0 #000; }
.pf4-vip .pf2-vipbar { width: 100%; height: 22px; border-radius: 11px; }
.pf4-vip .pf2-vipbar i { background: linear-gradient(90deg, #4f9a2c, #9fd64f); }
.pf4-vip { grid-template-columns: 1fr auto; } .pf4-vip .badge { grid-column: 1 / -1; }
.pf4-vip .plus { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(#5ccfc0, #1f8a7e); color: #fff; font: 900 20px/1 system-ui; box-shadow: 0 2px 0 #0d4a43; }
/* name / flag / commander: label on the left, a field with a pencil on the right */
.pf4-fields { display: grid; gap: 8px; margin: 0 0 10px; }
.pf4-field { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; }
.pf4-field .k { color: #b9ad94; font-weight: 800; font-size: 15px; }
.pf4-field .v { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px; background: #1a1209; border: 1px solid #4a3418; color: #f4e6c4; font-weight: 900; font-size: 16px; }
.pf4-field .v.edit { cursor: pointer; } .pf4-field .v.edit:active { filter: brightness(1.15); }
.pf4-field .v .name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf4-field .v .flag { font-size: 22px; } .pf4-field .pen { color: var(--pn-gold); font-size: 18px; }
/* stat lines: icon · label · value · 🔍 */
.pf4-lines { display: grid; gap: 6px; margin-bottom: 10px; }
.pf4-line { display: grid; grid-template-columns: 52px auto 1fr auto; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px 0 0; border-radius: 10px; text-align: left;
  background: linear-gradient(90deg, #241a0d, #17120a); border: 1px solid #3a2a14; overflow: hidden; }
.pf4-line:disabled { opacity: 1; cursor: default; }
.pf4-line .ic { display: grid; place-items: center; align-self: stretch; font-size: 24px; background: rgba(0,0,0,.35); border-right: 1px solid #3a2a14; }
.pf4-line .k { color: #d9c9a6; font-weight: 800; font-size: 17px; }
.pf4-line b { justify-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff1cf; font: 900 18px/1.1 system-ui; }
.pf4-line .go { font-size: 18px; filter: grayscale(.3); }
.pf4-line.gold b { color: var(--pn-gold); }
@media (max-width: 380px) { .pf4-field { grid-template-columns: 88px 1fr; } .pf4-line .k { font-size: 15px; } .pf4-line b { font-size: 15px; } }

/* ---------- profile v5: painted rusted-metal skin (pieces cut from the owner's painted mock-up, client/ui/profile, 3x) ----------
   Frames are 9-slice border-images, so they stretch to any phone width and any content height without warping the
   corners; the polaroid and VIP badge are fixed-size cut-outs with transparent edges. */
.pf2-root { background: url(ui/profile/edge-l.webp) left top / 12px auto repeat-y, url(ui/profile/edge-r.webp) right top / 12px auto repeat-y, #1b1f1b; }
.pf2-root > .pn-title { background: url(ui/profile/header.webp) center / 100% 100% no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.pf2-root > .pn-title .pn-back { background: url(ui/profile/back.webp) center / 100% 100% no-repeat; border: 0; box-shadow: none; color: #f4e6c4; text-shadow: 0 1px 2px #000; }
.pf2-root > .pn-title h2 { color: #f6d58a; text-shadow: 0 2px 0 #2a1606, 0 0 10px rgba(0,0,0,.8); }
/* the card: dark plate inside a riveted rust frame with the hazard stripe at the bottom (all in the frame image) */
.pf4-card { background: radial-gradient(120% 70% at 50% 30%, #17150f, #070806 75%); border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.55); border-radius: 16px; padding: 28px 26px 30px; }
.pf4-card::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-style: solid; border-width: 22px 22px 18px 22px;
  border-image: url(ui/profile/card.webp) 66 66 54 66 stretch; }
.pf4-card .pf3-hazard { display: none; }
.pf4-card .pf3-bg { opacity: .35; }
.pf4-line-rope { border-top-color: #5a3d22; border-top-width: 2px; opacity: 1; }
/* the polaroid: one painted cut-out (stacked sheets + clip), the portrait sits in its window */
.pf4-polaroid { width: 201px; height: 230px; margin-top: 10px; padding: 0; background: url(ui/profile/polaroid.webp) 0 0 / 100% 100% no-repeat; transform: none; box-shadow: none; border-radius: 0; }
.pf4-polaroid .pin, .pf4-polaroid .sheet { display: none; }
.pf4-polaroid .photo { position: absolute; left: 24px; top: 23px; width: 154px; height: 154px; background: transparent; }
.pf4-polaroid .photo .pn-portrait, .pf4-polaroid .photo img { width: 154px !important; height: 154px !important; }
.pf4-polaroid .foot { position: absolute; left: 22px; right: 24px; top: 184px; height: 36px; }
.pf4-polaroid .likes, .pf4-polaroid .likes b { color: #3b2712; }
/* VIP: the copper badge with the level on its red plate, a metal groove for the points */
.pf4-vip .badge { width: 78px; height: 70px; clip-path: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: url(ui/profile/badge.webp) center / 100% 100% no-repeat; }
.pf4-vip .badge .crown { top: 4px; font-size: 16px; }
.pf4-vip .badge b { position: absolute; left: 18px; top: 28px; width: 50px; height: 25px; margin: 0; padding: 0; display: grid; place-items: center; background: none; border-radius: 0; font-size: 18px; }
.pf4-vip .pf2-vipbar { height: 24px; border-radius: 12px; overflow: visible; background: url(ui/profile/vipbar.webp) center / 100% 100% no-repeat; box-shadow: none; }
.pf4-vip .pf2-vipbar i { top: 5px; bottom: 5px; left: 7px; max-width: calc(100% - 14px); border-radius: 6px; opacity: .9; }
/* name / flag / commander fields and the stat lines: riveted rust frames */
.pf4-field .v, .pf4-line { position: relative; isolation: isolate; background: none; border: 0; }
.pf4-field .v::before, .pf4-line::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-style: solid; }
.pf4-field .v::before { border-width: 10px; border-image: url(ui/profile/field.webp) 30 fill stretch; }
.pf4-line::before { border-width: 8px 10px 8px 56px; border-image: url(ui/profile/line.webp) 24 30 24 168 fill stretch; }
.pf4-line .ic { background: none; border-right: 0; }
.pf4-line .k { padding-left: 14px; }
/* bottom bar: rusted plate with the round porthole back button */
.pf2-root .pf2-bar { background: url(ui/profile/bar.webp) center / 100% 100% no-repeat; border-top: 0; }
.pf2-root .pf2-bar .back { background: url(ui/profile/barback.webp) center / 100% 100% no-repeat; box-shadow: none; }
.pf2-root .pf2-bio { position: relative; isolation: isolate; background: none; border: 0; padding: 14px 40px 14px 16px; color: #efe2c4; }
.pf2-root .pf2-bio::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-style: solid; border-width: 10px; border-image: url(ui/profile/field.webp) 30 fill stretch; }
.pf2-root .pf2-bio .pen { right: 14px; top: 14px; }
.pf4-field .v .flag { font-size: 22px; line-height: 1; flex: none; } .pf4-field .v .flag.tap { cursor: pointer; }
.flag-art { display: inline-block; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.pf2-flags button { display: grid; place-items: center; }
.pf2-flags button { min-width: 0; gap: 6px; padding: 10px 3px; }
.pf2-flags small { font-size: 10px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-flag-controls { position: sticky; top: -12px; z-index: 4; background: #1b2520; padding: 10px 0; margin-bottom: 10px; }
.pf-flag-preview { display: flex; gap: 10px; align-items: center; min-height: 46px; margin-bottom: 8px; }
.pf-flag-preview b { flex: 1; min-width: 0; font-size: 14px; }
.pf-flag-preview .primary { font-size: 13px; flex-shrink: 0; }
.pf-flag-search { width: 100%; box-sizing: border-box; }
.pf-flag-detail { display: grid; justify-items: center; gap: 16px; padding: 20px; margin-bottom: 12px; }

/* profile backdrops (paid): the painted scene fills the card behind everything, darkened toward the edges */
.pf4-card .pf4-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pf4-card:has(.pf4-backdrop)::after { background: radial-gradient(75% 60% at 50% 40%, rgba(0,0,0,.05), rgba(5,6,4,.7)); }
.pf4-topr { display: flex; align-items: center; gap: 6px; }
.pf4-bdbtn { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; background: radial-gradient(circle at 40% 35%, #c88a46, #6b3f16); box-shadow: 0 0 0 2px #2a1606, 0 3px 8px rgba(0,0,0,.5); }
.pf5-bds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf5-bd { display: grid; gap: 4px; padding: 6px; border-radius: 10px; background: #1a1209; border: 1px solid #4a3418; text-align: center; }
.pf5-bd.on { border-color: var(--pn-gold); box-shadow: 0 0 0 1px var(--pn-gold); }
.pf5-bd .pic { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: linear-gradient(150deg, #2a2116, #0b0906); }
.pf5-bd.none .pic { background: radial-gradient(120% 80% at 50% 0%, #3a2a12, #0d120e); }
.pf5-bd .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf5-bd b { font-size: 12px; color: #f4e6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf5-bd button { min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 900; }
.pf5-bd button.buy { background: linear-gradient(#5fc35a, #2f8a2c); color: #fff; border-color: #1f5e1d; }
.pf5-bd button.on { opacity: .7; }
@media (max-width: 380px) { .pf5-bds { grid-template-columns: repeat(2, 1fr); } }
/* the two back buttons sit inside their bars: a 40 px rust plate in the title bar, a 46 px porthole in its own slot */
.pf2-root > .pn-title .pn-back { width: 40px; height: 40px; min-height: 0; margin-left: 6px; padding: 0; display: grid; place-items: center; font: 900 26px/1 system-ui; border-radius: 8px; }
.pf2-root .pf2-bar { grid-template-columns: 58px repeat(4, 1fr); }
.pf2-root .pf2-bar .back { width: 46px; height: 46px; min-height: 0; padding: 0; justify-self: center; display: grid; place-items: center; font-size: 20px; color: #fff; text-shadow: 0 1px 2px #000; }

/* name box: one centred row (flag, clan tag, name, commander level), no labels; the rename pencil sits at the right edge */
.pf4-field.solo { grid-template-columns: 1fr; }
.pf4-field.solo .v { justify-content: center; padding: 0 36px; min-height: 48px; }
.pf4-field.solo .v .name { justify-content: center; gap: 8px; }
.pf4-field.solo .v .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf4-field.solo .pf2-cmdlv { flex: none; margin-left: 4px; color: var(--pn-gold); }
.pf4-field.solo .pen { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
/* the painted frames have a thicker lower edge than upper, so their contents are lifted a few px to sit in the visual middle */
.pf4-field .v { padding-bottom: 5px; }
.pf4-line { padding-bottom: 6px; }
.pf4-line .ic { margin-bottom: -6px; padding-bottom: 6px; }
.pf2-root .pf2-bio { padding-bottom: 18px; }
/* the flag picture is centred with the name, not sat on the text baseline (it hung down to the frame's edge) */
.pf4-field .v .flag { display: inline-flex; align-items: center; height: 22px; line-height: 0; }
.pf4-field .v .flag .flag-art { display: block; }
.pf4-field .v .name { align-items: center; }

/* Navigation controls use clear glyphs instead of painted button images. */
.pf2-root > .pn-title .pn-back { background: #18251e; border: 1px solid #88764b; border-radius: 10px; width: 44px; height: 44px; margin-left: 0; color: #ffe4aa; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.pf2-root .pf2-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-row.st-orientation { grid-template-columns: 34px minmax(0, 1fr); }
.st-orientation .pf2-seg { grid-column: 1 / -1; display: flex; min-width: 0; }
.st-orientation .pf2-seg button { flex: 1; min-width: 0; padding-inline: 8px; }

/* Mobile-first profile: keep the portrait and rank beside each other. */
@media(max-width:600px) {
 .pf4-card {grid-template-columns:124px minmax(0,1fr);align-items:center;padding:16px 18px 18px;gap:8px 12px;}
 .pf4-top{grid-column:1/-1;}
 .pf4-card .pf4-line-rope{display:none;}
 .pf4-polaroid{width:124px;height:142px;margin-top:4px;}
 .pf4-polaroid .photo{left:15px;top:14px;width:94px;height:94px;}
 .pf4-polaroid .photo .pn-portrait,.pf4-polaroid .photo img{width:94px!important;height:94px!important;}
 .pf4-polaroid .foot{left:14px;right:15px;top:113px;height:24px;}
 .pf4-polaroid .likes,.pf4-polaroid .likes b{font-size:12px;}
 .pf4-polaroid .swap{width:28px;height:28px;font-size:13px;}
 .pf4-vip{width:100%;gap:6px;}
 .pf4-vip .pf2-vipbar{height:22px;}
 .pf4-vip .pf2-vipbar b{font-size:9px;}
 .pf4-field .v{min-height:40px;font-size:14px;padding:0 12px;}
 .pf4-lines{gap:4px;}
 .pf4-line{min-height:42px;grid-template-columns:40px auto 1fr auto;gap:7px;}
 .pf4-line .ic{font-size:19px;}
 .pf4-line .k{padding-left:4px;font-size:12px;}
 .pf4-line .v{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .pf2-root .pf2-bio{padding:10px 32px 10px 12px;font-size:12px;}
}
@media(max-width:360px){.pf4-card{grid-template-columns:108px minmax(0,1fr);gap:6px;padding-left:14px;padding-right:14px;}}

@media(max-width:600px){.pf4-card>.pf4-polaroid{grid-column:1;grid-row:2 / span 2;}.pf4-card>.hn-tag{grid-column:2;grid-row:2;align-self:end;font-size:10px;max-width:100%;}.pf4-card>.pf4-vip{grid-column:2;grid-row:3;align-self:start;}}
/* landscape: the portrait card on the left, name, stats and bio beside it on the right, so nothing hides below the fold (owner, 2026-10-21).
   panels-core.js moves the screen's content into .pn-scroll-section, so the grid is laid on that section. */
html.land .pf2-root > .pn-scroll-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr auto; column-gap: 14px; }
html.land .pf2-root > .pn-scroll-section > * { grid-column: 1 / -1; }
html.land .pf2-root > .pn-scroll-section > .pf4-card { grid-column: 1; grid-row: 1 / 7; align-self: start; margin-bottom: 0; }
html.land .pf2-root > .pn-scroll-section > :is(.pf4-fields, .pf4-lines, .pf2-bio, .actions) { grid-column: 2; }
html.land .pf2-root > .pn-scroll-section > .pf4-fields { grid-row: 1; } html.land .pf2-root > .pn-scroll-section > .pf4-lines { grid-row: 2; }
html.land .pf2-root > .pn-scroll-section > .pf2-bio { grid-row: 3; } html.land .pf2-root > .pn-scroll-section > .actions { grid-row: 4; }
html.land .pf2-root > .pn-scroll-section > .pf2-spacer { grid-row: 6; min-height: 12px; } html.land .pf2-root > .pn-scroll-section > .pf2-bar { grid-row: 7; }
/* Tall phones: the profile fills the whole screen. The scroll area stacks its parts in a column; spare height goes to the
   picture card (portrait centred in it) and a little to the stat rows, so the bottom bar sits on the bottom edge
   instead of leaving an empty band under it. Short screens keep every part at its natural size and scroll. */
.pf2-root .pn-scroll-section { display: flex; flex-direction: column; }
.pf2-root .pn-scroll-section > * { flex-shrink: 0; }
.pf2-root .pf4-card { flex: 3 0 auto; align-content: center; }
.pf2-root .pf4-lines { flex: 1 0 auto; align-content: space-evenly; }
.pf2-root .pf2-spacer { flex: 0 0 8px; }

/* profile lines (owner, 2026-10-21): the label and its value share one dark inset box; the emoji sits in the middle of its square */
.pf4-line { grid-template-columns: 56px 1fr auto auto; gap: 0 10px; }
/* no second frame: the plate's own panel is simply darkened evenly (soft edges, no border), so label and value read as one box */
.pf4-line::after { content: ''; position: absolute; z-index: -1; left: 64px; right: 16px; top: 9px; bottom: 15px; border-radius: 10px; pointer-events: none;
  background: rgba(10,7,4,.55); filter: blur(5px); }
.pf4-line .ic { width: 56px; display: grid; place-items: center; line-height: 1; font-size: 24px; }
.pf4-line .k { padding-left: 18px; font-size: 15px; color: #c9b48a; text-transform: uppercase; letter-spacing: .06em; }
.pf4-line b { padding-right: 4px; }
@media (max-width: 380px) { .pf4-line .k { font-size: 13px; } }

/* worn gold metal lettering (owner's pick "B", 2026-10-21): engraved gold, chipped and scratched (SVG noise masks) */
.pf4-line { --chips: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.3'/></filter><rect width='120' height='60' filter='url(%23n)'/></svg>");
  --scratch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.04 .9' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.75'/></filter><rect width='160' height='60' filter='url(%23n)'/></svg>"); }
.pf4-line .k { font: 900 15px/1 Impact, 'Arial Black', system-ui; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(#e9dcb8, #a8946a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000); }
.pf4-line b, .pf4-line.gold b { font: 900 20px/1 Impact, 'Arial Black', system-ui; letter-spacing: .05em;
  background: linear-gradient(#fff4cf 0, #ffd062 45%, #c98a1c 55%, #ffe39a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #2a1600) drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.pf4-line .k, .pf4-line b { -webkit-mask: var(--chips), var(--scratch); -webkit-mask-composite: source-in; mask: var(--chips), var(--scratch); mask-composite: intersect;
  -webkit-mask-size: 120px 60px, 160px 60px; mask-size: 120px 60px, 160px 60px; }
@media (max-width: 380px) { .pf4-line .k { font-size: 13px; letter-spacing: .1em; } .pf4-line b, .pf4-line.gold b { font-size: 17px; } }