:root{
  --ink:#050505; --panel:#141416; --panel2:#1d1d21; --line:#2e2e34; --text:#f3f3f4; --muted:#9b9ba3;
  --red:#e5242b; --red-hot:#ff4046; --accent:var(--red);
  --vote-blue:#58b8ff; --vote-surface:#102635; --premium:#f4cb62; --premium-ink:#171307; --shine:rgba(255,255,255,.65);
  --cut:14px;
  --display:'Chakra Petch',system-ui,sans-serif; --body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 var(--body);min-height:100vh;display:flex;flex-direction:column;
  background-image:linear-gradient(135deg,transparent 0 60%,rgba(229,36,43,.07) 60% 61%,transparent 61%),linear-gradient(45deg,transparent 0 80%,rgba(255,255,255,.025) 80% 81%,transparent 81%);background-size:520px 520px,340px 340px}
main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:28px 18px 60px;outline:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:.01em}
h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:1.5rem;margin-bottom:14px} h3{font-size:1.1rem}
.muted{color:var(--muted)} .red{color:var(--red-hot)}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(5,5,5,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:10px 18px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:1.5rem;display:flex;align-items:center;gap:10px}
.logo b{display:inline-block;background:var(--red);color:#fff;padding:2px 12px 2px 8px;clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 9px) 100%,0 100%)}
.links{display:flex;gap:4px;flex-wrap:wrap}
.links a{padding:8px 12px;font-family:var(--display);font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.links a:hover,.links a.on{color:#fff;border-color:var(--red)}
.spacer{flex:1}
.search{position:relative;min-width:200px}
.search input{width:100%}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;background:var(--panel);border:1px solid var(--line);z-index:30;max-height:70vh;overflow:auto}
.results a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.results a:hover{background:var(--panel2)}
.results small{color:var(--muted)}

/* controls */
input,select,textarea{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:9px 11px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--red);outline:none}
textarea{min-height:90px;resize:vertical}
label{display:block;font-weight:600;font-size:.92rem;margin:12px 0 4px}
label.inline{display:flex;gap:8px;align-items:center;font-weight:500}
label.inline input{width:auto}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--red);color:#fff;font:600 1rem var(--display);padding:10px 20px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:background .15s,transform .15s}
.btn:hover{background:var(--red-hot);transform:translateY(-1px)}
.btn.ghost{background:var(--panel2);color:var(--text)} .btn.ghost:hover{background:#2a2a30}
.btn.sm{padding:6px 12px;font-size:.88rem} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.danger{background:#5b1013}.btn.danger:hover{background:var(--red)}

/* cards & rows */
.panel{background:var(--panel);border:1px solid var(--line);padding:18px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.section{margin-top:38px}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.thumb{position:relative;background-size:cover;background-position:center;overflow:hidden;flex:none}
.thumb svg{position:absolute;inset:0;width:100%;height:100%}
.card{display:block;background:var(--panel);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--red);transform:translateY(-2px)}
.card .thumb{height:120px}
.card .body{padding:12px 14px}
.row{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;transition:border-color .15s,background .15s}
.row:hover{border-color:var(--red);background:var(--panel2)}
.row .pos{width:72px;flex:none;display:grid;place-items:center;font:700 1.5rem var(--display);background:var(--red);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.row .pos.top{background:#fff;color:#000}
.row .thumb{width:150px}
.row .mid{flex:1;padding:10px 16px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.row .mid strong{font:600 1.15rem var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .end{padding:10px 18px;text-align:right;display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.score{font:700 1.4rem var(--display)} .score.deco{color:#fff}
.avatar{width:42px;height:42px;border-radius:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));background:var(--panel2);object-fit:cover;flex:none;display:grid;place-items:center;font:700 1.1rem var(--display);color:var(--red-hot)}
.avatar.big{width:110px;height:110px;font-size:2.6rem}
.pill{display:inline-block;padding:2px 9px;background:var(--panel2);border:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.pill.red{background:var(--red);border-color:var(--red);color:#fff}
.sample{background:#3a2d00;color:#ffd24a;border-color:#6b5200}
table{width:100%;border-collapse:collapse} th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--muted);font-weight:600;font-size:.88rem}
.tablewrap{overflow-x:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);padding:12px 14px}
.stat b{display:block;font:700 1.9rem var(--display)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:600 1rem var(--display);padding:10px 14px;cursor:pointer}
.tabs button.on,.tabs button:hover{color:#fff;border-color:var(--red)}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:34px 0 10px}
.hero .word{font:700 clamp(4.5rem,15vw,9rem)/.85 var(--display);letter-spacing:-.03em;color:var(--red);text-shadow:6px 6px 0 #1c0507}
.hero p{max-width:46ch;color:#cfcfd4;font-size:1.1rem}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.top1{display:block;position:relative;min-height:230px;border:1px solid var(--line);overflow:hidden}
.top1 .thumb{position:absolute;inset:0}
.top1 .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.92))}
@media(max-width:820px){.hero{grid-template-columns:1fr}.row .thumb{display:none}.row .pos{width:54px;font-size:1.15rem}.row .end{padding:8px 10px}}

/* level page */
.banner{position:relative;min-height:300px;margin:-28px -18px 0;background-size:cover;background-position:center;display:flex;align-items:flex-end;border-bottom:3px solid var(--accent)}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,var(--ink));}
.banner .in{position:relative;width:100%;max-width:1160px;margin:0 auto;padding:30px 18px}
.lvl-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px;margin-top:20px}
@media(max-width:900px){.lvl-body{grid-template-columns:1fr}}
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bigstat{display:flex;gap:14px;flex-wrap:wrap}
.bigstat>div{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);padding:12px 14px}
.bigstat b{display:block;font:700 2rem var(--display)}
.vote{margin-top:12px}
.nums{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:8px 0}
.nums button{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:8px 0;font:600 .95rem var(--display);cursor:pointer}
.nums button:hover{border-color:var(--red)} .nums button.on{background:var(--accent);border-color:var(--accent)}
.bar{height:6px;background:var(--panel2)} .bar i{display:block;height:100%;background:var(--accent)}

/* misc */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:50;display:grid;place-items:start center;overflow:auto;padding:5vh 14px}
.modal[hidden]{display:none}
.modal .box{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);width:100%;max-width:560px;padding:22px}
.modal .box.wide{max-width:820px}
#toasts{position:fixed;right:14px;bottom:14px;z-index:60;display:grid;gap:8px}
.toast{background:var(--panel2);border-left:4px solid var(--red);padding:10px 14px;max-width:340px;animation:in .2s}
.toast.ok{border-color:#3ecf6e}
@keyframes in{from{opacity:0;transform:translateX(12px)}}
.foot{border-top:1px solid var(--line);padding:18px;text-align:center;color:var(--muted);font-size:.85rem}
.empty{padding:36px;text-align:center;color:var(--muted);border:1px dashed var(--line)}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.assets figure{margin:0;background:var(--panel2);border:1px solid var(--line);padding:6px;font-size:.8rem}
.assets img{width:100%;height:80px;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.awaiting-vote{border-color:var(--vote-blue)}
.vote-now{display:inline-block;color:var(--vote-blue);font-weight:700;font-size:.9rem;margin:4px 0}
.premium{background:var(--premium);color:var(--premium-ink);position:relative;overflow:hidden}
.premium:hover{background:var(--premium)}
.premium::after{content:"";position:absolute;inset:-60% auto -60% -60%;width:35%;background:linear-gradient(90deg,transparent,var(--shine),transparent);transform:rotate(25deg);animation:premium-shine 4s infinite;pointer-events:none}
@keyframes premium-shine{0%,40%{left:-60%}80%,100%{left:160%}}
.proof-requirements{border-left:3px solid var(--vote-blue);background:var(--vote-surface);padding:12px 14px;margin:12px 0 20px;color:var(--text)}
.level-badges,.level-credits{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0}
.comment{border-bottom:1px solid var(--line);padding:16px 0;overflow-wrap:anywhere}
.prewrap{white-space:pre-wrap;overflow-wrap:anywhere}
.video video{width:100%;height:100%;display:block}
.bigstat{margin-top:16px}
.nums button:disabled{opacity:.4;cursor:not-allowed}
.submission-form{max-width:620px}
h1,h2,h3{letter-spacing:0;overflow-wrap:anywhere}
@media(max-width:600px){
 main{padding:20px 14px 40px}
 .nav{position:relative;gap:8px;padding:12px 14px}
 .logo{width:100%;font-size:1.25rem}
 .links{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:0;margin-top:4px}
 .links a{white-space:nowrap;padding:10px 12px}
 .spacer{display:none}
 .search{order:4;width:100%;min-width:0}
 .results{min-width:0}
 .g2,.g3{grid-template-columns:minmax(0,1fr)}
 .row{display:grid;grid-template-columns:44px minmax(0,1fr) auto}
 .row .pos{width:44px;grid-row:1 / 3;clip-path:none}
 .row .mid{padding:10px;grid-column:2 / -1}
 .row .mid strong{white-space:normal;overflow-wrap:anywhere;font-size:1.05rem}
 .row .mid .muted{font-size:.9rem}
 .row .end{grid-column:2 / -1;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:0 10px 10px;white-space:normal}
 .row:has(.avatar){grid-template-columns:44px 56px minmax(0,1fr)}
 .row:has(.avatar) .mid{grid-column:3;padding-left:6px}
 .row:has(.avatar) .end{grid-column:2 / -1;padding-left:14px}
 .score{font-size:1.15rem}
 .panel{padding:14px;min-width:0}
 .hero{padding:12px 0;gap:18px}
 h1{font-size:2rem}.hero .word{font-size:5rem;letter-spacing:0}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat{min-width:0}.stat b{font-size:1.4rem;overflow-wrap:anywhere}
 .banner{margin:-20px -14px 0;min-height:250px}
 .banner .in{padding:24px 14px}
 .lvl-body{gap:18px}
 .bigstat{gap:8px}.bigstat>div{min-width:90px;padding:10px}
 .nums{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.nums button{min-height:42px}
 .modal .box{padding:18px;overflow-wrap:anywhere}
 .modal .box>div{flex-wrap:wrap}
 .tabs{flex-wrap:nowrap;overflow-x:auto}.tabs button{white-space:nowrap;padding:10px}
 .empty{padding:24px 14px}.btn{justify-content:center;max-width:100%;white-space:normal}
 .section{margin-top:28px}.tablewrap{max-width:100%}td{overflow-wrap:anywhere}
 input[type=file]{font-size:.9rem}
}