/* CSbePRO: Zombie Plague top and ZP profile. Sits on top of players.css. Fonts: Oswald and Verdana only. */

.pp{--red-line:rgba(216,67,47,.55)}
.pp.zp{--mono:Verdana,Geneva,sans-serif}

/* resets: a small red badge next to the nick */
.pp .rb{flex:none;padding:1px 7px;border:1px solid var(--red-line);border-radius:3px;background:rgba(216,67,47,.08);
  font:700 12px var(--head);letter-spacing:.5px;color:#ff7a66}
.pp .chip.red{border-color:var(--red-line);color:#ff9a8a;background:rgba(216,67,47,.06)}
.pp .chip.red b{color:#ff7a66}
.pp a.chip,.pp a.chip:visited{color:var(--dim)}
.pp a.chip:hover{color:var(--g)}

/* hero: the way to level 50 under the XP bar */
.pp .way{margin-top:16px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--bg)}
.pp .way .wl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.pp .way .wl b{font:600 18px var(--head);color:#fff;letter-spacing:.3px}

.pp.zp .tiles{grid-template-columns:repeat(5,1fr)}

/* how to get XP */
.pp .rule{grid-template-columns:1fr auto}
.pp .rule .n{color:var(--text);font-size:13px}
.pp .rule .v{font:600 16px var(--head);color:var(--g);letter-spacing:.3px}
.pp.zp .tx{margin:0;color:var(--dim);font-size:13px}
.pp.zp .tx b{color:#fff}
.pp .cmds{grid-template-columns:96px 1fr;font-size:13px;color:var(--dim)}
.pp .cmds .cmd{justify-self:start}

@media (max-width:1000px){.pp.zp .tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .pp.zp .tiles{grid-template-columns:repeat(2,1fr)}
  .pp .cmds{grid-template-columns:1fr;gap:4px}
}

/* ---------- the Zombie Plague strip on a classic profile ---------- */
.pp a.zpb,.pp a.zpb:visited{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:16px;padding:16px 24px;color:var(--dim);
  transition:border-color var(--mid),transform var(--fast)}
.pp a.zpb:hover{border-color:var(--g-line);transform:translateY(-2px);color:var(--dim)}
.pp .zpb .zt{display:flex;flex-direction:column}
.pp .zpb .zt b{font:700 22px/1.1 var(--head);color:#fff;letter-spacing:.4px}
.pp .zpb .zs{display:flex;gap:22px;flex-wrap:wrap;font-size:12px}
.pp .zpb .zs b{display:block;font:600 20px/1.1 var(--head);color:var(--g);letter-spacing:.3px}
.pp .zpb .rb{align-self:center}
.pp .zpb .go{margin-left:auto;font:500 14px var(--head);letter-spacing:.5px;color:var(--g);white-space:nowrap}
.pp a.zpb:hover .go{color:var(--g-hi)}
@media (max-width:640px){.pp .zpb .go{margin-left:0}}