/* A janela "Personagem" (pt-personagem-janela.js), no estilo das telas REVIVAL PT. Prefixo pj-. */
#statusWin.pj { --pj-ouro: #e9c27a; --pj-texto: #efe6d4; --pj-apagado: rgba(239,230,212,.55); --pj-borda: rgba(233,194,122,.3); --pj-ciano: #5fd8e6;
  position: fixed; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); box-sizing: border-box; display: flex; flex-direction: column;
  width: min(1000px, calc(100vw - 24px)); height: min(730px, calc(100vh - 24px)); max-height: none; padding: 0 20px 16px; overflow: hidden;
  color: var(--pj-texto); font: 13px/1.3 "Segoe UI", system-ui, sans-serif; border-radius: 12px; border: 1px solid var(--pj-borda);
  background: radial-gradient(ellipse at 50% 0, rgba(95,216,230,.07), transparent 55%), linear-gradient(#211a14, #140f0b 60%, #110d0a);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 0 4px rgba(233,194,122,.06), 0 20px 50px rgba(0,0,0,.65); user-select: none; -webkit-user-select: none; }
#statusWin.pj[hidden] { display: none; }
#statusWin.pj button { font: inherit; color: inherit; margin: 0; cursor: pointer; }
#statusWin.pj button:disabled { cursor: default; }
#statusWin.pj h3, #statusWin.pj h4 { margin: 0; }

.pj-cab { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 56px; }
.pj-cab h2 { margin: 0; font: 600 21px/1 "Cinzel", Georgia, serif; letter-spacing: .07em; font-variant: small-caps; text-shadow: 0 1px 3px #000; }
.pj-pilula { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 13px; border-radius: 14px; border: 1px solid var(--pj-borda);
  background: rgba(0,0,0,.4); font: 700 11px/1 "Cinzel", Georgia, serif; letter-spacing: .08em; }
.pj-pilula b { margin-left: 5px; color: var(--pj-ouro); }
.pj-fim { flex: 1; }
#statusWin .pj-x { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(239,230,212,.7); font: 400 22px/1 system-ui, sans-serif; }
#statusWin .pj-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.pj-filete { position: relative; flex: none; height: 1px; margin: 0 -20px 14px; background: linear-gradient(90deg, transparent, rgba(233,194,122,.7) 18%, rgba(233,194,122,.7) 82%, transparent); }
.pj-filete::after { content: ''; position: absolute; left: 50%; top: 0; width: 15px; height: 15px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 3px;
  background: radial-gradient(circle at 35% 30%, #e6fdff, #5fd8e6 40%, #1f6fb0); box-shadow: 0 0 14px rgba(95,216,230,.8), 0 0 0 2px rgba(0,0,0,.6); }

.pj-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.pj-esq { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-right: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(233,194,122,.5) transparent; }
.pj-dir { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-left: 20px; border-left: 1px solid rgba(233,194,122,.15); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(233,194,122,.5) transparent; }
.pj-ciano { color: var(--pj-ciano); }
.pj-tit { display: flex; align-items: center; gap: 0; flex: none; margin-top: 6px !important; font: 700 12.5px/1.2 "Cinzel", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.pj-tit::after { content: ''; flex: 1; height: 1px; margin-left: 12px; background: linear-gradient(90deg, rgba(233,194,122,.45), transparent); }
.pj-tit small { order: 2; margin-left: 12px; font: 500 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--pj-apagado); }
.pj-tit small b { color: var(--pj-texto); }
.pj-losango { display: inline-block; width: 7px; height: 7px; margin-right: 10px; transform: rotate(45deg); background: var(--pj-ciano); box-shadow: 0 0 6px rgba(95,216,230,.8); }

/* o cartão */
.pj-card { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; flex: none; padding: 12px 16px; border-radius: 10px;
  border: 1px solid rgba(233,194,122,.22); background: linear-gradient(90deg, rgba(40,31,22,.85), rgba(60,46,32,.35)); }
.pj-nivel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--pj-borda); background: rgba(0,0,0,.35); }
.pj-nivel b { font: 600 22px/1 "Cinzel", Georgia, serif; }
.pj-nivel small { font: 700 8px/1.4 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--pj-apagado); }
.pj-retrato { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #0d0a07; box-shadow: 0 0 0 1px rgba(233,194,122,.35); }
.pj-retrato img, .pj-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-quem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pj-quem b { font: 600 16px/1.1 "Cinzel", Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-quem small, .pj-tribo small { color: var(--pj-apagado); font-size: 11.5px; }
.pj-tribo { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pj-tribo small { font: 700 9.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.pj-tribo b { font-size: 12.5px; }
.pj-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; flex: none; }
.pj-linhas div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.pj-linhas span { color: var(--pj-apagado); }
.pj-exp { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pj-exp div { display: flex; justify-content: space-between; font-size: 12px; }
.pj-exp div b { font-variant-numeric: tabular-nums; }
.pj-exp i { height: 7px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; }
.pj-exp u { display: block; height: 100%; background: linear-gradient(90deg, #1f9fb0, #5fd8e6); box-shadow: 0 0 8px rgba(95,216,230,.6); }
.pj-exp small { color: var(--pj-apagado); font-size: 11px; }

/* resistências */
.pj-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: none; }
.pj-r { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--c, rgba(233,194,122,.25)); background: rgba(0,0,0,.3); }
.pj-r small { font: 700 9.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pj-apagado); }
.pj-r i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c2) 45%, var(--c3)); box-shadow: 0 0 10px var(--c2); }
.pj-r b { font-size: 13px; }
.pj-fogo { --c: rgba(230,120,60,.45); --c2: #ff8a3c; --c3: #8a2a10; }
.pj-gelo { --c: rgba(120,190,255,.45); --c2: #8ec8ff; --c3: #1f5fa8; }
.pj-raio { --c: rgba(190,120,255,.45); --c2: #c88bff; --c3: #5a2a9a; }
.pj-terra { --c: rgba(220,180,90,.45); --c2: #e8c060; --c3: #7a5a1a; }
.pj-veneno { --c: rgba(120,200,90,.45); --c2: #8fdc5a; --c3: #2f6a1a; }

/* recursos */
.pj-recursos { display: flex; flex-direction: column; gap: 8px; flex: none; }
.pj-barra { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; }
.pj-frasco { width: 16px; height: 18px; border-radius: 4px 4px 8px 8px; background: radial-gradient(circle at 40% 60%, #fff8, var(--f) 50%); box-shadow: 0 0 6px var(--f); }
.pj-trilho { position: relative; height: 16px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; }
.pj-trilho u { position: absolute; inset: 0 auto 0 0; display: block; background: var(--b); }
.pj-trilho span { position: relative; display: block; text-align: center; font: 700 10.5px/16px "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
.pj-vermelho { --f: #e0504a; --b: linear-gradient(90deg, #8a2020, #d8524a); }
.pj-azul { --f: #4ab8e0; --b: linear-gradient(90deg, #1f7f9a, #49c3dc); }
.pj-verde { --f: #6ac24a; --b: linear-gradient(90deg, #3a7a2a, #7ec85a); }

/* personagens da conta */
.pj-conta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; flex: none; }
.pj-char, .pj-vago { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; height: 84px; box-sizing: border-box; padding: 8px 4px 6px;
  border-radius: 8px; text-align: center; }
.pj-char { border: 1px solid rgba(233,194,122,.3); background: rgba(0,0,0,.3); }
.pj-char.pj-em-jogo { border-color: var(--pj-ouro); box-shadow: 0 0 10px rgba(233,194,122,.25); }
.pj-char em { position: absolute; left: 4px; top: -7px; padding: 1px 5px; border-radius: 4px; background: var(--pj-ouro); color: #2a1d0a; font: 700 8px/1.4 "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.pj-lv { position: absolute; right: 4px; top: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.6); font: 700 9.5px/1.4 "Segoe UI", system-ui, sans-serif; }
.pj-mini { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: #0d0a07; }
.pj-char b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pj-char small, .pj-vago small { color: var(--pj-apagado); font-size: 9.5px; }
.pj-vago { justify-content: center; border: 1px dashed rgba(233,194,122,.25); color: var(--pj-apagado); }
.pj-vago span { font-size: 18px; line-height: 1; }
.pj-vago b { font-size: 11px; color: var(--pj-texto); }

/* pontos */
.pj-pontos-cab { display: flex; align-items: center; gap: 10px; flex: none; }
.pj-pontos-cab .pj-tit { flex: 1; margin-top: 0 !important; }
.pj-pontos-cab .pj-tit::after { display: none; }
.pj-passos { display: flex; gap: 6px; }
#statusWin .pj-passo { min-width: 38px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--pj-borda); background: rgba(0,0,0,.35); font: 700 11px/1 "Segoe UI", system-ui, sans-serif; }
#statusWin .pj-passo[aria-pressed="true"] { border-color: var(--pj-ouro); background: rgba(233,194,122,.15); box-shadow: inset 0 0 0 1px rgba(233,194,122,.4); }
.pj-sobra { padding: 5px 12px; border-radius: 14px; border: 1px solid rgba(95,216,230,.4); background: rgba(10,40,50,.35); font-size: 11px; color: #bdeef4; }
.pj-sobra b { color: var(--pj-ciano); }
.pj-stats { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pj-stat { display: grid; grid-template-columns: 1fr auto 30px 30px 46px; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border-radius: 8px;
  border: 1px solid rgba(233,194,122,.18); background: rgba(0,0,0,.25); }
.pj-stat > b { min-width: 52px; text-align: right; font: 600 14px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pj-stat em { font-style: normal; color: var(--pj-ciano); font-size: 12px; }
.pj-stat i { font-style: normal; color: var(--pj-ouro); }
#statusWin .pj-q { height: 30px; padding: 0; border-radius: 6px; border: 1px solid var(--pj-borda); background: rgba(0,0,0,.35); font-weight: 700; }
#statusWin .pj-q.pj-max { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
#statusWin .pj-q:not(:disabled):hover { border-color: var(--pj-ouro); }
#statusWin .pj-q:disabled { opacity: .35; }
.pj-comb { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; flex: none; }
.pj-col h4 { margin-bottom: 6px !important; font: 700 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pj-ouro); }
.pj-col div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(233,194,122,.1); font-size: 12px; }
.pj-col span { color: rgba(239,230,212,.8); }
.pj-col b { font-variant-numeric: tabular-nums; }
.pj-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; margin-top: auto; padding-top: 10px; }
#statusWin .pj-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 9px; border: 1px solid var(--pj-borda);
  background: rgba(0,0,0,.35); font: 700 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
#statusWin .pj-bt:not(:disabled):hover { border-color: var(--pj-ouro); }
#statusWin .pj-bt.pj-dourado:not(:disabled) { color: #3a2a12; border-color: transparent; background: linear-gradient(#f3d89c, #d2a65a 55%, #b88a42); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.55); }
#statusWin .pj-bt:disabled { opacity: .45; }
.pj-gema { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6fdff, #5fd8e6 45%, #1f6fb0); box-shadow: 0 0 8px rgba(95,216,230,.7); }

@media (max-width: 820px) {
  .pj-corpo { grid-template-columns: minmax(0, 1fr); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(233,194,122,.5) transparent; }
  .pj-esq { padding-right: 0; overflow: visible; }
  .pj-dir { padding-left: 0; border-left: 0; overflow: visible; }
  .pj-conta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}