/* ZeusPvP Analytics — blocky sheet-of-paper UI. Hard shadows, square edges, ink on paper. */
:root{
  --paper:#f4f1e9;
  --paper2:#fbf9f3;
  --card:#ffffff;
  --ink:#17150f;
  --ink-soft:#5c574c;
  --line:#17150f;
  --shadow:#17150f;
  --prem:#0f8a5f;      /* premium green */
  --crack:#d9541e;     /* cracked orange */
  --unk:#9a948a;       /* unknown grey */
  --ccu:#2b4bd6;       /* ccu blue */
  --mr:#8a7bd6;        /* mineranks purple */
  --good:#0f8a5f;
  --bad:#c0392b;
  --sh:6px 6px 0 var(--shadow);
  --sh-sm:4px 4px 0 var(--shadow);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:
    linear-gradient(rgba(23,21,15,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,21,15,.035) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:"Helvetica Neue",Arial,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:stretch; justify-content:space-between; gap:18px;
  padding:18px 22px 0; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px;}
.logo{
  display:grid; place-items:center; width:54px; height:54px;
  background:var(--ink); color:var(--paper2);
  font-weight:900; font-size:30px; box-shadow:var(--sh-sm);
  border:2px solid var(--line);
}
.brand h1{margin:0; font-size:26px; letter-spacing:2px; font-weight:900;}
.brand h1 span{color:var(--crack);}
.brand .sub{margin:0; font-size:11px; letter-spacing:4px; color:var(--ink-soft); font-weight:700;}

/* live box */
.livebox{
  background:var(--card); border:2px solid var(--line); box-shadow:var(--sh);
  padding:12px 16px 8px; min-width:300px; flex:1; max-width:440px;
  display:flex; flex-direction:column;
}
.live-head{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; font-weight:800;}
.dot{width:11px; height:11px; background:var(--bad); border:2px solid var(--line); display:inline-block;}
.dot.on{background:var(--good);}
.live-label{color:var(--ink);}
.ver{margin-left:auto; color:var(--ink-soft); font-weight:700; letter-spacing:0;}
.live-count{font-size:40px; font-weight:900; line-height:1; margin:6px 0 2px;}
.lmax{font-size:18px; color:var(--ink-soft); font-weight:700;}
#livespark{margin:2px 0 0;}
.live-meta{font-size:11px; color:var(--ink-soft); font-weight:700; letter-spacing:1px; padding:2px 0 4px;}

/* ---------- grid ---------- */
.grid{
  display:grid; gap:18px; padding:18px 22px 8px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(120px,auto);
}
.card{
  background:var(--card); border:2px solid var(--line); box-shadow:var(--sh);
  padding:16px; position:relative;
}
.span2{grid-column:span 2;}
.span4{grid-column:1 / -1;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.card-head h2{margin:0; font-size:14px; letter-spacing:1.5px; font-weight:900;}
.mini{font-size:12px; letter-spacing:1px; font-weight:900; margin:16px 0 8px;}
h3.mini{margin-top:18px;}

/* KPI cards */
.kpi-row{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.kpi-row-2{grid-template-columns:repeat(12,1fr); margin-top:18px;}
#kpi-tps{grid-column:span 12; min-height:150px;
  border:1px solid rgba(255,210,90,.55); box-shadow:0 0 22px rgba(255,190,60,.15);}
#kpi-tps .kpi-num{color:var(--gold,#ffd25a); font-size:52px;}
#kpi-tps .kpi-label{color:var(--gold,#ffd25a);}
#kpi-prem24 .kpi-num{color:var(--prem);}
#kpi-crack24 .kpi-num{color:var(--crack);}
#kpi-prem24,#kpi-crack24,#kpi-ujoins24{grid-column:span 4;}
#kpi-ujoins24 .kpi-num{color:var(--gold,#ffd25a);}
.kpi{display:flex; flex-direction:column; justify-content:space-between; min-height:130px;}
.kpi-label{font-size:11px; letter-spacing:2px; font-weight:800; color:var(--ink-soft);}
.kpi-num{font-size:44px; font-weight:900; line-height:1; margin:8px 0;}
.kpi-foot{font-size:11px; color:var(--ink-soft); font-weight:700; letter-spacing:.5px;}
#kpi-cracked .kpi-num{color:var(--crack);}
#kpi-premium .kpi-num{color:var(--prem);}

/* legends + swatches */
.legend{display:flex; gap:12px; font-size:11px; font-weight:700; color:var(--ink-soft);}
.legend span{display:flex; align-items:center; gap:5px;}
.sw{width:12px; height:12px; display:inline-block; border:1.5px solid var(--line);}
.sw.prem{background:var(--prem);} .sw.crack{background:var(--crack);}
.sw.unk{background:var(--unk);} .sw.ccu{background:var(--ccu);} .sw.mr{background:var(--mr);}

/* charts */
.chart-wrap{width:100%;}
.chart{width:100%; height:230px; display:block;}
.live-chart{height:260px;}
.xaxis{display:flex; justify-content:space-between; font-size:9px; color:var(--ink-soft); font-weight:700; margin-top:6px; letter-spacing:.5px;}

/* window toggle + live legend */
.win-toggle{display:flex; gap:6px;}
.win-toggle button{
  background:var(--card); border:2px solid var(--line); box-shadow:2px 2px 0 var(--shadow);
  font-size:11px; font-weight:900; letter-spacing:1px; padding:5px 12px; cursor:pointer; color:var(--ink);
}
.win-toggle button.on{background:var(--ink); color:var(--paper2);}
.win-toggle button:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--shadow);}
.live-legend{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11px; font-weight:700; color:var(--ink-soft); gap:10px; flex-wrap:wrap;}
.live-legend span{display:flex; align-items:center; gap:6px;}
.sw.live{background:var(--good);}

