/* Perfil: botão do canto, avatar e moldura (usados também no cartão, na edição e no prêmio de marco) */

.profile {
  position: fixed;
  z-index: 70; /* acima da tela inicial (60) */
  top: max(20px, env(safe-area-inset-top)); /* sobra espaço em cima para a coroa e os enfeites das molduras */
  left: 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Só aparece nas telas de passeio; durante a partida o espaço é do placar */
body[data-screen="title"] .profile,
body[data-screen="map"] .profile { display: flex; }
.profile:active { transform: scale(0.95); }
.profile:focus-visible { outline: 3px solid #ffe28a; outline-offset: 4px; border-radius: 18px; }

.profile-name {
  max-width: 92px;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(28, 16, 20, 0.62);
  color: #fff4e6;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Moldura: um anel de cor em volta do avatar ---------- */
.profile-frame {
  --avatar: 44px;
  --frame-bg: conic-gradient(from 210deg, #ffe28a, #e8707f, #ffb060, #ffe28a);
  --frame-glow: rgba(255, 210, 120, 0.4);
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--avatar) + 8px);
  height: calc(var(--avatar) + 8px);
  border-radius: 50%;
  background: var(--frame-bg);
  box-shadow: 0 0 0 2px rgba(60, 28, 36, 0.85), 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 14px var(--frame-glow);
}
.profile-frame.big { --avatar: 84px; margin: 6px auto 12px; }
.profile-frame[data-frame="azul"] { --frame-bg: linear-gradient(135deg, #9be3ff, #3a7bd5); --frame-glow: rgba(90, 170, 255, 0.45); }
.profile-frame[data-frame="laranja"] { --frame-bg: linear-gradient(135deg, #ffd08a, #ee7424); --frame-glow: rgba(255, 150, 60, 0.45); }
.profile-frame[data-frame="roxo"] { --frame-bg: linear-gradient(135deg, #dcc2ff, #7a4bd1); --frame-glow: rgba(160, 110, 255, 0.45); }
.profile-frame[data-frame="verde"] { --frame-bg: linear-gradient(135deg, #a8f5b5, #1fa86a); --frame-glow: rgba(70, 220, 130, 0.45); }
.profile-frame[data-frame="rosa"] { --frame-bg: linear-gradient(135deg, #ffc2e0, #e5588a); --frame-glow: rgba(255, 110, 170, 0.45); }
.profile-frame[data-frame="arco"] {
  --frame-bg: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bff95, #4dd2ff, #b46bff, #ff6bd6, #ff6b6b);
  --frame-glow: rgba(255, 255, 255, 0.55);
}
.profile-frame[data-frame="ouro"] {
  --frame-bg: conic-gradient(from 30deg, #fff3b0, #e0a82e, #fff3b0, #b8801a, #fff3b0);
  --frame-glow: rgba(255, 215, 90, 0.7);
}

/* ---------- Avatar: o vagalume (de outras cores) ou um desenho ---------- */
.profile-avatar {
  --size: var(--avatar, 44px);
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #6a3a48, #2b1a20 78%);
  box-shadow: inset 0 0 0 2px rgba(60, 28, 36, 0.85);
  overflow: hidden;
}
.avatar-fly { display: grid; place-items: center; width: 80%; height: 80%; }
.avatar-fly .mark-cat { width: 100%; height: 100%; animation: none; }
.avatar-emoji { font-size: calc(var(--size) * 0.58); line-height: 1; }

/* Em telas estreitas o perfil (canto esquerdo) desce até a altura do título: abre espaço em cima dele */
@media (max-width: 520px) {
  .title-logo { margin-top: max(4vh, 84px); }
}