@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@400;500;700&display=swap";:root{--bg-dark:#0f172a;--bg-darker:#020617;--accent:#3b82f6;--accent-glow:#3b82f680;--text-main:#f8fafc;--text-muted:#94a3b8;--glass-bg:#ffffff0d;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-darker);color:var(--text-main);background-image:radial-gradient(circle at 15%,#3b82f626,#0000 25%),radial-gradient(circle at 85% 30%,#ec489926,#0000 25%);min-height:100vh;font-family:Inter,sans-serif;overflow-x:hidden}h1,h2,h3,h4{font-family:Outfit,sans-serif}.hero{text-align:center;padding:4rem 2rem 2rem;animation:1s cubic-bezier(.16,1,.3,1) forwards fadeInDown}.title-glow{background:linear-gradient(135deg,#60a5fa,#c084fc,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:4rem;font-weight:800;display:inline-block;position:relative}.title-glow:after{content:"CANNON BATTLE";z-index:-1;background:inherit;-webkit-text-fill-color:transparent;filter:blur(20px);opacity:.6;-webkit-background-clip:text;position:absolute;top:0;left:0}.subtitle{color:var(--text-muted);max-width:600px;margin:0 auto 2rem;font-size:1.25rem;line-height:1.6}.game-wrapper{perspective:1000px;opacity:0;justify-content:center;padding:0 2rem;animation:1s cubic-bezier(.16,1,.3,1) .2s forwards fadeInUp;display:flex}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);border-radius:24px;padding:24px;transition:transform .3s,box-shadow .3s;box-shadow:0 25px 50px -12px #00000080,inset 0 1px 1px #ffffff1a}.glass-panel:hover{box-shadow:0 35px 60px -15px #0009, 0 0 30px var(--accent-glow), inset 0 1px 1px #fff3;transform:translateY(-5px)}canvas{border-radius:12px;display:block;box-shadow:0 10px 30px #000c}.cta-section{text-align:center;border-top:1px solid var(--glass-border);background:linear-gradient(#0000,#0f172acc);max-width:800px;margin:4rem auto;padding:3rem 2rem}.cta-title{margin-bottom:1rem;font-size:2rem}.cta-button{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:9999px;align-items:center;gap:.75rem;margin-top:1.5rem;padding:1rem 2rem;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.cta-button:hover{color:#000;background:#fff;transform:scale(1.05);box-shadow:0 0 20px #fff6}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}