*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f5f5f5;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:15px}.container{background:white;padding:30px 25px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);max-width:400px;width:100%;text-align:center}.title{color:#333;font-size:2rem;margin-bottom:8px;font-weight:700}.subtitle{color:#666;font-size:1rem;margin-bottom:25px}.game-modes{display:flex;background:#f8f9fa;border-radius:8px;padding:3px;margin-bottom:25px}.mode-btn{flex:1;padding:12px 15px;background:transparent;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease;color:#666}.mode-btn.active{background:#333;color:white}.game-form{display:none}.game-form.active{display:block}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;color:#333;font-weight:600;margin-bottom:6px;font-size:.9rem}.form-control{width:100%;padding:12px 15px;border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;transition:border-color .2s ease;background:white}.form-control:focus{outline:none;border-color:#333}.code-input-container{display:flex;gap:10px;justify-content:center;align-items:center}.code-digit{width:50px;height:50px;border:2px solid #e1e5e9;border-radius:8px;font-size:1.5rem;font-weight:600;text-align:center;transition:all .2s ease;background:white;color:#333}.code-digit:focus{outline:none;border-color:#333;background:#f8f9fa;transform:scale(1.05)}.code-digit:not(:placeholder-shown){border-color:#28a745;background:#f8fff9}@media (max-width:480px){.code-digit{width:45px;height:45px;font-size:1.3rem}.code-input-container{gap:8px}}.game-mode{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}.mode-option{position:relative}.mode-radio{position:absolute;opacity:0}.mode-label{display:block;padding:15px;background:white;border:2px solid #e1e5e9;border-radius:8px;cursor:pointer;transition:all .2s ease;text-align:center;font-weight:600}.mode-radio:checked + .mode-label{background:#333;color:white;border-color:#333}.mode-label .mode-title{font-size:1rem;margin-bottom:4px}.mode-label .mode-desc{font-size:.85rem;opacity:.7}.btn{background:#333;color:white;padding:15px 30px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%;margin-top:15px}.btn:hover{background:#555}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading{display:none;margin:20px 0}.loading-spinner{width:25px;height:25px;border:2px solid #f3f3f3;border-top:2px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width:480px){.container{padding:25px 20px;margin:10px}.title{font-size:1.8rem}.game-mode{grid-template-columns:1fr;gap:8px}.mode-btn{padding:10px 12px;font-size:.9rem}.form-control{padding:10px 12px}.btn{padding:12px 25px}}.error{color:#e74c3c;background:#fdf2f2;border:1px solid #f5c6cb;padding:10px;border-radius:6px;margin:10px 0;font-size:.9rem;display:none}