/* ---------- Round 6: profile settings + avatar overlay ----------
     Uses the shared .fullscreen-overlay class (styles/main.css, added in index.html) for its
     show/hide + open/close animation, and the .ep-bar/.ep-body/.ep-title classes from exam.css
     for its header/body chrome — only the profile-specific content below is new. */
  #profile-overlay{background:var(--paper); display:flex; flex-direction:column;}
  #profile-panel{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}

  /* Entry-point buttons in the account panel (see ui.js renderAccountPanel) */
  .pf-widget{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

  /* Tab toggle at the top of the overlay — reuses .chip/.chip.active from courses.css
     so this only needs to lay them out, not restyle them. */
  .pf-tabs{display:flex; gap:8px; padding:14px 18px 0;}

  .pf-field{margin-top:16px;}
  .pf-field label{display:block; font-size:var(--fs-xs); font-weight:600; margin-bottom:6px; color:var(--muted);}
  .pf-field input:disabled{opacity:0.6;}

  .pf-photo-row{display:flex; align-items:center; gap:14px; margin-top:12px;}
  .pf-photo-preview{width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--card); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--muted);}
  .pf-photo-preview img{width:100%; height:100%; object-fit:cover;}

  .pf-coin-chip{display:inline-block; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:8px 16px; font-size:var(--fs-sm); font-weight:700;}

  .pf-avatar-canvas{width:100%; height:260px; margin-top:14px; border-radius:16px; border:1.5px solid var(--line); background:linear-gradient(180deg, rgba(245,217,73,0.12), rgba(143,216,232,0.10)); overflow:hidden;}

  .pf-swatch-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
  /* Round 11: color/avatar-item swatches had a hard border-color snap on selection with zero
     tap feedback beforehand. transform gives a press-down on tap; the border/shadow transition
     makes picking a new color read as a selection instead of an instant swap. */
  .pf-swatch{width:34px; height:34px; border-radius:50%; border:2px solid var(--line); padding:0; cursor:pointer; transition:border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;}
  .pf-swatch:active{ transform:scale(0.88); }
  .pf-swatch.active{border-color:var(--black); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--black);}

  .pf-item-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin-top:4px;}
  .pf-item-card{display:flex; flex-direction:column; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:14px; padding:12px 8px; background:var(--card); text-align:center; transition:border-color 180ms ease, transform 180ms var(--ease-pop);}
  .pf-item-card:not(.pf-item-locked):active{ transform:scale(0.95); }
  .pf-item-swatch{width:28px; height:28px; border-radius:50%; display:block;}
  .pf-item-name{font-size:var(--fs-xs); font-weight:600; line-height:1.3;}
  .pf-item-cost{font-size:var(--fs-2xs); color:var(--muted); font-weight:700;}
  .pf-item-equipped{border-color:var(--black); border-width:2px; background:#FBF7E3; animation:motionPop 320ms var(--ease-pop);}
  .pf-item-locked{opacity:0.45; cursor:default;}
  @media (prefers-reduced-motion:reduce){ .pf-item-equipped{ animation:none; } }