.app{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}.header{background:linear-gradient(180deg,rgba(15,23,42,.5) 0,rgba(15,23,42,.1) 60%,transparent 100%),linear-gradient(135deg,#5a32ff,#ff4b91,#ffb347);color:#fff;padding:1rem 0;box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;margin:0}.nav{display:flex;gap:2rem}.nav a{color:#fff;text-decoration:none;font-weight:500;transition:opacity .2s}.nav a:hover{opacity:.8}.menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:5px}.menu-toggle span{width:25px;height:3px;background:#fff;border-radius:2px;transition:all .3s}.hero{background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.15) 0,transparent 55%),radial-gradient(circle at 100% 100%,rgba(255,255,255,.12) 0,transparent 55%),linear-gradient(135deg,#5a32ff,#ff4b91,#ffb347);color:#fff;padding:5rem 0;text-align:left;flex:1}.hero-layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:3rem;align-items:center}.hero-layout>.hero-buttons{grid-column:1 / -1;margin-top:2rem;justify-self:center}.hero-left{display:flex;flex-direction:column;align-items:center;gap:1rem}.hero-content{max-width:640px}.hero-icon{width:140px;height:140px;border-radius:32px;margin-bottom:.5rem;display:block;box-shadow:0 16px 40px #00000059;background:#00000040}.hero-badge{padding:.35rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:#060a1e59;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2}.hero-subtitle{font-size:1.25rem;margin-bottom:2rem;opacity:.95;line-height:1.6}.hero-buttons{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;font-size:.85rem}.hero-tags span{padding:.3rem .75rem;border-radius:999px;background:#101840b3;border:1px solid rgba(255,255,255,.2)}.btn-download{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem}.btn-subtitle{font-size:.8rem;opacity:.85}.btn{display:inline-block;padding:.75rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s;border:none;cursor:pointer;font-size:1rem}.btn-primary{background:#fff;color:#667eea}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.btn-secondary{background:transparent;color:#fff;border:2px solid white}.btn-secondary:hover{background:#fff;color:#667eea}.btn-large{padding:1rem 2.5rem;font-size:1.1rem}.about{padding:5rem 0;background:radial-gradient(circle at top,#f7f5ff 0,#f5f7ff 26%,#fdfbff 60%,#fff)}.section-title{font-size:2.5rem;text-align:center;margin-bottom:3rem;color:#333}.about-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.about-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 30px #0f172a1f;transition:transform .3s}.about-card:hover{transform:translateY(-6px)}.about-card h3{font-size:1.5rem;margin-bottom:1rem;color:#667eea}.about-card p{color:#666;line-height:1.6}.accent-blue{border-top:4px solid #4f46e5}.accent-green{border-top:4px solid #10b981}.accent-purple{border-top:4px solid #a855f7}.accent-orange{border-top:4px solid #fb923c}.section-intro{max-width:640px;margin:0 auto 2.5rem;text-align:center;color:#555}.colorful-title{background:linear-gradient(90deg,#4f46e5,#ec4899,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}.modes{padding:5rem 0;background:radial-gradient(circle at top,#f7f5ff 0,#f5f7ff 26%,#fdfbff 60%,#fff)}.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.mode-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 30px #0f172a1f;transition:transform .3s}.mode-card:hover{transform:translateY(-6px)}.mode-card h3{font-size:1.5rem;margin-bottom:1rem;color:#667eea}.mode-card ul{list-style:none;padding:0}.mode-card ul li{color:#666;line-height:1.6;position:relative;padding:.5rem 0 .5rem 1.5rem}.mode-card ul li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.2rem}.mode-casual{border-top:4px solid #4f46e5}.mode-challenge{border-top:4px solid #10b981}.mode-skills{border-top:4px solid #a855f7}.screenshots{padding:5rem 0;background:#fff}.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.screenshot-frame{padding:10px;border-radius:16px;background:linear-gradient(145deg,#fff,#eef1ff);box-shadow:0 8px 20px #0f172a14,0 0 0 1px #94a3b840}.screenshot{width:100%;max-height:420px;height:auto;border-radius:12px;box-shadow:0 6px 18px #0f172a2e;transition:transform .3s,box-shadow .3s;object-fit:contain;background:radial-gradient(circle at top,#020617 0,#020617 40%,#0f172a)}.screenshot:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 14px 32px #0f172a73}.screenshots-note{text-align:center;color:#666;font-size:.95rem;margin-top:2rem}.screenshots-note a{color:#667eea;text-decoration:none;font-weight:600}.screenshots-note a:hover{text-decoration:underline}.download{padding:5rem 0;background:radial-gradient(circle at top,#eef2ff 0,#fdf2ff 35%,#fff);text-align:center}.download-text{font-size:1.25rem;color:#666;margin-bottom:2rem}.download-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.footer{background:#333;color:#fff;padding:2rem 0;text-align:center;margin-top:auto}.footer p{margin:0;opacity:.8}@media (max-width: 768px){.menu-toggle{display:flex}.nav{position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,#0f172ae6 0,#0f172acc 40%,#0f172af2),linear-gradient(135deg,#5a32ff,#ff4b91,#ffb347);flex-direction:column;padding:1rem;gap:1rem;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s}.nav-open{transform:translateY(0);opacity:1;visibility:visible}.hero{text-align:center}.hero-layout{grid-template-columns:1fr;text-align:center}.hero-content{margin:0 auto}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.1rem}.section-title{font-size:2rem}.about-content,.modes-grid{grid-template-columns:1fr}.screenshots-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}}.join-room-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.15) 0,transparent 55%),radial-gradient(circle at 100% 100%,rgba(255,255,255,.12) 0,transparent 55%),linear-gradient(135deg,#5a32ff,#ff4b91,#ffb347);color:#fff;padding:5rem 0;text-align:center;min-height:calc(100vh - 200px)}.join-room-content h1{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2}.join-room-content p{font-size:1.25rem;opacity:.95;line-height:1.6;max-width:600px;padding:0 2rem}@media (max-width: 768px){.join-room-content h1{font-size:2rem}.join-room-content p{font-size:1.1rem}}.multiplayer{padding:5rem 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.multiplayer .section-title{color:#fff}.multiplayer .section-intro{color:#fffffff2}.multiplayer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.multiplayer-card{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);transition:transform .3s,background .3s}.multiplayer-card:hover{transform:translateY(-6px);background:#fff3}.multiplayer-card h3{font-size:1.5rem;margin-bottom:1rem;color:#fff}.multiplayer-card p{color:#ffffffe6;line-height:1.6;margin-bottom:1.5rem}.multiplayer-card ul{list-style:none;padding:0;margin-bottom:1.5rem}.multiplayer-card ul li{color:#ffffffe6;position:relative;padding:.5rem 0 .5rem 1.5rem}.multiplayer-card ul li:before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:700}.multiplayer-card .btn{margin-top:1rem}.multiplayer-cta{text-align:center;margin-top:2rem}.multiplayer-hero{background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.15) 0,transparent 55%),radial-gradient(circle at 100% 100%,rgba(255,255,255,.12) 0,transparent 55%),linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4rem 0;text-align:center}.multiplayer-hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2}.multiplayer-hero-subtitle{font-size:1.25rem;opacity:.95}.multiplayer-actions{padding:4rem 0;background:radial-gradient(circle at top,#f7f5ff 0,#f5f7ff 26%,#fdfbff 60%,#fff)}.multiplayer-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:2rem}.multiplayer-action-card{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 10px 30px #0f172a1f;text-align:center;transition:transform .3s,box-shadow .3s}.multiplayer-action-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px #0f172a33}.action-icon{font-size:4rem;margin-bottom:1rem}.multiplayer-action-card h2{font-size:1.75rem;margin-bottom:1rem;color:#333}.multiplayer-action-card p{color:#666;line-height:1.6;margin-bottom:2rem}.join-room-input-group{display:flex;gap:.75rem;margin-top:1rem}.room-id-input{flex:1;padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;font-weight:600;text-align:center;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s}.room-id-input:focus{outline:none;border-color:#667eea}.copy-feedback{font-size:.9rem;font-weight:600}.multiplayer-info{padding:4rem 0;background:#fff}.info-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;margin-top:3rem}.info-step{text-align:center;position:relative}.step-number{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 4px 12px #667eea4d}.info-step h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.info-step p{color:#666;line-height:1.6}.multiplayer-download{padding:4rem 0;background:radial-gradient(circle at top,#eef2ff 0,#fdf2ff 35%,#fff);text-align:center}@media (max-width: 768px){.multiplayer-hero-title{font-size:2.5rem}.multiplayer-hero-subtitle{font-size:1.1rem}.multiplayer-content,.multiplayer-actions-grid{grid-template-columns:1fr}.join-room-input-group{flex-direction:column}.info-steps{grid-template-columns:1fr;gap:2rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#333}#root{min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{scroll-behavior:smooth}