/* Pixel theme, cyberpunk palette. Square corners, chunky borders, hard shadows, no glow. */
:root{
  --bg:#0a0612;--panel:#140a24;--panel2:#1d0f33;--line:#4b1a8a;
  --pink:#ff2bd6;--cyan:#00f0ff;--yellow:#fcee0a;--green:#39ff14;--red:#ff4d6d;--text:#e8dcff;
  --head:'Press Start 2P',monospace;--body:'VT323',monospace;
}
*{box-sizing:border-box;border-radius:0}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--body);font-size:22px;line-height:1.25;
  background-color:var(--bg);
  background-image:linear-gradient(#ffffff0a 2px,transparent 2px),linear-gradient(90deg,#ffffff0a 2px,transparent 2px);
  background-size:24px 24px}
.hidden{display:none!important}

/* header */
header{text-align:center;padding:28px 12px 0}
h1{font-family:var(--head);font-size:clamp(22px,6vw,44px);line-height:1.2;margin:0;color:var(--cyan);text-shadow:4px 4px 0 var(--pink)}
.tag{color:var(--pink);font-size:22px;margin:14px 0 18px}
.statusbar{display:inline-flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;border:4px solid var(--line);background:var(--panel);padding:8px 14px}
.dot{width:16px;height:16px;background:#888}
.dot.up{background:var(--green);animation:blink 1s steps(2) infinite}
.dot.down{background:var(--red)}
@keyframes blink{50%{opacity:.35}}
.pill{display:inline-block;background:var(--pink);color:#000;padding:0 8px;font-size:20px}
nav{display:flex;gap:10px;justify-content:center;margin:22px 0 0;flex-wrap:wrap}

/* buttons: square, with a pixel "ledge" that presses down */
.tab,.btn,button{font-family:var(--head);font-size:11px;line-height:1.4;color:var(--cyan);background:var(--panel);
  border:4px solid var(--cyan);padding:12px 16px;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 4px 0 #006a73}
.tab:hover,.btn:hover,button:hover{background:var(--cyan);color:#000}
.tab:active,.btn:active,button:active{transform:translateY(4px);box-shadow:none}
.tab.active{background:var(--pink);border-color:var(--pink);color:#000;box-shadow:0 4px 0 #8a1275}
.btn.small,button.small{font-size:9px;padding:8px 10px}
button:disabled{opacity:.4;cursor:not-allowed;transform:none}

main{max-width:1100px;margin:0 auto;padding:24px 16px}

/* cards */
.card{background:var(--panel);border:4px solid var(--line);padding:18px;box-shadow:6px 6px 0 #2b0f4d}
.card.big{text-align:center;margin-bottom:20px;border-color:var(--pink);box-shadow:6px 6px 0 #6b1160}
h2,h3{font-family:var(--head);font-weight:400;color:var(--yellow);margin:0 0 14px;line-height:1.5}
h2{font-size:14px}
h3{font-size:11px;color:var(--cyan)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
ul{padding-left:22px;margin:0}li{margin:6px 0}
kbd{background:#000;border:2px solid var(--cyan);color:var(--cyan);padding:0 6px;font-family:var(--body);font-size:20px}
.copybox{display:flex;gap:10px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin:14px 0}
code{background:#000;color:var(--green);padding:10px 16px;border:4px solid var(--green);font-family:var(--body);font-size:clamp(20px,3.5vw,28px);word-break:break-all}
.small{font-size:19px;opacity:.8}

/* leaderboard */
.boardgrid{display:grid;grid-template-columns:240px 1fr 260px;gap:20px;align-items:start}
@media(max-width:950px){.boardgrid{grid-template-columns:1fr}}
input[type=search],input[type=text],input[type=password],input[type=number],select{
  width:100%;background:#000;border:4px solid var(--cyan);color:var(--cyan);padding:8px 10px;font-family:var(--body);font-size:22px;outline:none;min-width:0}
input:focus,select:focus{border-color:var(--yellow)}
.maplist{list-style:none;padding:0;margin-top:12px;max-height:480px;overflow:auto}
.maplist li{margin:6px 0;padding:6px 10px;background:var(--panel2);cursor:pointer;border-left:4px solid var(--pink);display:flex;justify-content:space-between;gap:8px}
.maplist li:hover{background:var(--pink);color:#000}
.maplist small{opacity:.8}
table{width:100%;border-collapse:collapse}
th{font-family:var(--head);font-weight:400;font-size:9px;color:var(--pink);text-align:left;padding:8px 6px;border-bottom:4px solid var(--pink)}
td{padding:8px 6px;border-bottom:2px solid var(--line)}
tbody tr:hover{background:var(--panel2)}
tbody tr:nth-child(1) td:first-child{color:var(--yellow)}
tbody tr:nth-child(2) td:first-child{color:#c9c9ff}
tbody tr:nth-child(3) td:first-child{color:#ff9a3c}
.time{color:var(--green)}
.history{list-style:none;padding:0}
.history li{padding:8px 10px;margin:8px 0;background:var(--panel2);border-left:4px solid var(--yellow);font-size:21px}
.history .t{color:var(--green)}
.history .m{color:var(--cyan)}
.history .when{font-size:18px;opacity:.6}
.empty{opacity:.7;text-align:center;padding:16px}
footer{text-align:center;padding:30px;font-size:19px;opacity:.6}
a{color:var(--cyan)}