/* /profile: chessingo's account page in woodblock. One card for the logged-out
   views (face on top, controls below), cards for the account. */

.pf { max-width: 560px; margin: 0 auto; padding: 12px 16px 60px; }
#pf-loggedin { display: none; }
.pf-card {
  margin-bottom: 16px; padding: 18px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--cream); color: var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.pf-card h2 { margin: 0 0 12px; font: 400 24px var(--display); }
.pf-kicker { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hanko); }
.pf-hero { display: grid; justify-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px dashed var(--panel-edge); text-align: center; }
.pf-hero[hidden] { display: none; }
.pf-hook, .pf-lead { margin: 0; font-size: 14px; opacity: 0.8; }

/* The SDK's builder (tz-*), laid out as /join lays it out. */
.pf-face { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-height: 120px; }
.pf-face .tz-face {
  width: min(200px, 52vw); aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 14px;
  background: #fff; box-shadow: 0 4px 0 var(--ink); overflow: hidden;
}
.pf-face .tz-face svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.pf-face .tz-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pf-face .tz-tabs button {
  border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  padding: 4px 6px; font: 400 13px var(--display); cursor: pointer;
}
.pf-face .tz-tabs button[aria-selected='true'], .pf-face .tz-tabs button.active { background: var(--hanko); color: var(--cream); }
.pf-face .tz-strip {
  display: grid; grid-template-columns: repeat(auto-fill, 48px); grid-auto-rows: 48px; gap: 10px;
  justify-content: center; width: 100%; max-height: 176px; overflow-y: auto; padding: 4px;
}
.pf-face .tz-strip > * { border: 2px solid var(--panel-edge); border-radius: 8px; background: #fff; cursor: pointer; padding: 0; }
.pf-face .tz-strip svg, .pf-face .tz-strip img { width: 100%; height: 100%; display: block; }
.pf-face > :not(.tz-face):not(.tz-tabs):not(.tz-strip) { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.pf-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pf-row .btn { text-decoration: none; }
.pf-guest-actions { display: grid; gap: 10px; }
.pf-guest-play { display: block; margin-top: 14px; text-align: center; color: var(--ink); font-size: 14px; }
.pf-view { display: grid; gap: 10px; }
.pf-step { display: grid; gap: 10px; }
.pf-view form { display: grid; gap: 10px; }
.pf-field { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.pf [hidden] { display: none !important; }
.pf-field input, .pf-field select { padding: 9px 11px; border: 2px solid var(--ink); border-radius: 8px; font: 500 16px var(--body); background: #fff; color: var(--ink); }
.pf-dob { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pf-dob legend { padding: 0; margin-bottom: 4px; }
.pf-dob input { width: 4.2em; }
.pf-dob input:last-child { width: 5.6em; }
.pf-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pf-switch, .pf-legal { margin: 4px 0 0; font-size: 13px; opacity: 0.85; }
.pf-toggle { justify-self: start; }
.pf-msg { margin: 0; min-height: 1.2em; font-weight: 700; font-size: 14px; }
.pf-msg.err { color: var(--hanko); }
.pf-msg.ok { color: var(--d4, #2c6e3f); }
.pf-wiz-dots { display: flex; gap: 6px; justify-content: center; }
.pf-wiz-dots span { width: 28px; height: 6px; border-radius: 3px; background: var(--panel-edge); }
.pf-wiz-dots span.on { background: var(--hanko); }

.pf-id { display: flex; align-items: center; gap: 14px; }
.pf-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: 400 32px var(--display); overflow: hidden; }
.pf-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.pf-name { font: 400 26px var(--display); }
.pf-sub { font-size: 13px; opacity: 0.75; overflow-wrap: anywhere; }
.pf-logout { margin-left: auto; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.pf-stats b { display: block; font: 400 28px var(--display); color: var(--hanko); }
.pf-stats span { font-size: 12px; opacity: 0.75; }
.pf-riv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-riv li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--panel); }
.pf-riv b { font: 400 18px var(--display); }
.pf-empty { margin: 0; opacity: 0.75; }

@media (max-width: 480px) {
  .pf-card { padding: 14px; }
}