/* =========================================================================
   THE MINDGAMER — Perfil

   Carrega depois de styles.css (tokens e moldura: stage, topbar, rail) e de
   painel.css (painel, avatar, itens do Founder, popover). Aqui só vive o que é
   do Perfil.

   Regra do arquivo: a moldura é IDÊNTICA à da Home. Navegação que muda de tela
   pra tela quebra a sensação de "um lugar só", então nada de topbar ou rail
   próprios aqui.

   Todas as medidas são coordenadas lidas do mockup (1672×941) × --u.
   ========================================================================= */

/* =========================================================== identidade ===== */

.id {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(8 * var(--u)) 0 calc(24 * var(--u));
}

.id__text { flex: 1; min-width: 0; }

.id__name {
  margin: 0 0 calc(12 * var(--u));
  font-family: var(--font-serif);
  font-weight: 400;
  /* Nome tem até 16 caracteres (ver README). O tamanho encolhe com --len pra
     caber na coluna de ~358u: 0.58em por caractere é a largura medida de um nome
     largo e realista ("WandaMaximoffBR_") na Playfair. Nome curto fica nos 56u do
     mockup; nome absurdo (tudo M maiúsculo) cai nas reticências. */
  font-size: min(calc(56 * var(--u)), calc(350 * var(--u) / (var(--len, 6) * 0.58)));
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-0);
  text-shadow: 0 0 calc(24 * var(--u)) rgb(120 160 255 / 0.28);
}

.id__since {
  margin: 0;
  font-size: calc(19 * var(--u));
  line-height: 1;
  color: var(--ink-2);
}

.acct__label {
  margin: 0 0 calc(12 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.acct__row {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}

.acct__xp {
  flex: none;
  font-size: calc(19 * var(--u));
  line-height: 1;
  color: var(--ink-1);
  white-space: nowrap;
}

.meter--acct { flex: 1; height: calc(16 * var(--u)); }

.id__stats {
  margin: auto 0 0;
  padding-top: calc(22 * var(--u));
  border-top: 1px solid rgb(170 195 255 / 0.14);
  font-size: calc(19 * var(--u));
  line-height: 1;
  color: var(--ink-2);
}

/* ============================================================ progresso ===== */

.games {
  margin: 0;
  padding: 0;
  list-style: none;
}

.game {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) calc(66 * var(--u)) minmax(0, 1.05fr) calc(72 * var(--u));
  align-items: center;
  gap: calc(18 * var(--u));
  height: calc(58 * var(--u));
  border-top: 1px solid rgb(170 195 255 / 0.10);
}

.game:first-child { border-top: 0; }

/* moldura em losango em volta do ícone — mesma linguagem do selo da casa */
.game__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}

.game__frame::before {
  content: "";
  position: absolute;
  inset: calc(8 * var(--u));
  border: 1px solid rgb(160 190 255 / 0.30);
  border-radius: calc(3 * var(--u));
  transform: rotate(45deg);
}

.game__icon {
  position: relative;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgb(110 150 255 / 0.5));
}

