/* profile.css — the player profile (js/profile.js, #profile-screen, 2026-09-11).
   The same page for the player and for anybody else: the portrait and the
   standings on the left, what they have played on the right. Loads after
   style.css; it only adds rules of its own. */

/* over Vienna (9) and the mailbox (40): a profile opened from a sprite or a
   thread must land on top of whatever it was opened from */
#profile-screen { z-index: 42; }
#profile-screen .panel.pf-panel {
  width: min(980px, 96vw); max-width: none; text-align: left; position: relative;
  padding: 22px 24px 20px;
}
/* Back floats (style.css .back-bar / .float-back, sticky in the overlay's
   scroll): it takes its own row, because the portrait sits in the top left
   where a zero-height bar would put the button on top of it */
#profile-screen .pf-back-bar { height: auto; top: 10px; margin: -8px 0 12px -6px; }
#profile-screen .pf-back-bar .float-back { top: 0; }
.pf-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .pf-grid { grid-template-columns: 1fr; } }

/* ---- the left column: who they are ---- */
.pf-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pf-portrait {
  width: 190px; height: 190px; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #1f2a44, #121827); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(51,212,255,.12) inset;
}
.pf-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-portrait .pf-dot {
  position: absolute; right: 9px; bottom: 9px; width: 14px; height: 14px; border-radius: 50%;
  background: #5c6378; border: 2px solid #121827;
}
.pf-portrait .pf-dot.on { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.pf-portrait .pf-dot.dnd { background: #ff5b6e; }
.pf-name { font-size: 28px; font-weight: 900; letter-spacing: .5px; margin: 2px 0 0; word-break: break-word; }
.pf-sub { font-size: 13px; opacity: .8; }
.pf-you { font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: #33d4ff; color: #04161c; vertical-align: 4px; margin-left: 6px; }
.pf-level { width: 100%; }
.pf-level-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; color: #9fe8ff; }
.pf-level-row small { font-weight: 600; opacity: .75; color: #dfe6f5; }
.pf-xpbar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 5px; }
.pf-xpbar span { display: block; height: 100%; background: linear-gradient(90deg, #1fb6e6, #33d4ff); }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.pf-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  padding: 8px 6px; text-align: center;
}
.pf-stat b { display: block; font-size: 19px; font-weight: 900; }
.pf-stat small { display: block; font-size: 11px; opacity: .7; margin-top: 1px; }
.pf-stat.skill b { color: #ffd76a; }
.pf-stat.rep b { color: #7fd9ff; }
.pf-stat.xp b { color: #9fe8ff; }
.pf-stat.elo b { color: #c79bff; }
.pf-facts { width: 100%; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.pf-fact { display: flex; gap: 8px; align-items: baseline; text-align: left; }
.pf-fact i { font-style: normal; flex: 0 0 20px; text-align: center; }
.pf-fact span { flex: 1; min-width: 0; }
.pf-fact small { display: block; opacity: .6; font-size: 11px; }
.pf-actions { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 4px; }
.pf-btn {
  width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px;
  cursor: pointer; color: #04161c; background: #33d4ff; border: 0;
}
.pf-btn:hover { filter: brightness(1.08); }
.pf-btn.ghost { background: rgba(255,255,255,.07); color: #e7ecf7; border: 1px solid rgba(255,255,255,.16); }
.pf-btn:disabled { opacity: .55; cursor: default; filter: none; }
.pf-note { font-size: 12px; opacity: .65; }

/* ---- the right column: what they have played ---- */
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.pf-h { font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.pf-h a { font-size: 11px; letter-spacing: 0; text-transform: none; color: #33d4ff; cursor: pointer; opacity: 1; }
.pf-list { display: flex; flex-direction: column; gap: 5px; }
.pf-run {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.pf-grade {
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; background: rgba(255,255,255,.08);
}
.pf-grade[data-g="S"] { color: #ffd76a; background: rgba(255,215,106,.14); }
.pf-grade[data-g="A"] { color: #7dffb2; background: rgba(60,255,140,.12); }
.pf-grade[data-g="B"] { color: #7fd9ff; background: rgba(51,212,255,.12); }
.pf-grade[data-g="C"] { color: #d6c3ff; }
.pf-grade[data-g="D"], .pf-grade[data-g="F"] { color: #ff9aa9; }
.pf-run-mid { min-width: 0; }
.pf-run-mid b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-run-mid small { display: block; font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-run-score { text-align: right; font-size: 13px; font-weight: 800; white-space: nowrap; }
.pf-run-score small { display: block; font-weight: 600; opacity: .65; font-size: 11px; }
.pf-watch {
  min-width: 40px; height: 32px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 900;
  background: rgba(51,212,255,.14); color: #9fe8ff; border: 1px solid rgba(51,212,255,.35);
}
.pf-watch:hover { background: rgba(51,212,255,.24); }
.pf-watch:disabled { opacity: .35; cursor: default; background: transparent; border-color: rgba(255,255,255,.1); color: #aaa; }
.pf-empty { font-size: 13px; opacity: .6; padding: 6px 2px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pf-two { grid-template-columns: 1fr; } }
.pf-most { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.pf-most .pf-rank { font-weight: 900; opacity: .5; width: 14px; }
.pf-most span { flex: 1; min-width: 0; font-size: 13px; }
.pf-most span b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-most span small { opacity: .6; font-size: 11px; }
.pf-most em { font-style: normal; font-weight: 800; font-size: 12px; color: #9fe8ff; white-space: nowrap; }
.pf-achs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-ach {
  width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); cursor: default;
}
.pf-ach.bronze { border-color: rgba(205,127,50,.55); }
.pf-ach.silver { border-color: rgba(200,210,225,.6); }
.pf-ach.gold { border-color: rgba(255,215,106,.7); }
.pf-ach.plat { border-color: rgba(159,232,255,.8); box-shadow: 0 0 6px rgba(159,232,255,.3); }
.pf-ach-more { font-size: 12px; opacity: .7; align-self: center; margin-left: 4px; }
.pf-loading { padding: 40px 0; text-align: center; opacity: .7; }

/* the menu card's little menu (click the portrait or the name) */
#pc-menu {
  position: fixed; z-index: 60; min-width: 190px; padding: 6px; border-radius: 12px;
  background: #121a2c; border: 1px solid rgba(51,212,255,.35); box-shadow: 0 10px 30px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 4px;
}
#pc-menu button {
  text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: #e7ecf7; font: inherit; font-weight: 800; font-size: 14px;
}
#pc-menu button:hover, #pc-menu button:focus-visible { background: rgba(51,212,255,.15); outline: none; }

/* ---- your pianist: Edit on your own portrait, and the character select drawn
   into the page (charcreate.js renderHeroPick; once every 24 hours) ---- */
.pf-edit {
  position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; color: #04161c; background: #33d4ff; border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.pf-edit:hover { filter: brightness(1.08); }
.pf-edit:disabled { cursor: default; filter: none; color: #dfe6f5; background: rgba(10,14,24,.82); border: 1px solid rgba(255,255,255,.2); }
#profile-screen .pf-edit-host .ac-character-create {
  width: 100%; max-height: none; overflow: visible; margin: 0 auto; text-align: center;
}