*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--bg-elevated:#334155;--bg-overlay:rgba(0,0,0,0.75);--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--correct:#10b981;--present:#f59e0b;--absent:#475569;--border:#334155;--border-active:#64748b;--key-bg:#475569;--key-hover:#64748b;--accent:#3b82f6;--accent-hover:#2563eb;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -2px rgba(0,0,0,0.3);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.5),0 10px 10px -5px rgba(0,0,0,0.4);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);}body.theme-light{--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-card:#ffffff;--bg-elevated:#e2e8f0;--bg-overlay:rgba(0,0,0,0.4);--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--border:#e2e8f0;--border-active:#94a3b8;--key-bg:#cbd5e1;--key-hover:#94a3b8;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.15),0 10px 10px -5px rgba(0,0,0,0.1);}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0;overflow-x:hidden;transition:background-color var(--transition-base),color var(--transition-base);}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}.nav-overlay{position:fixed;inset:0;background-color:var(--bg-overlay);backdrop-filter:blur(4px);z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition-base);}.nav-overlay.active{opacity:1;visibility:visible;}.nav-panel{position:fixed;top:0;left:-320px;width:320px;height:100vh;background-color:var(--bg-card);z-index:1001;box-shadow:var(--shadow-xl);transition:transform var(--transition-base);overflow-y:auto;}.nav-panel.active{transform:translateX(320px);}.nav-container{display:flex;flex-direction:column;height:100%;padding:1.5rem;}.nav-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;}.nav-header h2{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;color:var(--text-primary);}.btn-close-nav{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:0.5rem;border-radius:0.5rem;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;}.btn-close-nav:hover{background:var(--bg-elevated);color:var(--text-primary);}.nav-links{display:flex;flex-direction:column;gap:0.5rem;flex-grow:1;}.nav-link{display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem;border:none;background:transparent;color:var(--text-secondary);font-size:1rem;font-weight:500;border-radius:0.75rem;cursor:pointer;transition:all var(--transition-fast);text-align:left;font-family:inherit;}.nav-link:hover{background:var(--bg-elevated);color:var(--text-primary);}.nav-link.active{background:var(--accent);color:white;}.nav-divider{height:1px;background:var(--border);margin:1rem 0;}.nav-setting{display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem;}.setting-icon{color:var(--text-muted);display:flex;align-items:center;}.setting-text{flex-grow:1;font-size:1rem;font-weight:500;color:var(--text-secondary);}.nav-footer{margin-top:auto;padding-top:1rem;}.btn-nav-reset{width:100%;padding:0.75rem;background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:0.75rem;font-size:0.9rem;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;}.btn-nav-reset:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,0.1);}.container{width:100%;max-width:500px;padding:1rem;display:flex;flex-direction:column;min-height:100vh;}.header{margin-bottom:1.5rem;}.header-content{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;}.btn-menu{border:none;background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;padding:0.5rem;border-radius:0.5rem;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}.btn-menu:hover{background:var(--key-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}.title{font-family:'Outfit',sans-serif;font-size:2.25rem;font-weight:700;letter-spacing:-0.02em;background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}.header-actions{display:flex;gap:0.5rem;}.btn-icon{background:var(--bg-elevated);border:none;border-radius:0.5rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);}.btn-icon:hover{background:var(--key-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}.mode-badge-container{display:flex;justify-content:center;}.active-mode-tag{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding:0.25rem 0.75rem;background:var(--bg-elevated);border-radius:2rem;color:var(--text-muted);}.stats-overview{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:1.5rem;background:var(--bg-secondary);border-radius:1rem;border:1px solid var(--border);}.stats-overview .stat-box{gap:0.75rem;padding:1rem;background:var(--bg-elevated);border-radius:0.75rem;transition:all var(--transition-fast);}.stats-overview .stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}.stats-overview .stat-count{font-size:2.5rem;background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}.stats-overview .stat-desc{font-size:0.8rem;letter-spacing:0.08em;}.game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-bottom:1.5rem;background:var(--bg-secondary);padding:0.875rem;border-radius:1rem;border:1px solid var(--border);box-shadow:var(--shadow-md);}.stat-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.25rem;}.stat-count{font-size:1.5rem;font-weight:700;color:var(--text-primary);font-family:'Outfit',sans-serif;line-height:1;}.stat-desc{font-size:0.65rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:0.05em;}.game-board{display:grid;grid-template-rows:repeat(6,1fr);gap:0.5rem;margin-bottom:1.5rem;flex-shrink:0;}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:0.5rem;}.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;background-color:var(--bg-card);border:2px solid var(--border);border-radius:0.5rem;color:var(--text-primary);text-transform:uppercase;transition:all var(--transition-fast);}.tile.filled{border-color:var(--border-active);}.tile.correct{background-color:var(--correct);border-color:var(--correct);color:white;}.tile.present{background-color:var(--present);border-color:var(--present);color:white;}.tile.absent{background-color:var(--absent);border-color:var(--absent);color:white;opacity:0.7;}.tile.hint-tile{background:linear-gradient(135deg,#06b6d4 0%,#0891b2 100%);border-color:#06b6d4;color:white;}.hint-container{display:flex;justify-content:center;margin-bottom:1.5rem;min-height:2.5rem;}.btn-hint{background:var(--bg-elevated);border:1px solid var(--border);border-radius:0.75rem;color:var(--text-primary);padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;display:flex;align-items:center;gap:0.5rem;box-shadow:var(--shadow-sm);}.btn-hint:hover:not(:disabled){background:var(--key-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}.btn-hint:disabled{opacity:0.4;cursor:not-allowed;}.keyboard{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem;}.keyboard-row{display:flex;gap:0.375rem;justify-content:center;}.key{background:var(--key-bg);border:none;border-radius:0.375rem;color:white;font-weight:600;font-size:0.875rem;padding:1.125rem 0;min-width:2.5rem;flex:1;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);text-transform:uppercase;font-family:inherit;}.key:hover{background:var(--key-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}.key:active{transform:translateY(0);box-shadow:var(--shadow-sm);}.key.wide{flex:1.5;font-size:0.75rem;}.key.correct{background:var(--correct);border-color:var(--correct);}.key.present{background:var(--present);border-color:var(--present);}.key.absent{background:var(--absent);border-color:var(--absent);opacity:0.5;}.message-container{min-height:2.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;}.message{background:var(--bg-elevated);color:var(--text-primary);padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;font-size:0.875rem;box-shadow:var(--shadow-md);opacity:0;transform:translateY(-0.5rem);transition:all var(--transition-base);}.message.show{opacity:1;transform:translateY(0);}.message.success{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;}.message.error{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:white;}.message.info{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:white;}.toggle{position:relative;display:inline-block;width:3rem;height:1.75rem;cursor:pointer;flex-shrink:0;}.toggle input{opacity:0;width:0;height:0;}.toggle-slider{position:absolute;inset:0;background:var(--bg-elevated);border-radius:1.75rem;transition:all var(--transition-base);}.toggle-slider::before{content:'';position:absolute;height:1.25rem;width:1.25rem;left:0.25rem;bottom:0.25rem;background:white;border-radius:50%;transition:all var(--transition-base);}.toggle input:checked+.toggle-slider{background:var(--accent);}.toggle input:checked+.toggle-slider::before{transform:translateX(1.25rem);}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background-color:var(--bg-overlay);backdrop-filter:blur(8px);z-index:2000;padding:1rem;}.modal.active{display:flex;}.modal-content{background-color:var(--bg-card);width:100%;max-width:420px;max-height:90vh;border-radius:1.5rem;box-shadow:var(--shadow-xl);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;}.modal-header{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0;}.modal-header h2{font-size:1.5rem;font-weight:700;color:var(--text-primary);}.btn-close{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:0.25rem;display:flex;align-items:center;justify-content:center;border-radius:0.375rem;transition:all var(--transition-fast);}.btn-close:hover{background:var(--bg-elevated);color:var(--text-primary);}.modal-body{padding:1.5rem;overflow-y:auto;flex-grow:1;}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border);}.setting-item:last-child{border-bottom:none;}.setting-info{flex:1;}.setting-label{font-weight:600;color:var(--text-primary);margin-bottom:0.25rem;}.setting-desc{font-size:0.875rem;color:var(--text-muted);}.instruction-panel .instructions{list-style:none;margin:1rem 0;padding:0;}.instruction-panel li{font-size:0.9rem;margin-bottom:0.75rem;color:var(--text-secondary);padding-left:1.25rem;position:relative;}.instruction-panel li::before{content:'\2022';position:absolute;left:0;color:var(--text-muted);font-weight:bold;}.demo-section{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0;}.tile-demo{display:flex;align-items:center;gap:1rem;}.tile-demo .tile{width:3rem;height:3rem;font-size:1.5rem;flex-shrink:0;}.tile-demo p{font-size:0.875rem;color:var(--text-secondary);margin:0;}.reduced-text{font-size:0.875rem;color:var(--text-muted);margin-top:1rem;}.btn-primary{width:100%;padding:0.875rem;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);color:white;border:none;border-radius:0.75rem;font-weight:700;font-size:0.95rem;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);font-family:inherit;}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-md);}.btn-share{background:var(--bg-elevated);border:1px solid var(--border);border-radius:0.5rem;color:var(--text-primary);padding:0.75rem 1.25rem;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;box-shadow:var(--shadow-sm);}.btn-share:hover{background:var(--key-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}.game-result{text-align:center;font-size:2rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary);}.word-reveal{text-align:center;font-size:1.125rem;font-weight:600;color:var(--text-secondary);margin-bottom:1.5rem;}.share-container{background:var(--bg-elevated);border-radius:0.75rem;padding:1rem;margin-bottom:1rem;}.share-grid{font-family:monospace;font-size:1.25rem;line-height:1.4;text-align:center;margin-bottom:1rem;white-space:pre;}.seo-content{margin-top:2rem;padding:1.5rem;background:var(--bg-card);border-radius:1rem;border:1px solid var(--border);}.seo-content p{font-size:0.875rem;color:var(--text-muted);line-height:1.6;}.footer{margin-top:2rem;padding:1.5rem 0;text-align:center;color:var(--text-muted);font-size:0.75rem;}@keyframes fadeIn{from{opacity:0;transform:translateY(0.5rem);}to{opacity:1;transform:translateY(0);}}@keyframes pop{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}@keyframes flip{0%{transform:rotateX(0);}50%{transform:rotateX(90deg);}100%{transform:rotateX(0);}}@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-5px);}20%,40%,60%,80%{transform:translateX(5px);}}body:not(.animations-disabled) .tile.filled:not(.correct):not(.present):not(.absent):not(.hint-tile){animation:pop 0.1s ease-out;}body:not(.animations-disabled) .row.shake{animation:shake 0.5s ease-in-out;}@media (max-width:640px){.title{font-size:1.75rem;}.tile{font-size:1.5rem;}.key{padding:0.875rem 0;min-width:2rem;font-size:0.75rem;}.key.wide{font-size:0.7rem;}.stat-count{font-size:1.25rem;}.stat-desc{font-size:0.6rem;}.stats-overview{gap:1rem;padding:1rem;}.stats-overview .stat-count{font-size:2rem;}.modal-content{max-width:95%;}}@media (max-width:400px){.container{padding:0.75rem;}.tile{font-size:1.25rem;}.key{padding:0.75rem 0;font-size:0.7rem;}.btn-icon{width:2rem;height:2rem;}.btn-icon svg{width:18px;height:18px;}}@media (max-height:700px){.game-board{margin-bottom:1rem;}.keyboard{margin-bottom:1rem;}.tile{font-size:1.5rem;}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}body.animations-disabled *{animation:none !important;transition:none !important;}.footer{margin-top:5rem;padding:3rem 0 2rem;position:relative;width:100%;}.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;max-width:600px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-light),transparent);opacity:0.5;}.footer-content{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;}.footer-brand{display:flex;flex-direction:column;gap:0.5rem;}.footer-logo{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.025em;background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;}.footer-tagline{color:var(--text-secondary);font-size:0.875rem;font-weight:500;margin:0;}.footer-links{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;}.footer-link{color:var(--text-secondary);text-decoration:none;font-size:0.875rem;font-weight:600;padding:0.5rem 1rem;border-radius:0.5rem;transition:all var(--transition-fast);position:relative;}.footer-link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-light));transition:width var(--transition-base);}.footer-link:hover{color:var(--accent-light);background:var(--bg-elevated);}.footer-link:hover::after{width:80%;}.footer-bottom{display:flex;flex-direction:column;gap:0.5rem;padding-top:1.5rem;border-top:1px solid var(--border);width:100%;max-width:600px;}.footer-copyright{color:var(--text-primary);font-size:0.875rem;font-weight:600;margin:0;}.footer-description{color:var(--text-muted);font-size:0.75rem;margin:0;}
.site-footer{background-color:#0f172a;color:#cbd5e1;padding:4rem 1.5rem 1.5rem;margin-top:6rem;border-top:1px solid rgba(255,255,255,0.05);font-family:'Inter',-apple-system,sans-serif;width:100%}.footer-container{max-width:1200px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-bottom:3rem}.footer-logo-container a{color:#fff;font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;margin:0 0 1rem 0;letter-spacing:-.02em;text-decoration:none}.footer-logo-container span{background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.footer-desc,.footer-trust-text{font-size:.95rem;line-height:1.6;color:#94a3b8;margin:0 0 1.5rem 0}.footer-tagline{font-size:.85rem;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;display:block;opacity:.8}.social-icons{margin-top:15px;display:flex;gap:15px}.social-icons .icon{color:#fff;font-size:14px;opacity:.7;cursor:pointer;transition:opacity .2s}.social-icons .icon:hover{opacity:1}.footer-heading{color:#fff;font-size:1.1rem;font-weight:700;margin:0 0 1.25rem 0;letter-spacing:.02em}.footer-links-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.footer-links-list a{color:#cbd5e1;text-decoration:none;font-size:.95rem;transition:color .2s}.footer-links-list a:hover{color:#3b82f6}.btn-footer-cta{display:inline-block;background-color:#3b82f6;color:#fff;text-decoration:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.95rem;transition:background-color .2s,transform .2s}.btn-footer-cta:hover{background-color:#2563eb;transform:translateY(-2px)}.footer-bottom-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;text-align:center;font-size:.85rem;color:#64748b}@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem}}@media (max-width:500px){.footer-grid{grid-template-columns:1fr;gap:2rem}.footer-col{text-align:center}.footer-links-list{align-items:center}}
.social-icons .icon{color:#fff;font-size:14px;opacity:.7;cursor:default;pointer-events:none}.social-icons .icon:hover{opacity:.7}