@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap";:root{color:#f4f6fa;background:#080a0f;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -10%,#17202e 0,#080a0f 45%);min-height:100vh;margin:0}.app{flex-direction:column;min-height:100vh;display:flex}header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:3;background:#080a0cee;border-bottom:1px solid #202633;justify-content:space-between;align-items:center;gap:20px;height:76px;padding:0 7vw;display:flex;position:sticky;top:0}.brand{letter-spacing:-1.5px;white-space:nowrap;font-size:25px;font-weight:900}.brand span{color:#63a4ff}.brand b{color:#63a4ff;border:1px solid #63a4ff;border-radius:5px;margin-left:5px;padding:3px 6px;font-size:11px}.headerGame{letter-spacing:1.4px;color:#c6ccd6;background:#10151d;border:1px solid #2a3240;border-radius:999px;align-items:center;gap:7px;padding:8px 11px;font-size:10px;font-weight:800;display:flex}.statusDot{background:#f0a93f;border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #f0a93f}.tag{letter-spacing:2px;color:#737d8e;white-space:nowrap;font-size:10px}main{flex:1;align-items:center;width:min(1120px,92vw);margin:0 auto;display:flex}.hero,.wizard,.result{width:100%;padding:65px 0}.hero{grid-template-columns:minmax(0,1fr) 330px;align-items:center;gap:58px;display:grid}.heroCopy{min-width:0}.eyebrow{letter-spacing:2px;color:#63a4ff;margin-bottom:18px;font-size:11px;font-weight:800}.hero h1,.wizard h1,.result h1{letter-spacing:-3px;margin:0 0 22px;font-size:clamp(38px,6vw,70px);line-height:.98}.hero p{color:#9da6b5;max-width:650px;font-size:19px;line-height:1.6}.hero p em{color:#fff;font-style:normal}.hero button,.nav button,.actions button{color:#06101f;letter-spacing:.6px;cursor:pointer;background:#63a4ff;border:0;border-radius:9px;padding:15px 20px;font-weight:900}.mascotCard{background:linear-gradient(#141b25,#0c1118);border:1px solid #30394a;border-radius:20px;padding:14px;position:relative;overflow:hidden;box-shadow:0 26px 70px #0008}.mascotCard:before{content:"";pointer-events:none;background:radial-gradient(circle,#f0a93f33,#0000 66%);position:absolute;inset:-20% 5% 40%}.mascotCard img{image-rendering:auto;border:1px solid #313a48;border-radius:13px;width:100%;height:auto;margin:0 auto;display:block;position:relative}.mascotLabel{justify-content:space-between;align-items:end;gap:12px;padding:3px 2px 12px;display:flex;position:relative}.mascotLabel span{letter-spacing:1.4px;color:#697485;font-size:8px}.mascotLabel strong{letter-spacing:1px;color:#f0a93f;text-align:right;font-size:9px}.mascotTagline{text-align:center;letter-spacing:1.2px;color:#f4f6fa;padding:12px 2px 3px;font-size:10px;font-style:italic;font-weight:900}.cards{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:55px;display:grid}.cards div{background:#0e121a;border:1px solid #242b37;border-radius:12px;padding:18px;font-size:22px}.cards strong{margin:12px 0 4px;font-size:13px;display:block}.cards small{color:#747e8d;font-size:11px}.progress{letter-spacing:2px;color:#6f7887;margin-bottom:38px;font-size:10px}.progress span{background:#202735;width:100%;height:3px;margin-top:12px;display:block}.options{grid-template-columns:repeat(2,1fr);gap:12px;margin:30px 0 45px;display:grid}.options button{color:#fff;text-align:left;cursor:pointer;background:#0e121a;border:1px solid #252d3a;border-radius:12px;min-height:75px;padding:22px}.options button:hover,.options .selected{background:#111c2d;border-color:#63a4ff}.options strong{font-size:15px;display:block}.options small{color:#7f8999;margin-top:7px;display:block}.nav{gap:10px;display:flex}.nav .ghost,.actions .ghost{color:#aab2bf;background:0 0;border:1px solid #2a3240}.result{max-width:900px}.match{color:#7f8998;letter-spacing:1px;background:#0e121a;border:1px solid #263041;border-radius:12px;align-items:center;gap:14px;margin:25px 0;padding:16px;font-size:11px;display:flex}.match strong{color:#6fe0a2;font-size:22px}.match span{margin-left:auto}.loadouts{grid-template-columns:1fr 1fr;gap:15px;display:grid}.weapon{background:#0d1118;border:1px solid #293241;border-radius:14px;padding:23px}.label{letter-spacing:2px;color:#63a4ff;font-size:10px;font-weight:800}.weapon h2{margin:10px 0;font-size:28px}.badges span{color:#aab3c0;border:1px solid #2d3747;border-radius:99px;margin-right:6px;padding:5px 8px;font-size:10px}.weapon ul{margin:22px 0 0;padding:0;list-style:none}.weapon li{border-top:1px solid #222a35;padding:11px 0;font-size:13px}.weapon li small{color:#697383;letter-spacing:1px;margin-bottom:4px;font-size:9px;display:block}.why{background:#10151e;border:1px solid #273140;border-radius:14px;margin:15px 0;padding:24px}.why h2{letter-spacing:1px;font-size:12px}.why p{color:#9da7b5;font-size:14px;line-height:1.6}.actions{gap:10px;margin-top:18px;display:flex}.note{color:#5e6877;margin-top:24px;font-size:10px;line-height:1.5}footer{text-align:center;color:#4f5867;border-top:1px solid #171d27;margin-top:40px;padding:25px;font-size:10px}@media (width<=900px){.headerGame{display:none}.hero{grid-template-columns:1fr 260px;gap:30px}}@media (width<=720px){header{padding:0 4vw}.tag{display:none}.hero,.wizard,.result{padding:45px 0}.hero{grid-template-columns:1fr;gap:34px}.hero h1,.wizard h1,.result h1{letter-spacing:-2px}.mascotCard{width:100%;max-width:310px;margin:0 auto}.cards,.options,.loadouts{grid-template-columns:1fr}.cards{margin-top:35px}.match{flex-wrap:wrap}.match span{width:100%;margin-left:0}}
