/* Perfil do personagem: só /personagem/… carrega este arquivo, depois do home.css (cores, fontes, topo). Tudo dentro de body.pn. As peças
   compartilhadas com outras páginas (painel do item, ícones, gráficos, comparação) usam as variáveis do site: aqui elas recebem os tons
   da página inicial para combinar com o resto. */
body.pn {
  --bg: var(--hn-bg);
  --panel: var(--hn-panel);
  --panel-2: #0a0e18;
  --panel-hover: var(--hn-hover);
  --border: var(--hn-line);
  --border-strong: #2a3450;
  --text: var(--hn-text);
  --muted: var(--hn-muted);
  --radius: 14px;
  --hn-green: oklch(0.82 0.13 155);
  --hn-blue: oklch(0.76 0.11 230);
}
/* body.pn na frente: a regra body.hn .wrap do home.css zerava o espaço de cima e de baixo */
body.pn .pn-main { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; padding-bottom: 56px; }
.pn-back { font-size: 13px; color: var(--hn-muted); align-self: flex-start; }
.pn-back:hover { color: var(--gold); }
body.pn .muted { color: var(--hn-muted); }
body.pn .gold { color: oklch(0.86 0.1 85); }
#content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- cabeçalho ---------- */
.pn-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 18px 20px;
  background: linear-gradient(180deg, var(--hn-panel-2), var(--hn-panel)); border: 1px solid var(--hn-line-2); border-radius: 14px;
}
.pn-id { display: flex; align-items: center; gap: 16px; flex: 1 1 380px; min-width: 0; }
body.pn .avatar.pn-avatar { width: 128px; height: 128px; border-radius: 18px; border: 2px solid var(--fac); font-size: 44px; }
.pn-id-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pn-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-name-row h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pn-faction { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fac); }
.pn-title { font-size: 13px; color: var(--hn-muted); font-style: italic; margin-top: -4px; }
.pn-chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.pn-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--hn-raised); border: 1px solid var(--hn-line-3); color: var(--hn-soft);
}
a.pn-chip:hover { border-color: #3a4763; color: var(--hn-strong); }
.pn-chip-class { padding-left: 5px; }
.pn-chip-class .class-emblem { width: 20px; height: 20px; filter: none; }
.pn-server { color: var(--fac); font-weight: 600; }
/* legião em destaque: linha própria com a bandeira, logo abaixo do nome */
.pn-legion { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; color: var(--hn-strong); }
.pn-legion svg { color: var(--gold); flex: none; }
.pn-legion a:hover { color: var(--gold); }
.pn-legion.none { font-size: 13px; font-weight: 400; font-style: italic; color: #7a8294; }
.pn-legion.none svg { color: #7a8294; }
.pn-badges { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.pn-badge { padding: 2px 8px; border-radius: 5px; font-weight: 600; font-size: 12px; }
.pn-badge.gold { background: oklch(0.82 0.11 85 / 0.12); color: oklch(0.86 0.1 85); }
.pn-badge.up { background: oklch(0.78 0.13 155 / 0.12); color: var(--hn-green); }
.pn-badge.down { background: oklch(0.7 0.15 25 / 0.14); color: oklch(0.8 0.12 25); }

.pn-kpis { display: grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--hn-line-2); border-radius: 12px; background: var(--hn-bg); flex: 0 1 auto; }
.pn-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; border-left: 1px solid var(--hn-line-2); margin-left: -1px; min-width: 0; }
.pn-kpi-label { font-size: 12px; color: var(--hn-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.pn-kpi-value { font-size: 24px; font-weight: 700; white-space: nowrap; color: var(--hn-strong); }
.pn-kpi-value.gold { color: var(--gold); }
.pn-kpi-sub { font-size: 12px; color: var(--hn-muted); max-width: 220px; }
/* rankings por poder: cada linha diz de qual ranking é a posição (classe, servidor, LATAM) */
.pn-kpi-ranks ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.pn-kpi-ranks a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; color: var(--hn-soft); white-space: nowrap; }
.pn-kpi-ranks a:hover span { color: var(--gold); }
.pn-kpi-ranks b { font-size: 15px; font-weight: 700; color: var(--hn-strong); }

.pn-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding-top: 12px; border-top: 1px solid var(--hn-line); }
.pn-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--hn-line-3); background: #121a2b; color: var(--hn-soft); font-size: 13px; font-weight: 500;
}
.pn-btn:hover { border-color: #3a4763; color: var(--hn-strong); }
/* favoritar: moldura dourada fina; ao passar o mouse ela engrossa (sem trocar de cor) */
.pn-fav { border-color: oklch(0.82 0.11 85 / 0.55); background: transparent; color: oklch(0.86 0.1 85); font-weight: 600; transition: box-shadow .12s, border-color .12s; }
.pn-fav:hover { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: oklch(0.9 0.1 85); }
.pn-fav.on { background: var(--gold); color: var(--hn-bg); border-color: transparent; }
.pn-fav.on:hover { color: var(--hn-bg); box-shadow: 0 0 0 1px var(--gold); }
.pn-updated { font-size: 12px; color: var(--hn-faint); }
.pn-updated .live-status { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- abas ---------- */
.pn-tabs {
  position: sticky; top: 56px; z-index: 4; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: var(--hn-bg); border-bottom: 1px solid var(--hn-line);
}
.pn-tabs::-webkit-scrollbar { display: none; }
.pn-tabs button {
  flex: none; padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--hn-muted); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.pn-tabs button:hover { color: var(--hn-strong); }
.pn-tabs button.on { color: var(--hn-strong); border-bottom-color: var(--gold); }
.pn-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pn-panel[hidden] { display: none; }

/* ---------- cartões ---------- */
.pn-card, body.pn .card { background: var(--hn-panel); border: 1px solid var(--hn-line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.pn-card { display: flex; flex-direction: column; gap: 10px; }
.pn-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-card h2, body.pn .card h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--hn-text); text-transform: none; letter-spacing: 0; }
.pn-note { margin: 0; font-size: 12px; color: var(--hn-faint); }
.pn-empty { margin: 0; font-size: 13px; color: var(--hn-muted); }
.pn-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; color: var(--hn-muted); white-space: nowrap; }
.pn-link:hover { color: var(--gold); }
.pn-sub { font-size: 12px; color: var(--hn-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pn-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.pn-num { text-align: right; white-space: nowrap; }
.pn-meter { display: block; height: 4px; border-radius: 2px; background: var(--hn-row); overflow: hidden; }
.pn-meter i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.pn-meter.blue { height: 6px; border-radius: 3px; }
.pn-meter.blue i { background: var(--hn-blue); }
body.pn .card.pending { display: block; }
body.pn .chart-card .chart-head { margin-bottom: 10px; }

/* metas */
/* metas em linhas finas (label, o que falta, barra e a referência) */
.pn-goal-rows { display: flex; flex-direction: column; gap: 10px; }
.pn-goal-row { display: flex; flex-direction: column; gap: 4px; }
.pn-goal-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.pn-goal-label { font-weight: 600; color: var(--hn-soft); }
.pn-goal-line b { font-size: 16px; font-weight: 700; color: oklch(0.86 0.1 85); white-space: nowrap; }
.pn-goal-ref { font-size: 11px; color: var(--hn-faint); }
.pn-goal-top { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: oklch(0.82 0.11 85 / 0.07); border: 1px solid oklch(0.82 0.11 85 / 0.3); }
.pn-goal-top svg { width: 28px; height: 28px; color: var(--gold); flex: none; }
.pn-goal-top div { display: flex; flex-direction: column; gap: 2px; }
.pn-goal-top b { font-size: 15px; color: var(--hn-strong); }
.pn-goal-top span { font-size: 12px; color: var(--hn-muted); }

/* conquistas: só dados reais (posições de topo, refino, exceder, títulos, Daevanion) */
.pn-achs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .pn-achs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pn-ach { display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0; border-radius: 10px; background: var(--hn-bg); border: 1px solid var(--hn-line-2); }
.pn-ach-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--hn-soft); background: #161e30; border: 1px solid var(--hn-line-3); }
/* ranking: selo dourado; coleção e progresso: neutro, com barra quando é porcentagem */
.pn-ach-group { display: flex; flex-direction: column; gap: 6px; }
.pn-ach-group + .pn-ach-group { margin-top: 2px; }
.pn-ach.rank { border-color: oklch(0.82 0.11 85 / 0.35); background: linear-gradient(135deg, oklch(0.82 0.11 85 / 0.08), var(--hn-bg) 70%); }
.pn-ach.rank .pn-ach-icon { color: var(--gold); border-color: oklch(0.82 0.11 85 / 0.45); background: oklch(0.82 0.11 85 / 0.1); }
.pn-ach.collection .pn-ach-icon { color: var(--hn-blue); }
.pn-ach-text .pn-meter { margin-top: 4px; height: 3px; }
.pn-ach-text { display: flex; flex-direction: column; min-width: 0; }
.pn-ach-text b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--hn-strong); } /* quebra em vez de cortar */
.pn-ach-text small { font-size: 11px; color: var(--hn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .pn-achs { grid-template-columns: minmax(0, 1fr); } }

/* mudanças recentes: o item substituído apagado, como no histórico */
.pn-change.swap .eqchg-body > .tile:first-child { opacity: 0.45; filter: grayscale(0.7); }

/* visão geral: o cartão do poder estica até a altura do cartão dos destaques ao lado */
.pn-ov-row { align-items: stretch; }
.pn-ovchart { justify-content: flex-start; }
.pn-ovstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-bg); }
.pn-ovstat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 1px solid var(--hn-line-2); margin-left: -1px; min-width: 0; }
.pn-ovstat span { font-size: 11px; color: var(--hn-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-ovstat b { font-size: 18px; font-weight: 700; color: var(--hn-strong); white-space: nowrap; }
.pn-ovstat b.gold { color: var(--gold); }
.pn-ovstat b.gain { color: var(--gain); }
.pn-ovstat b.loss { color: var(--danger); }
.pn-ovchart-body { flex: 1; display: flex; min-height: 200px; }
.pn-ovchart-body .line { flex: 1; display: flex; flex-direction: column; }
.pn-ovchart-body .line-plot { flex: 1; height: auto; min-height: 160px; }

/* embaixo dos destaques: mudanças recentes e visual lado a lado */
.pn-ov-bottom { display: grid; gap: 14px; padding-top: 10px; border-top: 1px solid var(--hn-line); }
.pn-ov-bottom.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pn-ov-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-ov-col .pn-change { flex-wrap: wrap; row-gap: 2px; }
.pn-visual { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; --tile: 40px; }
.pn-tile-more { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--hn-soft); }

/* destaques do equipamento na visão geral: os itens de grau e refino mais altos */
.pn-hls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn-hl {
  display: flex; align-items: center; gap: 10px; padding: 8px; min-width: 0; text-align: left; cursor: pointer; --tile: 44px;
  border-radius: 10px; color: var(--hn-text); background: var(--hn-bg);
  border: 1px solid color-mix(in srgb, var(--grade, var(--hn-line-2)) 35%, var(--hn-line-2));
}
.pn-hl:hover { background: #121a2b; border-color: color-mix(in srgb, var(--grade, var(--gold)) 70%, transparent); }
.pn-hl .tile { pointer-events: none; }
.pn-hl-text { display: flex; flex-direction: column; min-width: 0; }
.pn-hl-name { font-size: 13px; font-weight: 600; color: var(--grade, var(--hn-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-hl-meta { font-size: 12px; color: var(--hn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .pn-hls { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pn-ov-bottom.two { grid-template-columns: minmax(0, 1fr); } }

/* mudanças de equipamento */
.pn-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; --tile: 32px; }
.pn-change { --kind: var(--gold); display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--hn-soft); }
.pn-change.enchant { --kind: var(--hn-blue); }
.pn-change time { flex: none; width: 40px; font-size: 12px; color: var(--hn-faint); }
.pn-kind {
  flex: none; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
  color: var(--kind); background: color-mix(in srgb, var(--kind) 14%, transparent);
}
.pn-change-body { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.pn-change-body .tile { --tile: 32px; border-radius: 6px; }
.pn-changes.full { gap: 6px; }
.pn-changes.full .pn-change { padding: 7px 8px; border-radius: 8px; border-left: 3px solid var(--kind); background: var(--hn-bg); }
.pn-changes.full .pn-change:hover { background: #121a2b; }
.pn-changes.full .pn-kind { min-width: 64px; text-align: center; }
.pn-legend { display: flex; gap: 10px; font-size: 12px; color: var(--hn-muted); }
.pn-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pn-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.pn-legend .enchant::before { background: var(--hn-blue); }
.pn-more {
  align-self: center; margin-top: 2px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--hn-line-3); color: var(--hn-soft); font-size: 13px;
}
.pn-more:hover { border-color: #3a4763; color: var(--hn-strong); }

/* ---------- equipamentos ---------- */
.pn-eq-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.pn-eq { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); grid-template-areas: 'cols side' 'arcana side' 'other side'; gap: 12px 14px; }
.pn-eq-cols { grid-area: cols; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; } /* as linhas da janela do jogo, 2 casas por linha; em 1 coluna ficam na mesma ordem */
.pn-eq-side { grid-area: side; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-eq-arcana { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hn-line); }
.pn-eq-arcana:first-of-type { grid-area: arcana; }
.pn-eq-row {
  display: flex; align-items: center; gap: 9px; padding: 5px; border-radius: 9px; min-width: 0; text-align: left; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--hn-text); --tile: 42px;
}
.pn-eq-row:hover { background: #121a2b; }
.pn-eq-row.is-selected, .pn-eq-row.is-pinned { border-color: color-mix(in srgb, var(--grade, var(--gold)) 70%, transparent); background: oklch(0.82 0.11 85 / 0.06); }
.pn-eq-row.empty { cursor: default; opacity: 0.55; }
.pn-eq-row .tile { pointer-events: none; }
.pn-eq-row.is-selected .tile { box-shadow: 0 0 0 2px var(--grade, var(--gold)); }
.pn-eq-text { display: flex; flex-direction: column; min-width: 0; }
.pn-eq-slot { font-size: 12px; color: var(--hn-muted); }
.pn-eq-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--grade, var(--hn-text)) 62%, var(--hn-muted)); }
.pn-eq-row:hover .pn-eq-name, .pn-eq-row.is-selected .pn-eq-name, .pn-eq-row.is-pinned .pn-eq-name { color: var(--grade, var(--hn-text)); }
.pn-arcana-row { display: flex; gap: 8px; flex-wrap: wrap; --tile: 46px; }
.tile.pn-round { border-radius: 50%; }
.pn-detail { background: var(--hn-bg); border: 1px solid var(--hn-line-2); border-radius: 12px; }
.pn-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--hn-line); }
.pn-extra { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; background: var(--hn-bg); border: 1px solid var(--hn-line-2); min-width: 0; --tile: 36px; }
.pn-extra .tile { cursor: default; }
.pn-extra > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pn-extra small { font-size: 12px; color: var(--hn-muted); }
.pn-extra b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* atributos */
.pn-stats { gap: 0; }
.pn-stats .pn-card-head { padding-bottom: 6px; }
.pn-attr { border-bottom: 1px solid var(--hn-line); }
.pn-attr:last-child { border-bottom: 0; }
.pn-attr > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
.pn-attr > summary::-webkit-details-marker { display: none; }
.pn-attr > summary > span:first-child { flex: 1; }
.pn-attr > summary .muted { font-size: 12px; font-weight: 400; }
.pn-attr > summary::after { content: '+'; width: 12px; text-align: center; font-size: 13px; color: var(--hn-muted); }
.pn-attr[open] > summary::after { content: '−'; }
.pn-attr-rows { display: flex; flex-direction: column; padding-bottom: 8px; }
.pn-attr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 4px; border-radius: 6px; font-size: 13px; }
.pn-attr-row:hover { background: #121a2b; }
.pn-attr-name { display: flex; flex-direction: column; color: var(--hn-soft); min-width: 0; }
.pn-attr-name small { font-size: 11px; color: var(--hn-faint); }
.pn-attr-row b { font-weight: 700; color: var(--hn-strong); }

/* ---------- progressão ---------- */
.pn-board-sum { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 8px 10px; background: var(--hn-bg); border: 1px solid var(--hn-line-2); border-radius: 9px; font-size: 13px; color: var(--hn-soft); }
.pn-board-sum b { font-size: 20px; font-weight: 700; color: oklch(0.86 0.1 85); }
.pn-board-sum .muted { margin-left: auto; }
.pn-board-rows { display: flex; flex-direction: column; gap: 8px; }
.pn-board-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--hn-soft); }
.pn-scopes { align-self: flex-start; margin-bottom: 10px; }
.pn-pr-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-gain { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--hn-muted); }
.pn-gain b { font-size: 22px; font-weight: 700; color: var(--hn-strong); }
.pn-gain .gain, .pn-hbody .gain { color: var(--gain); }
.pn-gain .loss, .pn-hbody .loss { color: var(--danger); }

