:root{--bg-primary:#fff;--bg-secondary:#fafafa;--bg-tertiary:#f5f5f5;--border-color:#d3d6da;--border-active:#878a8c;--text-primary:#1a1a1b;--text-secondary:#787c7e;--correct:#6aaa64;--present:#c9b458;--absent:#787c7e;--paper-shadow:#0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);flex-direction:column;justify-content:space-between;align-items:center;min-height:100vh;padding:clamp(10px,3vw,20px);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;display:flex;overflow-y:auto}#root{flex-direction:column;flex:1;width:100%;max-width:600px;display:flex}.app{flex-direction:column;flex:1;width:100%;display:flex}.header{text-align:left;border-bottom:1px solid var(--border-color);flex-shrink:0;margin-bottom:clamp(10px,3vh,20px);padding-bottom:clamp(8px,2vh,15px)}.title{color:var(--text-primary);letter-spacing:.5px;margin-bottom:0;font-family:Major Mono Display,monospace;font-size:2rem;font-style:normal;font-weight:400}.subtitle{color:var(--text-secondary);margin-top:5px;font-family:Major Mono Display,monospace;font-size:.9rem;font-style:normal;font-weight:400}.game-container{background:var(--bg-primary);flex-direction:column;flex:1;min-height:0;padding:clamp(10px,3vw,20px);display:flex;overflow-y:auto}.footer{text-align:center;border-top:1px solid var(--border-color);flex-shrink:0;width:100%;max-width:600px;margin-top:clamp(8px,2vh,15px);padding:clamp(8px,2vh,15px) 0}.footer-content{justify-content:center;align-items:center;gap:6px;font-size:clamp(.75rem,2vw,.85rem);display:flex}.footer-wofi{letter-spacing:1.5px;font-family:Major Mono Display,monospace;font-size:clamp(.9rem,2.5vw,1rem);font-style:normal;font-weight:400}.footer-by{color:var(--text-secondary)}.footer-link{color:var(--text-primary);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-weight:700;text-decoration:none;transition:opacity .15s}.footer-link:hover{opacity:.6}.game-stats{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;flex-wrap:wrap;justify-content:space-around;gap:15px;margin-bottom:25px;padding:15px;display:flex}.stat{flex-direction:column;align-items:center;gap:5px;display:flex}.stat .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600}.stat .value{color:var(--text-primary);font-size:1.2rem;font-weight:700}.stat .value.danger{color:#d32f2f}.phrase-display{flex-wrap:wrap;flex:1;place-content:flex-start center;gap:clamp(7px,1.5vh,14px);margin:clamp(12px,2.2vh,22px) 0;padding:4px 6px;display:flex}.phrase-display-compact{gap:clamp(3px,.7vh,7px);margin:clamp(8px,1.2vh,14px) 0}.phrase-display-compact .word-group{gap:clamp(2px,.5vw,4px)}.phrase-display-compact .letter-box-container{gap:clamp(1px,.4vh,3px)}.phrase-display-compact .letter-box{border-width:1.5px;width:clamp(24px,5vw,32px);height:clamp(24px,5vw,32px);font-size:clamp(.8rem,2.6vw,1.1rem)}.phrase-display-compact .width-dots{min-height:clamp(11px,2.2vh,15px);font-size:clamp(.6rem,1.6vw,.8rem)}.phrase-display-long-word .letter-box{width:clamp(28px,5.5vw,44px);height:clamp(28px,5.5vw,44px);font-size:clamp(.95rem,2.8vw,1.4rem)}.phrase-display-long-word .width-dots{font-size:clamp(.65rem,1.6vw,.9rem)}.word-group{gap:clamp(4px,1vw,8px);display:flex}.word-separator{color:var(--text-secondary);align-self:center;align-items:center;margin-bottom:clamp(7.5px,1.5vh,10px);padding:0 clamp(4px,1vw,8px);font-size:clamp(1.2rem,4vw,2rem);font-weight:300;display:flex;transform:translateY(-30%)}.letter-box-container{flex-direction:column;align-items:center;gap:clamp(3px,.8vh,6px);display:flex}.letter-box{background:var(--bg-primary);border:2px solid var(--border-color);justify-content:center;align-items:center;width:clamp(32px,6.8vw,52px);height:clamp(32px,6.8vw,52px);font-size:clamp(1.05rem,3.6vw,1.85rem);font-weight:700;transition:all .1s;display:flex;box-shadow:0 1px #0000000d}.letter-box.space{background:0 0;border:none;width:18px}.letter-box.revealed{background:var(--bg-primary);border-color:var(--text-primary);animation:.3s reveal}@keyframes reveal{0%{opacity:.8;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.letter-box .letter{animation:.2s both letterPop}@keyframes letterPop{0%{transform:scale(.8)}50%{transform:scale(1.05)}to{transform:scale(1)}}.width-dots{letter-spacing:clamp(1.2px,.6vw,2.4px);color:var(--text-secondary);min-height:clamp(15px,3vh,20px);margin-top:2px;font-family:monospace;font-size:clamp(.75rem,2vw,1.05rem);font-weight:400}.guess-input{justify-content:center;gap:8px;margin:clamp(10px,2vh,20px) 0;display:flex}.guess-display{background:var(--bg-primary);border:2px solid var(--border-color);max-width:350px;color:var(--text-primary);flex:1;align-items:center;min-height:44px;padding:12px 16px;font-size:1rem;font-weight:500;display:flex}.guess-display:empty:before{content:"Start typing...";color:var(--text-secondary)}.guess-input button{background:var(--text-primary);color:var(--bg-primary);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;padding:12px 24px;font-size:.95rem;font-weight:700;transition:opacity .15s}.guess-input button:hover:not(:disabled){opacity:.8}.guess-input button:disabled{opacity:.3;cursor:not-allowed}.keyboard-section{flex-shrink:0;width:100%;max-width:100%;padding:0 5px}.keyboard{flex-direction:column;align-items:center;gap:clamp(4px,1vh,6px);width:100%;max-width:100%;margin-top:clamp(8px,2vh,20px);display:flex}.keyboard-row{justify-content:center;gap:clamp(2px,.5vw,4px);display:flex}.key{background:var(--bg-tertiary);width:clamp(28px,6vw,40px);height:clamp(45px,9vw,58px);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:clamp(2px,1vw,4px) 2px;font-size:clamp(.65rem,1.8vw,.85rem);font-weight:700;transition:all .1s;display:flex}.key-letter{font-size:clamp(.75rem,2vw,.9rem);line-height:1}.key-dots{color:var(--text-secondary);letter-spacing:1px;font-family:monospace;font-size:clamp(.5rem,1.5vw,.65rem);line-height:1}.key:hover:not(:disabled){background:var(--border-color)}.key:active:not(:disabled){transform:scale(.95)}.key.correct{background:var(--correct);border-color:var(--correct);color:#fff}.key.correct .key-dots{color:#ffffffb3}.key.wrong{background:var(--absent);border-color:var(--absent);color:#fff;opacity:.6}.key.wrong .key-dots{color:#ffffff80}.key:disabled{cursor:not-allowed;opacity:.5}.overlay{z-index:1200;background:#00000073;justify-content:center;align-items:center;padding:clamp(12px,4vw,28px);animation:.2s fadeIn;display:flex;position:fixed;inset:0}.howto-card{background:var(--bg-primary);border:1.5px solid var(--border-color);text-align:left;border-radius:10px;flex-direction:column;gap:clamp(12px,2vh,16px);width:min(90vw,520px);max-width:520px;padding:clamp(18px,4vw,26px);display:flex;box-shadow:0 10px 35px #0000001f}.howto-card p{color:var(--text-secondary);font-size:clamp(.95rem,3vw,1.05rem)}.howto-list{flex-direction:column;gap:8px;margin:4px 0 6px;padding:0;list-style:none;display:flex}.howto-list li{color:var(--text-primary);font-size:.98rem;line-height:1.35}.howto-list strong{font-weight:700}.howto-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(10px,2vw,14px);display:grid}.howto-row{border:1px dashed var(--border-color);background:var(--bg-secondary);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;display:flex}.howto-row span{color:var(--text-primary);font-size:.95rem}.howto-box{border:2px solid var(--border-color);border-radius:6px;justify-content:center;align-items:center;width:46px;height:46px;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-size:1.1rem;font-weight:700;display:flex}.howto-box.correct{background:var(--correct);border-color:var(--correct);color:#fff}.howto-box.absent{background:var(--absent);border-color:var(--absent);color:#fff}.howto-box.dots{background:var(--bg-primary);letter-spacing:2px;font-family:monospace;font-size:1.1rem}.overlay .play-again{align-self:flex-start;padding-inline:20px}.game-over{z-index:1000;background:#fffffff2;justify-content:center;align-items:center;width:100%;height:100%;animation:.2s fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-content{background:var(--bg-primary);border:2px solid var(--border-color);text-align:center;max-width:400px;padding:40px;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-over-content h2{color:var(--text-primary);margin-bottom:15px;font-size:2rem;font-weight:700}.game-over-content .answer{color:var(--text-secondary);margin-bottom:25px;font-size:1.1rem}.game-over-content .answer strong{color:var(--text-primary);font-size:1.2rem}.play-again{background:var(--text-primary);color:var(--bg-primary);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;padding:12px 32px;font-size:1rem;font-weight:700;transition:opacity .15s}.play-again:hover{opacity:.8}.finished-message{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:300px;display:flex}.finished-message h2{color:var(--text-primary);font-size:clamp(1.4rem,4vw,2rem);font-weight:700}.finished-message p{color:var(--text-secondary);font-size:clamp(1rem,3vw,1.2rem)}.finished-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.play-again-secondary{color:var(--text-primary);border:2px solid var(--text-primary);background:0 0}.play-again-secondary:hover{background:var(--bg-tertiary)}@media (max-width:768px){.title{font-size:clamp(1.2rem,5vw,1.5rem)}.subtitle{font-size:clamp(.7rem,3vw,.85rem)}.game-container{padding:10px}.phrase-display{gap:clamp(4px,1vh,8px);margin:clamp(8px,1.5vh,12px) 0}.letter-box{border-width:1.5px;width:clamp(28px,6vw,38px);height:clamp(28px,6vw,38px);font-size:clamp(.95rem,3vw,1.3rem)}.width-dots{font-size:clamp(.65rem,2vw,.85rem)}.keyboard-section{margin-top:clamp(8px,2vh,15px)}.keyboard{gap:clamp(3px,.8vh,6px);padding:0}.keyboard-row{gap:clamp(2px,.6vw,4px)}.key{width:clamp(32px,9vw,64px);height:clamp(54px,14vw,80px);padding:clamp(4px,1.8vw,6px) 2px;font-size:clamp(.72rem,2.5vw,.95rem)}.key-letter{font-size:clamp(.75rem,2.6vw,1rem)}.key-dots{font-size:clamp(.55rem,2vw,.7rem)}.game-over-content{margin:15px;padding:20px}.game-over-content h2{font-size:clamp(1.2rem,4vw,1.5rem)}}@media (max-height:850px){body{padding:clamp(6px,1.5vh,12px)}.header{margin-bottom:clamp(6px,1.8vh,12px);padding-bottom:clamp(6px,1.5vh,10px)}.game-stats{margin:clamp(8px,1.5vh,14px) 0;padding:clamp(10px,2vh,14px)}.phrase-display{margin:clamp(8px,1.5vh,16px) 0}.letter-box{width:clamp(28px,6vw,44px);height:clamp(28px,6vw,44px);font-size:clamp(1rem,3vw,1.5rem)}.width-dots{font-size:clamp(.65rem,2vw,.9rem)}.guess-input{margin:clamp(8px,1.5vh,14px) 0}.keyboard{margin-top:clamp(6px,1.5vh,14px)}.key{width:clamp(26px,5vw,38px);height:clamp(38px,8vh,54px)}}@media (max-height:700px){.game-container{padding:clamp(6px,1.2vh,12px)}.phrase-display{gap:clamp(3px,.6vh,6px)}.letter-box{width:clamp(24px,5vw,36px);height:clamp(24px,5vw,36px);font-size:clamp(.9rem,2.5vw,1.3rem)}.width-dots{font-size:clamp(.55rem,1.6vw,.75rem)}.guess-input{gap:6px}.keyboard{gap:clamp(3px,.6vh,5px)}.key{width:clamp(24px,5.5vw,35px);height:clamp(34px,7vh,46px);font-size:clamp(.6rem,1.6vw,.8rem)}}@media (min-width:1024px){.phrase-display{margin:20px 0}.letter-box{width:52px;height:52px;font-size:1.9rem}.width-dots{font-size:1.05rem}.phrase-display-compact{gap:clamp(4px,.8vh,8px);margin:18px 0}}