/* CSbePRO maps: the list and one map. Tokens and rows come from players.css (.pp). */

/* ---------- list ---------- */
.pp .mtypes a.chip,.pp .mtypes a.chip:visited{color:var(--dim)}
.pp .mtypes a.chip:hover{color:#fff}
.pp .mtypes a.chip.live{color:var(--g)}
.pp .mhd,.pp a.mrow,.pp a.mrow:visited{grid-template-columns:44px minmax(0,1fr) 86px 76px 92px 72px 76px 70px 90px}
.pp .mhd .sort,.pp .mhd .sort:visited{text-align:right;color:var(--faint);letter-spacing:1.2px;transition:color var(--fast)}
.pp .mhd .sort:hover{color:#fff}
.pp .mhd .sort.is-on{color:var(--g)}
.pp .mhd .sort.is-on::after{content:" \25BC";font-size:8px}
.pp .mrow .who{gap:12px}
.pp .mrow .pic{flex:none;width:64px;height:40px;border-radius:3px;overflow:hidden;background:#1a1f20 linear-gradient(135deg,#1f2526,#0e1112);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pp .mrow .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--mid) var(--ease)}
.pp a.mrow:hover .pic img{transform:scale(1.08)}
.pp .mrow .mn{display:flex;flex-direction:column;min-width:0}
.pp .mrow .mn small{font:11px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .mrow .st{text-align:right;font:500 13px var(--mono);color:var(--dim);white-space:nowrap}
.pp .mrow .st small{display:block;font-size:10px;color:var(--faint)}
.pp .mrow.sort-hours .s-hours,.pp .mrow.sort-hours_30d .s-hours_30d,.pp .mrow.sort-cycles .s-cycles,.pp .mrow.sort-avg .s-avg,.pp .mrow.sort-players .s-players,.pp .mrow.sort-last .s-last{color:#fff;font-weight:700}
.pp .mrow .meter{height:5px}
.pp .mp .ltable .h2{margin-bottom:8px}

/* in rotation */
.pp .mcycle{margin-top:16px}
.pp .mrow .mn small .rot{font-style:normal;color:var(--g)}
.pp .cyc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pp .cyc .srv h3{margin:0 0 10px;font:600 16px var(--head);color:#fff;letter-spacing:.3px}
.pp .cyc .srv h3 small{margin-left:8px;font:11px var(--mono);color:var(--faint)}
.pp .cyc .list{display:flex;flex-wrap:wrap;gap:6px}
.pp .cyc .list a,.pp .cyc .list a:visited{padding:4px 9px;border:1px solid var(--line);border-radius:3px;background:var(--bg);font:12px var(--mono);color:var(--dim);
  transition:color var(--fast),border-color var(--fast),transform var(--fast)}
.pp .cyc .list a:hover{color:var(--g);border-color:var(--g-line);transform:translateY(-2px)}
.pp .cmds p b{color:var(--text)}

/* how to change the map */
.pp .mhow{margin-top:16px}
.pp .cmds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pp .cmds div{padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.pp .cmds .cmd{font-size:15px}
.pp .cmds p{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--dim)}
.pp .mhow .note{margin-top:12px}

/* ---------- one map ---------- */
.pp .mhero{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;min-height:200px;padding:30px 32px;overflow:hidden}
.pp .mbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pp .mbg img{width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.8);mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 55%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 55%)}
.pp .mwho{position:relative;z-index:1}
.pp .mwho h1{margin:4px 0 0;font:700 52px/1 var(--head);color:#fff;letter-spacing:.5px;text-shadow:0 2px 0 #000,0 0 30px rgba(0,0,0,.8)}
.pp .mwho .chips{margin-top:14px}
.pp .chip.bal-ok{border-color:var(--g-line)} .pp .chip.bal-t{border-color:rgba(232,181,58,.6)} .pp .chip.bal-ct{border-color:rgba(74,158,255,.6)}
.pp .mtotal{position:relative;z-index:1;text-align:center;padding:16px 22px;border:1px solid var(--g-line);border-radius:var(--r-sm);background:rgba(8,9,10,.8)}
.pp .mtotal b{display:block;font:700 40px/1 var(--head);color:#fff}
.pp .mtotal span{font:10px var(--label);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pp .mtiles{grid-template-columns:repeat(5,1fr)}
.pp .mbalance{margin-top:16px}
.pp .tct{display:flex;height:34px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);font:700 13px var(--mono);color:#0b0d0e}
.pp .tct .t{flex:0 0 var(--w);display:flex;align-items:center;padding:0 12px;background:linear-gradient(90deg,#c69a2e,var(--gold));white-space:nowrap}
.pp .tct .ct{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;background:linear-gradient(90deg,#1e6fc0,#4aa3ff);white-space:nowrap}
.pp .tct b{margin-right:6px}
.pp .mthd,.pp a.mtrow,.pp a.mtrow:visited{grid-template-columns:44px minmax(0,1fr) 70px 70px 60px 56px 80px 70px 56px 70px}
.pp .mthd .r{text-align:right}
.pp .mtrow .st{text-align:right;font:500 13px var(--mono);color:var(--dim);white-space:nowrap}
.pp .mtrow .st.k{color:#fff;font-weight:700}
.pp .mtrow .st b{color:var(--g)}
.pp .mtrow .st.dim{color:var(--faint);font-size:11px}
.pp .mtrow .who .lvl{margin-left:4px;padding:1px 6px;font-size:10px}

@media (max-width:1100px){
  .pp .mhd,.pp a.mrow,.pp a.mrow:visited{grid-template-columns:40px minmax(0,1fr) 80px 80px 70px}
  .pp .mhd .s-hours_30d,.pp .mhd .s-avg,.pp .mhd .s-last,.pp .mrow .s-hours_30d,.pp .mrow .s-avg,.pp .mrow .s-last,.pp .mrow .meter{display:none}
  .pp .mthd,.pp a.mtrow,.pp a.mtrow:visited{grid-template-columns:40px minmax(0,1fr) 64px 60px 56px 56px}
  .pp .mthd .r:nth-child(7),.pp .mthd .r:nth-child(8),.pp .mthd .r:nth-child(9),.pp .mthd .r:nth-child(10),.pp .mtrow .st:nth-child(7),.pp .mtrow .st:nth-child(8),.pp .mtrow .st:nth-child(9),.pp .mtrow .st:nth-child(10){display:none}
  .pp .mtiles{grid-template-columns:repeat(3,1fr)}
  .pp .cmds{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pp .mhd,.pp a.mrow,.pp a.mrow:visited{grid-template-columns:34px minmax(0,1fr) 76px}
  .pp .mhd .s-cycles,.pp .mhd .s-players,.pp .mrow .s-cycles,.pp .mrow .s-players{display:none}
  .pp .mrow .pic{width:48px;height:30px}
  .pp .mhero{grid-template-columns:1fr;padding:22px 18px}
  .pp .mwho h1{font-size:36px}
  .pp .mtotal{justify-self:start}
  .pp .mthd,.pp a.mtrow,.pp a.mtrow:visited{grid-template-columns:34px minmax(0,1fr) 60px 56px}
  .pp .mthd .r:nth-child(5),.pp .mthd .r:nth-child(6),.pp .mtrow .st:nth-child(5),.pp .mtrow .st:nth-child(6){display:none}
  .pp .mtiles{grid-template-columns:repeat(2,1fr)}
}