*{margin:0;padding:0;box-sizing:border-box}body{background:#121213;color:#fff;font-family:Helvetica Neue,Arial,sans-serif;overflow:hidden}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.2rem;color:#818384}.app{display:flex;flex-direction:column;align-items:center;height:100vh;max-width:500px;margin:0 auto;padding:0 8px}.header{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;border-bottom:1px solid #3a3a3c;position:relative}.header h1{font-size:1.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.header-btn{position:absolute;right:0;background:none;border:1px solid #3a3a3c;color:#818384;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.8rem}.header-btn:hover{color:#fff;border-color:#565758}.toast{position:absolute;top:60px;background:#fff;color:#121213;padding:12px 24px;border-radius:4px;font-weight:700;font-size:.9rem;z-index:100;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.board{display:flex;flex-direction:column;gap:5px;padding:20px 0;flex-grow:1;justify-content:center}.row{display:flex;gap:5px}.row.shake{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-4px)}30%,70%{transform:translate(4px)}}.tile{width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;text-transform:uppercase;border:2px solid #3a3a3c;-webkit-user-select:none;user-select:none}.tile.filled{border-color:#565758;animation:pop .1s ease}@keyframes pop{50%{transform:scale(1.1)}}.tile.correct{background:#538d4e;border-color:#538d4e;animation:flip .5s ease forwards}.tile.present{background:#b59f3b;border-color:#b59f3b;animation:flip .5s ease forwards}.tile.absent{background:#3a3a3c;border-color:#3a3a3c;animation:flip .5s ease forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.keyboard{padding:8px 0 12px;width:100%}.keyboard-row{display:flex;gap:4px;justify-content:center;margin-bottom:4px}.key{height:52px;min-width:30px;padding:0 6px;border:none;border-radius:4px;background:#818384;color:#fff;font-size:.85rem;font-weight:700;cursor:pointer;text-transform:uppercase;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:background .1s;flex:1;max-width:44px}.key.wide{max-width:65px;font-size:.7rem}.key:hover{filter:brightness(1.2)}.key:active{filter:brightness(.9)}.key.correct{background:#538d4e}.key.present{background:#b59f3b}.key.absent{background:#3a3a3c}.leaderboard-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200}.leaderboard{background:#1a1a1b;border:1px solid #3a3a3c;border-radius:8px;padding:24px;min-width:300px;max-width:400px;max-height:80vh;overflow-y:auto}.leaderboard h2{text-align:center;margin-bottom:16px;font-size:1.3rem}.leaderboard-empty{text-align:center;color:#818384;padding:20px 0}.leaderboard table{width:100%;border-collapse:collapse}.leaderboard th,.leaderboard td{padding:8px 12px;text-align:center;border-bottom:1px solid #3a3a3c}.leaderboard th{color:#818384;font-size:.8rem;text-transform:uppercase}.leaderboard-close{display:block;margin:16px auto 0;padding:8px 24px;background:#538d4e;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:600}.leaderboard-close:hover{filter:brightness(1.15)}