:root{--bg:#0a0a0f;--stroke:rgba(255,255,255,.1);--text:#fff8f0;--red:#ff3b30;--red-d:#6b1015;--blue:#27a4ff;--blue-d:#0e2868;--gold:#ffbf45;--green:#4aed8e}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 8%,#16132a 0%,var(--bg) 50%,#040408 100%);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}

/* Noise overlay */
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:overlay}

/* Ambient blobs */
.ambient{position:fixed;width:38vw;height:38vw;filter:blur(90px);opacity:.25;border-radius:999px;pointer-events:none;z-index:0}
.ambient-red{left:-10vw;top:22vh;background:var(--red)}
.ambient-blue{right:-10vw;top:24vh;background:var(--blue)}

/* Coins */
.coin-field{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.coin{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b8,#ffbd42 45%,#a95716 100%);box-shadow:0 0 12px rgba(255,191,69,.35);opacity:.38;animation:floatCoin linear infinite}
@keyframes floatCoin{from{transform:translate3d(var(--x0),110vh,0) rotate(0deg)}to{transform:translate3d(var(--x1),-14vh,0) rotate(720deg)}}

/* Stage */
.stage{min-height:100dvh;padding:clamp(10px,2vw,32px);display:grid;place-items:center;perspective:1100px;position:relative;z-index:2}
.shell{width:min(1060px,100%);position:relative;overflow:hidden;isolation:isolate;padding:clamp(14px,2.4vw,28px);border:1px solid var(--stroke);border-radius:clamp(20px,3vw,40px);background:linear-gradient(128deg,rgba(255,59,48,.08),transparent 28%,transparent 68%,rgba(39,164,255,.08)),rgba(10,10,16,.72);box-shadow:0 32px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px)}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.logo{height:32px;width:auto;opacity:.92}
.wallet-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);font-weight:700;font-size:13px;color:rgba(255,255,255,.78);transition:transform .2s,border-color .2s,box-shadow .2s}
.wallet-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28);box-shadow:0 4px 16px rgba(255,255,255,.08)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);flex-shrink:0}
.wallet-btn.connected .dot{background:var(--green);box-shadow:0 0 12px var(--green)}

/* Headline */
.headline{margin:clamp(48px,10vh,88px) auto clamp(28px,5vh,48px);text-align:center}
.event-tag{font-family:'Chakra Petch',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:10px}
h1{font-family:'Chakra Petch','DM Sans',sans-serif;font-size:clamp(44px,8.5vw,100px);line-height:.9;letter-spacing:-.06em;text-transform:uppercase;text-wrap:balance;text-shadow:0 14px 44px rgba(0,0,0,.48)}

/* Arena */
.arena{position:relative;display:grid;grid-template-columns:1fr minmax(72px,110px) 1fr;align-items:stretch;min-height:clamp(260px,38vh,420px);gap:clamp(6px,1.4vw,16px);transform-style:preserve-3d}

