/* ==========================================================================
   STICK ARENA RESKIN — PROFILE SCREEN (#screen-profile)
   Clones the Stick Arena: Ballistick profile screen (menu-perfil.png):
   dark steel plate, fighter vitrina, big gold rank emblem with pixel
   "Rank: N", steel tabs (Skins / Spinners / Pets), dark STATISTICS well.
   Loads after styles.css / sa-core.css: equal-specificity rules here win.
   Scoped to #screen-profile (plus body[data-screen="profile"] for the plate).
   Uses only sa-core tokens — no :root redefinitions.
   ========================================================================== */

/* --- Plate: dark SA steel while the profile screen is active --------------- */
body[data-screen="profile"] #screens {
  border: var(--sa-frame);
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 58%, var(--sa-steel-900) 100%);
  box-shadow: var(--sa-bevel-panel), 0 26px 80px rgba(0, 0, 0, 0.55);
}
#screen-profile {
  min-height: 698px; /* fill the 700px plate minus its 2px frame */
  color: #dbe7f2;
}

/* --- Player name row: blue pixel name + small steel edit button ------------ */
#screen-profile .profile-name-row { gap: 10px; margin: 4px 0 10px; }
#screen-profile .profile-screen-name {
  margin: 0;
  color: var(--sa-chat-text); /* SA name blue #8fd0f2 */
  font-family: var(--sa-pixel);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: none; /* h1 base uppercases — SA shows the raw handle */
  text-shadow:
    0 2px 0 rgba(4, 10, 18, 0.9),
    0 0 12px rgba(143, 208, 242, 0.22);
}
#screen-profile .profile-edit-name {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--sa-btn-border);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 55%, var(--sa-steel-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.4);
  color: #eef4fa;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: filter 80ms ease, transform 60ms ease;
}
#screen-profile .profile-edit-name:hover { filter: brightness(1.12); }
#screen-profile .profile-edit-name:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); }
#screen-profile .profile-name-editor { width: min(320px, 100%); }

/* --- Banner: steel panel holding vitrina + rank block + alt portrait ------- */
#screen-profile .profile-banner {
  padding: 14px 20px;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel), 0 3px 8px rgba(0, 0, 0, 0.4);
  color: #dbe7f2;
}

/* Fighter vitrina: dark radial showcase behind the avatar canvas. */
#screen-profile #identity-avatar,
#screen-profile #profile-alt-portrait {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background:
    radial-gradient(ellipse 95% 88% at 50% 40%, #2b3b4f 0%, var(--sa-well) 66%, var(--sa-well-deep) 100%);
  box-shadow: var(--sa-bevel-well), 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Alt portrait stays: it mirrors the second framed item on the right of the
   SA banner (equipped gear showcase), so it gets the same vitrina treatment. */

/* --- Rank block: big gold emblem, pixel "Rank: N", chunky rank name -------- */
#screen-profile .profile-badge-row { gap: 12px; }
#screen-profile .badge-arrow {
  width: 24px;
  height: 36px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 55%, var(--sa-steel-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.4);
  color: #dbe7f2;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: filter 80ms ease, color 80ms ease;
}
#screen-profile .badge-arrow:hover { filter: brightness(1.15); color: var(--sa-gold); }
#screen-profile .badge-arrow:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); }

/* Emblem wrapper: artwork-agnostic — sizes and glows whatever SVG/canvas the
   badge renderer drops inside (another agent owns the emblem artwork). */
#screen-profile .profile-rank-badge {
  filter:
    drop-shadow(0 0 9px rgba(255, 210, 63, 0.4))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
#screen-profile .profile-rank-badge svg,
#screen-profile .profile-rank-badge .rank-badge svg,
#screen-profile .profile-rank-badge canvas {
  width: 76px;
  height: 76px;
}

#screen-profile .profile-test-tag {
  padding: 2px 6px;
  border: 1px solid var(--sa-gold-dark);
  border-radius: 4px;
  background: rgba(11, 15, 22, 0.65);
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.14em;
}

