:root{
  --ink:#0b0f0e; --hero:#111715; --panel:#0e1513; --line:#22302b;
  --cream:#f1e6d2; --sand:#e8dcc4; --dim:#8b958f;
  --gold:#f0b429; --rust:#c4502a; --odds:#e9a23b; --amber:#cfa64a;
  --g1:#17503b; --g2:#0f3b2c; --pool:#0a1612; --cell:#1a2a23;
  --display:'Anton',Impact,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{image-rendering:pixelated;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1380px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:#0b100f;border-bottom:1px solid #1d2624;height:80px}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:36px;letter-spacing:.12em;color:#efe6d6;line-height:1}
.links{display:flex;align-items:center;gap:26px}
.links a{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#d9d0bf;transition:color .15s}
.links a:hover{color:var(--gold)}
.links .btn-ghost{margin-left:14px;border:1px solid #cfc6b4;padding:11px 16px;color:var(--cream);font-weight:700}
.links .btn-ghost:hover{background:var(--cream);color:var(--ink)}

.ca{margin-right:auto;margin-left:40px;background:none;border:1px solid #2a3330;color:#b9b2a3;font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:9px 14px;cursor:pointer;display:flex;gap:6px;align-items:center;transition:border-color .15s,color .15s}
.ca span{color:var(--gold);font-weight:700}
.ca b{font-weight:500;color:#e6dece}
.ca em{font-style:normal;font-size:10px;letter-spacing:.14em;color:#3ddc84;text-transform:uppercase}
.ca:hover{border-color:var(--gold)}
@media (max-width:1100px){.ca{display:none}}

/* HERO */
.hero{position:relative;height:724px;background:var(--hero);overflow:hidden;border-bottom:1px solid #000}
.hero-in{position:relative;z-index:3;height:100%}
.hero-copy{padding-top:46px;width:300px}
.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:77px;line-height:.94;letter-spacing:0;color:#f3ece0}
.hero p{font-size:20px;line-height:1.7;color:#ddd5c6;max-width:124px;margin:22px 0 34px}
.btn-gold{display:inline-block;background:var(--gold);color:#1b1408;font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:17px 0;width:128px;text-align:center;white-space:nowrap;box-shadow:5px 5px 0 var(--rust);transition:transform .12s,box-shadow .12s}
.btn-gold:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rust)}
.btn-gold:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--rust)}
.btn-out{display:block;margin-top:14px;width:128px;border:1px solid #5d5f58;padding:9px 19px;font-family:var(--mono);font-weight:700;font-size:11.5px;line-height:1.65;letter-spacing:.12em;text-transform:uppercase}
.btn-out:hover{background:var(--cream);color:var(--ink)}
.live{margin-top:30px;font-family:var(--mono);font-size:12px;line-height:1.5;color:#b9b2a3;display:flex;align-items:center;gap:8px;max-width:128px}
.live i{flex:0 0 7px}
.live i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* live stage behind hero */
.stage{position:absolute;left:31%;right:0;top:0;bottom:0;z-index:1;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,#000 30%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,#000 30%)}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 38% 55%,rgba(10,14,13,.2),rgba(10,14,13,.55) 70%);pointer-events:none}
.banner{position:relative;height:80px;overflow:hidden;border-bottom:1px solid #1a2421}
.banner canvas{width:100%;height:100%;opacity:.55}
.matchup{position:absolute;right:28px;top:-2px;text-align:right;background:rgba(10,16,18,.7);padding:8px 12px 10px 16px;font-size:19px;color:#bfc7c4}
.matchup b{font-weight:500;color:#dfe3df}.matchup span{font-size:14px;color:#8d9894;margin:0 6px}
.matchup small{display:block;font-size:12px;color:#7e8985;margin-top:6px}
.players{display:flex;gap:8px;padding:0 24px 0 0;margin:2px 0 12px;justify-content:flex-end}
.pc{flex:0 0 206px;height:82px;border:1px solid #2b3a44;background:#121b20;padding:12px 14px;display:grid;grid-template-columns:40px 1fr;gap:4px 10px;align-content:start;transition:all .4s}
.pc img{width:38px;height:38px;object-fit:contain;grid-row:span 2}
.pc .n{font-size:14.5px;color:#d7dbd8;font-weight:500}
.pc .r{font-family:var(--mono);font-size:9px;letter-spacing:.12em;border:1px solid #6c8790;color:#8fb1bb;padding:1px 5px;width:max-content;text-transform:uppercase}
.pc .s{grid-column:1/-1;font-size:10.5px;color:#6f7b77;display:flex;gap:6px;align-items:center}
.pc .s em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;border:1px solid #3d8ea5;color:#61b5cc;padding:0 4px}
.pc.dead{opacity:.28;filter:grayscale(1)}
.pc.acted{border-color:#9aa9b6;background:#18232b}
.pc.guarded{border-color:#a37d3c;background:#2b2214}
.board{display:grid;grid-template-columns:1fr 326px;gap:18px;padding-right:24px;height:530px}
.action{border:1px solid #1d2a2c;background:rgba(14,21,22,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.action-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#6e7b78}
.action-title{font-size:24px;font-weight:500;color:#e2e5e1;margin:12px 0 44px;min-height:32px;transition:opacity .35s,transform .35s}
.action-title.out{opacity:0;transform:translateY(6px)}
.duel{display:flex;align-items:center;gap:30px}
.who{width:250px;height:88px;border:1px solid #1f2b2e;background:#0f1719;display:flex;align-items:center;gap:16px;padding:0 18px;text-align:left;transition:opacity .35s}
.who img{width:46px;height:46px;object-fit:contain}
.who small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:#56625f;text-transform:uppercase}
.who b{display:block;font-weight:500;font-size:17px;color:#d8dcd8;margin:3px 0}
.who.dim{opacity:.35}
.center-sprite{width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#2c3d52 0,#141e26 62%,transparent 64%);display:grid;place-items:center;animation:bob 2.6s ease-in-out infinite}
.center-sprite img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(120,170,255,.35))}
@keyframes bob{50%{transform:translateY(-6px)}}
.chat{border:1px solid #1d2a2c;background:rgba(13,20,22,.85);padding:22px 0 0 16px;display:flex;flex-direction:column;min-height:0}
.chat-h{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#c9cfcb;margin-bottom:18px}
.chat-feed{overflow:hidden;flex:1;padding-right:14px;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.msg{border-left:2px solid #4d4a3c;padding:0 0 0 17px;margin-bottom:26px;animation:msgin .5s ease}
.msg h4{font-weight:500;font-size:15px;color:#e5c88e;display:flex;gap:10px;align-items:baseline}
.msg h4 small{font-family:var(--mono);font-size:10px;color:#6d7774;font-weight:400}
.msg p{font-size:14.5px;line-height:1.58;color:#d6d9d5;margin-top:8px}
.msg.human h4{color:#cfd6d3}.msg.human p{color:#9aa39f}
@keyframes msgin{from{opacity:0;transform:translateY(10px)}}

/* ROSTER */
.roster{background:var(--sand);color:#121212;padding:96px 0 110px}
.roster h2,.bet-h{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92}
.roster h2{font-size:76px;margin:0 0 62px;padding-left:2px}
.grid{display:flex;flex-wrap:wrap;justify-content:center;width:1330px;max-width:100%}
.card{width:221.6px;height:217px;position:relative;display:flex;flex-direction:column;cursor:pointer;overflow:hidden}
.card .art{flex:1;display:grid;place-items:center;position:relative;overflow:hidden}
.card .art img.c{max-width:72%;max-height:88%;transition:transform .25s}
.card .sig{position:absolute;top:10px;right:14px;width:32px;height:32px;object-fit:contain;transition:transform .5s}
.card .lab{height:35px;border-top:1px solid rgba(0,0,0,.18);display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.card:hover .art img.c{transform:translateY(-6px) scale(1.05)}
.card:hover .sig{transform:rotate(180deg)}
.card.dark .lab{color:#e8dcc4}.card.light .lab{color:#2a2418}
.card .stat{position:absolute;left:0;right:0;bottom:0;background:rgba(10,14,13,.88);color:var(--cream);font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:8px 12px;transform:translateY(100%);transition:transform .25s;display:flex;justify-content:space-between}
.card:hover .stat{transform:none}

/* BET */
.bet{background:radial-gradient(ellipse at 50% 30%,#18573f 0,#124632 45%,#0d3426 100%);padding:16px 0 0;border-bottom:1px solid #050806}
.bet-h{font-size:80px;text-align:center;color:var(--cream);padding-top:14px}
.bet-sub{text-align:center;font-size:17.5px;color:#d8d2c2;margin:22px 0 52px}
.bet-sub b{color:var(--gold);font-weight:600}
.pool{width:704px;max-width:100%;margin:0 auto;background:var(--pool);border:1px solid #b99b52;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pool-top{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid #1f2e28;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pool-state{color:#e8d49e;font-weight:600;display:flex;gap:6px;align-items:center}
.pool-state i{width:6px;height:6px;border-radius:50%;background:#3ddc84;margin-right:4px}
.pool.locked .pool-state i{background:#e0703a}
.pool-clock{color:#aaa58f}
.pool-total{padding:22px 16px 18px;border-bottom:1px solid #1f2e28}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#9b9a87;text-transform:uppercase}
.total{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.total span{font-family:var(--display);font-size:64px;color:var(--cream);line-height:1.1}
.total em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--amber)}
.row{position:relative;display:flex;align-items:center;gap:16px;height:92px;padding:0 16px;border-bottom:1px solid #1f2e28;cursor:pointer;transition:background .2s}
.row:hover{background:#0f1e18}
.row.sel{background:#13261e}
.row img{width:38px;height:38px;object-fit:contain}
.row .nm{font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.01em;color:var(--cream);flex:1}
.row .amt{text-align:right}
.row .amt b{display:block;font-family:var(--display);font-weight:400;font-size:27px;color:var(--cream)}
.row .amt small{font-family:var(--mono);font-size:12px;color:var(--odds)}
.row .bar{position:absolute;left:0;bottom:-1px;height:2px;background:#c8a24c;transition:width .8s ease}
.row.bump .amt b{animation:bump .6s}
@keyframes bump{30%{color:var(--gold);transform:scale(1.06)}}
.row .back{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .2s}
.row:hover .back,.row.sel .back{opacity:1}
.pool-foot{padding:16px;font-family:var(--mono);font-size:10.5px;color:#8f9488}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:56px 0 0;text-align:center}
.steps div{border-top:1px solid #2f6650;padding-top:28px}
.steps span{font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:600}
.steps h3{font-family:var(--display);font-weight:400;font-size:30px;text-transform:uppercase;margin:6px 0 10px}
.steps p{font-size:15px;line-height:1.6;color:#cfd2c6;max-width:300px;margin:0 auto}
.tt{margin-top:62px}
.tt-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:12px}
.tt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#0e2a20}
.tt-cell{background:var(--cell);padding:24px 18px;height:108px;position:relative;overflow:hidden}
.tt-cell h3{font-family:var(--display);font-weight:400;font-size:27px;text-transform:uppercase;color:var(--cream)}
.tt-cell p{font-family:var(--mono);font-size:11px;color:#c8bfa8;margin-top:8px}
.tt-cell .nx{position:absolute;right:16px;top:16px;font-family:var(--mono);font-size:10px;color:#6f8a7e;letter-spacing:.06em}
.tt-cell.now{background:#22362d}.tt-cell.now .nx{color:#3ddc84}
.free{text-align:center;color:#c9c8b9;font-size:15px;padding:30px 0 34px}
.free a{color:var(--gold);border-bottom:1px solid var(--gold)}

.foot{background:var(--ink);padding:44px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:#6d756f}

/* responsive */

@media (max-width:1100px){.stage{left:22%}.grid{width:auto}.card{width:calc(100%/4)}}
@media (max-width:760px){
  .links a:not(.btn-ghost){display:none}
  .hero{height:auto;min-height:640px}
  .stage{left:0;opacity:.16}
  .hero-copy{width:auto;padding:40px 0 60px}
  .hero h1{font-size:64px}
  .roster h2{font-size:52px;margin:0 0 36px}
  .card{width:50%}
  .bet-h{font-size:52px}
  .row .nm{font-size:19px}
  .steps{grid-template-columns:1fr;gap:28px}
  .tt-grid{grid-template-columns:1fr 1fr}
  .total span{font-size:48px}
  .foot-in{flex-direction:column;gap:12px}
}