/* The profile (systems/profile.js): the trainer and the account's numbers on top, then the clothes. */

.pf { display: grid; gap: 14px; }
.pf-top {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 16px; border-radius: 14px;
  background: radial-gradient(circle at 12% 30%, #2b3d6e 0, transparent 45%), linear-gradient(135deg, #1b2747, #121a2e); border: 1px solid #2c4472;
}
.pf-stage { display: grid; place-items: end center; width: 150px; height: 150px; flex: none; border-radius: 14px; background: radial-gradient(circle at 50% 75%, #34477a 0, #141d33 70%); border: 1px solid #ffffff10; }
.pf-id { display: grid; align-content: start; gap: 10px; flex: 1 1 320px; min-width: 0; }
.pf-id h2 { font-family: var(--pixel); font-size: 1.7rem; display: flex; align-items: center; gap: 8px; }
.pf-level { font-size: 0.95rem; color: #c9b8ff; }
.pf-bigs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-big { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 12px 6px 8px; border-radius: 10px; background: #0b1424aa; border: 1px solid var(--line); }
.pf-big img { grid-row: 1 / 3; width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.pf-big span { color: var(--muted); font-size: 0.7rem; }
.pf-big b { font-family: var(--pixel); font-size: 1.05rem; }
.pf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.pf-tab {
  padding: 9px 16px; border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--muted); font-family: var(--pixel); font-size: 0.95rem; cursor: pointer; margin-bottom: -1px;
}
.pf-tab:hover { color: var(--text); }
.pf-tab.on { background: var(--card); border-color: var(--line); color: var(--accent); }
.pf-section { display: grid; gap: 14px; }
.pf-empty { min-height: 116px; align-items: center; padding: 0 12px; }
.pf-pick-name { font-family: var(--pixel); color: #c9b8ff; }
.pf-groups { display: grid; gap: 12px; }
.pf-group { display: grid; gap: 6px; }
.pf-group-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.pf-group-head b { font-family: var(--pixel); }
.pf-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, #1b2440 0%, var(--card) 80%); border: 1px solid var(--line);
}
.pf-walk { display: flex; gap: 6px; }
.pf-dir { display: grid; place-items: end center; width: 110px; height: 116px; border-radius: 10px; background: radial-gradient(circle at 50% 70%, #2a3550 0, #121a28 70%); }
.pf-who { display: grid; gap: 6px; min-width: 220px; flex: 1 1 220px; }
.pf-who h2 { font-family: var(--pixel); font-size: 1.5rem; display: flex; align-items: center; gap: 8px; }
.pf-vip { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: #3d3210; color: var(--accent); border: 1px solid #6b5a1c; }
.pf-note { color: var(--muted); }
.pf-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-unsaved { color: #ffd23f; font-size: 0.85rem; }
.pf-pick > span:first-child { font-family: var(--pixel); color: #c9b8ff; }

.pf-colors { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pf-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-part { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #0b1424; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
.pf-part i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #0006; }
.pf-part.on { border-color: #3d5a96; background: #1f3460; color: var(--accent); }
.pf-palette { display: grid; grid-template-columns: repeat(19, minmax(0, 22px)); gap: 3px; }
.pf-sw { width: 100%; aspect-ratio: 1; border-radius: 4px; border: 1px solid #0007; padding: 0; cursor: pointer; }
.pf-sw:hover { transform: scale(1.15); }
.pf-sw.on { outline: 2px solid #fff; outline-offset: 1px; }
.pf-color-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.pf-stat { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; background: #0b142488; border: 1px solid #ffffff0d; }
.pf-stat span { color: var(--muted); font-size: 0.68rem; }
.pf-stat b { font-family: var(--pixel); font-size: 0.95rem; color: var(--text); white-space: nowrap; }

.pf-wardrobe { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pf-wardrobe h3 { font-family: var(--pixel); font-size: 1.1rem; }
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #0b1424; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
.pf-chip.on { background: #1f3460; border-color: #3d5a96; color: var(--accent); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-card {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 10px;
  background: #0e1830; border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer;
}
.pf-card:hover { border-color: #5a78b8; }
.pf-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px #ffd23f44; }
.pf-card.worn { border-color: #2f8f4e; }
.pf-card > span { font-size: 0.75rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 0.62rem; color: #6fe08f; }
.pf-more { align-content: center; border-style: dashed; color: var(--accent); min-height: 100px; }
.pf-more b { font-family: var(--pixel); font-size: 1.6rem; line-height: 1; }
.pf-more > span { white-space: normal; text-align: center; color: var(--accent); }
.pf-none { justify-content: space-between; }
.pf-none b { font-family: var(--pixel); }

@media (max-width: 760px) {
  .pf-dir { width: 74px; height: 82px; }
  .pf-stage { width: 110px; height: 110px; }
}