#screen-profile .profile-rank-line {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-shadow:
    1px 1px 0 var(--sa-gold-outline),
    -1px 1px 0 var(--sa-gold-outline),
    1px -1px 0 var(--sa-gold-outline),
    -1px -1px 0 var(--sa-gold-outline),
    0 2px 2px rgba(0, 0, 0, 0.6);
}
#screen-profile .profile-rank-block strong {
  color: var(--sa-steel-100);
  font-family: var(--sa-chunky);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}
#screen-profile .profile-rank-block small {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* Rank progress: dark well track + gold gradient fill with an inset ring. */
#screen-profile .rank-progress {
  height: 12px;
  border: var(--sa-frame);
  border-radius: 7px;
  background: var(--sa-well-deep);
  box-shadow: var(--sa-bevel-well);
}
#screen-profile .rank-progress span {
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sa-gold-hi) 0%, var(--sa-gold) 55%, var(--sa-gold-dark) 100%);
  box-shadow:
    inset 0 0 0 1px var(--sa-gold-outline),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 2px rgba(92, 67, 4, 0.5);
}
#screen-profile .profile-progress-copy {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Credits readout — populated by renderProfile from server.credits. */
#screen-profile .profile-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-shadow:
    1px 1px 0 var(--sa-gold-outline),
    0 2px 2px rgba(0, 0, 0, 0.6);
}
#screen-profile .profile-credits::before,
#screen-profile .cosmetic-meta small::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border: 1px solid var(--sa-gold-outline);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sa-gold-hi) 0%, var(--sa-gold) 55%, var(--sa-gold-dark) 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  vertical-align: -1px;
}

/* --- Columns: keep the two-column layout, steel panel + dark well ---------- */
#screen-profile .profile-skins-panel { height: 322px; }

/* Steel solapa tabs, SA "Spinners / Pets" style. */
#screen-profile .profile-tabs {
  gap: 5px;
  margin: 0 -12px 10px;
  padding: 8px 10px 0;
  border-bottom: 2px solid #0d141d;
}
#screen-profile .profile-tabs button {
  border: 2px solid var(--sa-btn-border);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  padding: 6px 18px 7px;
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 60%, var(--sa-steel-600) 100%);
  color: #e6edf5;
  cursor: pointer;
  font-family: var(--sa-chunky);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 8px rgba(0, 0, 0, 0.25);
  transition: filter 80ms ease;
}
#screen-profile .profile-tabs button:hover:not(.active) {
  background: linear-gradient(180deg, var(--sa-steel-300) 0%, var(--sa-steel-400) 60%, var(--sa-steel-500) 100%);
}
#screen-profile .profile-tabs button.active {
  margin-bottom: -2px;
  padding-bottom: 9px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 60%, var(--sa-btn-lo) 100%);
  color: var(--sa-btn-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -4px 6px rgba(70, 88, 110, 0.35);
}

#screen-profile .career-line {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.05em;
}
#screen-profile .career-line b { color: var(--sa-gold); font-weight: 400; }

