:root{--bg:#080d0c;--surface:#111b18;--surface2:#17231f;--line:#2b3a34;--lime:#d4ff45;--lime2:#aee631;--white:#f3f7ee;--muted:#8c9e95;--gold:#f9cb67}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer}#app{min-height:100vh;overflow:hidden;background:radial-gradient(ellipse 80% 40% at 51% 0%,#183325 0%,transparent 70%),var(--bg)}.topbar{height:78px;border-bottom:1px solid #324237;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,24px);background:#0d1713cc}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:39px;border:2px solid var(--lime);display:grid;place-items:center;color:var(--lime);font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:19px;transform:skew(-8deg)}.mark-slash{color:var(--white)}.brand-name{font-family:'Barlow Condensed',sans-serif;font-size:23px;letter-spacing:1.8px;font-weight:900}.brand-name b{color:var(--lime)}.top-actions{display:flex;align-items:center;gap:22px}.season-chip{font-family:'Barlow Condensed';font-weight:700;letter-spacing:1.5px;font-size:14px;color:#c9d7cc}.season-chip i,.dot{display:inline-block;background:var(--lime);border-radius:50%;width:6px;height:6px;box-shadow:0 0 10px var(--lime);vertical-align:middle;margin-right:7px}.sep{color:#526256;margin:0 4px}.wallet,.draft-balance{display:flex;align-items:center;gap:8px;background:#17231a;border:1px solid #405033;padding:9px 14px;border-radius:3px;font-family:'Barlow Condensed';font-size:13px;letter-spacing:1px}.wallet strong,.draft-balance strong{font-size:20px;color:var(--white)}.wallet>span:last-child{color:var(--muted)}.coin-icon{display:inline-grid;place-items:center;background:linear-gradient(140deg,#ffe7a2,#d79526);border:2px solid #f7d275;color:#5d3700;border-radius:50%;width:22px;height:22px;font-size:13px;font-style:normal;box-shadow:0 0 14px #ffca553b}.icon-button{border:1px solid #425345;background:transparent;color:var(--lime);border-radius:50%;width:34px;height:34px;font-size:20px}.hero{max-width:1440px;margin:auto;padding:64px max(4vw,24px) 48px;background:radial-gradient(ellipse 35% 110% at 93% 100%,#51683444,transparent),repeating-linear-gradient(115deg,transparent 0 110px,#ffffff06 111px 112px);position:relative}.hero:after{content:'SA';position:absolute;right:5%;top:0;font-family:'Barlow Condensed';font-size:290px;line-height:1;font-weight:900;color:#d4ff450b;transform:skew(-12deg);pointer-events:none}.eyebrow,.section-kicker{font-family:'Barlow Condensed';font-weight:800;letter-spacing:3px;font-size:13px;color:var(--lime)}.eyebrow .line{display:inline-block;width:29px;height:2px;background:var(--lime);vertical-align:middle;margin-right:10px}.hero h1{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(66px,8vw,128px);font-style:italic;letter-spacing:-2px;line-height:.92;margin:15px 0 16px;position:relative;z-index:1}.hero h1 em{color:var(--lime);font-style:inherit}.hero p{color:#b8c8bc;font-size:16px;margin:0}.hero-meta{display:flex;gap:52px;margin-top:34px}.hero-meta span{display:flex;flex-direction:column;gap:1px}.hero-meta b{font-family:'Barlow Condensed';font-size:27px;letter-spacing:1px}.hero-meta small{color:var(--muted);font:700 11px 'Barlow Condensed';letter-spacing:2px}.shell{max-width:1440px;margin:0 auto;padding:0 max(4vw,24px) 90px}.tabs{display:flex;border-bottom:1px solid #35463b;gap:4px}.tab{border:0;background:none;color:#95a99b;padding:19px 25px;font:800 17px 'Barlow Condensed';letter-spacing:1.3px;position:relative;white-space:nowrap}.tab span{font-size:11px;color:#607568;margin-right:9px}.tab.active{color:var(--lime)}.tab.active:after{content:'';height:3px;background:var(--lime);position:absolute;bottom:-2px;left:0;right:0;box-shadow:0 0 14px #d4ff4599}.tab b{display:inline-grid;place-items:center;margin-left:8px;background:#314636;color:var(--lime);border-radius:12px;min-width:19px;height:19px;font-size:12px}.panel{display:none}.panel.active{display:block}.section-top{display:flex;justify-content:space-between;align-items:end;margin:40px 0 22px}.section-top h2{margin:8px 0 0;font:900 clamp(34px,4.5vw,60px)/.95 'Barlow Condensed';font-style:italic;letter-spacing:.4px}.section-top h2 span{color:var(--lime)}.match-tag{font:800 12px 'Barlow Condensed';letter-spacing:2px;color:#bccfc0;border:1px solid #415344;padding:9px 12px}.match-frame{border:1px solid #506544;padding:7px;background:#15221a;box-shadow:0 25px 80px #0009}.stadium{height:min(56vw,620px);min-height:410px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#335943,#102419 75%)}#game{position:absolute;inset:0}#game canvas{display:block;width:100%;height:100%}.hud-score,.hud-clock{position:absolute;z-index:4;top:16px;left:50%;transform:translateX(-50%);background:#07120edb;backdrop-filter:blur(8px);border:1px solid #6c885b;color:#fff}.hud-score{display:flex;align-items:center;height:50px;box-shadow:0 9px 25px #0008}.hud-team{font:900 17px 'Barlow Condensed';letter-spacing:1.2px;display:flex;align-items:center;gap:10px;padding:0 15px;min-width:145px}.hud-team.away{justify-content:end}.crest{background:var(--lime);color:#14210e;padding:7px 5px;font:900 14px 'Barlow Condensed';transform:skew(-7deg)}.crest.alt{background:#f6a56a;color:#311408}.score-main{display:flex;align-items:center;gap:12px;background:#17251b;height:100%;padding:0 18px;font:900 30px 'Barlow Condensed'}.score-dash{color:#7f9785}.hud-clock{top:71px;display:flex;align-items:center;gap:10px;border-color:#354b37;padding:5px 13px;font:700 13px 'Barlow Condensed';letter-spacing:1.2px;color:#cbdbce}.hud-clock #match-clock{color:var(--lime);font-size:17px}.clock-divider{height:13px;border-left:1px solid #607060}.game-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(90deg,#08140dc9,#06110ba8);padding:20px}.game-overlay.hidden{display:none}.overlay-icon{font-size:45px;filter:drop-shadow(0 0 20px #d4ff4560);margin-bottom:15px}.overlay-kicker{font:800 13px 'Barlow Condensed';letter-spacing:3px;color:var(--lime)}.game-overlay h3{font:900 clamp(42px,6vw,78px)/.95 'Barlow Condensed';font-style:italic;margin:12px 0}.game-overlay h3 em{color:var(--lime);font-style:inherit}.game-overlay p{color:#c1d0c3;margin:0 0 27px}.primary-btn{border:0;background:var(--lime);color:#0f1b0c;padding:16px 24px;font:900 19px 'Barlow Condensed';letter-spacing:1.3px;box-shadow:0 8px 24px #a5ed3550;transform:skew(-5deg);transition:transform .15s,background .15s}.primary-btn:hover{background:#efff8d;transform:skew(-5deg) translateY(-3px)}.primary-btn span{margin-left:30px}.goal-flash{position:absolute;z-index:7;top:35%;left:0;right:0;text-align:center;font:900 clamp(70px,13vw,175px) 'Barlow Condensed';font-style:italic;color:var(--lime);text-shadow:0 0 60px #d4ff4590;pointer-events:none;opacity:0;transform:scale(.6);transition:.35s}.goal-flash.show{opacity:1;transform:scale(1)}.player-label{position:absolute;z-index:4;bottom:14px;left:18px;font:800 14px 'Barlow Condensed';letter-spacing:1.4px;background:#07120ddf;border-left:3px solid var(--lime);padding:8px 12px}.under-game{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}.control-guide{display:flex;gap:17px;flex-wrap:wrap}.control-guide span{font:700 12px 'Barlow Condensed';letter-spacing:1px;color:#9fb3a4;display:flex;align-items:center;gap:4px}.control-guide kbd{border:1px solid #53695a;color:#e4f2df;background:#1b2c20;padding:4px 6px;font:700 10px 'DM Sans';border-radius:2px}.reward-note{font:700 12px 'Barlow Condensed';letter-spacing:1px;color:#9eb09e}.reward-note b{color:var(--lime)}.reward-note span{margin:0 5px}.match-bottom{border-top:1px solid #304438;margin-top:32px;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.info-card{display:flex;align-items:center;gap:16px}.info-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--lime);font-size:26px;border:1px solid #586945}.info-card div:last-child{display:flex;flex-direction:column;gap:4px}.info-card strong{font:800 15px 'Barlow Condensed';letter-spacing:1.3px}.info-card span{font-size:13px;color:var(--muted)}.text-link{background:none;border:0;color:var(--lime);font:800 15px 'Barlow Condensed';letter-spacing:1.4px}.text-link span{margin-left:12px}.ovr-display{border:1px solid #647b3b;background:#1d2d1c;padding:9px 13px;display:flex;gap:12px;align-items:center}.ovr-display small{font:800 11px 'Barlow Condensed';letter-spacing:1.2px;color:#a9c693}.ovr-display strong{font:900 42px 'Barlow Condensed';color:var(--lime)}.squad-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:28px}.pitch-board{height:580px;background:repeating-linear-gradient(0deg,#244a34 0 73px,#265039 73px 146px);border:1px solid #83a56b;position:relative;overflow:hidden;box-shadow:inset 0 0 70px #06180d99}.pitch-board:before{content:'';position:absolute;inset:24px;border:2px solid #d2ebc15c}.pitch-line,.pitch-circle,.pitch-box{position:absolute;border-color:#d2ebc15c}.pitch-mid{top:50%;left:24px;right:24px;border-top:2px solid}.pitch-circle{width:115px;height:115px;border:2px solid;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.pitch-box{width:48%;height:105px;border:2px solid;left:26%}.pitch-box.top{top:24px;border-top:0}.pitch-box.bottom{bottom:24px;border-bottom:0}.pitch-board-label{position:absolute;bottom:14px;left:18px;font:800 18px 'Barlow Condensed';letter-spacing:2px;text-shadow:0 2px 8px #000}.pitch-board-label span{color:var(--lime);font-size:11px;margin-left:9px}.formation{position:absolute;inset:0}.formation-slot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;color:#fff;display:flex;align-items:center;flex-direction:column;gap:3px;z-index:2}.formation-slot .mini-card{width:83px;height:106px;background:linear-gradient(145deg,#e8d891,#aa7936 70%,#4c341b);border:2px solid #ffeab0;clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%);padding:8px 5px;text-align:center;color:#1f1a10;box-shadow:0 7px 20px #0009}.mini-card strong{font:900 28px 'Barlow Condensed';display:block;line-height:1}.mini-card i{font:900 12px 'Barlow Condensed';font-style:normal}.mini-card .avatar{font-size:28px;line-height:32px;display:block}.formation-slot label{font:900 12px 'Barlow Condensed';letter-spacing:.6px;text-shadow:0 2px 5px #000;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.formation-slot.selected .mini-card{outline:3px solid var(--lime);outline-offset:3px}.roster-side{background:#111c17;border:1px solid #304337;padding:22px}.roster-heading{display:flex;justify-content:space-between;font:900 21px 'Barlow Condensed';letter-spacing:1.3px}.roster-heading span{font-size:12px;color:var(--lime);align-self:center}.roster-side p{font-size:13px;line-height:1.5;color:#8ca391;margin:8px 0 20px}.roster-list{display:flex;flex-direction:column;gap:7px;max-height:490px;overflow:auto}.roster-player{width:100%;display:flex;align-items:center;text-align:left;background:#1c2a21;border:1px solid #344b39;padding:8px 10px;color:var(--white);gap:10px;transition:background .15s}.roster-player:hover,.roster-player.selected{background:#2d422b;border-color:var(--lime)}.roster-avatar{font-size:24px;width:32px;text-align:center}.roster-name{display:flex;flex-direction:column;flex:1}.roster-name strong{font:800 16px 'Barlow Condensed';letter-spacing:.4px}.roster-name small{font:700 11px 'Barlow Condensed';color:#9cae9d;letter-spacing:1px}.roster-ovr{font:900 24px 'Barlow Condensed';color:var(--lime)}.draft-balance small{color:var(--muted);font-size:12px}.draft-intro{display:grid;grid-template-columns:1fr 1fr;min-height:410px;background:radial-gradient(ellipse at 68% 55%,#3a5827 0%,transparent 43%),linear-gradient(120deg,#1c2d1d,#101d15 70%);border:1px solid #475c3c;overflow:hidden}.draft-copy{padding:50px 6vw}.draft-badge{display:inline-block;border:1px solid #849e57;background:#273922;color:var(--lime);font:800 13px 'Barlow Condensed';letter-spacing:2px;padding:8px 10px}.draft-copy h3{font:900 clamp(47px,5vw,75px)/.94 'Barlow Condensed';font-style:italic;margin:17px 0}.draft-copy h3 em{color:var(--lime);font-style:inherit}.draft-copy p{max-width:440px;color:#a9bcab;line-height:1.6;font-size:14px}.draft-copy .primary-btn{margin-top:17px}.draft-copy .primary-btn span{margin-left:45px;font-size:16px}.draft-copy small{display:block;margin-top:14px;color:#859e86;font-size:12px}.draft-visual{position:relative;min-height:350px;display:grid;place-items:center}.draft-halo{position:absolute;width:480px;height:480px;background:radial-gradient(circle,#d4ff453a,transparent 67%);filter:blur(5px)}.mock-card{position:absolute;width:180px;height:250px;clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%);background:linear-gradient(145deg,#d4c985,#996e33 70%,#4a321d);border:5px solid #f7db83;display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:0 25px 40px #0009}.mock-card span{font:900 145px 'Barlow Condensed';color:#fbefb9;text-shadow:0 0 25px #ffeaba}.mock-card small{font:800 14px 'Barlow Condensed';letter-spacing:2px;color:#2d2214;margin-top:-15px}.mock-card.back.left{transform:translate(-110px,20px) rotate(-18deg);filter:brightness(.55)}.mock-card.back.right{transform:translate(110px,20px) rotate(18deg);filter:brightness(.55)}.mock-card.front{transform:translateY(-14px)}.draft-results{margin-top:25px}.draft-results.hidden{display:none}.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font:800 15px 'Barlow Condensed';letter-spacing:1.5px;color:var(--lime)}.results-head small{font-size:12px;color:var(--muted)}.draft-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.draft-card{border:1px solid #d2b66d;background:radial-gradient(circle at 50% 5%,#fbe9a9,#a37c3d 58%,#47321d);min-height:285px;color:#241c12;padding:18px;position:relative;overflow:hidden;text-align:left;transition:transform .2s,box-shadow .2s}.draft-card:hover{transform:translateY(-8px);box-shadow:0 13px 35px #d4ff4536}.draft-card:before{content:'';position:absolute;inset:8px;border:1px solid #ffefb56b;pointer-events:none}.draft-card .card-top{display:flex;justify-content:space-between;align-items:start}.draft-card .rating{font:900 50px/.8 'Barlow Condensed'}.draft-card .position{font:900 16px 'Barlow Condensed'}.draft-card .flag{font-size:26px}.draft-card .big-avatar{font-size:84px;display:block;text-align:center;filter:drop-shadow(0 9px 6px #43290c77)}.draft-card .card-name{font:900 28px 'Barlow Condensed';display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draft-card .card-detail{font:700 12px 'Barlow Condensed';letter-spacing:1px;display:block;margin:4px 0 12px}.draft-card .sign{border-top:1px solid #3a2b15;padding-top:9px;font:900 14px 'Barlow Condensed';letter-spacing:1px;display:block}.draft-foot{border-top:1px solid #304236;margin-top:30px;padding-top:16px;color:#718875;font-size:12px}.draft-foot span{color:var(--lime)}footer{border-top:1px solid #273a2e;padding:22px max(4vw,24px);display:flex;justify-content:space-between;align-items:center;color:#6f8775;font:800 12px 'Barlow Condensed';letter-spacing:1.4px}footer .brand-name{font-size:16px;color:var(--white)}.toast{position:fixed;z-index:30;bottom:25px;right:25px;background:var(--lime);color:#15220f;padding:13px 20px;font:900 18px 'Barlow Condensed';letter-spacing:1px;box-shadow:0 12px 30px #0009;transform:translateY(100px);opacity:0;transition:.3s}.toast.show{transform:translateY(0);opacity:1}.touch-controls{display:none;position:absolute;z-index:5;bottom:17px;left:15px;right:15px;justify-content:space-between;pointer-events:none}.touch-controls button{pointer-events:auto;border:1px solid #b6d4a499;background:#0b1a10ae;color:#fff;border-radius:5px;min-width:43px;min-height:43px;font:900 13px 'Barlow Condensed'}.dpad{display:flex;align-items:center;flex-direction:column}.dpad div{display:flex}.touch-actions{display:flex;align-items:end;gap:8px}.touch-actions button{border-radius:50%;width:56px;height:56px;background:#d4ff45d9;color:#1b260d}.touch-actions button:last-child{width:68px;height:68px;background:#f3ba62e8}.stadium.playing .touch-controls{display:none}@media(max-width:900px){.squad-layout{grid-template-columns:1fr}.pitch-board{height:540px}.roster-side{padding:18px}.draft-intro{grid-template-columns:1fr}.draft-visual{min-height:280px}.draft-copy{padding:35px}.mock-card{width:145px;height:205px}.mock-card span{font-size:110px}.mock-card.back.left{transform:translate(-90px,20px) rotate(-18deg)}.mock-card.back.right{transform:translate(90px,20px) rotate(18deg)}}@media(max-width:650px){.topbar{height:66px}.brand-name{font-size:18px}.brand-mark{height:33px;width:33px;font-size:16px}.season-chip,.icon-button,.wallet>span:last-child{display:none}.top-actions{gap:6px}.wallet{padding:7px}.hero{padding-top:42px}.hero h1{font-size:62px}.hero:after{font-size:170px;top:20px}.hero p{font-size:14px;max-width:300px}.hero-meta{gap:30px}.shell{padding-bottom:55px}.tabs{overflow:auto}.tab{padding:16px 13px;font-size:14px}.tab span{display:none}.section-top{margin-top:30px}.match-tag{display:none}.stadium{height:440px;min-height:0}.hud-score{height:43px;top:10px}.hud-team{min-width:96px;font-size:12px;padding:0 7px;gap:4px}.crest{font-size:11px;padding:6px 4px}.score-main{font-size:24px;gap:6px;padding:0 9px}.hud-clock{top:57px}.control-guide{gap:7px}.control-guide span{font-size:10px}.control-guide span:nth-child(4){display:none}.match-bottom{align-items:start;flex-direction:column}.pitch-board{height:470px}.formation-slot .mini-card{width:60px;height:82px;padding:5px}.mini-card strong{font-size:21px}.mini-card .avatar{font-size:19px;line-height:22px}.formation-slot label{font-size:10px}.draft-balance{padding:6px}.draft-balance small{display:none}.draft-copy{padding:28px}.draft-options{grid-template-columns:1fr}.draft-card{min-height:220px}.draft-card .big-avatar{font-size:60px}.results-head small{display:none}footer{flex-wrap:wrap;gap:10px}footer span:last-child{display:none}.stadium.playing .touch-controls{display:flex}.player-label{bottom:112px;font-size:11px}}