/* 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; }

/* 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; }