/* --- Skin grid: steel 3D cards with dark vitrina previews ------------------ */
#screen-profile .skin-grid { gap: 8px; }
#screen-profile .profile-skins-panel .skin-card {
  border: 2px solid var(--sa-btn-border);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--sa-steel-500) 0%, var(--sa-steel-600) 55%, var(--sa-steel-700) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease, box-shadow 80ms ease, border-color 80ms ease, filter 80ms ease;
}
#screen-profile .profile-skins-panel .skin-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 5px 10px rgba(0, 0, 0, 0.45);
}
#screen-profile .profile-skins-panel .skin-card.selected {
  border-color: var(--sa-gold-dark);
  box-shadow:
    inset 0 0 0 1px var(--sa-gold),
    0 0 10px rgba(255, 210, 63, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
#screen-profile .profile-skins-panel .skin-card.locked { filter: grayscale(0.7) brightness(0.75); }
#screen-profile .profile-skins-panel .skin-card canvas {
  border-radius: 5px 5px 0 0;
  background: radial-gradient(ellipse 95% 88% at 50% 42%, #2b3b4f 0%, var(--sa-well) 70%, var(--sa-well-deep) 100%);
}
#screen-profile .profile-skins-panel .skin-card-heading strong {
  color: #eaf2fb;
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
#screen-profile .profile-skins-panel .skin-card .button { font-size: 8px; }

/* --- Cosmetic carousel (Spinners / Pets): steel arrows + dark preview ------ */
#screen-profile .cosmetic-carousel { gap: 12px; }
#screen-profile .cosmetic-carousel canvas {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: radial-gradient(ellipse 92% 90% at 50% 45%, #22303f 0%, var(--sa-well) 68%, var(--sa-well-deep) 100%);
  box-shadow: var(--sa-bevel-well);
}
#screen-profile .carousel-arrow {
  width: 30px;
  height: 54px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 52%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(70, 88, 110, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.45);
  color: var(--sa-btn-ink);
  cursor: pointer;
  font-family: var(--sa-chunky);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: filter 80ms ease, transform 60ms ease, box-shadow 60ms ease;
}
#screen-profile .carousel-arrow:hover {
  background: linear-gradient(180deg, var(--sa-btn-hover-hi) 0%, var(--sa-btn-hover-mid) 55%, var(--sa-btn-lo) 100%);
  filter: brightness(1.05);
}
#screen-profile .carousel-arrow:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(30, 45, 62, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

#screen-profile .cosmetic-meta strong {
  color: #eef4fa;
  font-family: var(--sa-chunky);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
#screen-profile .cosmetic-meta small {
  display: inline-flex;
  align-items: center;
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}
#screen-profile .cosmetic-color {
  color: var(--sa-steel-200);
  font-family: var(--sa-chunky);
  font-size: 10px;
  font-weight: 800;
}
#screen-profile .cosmetic-color input {
  width: 38px;
  height: 28px;
  padding: 2px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 6px;
  background: var(--sa-steel-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* --- STATISTICS well: dark inset, gold pixel title, white/gold rows -------- */
#screen-profile .profile-stats-well {
  height: 322px;
  padding: 10px 14px;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-well) 0%, var(--sa-well-deep) 100%);
  box-shadow: var(--sa-bevel-well), 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #d7e4ef;
  color-scheme: dark;
}
#screen-profile .stats-well-title {
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(126, 166, 212, 0.18);
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
#screen-profile .profile-stat-list > div {
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#screen-profile .profile-stat-list > div:last-child { border-bottom: 0; }
#screen-profile .profile-stat-list dt {
  color: #8aa6bd;
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
#screen-profile .profile-stat-list dd {
  color: #f2f6fa;
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
#screen-profile .profile-stat-list dd.stat-positive { color: var(--sa-gold); }
#screen-profile .profile-stat-list dd.stat-negative { color: var(--sa-chat-red); }

/* Thin SA scrollbar for the stats well (global one is 12px chunky). */
#screen-profile .profile-stats-well { scrollbar-width: thin; scrollbar-color: var(--sa-steel-400) var(--sa-well-deep); }
#screen-profile .profile-stats-well::-webkit-scrollbar { width: 8px; }
#screen-profile .profile-stats-well::-webkit-scrollbar-track { background: var(--sa-well-deep); }
#screen-profile .profile-stats-well::-webkit-scrollbar-thumb {
  border-width: 1px;
  background: linear-gradient(180deg, var(--sa-steel-300), var(--sa-steel-500));
}

/* --- Account strip: dark steel band with pixel copy ------------------------ */
#screen-profile .identity-account-strip {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel);
  color: #dbe7f2;
  transition: filter 80ms ease;
}
#screen-profile .identity-account-strip:hover { border-color: var(--sa-steel-400); filter: brightness(1.08); }
#screen-profile .identity-account-strip > span { background: var(--sa-steel-400); }
#screen-profile .identity-account-strip > span.online { background: var(--sa-chat-green); box-shadow: 0 0 0 3px rgba(140, 224, 138, 0.16); }
#screen-profile .identity-account-strip b {
  color: #eaf2fb;
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
#screen-profile .identity-account-strip small {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.04em;
}