@font-face{font-family:Mi;src:url(/fonts/Michroma-Regular.ttf);font-display:swap}
@font-face{font-family:It;src:url("/fonts/InterTight[wght].ttf");font-weight:100 900;font-display:swap}
@font-face{font-family:Jb;src:url("/fonts/JetBrainsMono[wght].ttf");font-weight:100 900;font-display:swap}
:root{--bg:#040814;--navy:#0a1430;--card:#0b1328;--line:#1c2a4c;--txt:#eef2f8;--dim:#8d97ad;--steel:#e9eef7;--gold:#e2b864;--red:#c8323c;
  --chrome:linear-gradient(180deg,#fff 0%,#c9d2e0 46%,#4a5568 52%,#eef2f8 100%);--goldg:linear-gradient(180deg,#fff1c4 0%,#e2b864 46%,#8a5e1c 54%,#f6dc98 100%)}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.55 It,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-5;background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(40,60,120,.07) 9px 10px)}
a{color:inherit}code{font-family:Jb,monospace}
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,48px);background:linear-gradient(#040814ee,#04081400)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:15px Mi;letter-spacing:.36em}.brand img{width:30px;height:30px;border-radius:50%}
.bar nav{display:flex;gap:22px;margin-left:auto;font:12px Jb;letter-spacing:.2em;text-transform:uppercase}.bar nav a{text-decoration:none;color:var(--dim)}.bar nav a:hover{color:var(--txt)}
.wallet{font:600 13px It;background:transparent;color:var(--txt);border:1px solid #33416a;border-radius:999px;padding:9px 16px;cursor:pointer}.wallet.on{border-color:var(--gold);color:var(--gold)}
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}
#hero{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.velvet{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 55% 75% at 70% 50%,#1b2c5c 0%,#0a1430 50%,transparent 80%)}
.copy{padding:120px clamp(16px,6vw,96px) 140px;max-width:760px}
.eyebrow{font:500 12px Jb;letter-spacing:.55em;color:var(--red);margin:0 0 18px}
h1{font:clamp(34px,5.4vw,78px)/1.06 Mi;margin:0;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 em{font-style:normal;background:var(--goldg);-webkit-background-clip:text;background-clip:text}
.lede{max-width:540px;color:#c6cfdf;font-size:clamp(16px,1.4vw,19px);margin:26px 0 34px}.lede b{color:var(--txt);font-weight:600}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;font:13px Mi;letter-spacing:.2em;text-decoration:none;color:#0a0d16;background:linear-gradient(90deg,#f4f7fb,#c9d2e0 48%,#e2b864 52%,#b8862e);border:0;border-radius:2px;padding:16px 26px;cursor:pointer;box-shadow:0 10px 40px -12px #e2b86488}
.btn:hover{filter:brightness(1.08)}.btn.big{width:100%;padding:20px;font-size:14px}.btn:disabled{opacity:.5;cursor:wait}
.ca{display:flex;gap:10px;align-items:center;background:#0b1328;border:1px solid var(--line);color:var(--txt);padding:13px 16px;border-radius:2px;cursor:pointer;font:13px Jb}.ca span{color:var(--gold)}
.clashes{position:absolute;right:clamp(16px,4vw,48px);bottom:28px;font:12px Jb;letter-spacing:.3em;color:var(--dim)}.clashes span{color:var(--red)}
.wrap{padding:110px clamp(16px,6vw,96px) 0;max-width:1320px;margin:0 auto}
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px;flex-wrap:wrap}
h2{font:clamp(24px,3vw,40px) Mi;margin:0;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{max-width:470px;color:var(--dim);margin:0}
h3{font:13px Jb;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin:48px 0 16px}
/* arena */
.arena{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.bout{display:block;text-decoration:none;background:linear-gradient(160deg,#0d1834,#070c1c);border:1px solid var(--line);border-radius:10px;padding:16px;transition:.25s}
.bout:hover{border-color:#3a4d80;transform:translateY(-3px)}
.bout .top{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.who{display:flex;gap:10px;align-items:center;min-width:0}.who.r{flex-direction:row-reverse;text-align:right}
.who img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:#16203c;border:1px solid var(--line)}
.who b{display:block;font:13px Mi;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{font:11px Jb;color:var(--dim)}
.who.a b{color:var(--steel)}.who.b b{color:var(--gold)}
.mini{font:11px Mi;color:var(--red);letter-spacing:.2em}
.bout canvas{width:100%;height:150px;display:block;margin-top:12px}
.tug{position:relative;height:6px;border-radius:3px;background:#1a2440;overflow:hidden;margin-top:10px}
.tug i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#f4f7fb,#9aa6bd);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.tug u{position:absolute;inset:0 0 0 auto;background:linear-gradient(90deg,#b8862e,#e2b864);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.state{display:flex;justify-content:space-between;font:11px Jb;color:var(--dim);margin-top:8px;letter-spacing:.08em}.state .won{color:var(--red);letter-spacing:.2em}
/* challenge */
.pair{display:grid;grid-template-columns:1fr 90px 1fr;gap:18px;align-items:stretch}
.side{background:linear-gradient(160deg,#0d1834,#070c1c);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:14px}
.side[data-s="b"]{border-color:#3d3220}
.tag{font:11px Mi;letter-spacing:.3em;color:var(--steel)}.tag.gold{color:var(--gold)}
.drop{aspect-ratio:1;max-width:220px;border:1px dashed #33416a;border-radius:8px;display:grid;place-items:center;text-align:center;color:var(--dim);cursor:pointer;overflow:hidden;position:relative;font-size:14px}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.drop:hover{border-color:var(--gold)}
.vs{display:grid;place-items:center}.vs span{font:34px Mi;color:var(--red);text-shadow:0 0 30px #c8323c88;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}}
.go{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:7px;font:11px Jb;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
input,textarea{background:#060b1a;border:1px solid var(--line);border-radius:4px;color:var(--txt);font:16px It;padding:12px 13px;letter-spacing:0;text-transform:none}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.status{min-height:22px;color:var(--gold);font:13px Jb;margin:10px 0 0}
.empty{color:var(--dim);font:13px Jb}
.fine p{color:var(--dim);max-width:820px;font-size:14px}
.foot{display:flex;gap:14px;align-items:center;padding-bottom:60px;margin-top:80px;border-top:1px solid var(--line);padding-top:30px;font:13px Mi;letter-spacing:.3em}.foot img{width:26px;border-radius:50%}.foot .dim{font:12px Jb;letter-spacing:.1em;color:var(--dim);margin-left:auto}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0d1834;border:1px solid var(--red);color:var(--txt);padding:12px 18px;border-radius:6px;font:14px It;opacity:0;pointer-events:none;transition:.3s;z-index:50;max-width:90vw}#toast.on{opacity:1}
/* one duel page */
.dp{padding:110px clamp(16px,5vw,80px) 60px;max-width:1300px;margin:0 auto}
.dp .top{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.dp .who img{width:88px;height:88px}.dp .who b{font-size:clamp(16px,2vw,26px)}
.dp canvas{width:100%;height:min(52vh,460px);display:block;margin:26px 0 10px}
.dp .tug{height:10px}.trade{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
@media (max-width:760px){.bar nav{display:none}.pair{grid-template-columns:1fr}.vs{padding:4px 0}.arena{grid-template-columns:1fr}
  .copy{padding-top:96px;padding-bottom:58vh}.hero{align-items:start}h1{font-size:9vw}.velvet{background:radial-gradient(ellipse 90% 50% at 50% 80%,#1b2c5c 0%,#0a1430 50%,transparent 80%)}.foot .dim{display:none}}