*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#0f0c29,#16213e,#1a1a3e);color:#fff;font-family:Helvetica Neue,Arial,sans-serif;min-height:100vh;overflow-x:hidden}#app{display:flex;flex-direction:column;min-height:100vh;max-width:500px;margin:0 auto;padding:0 8px}#loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:20px}#loading h2{font-size:36px;letter-spacing:4px;color:#00b894}.spinner{width:40px;height:40px;border:4px solid #636e72;border-top:4px solid #00b894;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}header{border-bottom:1px solid #636e72;padding:8px 0;margin-bottom:8px}.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.header-top h1{font-size:28px;letter-spacing:3px;font-weight:700;color:#fff}#user-info{display:flex;align-items:center;gap:8px}#user-avatar{width:28px;height:28px;border-radius:50%;border:2px solid #00b894}#user-name{font-size:13px;color:#b2bec3}.header-controls{display:flex;align-items:center;justify-content:space-between}#mode-selector{display:flex;gap:4px}.mode-btn{background:transparent;border:1px solid #636e72;color:#b2bec3;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.mode-btn.active{background:#00b894;border-color:#00b894;color:#fff;box-shadow:0 2px 8px #00b8944d}.mode-btn:hover:not(.active){border-color:#b2bec3;color:#fff}.icon-btn{background:transparent;border:none;color:#b2bec3;font-size:20px;cursor:pointer;padding:4px 8px}.icon-btn:hover{color:#fff}#message-container{display:flex;justify-content:center;min-height:36px;align-items:center}#message{font-size:14px;font-weight:700;text-align:center;transition:opacity .3s}#message.error{background:#e17055;color:#fff;padding:8px 16px;border-radius:4px;box-shadow:0 2px 8px #e170554d}#message.success{color:#00b894}#message.info{color:#b2bec3}#board-container{display:flex;justify-content:center;flex-grow:1;align-items:center;padding:8px 0}#board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;width:fit-content}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.tile{width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;text-transform:uppercase;border:2px solid #636e72;background:#636e7226;color:#fff;transition:transform .1s;-webkit-user-select:none;user-select:none}.tile.filled{border-color:#b2bec3;animation:pop .1s ease-in-out}.tile.correct{background:#00b894;border-color:#00b894;color:#fff;box-shadow:0 2px 8px #00b89466}.tile.present{background:#fdcb6e;border-color:#fdcb6e;color:#16213e}.tile.absent{background:#636e72;border-color:#636e72;color:#fff}.tile.reveal{animation:flip .5s ease forwards}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-30px)}50%{transform:translateY(5px)}60%{transform:translateY(-15px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.tile.bounce{animation:bounce .6s ease}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.row.shake{animation:shake .5s ease}#keyboard-container{padding:8px 0 16px}#keyboard{display:flex;flex-direction:column;gap:5px;align-items:center}.keyboard-row{display:flex;gap:5px}.key{min-width:32px;height:52px;border:none;border-radius:4px;background:#b2bec3;color:#16213e;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:background .2s;padding:0 6px}.key:hover{background:#dfe6e9}.key.wide{min-width:56px;font-size:12px}.key.correct{background:#00b894;color:#fff;box-shadow:0 2px 6px #00b8944d}.key.present{background:#fdcb6e;color:#16213e}.key.absent{background:#636e72;color:#fff}.key:active{transform:scale(.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0c29d9;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#16213e;border:1px solid #636e72;border-radius:8px;padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 8px 32px #0006}.modal-close{position:absolute;top:12px;right:16px;background:transparent;border:none;color:#b2bec3;font-size:28px;cursor:pointer}.modal-close:hover{color:#e17055}.modal-content h2{text-align:center;margin-bottom:16px;font-size:18px;text-transform:uppercase;letter-spacing:2px;color:#fff}.modal-content h3{text-align:center;margin:16px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#b2bec3}#stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.stat-box{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:32px;font-weight:700;color:#fff}.stat-label{font-size:11px;color:#b2bec3;text-transform:uppercase}.dist-row{display:flex;align-items:center;gap:4px;margin:2px 0}.dist-label{font-size:14px;font-weight:700;width:12px;text-align:right;color:#fff}.dist-bar{background:#636e72;padding:2px 8px;font-size:13px;font-weight:700;min-width:24px;text-align:right;color:#fff;border-radius:2px}.dist-bar.highlight{background:#00b894;box-shadow:0 2px 6px #00b8944d}.help-examples{margin-top:16px}.help-row{display:flex;gap:4px;margin-bottom:4px}.help-row .tile{width:36px;height:36px;font-size:18px}.help-examples p{font-size:13px;margin-bottom:12px;color:#b2bec3}.tips-section p{font-size:13px;margin-bottom:10px;color:#b2bec3;line-height:1.4}.tips-section strong{color:#00b894}#play-again-container{display:flex;justify-content:center;padding:8px 0 16px}.play-again-btn{background:#00b894;color:#fff;border:none;border-radius:8px;padding:12px 32px;font-size:16px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;box-shadow:0 4px 12px #00b8944d}.play-again-btn:hover{background:#00a884;transform:translateY(-2px);box-shadow:0 6px 16px #00b89466}.play-again-btn:active{transform:translateY(0)}#btn-skip{font-size:22px;transition:color .2s}#btn-skip:hover{color:#e17055}@media(max-width:380px){.tile{width:50px;height:50px;font-size:24px}.key{min-width:28px;height:46px;font-size:11px}.key.wide{min-width:48px;font-size:10px}}@media(min-height:700px){#board-container{padding:16px 0}}