/* CSbePRO /stats page. Built on players.css (.pp tokens, blocks, tiles, rows). */

/* ---------- head ---------- */
.pp .st-head{grid-template-columns:1fr minmax(240px,320px);align-items:center}
.pp .st-head .chips{margin-top:14px}
.pp .st-best{position:relative;padding:16px 18px;border:1px solid var(--g-line);border-radius:var(--r-sm);
  background:radial-gradient(80% 90% at 0 0,rgba(162,198,0,.10),transparent 70%),var(--bg);animation:pp-breathe2 4.5s ease-in-out infinite}
.pp .st-best b{display:block;margin:4px 0 2px;font:600 30px/1.1 var(--head);color:#fff;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.pp .st-best[hidden]{display:none}

.pp .st-tiles{grid-template-columns:repeat(6,1fr)}
.pp .st-grid{margin-top:16px;grid-template-columns:1.15fr 1fr}

/* ---------- players per day: bars, returning at the bottom, new on top ---------- */
.pp .st-days{position:relative;display:flex;align-items:flex-end;gap:4px;height:210px;padding-bottom:22px;
  background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),#161a1b calc(25% - 1px) 25%) 0 0/100% calc(100% - 22px) no-repeat}
.pp .st-days .d{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;cursor:crosshair}
.pp .st-days .bar{position:relative;width:100%;height:0;border-radius:2px 2px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#86a300,#3f4f00);transition:height .9s var(--ease) var(--dl,0s),filter var(--fast)}
.pp .is-seen .st-days .bar{height:var(--h)}
.pp .st-days .bar .new{position:absolute;left:0;right:0;top:0;height:var(--hn);background:linear-gradient(180deg,#4aa3ff,#1e6fc0)}
.pp .st-days .d:hover .bar{filter:brightness(1.35) drop-shadow(0 0 8px rgba(162,198,0,.45))}
.pp .st-days .d.today .bar{background:repeating-linear-gradient(45deg,#86a300 0 4px,#5c7000 4px 8px)}
.pp .st-days em{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font:normal 10px var(--mono);color:var(--faint);white-space:nowrap}
.pp .st-days .tt{position:absolute;z-index:3;left:50%;bottom:calc(var(--h) + 10px);transform:translate(-50%,6px);pointer-events:none;opacity:0;
  padding:7px 10px;white-space:nowrap;background:rgba(8,9,10,.94);border:1px solid var(--g-line);border-radius:var(--r-sm);
  font:11px/1.6 var(--mono);color:var(--dim);transition:opacity var(--fast),transform var(--fast)}
.pp .st-days .tt span{display:block;color:var(--faint)}
.pp .st-days .tt b{font:600 18px var(--head);color:#fff}
.pp .st-days .d:hover .tt{opacity:1;transform:translate(-50%,0)}
.pp .st-days .d:first-child .tt,.pp .st-days .d:nth-child(2) .tt,.pp .st-days .d:nth-child(3) .tt{left:0;transform:translate(0,6px)}
.pp .st-days .d:first-child:hover .tt,.pp .st-days .d:nth-child(2):hover .tt,.pp .st-days .d:nth-child(3):hover .tt{transform:none}
.pp .st-days .d:nth-last-child(-n+3) .tt{left:auto;right:0;transform:translate(0,6px)}
.pp .st-days .d:nth-last-child(-n+3):hover .tt{transform:none}

.pp .st-legend{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px;font:11px var(--mono);color:var(--dim)}
.pp .st-legend .note{margin-left:auto}
.pp .k{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px}
.pp .k.back{background:#86a300}
.pp .k.new{background:#4aa3ff}
.pp .k.now{background:var(--g);box-shadow:0 0 8px var(--g)}

/* ---------- server rail: one card per server, the active one lit ---------- */
.pp .st-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0 0}
.pp .st-rail a.srv,.pp .st-rail a.srv:visited{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px 12px;overflow:hidden;
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);color:var(--dim);
  transition:transform var(--fast),border-color var(--fast),background var(--fast)}
.pp .st-rail a.srv::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease)}
.pp .st-rail a.srv:hover{transform:translateY(-3px);border-color:#3a4243;color:var(--text)}
.pp .st-rail a.srv:hover::before{transform:scaleX(1)}
.pp .st-rail .lbl{font:10px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pp .st-rail b{font:700 22px/1.1 var(--head);color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .st-rail .live{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:11px var(--mono);color:var(--faint)}
.pp .st-rail .live i{width:7px;height:7px;border-radius:50%;background:#3a4243}
.pp .st-rail .live.on{color:var(--g)}
.pp .st-rail .live.on i{background:var(--g);animation:pp-srv 2.4s ease infinite}
.pp .st-rail small{font:10px var(--mono);color:var(--faint)}
.pp .st-rail a.srv.is-on,.pp .st-rail a.srv.is-on:visited{border-color:var(--g);color:var(--text);
  background:linear-gradient(180deg,rgba(162,198,0,.16),rgba(162,198,0,.04) 60%,var(--deep));box-shadow:0 0 0 1px rgba(162,198,0,.25),0 10px 30px -12px rgba(162,198,0,.6)}
.pp .st-rail a.srv.is-on::before{transform:scaleX(1);height:3px;box-shadow:0 0 14px var(--g)}
.pp .st-rail a.srv.is-on .lbl{color:var(--g)}
.pp .st-rail a.srv.is-on::after{content:"";position:absolute;right:12px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.pp .st-rail a.srv.is-all b{color:var(--g)}
.pp .st-rail a.srv.is-all.is-on b{color:#fff}
@media (max-width:640px){
  .pp .st-rail{grid-template-columns:repeat(2,1fr);gap:8px}
  .pp .st-rail a.srv{padding:10px 12px}
  .pp .st-rail b{font-size:17px}
  .pp .st-rail small{display:none}
}

/* ---------- tabs ---------- */
.pp .st-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.pp .st-tabs button{padding:5px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);cursor:pointer;
  font:600 12px var(--head);letter-spacing:.8px;text-transform:uppercase;color:var(--dim);transition:color var(--fast),border-color var(--fast),background var(--fast)}
.pp .st-tabs button:hover{color:#fff;border-color:#3a4243}
.pp .st-tabs button.on{color:var(--g);border-color:var(--g-line);background:rgba(162,198,0,.07)}

/* ---------- when people play: 24 bars in the visitor's time ---------- */
.pp .st-hours{position:relative;display:flex;align-items:flex-end;gap:3px;height:176px;padding-bottom:20px;
  background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),#161a1b calc(25% - 1px) 25%) 0 0/100% calc(100% - 20px) no-repeat}
.pp .st-hours .h{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;cursor:crosshair}
.pp .st-hours .h i{display:block;width:100%;height:0;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#4b5658,#262c2d);
  transition:height .7s var(--ease) var(--dl,0s),background var(--fast),filter var(--fast)}
.pp .is-seen .st-hours .h i{height:var(--h)}
.pp .st-hours .h.top i{background:linear-gradient(180deg,#c9ced0,#5d6668)}
.pp .st-hours .h.now i{background:linear-gradient(180deg,var(--g-hi),#4d6000);box-shadow:0 0 14px rgba(162,198,0,.45)}
.pp .st-hours .h.now::before{content:"now";position:absolute;left:50%;bottom:calc(var(--h) + 4px);transform:translateX(-50%);
  font:700 9px var(--label);letter-spacing:1px;color:var(--g);text-transform:uppercase}
.pp .st-hours .h:hover i{filter:brightness(1.3)}
.pp .st-hours em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font:normal 10px var(--mono);color:var(--faint)}
.pp .st-hours .tip{opacity:0}
.pp .st-hours.hover .tip{opacity:1}

/* ---------- 30 days in fights ---------- */
.pp .st-fight{margin-top:16px}
.pp .st-fight ul{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.pp .st-fight li{position:relative;padding:4px 12px;text-align:center}
.pp .st-fight li + li{border-left:1px solid var(--line-soft)}
.pp .st-fight b{display:block;font:600 34px/1.1 var(--head);color:#fff;font-variant-numeric:tabular-nums;transition:color var(--fast),transform var(--fast)}
.pp .st-fight span{font:10px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pp .st-fight li:hover b{color:var(--g);transform:translateY(-2px)}

/* ---------- three lists ---------- */
.pp .st-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:start}
.pp .st-three .row{padding-top:8px;padding-bottom:8px}
.pp .pos{font:700 15px var(--head);color:var(--faint);text-align:center}
.pp .st-map{grid-template-columns:22px 1fr auto}
.pp .st-cty{grid-template-columns:22px 24px 1fr auto}
.pp .st-map .n,.pp .st-cty .n{min-width:0;font:500 15px var(--head);color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .st-three .n .meter{display:block;margin-top:5px;height:5px}
.pp .st-three .v{text-align:right;font:12px var(--mono);color:var(--dim);white-space:nowrap}
.pp .st-three .v b{display:block;font:700 14px var(--mono);color:#fff}
.pp .st-three .v small{font-size:10px;color:var(--faint)}
.pp .st-cty img{width:24px;height:17px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15);transition:transform var(--fast)}
.pp .st-cty:hover img{transform:scale(1.15) rotate(-4deg)}
.pp .noflag{width:24px;height:17px;border:1px dashed var(--line);border-radius:2px}
.pp .st-wpn{grid-template-columns:1fr auto;row-gap:6px}
.pp .st-wpn .n{display:flex;align-items:center;gap:12px;min-width:0}
.pp .st-wpn .n span{font:500 14px var(--head);color:var(--text);letter-spacing:.4px}
.pp .st-wpn .wi{width:92px;height:25px}
.pp .st-wpn .meter{grid-column:1/-1;height:5px}
.pp .st-foot{margin-top:12px;line-height:1.6}
.pp .st-foot a{color:var(--dim);border-bottom:1px dotted var(--faint)}

/* ---------- new players: three columns of ten ---------- */
.pp .st-new{margin-top:16px}
.pp .st-newgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px}
.pp a.nrow,.pp a.nrow:visited{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;margin:0 -10px;
  border-radius:var(--r-sm);color:var(--text);overflow:hidden;transition:background var(--fast),transform var(--fast)}
.pp a.nrow:hover{background:rgba(162,198,0,.05);transform:translateX(3px)}
.pp .nrow + .nrow{border-top:1px solid var(--line-soft)}
.pp .nrow img{width:24px;height:17px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.pp .nrow .nm{font:500 15px var(--head);color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp a.nrow:hover .nm{color:var(--g)}
.pp .nrow .w{display:flex;flex-direction:column;align-items:flex-end;font:11px var(--mono);color:var(--dim);white-space:nowrap}
.pp .nrow .w small{font-size:10px;color:var(--faint)}
.pp .nrow .w.fresh{color:var(--g)}
.pp .nrow::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:1px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--g),transparent);animation:pp-rowsweep 32s linear infinite;animation-delay:var(--d,0s)}
@media (max-width:1150px){.pp .st-newgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pp .st-newgrid{grid-template-columns:1fr}}

/* ---------- top players and about ---------- */
.pp .st-p,.pp a.st-p,.pp a.st-p:visited{grid-template-columns:40px minmax(0,1fr) 76px minmax(60px,150px) 70px}
.pp .st-list[hidden]{display:none}
.pp .st-f,.pp a.st-f,.pp a.st-f:visited{grid-template-columns:40px minmax(0,1fr) 84px 64px 60px}
.pp .st-f .xp small{display:block;font:10px var(--mono);color:var(--faint);font-weight:500}
.pp .st-f .xp b{color:var(--g)}
.pp .st-wide{grid-column:1/-1}
.pp .st-about p{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--dim)}
.pp .st-about a{color:var(--link)}

@media (max-width:1150px){
  .pp .st-tiles{grid-template-columns:repeat(3,1fr)}
  .pp .st-grid{grid-template-columns:1fr}
  .pp .st-three{grid-template-columns:1fr 1fr}
  .pp .st-fight ul{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .pp .st-fight li:nth-child(4){border-left:0}
}
@media (max-width:760px){
  .pp .st-head{grid-template-columns:1fr}
  .pp .st-three{grid-template-columns:1fr}
  .pp .st-days{gap:2px}
  .pp .st-days em{display:none}
  .pp .st-hours em{font-size:9px}
  .pp .st-p,.pp a.st-p,.pp a.st-p:visited{grid-template-columns:34px minmax(0,1fr) 64px}
  .pp .st-p .meter,.pp .st-p .lvl{display:none}
  .pp .st-f,.pp a.st-f,.pp a.st-f:visited{grid-template-columns:34px minmax(0,1fr) 64px 56px 52px}
}
@media (max-width:520px){
  .pp .st-tiles{grid-template-columns:repeat(2,1fr)}
  .pp .st-fight ul{grid-template-columns:repeat(2,1fr)}
  .pp .st-fight li{border-left:0!important}
}
.pp .st-tiles .tile em{color:var(--faint)}