/* ════════════════════════════════════════════════════════════════════
   profile.css — profile page + in-battle banner strips (loaded LAST).
   Neon Helo skin; self-contained .pf-* / .bt-bstrip rules.
   ════════════════════════════════════════════════════════════════════ */
:root { --cyanp: #28e0ff; }

/* ---------- profile page ---------- */
.pf { max-width: 920px; margin: 0 auto; padding: 18px 16px 60px; }

.pf-banner {
  position: relative; height: 200px; border-radius: 18px;
  background-color: #0a1830; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 -60px 80px -30px rgba(5,8,16,.9);
  margin-bottom: 56px;
}
.pf-back {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(8,10,18,.7); border: 1px solid rgba(255,255,255,.18);
  color: #dfe7ff; border-radius: 10px; padding: 7px 14px; cursor: pointer;
  font: 600 12px var(--f-body); letter-spacing: .04em; backdrop-filter: blur(6px);
}
.pf-back:hover { border-color: var(--cyanp); color: #fff; }
.pf-banner-actions { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 10px; z-index: 2; }
.pf-btn {
  background: linear-gradient(135deg, var(--cyanp), #1aa6ff); border: none;
  color: #06121f; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  font: 700 12px var(--f-body); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(40,224,255,.3);
}
.pf-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pf-btn.ghost {
  background: rgba(8,10,18,.7); color: #dfe7ff; border: 1px solid rgba(255,255,255,.2);
  box-shadow: none; backdrop-filter: blur(6px); display: inline-flex; align-items: center;
}
.pf-btn.ghost:hover { border-color: var(--cyanp); color: #fff; }
.pf-ava {
  position: absolute; left: 28px; bottom: -42px; z-index: 3;
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 46px var(--f-display); color: #06121f;
  border: 4px solid #0a0f18; box-shadow: 0 6px 24px rgba(0,0,0,.55);
}

.pf-card {
  background: rgba(17,17,32,.66); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.pf-h {
  font: 700 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px; padding-left: 12px; position: relative;
}
.pf-h::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: var(--cyanp); box-shadow: 0 0 8px var(--cyanp); }
.pf-hint { font-size: 12px; color: #8a90ad; margin: -8px 0 14px; }

.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-lbl { display: block; font: 500 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #6f7799; margin-bottom: 6px; }
.pf-input {
  width: 100%; background: #0b0e18; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 11px 13px; color: #eef1ff;
  font: 500 14px var(--f-body);
}
.pf-input:focus { outline: none; border-color: var(--cyanp); box-shadow: 0 0 0 3px rgba(40,224,255,.15); }

.pf-accents { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-accent {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s;
}
.pf-accent:hover { transform: scale(1.12); }
.pf-accent.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 12px currentColor; }

.pf-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf-preset {
  position: relative; height: 70px; border-radius: 12px; cursor: pointer;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.12); overflow: hidden;
  font: 600 12px var(--f-body); color: #fff;
}
.pf-preset span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; text-shadow: 0 1px 4px rgba(0,0,0,.8); background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.pf-preset:hover { border-color: rgba(255,255,255,.4); }
.pf-preset.on { border-color: var(--cyanp); box-shadow: 0 0 0 2px var(--cyanp), 0 0 16px rgba(40,224,255,.4); }

.pf-titles { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-title {
  background: #0b0e18; border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 9px 15px; cursor: pointer; color: #cfd6f5;
  font: 600 12px var(--f-body); letter-spacing: .03em; transition: all .15s;
}
.pf-title:hover:not(.locked) { border-color: var(--cyanp); color: #fff; }
.pf-title.eq { border-color: var(--cyanp); color: #fff; background: rgba(40,224,255,.12); box-shadow: 0 0 12px rgba(40,224,255,.25); }
.pf-title.locked { opacity: .45; cursor: not-allowed; }

.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pf-stat { background: #0b0e18; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px 10px; text-align: center; }
.pf-stat-val { font: 800 26px var(--f-display); color: #fff; line-height: 1; }
.pf-stat-lbl { font: 500 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #6f7799; margin-top: 8px; }

@media (max-width: 640px) {
  .pf-grid2 { grid-template-columns: 1fr; }
  .pf-presets { grid-template-columns: repeat(2, 1fr); }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-banner { height: 150px; }
  .pf-ava { width: 94px; height: 94px; font-size: 36px; left: 18px; bottom: -40px; }
}

/* ---------- in-battle banner strip (fighter identity) ---------- */
.bt-bstrip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px; margin: 4px 0 12px;
  position: relative; overflow: hidden; min-height: 58px;
  background-color: #0a1830; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.bt-bstrip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,15,.6), rgba(8,8,15,.12)); pointer-events: none; }
.bt-bstrip.rev::after { background: linear-gradient(270deg, rgba(8,8,15,.6), rgba(8,8,15,.12)); }
.bt-bstrip > * { position: relative; z-index: 1; }
.bt-bstrip .bt-ava {
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 18px var(--f-display); color: #06121f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 2px 10px rgba(0,0,0,.5);
}
.bt-id { flex: 1; min-width: 0; }
.bt-id.right { text-align: right; }
.bt-bstrip .bt-name {
  font: 700 14px var(--f-display); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt-meta { display: flex; gap: 7px; align-items: center; margin-top: 4px; font-size: 10px; }
.bt-id.right .bt-meta { justify-content: flex-end; }
.bt-title {
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.16);
  padding: 1px 7px; border-radius: 8px; color: #e3e9ff;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-rank { font: 700 11px var(--f-mono); letter-spacing: .08em; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* result-screen ELO line */
.duel-result-elo {
  font: 700 13px var(--f-mono); color: #cfd6f5;
  margin: 6px 0 12px; letter-spacing: .03em;
}
.duel-result-elo .sa-pos { color: #22e3a6; }
.duel-result-elo .sa-neg { color: #ff5577; }