*,*:after,*:before{box-sizing:border-box;font-family:Arial}:root{--primary: #8a2be2;--primary-light: #9d4eed;--primary-dark: #6a1cb2;--secondary: #ff3e9d;--text-light: #f8f9fa;--text-dark: #212529;--bg-dark: #121212;--bg-darker: #0a0a0a;--bg-light: #f8f9fa;--card-bg: #1e1e1e;--card-hover: #2a2a2a;--success: #538d4e;--warning: #cd9607;--danger: #ef4444;--border-radius: 12px;--transition: .3s ease;--tile-size: 60px;--tile-gap: .5rem;--tile-font-size: 2rem}@media (max-width: 768px){:root{--tile-size: 50px;--tile-gap: .4rem;--tile-font-size: 1.75rem}}@media (max-width: 480px){:root{--tile-size: 45px;--tile-gap: .3rem;--tile-font-size: 1.5rem}}@media (max-width: 480px){.guess-grid[style*="repeat(6, var(--tile-size))"]{--tile-size: 40px;--tile-font-size: 1.25rem}}@media (max-width: 360px){:root{--tile-size: 35px;--tile-gap: .25rem;--tile-font-size: 1.25rem}.guess-grid[style*="repeat(6, var(--tile-size))"]{--tile-size: 30px;--tile-font-size: 1rem}}body{margin:0;font-family:Inter,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-dark);color:var(--text-light)}.app-container{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem}.app-header{background:var(--bg-darker);padding:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.app-header .container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 1rem}.app-logo{font-size:2.5rem;font-weight:800;color:var(--primary);text-decoration:none;letter-spacing:-.05em;position:relative;display:inline-block}.app-logo:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform .3s ease}.app-logo:hover:after{transform:scaleX(1)}.nav-button{padding:.6rem 1.2rem;border-radius:var(--border-radius);background:#8a2be226;color:var(--primary-light);font-weight:600;text-decoration:none;transition:var(--transition);border:none;cursor:pointer;font-size:.9rem;white-space:nowrap}.nav-button:hover{background:#8a2be240;transform:translateY(-2px)}.app-footer{background:var(--bg-darker);padding:1rem;text-align:center;font-size:.6rem;color:#fff3;border-top:1px solid rgba(255,255,255,.1)}@media (max-width: 480px){.app-footer{padding:.5rem;font-size:.5rem}}.mode-selection{text-align:center;max-width:900px;margin:0 auto}.mode-title{font-size:3rem;margin-bottom:.5rem;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.03em}.mode-subtitle{font-size:1.2rem;color:#ffffffb3;margin-bottom:1rem}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:2rem}.mode-card{background:var(--card-bg);border-radius:var(--border-radius);padding:1.5rem;text-align:left;box-shadow:0 4px 20px #0003;transition:var(--transition);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column}.mode-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.mode-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000004d;background:var(--card-hover)}.mode-card:hover:before{transform:scaleX(1)}.mode-card h2{font-size:2rem;margin-top:0;margin-bottom:.5rem;color:var(--primary-light)}.mode-card p{color:#ffffffb3;font-size:.9rem;margin-bottom:1rem}.progress-container{width:100%;height:.5rem;background-color:#ffffff1a;border-radius:999px;overflow:hidden;margin:.75rem 0;position:relative}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-dark),var(--primary));border-radius:999px;transition:width .5s ease}.progress-text{display:block;font-size:.75rem;color:#fff9;margin-bottom:1rem;text-align:center}.letter-examples{display:flex;gap:.5rem;margin-bottom:1.5rem;justify-content:center}.letter-box{width:40px;height:40px;background:#ffffff1a;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-light);border:1px solid rgba(255,255,255,.2)}.play-button{background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:50px;padding:.8rem 1.5rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-block;text-decoration:none;text-align:center;font-size:1rem}.play-button:hover{background:linear-gradient(90deg,var(--primary-light),var(--primary));transform:translateY(-2px);box-shadow:0 5px 15px #8a2be24d}.game-header{display:flex;justify-content:space-between;align-items:center}.game-title{font-size:1.8rem;font-weight:700;margin:0;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeIn .5s ease forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.keyboard{margin:1rem auto;display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px;-webkit-user-select:none;user-select:none}@media (max-width: 480px){.keyboard{margin:.75rem auto;max-width:95%}.key{font-size:.9rem!important;height:45px!important;margin-right:4px!important}.key.large{font-size:.8rem!important;width:auto!important;min-width:50px}.key.regular{width:auto!important;min-width:30px}}@media (max-width: 360px){.keyboard{margin:.5rem auto;max-width:100%}.key{font-size:.8rem!important;height:38px!important;margin-right:3px!important}.key.large{min-width:45px}.key.regular{min-width:28px}}.keysRow{display:flex;width:100%;margin:0 auto 6px;touch-action:manipulation;max-width:100%}.key{font-size:1.25em;font-weight:700;border:0;padding:0;margin:0 6px 0 0;height:58px;border-radius:4px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#565758;color:#fff;flex:1;display:flex;justify-content:center;align-items:center;text-transform:uppercase;-webkit-tap-highlight-color:rgba(0,0,0,.3)}.key.large{width:65px}.key.regular{width:43px}.key>svg{width:1.75em;height:1.75em}.key:hover,.key:focus{--lightness-offset: 10%;background-color:#565758}.key.wrong{background-color:#39393c;color:var(--text-light);border:none}.key.wrong-location{--hue: 49;--saturation: 51%;--lightness: 47%;background-color:#b59f3b}.key.correct{--hue: 115;--saturation: 29%;--lightness: 43%;background-color:#538d4e}.guess-grid{display:grid;justify-content:center;width:fit-content}.guess-grid [role=cell]{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;border:none;transition:all .2s}@media (max-width: 480px){.guess-grid{grid-template-columns:repeat(5,6em);grid-template-rows:repeat(6,6em)}}.tile{font-size:2em;color:#fff;border:.05em solid hsl(240,2%,23%);text-transform:uppercase;font-weight:700;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;transition:transform .25s linear}.tile[data-state=active]{border-color:#565758}.tile[data-state=wrong],.grid-cell.wrong{background-color:#39393c;border-color:#39393c;color:var(--text-light)}.tile[data-state=wrong-location]{border:none;background-color:#b59f3b}.tile[data-state=correct]{border:none;background-color:#538d4e}.tile.shake{animation:shake .25s ease-in-out}.tile.dance{animation:dance .5s ease-in-out}.tile.flip{transform:rotateX(90deg)}@keyframes shake{10%{transform:translate(-5%)}30%{transform:translate(5%)}50%{transform:translate(-7.5%)}70%{transform:translate(7.5%)}90%{transform:translate(-5%)}to{transform:translate(0)}}@keyframes dance{20%{transform:translateY(-50%)}40%{transform:translateY(5%)}60%{transform:translateY(-25%)}80%{transform:translateY(2.5%)}90%{transform:translateY(-5%)}to{transform:translateY(0)}}.alert-container{position:fixed;top:10vh;left:50vw;transform:translate(-50%);z-index:10001;display:flex;flex-direction:column;align-items:center;padding:.75em;border-radius:.25em}.alert{pointer-events:none;background-color:#e9ebec;padding:.75em;border-radius:.25em;opacity:1;transition:opacity 5s ease-in-out;margin-bottom:.5em;color:#000;font-weight:500;box-shadow:0 2px 4px #0000001a}.alert:last-child{margin-bottom:0}.alert.hide{opacity:0}.fill-current{fill:#fff}.grid-cell{width:var(--tile-size);height:var(--tile-size);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;border:none;transition:all .2s;color:#fff}.grid-cell.empty{background-color:#3a3a3c}.grid-cell.correct{background-color:#538d4e}.grid-cell.wrong-location{background-color:#b59f3b}.grid-cell.active{background-color:#3a3a3c;border:2px solid #565758}.grid-container{display:flex;justify-content:center;width:100%;padding:20px 0}@media (max-width: 480px){.app-header{padding:.5rem}.app-header .container{padding:0 .5rem}.app-logo{font-size:1.8rem}.nav-button{padding:.4rem .8rem;font-size:.8rem;border-radius:8px;background:var(--primary-dark);color:#fff}.nav-button:hover{background:var(--primary)}.game-title{font-size:1.4rem}}@media (max-width: 360px){.app-logo{font-size:1.5rem}.nav-button{padding:.35rem .6rem;font-size:.75rem}.game-title{font-size:1.2rem}}.key[aria-label="'"]{font-weight:700;font-size:1.2em}@media (max-width: 360px){.key[aria-label="'"]{font-size:1em}}.container{max-width:600px;margin:0 auto;padding:0 16px}.game-container{display:flex;flex-direction:column;align-items:center;margin-top:16px;margin-bottom:16px}.game-header{text-align:center;margin-bottom:24px}.game-title{font-size:1.75rem;font-weight:700;margin:0;padding:16px 0}.loading-spinner{display:flex;justify-content:center;align-items:center;min-height:200px;font-size:1.25rem;color:#666}.error-container{max-width:600px;margin:32px auto;padding:16px}.error-message{background-color:#fdecea;color:#d32f2f;padding:16px;border-radius:4px;border-left:4px solid #d32f2f}