/* split bar */
.splitbar{display:flex; height:34px; border:2px solid var(--line); overflow:hidden; margin-bottom:10px;}
.splitbar .seg{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:12px; overflow:hidden; white-space:nowrap;}
.splitnums{display:flex; gap:14px; font-size:12px; font-weight:700; color:var(--ink-soft); flex-wrap:wrap;}
.splitnums b{color:var(--ink);}

/* rank list */
.ranklist{margin:0; padding:0; list-style:none; counter-reset:r;}
.ranklist li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1.5px dashed rgba(23,21,15,.18); font-size:13px;}
.ranklist li:last-child{border-bottom:0;}
.ranklist .rn{counter-increment:r; width:20px; height:20px; background:var(--ink); color:var(--paper2); display:grid; place-items:center; font-size:11px; font-weight:900;}
.ranklist .rn::before{content:counter(r);}
.ranklist .nm{font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ranklist .hr{font-weight:900; color:var(--prem);}

/* horizontal bars (realm / country) */
.hbar{margin-bottom:9px;}
.hbar .lab{display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:3px;}
.hbar .lab .v{color:var(--ink-soft);}
.hbar .track{height:16px; background:rgba(23,21,15,.08); border:1.5px solid var(--line); position:relative;}
.hbar .fill{height:100%; background:var(--ink); }
.hbar.re .fill{background:var(--crack);}
.hbar.co .fill{background:var(--ccu);}

/* events */
.eventlist{margin:0; padding:0; list-style:none;}
.eventlist li{padding:8px 0; border-bottom:1.5px dashed rgba(23,21,15,.18); font-size:12.5px; display:flex; gap:10px;}
.eventlist li:last-child{border-bottom:0;}
.eventlist .ed{font-weight:900; color:var(--ink-soft); white-space:nowrap;}
.eventlist .ek{background:var(--ink); color:var(--paper2); font-size:10px; font-weight:900; padding:1px 6px; letter-spacing:1px; height:fit-content;}

/* footer */
.foot{display:flex; justify-content:space-between; gap:12px; padding:14px 22px 26px; font-size:11px; letter-spacing:1px; font-weight:700; color:var(--ink-soft); flex-wrap:wrap;}

/* ---------- clickable cards + modal ---------- */
.card.drill{cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;}
.card.drill:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--shadow);}
.card.drill:active{transform:translate(0,0); box-shadow:3px 3px 0 var(--shadow);}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(23,21,15,.55);
  display:none; align-items:center; justify-content:center; z-index:50; padding:24px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--paper2); border:2px solid var(--line); box-shadow:10px 10px 0 var(--shadow);
  width:100%; max-width:880px; max-height:88vh; display:flex; flex-direction:column;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:2px solid var(--line); background:var(--card);}
.modal-head h2{margin:0; font-size:16px; letter-spacing:1.5px; font-weight:900;}
.modal-x{
  width:34px; height:34px; background:var(--ink); color:var(--paper2); border:2px solid var(--line);
  font-size:16px; font-weight:900; cursor:pointer; box-shadow:3px 3px 0 var(--shadow);
  display:grid; place-items:center;
}
.modal-x:hover{background:var(--crack);}
.modal-body{padding:18px; overflow:auto;}
.modal-chart-wrap{width:100%;}
.modal-chart{width:100%; height:300px; display:block;}
.modal-table{margin-top:16px;}
.dtable{width:100%; border-collapse:collapse; font-size:12.5px; background:var(--card); border:2px solid var(--line); box-shadow:4px 4px 0 var(--shadow);}
.dtable thead th{
  background:var(--ink); color:var(--paper2); text-align:right; padding:8px 10px;
  font-size:11px; letter-spacing:1px; font-weight:900; border-bottom:2px solid var(--line);
}
.dtable thead th:first-child{text-align:left;}
.dtable tbody td{padding:6px 10px; text-align:right; border-bottom:1px solid rgba(23,21,15,.12); font-variant-numeric:tabular-nums;}
.dtable tbody td:first-child{text-align:left; font-weight:700;}
.dtable tbody tr:hover{background:rgba(23,21,15,.05);}
.dtable tbody tr:last-child td{border-bottom:0;}
.dtable .pos{color:var(--prem); font-weight:900;}
.dtable .neg{color:var(--crack); font-weight:900;}

