#app{flex-direction:column;flex:1;min-height:0;display:flex}html,body{min-height:100%;margin:0}body{flex-direction:column;display:flex}.page-content{flex:1}.page-container{flex:1;min-height:0}.nav{background:#fff;border-bottom:1px solid #ddd}.nav-container{color:#a1b1ff;justify-content:space-between;align-items:center;max-width:1200px;height:70px;margin:auto;padding:0 20px;display:flex}.site-logo{width:auto;height:60px;display:block}.menu{gap:25px;margin:0;padding:0;list-style:none;display:flex}.menu a,.menu button{color:#333;font:inherit;cursor:pointer;background:0 0;border:none;padding:.5rem 0;text-decoration:none}.menu a:hover,.menu button:hover,.menu a:hover{color:#0d6efd}.menu-btn{cursor:pointer;background:0 0;border:none;font-size:30px;display:none}.footer{text-align:center;background:#f8f9fa;border-top:1px solid #ddd;padding:20px}.toast-container{z-index:9999}.toast{color:#fff;z-index:1000;background:#333;border-radius:6px;padding:12px 20px;position:fixed;top:20px;left:50%;transform:translate(-50%)}.player-card{border-radius:10px;padding:5px;transition:background-color .2s}.player-card:hover{background-color:#f8f9fa}.letter-box{aspect-ratio:1;box-sizing:border-box;border:4px solid #ccc;justify-content:center;align-items:center;width:100%;min-width:0;font-size:clamp(.8rem,5vw,2rem);font-weight:700;display:flex}.letter-box.given-letter{color:#22397c;background:#e9ecef;border-color:#adb5bd}.letter-box.selected{border-color:#22397c}.letter-box.correct{color:#fff;background:#6aaa64;border-color:#6aaa64}.letter-box.present{color:#fff;background:#c9b458;border-color:#c9b458}.letter-box.absent{color:#fff;background:#787c7e;border-color:#787c7e}.letter-box.correct,.letter-box.present,.letter-box.absent{animation:.4s flip}.game-info{flex-direction:column;align-items:flex-end;gap:3px;display:flex}.round-timer{color:#22397c;font-weight:700}.round-timer.warning{color:#dc3545}.round-answer{margin-bottom:0}.round-answer span{color:#198754;font-weight:600}.player-row{align-items:center;gap:5px;margin:4px 0;display:flex}.player-number{text-align:center;flex-shrink:0;width:30px}.player-avatar{flex-shrink:0}.player-name{flex:1;min-width:0}.player-stat{text-align:right;color:#6c757d;flex-shrink:0;width:100px}.player-ready{text-align:center;flex-shrink:0;width:100px}.keyboard{width:min(90vw,500px);padding-bottom:env(safe-area-inset-bottom);flex:none;margin:5px auto}.keyboard-row{justify-content:center;gap:5px;margin-bottom:6px;display:flex}.key{background:#d3d6da;border:none;border-radius:6px;flex:1;max-width:55px;height:55px;font-size:18px;font-weight:700}.key.wide{flex:1.5;font-size:14px}.key:active{transform:scale(.95)}.key.correct{color:#fff;background-color:#6aaa64}.key.present{color:#fff;background-color:#c9b458}.key.absent{color:#fff;background-color:#787c7e}.guess-history{overflow:visible}.guess-row,.current-row{grid-template-columns:repeat(var(--word-length), 1fr);gap:5px;width:min(90vw,500px);margin:0 auto;display:grid}.guess-history .guess-row{margin-bottom:8px}.game-page{flex-direction:column;height:100%;min-height:0;display:flex}.game-container{flex-direction:column;display:flex}.keyboard{flex:none;height:fit-content}.current-row{flex:none}.game-header{justify-content:space-between;align-items:center;width:min(90vw,500px);margin:0 auto 10px;display:flex}.game-header h2{margin:0;font-size:1.4rem}.guesses-left{color:#666;font-size:.95rem}@media (width<=768px){.menu-btn{display:block}.nav-container{flex-wrap:wrap;height:auto;padding:15px 20px}.menu{flex-direction:column;gap:0;width:100%;padding-top:15px;display:none}.menu.show{display:flex}.menu li{border-top:1px solid #eee}.menu a{padding:15px 0;display:block}.key{height:42px;font-size:15px}.keyboard-row{margin-bottom:3px}.current-row{padding:5px 0}.guess-row,.current-row{gap:4px;width:calc(100vw - 30px);max-width:500px}.guess-history .guess-row{margin-bottom:6px}.player-row{flex-wrap:wrap;gap:8px}.player-number{width:25px}.player-avatar{width:40px;height:40px}.player-name{flex:1;min-width:calc(100% - 90px)}.player-row>.badge{margin-left:33px}.player-stat{width:auto;margin-left:8px}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}