/* histórico: mudanças da mesma atualização num grupo, com data e hora; item antigo apagado, novo em destaque */
.pn-hgroups { display: flex; flex-direction: column; gap: 10px; }
.pn-hgroup { background: var(--hn-bg); border: 1px solid var(--hn-line-2); border-radius: 10px; overflow: hidden; }
.pn-hhead { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--hn-line); font-size: 12px; color: var(--hn-muted); }
.pn-hhead time { color: var(--hn-soft); font-weight: 600; }
.pn-hgroup ul { list-style: none; margin: 0; padding: 0; }
.pn-hrow { --kind: var(--gold); display: grid; grid-template-columns: 70px 110px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-left: 3px solid var(--kind); font-size: 13px; color: var(--hn-soft); --tile: 36px; }
.pn-hrow + .pn-hrow { border-top: 1px solid var(--hn-line); }
.pn-hrow.enchant { --kind: var(--hn-blue); }
.pn-hrow .pn-kind { justify-self: start; }
.pn-hslot { color: var(--hn-muted); }
.pn-hbody { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pn-old .tile { opacity: 0.45; filter: grayscale(0.7); }
.pn-arrow { color: var(--hn-faint); }
.pn-names { display: flex; flex-direction: column; min-width: 0; margin-left: 4px; }
.pn-old-name { font-size: 12px; color: var(--hn-faint); text-decoration: line-through; text-decoration-color: rgba(152, 160, 179, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-new-name { font-weight: 600; color: var(--grade, var(--hn-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- habilidades ---------- */
.pn-skill-grid { --tile: 52px; }
.pn-skill-box { min-height: 72px; display: flex; align-items: center; padding: 12px; }
.pn-skill-detail { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pn-skill-detail img { width: 44px; height: 44px; border-radius: 9px; border: 1.5px solid var(--gold); }
.pn-skill-detail > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-skill-name { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.pn-skill-name .gold { font-size: 12px; font-weight: 600; }

/* ---------- tablet e celular ---------- */
@media (max-width: 1100px) {
  .pn-eq-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .pn-eq { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'cols' 'arcana' 'other'; }
  .pn-eq-side { display: none; } /* o painel abre numa janela flutuante ao tocar */
  .pn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 720px) {
  body.pn .pn-main { padding-top: 12px; padding-bottom: 40px; gap: 12px; }
  .pn-hero { padding: 14px; gap: 14px; }
  .pn-id { flex-basis: 100%; gap: 12px; align-items: flex-start; }
  body.pn .avatar.pn-avatar { width: 88px; height: 88px; border-radius: 14px; font-size: 32px; }
  .pn-name-row h1 { font-size: 22px; }
  .pn-kpi { padding: 8px 10px; }
  .pn-kpi-label { font-size: 10px; white-space: normal; }
  .pn-kpi-value { font-size: 18px; }
  .pn-kpi-sub { font-size: 11px; }
  .pn-buttons { width: 100%; }
  .pn-btn { flex: 1 1 auto; justify-content: center; }
  .pn-tabs { top: 0; }
  .pn-eq-cols { grid-template-columns: minmax(0, 1fr); }
  .pn-board-row { grid-template-columns: 80px minmax(0, 1fr) 56px 36px; gap: 8px; }
  .pn-hrow { grid-template-columns: auto minmax(0, 1fr); }
  .pn-hrow .pn-hbody { grid-column: 1 / -1; }
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-kpi-ranks { grid-column: 1 / -1; border-top: 1px solid var(--hn-line-2); margin-top: -1px; }
  .pn-kpi-ranks ul { flex-direction: row; gap: 14px; flex-wrap: wrap; }
  .pn-kpi-ranks a { gap: 6px; }
}

/* arcanas redondas: o +N no pé do círculo (no canto ele seria cortado) */
.tile.pn-round { overflow: visible; }
.tile.pn-round img { border-radius: 50%; }
.tile.pn-round .tile-badge { right: auto; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 0 3px; border-radius: 4px; background: var(--hn-bg); }
/* cartões lado a lado na visão geral: a nota vai para o pé do cartão (o mais baixo fica sem vão embaixo do conteúdo) */
.pn-ov-row > .pn-card > .pn-note:last-child { margin-top: auto; font-size: 10px; line-height: 1.3; }
/* metas e conquistas: o conteúdo no meio do cartão (na altura), quando o vizinho é mais alto; a nota das metas fica no pé */
.pn-ov-row > .pn-card > .pn-goal-rows, .pn-ov-row > .pn-card > .pn-goal-top, .pn-ov-row > .pn-card > .pn-ov-body { margin-block: auto; }
.pn-ov-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pn-ov-row > .pn-card:has(> .pn-note:last-child) { padding-bottom: 8px; }