:root{--navy:#0a1040;--panel:rgba(8,14,64,.86);--edge:#d62828;--gold:#ffe94a;--ink:#f4f6ff;--dim:#aab4f0;--row:rgba(255,255,255,.06)}
*{box-sizing:border-box}
html{background:#1a1fa8}
body{margin:0;color:var(--ink);font:16px/1.45 Verdana,Tahoma,Arial,sans-serif;background:#1a1fa8 url(/static/img/background.jpg) center top/cover fixed no-repeat;min-height:100vh}
a{color:#9fd0ff}a:hover{color:var(--gold)}a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
header{max-width:1000px;margin:0 auto;padding:14px 16px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
header img.logo{height:84px;width:auto;display:block}
.sitename{font-size:1.9rem;font-weight:bold;color:var(--gold);text-shadow:2px 2px 0 #7a0c0c}
nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
nav a{display:block;padding:7px 14px;color:var(--ink);background:var(--panel);border:2px solid var(--edge);text-decoration:none;font-weight:bold;border-radius:3px}
nav a:hover,nav a[aria-current]{background:var(--edge);color:#fff}
main{max-width:1000px;margin:14px auto;padding:0 16px}
.panel{background:var(--panel);border:2px solid var(--edge);border-radius:4px;padding:16px 20px;margin:0 0 16px}
h1,h2,h3{color:var(--gold);text-shadow:2px 2px 0 #7a0c0c;margin:.2em 0 .5em;line-height:1.15}
h1{font-size:1.8rem}h2{font-size:1.35rem}
p{margin:.5em 0}.dim{color:var(--dim)}.small{font-size:.85rem}
table{width:100%;border-collapse:collapse}
th{text-align:left;color:var(--gold);border-bottom:2px solid var(--edge);padding:5px 8px;white-space:nowrap}
td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:middle}
tbody tr:nth-child(odd){background:var(--row)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.rank{width:4.5em;color:var(--gold);font-weight:bold}
.medal{width:20px;height:20px;vertical-align:middle;margin-right:4px}
.scroll{overflow-x:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.card{display:block;background:rgba(0,0,0,.28);border:2px solid #31398f;border-radius:4px;text-decoration:none;color:var(--ink);overflow:hidden;height:100%}
.card:hover{border-color:var(--gold)}
.card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#101a70}
.card .noimg{aspect-ratio:4/3;background:linear-gradient(135deg,#1b2399,#0a1040)}
.card .body{padding:8px 10px}.card b{color:var(--gold)}
.hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero img{max-width:100%;height:auto}
.sprite{display:inline-block;width:204px;height:53px;background-repeat:no-repeat;background-position:0 0;margin:4px 8px 4px 0;vertical-align:middle}
.sprite:hover,.sprite:focus-visible{background-position:0 -53px}
.sprite.solo{background-image:url(/static/img/btn-solo.png)}
.sprite.ranks{background-image:url(/static/img/btn-ranks.png)}
.pic{width:220px;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pager{display:flex;gap:10px;align-items:center;margin:10px 0 0}
.pager a,.pager span{padding:4px 12px;border:2px solid var(--edge);border-radius:3px;text-decoration:none;background:rgba(0,0,0,.25)}
.pager span{opacity:.5}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.stat{display:inline-block;margin:0 22px 6px 0}.stat b{display:block;font-size:1.5rem;color:var(--gold)}
form.search{display:flex;gap:6px}
form.search input[type=text]{width:12em;padding:6px 8px;border:2px solid var(--edge);border-radius:3px;background:#fff;color:#000;font:inherit}
form.search button{padding:6px 12px;border:2px solid var(--edge);border-radius:3px;background:var(--edge);color:#fff;font:inherit;font-weight:bold;cursor:pointer}
code{background:rgba(0,0,0,.4);padding:1px 5px;border-radius:3px}
pre{background:rgba(0,0,0,.45);padding:10px 12px;border-radius:3px;overflow-x:auto}
footer{max-width:1000px;margin:0 auto 30px;padding:0 16px;color:var(--dim);font-size:.82rem}
.narrow{max-width:520px;margin-left:auto;margin-right:auto}
.aform label{display:block;font-weight:bold;margin:.5em 0 .15em}
.aform input[type=text],.aform input[type=password],.aform input[type=email],.aform textarea{width:100%;max-width:100%;padding:7px 9px;border:2px solid var(--edge);border-radius:3px;background:#fff;color:#000;font:inherit}
.aform button{padding:7px 16px;border:2px solid var(--edge);border-radius:3px;background:var(--edge);color:#fff;font:inherit;font-weight:bold;cursor:pointer;margin-top:6px}
.aform button:hover{background:#f03a3a}
.aform.inline{display:inline-block;margin:0 6px 4px 0}.aform.inline button{margin:0;padding:3px 10px;font-size:.9rem}
.aform.inline input[type=text]{width:12em;padding:4px 8px}
.aform.danger button{background:#7a0c0c}
.aform .small{display:block}
.subnav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.subnav a{padding:5px 12px;color:var(--ink);border:2px solid var(--edge);border-radius:3px;text-decoration:none;background:rgba(0,0,0,.25)}
.subnav a[aria-current]{background:var(--edge);color:#fff}.subnav .grow{flex:1}
.notice{margin:.6em 0;padding:8px 12px;border:2px solid #3aa655;border-radius:3px;background:rgba(58,166,85,.2)}
.notice.bad{border-color:var(--edge);background:rgba(214,40,40,.25)}
td.acts{white-space:nowrap}
@media (max-width:640px){header img.logo{height:60px}nav{margin-left:0}body{background-attachment:scroll}.panel{padding:12px}}
