:root{
  --sky1:#bfe6ff;--sky2:#ffe0ef;--panel:#fff;--line:#e4d9ff;--text:#3b2d5c;--muted:#7c6e9e;
  --blue:#2fa8f5;--red:#ff5f8a;--gold:#ffb21e;--coin:#e89a00;--plum:#3b2d5c;--ok:#2f9e5a;--warn:#c98400;--bad:#d83b5c;
  --display:'Fredoka',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);font-weight:600;color:var(--text);background:linear-gradient(160deg,var(--sky1),var(--sky2)) fixed;min-height:100vh;display:flex;flex-direction:column}
a{color:#2f7fc4}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(32px,6vw,56px);color:#fff;text-shadow:3px 0 0 var(--plum),-3px 0 0 var(--plum),0 3px 0 var(--plum),0 -3px 0 var(--plum),2px 2px 0 var(--plum),-2px 2px 0 var(--plum),2px -2px 0 var(--plum),-2px -2px 0 var(--plum),0 6px 0 var(--plum)}
h2{font-size:26px}
.envbar{background:var(--gold);color:var(--plum);text-align:center;font-weight:800;font-size:13px;padding:4px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;background:rgba(255,255,255,.85);border-bottom:2px solid #fff;box-shadow:0 3px 0 #d7c9f7}
.brand{font-family:var(--display);font-weight:700;font-size:22px;color:var(--plum);text-decoration:none;display:flex;align-items:center;gap:8px}
.gem{width:18px;height:18px;background:linear-gradient(135deg,#9ee3ff,var(--blue));transform:rotate(45deg);border-radius:4px;border:2px solid #fff;box-shadow:0 2px 0 var(--plum)}
.top nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--plum);font-weight:800}
.top nav a:hover{color:#2f7fc4}
.inline{display:inline}
.linkbtn{background:none;border:0;font:inherit;font-weight:800;color:var(--plum);cursor:pointer;padding:0}
.wrap{width:min(1100px,100% - 32px);margin:24px auto;flex:1}
.card{background:var(--panel);border:2px solid #fff;border-radius:22px;box-shadow:0 5px 0 #d7c9f7;padding:20px 22px;margin-bottom:18px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:20px;background:var(--gold);color:var(--plum);border:3px solid #fff;border-radius:16px;padding:10px 22px;box-shadow:0 4px 0 #c98400;text-decoration:none;cursor:pointer}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #c98400}
.btn.sm{font-size:15px;padding:5px 14px;border-radius:12px;box-shadow:0 3px 0 #c98400}
.btn.ghost{background:#fff;box-shadow:0 3px 0 #d7c9f7}
.btn.danger{background:#ffd3de;box-shadow:0 3px 0 #e89aae}
label{display:block;font-weight:800;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{width:100%;font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.hint{color:var(--muted);font-size:13px}
.flash{border-radius:14px;padding:10px 14px;margin-bottom:16px;font-weight:800;background:#e6f7ec;color:var(--ok);border:2px solid #fff}
.flash.warn{background:#fff4dc;color:var(--warn)}.flash.bad{background:#ffe3ea;color:var(--bad)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);margin:14px 0}.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.stat{background:#f6f2ff;border-radius:16px;padding:12px 14px}
.stat b{display:block;font-family:var(--display);font-size:28px}
.stat span{color:var(--muted);font-size:13px;font-weight:800}
table.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px;border-bottom:2px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid #f0eafe;font-variant-numeric:tabular-nums}
.tbl tr.me td{background:#fff7e0}
.tbl .num{text-align:right}
.pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800}
.pill.win{background:#dff6e7;color:var(--ok)}.pill.loss{background:#ffe3ea;color:var(--bad)}.pill.flag{background:#fff4dc;color:var(--warn)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs a{text-decoration:none;font-weight:800;padding:6px 12px;border-radius:12px;background:#fff;color:var(--plum);border:2px solid var(--line)}
.tabs a[aria-current=page]{background:var(--plum);color:#fff;border-color:var(--plum)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero p{font-size:18px;line-height:1.5}
.blob{aspect-ratio:1;border-radius:32px;background:radial-gradient(circle at 50% 60%,#fff,#e9dcff 70%);border:3px solid #fff;box-shadow:0 6px 0 #d7c9f7;display:grid;place-items:center;font-family:var(--display);font-size:80px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 20px;color:var(--muted);font-size:13px}
.board td.blue{color:#2f7fc4}.board td.pink{color:#d83b5c}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.playframe{width:100%;height:min(80vh,820px);border:3px solid #fff;border-radius:22px;box-shadow:0 5px 0 #d7c9f7;background:#bfe6ff;display:block}
@media (max-width:720px){.hero{grid-template-columns:1fr}.blob{display:none}.tbl .hide-sm{display:none}}
/* ranks, badges, profile */
.badge{display:block;flex:none;overflow:visible}
.rankchip{display:inline-flex;align-items:center;gap:6px;font-weight:800;white-space:nowrap}
.g3{grid-template-columns:repeat(3,1fr)}
.phead{display:grid;grid-template-columns:auto 1fr minmax(280px,1.1fr);gap:22px;align-items:center;background:linear-gradient(135deg,#fff 55%,color-mix(in srgb,var(--rc) 30%,#fff))}
.pbadge{filter:drop-shadow(0 6px 0 rgba(59,45,92,.15));animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.pbadge{animation:none}}
.pinfo h1{margin-bottom:.15em}
.tier{font-family:var(--display);font-weight:700;font-size:28px;color:var(--rd)}
.lpbar{height:12px;border-radius:99px;background:#efe8ff;margin:8px 0 4px;max-width:340px;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.lpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--rc),var(--rd));border-radius:99px}
.form{display:flex;align-items:center;gap:4px;margin-top:10px;flex-wrap:wrap}
.form .hint{margin-right:4px}
.form i{font-style:normal;font-size:11px;font-weight:800;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;color:#fff}
.form i.w{background:var(--ok)}.form i.l{background:var(--bad)}
.pstats .stat b{font-size:22px}
.ava{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.75) 0 9%,transparent 10%),radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 70%);border:3px solid #fff;box-shadow:0 2px 0 rgba(59,45,92,.25);font-family:var(--display);font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(59,45,92,.45)}
.hcell{display:flex;align-items:center;gap:8px}
.hcell>span{display:flex;flex-direction:column}
.mains{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.main{position:relative;text-align:center;padding:18px 14px 14px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#fff),#fff 70%);border:2px solid color-mix(in srgb,var(--c) 45%,#fff)}
.main h3{font-size:22px;margin:8px 0 2px}
.main .big{font-family:var(--display);font-size:30px;font-weight:700;margin:6px 0 4px}.main .big small{font-size:14px;color:var(--muted)}
.main .wr{height:10px;border-radius:99px;background:#ffe3ea;overflow:hidden;margin:4px 0 8px}.main .wr i{display:block;height:100%;background:var(--ok)}
.main .row{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.ribbon{position:absolute;top:10px;right:-6px;background:var(--gold);color:var(--plum);font-family:var(--display);font-weight:700;font-size:13px;padding:2px 12px;border-radius:8px 0 0 8px;box-shadow:0 2px 0 #c98400}
.mh{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:120px 1.4fr 1fr .6fr .8fr .8fr 70px;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;text-decoration:none;color:var(--text);border-left:6px solid}
.mrow>span{display:flex;flex-direction:column}
.mrow>.hcell{flex-direction:row}
.mrow.w{background:#eaf8ef;border-color:var(--ok)}.mrow.l{background:#ffeef2;border-color:var(--bad)}
.mrow.w .res b{color:var(--ok)}.mrow.l .res b{color:var(--bad)}
.mrow .d{color:var(--bad)}
.mrow:hover{filter:brightness(.97)}
.mrow .pts{text-align:right;align-items:flex-end}
.pager{align-items:center;justify-content:center;margin:14px 0 0}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}
.tierbox b{font-size:15px}
.tierbox{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;background:#f8f5ff}
@media (max-width:900px){.phead{grid-template-columns:auto 1fr}.pstats{grid-column:1/-1}}
@media (max-width:720px){.phead{grid-template-columns:1fr;text-align:center}.pbadge .badge{margin:0 auto}.lpbar{margin-inline:auto}.form{justify-content:center}.g3{grid-template-columns:repeat(2,1fr)}
  .mrow{grid-template-columns:1fr 1.3fr 1fr 48px;padding:10px;gap:6px}.mrow .hide-sm{display:none}.mrow .hcell .ava{display:none}
  .tbl .rankchip span{display:none}.tbl td,.tbl th{padding:6px 4px}}
/* admin sounds */
.tabs .cnt{font-size:12px;opacity:.7;margin-left:2px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:0 18px}
.snd h2{font-size:21px}.snd h2 .hint{font-size:13px;margin-left:4px}
.srow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;margin:0 -10px}
.srow+.srow{border-top:1px solid #f0eafe}
.srow.custom{background:#fff8e6}
.srow:target{outline:3px solid var(--gold)}
.sname{display:flex;flex-direction:column;min-width:0}.sname .hint{overflow-wrap:anywhere}
.sname code,.card code{font-size:12px;background:#f3eeff;padding:1px 5px;border-radius:6px}
.srow audio{height:32px;width:200px}
.sact{display:flex;gap:6px}.sact form{margin:0}
.upl{position:relative;cursor:pointer}.upl:focus-within{outline:3px solid var(--plum);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
@media (max-width:720px){.sgrid{grid-template-columns:1fr}.srow{grid-template-columns:1fr auto}.srow audio{grid-column:1/-1;width:100%}}
.sgrid .srow{grid-template-columns:1fr auto}.sgrid .srow audio{grid-column:1/-1;order:3;width:100%}
.sact{align-items:center}.sact form{display:flex}.sact .btn{display:inline-flex;align-items:center;justify-content:center;height:38px;margin:0;line-height:1;font-size:15px}label.upl{margin:0}

/* =========================================================
   Voxel / Twisted-gloom theme (v1.8): pixel font, square blocks, chunky shadows, dark misty palette
   ========================================================= */
@font-face{font-family:"Pixelify Sans";src:url(fonts/pixelify-sans-latin-400-normal.woff2) format("woff2");font-weight:400 549;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(fonts/pixelify-sans-latin-600-normal.woff2) format("woff2");font-weight:550 649;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(fonts/pixelify-sans-latin-700-normal.woff2) format("woff2");font-weight:650 900;font-display:swap}
:root{--display:"Pixelify Sans",system-ui,sans-serif;--body:"Pixelify Sans",system-ui,sans-serif;
  --bg0:#120f1f;--bg1:#1b1730;--panel:#262043;--panel2:#2f2852;--edge:#0b0915;--line:#3f3666;--text:#ece6ff;--muted:#a69cc9;--plum:#0b0915;
  --blue:#4fb6ff;--red:#ff5f8a;--gold:#ffc23a;--teal:#4fe0c0;--ok:#5ee08a;--bad:#ff6b8e;--warn:#ffc23a}
*{border-radius:0!important}
body{color:var(--text);background-color:var(--bg0);background-image:
  radial-gradient(ellipse at 50% -10%,rgba(79,224,192,.16),transparent 60%),
  linear-gradient(30deg,#17132a 12%,transparent 12.5%,transparent 87%,#17132a 87.5%,#17132a),linear-gradient(150deg,#17132a 12%,transparent 12.5%,transparent 87%,#17132a 87.5%,#17132a),
  linear-gradient(30deg,#17132a 12%,transparent 12.5%,transparent 87%,#17132a 87.5%,#17132a),linear-gradient(150deg,#17132a 12%,transparent 12.5%,transparent 87%,#17132a 87.5%,#17132a),
  linear-gradient(60deg,#1d1834 25%,transparent 25.5%,transparent 75%,#1d1834 75%,#1d1834),linear-gradient(60deg,#1d1834 25%,transparent 25.5%,transparent 75%,#1d1834 75%,#1d1834);
  background-size:100% 100%,56px 98px,56px 98px,56px 98px,56px 98px,56px 98px,56px 98px;background-position:0 0,0 0,0 0,28px 49px,28px 49px,0 0,28px 49px;background-attachment:fixed;font-weight:400}
a{color:var(--teal)}
h1{color:#fff;letter-spacing:.03em;text-shadow:4px 4px 0 var(--edge),-2px -2px 0 var(--edge),2px -2px 0 var(--edge),-2px 2px 0 var(--edge),0 0 22px rgba(79,224,192,.35)}
h2{color:#fff;text-shadow:3px 3px 0 var(--edge)}
.envbar{background:var(--gold);color:var(--edge);font-family:var(--display)}
.top{background:rgba(18,15,31,.92);border-bottom:3px solid var(--edge);box-shadow:0 4px 0 rgba(79,224,192,.18)}
.brand,.top nav a,.linkbtn{color:var(--text)}
.top nav a:hover{color:var(--teal)}
.gem{background:linear-gradient(135deg,#9ff3e3,var(--teal));border:2px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.card{background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 -6px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.06),7px 7px 0 rgba(0,0,0,.45)}
.stat{background:var(--panel2);border:2px solid var(--edge);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.stat span,.hint{color:var(--muted)}
.btn{font-family:var(--display);background:var(--gold);color:var(--edge);border:3px solid var(--edge);box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),4px 4px 0 rgba(0,0,0,.5)}
.btn:active{transform:translate(2px,2px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),2px 2px 0 rgba(0,0,0,.5)}
.btn.sm{box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),3px 3px 0 rgba(0,0,0,.5)}
.btn.ghost{background:var(--panel2);color:var(--text);box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),3px 3px 0 rgba(0,0,0,.5)}
.btn.danger{background:#ff8fa8;color:var(--edge);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),3px 3px 0 rgba(0,0,0,.5)}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{background:#15112a;color:var(--text);border:3px solid var(--edge);box-shadow:inset 3px 3px 0 rgba(0,0,0,.35)}
.tabs a{background:var(--panel2);color:var(--text);border:2px solid var(--edge);box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.tabs a[aria-current=page]{background:var(--teal);color:var(--edge)}
.tbl th{color:var(--muted);border-bottom:3px solid var(--edge)}
.tbl td{border-bottom:2px solid rgba(0,0,0,.25)}
.tbl tr.me td{background:rgba(255,194,58,.12)}
.pill{border:2px solid var(--edge)}
.pill.win{background:#1f4a35;color:#8ff0b5}.pill.loss{background:#4a1f2e;color:#ff9db5}.pill.flag{background:#4a3d1a;color:#ffd77a}
.flash{background:#1f4a35;color:#9ff5c2;border:3px solid var(--edge)}.flash.warn{background:#4a3d1a;color:#ffd77a}.flash.bad{background:#4a1f2e;color:#ffb3c5}
.blob{background:radial-gradient(circle at 50% 70%,rgba(79,224,192,.25),transparent 70%),var(--panel2);border:3px solid var(--edge);box-shadow:7px 7px 0 rgba(0,0,0,.45);overflow:hidden;aspect-ratio:auto;min-height:220px}
.blob img{width:118%;max-width:none;margin:-8% -9% -4%;display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.ava{border-radius:0!important;background:none!important;border:0!important;box-shadow:none!important;object-fit:contain;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.pxbadge{position:relative;display:inline-block;flex:none}
.pxbadge img{display:block;width:100%;height:100%;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
.pxbadge .div{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-family:var(--display);font-size:calc(var(--bs) * .2 + 6px);line-height:1;background:#fff;padding:1px 4px;border:2px solid var(--edge);box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.phead{background:linear-gradient(135deg,var(--panel) 55%,color-mix(in srgb,var(--rc) 22%,var(--panel)))}
.lpbar{background:#15112a;border:2px solid var(--edge);box-shadow:none}
.lpbar i{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 6px,transparent 6px 12px),linear-gradient(90deg,var(--rc),var(--rd))}
.form i{border:2px solid var(--edge)}
.main{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,var(--panel2)),var(--panel2) 70%);border:3px solid var(--edge)}
.main .wr{background:#4a1f2e;border:2px solid var(--edge)}
.ribbon{color:var(--edge);box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.mrow{border:2px solid var(--edge);border-left-width:8px}
.mrow.w{background:#1c3a2c;border-left-color:var(--ok)}.mrow.l{background:#3a1c27;border-left-color:var(--bad)}
.mrow .d{color:var(--bad)}
.tierbox{background:var(--panel2);border:2px solid var(--edge)}
.srow+.srow{border-top:2px solid rgba(0,0,0,.25)}.srow.custom{background:rgba(255,194,58,.1)}
.sname code,.card code{background:#15112a;color:var(--teal)}
.playframe{border:3px solid var(--edge);box-shadow:7px 7px 0 rgba(0,0,0,.45);background:#120f1f}
.foot{color:var(--muted)}
.board td.blue{color:var(--blue)}.board td.pink{color:var(--red)}
.pill.q{background:#2a2f48;color:#cfd4ea;border:1px solid #3a3f5c;font-size:11.5px;white-space:nowrap}
/* ---- news ---- */
.ntag{display:inline-block;font-family:var(--display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--edge);background:var(--nc,#a69cc9);border:2px solid var(--edge);padding:1px 7px;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
.ntag.pin{background:#ece6ff}
.newsband{margin-bottom:18px}.nhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.nhead h2{margin:0 0 10px}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:18px}
.ncard{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 -6px 0 rgba(0,0,0,.22),6px 6px 0 rgba(0,0,0,.45);transition:transform .12s}
.ncard:hover{transform:translate(-2px,-2px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.22),8px 8px 0 rgba(0,0,0,.45)}
.ncard.big{grid-column:span 2}@media (max-width:640px){.ncard.big{grid-column:auto}}
.nimg{display:block;aspect-ratio:16/7;background:#15112a;overflow:hidden;border-bottom:3px solid var(--edge)}
.nimg img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.nph{position:relative;display:grid;place-items:center;width:100%;height:100%;background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.035) 12px 24px),linear-gradient(135deg,color-mix(in srgb,var(--nc) 38%,#15112a),#15112a 75%)}
.nph i{width:46px;height:46px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,var(--nc));border:4px solid var(--edge);box-shadow:5px 5px 0 rgba(0,0,0,.5)}
.nph em{position:absolute;left:12px;bottom:8px;font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--nc) 70%,#fff)}
.ntags{display:flex;gap:6px;flex-wrap:wrap}
.ncard.big .nimg{aspect-ratio:16/6}
.nbody{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.nbody b{font-family:var(--display);font-size:20px;color:#fff;line-height:1.15}.ncard.big .nbody b{font-size:26px}
.ndate{font-size:12px;color:var(--muted)}
.npost h1{font-size:clamp(28px,4.5vw,44px);margin:.2em 0}.npost .lead{font-size:18px;color:var(--muted)}
.npost .nhero{width:100%;max-height:340px;object-fit:cover;border:3px solid var(--edge);margin-bottom:12px;image-rendering:pixelated}
.nbodytext{font-size:17px;line-height:1.6;max-width:72ch}.nbodytext h3{color:#fff;margin-top:1em}.nbodytext li{margin:4px 0}
.tabs .rss{margin-left:auto}
/* admin ban form */
details.inline{display:inline-block;vertical-align:top}details.inline>summary{list-style:none;display:inline-block}details.inline>summary::-webkit-details-marker{display:none}
details.inline[open]>.banf{display:grid;gap:8px;min-width:240px;margin:8px 0;padding:12px;border:2px solid #05060b;background:rgba(0,0,0,.25)}
.banf label{display:block;font-size:13px}.banf label.chk{display:flex;gap:6px;align-items:center}.banf select,.banf input:not([type=checkbox]){width:100%}
.top nav a.btn,.top nav a.btn:hover{color:var(--edge)}   /* gold button in the header: dark text */
/* dropdowns: room for the text and the arrow, dark option list (no clipped text when opened) */
select{height:auto;min-height:44px;line-height:1.3;padding:9px 38px 9px 12px;box-sizing:border-box;color-scheme:dark;text-overflow:ellipsis}
select option{background:#15112a;color:var(--text);padding:6px 10px;line-height:1.4}
input[type=text],input[type=email],input[type=password],input[type=search]{min-height:44px;box-sizing:border-box;line-height:1.3}
/* IP-ban form: labels on top, fields lined up on one baseline */
form.banf[style*="flex"]{display:grid!important;grid-template-columns:minmax(150px,1.2fr) minmax(120px,.8fr) minmax(200px,1.2fr) minmax(180px,1.3fr) auto;align-items:end;gap:12px}
form.banf[style*="flex"] label{display:flex;flex-direction:column;gap:6px;flex:none!important;font-size:13px}
form.banf[style*="flex"] .btn{min-height:44px}
@media (max-width:900px){form.banf[style*="flex"]{grid-template-columns:1fr 1fr}}

/* sign-up honeypot: off screen for people, still in the page for bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
label.chk{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:600;cursor:pointer}label.chk input{width:18px;height:18px;accent-color:var(--gold)}
/* readability: pixel font for headings, buttons and navigation; a clean sans for body text, forms and tables */
:root{--body:"Inter","Segoe UI",system-ui,sans-serif}
body{font-family:var(--body);font-weight:500;letter-spacing:.1px}
.hint,p,td,li,label,input,select,textarea{font-family:var(--body)}
.pwm{display:flex;align-items:center;gap:10px;margin:6px 0 4px;font-size:13px}.pwbar{flex:1;height:8px;background:#15112a;border:2px solid var(--edge)}.pwbar i{display:block;height:100%;width:0;transition:width .2s,background .2s}
/* download page: one card per system */
.dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:16px 0}
.dlcard{display:flex;flex-direction:column;gap:8px;margin:0}
.dlcard h2{margin:4px 0 0}.dlico{width:56px;height:56px;padding:8px;background:#15112a;border:3px solid var(--edge);image-rendering:pixelated}.dlico svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.dlbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.dlbtns .btn{margin:0}.dlmeta{display:block;width:100%;color:var(--muted);font-size:12px;margin-top:-4px}
.dlsteps{margin:4px 0 0;padding-left:20px;font-size:14px;line-height:1.5}.dlsteps code{word-break:break-all}
.sfind{display:flex;align-items:center;gap:12px;margin:10px 0 14px}.sfind input{max-width:420px}
/* themed scrollbars */
html{scrollbar-color:#ffc23a #15112a;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#15112a;border-left:2px solid #05060b}
::-webkit-scrollbar-thumb{background:#4a4170;border:2px solid #05060b;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}::-webkit-scrollbar-thumb:hover{background:#ffc23a}
::-webkit-scrollbar-corner{background:#15112a}::-webkit-scrollbar-button{display:none}
.fcode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 8px;font-size:15px}.fcode b{font-family:var(--display);color:var(--gold);letter-spacing:1px}.fcode small{color:var(--muted)}
/* type: Chakra Petch for headings, buttons and navigation; Inter for reading; the pixel font only for the logo and page titles */
@font-face{font-family:"Chakra Petch";src:url(fonts/chakra-petch-latin-500-normal.woff2) format("woff2");font-weight:100 549;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(fonts/chakra-petch-latin-600-normal.woff2) format("woff2");font-weight:550 649;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(fonts/chakra-petch-latin-700-normal.woff2) format("woff2");font-weight:650 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:100 449;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:450 549;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:550 649;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:650 900;font-display:swap}
:root{--display:"Chakra Petch","Segoe UI",sans-serif;--body:"Inter","Segoe UI",system-ui,sans-serif;--pixel:"Pixelify Sans","Chakra Petch",sans-serif}
body{font-family:var(--body)}
h1,.brand{font-family:var(--pixel);letter-spacing:1px}
h2,h3,.btn,.top nav a,.tabs a,th,.tier,.stat b{font-family:var(--display);letter-spacing:.3px}
.top nav a{font-weight:600}

/* inside the desktop client: no site chrome, a little tighter */
body.inclient main.wrap{padding-top:18px}
body.inclient{background-attachment:fixed}

/* ---- Champions page ---- */
.chFilter{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.chGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:22px}
.chCard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border:2px solid #2c3150;border-radius:10px;background:#161a2a;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.chCard:hover{border-color:var(--ac);transform:translateY(-2px)}.chCard[hidden]{display:none}
.chCard img,.chInit{width:96px;height:96px;border-radius:8px;background:#0e1019;image-rendering:pixelated;object-fit:cover}.chInit{display:grid;place-items:center;font-size:42px;font-weight:800;color:var(--ac)}
.chCard b{color:var(--ac);font-size:16px}.chCard small{color:#9aa2c3;font-size:12px}
.chDetail{scroll-margin-top:80px;border-left:4px solid var(--ac)}.chHead{display:flex;gap:16px;align-items:flex-start}.chHead img{width:120px;height:120px;border-radius:10px;background:#0e1019;image-rendering:pixelated}
.chHead h2{margin:0;color:var(--ac)}.chAbil{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}.chAbil li{display:flex;gap:12px;align-items:flex-start}
.chKey{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-weight:800;background:var(--ac,#5b4a8c);color:#0e1019}
.chStats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#c9cfe6;margin-bottom:8px}.chStats b{color:#8f97b8;font-weight:800;margin-right:4px}
.tag{background:#ffd27a;color:#1b1e2e;border-radius:4px;padding:0 5px;font-weight:800}

/* =====================================================================
   1.9.16: website matches the desktop launcher
   dark navy panels with a thin gold edge, gold call-to-action buttons,
   uppercase spaced navigation, Chakra Petch headings, Inter text
   ===================================================================== */
:root{--lb0:#0c0e1a;--lb1:#141729;--lb2:#1b1f33;--lpanel:linear-gradient(180deg,rgba(28,31,50,.94),rgba(16,18,30,.96));--ledge:#3a3420;--lline:#2c3150;--lgold:#ffc23a;--ltext:#e6e9f7;--lmuted:#9aa2c3}
body{background:radial-gradient(1200px 600px at 50% -10%,rgba(80,70,140,.25),transparent 60%),linear-gradient(180deg,var(--lb1),var(--lb0) 70%) fixed!important;color:var(--ltext)}
/* header: same bar as the launcher */
header.top{height:64px;padding:0 24px!important;background:linear-gradient(#141729,#0e1020)!important;border-bottom:1px solid var(--ledge)!important;box-shadow:0 1px 0 rgba(255,194,58,.18),0 6px 18px rgba(0,0,0,.45)!important;position:sticky;top:0;z-index:20;flex-wrap:nowrap}
header.top .brand{font-family:var(--pixel,"Pixelify Sans");font-size:22px;color:#f1ecff!important;letter-spacing:.5px}
header.top nav{gap:0!important;height:100%;align-items:stretch}
header.top nav>a:not(.btn),header.top nav .linkbtn{display:flex;align-items:center;padding:0 14px;height:100%;font-family:var(--display);font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:1.2px;color:#b9bfd8!important;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
header.top nav>a:not(.btn):hover,header.top nav .linkbtn:hover{color:#fff!important;border-bottom-color:var(--lgold)}
header.top nav>a.btn{align-self:center;margin-left:10px}
header.top nav form.inline{display:flex}
/* page titles: pixel title with a gold rule under it */
main.wrap h1{font-family:var(--pixel,"Pixelify Sans");color:#f4f1ff;text-shadow:0 3px 0 #05060b;font-size:clamp(30px,5vw,46px);padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--ledge);box-shadow:0 1px 0 rgba(255,194,58,.12)}
h2,h3{font-family:var(--display);letter-spacing:.3px;color:#eef0ff}
.lede{color:var(--lmuted)}
/* panels */
.card,.newsCard,.stat,.tbl,.dlcard{background:var(--lpanel)!important;border:1px solid var(--ledge)!important;border-radius:8px!important;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.4)!important;color:var(--ltext)}
.card{padding:20px 22px}
.stat b{color:#fff}.stat span{color:var(--lmuted)}
/* buttons: gold like Find Match; secondary dark */
.btn{font-family:var(--display)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(#ffd56a,#e6a21a)!important;color:#1b1406!important;border:2px solid #05060b!important;border-radius:4px!important;box-shadow:0 0 0 2px #6b5418,0 0 14px rgba(255,194,58,.25),3px 3px 0 rgba(0,0,0,.5)!important}
.btn:hover{filter:brightness(1.08)}
.btn.sm{font-size:13px!important;padding:6px 14px!important}
.btn.ghost{background:#20243a!important;color:#dfe3f2!important;box-shadow:0 0 0 1px #3a3f5c,2px 2px 0 rgba(0,0,0,.5)!important}
.btn.ghost:hover{background:#2a2f4a!important}
.btn.danger{background:linear-gradient(#ff7a8a,#c8344c)!important;color:#fff!important;box-shadow:0 0 0 2px #5e1029,2px 2px 0 rgba(0,0,0,.5)!important}
/* forms */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{background:#0e1019!important;border:1px solid #3a3f5c!important;border-radius:4px!important;color:#eef0ff!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lgold)!important;box-shadow:0 0 0 2px rgba(255,194,58,.25)}
label{color:#c9cfe6}
/* tables */
.tbl th{color:#8f97b8;text-transform:uppercase;letter-spacing:.8px;font-size:11.5px;border-bottom:1px solid var(--lline)!important}
.tbl td{border-bottom:1px solid rgba(44,49,80,.6)!important}
.tbl tr:hover td{background:rgba(255,194,58,.05)}
a{color:#7fd0ff}a:hover{color:#bfe8ff}
/* footer */
footer.foot{background:#0b0d18!important;border-top:1px solid var(--ledge)!important;color:#7d84a3!important}
/* flash messages */
.flash{border-radius:6px!important;border:1px solid var(--ledge)!important;background:#1b1f33!important;color:var(--ltext)!important}
.flash.bad{border-color:#5e1029!important;background:#2a1220!important}.flash.ok{border-color:#1d5a37!important;background:#11281c!important}
.envbar{letter-spacing:.5px}
@media (max-width:820px){header.top{height:auto;flex-wrap:wrap;padding:8px 14px!important}header.top nav{flex-wrap:wrap;height:auto}header.top nav>a:not(.btn),header.top nav .linkbtn{padding:8px 10px;height:auto}}
/* tabs and filters: launcher-style segmented buttons */
.tabs a,.chFilter .btn{background:#1b1f33!important;color:#b9bfd8!important;border:1px solid #3a3f5c!important;border-radius:4px!important;box-shadow:none!important;font-family:var(--display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.8px;font-size:12.5px!important;padding:6px 12px!important}
.tabs a:hover,.chFilter .btn:hover{color:#fff!important;border-color:var(--lgold)!important}
.tabs a[aria-current=page],.chFilter .btn:not(.ghost){background:linear-gradient(#ffd56a,#e6a21a)!important;color:#1b1406!important;border-color:#05060b!important}
/* news cards */
.ncard{background:var(--lpanel)!important;border:1px solid var(--ledge)!important;border-radius:8px!important;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.4)!important;transition:transform .15s,border-color .15s}
.ncard:hover{transform:translateY(-3px)!important;border-color:var(--lgold)!important}
.ntag{border-width:1px!important;border-radius:3px;box-shadow:none!important}
.ndate{color:var(--lmuted)!important}
/* 1.9.22 admin: live & trends charts (one hue: launcher gold; recessive grid) */
.chart{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.chart .grid{stroke:var(--lline,#2c3150);stroke-width:1}
.chart .ax{fill:var(--lmuted,#9aa2c3);font-size:13px;font-family:var(--body)}
.chart .mark{fill:var(--lgold,#ffc23a)}
.chart .hit{fill:transparent}
.chart .bar:hover .mark{fill:#ffe08a}
.heat{display:grid;gap:3px;overflow-x:auto;padding-bottom:4px}
.hrow{display:grid;grid-template-columns:38px repeat(24,minmax(14px,1fr));gap:3px;align-items:center}
.hrow>span{font-size:12px;color:var(--lmuted,#9aa2c3)}
.hl{font-style:normal;font-size:10px;color:var(--lmuted,#9aa2c3)}
.hc{display:block;height:18px;border-radius:3px;background:rgba(255,255,255,.04)}
.hc.l1{background:rgba(255,194,58,.16)}.hc.l2{background:rgba(255,194,58,.34)}.hc.l3{background:rgba(255,194,58,.55)}.hc.l4{background:rgba(255,194,58,.78)}.hc.l5{background:#ffc23a}
.hc:hover{outline:2px solid #fff}
.hleg{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12px;color:var(--lmuted,#9aa2c3)}.hleg .hc{width:18px}
/* 1.9.22 admin: match chat viewer */
.chatlog{background:var(--lb0,#0c0e1a);border:1px solid var(--lline,#2c3150);border-radius:8px;padding:10px 12px;max-height:70vh;overflow:auto;font-size:14px;line-height:1.5}
.chatlog .cl{padding:2px 6px;border-radius:4px}.chatlog .cl.mark{background:rgba(255,194,58,.12);outline:1px solid rgba(255,194,58,.35)}
.chatlog time{color:var(--lmuted,#9aa2c3);font-variant-numeric:tabular-nums;margin-right:8px}.chatlog .ch{color:var(--lmuted,#9aa2c3);margin-right:6px}
.chatlog .t1{color:#4fb6ff}.chatlog .t2{color:#ff5f8a}.chatlog .blk .tx{text-decoration:line-through;opacity:.75}
/* 1.9.22 admin: bug reports */
.g2b{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;align-items:start}@media (max-width:860px){.g2b{grid-template-columns:1fr}}
.bugtext{background:var(--lb0,#0c0e1a);border:1px solid var(--lline,#2c3150);border-radius:8px;padding:10px 12px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.bugshot{max-width:100%;border-radius:8px;border:1px solid var(--lline,#2c3150);display:block}
.note{border-left:3px solid var(--lgold,#ffc23a);background:rgba(255,255,255,.03);padding:8px 10px;border-radius:0 6px 6px 0;margin:8px 0;overflow-wrap:anywhere}
.note .nh{display:flex;gap:8px;align-items:center;margin-bottom:2px}.note .nh form{margin-left:auto}
.linkbtn{background:none;border:0;color:var(--lmuted,#9aa2c3);cursor:pointer;font:inherit;font-size:12px;text-decoration:underline;padding:0}
.noteform{display:grid;gap:6px;margin-top:10px}.noteform textarea{width:100%;box-sizing:border-box}.noteform .btn{justify-self:start}
.stlist{display:grid;gap:6px;margin-bottom:10px}.stlist .chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.tbl.sys th{text-align:left;white-space:nowrap;color:var(--lmuted,#9aa2c3);font-weight:600;text-transform:capitalize}.tbl.sys td{overflow-wrap:anywhere}
.pill.bs-new{background:#3a2f12;color:#ffc23a}.pill.bs-confirmed{background:#13304a;color:#7cc8ff}.pill.bs-in_progress{background:#2b1f4a;color:#c3a8ff}
.pill.bs-fixed{background:#123a22;color:#5ee08a}.pill.bs-wont_fix,.pill.bs-not_a_bug{background:#2a2d3c;color:#a9b0cc}.pill.bs-duplicate{background:#2a2d3c;color:#a9b0cc}
/* 1.9.22: rules page and sign-up agreement */
.rules{max-width:900px;margin:0 auto;display:grid;gap:16px}
.rules h1{margin:0 0 8px}.rules h2{margin:0 0 10px}.rules p{line-height:1.6}
.rtoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.rtoc a{border:1px solid var(--lline,#2c3150);border-radius:999px;padding:4px 12px;font-size:13px;text-decoration:none}.rtoc a:hover{border-color:var(--lgold,#ffc23a)}
.rlist{margin:0 0 10px;padding-left:20px;line-height:1.6}.rlist li{margin:4px 0}
.rtab{margin:6px 0 8px}.rtab td:first-child{white-space:nowrap;font-weight:600}
.rules section{scroll-margin-top:80px}
.chk.agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;line-height:1.45;cursor:pointer}.chk.agree input{margin-top:3px;flex:none;width:18px;height:18px}
.foot a{color:inherit}
.foot .safe{color:var(--lgold,#ffc23a)}
.tbl td.acts{min-width:150px}.tbl td.acts>*{display:inline-block;margin:2px 4px 2px 0}.tbl td.nowrap,.tbl td.nowrap .btn{white-space:nowrap}
.card input[type=number]{width:100%;box-sizing:border-box;padding:10px 12px}
/* 1.9.25: date of birth / country on sign-up and the age page */
.agef{border:0;padding:0;margin:14px 0 0;min-width:0}.agef legend{padding:0;margin-bottom:6px;font-weight:700;color:inherit}
.dob{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:8px}.dob select{width:100%;min-width:0}
/* 1.9.26: terms and privacy */
.legal h3{margin:14px 0 6px;font-size:15px;color:var(--lgold,#ffc23a)}.legal p{line-height:1.65}.legal .rtab td:first-child{white-space:normal}