:root{--primary-color: #4f46e5;--primary-dark: #3730a3;--accent-color: #f59e0b;--bg-color: #1f2937;--surface-color: #374151;--text-primary: #f9fafb;--text-secondary: #d1d5db;--success-color: #10b981;--danger-color: #ef4444;--border-radius: 12px;--shadow: 0 10px 25px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,var(--bg-color) 0%,#111827 100%);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.hero-header{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);padding:4rem 0;text-align:center;position:relative;overflow:hidden}.hero-header:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="15" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="5" r="1" fill="rgba(255,255,255,0.1)"/></svg>');animation:float 20s infinite linear}@keyframes float{0%{transform:translate(-100px)}to{transform:translate(100px)}}.game-title{font-size:4rem;font-weight:800;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);position:relative;z-index:1}.game-subtitle{font-size:1.5rem;font-weight:300;opacity:.9;position:relative;z-index:1}.main-content{padding:0}.game-description{margin-bottom:4rem}.cozy-setting{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.description-content h2{font-size:2.5rem;margin-bottom:2rem;color:var(--accent-color)}.steps{margin-bottom:3rem}.step{display:flex;align-items:flex-start;margin-bottom:2rem;padding:1.5rem;background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow);transition:transform .3s ease}.step:hover{transform:translateY(-2px)}.step-icon{font-size:2.5rem;margin-right:1.5rem;flex-shrink:0}.step-content h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--accent-color)}.step-content p{color:var(--text-secondary)}.game-features h3{font-size:1.5rem;margin-bottom:1rem;color:var(--accent-color)}.features-list{list-style:none}.features-list li{color:var(--text-secondary);position:relative;padding:.5rem 0 .5rem 1.5rem}.features-list li:before{content:"✓";position:absolute;left:0;color:var(--success-color);font-weight:700}.cozy-illustration{display:flex;justify-content:center;align-items:center}.living-room{position:relative;background:linear-gradient(145deg,#2d3748,#1a202c);border-radius:20px;padding:2rem;box-shadow:var(--shadow);width:100%;max-width:400px}.tv-screen{background:#000;border-radius:10px;padding:1rem;margin-bottom:2rem;border:8px solid #4a5568;position:relative}.guesstheword-preview{color:#fff;text-align:center}.word-display{font-size:1.5rem;font-family:Courier New,monospace;margin-bottom:1rem;letter-spacing:.5rem}.guesstheword-svg{width:80px;height:80px;margin:0 auto}.couch{display:flex;justify-content:space-around;align-items:center;background:linear-gradient(145deg,#8b4513,#654321);height:60px;border-radius:30px;position:relative;box-shadow:0 4px 8px #0000004d}.phone{font-size:1.5rem;animation:bounce 2s infinite}.phone-1{animation-delay:0s}.phone-2{animation-delay:.5s}.phone-3{animation-delay:1s}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}.game-setup{background:var(--surface-color);border-radius:var(--border-radius);padding:3rem;box-shadow:var(--shadow);margin-bottom:2rem}.game-setup.prominent{background:var(--surface-color);margin:1rem auto 1.5rem;max-width:800px;padding:1.5rem}.game-setup.prominent .setup-content h2{font-size:2rem;margin-bottom:.5rem}.game-setup.prominent .setup-content p{font-size:1rem;margin-bottom:1.5rem}.setup-content{text-align:center}.setup-content h2{font-size:2.5rem;margin-bottom:1rem;color:var(--accent-color)}.setup-content p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem}.game-controls{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:500px;margin:0 auto}.game-setup.prominent .game-controls{flex-direction:row;justify-content:center;align-items:center;gap:2rem;max-width:700px;flex-wrap:wrap}.game-setup.prominent .language-selector{display:flex;flex-direction:column;align-items:flex-start}.game-setup.prominent .host-lobby{display:flex;flex-direction:column;align-items:center}.game-setup.prominent .language-selector{width:auto;min-width:200px}.game-setup.prominent .host-lobby{width:auto}.language-selector{width:100%}.language-label{display:block;font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary);font-weight:600}.language-dropdown{width:100%;padding:1rem;font-size:1.1rem;border:2px solid var(--primary-color);border-radius:var(--border-radius);background:var(--bg-color);color:var(--text-primary);cursor:pointer;transition:all .3s ease}.language-dropdown:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #f59e0b33}.host-lobby{width:100%;text-align:center}.create-session-btn{background:linear-gradient(135deg,var(--success-color) 0%,#059669 100%);color:#fff;border:none;padding:1.2rem 2.5rem;font-size:1.2rem;font-weight:600;border-radius:var(--border-radius);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow);width:100%;max-width:300px}.game-setup.prominent .create-session-btn{width:auto;min-width:250px;padding:1rem 2rem;font-size:1.1rem}.game-setup.prominent .host-note{font-size:.8rem;margin-top:1rem;width:100%;text-align:center;order:3}.create-session-btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px #0006}.create-session-btn:active{transform:translateY(0)}.host-note{font-size:.9rem;color:var(--text-secondary);margin-top:1rem;font-style:italic}.game-footer{text-align:center;padding:2rem 0;border-top:1px solid var(--surface-color);margin-top:2rem}.game-footer p{font-size:1.1rem;color:var(--text-secondary);font-style:italic}@media(max-width:768px){.container{padding:0 1rem}.game-title{font-size:2.5rem}.game-subtitle{font-size:1.2rem}.cozy-setting{grid-template-columns:1fr;gap:2rem}.description-content h2{font-size:2rem}.step{flex-direction:column;text-align:center}.step-icon{margin:0 0 1rem}.living-room{max-width:300px}.game-controls{gap:1.5rem}.game-setup.prominent .game-controls{flex-direction:column;gap:1.5rem}.game-setup.prominent .language-selector,.game-setup.prominent .host-lobby{width:100%}}@media(max-width:480px){.hero-header{padding:2rem 0}.game-title{font-size:2rem}.main-content{padding:0}.game-setup{padding:2rem 1rem}.setup-content h2{font-size:1.8rem}}
