/* Perfil 360 (tela cheia): mesmo visual escuro e dourado do lobby */
.pf { position: fixed; inset: 0; z-index: 60; overflow: auto; color: var(--lb-text);
  background: radial-gradient(ellipse at 50% -10%, rgba(214, 178, 106, .14), transparent 60%), #0d0b09;
  font-family: Inter, "Segoe UI", sans-serif; scrollbar-width: thin; scrollbar-color: var(--lb-gold-lo) transparent; }
.pf.hidden { display: none; }
.pf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; padding: 0 24px; text-align: center; font: 600 16px Cinzel, serif; color: var(--lb-gold-hi); }
.pf-page { max-width: 1240px; margin: 0 auto; padding: 70px 20px 60px; display: flex; flex-direction: column; gap: 18px; }

.pf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--lb-line); padding-bottom: 14px; }
.pf-title h1 { margin: 0; font: 900 30px "Cinzel Decorative", Cinzel, serif; color: var(--lb-gold-hi); letter-spacing: .04em; text-shadow: 0 0 18px rgba(255, 200, 90, .35); }
.pf-sub { font-size: 12px; color: var(--lb-muted); }

.pf-filters { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.pf-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-flabel { font: 600 10px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-muted); margin-right: 4px; }
.pf-chip { --c: var(--lb-gold); font: 600 12px Inter, sans-serif; color: var(--lb-text); background: rgba(0, 0, 0, .35); border: 1px solid var(--lb-line);
  padding: 6px 12px; border-radius: 999px; cursor: var(--cursor-talk, pointer); }
.pf-chip:hover { border-color: var(--c); }
.pf-chip.on { border-color: var(--c); color: #1a1208; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }

.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pf-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--lb-line);
  background: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .35)); border-radius: 6px; overflow: hidden; }
.pf-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lb-line); }
.pf-card.gold::before { background: var(--lb-gold); }
.pf-card.red::before { background: #ff6a52; }
.pf-clabel { font: 600 10px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-muted); }
.pf-cvalue { font: 700 24px Cinzel, serif; color: var(--lb-gold-hi); }
.pf-csub { font-size: 11.5px; color: #a89a82; }

.pf-insights { border: 1px solid var(--lb-line); border-radius: 6px; padding: 14px 18px; background: rgba(0, 0, 0, .3); }
.pf-insights h2, .pf-timeline h2 { margin: 0 0 8px; font: 700 17px Cinzel, serif; color: var(--lb-gold-hi); }
.pf-insights ul { margin: 0; padding-left: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 24px; }
.pf-insights li { font-size: 13px; line-height: 1.5; }
.pf-insights li::marker { color: var(--lb-gold); }

.pf-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.pf-chart { border: 1px solid var(--lb-line); border-radius: 6px; padding: 12px 14px; background: rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 2px; }
.pf-chart h3 { margin: 0; font: 700 13.5px Cinzel, serif; color: var(--lb-text); }
.pf-chart canvas { width: 100%; height: 170px; margin-top: 6px; }

.pf-timeline { border: 1px solid var(--lb-line); border-radius: 6px; padding: 14px 18px; background: rgba(0, 0, 0, .3); scroll-margin-top: 12px; }
.pf-tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(214, 178, 106, .25); }
.pf-tl-day { margin: 14px 0 6px -18px; padding-left: 18px; font: 600 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--lb-gold); }
.pf-tl-item { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; margin: 3px 0;
  border-radius: 4px; background: rgba(255, 230, 170, .03); }
.pf-tl-item:hover { background: rgba(255, 230, 170, .07); }
.pf-tl-item::before { content: ""; position: absolute; left: -24px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lb-gold); box-shadow: 0 0 8px rgba(255, 200, 90, .7); }
.pf-tl-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--lb-line); color: var(--lb-gold-hi); font-size: 14px; }
.pf-tl-body { display: flex; flex-direction: column; }
.pf-tl-body b { font-weight: 600; font-size: 13.5px; }
.pf-tl-who { font-size: 11.5px; }
.pf-tl-item time { font: 600 12px Inter, sans-serif; color: var(--lb-muted); }
.t-levelup .pf-tl-icon { color: #9fe870; border-color: rgba(159, 232, 112, .4); }
.t-quest_first .pf-tl-icon { color: #b59cff; border-color: rgba(181, 156, 255, .4); }
.t-map_first .pf-tl-icon { color: #6fc2ff; border-color: rgba(111, 194, 255, .4); }
.pf-empty { color: var(--lb-muted); font-size: 13px; }

@media (max-width: 720px) {
  .pf-charts { grid-template-columns: 1fr; }
  .pf-title h1 { font-size: 22px; }
}