/* ===========================================================
   PERSONAL INFO V3 — Frenzy96 player (2026-05-30)
   Inline click-to-edit + bottom edit sheets. Renders into
   #pf3-subpage-body (pf3 header provides back + title).
   Vanilla, English-only. Mirrors the React spec in vanilla.
   =========================================================== */
.piw {
  --pi-bg:#0b0c10; --pi-surface:#141620; --pi-surface2:#0f1117; --pi-border:#1e2028; --pi-border2:#1a1c24;
  --pi-gold:#e8a124; --pi-gold-bg:#1f1a0d; --pi-blue:#4a8ee8; --pi-blue-bg:#0d1520;
  --pi-green:#2dc98a; --pi-green-bg:#0d1a10; --pi-red:#e84040; --pi-red-bg:#200f0f;
  --pi-text:#eee; --pi-text2:#aaa; --pi-text3:#555; --pi-text4:#3a3e4d;
  background:var(--pi-bg); color:var(--pi-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin:-14px; /* cancel pf3-subpage-body padding so blocks go edge-to-edge */
  min-height:100%; display:flex; flex-direction:column;
}

/* avatar block */
.pi-avatar { display:flex; align-items:center; gap:14px; background:var(--pi-surface2); border-bottom:1px solid var(--pi-border2); padding:16px 14px; }
.pi-av-wrap { position:relative; width:52px; height:52px; flex:0 0 52px; cursor:pointer; }
.pi-av-img { width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; background:var(--pi-surface); }
.pi-av-letter { width:52px; height:52px; border-radius:50%; background:var(--pi-gold); color:#0b0c10; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }
.pi-av-cam { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%; background:#151720; border:2px solid #0b0c10; display:flex; align-items:center; justify-content:center; color:var(--pi-text2); }
.pi-av-cam svg { width:9px; height:9px; }
.pi-av-info { flex:1; min-width:0; }
.pi-av-name { font-size:14px; font-weight:600; color:var(--pi-text); }
.pi-av-since { font-size:11px; color:var(--pi-text3); margin-top:1px; }
.pi-av-change { font-size:10px; color:var(--pi-gold); margin-top:5px; cursor:pointer; display:inline-block; }

/* field list */
.pi-list { flex:1; padding:6px 0 0; }
.pi-group-h { font-size:11px; font-weight:600; color:var(--pi-text3); text-transform:uppercase; letter-spacing:.06em; padding:16px 16px 7px; }
.pi-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--pi-border2); background:transparent; width:100%; border-left:0; border-right:0; border-top:0; text-align:left; color:inherit; cursor:pointer; }
.pi-row:active { background:rgba(255,255,255,.02); }
.pi-row.locked { cursor:default; }
.pi-row.locked:active { background:transparent; }
.pi-ic { width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.pi-ic svg { width:18px; height:18px; }
.pi-mid { flex:1; min-width:0; }
.pi-lbl { display:block; font-size:10px; color:var(--pi-text3); text-transform:uppercase; letter-spacing:.5px; }
.pi-val { display:block; font-size:13px; font-weight:500; color:var(--pi-text); margin-top:2px; word-break:break-word; }
.pi-val.unset { color:var(--pi-text4); font-style:italic; font-weight:400; }
.pi-val.mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
.pi-sub { display:block; font-size:10px; color:var(--pi-text4); margin-top:2px; white-space:normal; line-height:1.4; }
.pi-right { flex:0 0 auto; display:flex; align-items:center; gap:7px; color:var(--pi-text3); }
.pi-right svg { width:18px; height:18px; }
.pi-lock { color:var(--pi-text4); }

/* save */
.pi-save-wrap { position:sticky; bottom:0; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--pi-bg) 70%,transparent); }
.pi-save { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:11px; border:0; background:var(--pi-gold); color:#0b0c10; font-size:13px; font-weight:700; cursor:pointer; }
.pi-save:disabled { opacity:.35; cursor:not-allowed; }
.pi-save svg { width:17px; height:17px; }

/* ===== bottom sheet ===== */
.pi-sov { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s; display:flex; align-items:flex-end; }
.pi-sov.on { opacity:1; }
.pi-sheet { width:100%; max-width:560px; margin:0 auto; background:#111318; border-top:1px solid var(--pi-border); border-radius:18px 18px 0 0; padding:0; transform:translateY(100%); transition:transform .3s ease-out; max-height:88vh; display:flex; flex-direction:column; box-sizing:border-box; }
.pi-sov.on .pi-sheet { transform:translateY(0); }
.pi-sheet--tall { min-height:42vh; }
.pi-sh-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 18px 4px; }
.pi-sh-foot { flex:0 0 auto; padding:12px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--pi-border); background:#111318; }
.pi-grab { width:32px; height:3px; border-radius:3px; background:#2a2d38; margin:8px auto 12px; flex:0 0 auto; }
.pi-sh-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:0 18px; flex:0 0 auto; }
.pi-sh-title { font-size:13px; font-weight:600; }
.pi-sh-x { width:28px; height:28px; border-radius:8px; border:0; background:#151720; color:var(--pi-text2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pi-sh-x svg { width:16px; height:16px; }
.pi-input { width:100%; background:#141620; border:1px solid var(--pi-border); border-radius:9px; padding:12px 13px; color:var(--pi-text); font-size:15px; outline:0; }
.pi-input:focus { border-color:var(--pi-gold); }
.pi-counter { text-align:right; font-size:11px; color:var(--pi-text3); margin-top:6px; }
.pi-dob-row { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:8px; padding-bottom:8px; }
.pi-select {
  width:100%; background:#141620; border:1px solid var(--pi-border); border-radius:9px;
  padding:14px 10px; color:var(--pi-text); font-size:16px; outline:0; min-height:50px;
  -webkit-appearance:menulist; appearance:menulist;        /* iOS: native wheel picker */
  pointer-events:auto; position:relative; z-index:1; touch-action:manipulation;
}
.pi-select:focus { border-color:var(--pi-gold); }
.pi-select option { background:#141620; color:var(--pi-text); }
.pi-sh-save { position:relative; z-index:2; }
.pi-sheet-err { color:var(--pi-red); font-size:12px; margin-top:10px; min-height:0; }
.pi-sheet-hint { color:var(--pi-text3); font-size:11px; margin:8px 0 0; line-height:1.5; }
.pi-sh-save { width:100%; margin-top:0; padding:14px; border-radius:11px; border:0; background:var(--pi-gold); color:#0b0c10; font-size:14px; font-weight:700; cursor:pointer; }
.pi-sh-save:disabled { opacity:.35; cursor:not-allowed; }

.pi-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:100001; color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.4); max-width:88vw; }