/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .kpi-row-2{grid-template-columns:repeat(2,1fr);}
  #kpi-tps{grid-column:1 / -1;}
  #kpi-prem24,#kpi-crack24,#kpi-ujoins24{grid-column:1 / -1;}
  .span2{grid-column:span 2;}
  .span4{grid-column:1 / -1;}
}
@media (max-width:620px){
  body{background-size:16px 16px;}
  .grid{grid-template-columns:1fr; gap:14px; padding:14px 14px 8px;}
  .kpi-row{grid-template-columns:1fr;}
  .kpi-row-2{grid-template-columns:1fr;}
  #kpi-tps,#kpi-prem24,#kpi-crack24,#kpi-ujoins24{grid-column:1 / -1;}
  .span2,.span4{grid-column:span 1;}
  .kpi-num{font-size:34px;}
  .livebox{max-width:none;}
  .topbar{padding:14px 14px 0;}
  .brand h1{font-size:22px;}
  .card{padding:13px; box-shadow:var(--sh-sm);}
  .card-head{margin-bottom:10px;}
  .card-head h2{font-size:12px;}
  .chart,.live-chart{height:190px;}
  .win-toggle{width:100%;}
  .win-toggle button{flex:1; padding:8px 4px;}
  .kpi{min-height:110px;}
  .modal{max-height:92vh;}
  .modal-body{padding:12px;}
  .modal-chart{height:220px;}
  .dtable{font-size:11px;}
  .dtable thead th,.dtable tbody td{padding:6px 7px;}
  .foot{padding:12px 14px 20px;}
}

/* Public board polish: readable desktop grid, no glowing low-contrast metrics. */
.topbar,.grid,.foot{max-width:1600px;margin-left:auto;margin-right:auto;}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{min-width:0;box-shadow:4px 4px 0 var(--shadow);}
.kpi-row{grid-column:1 / -1;min-width:0;}
.kpi-row-2{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;}
#kpi-tps,#kpi-prem24,#kpi-crack24,#kpi-ujoins24{grid-column:auto;min-height:138px;}
#kpi-tps{border:2px solid var(--line);box-shadow:4px 4px 0 var(--shadow);border-top:5px solid var(--prem);}
#kpi-tps .kpi-num{color:var(--prem);font-size:44px;}
#kpi-tps .kpi-label{color:var(--ink-soft);}
#kpi-ujoins24 .kpi-num{color:var(--ccu);}
.board-intro{align-self:center;flex:1;min-width:180px;}
.board-intro p{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.4px;}
.board-intro small{display:block;color:var(--ink-soft);font-size:11px;margin-top:9px;}
#connection-status{display:inline-flex;align-items:center;background:#e3f2e8;color:#08633f;border:1px solid #b3d7bf;padding:6px 9px;font-size:10px;font-weight:900;letter-spacing:1px;}
#connection-status.offline{background:#fae8dc;color:#8a3816;border-color:#e6bfa7;}
.kpi-foot{line-height:1.65;letter-spacing:0;}
.kpi-label{letter-spacing:1.1px;}
.kpi-num{font-size:clamp(26px,3vw,44px);}
#c-events{grid-column:span 3;}
.eventlist li{display:grid;grid-template-columns:90px 110px minmax(0,1fr);gap:12px;line-height:1.6;padding:14px 0;align-items:start;}
.eventlist .ek{text-transform:uppercase;font-size:9px;padding:3px 5px;letter-spacing:.5px;white-space:normal;}
.event-copy{font-weight:800;overflow-wrap:anywhere;}
.event-copy small{display:block;color:var(--ink-soft);font-weight:400;font-size:12px;line-height:1.7;margin-top:5px;}
.eventlist .incident .ek{background:#b63721;}
.eventlist .incident{border-left:3px solid #b63721;padding-left:12px;}
.card:focus-visible,button:focus-visible{outline:3px solid var(--ccu);outline-offset:4px;}
.modal-table{overflow-x:auto;}
.dtable td{overflow-wrap:anywhere;}
@media(max-width:1100px){.board-intro{display:none;}.grid{grid-template-columns:repeat(2,minmax(0,1fr));}#c-events{grid-column:span 2;}.kpi-row{grid-template-columns:repeat(3,minmax(0,1fr));}.kpi-row-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.grid{grid-template-columns:minmax(0,1fr);}#c-events{grid-column:auto;}.kpi-row,.kpi-row-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.kpi-row .kpi:last-child{grid-column:1 / -1;}.livebox{min-width:0;width:100%;max-width:none;}.topbar{gap:18px;}.brand .sub{letter-spacing:2px;font-size:10px;}.eventlist li{grid-template-columns:1fr 1fr;gap:7px;}.event-copy{grid-column:1 / -1;}.kpi-num,#kpi-tps .kpi-num{font-size:32px;}.card-head h2{line-height:1.6;font-size:11px;}.live-head{letter-spacing:1px;}.live-legend{font-size:10px;gap:10px;}.kpi{min-height:125px;}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;}}