@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{font-family:"Press Start 2P",cursive;line-height:1.6;font-weight:400;--primary-color: #00b4d8;--secondary-color: #0077b6;--accent-color: #ffd60a;--dark-bg: #001219;--card-bg: #003049;--text-light: #caf0f8;--text-white: #ffffff;color-scheme:dark;color:var(--text-light);background:linear-gradient(135deg,#001219,#003049);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#001219,#005f73,#003049);position:relative;overflow-x:hidden}body:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(0,180,216,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,214,10,.1) 0%,transparent 50%);pointer-events:none}#app{width:100%;max-width:1400px;padding:1rem}.landing-container{display:flex;flex-direction:column;gap:3rem;position:relative;z-index:1}.header{text-align:center;padding:2rem 0}.logo{height:10em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover,.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.game-title{font-size:3rem;font-weight:400;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-shadow:0 0 30px rgba(0,180,216,.3);line-height:1.4}.tagline{font-size:.9rem;color:var(--text-light);font-weight:400;letter-spacing:1px;line-height:1.8}.main-content{display:flex;flex-direction:column;gap:3rem;align-items:center}.game-preview{width:100%;max-width:1200px;background:var(--card-bg);border-radius:20px;padding:2rem;box-shadow:0 20px 60px #0000004d;border:2px solid rgba(0,180,216,.2)}.canvas-container{position:relative;width:100%;height:100%}#canvas{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:10px;width:100%;height:100%}.canvas-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;z-index:10}.spinner{width:50px;height:50px;border:4px solid rgba(0,0,0,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.canvas-placeholder p{font-size:1.2rem;color:#fff}.cta-section{text-align:center;max-width:1100px}.play-button{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:var(--text-white);border:none;border-radius:50px;padding:1.2rem 3rem;font-size:1rem;font-weight:400;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 30px #00b4d866;text-transform:uppercase;letter-spacing:1px}.play-button:hover{transform:translateY(-3px);box-shadow:0 15px 40px #00b4d899;background:linear-gradient(135deg,var(--secondary-color),var(--primary-color))}.play-button:active{transform:translateY(-1px)}.description{margin-top:1.5rem;font-size:.9rem;color:var(--text-light);line-height:2}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;width:100%;max-width:1200px;margin-top:2rem}.feature-card{background:var(--card-bg);padding:2rem;border-radius:15px;text-align:center;transition:all .3s ease;border:2px solid transparent}.feature-card:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 10px 30px #00b4d84d}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{color:var(--text-white);font-size:.9rem;margin-bottom:.5rem;font-weight:400}.feature-card p{color:var(--text-light);font-size:.65rem;line-height:1.8}.footer{text-align:center;padding:2rem 0;color:var(--text-light);font-size:.6rem;opacity:.7;line-height:1.8}@media (max-width: 768px){.game-title{font-size:2rem}.tagline{font-size:.7rem}.play-button{padding:1rem 2rem;font-size:.8rem}.features{grid-template-columns:1fr}}@media (max-width: 480px){.game-title{font-size:1.5rem}.game-preview{padding:1rem}}