.game__name {
  font-size: calc(26 * var(--u));
  line-height: 1;
  color: var(--ink-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game__level {
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: var(--ink-1);
  white-space: nowrap;
}

.meter--game { width: 100%; height: calc(13 * var(--u)); }

.game__pct {
  font-size: calc(20 * var(--u));
  line-height: 1;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- gráfico ----- */

/* XP por dia: uma série só, então sem legenda — o título diz o que é. Só o
   dia de hoje leva o número escrito; os outros mostram no hover/foco. */

.week {
  margin: auto 0 0;
  padding-top: calc(20 * var(--u));
}

.week__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(14 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.week__total { letter-spacing: 0.06em; text-transform: none; font-size: calc(17 * var(--u)); color: var(--ink-2); }

.week__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.week__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: calc(112 * var(--u));
  border-bottom: 1px solid rgb(170 195 255 / 0.22);
  outline-offset: 2px;
}

/* escala: 200 XP no topo, com folga pro rótulo do dia de hoje */
.week__bar {
  width: 46%;
  height: calc(var(--v) / 200 * 100%);
  border-radius: 4px 4px 0 0;
  background: rgb(120 155 240 / 0.45);
}

.is-today .week__bar { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

.week__value {
  margin-bottom: calc(6 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: var(--ink-0);
}

.week__day {
  display: block;
  margin-top: calc(9 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1;
  text-align: center;
  color: var(--ink-3);
}

.is-today .week__day { color: var(--ink-1); }

.week__col:hover .week__bar,
.week__col:focus-visible .week__bar { background: var(--accent); }

.is-today .week__col:hover .week__bar,
.is-today .week__col:focus-visible .week__bar { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* tooltip nasce em cima da barra do dia */
.week__bar { position: relative; }

.week__bar::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6 * var(--u));
  left: 50%;
  translate: -50% 0;
  padding: calc(6 * var(--u)) calc(9 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(5 * var(--u));
  background: rgb(12 16 38 / 0.96);
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-0);
  opacity: 0;
  pointer-events: none;
}

.week__col:hover .week__bar::after,
.week__col:focus-visible .week__bar::after { opacity: 1; }

/* hoje já tem o número escrito */
.is-today .week__bar::after { display: none; }

/* =============================================================== amigos ===== */

.friends {
  margin: 0;
  padding: 0;
  list-style: none;
}

.friend {
  display: grid;
  grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(18 * var(--u));
  height: calc(72 * var(--u));
  border-top: 1px solid rgb(170 195 255 / 0.10);
}

.friend:first-child { border-top: 0; }

/* nome e selo lado a lado; se não couber, o selo desce pra baixo do nome */
.friend__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  min-width: 0;
}

.friend__name {
  max-width: 100%;
  font-size: calc(26 * var(--u));
  line-height: 1.15;
  padding-bottom: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-0);
}

.friend__actions {
  display: flex;
  gap: calc(10 * var(--u));
}

.friend__status {
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.2;
  color: var(--ink-3);
}

/* lista vazia ou convidado: uma frase e, se for o caso, o Entrar */
.friend--vazio {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u));
  height: auto;
  padding: calc(14 * var(--u)) 0;
}

.friend__vazio {
  flex: 1 1 calc(260 * var(--u));
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.45;
  color: var(--ink-2);
}

.friend--vazio .pop__send { margin: 0; align-self: center; }

.iconbtn[hidden] { display: none; }

/* =========================================================== histórico ===== */

.matches {
  margin: 0;
  padding: 0;
  list-style: none;
}

.match {
  display: grid;
  grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(18 * var(--u));
  height: calc(58 * var(--u));
  border-top: 1px solid rgb(170 195 255 / 0.10);
}

.match:first-child { border-top: 0; }

.match__result {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  border: calc(1.5 * var(--u)) solid currentColor;
  color: var(--ink-3);
}

.match__result svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

.match--win  .match__result { color: #62c39a; box-shadow: 0 0 calc(12 * var(--u)) rgb(98 195 154 / 0.35); }
.match--loss .match__result { color: #d97a85; box-shadow: 0 0 calc(12 * var(--u)) rgb(217 122 133 / 0.30); }

/* duas linhas: o adversário ganha a largura toda da linha de baixo em vez de
   disputar uma coluna estreita com o nome do jogo */
.match__main,
.match__side {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  min-width: 0;
}

.match__side { align-items: flex-end; }

.match__game,
.match__vs,
.match__xp,
.match__when {
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match__game { font-size: calc(22 * var(--u)); color: var(--ink-0); }
.match__vs   { font-size: calc(17 * var(--u)); color: var(--ink-2); padding-bottom: 0.15em; }  /* não corta o _ */
.match__xp   { font-size: calc(19 * var(--u)); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.match__when { font-size: calc(16 * var(--u)); color: var(--ink-3); }

/* ==================================================== telas estreitas ===== */

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .id__name { font-size: min(calc(48 * var(--u)), calc(285 * var(--u) / (var(--len, 6) * 0.58))); }
  .id .avatar { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
  .id { gap: calc(20 * var(--u)); }

  /* nas listas, o que sobra sai: em coluna estreita o nome já diz o essencial */
  .game {
    grid-template-columns: calc(50 * var(--u)) minmax(0, 1fr) calc(58 * var(--u));
    height: calc(62 * var(--u));
  }
  .game__pct { display: none; }
  .meter--game { display: none; }

  .friend { grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) auto; min-height: calc(66 * var(--u)); height: auto; padding: calc(10 * var(--u)) 0; }
  .friend .iconbtn { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .friend .iconbtn svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }

  .match { height: auto; padding: calc(12 * var(--u)) 0; }
}

/* histórico sem nenhuma partida: a lista continua existindo, com uma linha
   que explica o vazio em vez de um bloco em branco */
.match--empty {
  display: block;
  padding: calc(18 * var(--u)) 0;
  color: var(--ink-3);
  font-size: max(13px, calc(16 * var(--u)));
  text-align: center;
}