@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}.achievement-badge{background:var(--gradient-card);border:2px solid var(--border-light);border-radius:var(--radius-lg);padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:all var(--transition-base);position:relative;min-height:100px}.achievement-badge.locked{opacity:.6;filter:grayscale(80%)}.achievement-badge.unlocked{border-color:var(--success);box-shadow:var(--shadow-glow)}.achievement-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.achievement-badge.rarity-common{border-color:#94a3b8}.achievement-badge.rarity-rare{border-color:var(--primary)}.achievement-badge.rarity-epic{border-color:#00f2fe}.achievement-badge.rarity-legendary{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-primary) border-box}.badge-icon{font-size:3rem;flex-shrink:0;line-height:1}.badge-content{flex:1;min-width:0}.badge-name{font-size:1.1rem;font-weight:700;margin:0 0 .25rem;color:var(--text-primary)}.badge-description{font-size:.9rem;color:var(--text-secondary);margin:0 0 .5rem}.badge-progress{margin-top:.75rem}.progress-bar-container{height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;margin-bottom:.25rem}.progress-bar-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--transition-base)}.progress-text{font-size:.75rem;color:var(--text-tertiary)}.unlock-date{font-size:.75rem;color:var(--success);font-weight:500}.achievements-preview{margin:2rem 0}.achievements-preview h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.badge-carousel{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}.btn-view-all{background:var(--gradient-secondary);border:none;color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;gap:.5rem}.btn-view-all:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.achievement-gallery{max-width:1200px;margin:0 auto}.achievement-gallery.loading{text-align:center;padding:2rem;color:var(--text-secondary)}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.gallery-header h2{font-size:2rem;margin:0;color:var(--text-primary)}.stats-summary{display:flex;gap:2rem}.stat-item{font-size:.95rem;color:var(--text-secondary)}.stat-item strong{color:var(--primary);font-weight:700}.stat-item.elo-rating{background:linear-gradient(135deg,#6366f11a,#a855f71a);padding:.5rem 1rem;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.3)}.stat-item.elo-rating strong{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.1rem}.category-tabs{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap;border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.category-tab{background:transparent;border:none;color:var(--text-secondary);padding:.5rem 1rem;border-radius:var(--radius-md) var(--radius-md) 0 0;font-weight:600;cursor:pointer;transition:all var(--transition-base);position:relative}.category-tab:hover{color:var(--text-primary);background:var(--bg-secondary)}.category-tab.active{color:var(--primary);background:var(--bg-secondary)}.category-tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--gradient-primary)}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.no-achievements{text-align:center;padding:3rem;color:var(--text-tertiary);font-style:italic}.achievement-toast{position:fixed;top:2rem;right:2rem;background:var(--surface);border:2px solid var(--success);border-radius:var(--radius-lg);padding:1rem 1.5rem;box-shadow:var(--shadow-2xl),var(--shadow-glow);display:flex;gap:1rem;align-items:center;transform:translate(400px);opacity:0;transition:all var(--transition-base);z-index:10000;max-width:400px}.achievement-toast.show{transform:translate(0);opacity:1}.toast-icon{font-size:2rem;animation:bounce .6s ease-in-out}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.toast-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.toast-content strong{font-weight:700;color:var(--success);font-size:.9rem}.toast-achievement-name{color:var(--text-primary);font-weight:600}.toast-badge{font-size:2.5rem;animation:rotate .8s ease-in-out}.toast-close{background:transparent;border:none;color:var(--text-tertiary);font-size:1.5rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-base)}.toast-close:hover{color:var(--text-primary)}.daily-streak-card{background:var(--gradient-card);border-radius:var(--radius-xl);padding:2rem;display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;box-shadow:var(--shadow-lg);flex-wrap:wrap}.streak-icon{font-size:4rem;animation:flicker 2s infinite;line-height:1}@keyframes flicker{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.streak-info{flex:1;min-width:150px}.streak-info h3{font-size:1.8rem;margin:0 0 .25rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.streak-info p{margin:0;color:var(--text-secondary);font-size:.95rem}.streak-calendar{display:flex;gap:.5rem;flex-wrap:wrap}.calendar-day{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;border-radius:var(--radius-md);min-width:50px;transition:all var(--transition-base)}.calendar-day:hover{background:var(--bg-secondary)}.day-name{font-size:.7rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase}.day-indicator{width:32px;height:32px;border-radius:50%;border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all var(--transition-base)}.calendar-day.completed .day-indicator{background:var(--gradient-success);border-color:var(--success);color:#fff;font-weight:700}@media(max-width:768px){.badge-carousel,.achievements-grid{grid-template-columns:1fr}.achievement-toast{right:1rem;left:1rem;max-width:none}.achievement-toast.show{transform:translate(0)}.achievement-toast{transform:translateY(-100px)}.daily-streak-card{padding:1.5rem}.streak-calendar{width:100%}.gallery-header{flex-direction:column;align-items:flex-start}.stats-summary{width:100%}.category-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem}.category-tab{white-space:nowrap}}@media(max-width:480px){.achievement-badge{flex-direction:column;text-align:center}.badge-icon{font-size:2.5rem}.daily-streak-card{flex-direction:column;text-align:center}.streak-icon{font-size:3rem}}.home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.home:before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none}.home:after{content:"";position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none}.home-container{background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;box-shadow:var(--shadow-2xl);text-align:center;max-width:480px;width:100%;position:relative;z-index:1;border:1px solid var(--border-light)}.home-title{font-family:Space Grotesk,sans-serif;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem;margin-bottom:.5rem;letter-spacing:-.03em;line-height:1.1}.home-subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:2rem;font-weight:500}.welcome-message{color:var(--text-primary);font-size:1.1rem;margin-bottom:1.5rem;font-weight:600}.guest-banner{background:linear-gradient(135deg,#6366f11a,#06b6d41a);border:2px solid var(--primary);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;text-align:center}.guest-message{color:var(--text-secondary);font-size:.95rem;margin:0 0 .75rem;font-weight:500}.signup-prompt{color:var(--text-primary);font-size:1rem;margin:0 0 1.25rem;line-height:1.5}.signup-prompt strong{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.auth-buttons{display:flex;gap:.75rem;justify-content:center}.auth-button{padding:.75rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;flex:1;max-width:150px}.auth-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.auth-button:hover:before{transform:translate(100%)}.auth-button.signup{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md)}.auth-button.signup:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.auth-button.login{background:var(--surface);color:var(--primary);border:2px solid var(--primary);box-shadow:var(--shadow-sm)}.auth-button.login:hover{transform:translateY(-2px);background:var(--surface-hover);box-shadow:var(--shadow-md)}.stats-overview{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.75rem;margin-bottom:2rem;border:1px solid var(--border-light);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stats-overview h3{font-family:Space Grotesk,sans-serif;color:var(--primary);margin-bottom:1.25rem;font-size:1rem;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.stats-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-family:Plus Jakarta Sans,sans-serif;color:var(--text-secondary);font-size:.9rem;padding:.5rem 0}.stats-row:last-child{margin-bottom:0}.stats-row strong{color:var(--text-primary);font-weight:700;font-size:1rem}.home-buttons{display:flex;flex-direction:column;gap:.875rem}.home-button{padding:1rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;letter-spacing:.01em}.home-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.home-button:hover:before{transform:translate(100%)}.home-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.home-button:active{transform:translateY(0)}.home-button.primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #6366f11a}.home-button.primary:hover{box-shadow:var(--shadow-xl),var(--shadow-glow)}.home-button.secondary{background:var(--gradient-success);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #06b6d41a}.home-button.secondary:hover{box-shadow:var(--shadow-xl),0 0 20px #06b6d44d}.home-button.multiplayer{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #f59e0b1a;font-weight:700}.home-button.multiplayer:hover{box-shadow:var(--shadow-xl),0 0 20px #f59e0b4d;transform:translateY(-2px)}.home-button.race-mode{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #667eea1a;font-weight:700}.home-button.race-mode:hover{box-shadow:var(--shadow-xl),0 0 20px #667eea4d;transform:translateY(-2px)}.home-button:not(.primary):not(.secondary):not(.multiplayer):not(.race-mode){background:var(--surface);color:var(--text-primary);border:2px solid var(--border-light);box-shadow:var(--shadow-sm)}.home-button:not(.primary):not(.secondary):not(.multiplayer):not(.race-mode):hover{background:var(--surface-hover);border-color:var(--border-medium)}@media(max-width:768px){.home:before,.home:after{width:300px;height:300px}.home-container{padding:2.5rem 2rem}}@media(max-width:480px){.home{padding:1rem}.home:before,.home:after{display:none}.home-container{padding:2rem 1.5rem}.home-title{font-size:2rem}.home-subtitle{font-size:.9rem}.stats-overview{padding:1.5rem}.home-button{padding:.875rem 1.25rem;font-size:.95rem}}.logout-button{position:fixed!important;top:2rem!important;right:2rem!important;left:auto!important;display:inline-flex!important;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);z-index:1000!important;box-shadow:var(--shadow-sm);width:auto!important;max-width:fit-content!important}.logout-button svg{stroke:var(--text-primary);transition:stroke var(--transition-base)}.logout-button:hover{background:var(--surface-hover);border-color:var(--error);color:var(--error);box-shadow:var(--shadow-md);transform:translateY(-2px)}.logout-button:hover svg{stroke:var(--error)}@media(max-width:768px){.logout-button{top:1rem;right:1rem;padding:.625rem 1rem;font-size:.85rem}.logout-button svg{width:16px;height:16px}}@media(max-width:480px){.logout-button{padding:.5rem .75rem;font-size:0;gap:0}.logout-button svg{width:20px;height:20px}}.modal-backdrop{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease-out}.letter-edit-modal{background:var(--surface);border-radius:var(--radius-xl);padding:2.5rem;max-width:480px;width:100%;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light);animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.letter-edit-modal h3{font-family:Space Grotesk,sans-serif;color:var(--text-primary);margin-bottom:.75rem;text-align:center;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}.letter-edit-modal p{color:var(--text-secondary);margin-bottom:2rem;text-align:center;font-weight:500;font-size:.95rem}.letter-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.625rem;margin-bottom:2rem}.letter-option{aspect-ratio:1;border:2px solid var(--primary);background:var(--surface);color:var(--primary);border-radius:var(--radius-md);font-family:Space Grotesk,monospace;font-size:1.1rem;font-weight:800;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}.letter-option:hover{background:var(--gradient-primary);color:#fff;transform:scale(1.08);box-shadow:var(--shadow-md);border-color:var(--primary-dark)}.letter-option:active{transform:scale(.98)}.modal-actions{display:flex;gap:.875rem;justify-content:center}.modal-button{padding:.875rem 2rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);font-size:.95rem;box-shadow:var(--shadow-sm)}.modal-button.cancel{background:var(--text-secondary);color:#fff}.modal-button.cancel:hover{background:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media(max-width:480px){.letter-edit-modal{padding:2rem 1.5rem}.letter-edit-modal h3{font-size:1.3rem}.letter-grid{grid-template-columns:repeat(6,1fr);gap:.5rem}.letter-option{font-size:1rem}.modal-button{padding:.875rem 1.5rem;font-size:.9rem}}.win-modal{background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;max-width:480px;width:100%;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light);animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1),confetti .6s ease-out;text-align:center;position:relative;overflow:hidden}.win-modal:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(16,185,129,.1) 0%,transparent 50%);animation:rotate 10s linear infinite}.win-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem;position:relative;z-index:1}.win-emoji{font-size:2.5rem;animation:bounce 1s infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.win-emoji:first-child{animation-delay:.2s}.win-emoji:last-child{animation-delay:.4s}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-12px)}60%{transform:translateY(-6px)}}@keyframes confetti{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.05) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.win-header h2{font-family:Space Grotesk,sans-serif;background:var(--gradient-success);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2rem;margin:0;font-weight:800;letter-spacing:-.02em}.win-stats{background:var(--gradient-card);border-radius:var(--radius-lg);padding:2rem;margin-bottom:2rem;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);position:relative;z-index:1}.stat-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:.875rem;font-family:Plus Jakarta Sans,sans-serif}.stat-item:last-child{margin-bottom:0}.stat-label{color:var(--text-secondary);font-weight:500;font-size:.95rem}.stat-value{color:var(--text-primary);font-weight:800;font-size:1.25rem;font-family:Space Grotesk,sans-serif}.achievement{margin-top:1.25rem;padding-top:1.25rem;border-top:2px solid var(--border-light)}.achievement-text{color:var(--success);font-weight:700;font-style:italic;font-size:.95rem}.achievements-unlocked{background:var(--gradient-card);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;border:2px solid var(--success);box-shadow:var(--shadow-glow);position:relative;z-index:1}.achievements-unlocked h3{color:var(--success);font-size:1.2rem;margin:0 0 1rem;font-weight:700;text-align:center}.unlocked-badge{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:.75rem;border:1px solid var(--border-light);animation:slideIn .4s ease-out}.unlocked-badge:last-child{margin-bottom:0}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.badge-icon-large{font-size:2.5rem;flex-shrink:0;animation:rotate .6s ease-out}@keyframes rotate{0%{transform:rotate(0) scale(0)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}.badge-details{flex:1;text-align:left}.badge-details strong{display:block;color:var(--text-primary);font-weight:700;font-size:1rem;margin-bottom:.25rem}.badge-details p{margin:0;color:var(--text-secondary);font-size:.85rem}.win-actions{display:flex;gap:.875rem;position:relative;z-index:1}.win-button{flex:1;padding:1rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);font-size:.95rem;position:relative;overflow:hidden}.win-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%);transition:transform .6s}.win-button:hover:before{transform:translate(100%)}.win-button.primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #10b9811a}.win-button.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),0 0 20px #10b98166}.win-button.secondary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #6366f11a}.win-button.secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}@media(max-width:480px){.win-modal{padding:2.5rem 2rem}.win-header h2{font-size:1.75rem}.win-emoji{font-size:2rem}.win-stats{padding:1.5rem}.stat-value{font-size:1.1rem}.win-actions{flex-direction:column;gap:.75rem}.win-button{padding:.875rem 1.25rem}}.lose-modal{background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;max-width:480px;width:100%;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light);animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1);text-align:center;position:relative;overflow:hidden}.lose-modal:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(239,68,68,.08) 0%,transparent 50%);animation:rotate 12s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lose-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem;position:relative;z-index:1}.lose-emoji{font-size:2.5rem;animation:shake .6s ease-in-out;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}@keyframes shake{0%,to{transform:rotate(0)}10%,30%,50%,70%,90%{transform:rotate(-8deg)}20%,40%,60%,80%{transform:rotate(8deg)}}.lose-header h2{font-family:Space Grotesk,sans-serif;color:var(--error);font-size:2rem;margin:0;font-weight:800;letter-spacing:-.02em}.lose-reason{background:var(--gradient-card);border-radius:var(--radius-lg);padding:2rem;margin-bottom:2rem;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);position:relative;z-index:1}.lose-reason p{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;margin:0;font-weight:600;line-height:1.6}.lose-actions{display:flex;gap:.875rem;position:relative;z-index:1}.lose-button{flex:1;padding:1rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);font-size:.95rem;position:relative;overflow:hidden}.lose-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%);transition:transform .6s}.lose-button:hover:before{transform:translate(100%)}.lose-button.primary{background:linear-gradient(135deg,var(--accent) 0%,#ea580c 100%);color:#fff;box-shadow:var(--shadow-md),0 0 0 1px #f59e0b1a}.lose-button.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),0 0 20px #f59e0b66}.lose-button.secondary{background:var(--text-secondary);color:#fff;box-shadow:var(--shadow-md)}.lose-button.secondary:hover{background:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}@media(max-width:480px){.lose-modal{padding:2.5rem 2rem}.lose-header h2{font-size:1.75rem}.lose-emoji{font-size:2rem}.lose-reason{padding:1.5rem}.lose-actions{flex-direction:column;gap:.75rem}.lose-button{padding:.875rem 1.25rem}}.game{min-height:100vh;padding:1.5rem;display:flex;align-items:center;justify-content:center}.game-container{max-width:600px;width:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light)}.game-header{margin-bottom:2.5rem}.game-info{background:var(--gradient-card);padding:1.25rem 1.5rem;border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-family:Plus Jakarta Sans,sans-serif;font-size:.925rem;font-weight:500}.info-row:last-child{margin-bottom:0}.info-row span:first-child{color:var(--text-secondary)}.info-row span:last-child{color:var(--text-primary);font-weight:700}.timer-urgent{color:var(--error);font-weight:800;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.current-word-section{text-align:center;margin-bottom:2.5rem}.current-word-section h3{font-family:Space Grotesk,sans-serif;color:var(--text-primary);margin-bottom:1.5rem;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}.word-display{display:flex;justify-content:center;gap:.625rem;margin-bottom:1rem}.letter-tile{width:70px;height:70px;border:3px solid var(--primary);background:var(--surface);border-radius:var(--radius-md);font-family:Space Grotesk,monospace;font-size:1.75rem;font-weight:800;color:var(--text-primary);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.letter-tile:before{content:"";position:absolute;inset:0;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base)}.letter-tile:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg),0 0 0 3px var(--primary-light);border-color:var(--primary-dark)}.letter-tile.editing{background:var(--gradient-primary);color:#fff;transform:scale(1.08);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:var(--primary-dark)}.letter-tile.editing:before{opacity:1}.letter-tile:disabled{opacity:.5;cursor:not-allowed;transform:none}.letter-tile:disabled:hover{transform:none;box-shadow:var(--shadow-md)}.error-message{color:var(--error);font-weight:600;margin:1rem 0;padding:.875rem 1rem;background:#ef444414;border-radius:var(--radius-md);border:2px solid var(--error);font-size:.925rem;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.shake{animation:shake .5s ease-in-out}.wiggle{animation:wiggle .8s ease-in-out}.bounce-in{animation:bounce-in .6s ease-out}.success-glow{animation:success-glow 1.5s ease-in-out infinite}.error-pulse{animation:error-pulse .6s ease-in-out}.word-display.invalid-shake .letter-tile{animation:wiggle .8s ease-in-out}.word-display.success-glow .letter-tile{animation:success-glow 1s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%{transform:translate(-8px)}20%,40%,60%{transform:translate(8px)}80%{transform:translate(-4px)}90%{transform:translate(4px)}}@keyframes wiggle{0%,7%{transform:rotate(0)}15%{transform:rotate(-15deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}40%,to{transform:rotate(0)}}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes success-glow{0%{box-shadow:0 0 5px #2ecc7180}50%{box-shadow:0 0 20px #2ecc71cc}to{box-shadow:0 0 5px #2ecc7180}}@keyframes error-pulse{0%{background-color:#e74c3c1a;border-color:#e74c3c}50%{background-color:#e74c3c4d;border-color:#c0392b}to{background-color:#e74c3c1a;border-color:#e74c3c}}.tap-hint{color:var(--text-tertiary);font-style:italic;margin-top:.75rem;font-size:.875rem;font-weight:500}.word-history-section{margin-bottom:2rem}.word-history-section h3{font-family:Space Grotesk,sans-serif;color:var(--text-primary);margin-bottom:1rem;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}.word-history{background:var(--bg-secondary);border-radius:var(--radius-md);padding:1.25rem;max-height:180px;overflow-y:auto;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.word-history::-webkit-scrollbar{width:6px}.word-history::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-full)}.word-history::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}.word-history::-webkit-scrollbar-thumb:hover{background:var(--border-dark)}.history-item{font-family:Space Grotesk,monospace;padding:.5rem .75rem;color:var(--text-primary);font-weight:600;font-size:.95rem;border-bottom:1px solid var(--border-light);transition:background var(--transition-fast)}.history-item:last-child{border-bottom:none}.history-item:hover{background:var(--surface-hover);border-radius:var(--radius-sm)}.game-actions{display:flex;gap:.875rem;margin-bottom:2rem}.action-button{flex:1;padding:.875rem 1rem;border:2px solid var(--primary);background:var(--surface);color:var(--primary);border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);font-size:.9rem;box-shadow:var(--shadow-sm)}.action-button:hover:not(:disabled){background:var(--gradient-primary);color:#fff;border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.action-button:active:not(:disabled){transform:translateY(0)}.action-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.back-button{width:100%;padding:1rem 1.5rem;background:var(--text-secondary);color:#fff;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.back-button:hover{background:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media(max-width:768px){.game-container{padding:2rem 1.75rem}.letter-tile{width:65px;height:65px;font-size:1.6rem}}@media(max-width:480px){.game{padding:1rem}.game-container{padding:1.75rem 1.25rem}.letter-tile{width:55px;height:55px;font-size:1.4rem;gap:.5rem}.word-display{gap:.5rem}.game-actions{flex-direction:column;gap:.75rem}.action-button{padding:.875rem}}.level-select{min-height:100vh;padding:2rem 1rem}.level-select-container{max-width:900px;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light)}.level-select h1{font-family:Space Grotesk,sans-serif;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:.75rem;font-size:2.5rem;font-weight:800;letter-spacing:-.03em}.level-select-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:3rem;font-family:Plus Jakarta Sans,sans-serif;font-weight:500;font-size:1rem}.levels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-bottom:2.5rem}.level-card{background:var(--gradient-card);border:2px solid var(--border-light);border-radius:var(--radius-lg);padding:2rem 1.75rem;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}.level-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base)}.level-card.unlocked:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary)}.level-card.unlocked:hover:before{opacity:1}.level-card.locked{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.level-card.locked:hover{transform:none}.level-number{font-family:Space Grotesk,sans-serif;font-size:2.5rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:1.25rem;letter-spacing:-.02em}.level-info{margin-bottom:1.25rem}.level-words{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.start-word,.target-word{font-family:Space Grotesk,monospace;font-weight:800;padding:.625rem 1rem;border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border-light);font-size:1.1rem;letter-spacing:.05em}.arrow{color:var(--primary);font-size:1.4rem;font-weight:800}.difficulty-badge{display:inline-block;color:#fff;padding:.375rem 1rem;border-radius:var(--radius-full);font-family:Plus Jakarta Sans,sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 auto;text-align:center;width:fit-content;display:block;box-shadow:var(--shadow-sm)}.level-stats{display:flex;justify-content:space-around;font-family:Plus Jakarta Sans,sans-serif;color:var(--text-secondary);font-size:.875rem;font-weight:500;gap:1rem}.level-stats span{display:flex;flex-direction:column;align-items:center;gap:.25rem}.level-stats span:first-child{color:var(--text-tertiary);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}@media(max-width:768px){.levels-grid{grid-template-columns:1fr;gap:1rem}.level-select-container{padding:2.5rem 2rem}.level-select h1{font-size:2rem}}@media(max-width:480px){.level-select{padding:1rem}.level-select-container{padding:2rem 1.5rem}.level-select h1{font-size:1.75rem}.level-card{padding:1.5rem 1.25rem}.level-number{font-size:2rem}.level-words{flex-direction:column;gap:.5rem}.start-word,.target-word{font-size:1rem;padding:.5rem .875rem}.arrow{transform:rotate(90deg);font-size:1.2rem}}.how-to-play{min-height:100vh;padding:2rem 1rem}.how-to-play-container{max-width:700px;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light)}.how-to-play h1{font-family:Space Grotesk,sans-serif;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:3rem;font-size:2.5rem;font-weight:800;letter-spacing:-.03em}.instructions{margin-bottom:2.5rem}.instruction-item{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:2px solid var(--border-light)}.instruction-item:last-child{border-bottom:none;padding-bottom:0}.instruction-item h3{font-family:Space Grotesk,sans-serif;color:var(--primary);margin-bottom:1.25rem;font-size:1.35rem;font-weight:700;letter-spacing:-.01em}.instruction-item p{font-family:Plus Jakarta Sans,sans-serif;color:var(--text-primary);line-height:1.7;margin-bottom:.875rem;font-size:.95rem}.instruction-item ul{font-family:Plus Jakarta Sans,sans-serif;color:var(--text-primary);line-height:1.7;margin-left:1.75rem;font-size:.95rem}.instruction-item li{margin-bottom:.75rem}.instruction-item strong{color:var(--primary);font-weight:700}.example{background:var(--gradient-card);border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border-light)!important;box-shadow:var(--shadow-sm);margin-top:1rem}.example-chain{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:1.5rem 0;flex-wrap:wrap}.example-word{background:var(--gradient-primary);color:#fff;padding:.625rem 1.25rem;border-radius:var(--radius-md);font-family:Space Grotesk,monospace;font-weight:800;font-size:1.15rem;letter-spacing:.05em;box-shadow:var(--shadow-md)}.arrow{color:var(--primary);font-size:1.5rem;font-weight:800}@media(max-width:768px){.how-to-play-container{padding:2.5rem 2rem}}@media(max-width:480px){.how-to-play{padding:1rem}.how-to-play-container{padding:2rem 1.5rem}.how-to-play h1{font-size:2rem}.instruction-item h3{font-size:1.15rem}.instruction-item p,.instruction-item ul{font-size:.9rem}.example{padding:1.5rem}.example-chain{flex-direction:column;gap:.5rem}.example-word{font-size:1rem;padding:.5rem 1rem}.arrow{transform:rotate(90deg);font-size:1.2rem}}.settings{min-height:100vh;padding:2rem 1rem;display:flex;align-items:center;justify-content:center}.settings-container{max-width:600px;width:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:3rem 2.5rem;box-shadow:var(--shadow-2xl);border:1px solid var(--border-light)}.settings h1{font-family:Space Grotesk,sans-serif;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:2rem;font-size:2.5rem;font-weight:800;letter-spacing:-.03em}.settings-tabs{display:flex;gap:.5rem;margin-bottom:2rem;border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.tab-btn{background:transparent;border:none;color:var(--text-secondary);padding:.75rem 1.5rem;border-radius:var(--radius-md) var(--radius-md) 0 0;font-weight:600;cursor:pointer;transition:all var(--transition-base);position:relative;font-size:1rem}.tab-btn:hover{color:var(--text-primary);background:var(--bg-secondary)}.tab-btn.active{color:var(--primary);background:var(--bg-secondary)}.tab-btn.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--gradient-primary)}.settings-content{margin-bottom:2.5rem}.setting-group{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:2px solid var(--border-light)}.setting-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.setting-group h3{font-family:Space Grotesk,sans-serif;color:var(--primary);margin-bottom:1.5rem;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}.setting-item{margin-bottom:1.25rem}.setting-item:last-child{margin-bottom:0}.setting-label{display:flex;justify-content:space-between;align-items:center;font-family:Plus Jakarta Sans,sans-serif;color:var(--text-primary);font-weight:600;cursor:pointer;font-size:.95rem}.toggle-switch{position:relative;width:56px;height:30px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border-medium);transition:all var(--transition-base);border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;transition:all var(--transition-base);border-radius:50%;box-shadow:var(--shadow-sm)}input:checked+.toggle-slider{background:var(--gradient-primary);box-shadow:var(--shadow-md),0 0 0 3px #6366f11a}input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-slider:hover{box-shadow:var(--shadow-md)}.difficulty-select{padding:.625rem .875rem;border:2px solid var(--primary);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-weight:600;cursor:pointer;min-width:120px;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.difficulty-select:hover{border-color:var(--primary-dark);box-shadow:var(--shadow-md)}.difficulty-select:focus{outline:none;box-shadow:var(--shadow-md),0 0 0 3px #6366f133;border-color:var(--primary-dark)}.clear-data-button{padding:.875rem 1.75rem;background:linear-gradient(135deg,var(--error) 0%,var(--error-dark) 100%);color:#fff;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.clear-data-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%);transition:transform .6s}.clear-data-button:hover:before{transform:translate(100%)}.clear-data-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),0 0 20px #ef444466}.logout-button{width:100%;padding:.875rem 1.75rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative;overflow:hidden;font-size:1rem}.logout-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.logout-button:hover:before{transform:translate(100%)}.logout-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.auth-actions{display:flex;gap:.75rem;margin-top:1rem}.signup-button,.login-button-alt{flex:1;padding:.875rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative;overflow:hidden;font-size:.95rem}.signup-button:before,.login-button-alt:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.signup-button:hover:before,.login-button-alt:hover:before{transform:translate(100%)}.signup-button{background:var(--gradient-primary);color:#fff}.signup-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.login-button-alt{background:var(--surface);color:var(--primary);border:2px solid var(--primary)}.login-button-alt:hover{transform:translateY(-2px);background:var(--surface-hover);box-shadow:var(--shadow-md)}.about-info{font-family:Plus Jakarta Sans,sans-serif;color:var(--text-secondary);line-height:1.7}.about-info p{margin:.75rem 0;font-size:.95rem}.about-info strong{color:var(--text-primary);font-weight:700}.back-button{width:100%;padding:1rem 1.5rem;background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;cursor:pointer;transition:all var(--transition-base);font-size:1rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.back-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.back-button:hover:before{transform:translate(100%)}.back-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}@media(max-width:768px){.settings-container{padding:2.5rem 2rem}}@media(max-width:480px){.settings{padding:1rem}.settings-container{padding:2rem 1.5rem}.settings h1{font-size:2rem}.setting-group h3{font-size:1.1rem}.setting-label{font-size:.9rem}}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding:2rem}.auth-container{background:#fff;border-radius:var(--radius-xl);padding:3rem 2.5rem;box-shadow:var(--shadow-2xl);width:100%;max-width:450px;animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-title{font-family:Space Grotesk,monospace;font-size:2rem;font-weight:800;color:var(--text-primary);margin:0 0 .5rem;text-align:center}.auth-subtitle{font-size:1rem;color:var(--text-secondary);margin:0 0 2rem;text-align:center}.auth-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-primary);font-size:.9rem}.form-group input{padding:.875rem 1rem;border:2px solid var(--border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;transition:all .2s ease}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.form-group input::placeholder{color:var(--text-tertiary)}.auth-button{padding:1rem;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:700;font-family:Space Grotesk,monospace;cursor:pointer;transition:all .2s ease;margin-top:.5rem}.auth-button.primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}.auth-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-switch{text-align:center;margin-top:1.5rem;color:var(--text-secondary);font-size:.95rem}.link-button{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;padding:0;text-decoration:underline;font-size:inherit}.link-button:hover{color:var(--primary-dark)}.error-message{background:var(--error);color:#fff;padding:.875rem 1rem;border-radius:var(--radius-md);font-size:.9rem;text-align:center;animation:shake .3s ease}.info-message{background:#e0e7ff;color:var(--primary-dark);padding:.875rem 1rem;border-radius:var(--radius-md);font-size:.9rem;text-align:center;border-left:4px solid var(--primary);margin-bottom:1rem}@media(max-width:480px){.auth-container{padding:2rem 1.5rem}.auth-title{font-size:1.75rem}.auth-subtitle{font-size:.9rem}}.multiplayer-lobby{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem;display:flex;justify-content:center;align-items:center}.lobby-container{max-width:600px;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-2xl);position:relative}.back-button{position:absolute;top:1rem;left:1rem;background:transparent;border:none;color:var(--primary);font-size:1rem;font-weight:600;cursor:pointer;padding:.5rem 1rem;border-radius:var(--radius-md);transition:all .2s ease}.back-button:hover{background:#6366f11a;transform:translate(-2px)}.lobby-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:800;text-align:center;margin-top:2rem;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lobby-subtitle{text-align:center;color:#666;font-size:1.1rem;margin-bottom:2rem}.connection-status{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#0000000d;border-radius:var(--radius-md);margin-bottom:2rem}.status-indicator{width:10px;height:10px;border-radius:50%;transition:background-color .3s ease}.status-indicator.connected{background-color:var(--success);box-shadow:0 0 10px #10b98180;animation:pulse 2s infinite}.status-indicator.disconnected{background-color:#999}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.lobby-content{margin:2rem 0}.queue-join{text-align:center;padding:2rem}.queue-join h2{font-size:1.8rem;margin-bottom:1rem;color:#333}.queue-join p{color:#666;font-size:1.1rem;margin-bottom:2rem}.join-queue-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2.5rem;font-size:1.2rem;font-weight:700;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-lg);transition:all .3s ease}.join-queue-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl)}.join-queue-button:disabled{opacity:.6;cursor:not-allowed}.queue-waiting{text-align:center;padding:2rem}.searching-animation{margin-bottom:2rem;display:flex;justify-content:center}.spinner{width:60px;height:60px;border:4px solid rgba(99,102,241,.2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}.queue-waiting h2{font-size:1.6rem;margin-bottom:1rem;color:#333}.queue-position{font-size:1.1rem;color:var(--primary);font-weight:600;margin:1rem 0}.queue-message{color:#666;font-size:1rem;margin-bottom:2rem}.leave-queue-button{background:#fff;color:var(--error);border:2px solid var(--error);padding:.75rem 2rem;font-size:1rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.leave-queue-button:hover{background:var(--error);color:#fff}.lobby-divider{text-align:center;margin:2rem 0;position:relative}.lobby-divider:before,.lobby-divider:after{content:"";position:absolute;top:50%;width:calc(50% - 30px);height:1px;background:linear-gradient(to right,transparent,#ccc,transparent)}.lobby-divider:before{left:0}.lobby-divider:after{right:0}.lobby-divider span{background:#fffffff2;padding:0 1rem;color:#999;font-weight:600;font-size:.9rem}.private-room-section{text-align:center;padding:2rem;background:#6366f108;border-radius:var(--radius-lg);border:2px dashed rgba(99,102,241,.2)}.private-room-section h2{font-size:1.8rem;margin-bottom:1rem;color:#333}.private-room-section p{color:#666;font-size:1.1rem;margin-bottom:1.5rem}.game-mode-selector{margin:1.5rem 0 2rem;text-align:center}.game-mode-selector label{display:block;font-weight:600;color:#333;margin-bottom:1rem;font-size:1.1rem}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.mode-option{padding:1.5rem;background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-lg);color:#666;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.mode-option:hover{border-color:var(--primary);background:#6366f10d;transform:translateY(-2px)}.mode-option.selected{border-color:var(--primary);background:linear-gradient(135deg,#6366f11a,#764ba21a);color:var(--primary)}.mode-icon{font-size:2rem;line-height:1}.mode-option strong{font-size:1.1rem;margin:0}.mode-option p{margin:0;font-size:.85rem;color:#999;font-weight:400}.mode-option.selected p{color:var(--primary);opacity:.8}.player-count-selector{margin:1.5rem 0;text-align:center}.player-count-selector label{display:block;font-weight:600;color:#333;margin-bottom:1rem;font-size:1.1rem}.player-count-options{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem}.player-count-option{padding:.875rem 1.5rem;background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-lg);color:#666;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:100px}.player-count-option:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.player-count-option.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}.private-room-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.create-room-button,.join-room-button{flex:1;min-width:200px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease;border:none}.create-room-button{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)}.create-room-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.join-room-button{background:#fff;color:var(--primary);border:2px solid var(--primary)}.join-room-button:hover:not(:disabled){background:#6366f11a;transform:translateY(-2px)}.create-room-button:disabled,.join-room-button:disabled{opacity:.5;cursor:not-allowed}.how-it-works{background:#6366f10d;padding:1.5rem;border-radius:var(--radius-lg);margin-top:2rem}.how-it-works h3{font-size:1.3rem;margin-bottom:1rem;color:var(--primary);font-weight:700}.how-it-works ul{list-style:none;padding:0}.how-it-works li{padding:.5rem 0;font-size:1rem;color:#555;display:flex;align-items:center;gap:.5rem}@media(max-width:768px){.multiplayer-lobby{padding:1rem}.lobby-container{padding:1.5rem}.lobby-title{font-size:2rem}.join-queue-button{padding:1rem 2rem;font-size:1.1rem}.private-room-buttons{flex-direction:column}.create-room-button,.join-room-button{min-width:100%}.private-room-section h2,.queue-join h2{font-size:1.5rem}}[data-theme=dark] .multiplayer-lobby{background:linear-gradient(135deg,#1e293b,#0f172a)}[data-theme=dark] .lobby-container{background:#1e293bf2;color:var(--text-primary)}[data-theme=dark] .lobby-subtitle{color:var(--text-secondary)}[data-theme=dark] .connection-status{background:#0003;color:var(--text-primary)}[data-theme=dark] .queue-join h2,[data-theme=dark] .private-room-section h2{color:var(--text-primary)}[data-theme=dark] .queue-join p,[data-theme=dark] .private-room-section p{color:var(--text-secondary)}[data-theme=dark] .queue-waiting h2{color:var(--text-primary)}[data-theme=dark] .queue-message,[data-theme=dark] .lobby-divider{color:var(--text-secondary)}[data-theme=dark] .lobby-divider:before,[data-theme=dark] .lobby-divider:after{background:var(--border-color)}[data-theme=dark] .how-it-works{background:#6366f11a}[data-theme=dark] .how-it-works h3{color:var(--text-primary)}[data-theme=dark] .how-it-works li{color:var(--text-secondary)}[data-theme=dark] .leave-queue-button{background:#1e293bcc;color:var(--color-error)}[data-theme=dark] .leave-queue-button:hover{background:var(--color-error);color:#fff}.multiplayer-game{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.countdown-screen{display:flex;justify-content:center;align-items:center}.countdown-container{text-align:center;background:#fffffff2;padding:3rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-width:400px}.countdown-container h2{font-size:2rem;margin-bottom:1rem;color:var(--color-primary)}.opponent-info{font-size:1.3rem;color:#555;margin-bottom:1rem;font-weight:600}.puzzle-info{font-size:1.5rem;font-weight:700;margin-bottom:2rem;color:#333}.countdown-number{font-size:5rem;font-weight:800;color:var(--color-primary);animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.game-header{display:flex;justify-content:space-between;align-items:center;background:#fffffff2;padding:1.5rem 2rem;border-radius:var(--radius-lg);margin-bottom:2rem;box-shadow:var(--shadow-lg)}.resign-button{background:#fff;color:var(--color-error);border:2px solid var(--color-error);padding:.5rem 1rem;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s ease}.resign-button:hover{background:var(--color-error);color:#fff}.puzzle-display{display:flex;align-items:center;gap:1rem;font-size:1.5rem;font-weight:700}.start-word{color:var(--color-primary)}.arrow{color:#999}.target-word{color:var(--color-success)}.move-counter{font-size:1.2rem;font-weight:600;color:#666}.player-boards{display:grid;gap:2rem;margin-bottom:2rem}.player-boards.grid-2{grid-template-columns:1fr 1fr}.player-boards.grid-3{grid-template-columns:repeat(2,1fr)}.player-boards.grid-3 .player-board:first-child{grid-column:1 / -1;max-width:600px;margin:0 auto;width:100%}.player-boards.grid-4{grid-template-columns:1fr 1fr}.player-board{background:#fffffff2;padding:1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.player-board.my-board{border:3px solid var(--color-primary)}.player-board.opponent-board{border:3px solid var(--color-accent)}.your-board{border:3px solid var(--color-primary)}.dual-boards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(0,0,0,.1)}.board-header h3{font-size:1.3rem;color:#333;margin:0}.move-count{font-size:1rem;color:#666;font-weight:600}.word-display{display:flex;justify-content:center;gap:.5rem;margin-bottom:2rem}.letter-box{width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-md);transition:all .2s ease}.letter-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.letter-box.opponent{background:linear-gradient(135deg,#f59e0b,#d97706);cursor:default}.letter-box.opponent:hover{transform:none;box-shadow:var(--shadow-md)}.move-history{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;min-height:40px}.history-word{background:#6366f11a;color:var(--color-primary);padding:.4rem .8rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem}.history-word.opponent{background:#f59e0b1a;color:var(--color-accent)}.error-message{background:var(--color-error);color:#fff;padding:1rem 2rem;border-radius:var(--radius-lg);text-align:center;font-weight:600;box-shadow:var(--shadow-lg);margin:0 auto;max-width:500px;animation:shake .5s ease}.game-over-screen{display:flex;justify-content:center;align-items:center}.game-over-container{text-align:center;background:#fffffff2;padding:3rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-width:500px;width:100%}.game-over-container h1{font-size:3rem;margin-bottom:1rem}.game-over-container h1.winner{color:var(--color-success)}.game-over-container h1.loser{color:var(--color-error)}.winner-announcement{font-size:1.3rem;color:#555;margin-bottom:2rem}.final-stats{background:#0000000d;padding:1.5rem;border-radius:var(--radius-lg);margin-bottom:2rem}.stat{display:flex;justify-content:space-between;padding:.5rem 0;font-size:1.1rem}.stat-label{color:#666;font-weight:600}.stat-value{color:var(--color-primary);font-weight:700;font-size:1.2rem}.game-over-buttons{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center}.rematch-button,.play-again-button,.back-home-button{padding:1rem 2rem;border-radius:var(--radius-md);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;border:none;min-width:250px}.rematch-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:var(--shadow-md);font-size:1.1rem}.rematch-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.play-again-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:var(--shadow-md)}.play-again-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.back-home-button{background:#fff;color:#666;border:2px solid #ddd}.back-home-button:hover{background:#f5f5f5}.waiting-for-rematch{font-size:.95rem;color:var(--color-primary);font-weight:600;padding:1rem;background:#6366f11a;border-radius:var(--radius-md);margin:0;min-width:250px;text-align:center}[data-theme=dark] .multiplayer-game{background:linear-gradient(135deg,#1e293b,#0f172a)}[data-theme=dark] .countdown-container{background:#1e293bf2;color:var(--text-primary)}[data-theme=dark] .opponent-info{color:var(--text-secondary)}[data-theme=dark] .puzzle-info{color:var(--text-primary)}[data-theme=dark] .game-header,[data-theme=dark] .player-board{background:#1e293bf2}[data-theme=dark] .board-header h3{color:var(--text-primary)}[data-theme=dark] .move-count{color:var(--text-secondary)}[data-theme=dark] .game-over-container{background:#1e293bf2;color:var(--text-primary)}[data-theme=dark] .winner-announcement{color:var(--text-secondary)}[data-theme=dark] .final-stats{background:#0000004d}[data-theme=dark] .stat-label{color:var(--text-secondary)}[data-theme=dark] .back-home-button{background:#1e293bcc;color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] .back-home-button:hover{background:#334155e6}@media(max-width:968px){.dual-boards,.player-boards.grid-2,.player-boards.grid-3,.player-boards.grid-4{grid-template-columns:1fr}.player-boards.grid-3 .player-board:first-child{grid-column:1;max-width:100%}.multiplayer-game{padding:1rem}.game-header{flex-direction:column;gap:1rem;text-align:center}.puzzle-display{font-size:1.2rem}.letter-box{width:50px;height:50px;font-size:1.5rem}}@media(max-width:480px){.letter-box{width:40px;height:40px;font-size:1.2rem}.countdown-number{font-size:4rem}.game-over-container{padding:2rem}.game-over-container h1{font-size:2rem}}.private-room-join{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2)}.join-content{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:3rem 2rem;max-width:500px;width:100%;box-shadow:var(--shadow-2xl);text-align:center}.join-content h2{font-family:Space Grotesk,monospace;font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:.5rem}.instruction{font-size:1rem;color:#64748b;margin-bottom:2.5rem}.code-input-container{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem}.code-input{width:70px;height:80px;font-family:Space Grotesk,monospace;font-size:2rem;font-weight:700;text-align:center;text-transform:uppercase;color:var(--primary);background:#fff;border:3px solid #e2e8f0;border-radius:var(--radius-lg);transition:all .3s ease;outline:none}.code-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a;transform:scale(1.05)}.code-input.error{border-color:var(--error);animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.error-message{color:var(--error);font-size:.875rem;font-weight:600;margin-bottom:1.5rem;padding:.75rem;background:#ef44441a;border-radius:var(--radius-md)}.join-actions{display:flex;gap:1rem;justify-content:center}.join-button{padding:.875rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border:none;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-md);transition:all .3s ease}.join-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.join-button:active:not(:disabled){transform:translateY(0)}.join-button:disabled{opacity:.5;cursor:not-allowed}.back-button{padding:.875rem 2rem;font-size:1rem;font-weight:600;color:#64748b;background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease}.back-button:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:var(--shadow-md)}.back-button:active{transform:translateY(0)}@media(max-width:768px){.join-content{padding:2rem 1.5rem}.join-content h2{font-size:1.5rem}.code-input{width:60px;height:70px;font-size:1.75rem}.code-input-container{gap:.75rem}.join-actions{flex-direction:column}.join-button,.back-button{width:100%}}[data-theme=dark] .private-room-join{background:linear-gradient(135deg,#1e293b,#0f172a)}[data-theme=dark] .join-content{background:#1e293bf2;color:var(--text-primary)}[data-theme=dark] .code-input{background:#33415580;border-color:var(--border-color);color:var(--text-primary)}[data-theme=dark] .code-input:focus{border-color:var(--color-primary);background:#334155b3}[data-theme=dark] .code-input.error{border-color:var(--color-error);background:#ef44441a}[data-theme=dark] .back-button{background:#1e293bcc;color:var(--text-primary)}[data-theme=dark] .back-button:hover{background:#334155e6}.private-room-waiting{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2)}.waiting-content{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:3rem 2rem;max-width:500px;width:100%;box-shadow:var(--shadow-2xl);text-align:center}.waiting-content h2{font-family:Space Grotesk,monospace;font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:.5rem}.instruction{font-size:1rem;color:#64748b;margin-bottom:2rem}.room-code-container{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem}.room-code{font-family:Space Grotesk,monospace;font-size:3rem;font-weight:800;letter-spacing:.5rem;color:var(--primary);background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:1rem 2rem;border:3px dashed var(--primary);border-radius:var(--radius-lg);-webkit-user-select:all;user-select:all}.copy-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border:none;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-md);transition:all .3s ease}.copy-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.copy-button:active{transform:translateY(0)}.copy-button.copied{background:linear-gradient(135deg,var(--success) 0%,#059669 100%)}.puzzle-preview{margin-bottom:2rem;padding:1.5rem;background:#6366f11a;border-radius:var(--radius-lg)}.puzzle-preview h3{font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}.puzzle-info{display:flex;align-items:center;justify-content:center;gap:1rem}.puzzle-word{font-family:Space Grotesk,monospace;font-size:1.5rem;font-weight:700;color:var(--primary)}.arrow{font-size:1.5rem;color:var(--primary)}.players-section{margin:2rem 0;padding:1.5rem;background:#6366f10d;border-radius:var(--radius-lg)}.players-section h3{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:1rem;text-align:center}.players-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.player-slot{padding:1rem;background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .3s ease}.player-slot.filled{border-color:var(--success);background:#10b9810d}.player-slot.empty{border-style:dashed;opacity:.6}.player-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;transition:all .3s ease}.player-slot.filled .player-icon{background:var(--success);color:#fff}.player-slot.empty .player-icon{background:var(--bg-tertiary);color:var(--text-secondary)}.player-name{font-size:.9rem;font-weight:600;color:var(--text-primary);text-align:center;word-break:break-word}.player-slot.empty .player-name{color:var(--text-secondary);font-style:italic}.waiting-status{margin-bottom:2rem}.spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid rgba(99,102,241,.1);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}.waiting-status p{font-size:1rem;color:#64748b;font-weight:500}.waiting-actions{display:flex;justify-content:center}.cancel-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#ef4444;background:#fff;border:2px solid #ef4444;border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease}.cancel-button:hover{background:#ef4444;color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}[data-theme=dark] .private-room-waiting{background:linear-gradient(135deg,#1e293b,#0f172a)}[data-theme=dark] .waiting-content{background:#1e293bf2;color:var(--text-primary)}[data-theme=dark] .instruction{color:var(--text-secondary)}[data-theme=dark] .puzzle-preview{background:#6366f133}[data-theme=dark] .puzzle-preview h3{color:var(--text-secondary)}[data-theme=dark] .players-section{background:#6366f11a}[data-theme=dark] .player-slot{background:#33415580;border-color:var(--border-color)}[data-theme=dark] .player-slot.filled{background:#10b9811a}[data-theme=dark] .player-slot.empty .player-icon{background:#47556980}[data-theme=dark] .waiting-status p{color:var(--text-secondary)}[data-theme=dark] .cancel-button{background:#1e293bcc;color:#ef4444}[data-theme=dark] .cancel-button:hover{background:#ef4444;color:#fff}@media(max-width:768px){.waiting-content{padding:2rem 1.5rem}.waiting-content h2{font-size:1.5rem}.room-code{font-size:2rem;letter-spacing:.3rem;padding:.75rem 1.5rem}.puzzle-word{font-size:1.25rem}}.ai-difficulty-select{min-height:100vh;padding:2rem;display:flex;justify-content:center;align-items:flex-start}.difficulty-container{width:100%;max-width:900px;animation:fadeIn .3s ease-in}.difficulty-header{text-align:center;margin-bottom:3rem;position:relative}.back-button{position:absolute;left:0;top:0;padding:.75rem 1.5rem;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.back-button:hover{background:var(--bg-tertiary);transform:translate(-4px)}.difficulty-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.difficulty-subtitle{font-size:1.1rem;color:var(--text-secondary)}.section{margin-bottom:3rem}.section-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1.5rem}.difficulty-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.difficulty-card{position:relative;padding:2rem;background:var(--bg-secondary);border:2px solid var(--border-light);border-radius:var(--radius-xl);cursor:pointer;transition:all .3s ease}.difficulty-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--diff-color)}.difficulty-card.selected{border-color:var(--diff-color);background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(102,126,234,.1) 100%);box-shadow:0 0 20px #667eea4d}.difficulty-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.difficulty-icon{font-size:2.5rem}.difficulty-label{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.difficulty-description{color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}.difficulty-stats{margin-top:1rem}.stat{display:flex;justify-content:space-between;padding:.5rem 0;border-top:1px solid var(--border-light)}.stat-label{color:var(--text-secondary);font-size:.9rem}.stat-value{color:var(--text-primary);font-weight:600;font-size:.9rem}.selected-indicator{position:absolute;top:1rem;right:1rem;padding:.5rem 1rem;background:var(--diff-color);color:#fff;border-radius:var(--radius-full);font-size:.875rem;font-weight:700}.level-selector{margin-bottom:1.5rem}.level-label{display:block;font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.level-dropdown{width:100%;padding:1rem 1.5rem;background:var(--bg-secondary);border:2px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);font-size:1rem;font-family:inherit;cursor:pointer;transition:all .2s ease}.level-dropdown:hover{border-color:var(--primary)}.level-dropdown:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.level-preview{padding:1.5rem;background:var(--bg-secondary);border:2px solid var(--border-light);border-radius:var(--radius-lg)}.preview-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.preview-content{display:flex;flex-direction:column;gap:1rem}.preview-words{display:flex;align-items:center;justify-content:center;gap:1rem}.preview-word{padding:1rem 2rem;font-size:1.5rem;font-weight:800;font-family:Space Grotesk,monospace;border-radius:var(--radius-lg)}.preview-word.start{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.preview-word.target{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}.preview-word.random{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:3rem}.preview-arrow{font-size:2rem;color:var(--text-secondary)}.preview-info{display:flex;justify-content:center;align-items:center;gap:1.5rem}.preview-badge{padding:.5rem 1rem;background:var(--primary);color:#fff;border-radius:var(--radius-full);font-size:.875rem;font-weight:700;text-transform:capitalize}.preview-detail{color:var(--text-secondary);font-size:.95rem}.start-race-section{text-align:center;padding:2rem 0}.start-race-button{padding:1.25rem 3rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:var(--radius-full);color:#fff;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-lg);display:inline-flex;align-items:center;gap:.75rem}.start-race-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-2xl)}.start-race-button:active{transform:translateY(0)}.start-icon{font-size:1.5rem}.race-note{margin-top:1.5rem;color:var(--text-secondary);font-size:.95rem;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.ai-difficulty-select{padding:1rem}.difficulty-title{font-size:2rem}.difficulty-cards{grid-template-columns:1fr}.back-button{position:static;margin-bottom:1rem;width:100%}.preview-words{flex-direction:column}.preview-arrow{transform:rotate(90deg)}}.race-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in}.race-modal{background:var(--bg-secondary);border-radius:var(--radius-xl);padding:3rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;border:2px solid var(--border-light);box-shadow:var(--shadow-2xl);animation:scaleIn .3s ease-out}.race-modal::-webkit-scrollbar{width:8px}.race-modal::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-lg)}.race-modal::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-lg)}.race-modal::-webkit-scrollbar-thumb:hover{background:var(--primary)}.race-modal.victory{border-color:#10b981;box-shadow:0 0 40px #10b9814d}.race-modal.defeat{border-color:#667eea;box-shadow:0 0 40px #667eea4d}.race-modal-header{text-align:center;margin-bottom:2rem}.race-modal-icon{font-size:5rem;margin-bottom:1rem;animation:bounceIn .5s ease-out}.race-modal-title{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}.victory .race-modal-title{background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.defeat .race-modal-title{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.race-modal-stats{margin-bottom:2rem}.stats-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-bottom:1.5rem}.stat-card{background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;border:2px solid var(--border-light)}.player-stat{border-color:#10b981}.ai-stat{border-color:#667eea}.stat-icon{font-size:2rem;margin-bottom:.5rem}.stat-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.stat-divider{font-size:1.25rem;font-weight:600;color:var(--text-secondary);text-align:center}.difficulty-display{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.75rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);margin-bottom:1.5rem}.difficulty-label{font-size:.9rem;color:var(--text-secondary)}.difficulty-value{font-size:1rem;font-weight:700;color:var(--primary)}.victory-message,.defeat-message{text-align:center;padding:1.5rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);line-height:1.6}.victory-message p,.defeat-message p{color:var(--text-primary);margin-bottom:.5rem}.efficiency-note{color:#10b981!important;font-weight:600;margin-top:1rem!important}.puzzle-selector{margin-bottom:2rem;padding:1.5rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);border:2px solid var(--border-light)}.puzzle-selector-label{display:block;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.puzzle-selector-dropdown{width:100%;padding:.875rem 1rem;background:var(--bg-secondary);border:2px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);font-size:1rem;font-weight:600;font-family:Space Grotesk,monospace;cursor:pointer;transition:all .2s ease}.puzzle-selector-dropdown:hover{border-color:var(--primary)}.puzzle-selector-dropdown:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.race-modal-actions{display:flex;flex-direction:column;gap:.75rem}.race-modal-button{padding:1rem 2rem;border:none;border-radius:var(--radius-lg);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.race-modal-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.race-modal-button:active{transform:translateY(0)}.race-modal-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.race-modal-button.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--border-light)}.race-modal-button.tertiary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-light)}.button-icon{font-size:1.25rem}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media(max-width:768px){.race-modal{padding:2rem 1.5rem}.race-modal-title{font-size:2rem}.stats-grid{grid-template-columns:1fr;gap:1rem}.stat-divider{display:none}}.race-game{min-height:100vh;padding:2rem;display:flex;flex-direction:column}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in}.countdown-number{font-size:8rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:scaleIn .5s ease-out}.countdown-text{font-size:2rem;color:var(--text-secondary);margin-top:1rem}.race-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem 2rem;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px solid var(--border-light)}.resign-button{padding:.75rem 1.5rem;background:var(--error);border:none;border-radius:var(--radius-lg);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.resign-button:hover{background:#dc2626;transform:translateY(-2px);box-shadow:var(--shadow-md)}.race-title{display:flex;flex-direction:column;align-items:center;gap:.5rem}.race-level{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.race-difficulty{font-size:.9rem;padding:.25rem .75rem;background:var(--primary);color:#fff;border-radius:var(--radius-full);font-weight:600}.race-target{font-size:1.1rem;color:var(--text-secondary)}.target-word{font-weight:700;color:var(--primary);font-family:Space Grotesk,monospace}.race-boards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;flex:1}.race-board{background:var(--bg-secondary);border-radius:var(--radius-xl);padding:2rem;border:2px solid var(--border-light);display:flex;flex-direction:column}.player-board{border-color:#10b981;box-shadow:0 0 20px #10b9811a}.ai-board{border-color:#667eea;box-shadow:0 0 20px #667eea1a}.board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border-light)}.board-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.board-icon{font-size:1.75rem}.board-stats{display:flex;gap:.5rem}.stat-badge{padding:.5rem 1rem;background:var(--bg-tertiary);border-radius:var(--radius-full);font-size:.9rem;font-weight:600;color:var(--text-primary)}.ai-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.target-display{text-align:center;margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border-radius:var(--radius-lg);border:2px solid var(--primary);box-shadow:0 0 20px #6366f133}.target-label{font-size:.9rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.target-word-large{font-size:2.5rem;font-weight:800;font-family:Space Grotesk,monospace;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.15em;text-transform:uppercase;animation:pulse 2s ease-in-out infinite}.word-display{display:flex;justify-content:center;gap:.75rem;margin-bottom:2rem}.letter-box{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;font-family:Space Grotesk,monospace;background:var(--bg-tertiary);border:2px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);transition:all .2s ease}.letter-box.clickable{cursor:pointer}.letter-box.clickable:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-md)}.letter-box.ai-letter{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea}.word-display.ai-thinking .letter-box{animation:pulse 1.5s ease-in-out infinite}.ai-thinking-indicator{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem}.thinking-dots{display:flex;gap:.5rem}.thinking-dots span{width:8px;height:8px;background:#667eea;border-radius:50%;animation:bounce 1.4s ease-in-out infinite}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}.thinking-text{font-size:.9rem;color:var(--text-secondary);font-style:italic}.move-history{flex:1;overflow-y:auto}.history-title{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem}.history-list{line-height:2;color:var(--text-primary)}.history-word{font-family:Space Grotesk,monospace;font-weight:600}.error-message-race{text-align:center;color:var(--error);font-weight:600;margin-bottom:1rem;padding:.75rem;background:#ef44441a;border-radius:var(--radius-lg);border:1px solid var(--error)}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.success-glow{animation:successGlow 1s ease-out}.invalid-shake{animation:invalidShake .5s ease-out}@keyframes successGlow{0%{box-shadow:0 0 #10b98100}50%{box-shadow:0 0 30px #10b981cc}to{box-shadow:0 0 #10b98100}}@keyframes invalidShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@media(max-width:1024px){.race-boards{grid-template-columns:1fr;gap:1.5rem}.race-header{flex-direction:column;gap:1rem}.resign-button{width:100%}}@media(max-width:768px){.race-game{padding:1rem}.countdown-number{font-size:6rem}.target-word-large{font-size:2rem}.target-display{padding:1rem}.letter-box{width:3rem;height:3rem;font-size:1.5rem}.race-board{padding:1rem}}.landing-page{min-height:100vh;padding:4rem 2rem 2rem;position:relative;overflow-x:hidden;animation:fadeIn .6s ease-out}.landing-header{position:absolute;top:2rem;right:2rem;z-index:10;animation:slideDown .6s ease-out}.btn-login{background:transparent;color:var(--primary);border:2px solid var(--primary);padding:.75rem 1.75rem;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition-base)}.btn-login:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.landing-page:before,.landing-page:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}.landing-page:before{width:500px;height:500px;top:-100px;right:-100px;background:radial-gradient(circle,var(--primary-light) 0%,transparent 70%);opacity:.15}.landing-page:after{width:400px;height:400px;bottom:100px;left:-100px;background:radial-gradient(circle,var(--secondary) 0%,transparent 70%);opacity:.1}.hero{text-align:center;max-width:900px;margin:0 auto 6rem;animation:slideUp .8s ease-out}.title{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Space Grotesk,sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem;line-height:1.1}.tagline{font-size:clamp(1.1rem,2.5vw,1.5rem);color:var(--text-secondary);font-weight:500;margin-bottom:3rem}.word-example{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.example-word{background:var(--gradient-primary);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-family:Space Grotesk,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.1em;box-shadow:var(--shadow-lg);animation:bounceIn .6s ease-out;animation-fill-mode:both}.example-word:nth-child(1){animation-delay:.1s}.example-word:nth-child(3){animation-delay:.2s}.example-word:nth-child(5){animation-delay:.3s}.example-word:nth-child(7){animation-delay:.4s}.arrow{color:var(--primary);font-size:1.5rem;font-weight:700}.cta-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary,.btn-outline{padding:1.25rem 2.5rem;border:none;border-radius:var(--radius-md);font-family:Plus Jakarta Sans,sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;text-decoration:none;display:inline-block}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.btn-secondary{background:var(--surface);color:var(--primary);border:2px solid var(--primary);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--primary-light);color:#fff;border-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}.btn-primary:hover:before{left:100%}section{margin-bottom:6rem;animation:slideUp .8s ease-out;animation-fill-mode:both}.features{animation-delay:.2s}.how-it-works{animation-delay:.3s}.benefits{animation-delay:.4s}.section-title{text-align:center;font-size:clamp(2rem,4vw,2.5rem);font-weight:800;font-family:Space Grotesk,sans-serif;color:var(--text-primary);margin-bottom:3rem}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin:0 auto}.feature-card{background:var(--gradient-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);transition:all var(--transition-base);text-align:center}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}.feature-icon{font-size:3rem;margin-bottom:1rem;animation:bounce 2s infinite;animation-play-state:paused}.feature-card:hover .feature-icon{animation-play-state:running}.feature-card h3{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem}.feature-card p{color:var(--text-secondary);line-height:1.6;font-size:.95rem}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1000px;margin:0 auto 2rem}.step{text-align:center;position:relative}.step-number{width:60px;height:60px;background:var(--gradient-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:800;margin:0 auto 1.5rem;box-shadow:var(--shadow-md)}.step h3{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem}.step p{color:var(--text-secondary);line-height:1.6}.btn-link{background:none;border:none;color:var(--primary);font-size:1rem;font-weight:600;cursor:pointer;padding:.5rem 1rem;transition:all var(--transition-base);display:block;margin:0 auto}.btn-link:hover{color:var(--primary-dark);transform:translate(4px)}.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto 2rem}.benefit-card{background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow-md);transition:all var(--transition-base);position:relative}.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.benefit-card-featured{border-color:var(--primary);background:linear-gradient(145deg,var(--surface) 0%,var(--bg-secondary) 100%)}.featured-badge{position:absolute;top:-12px;right:20px;background:var(--gradient-primary);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-md)}.benefit-card h3{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1.5rem}.benefit-card ul{list-style:none;padding:0;margin-bottom:2rem}.benefit-card li{color:var(--text-secondary);position:relative;padding:.5rem 0 .5rem 1.5rem}.benefit-card li:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}.benefit-card button{width:100%}.login-prompt{text-align:center;color:var(--text-secondary);margin-top:2rem}.btn-text{background:none;border:none;color:var(--primary);font-weight:600;cursor:pointer;text-decoration:underline;padding:0;margin-left:.5rem;transition:color var(--transition-base)}.btn-text:hover{color:var(--primary-dark)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@media(max-width:768px){.landing-page{padding:3rem 1.5rem}.landing-header{top:1.5rem;right:1.5rem}.hero{margin-bottom:4rem}.features-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.steps-grid{grid-template-columns:1fr;gap:2rem}.benefits-grid{grid-template-columns:1fr;gap:1.5rem}.word-example{gap:.75rem}.example-word{font-size:1.25rem;padding:.625rem 1.25rem}section{margin-bottom:4rem}}@media(max-width:480px){.landing-page{padding:2rem 1rem}.landing-header{top:1rem;right:1rem}.btn-login{padding:.625rem 1.25rem;font-size:.9rem}.title{font-size:2rem}.tagline{font-size:1rem}.features-grid{grid-template-columns:1fr}.cta-buttons{flex-direction:column;width:100%}.btn-primary,.btn-secondary,.btn-outline{width:100%;padding:1rem 1.5rem}.word-example{gap:.5rem}.example-word{font-size:1rem;padding:.5rem 1rem}.arrow{font-size:1.25rem}.benefit-card{padding:2rem 1.5rem}.section-title{font-size:1.75rem}}@media(prefers-reduced-motion:reduce){.landing-page,section,.example-word,.feature-card,.benefit-card,.btn-primary,.btn-secondary{animation:none}.feature-icon{animation:none!important}*{transition:none!important}}[data-theme=dark] .feature-card,[data-theme=dark] .benefit-card{box-shadow:var(--shadow-lg)}[data-theme=dark] .feature-card:hover,[data-theme=dark] .benefit-card:hover{box-shadow:var(--shadow-2xl)}[data-theme=dark] .landing-page:before{opacity:.08}[data-theme=dark] .landing-page:after{opacity:.05}:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary: #06b6d4;--secondary-dark: #0891b2;--accent: #f59e0b;--success: #10b981;--success-dark: #059669;--error: #ef4444;--error-dark: #dc2626;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--surface: #ffffff;--surface-hover: #f8fafc;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #94a3b8;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-bg: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);--gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-glow: 0 0 20px rgba(99, 102, 241, .3);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.68, -.55, .265, 1.55)}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--surface: #1e293b;--surface-hover: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-tertiary: #64748b;--border-light: #334155;--border-medium: #475569;--border-dark: #64748b;--gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--gradient-card: linear-gradient(145deg, #1e293b 0%, #334155 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(99, 102, 241, .5)}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text-primary);background:var(--gradient-bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:Space Grotesk,Plus Jakarta Sans,sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--text-primary)}h1{font-size:clamp(2rem,5vw,3rem)}h2{font-size:clamp(1.5rem,4vw,2rem)}h3{font-size:clamp(1.25rem,3vw,1.5rem)}button{font-family:inherit;border:none;cursor:pointer;transition:all var(--transition-base);font-weight:600}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}button:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:768px){body{font-size:15px}}@media(max-width:480px){body{font-size:14px}}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%)}.loading-container{text-align:center;color:#fff}.loading-container h1{font-family:Space Grotesk,monospace;font-size:2.5rem;font-weight:800;margin-bottom:2rem;letter-spacing:.05em}.loading-spinner{width:50px;height:50px;margin:0 auto 1.5rem;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{font-size:1.1rem;opacity:.9}