/* Sides */
.side{position:relative;overflow:hidden;text-align:center;border:1px solid var(--stroke);border-radius:clamp(20px,2.6vw,34px);background:rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(20px,3vw,36px);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,filter .3s,box-shadow .5s ease-out,opacity .3s}
.side:hover{transform:translateY(-4px) scale(1.01)}
.side::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .5s ease}
.side-red::before{background:radial-gradient(ellipse at 50% 100%,rgba(255,59,48,.55),transparent 60%)}
.side-blue::before{background:radial-gradient(ellipse at 50% 100%,rgba(39,164,255,.55),transparent 60%)}
.side:hover::before{opacity:.6}
.side.is-selected{border-color:rgba(255,255,255,.35);transform:translateY(-2px) scale(1.02)}
.side-red.is-selected{box-shadow:0 0 60px rgba(255,59,48,.35),0 0 120px rgba(255,59,48,.15),inset 0 0 40px rgba(255,59,48,.08)}
.side-blue.is-selected{box-shadow:0 0 60px rgba(39,164,255,.35),0 0 120px rgba(39,164,255,.15),inset 0 0 40px rgba(39,164,255,.08)}
.side.is-selected::before{opacity:1}
.side.is-muted{opacity:.6;filter:saturate(.5) brightness(.82);transform:scale(.97)}
.side-bg{position:absolute;inset:0;z-index:-2;transition:opacity .5s}
.side-red .side-bg{background:radial-gradient(circle at 50% 80%,rgba(255,59,48,.4),transparent 50%),linear-gradient(160deg,rgba(107,16,21,.75),rgba(12,6,10,.55))}
.side-blue .side-bg{background:radial-gradient(circle at 50% 80%,rgba(39,164,255,.4),transparent 50%),linear-gradient(200deg,rgba(14,40,104,.75),rgba(6,8,18,.55))}
.side.is-selected .side-bg{opacity:1}
.side::after{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 34%,rgba(255,255,255,.06));opacity:.3}
.side-orbit{position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid rgba(255,255,255,.06);opacity:.25;pointer-events:none}
.oa{right:-55px;top:-45px;animation:drift 10s ease-in-out infinite}
.ob{left:-60px;bottom:-55px;animation:drift 12s ease-in-out infinite reverse}
@keyframes drift{50%{transform:translate3d(10px,-8px,0) scale(1.05)}}
.side-name{font-family:'Chakra Petch',sans-serif;font-weight:800;font-size:clamp(42px,6.5vw,84px);line-height:.8;text-transform:uppercase;letter-spacing:-.06em;position:relative;z-index:2}
.side-cta{margin-top:clamp(16px,3vh,28px);padding:9px 18px;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.12);font-weight:700;font-size:13px;letter-spacing:.08em;transition:background .25s,color .25s}
.side.is-selected .side-cta{background:rgba(255,255,255,.88);color:#0a0a0f}

/* VS spine */
.vs-spine{position:relative;height:100%;display:grid;place-items:center;transform-style:preserve-3d}
.vs-line{position:absolute;width:2px;height:68%;border-radius:99px;background:linear-gradient(var(--red),var(--gold),var(--blue));transform:rotate(12deg);box-shadow:0 0 28px rgba(255,191,69,.4)}
.vs-seal{position:relative;z-index:2;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:rgba(6,6,10,.82);border:1.5px solid rgba(255,255,255,.22);font-family:'Chakra Petch',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 36px rgba(255,191,69,.2)}
.vs-ring{position:absolute;width:112px;height:112px;border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:pulse 2.8s ease-out infinite}
.rb{animation-delay:1.4s}
@keyframes pulse{to{transform:scale(1.7);opacity:0}}

/* Controls */
.controls{margin:clamp(20px,3.5vh,36px) auto 0;text-align:center}
.confirm-btn{min-width:180px;padding:13px 20px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(255,191,69,.92),rgba(255,116,48,.92));color:#140b03;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 34px rgba(0,0,0,.22);transition:transform .25s,border-color .25s,background .25s}
.confirm-btn:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.confirm-btn:disabled{cursor:not-allowed;opacity:.62;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.48)}
.confirm-btn.is-play{background:linear-gradient(135deg,var(--green),#27d97a);color:#041209;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 34px rgba(0,0,0,.22),0 0 28px rgba(74,237,142,.35);border-color:rgba(74,237,142,.4)}

/* Countdown */
.countdown{margin:16px auto 0}
.cd-label{display:block;color:rgba(255,255,255,.52);font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;margin-bottom:8px}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:340px;margin:0 auto}
.timer span{padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.timer b{display:block;font-family:'Chakra Petch',sans-serif;font-size:26px;line-height:1}
.timer small{color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:.1em}

/* Mobile */
@media(max-width:760px){
.stage{padding:6px;align-items:start}
.shell{border-radius:18px;padding:12px}
.headline{margin:32px auto 20px}
.arena{grid-template-columns:1fr;min-height:auto;gap:8px}
.vs-spine{height:56px;order:2}
.side-red{order:1}.side-blue{order:3}
.side{min-height:180px}
.side-name{font-size:48px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}