@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap";.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:100vw}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;width:100%;padding:0 clamp(8px,2vw,20px)}.footer{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:100%;background:transparent;padding:clamp(8px,1vh,16px) clamp(8px,2vw,20px);max-width:100vw;overflow:hidden}@media (max-width: 768px){.app{height:100vh;height:100dvh}.main-content{padding:0 8px}.footer{padding:8px}}@media (max-width: 480px){.main-content{padding:0 4px}.footer{padding:4px}}@media (max-height: 700px){.footer{padding:4px 8px}}@media (max-height: 600px){.footer{padding:2px 4px}}.header{display:flex;justify-content:space-between;align-items:center;padding:1vh 20px;background-color:var(--color-bg);position:relative;z-index:10;flex-shrink:0}.header-left,.header-right{flex:1;display:flex}.header-right{justify-content:flex-end}.header-center{flex:2;display:flex;align-items:center;justify-content:center}.title{font-size:min(3vh,1.8rem);font-weight:800;letter-spacing:.05em;background:linear-gradient(135deg,var(--color-text) 0%,var(--color-text) 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.08)}.icon-button{background:transparent;border:none;font-size:min(2.5vh,1.5rem);padding:.8vh;cursor:pointer;border-radius:8px;transition:all .2s ease;box-shadow:0 0 #0000}.icon-button:hover{background-color:var(--color-empty);transform:translateY(-1px);box-shadow:0 2px 4px #00000014,0 4px 8px #0000000d}.icon-button:active{transform:translateY(0);box-shadow:0 1px 2px #00000014}@media (max-width: 768px){.header{padding:.8vh 12px}.title{font-size:min(2.5vh,1.3rem)}.icon-button{font-size:min(2vh,1.2rem);padding:.5vh}}@media (max-height: 700px){.header{padding:.6vh 16px}.title{font-size:min(2.2vh,1.3rem)}}.game{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1;padding:clamp(8px,2vh,24px) 0;overflow:hidden;min-height:0;gap:clamp(8px,2vh,24px);width:100%;max-width:100%}@media (max-width: 768px){.game{gap:clamp(6px,1.5vh,16px);padding:clamp(6px,1.5vh,16px) 0}}@media (max-height: 700px){.game{gap:clamp(4px,1vh,12px);padding:clamp(4px,1vh,12px) 0}}@media (max-height: 600px){.game{gap:4px;padding:4px 0}}.grid{display:flex;flex-direction:column;gap:clamp(4px,.8vh,8px);margin:0 auto;width:fit-content;flex-shrink:1;justify-content:center;align-items:center;max-width:100%;padding:0 4px}@media (max-width: 768px){.grid{gap:clamp(3px,.6vh,6px)}}@media (max-height: 700px){.grid{gap:clamp(3px,.5vh,5px)}}@media (max-height: 600px){.grid{gap:3px}}.row{display:flex;gap:6px;justify-content:center;align-items:center;transition:opacity .3s ease}.row.shake{animation:shake .4s ease-in-out!important}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.row.row-completed,.row.row-current{opacity:1}.row.row-current:not(.shake){animation:rowFocus .4s ease-out}.row.row-future{opacity:.5}@keyframes rowFocus{0%{transform:scale(.95);opacity:.7}50%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}.tile{width:clamp(45px,10vh,70px);height:clamp(45px,10vh,70px);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,4vh,2.2rem);font-weight:700;text-transform:uppercase;transition:all .3s ease;border-radius:4px;box-shadow:0 1px 2px #0000000d,0 2px 4px #0000000d}.tile-empty{background-color:var(--color-bg);color:var(--color-text);border-color:#d3d6da4d;opacity:.6;box-shadow:none}.tile.tile-current-row.tile-empty{border-color:var(--color-text);border-width:2.5px;opacity:1;background-color:var(--color-bg);box-shadow:0 2px 4px #0000001a,0 4px 8px #0000000d,inset 0 1px 2px #fff6}.tile.tile-current-row{border-color:var(--color-text);border-width:2.5px;opacity:1;box-shadow:0 2px 4px #00000014,0 4px 8px #0000000d,inset 0 1px 2px #fff6}.tile.tile-current-row.tile-has-letter{animation:tilePopIn .15s ease-out;border-color:var(--color-text);border-width:2.5px;background-color:var(--color-bg);box-shadow:0 2px 4px #0000001a,0 4px 8px #0000000d,inset 0 1px 2px #fff6;transform:scale(1)}.tile.tile-active{border-color:var(--color-text);border-width:3px;background:linear-gradient(135deg,#1a1a1b08,#1a1a1b03);box-shadow:0 0 0 2px #1a1a1b1a,0 2px 4px #00000014,0 4px 8px #0000000d,inset 0 1px 3px #ffffff80;animation:tilePulse 1.5s ease-in-out infinite}.tile.tile-active-first{animation:tileClickFocus .4s ease-out,tilePulse 1.5s ease-in-out .4s infinite}@keyframes tilePulse{0%,to{border-color:var(--color-text);box-shadow:0 0 0 2px #1a1a1b1a,0 2px 4px #00000014,0 4px 8px #0000000d,inset 0 1px 3px #ffffff80}50%{border-color:#1a1a1b99;box-shadow:0 0 0 2px #1a1a1b26,0 2px 6px #0000001f,0 4px 10px #00000014,inset 0 1px 3px #fff9}}@keyframes tileClickFocus{0%{transform:scale(1);background:linear-gradient(135deg,#1a1a1b08,#1a1a1b03)}30%{transform:scale(.92);background:linear-gradient(135deg,#1a1a1b14,#1a1a1b0a);box-shadow:0 0 0 3px #1a1a1b33,inset 0 2px 4px #00000026}60%{transform:scale(1.05);background:linear-gradient(135deg,#1a1a1b0d,#1a1a1b05);box-shadow:0 0 0 4px #1a1a1b26,0 4px 8px #0000001a,0 6px 12px #00000014,inset 0 1px 3px #fff9}to{transform:scale(1);background:linear-gradient(135deg,#1a1a1b08,#1a1a1b03);box-shadow:0 0 0 2px #1a1a1b1a,0 2px 4px #00000014,0 4px 8px #0000000d,inset 0 1px 3px #ffffff80}}.tile-correct{background:linear-gradient(135deg,#6aaa64,#5a9a54);border-color:var(--color-correct);color:#fff;opacity:1;animation:flip .5s ease;box-shadow:0 3px 6px #6aaa6466,0 6px 12px #6aaa6440,inset 0 -1px 2px #0003,inset 0 1px 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.2)}.tile-present{background:linear-gradient(135deg,#c9b458,#b9a448);border-color:var(--color-present);color:#fff;opacity:1;animation:flip .5s ease;box-shadow:0 3px 6px #c9b45866,0 6px 12px #c9b45840,inset 0 -1px 2px #0003,inset 0 1px 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.2)}.tile-absent{background:linear-gradient(135deg,#787c7e,#686c6e);border-color:var(--color-absent);color:#fff;opacity:1;animation:flip .5s ease;box-shadow:0 3px 6px #787c7e66,0 6px 12px #787c7e40,inset 0 -1px 2px #0003,inset 0 1px 1px #ffffff1a;text-shadow:0 1px 2px rgba(0,0,0,.2)}@keyframes flip{0%{transform:rotateX(0) translateZ(0)}50%{transform:rotateX(90deg) translateZ(8px)}to{transform:rotateX(0) translateZ(0)}}@keyframes tilePopIn{0%{transform:scale(.8);opacity:.6}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes tileBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (max-width: 768px){.tile{width:clamp(38px,8.5vh,58px);height:clamp(38px,8.5vh,58px);font-size:clamp(1rem,3.5vh,1.7rem);border-width:1.5px}.tile.tile-current-row.tile-empty,.tile.tile-current-row{border-width:2px}.tile.tile-active{border-width:2.5px}}@media (max-width: 480px){.tile{width:clamp(32px,7.5vh,50px);height:clamp(32px,7.5vh,50px);font-size:clamp(.9rem,3vh,1.5rem)}}@media (max-height: 700px){.tile{width:clamp(38px,8vh,55px);height:clamp(38px,8vh,55px);font-size:clamp(1rem,3.2vh,1.5rem);border-width:1.5px}}@media (max-height: 600px){.tile{width:clamp(32px,7vh,48px);height:clamp(32px,7vh,48px);font-size:clamp(.85rem,2.8vh,1.3rem);border-width:1px}.tile.tile-current-row.tile-empty,.tile.tile-current-row{border-width:1.5px}.tile.tile-active{border-width:2px}}.keyboard{margin:0 auto;display:flex;flex-direction:column;gap:clamp(4px,1vh,8px);max-width:min(650px,95vw);padding:0 clamp(4px,1vw,8px);flex-shrink:0;width:100%}.keyboard-row{display:flex;gap:clamp(3px,.8vw,6px);justify-content:center;width:100%}.key{min-width:clamp(28px,7vw,52px);height:clamp(45px,8vh,70px);border-radius:6px;font-size:clamp(.75rem,1.8vh,1.1rem);font-weight:600;text-transform:uppercase;background-color:var(--color-key-bg);color:var(--color-text);transition:all .15s ease;flex:1;max-width:clamp(28px,7vw,52px);box-shadow:0 2px 4px #0000001a,0 4px 8px #0000000d,inset 0 1px 1px #fff3;position:relative}.key-wide{min-width:clamp(42px,10vw,80px);max-width:clamp(42px,10vw,80px)}.key:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001f,0 6px 12px #00000014,inset 0 1px 1px #fff3}.key:active{transform:translateY(0) scale(.98);box-shadow:0 1px 2px #0000001a,inset 0 2px 4px #00000026}.key-correct{background:linear-gradient(135deg,#6aaa64,#5a9a54);color:#fff;box-shadow:0 2px 4px #6aaa644d,0 4px 8px #6aaa6433,inset 0 -1px 2px #0003,inset 0 1px 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.2)}.key-present{background:linear-gradient(135deg,#c9b458,#b9a448);color:#fff;box-shadow:0 2px 4px #c9b4584d,0 4px 8px #c9b45833,inset 0 -1px 2px #0003,inset 0 1px 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.2)}.key-absent{background:linear-gradient(135deg,#3a3a3c,#2a2a2c);color:#fff;opacity:.5;box-shadow:0 1px 2px #0006,inset 0 2px 4px #0000004d;text-shadow:0 1px 2px rgba(0,0,0,.3);cursor:not-allowed;filter:brightness(.7)}@media (max-width: 768px){.keyboard{max-width:98vw;gap:clamp(3px,.8vh,6px)}.keyboard-row{gap:clamp(2px,.6vw,4px)}.key{min-width:clamp(24px,6.5vw,38px);max-width:clamp(24px,6.5vw,38px);height:clamp(40px,7vh,56px);font-size:clamp(.65rem,1.5vh,.9rem);border-radius:4px}.key-wide{min-width:clamp(36px,9vw,58px);max-width:clamp(36px,9vw,58px)}}@media (max-width: 480px){.keyboard{gap:3px}.keyboard-row{gap:2px}.key{min-width:clamp(20px,6vw,32px);max-width:clamp(20px,6vw,32px);height:clamp(38px,6.5vh,50px);font-size:clamp(.6rem,1.3vh,.8rem)}.key-wide{min-width:clamp(32px,8.5vw,48px);max-width:clamp(32px,8.5vw,48px)}}@media (max-height: 700px){.keyboard{gap:clamp(3px,.8vh,5px)}.keyboard-row{gap:clamp(2px,.6vw,4px)}.key{height:clamp(40px,7vh,52px);font-size:clamp(.7rem,1.5vh,.85rem)}}@media (max-height: 600px){.keyboard{gap:3px}.keyboard-row{gap:2px}.key{height:clamp(36px,6vh,45px);font-size:clamp(.65rem,1.3vh,.75rem)}}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);min-width:300px;max-width:500px;padding:16px 20px;border-radius:12px;display:flex;align-items:center;gap:12px;z-index:9999;animation:toastSlideDown .3s ease-out;box-shadow:0 4px 6px #0000001a,0 8px 16px #00000026,0 16px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500}.toast-success{background:linear-gradient(135deg,#6aaa64,#5a9a54);color:#fff}.toast-error{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.toast-info{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.toast-icon{width:28px;height:28px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}.toast-message{flex:1;font-size:15px;line-height:1.4}.toast-close{background:transparent;color:#fff;border:none;font-size:20px;padding:4px 8px;cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0}.toast-close:hover{opacity:1}@keyframes toastSlideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastSlideUp{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.toast.toast-closing{animation:toastSlideUp .3s ease-in forwards}@media (max-width: 768px){.toast{min-width:280px;max-width:calc(100vw - 40px);padding:14px 16px}.toast-message{font-size:14px}.toast-icon{width:24px;height:24px;font-size:16px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2vh 2vw;animation:fadeIn .2s ease;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.modal-overlay.modal-closing{animation:fadeOut .2s ease forwards}.modal-overlay.modal-closing .modal-content{animation:slideDown .2s ease forwards}@keyframes slideDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.modal-content{position:relative;background-color:var(--color-bg);border-radius:12px;max-width:500px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 8px 16px #0000001f,0 16px 32px #00000014,0 24px 48px #0000000d;animation:slideUp .3s ease;margin:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--color-border)}.modal-header h2{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:.02em}.modal-close{background:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--color-text);transition:all .2s ease}.modal-close:hover{background-color:var(--color-empty);transform:translateY(-1px);box-shadow:0 2px 4px #00000014,0 4px 8px #0000000d}.modal-close:active{transform:translateY(0)}.modal-close-no-header{position:absolute;top:1.5vh;right:1.5vh;z-index:10;width:2.5vh;height:2.5vh;font-size:1.8vh;border-radius:50%;color:#787c7e;opacity:.6}.modal-close-no-header:hover{opacity:1;background-color:#0000000d}.modal-body{padding:20px}@media (max-width: 768px){.modal-overlay{padding:1vh 1vw}.modal-header{padding:12px}.modal-header h2{font-size:1.2rem}.modal-close{width:28px;height:28px;font-size:1.2rem}.modal-body{padding:12px}}@media (max-height: 700px){.modal-content{max-height:90vh}.modal-header{padding:10px 15px}.modal-header h2{font-size:1.1rem}.modal-body{padding:15px}}.gameover-content{padding:2vh 0;text-align:center}.gameover-message{font-size:2.2vh;font-weight:600;margin-bottom:2vh;margin-top:0}.gameover-tries{font-size:1.8vh;color:#538d4e;font-weight:600;margin-top:1vh}.gameover-word-label{font-size:1.6vh;color:#787c7e;margin-bottom:1vh}.gameover-word{font-size:3.5vh;font-weight:700;color:#d32f2f;letter-spacing:.3vh;margin-top:.5vh;padding:1.5vh;background:#d32f2f1a;border-radius:1vh;display:inline-block}.ad-banner-container{width:100%;max-width:100vw;display:flex;justify-content:center;align-items:center;padding:0;background:transparent;position:relative;overflow:hidden}.ad-banner{display:block;width:100%;max-width:clamp(320px,95vw,728px);min-height:clamp(50px,10vh,90px)}.ad-banner-fallback{position:absolute;width:100%;max-width:clamp(320px,95vw,728px);min-height:clamp(50px,10vh,90px);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4285f41a,#ea43351a);border:2px solid rgba(255,255,255,.15);border-radius:8px;pointer-events:none;z-index:-1}.ad-fallback-text{font-size:clamp(.6rem,1.5vh,.9rem);color:#ffffff4d;font-weight:500;text-transform:uppercase;letter-spacing:.15em;text-align:center;padding:0 8px}.ad-banner-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:clamp(320px,95vw,728px);min-height:clamp(50px,10vh,90px);background:linear-gradient(135deg,#ffffff0d,#ffffff05);border:1px dashed rgba(255,255,255,.1);border-radius:8px;padding:clamp(8px,2vh,16px);gap:clamp(4px,.5vh,8px)}.ad-placeholder-text{font-size:clamp(.7rem,1.6vh,1rem);color:#fff6;font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-align:center}.ad-placeholder-subtext{font-size:clamp(.55rem,1.2vh,.8rem);color:#ffffff40;font-weight:400;text-align:center;padding:0 8px}@media (max-width: 768px){.ad-banner-container{padding:0 4px}.ad-banner,.ad-banner-fallback{max-width:98vw;min-height:clamp(50px,8vh,70px)}.ad-banner-placeholder{max-width:98vw;min-height:clamp(50px,8vh,70px);padding:clamp(6px,1.5vh,12px)}}@media (max-width: 480px){.ad-banner{max-width:100vw;min-height:50px}.ad-banner-fallback{max-width:100vw;min-height:50px;border-radius:4px}.ad-fallback-text{font-size:.55rem;letter-spacing:.1em}.ad-banner-placeholder{max-width:100vw;min-height:50px;padding:8px;border-radius:4px}.ad-placeholder-text{font-size:.65rem}.ad-placeholder-subtext{font-size:.5rem}}@media (max-height: 700px){.ad-banner-container{padding:0}.ad-banner,.ad-banner-fallback,.ad-banner-placeholder{min-height:clamp(50px,8vh,70px)}}@media (max-height: 600px){.ad-banner,.ad-banner-fallback{min-height:50px}.ad-banner-placeholder{min-height:50px;padding:6px}}.help-content{line-height:1.7;font-weight:400}.help-content p{margin-bottom:16px;letter-spacing:.01em}.help-content h3{margin:24px 0 12px;font-size:1.2rem;font-weight:700;letter-spacing:.02em}.example{margin:24px 0}.example-row{margin:16px 0}.example-tiles{display:flex;gap:4px;margin-bottom:8px}.example-tiles .tile{width:40px;height:40px;font-size:1.2rem}.rules ul,.modes ul{margin-left:20px}.rules li,.modes li{margin:8px 0}.stats-content{padding:10px 0}.stats-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}.stat-item{text-align:center;padding:12px;border-radius:8px;background:#6aaa640d;box-shadow:0 2px 4px #0000000d,inset 0 1px 1px #ffffff4d;transition:all .2s ease}.stat-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000014,inset 0 1px 1px #ffffff4d}.stat-value{font-size:2rem;font-weight:800;margin-bottom:4px;letter-spacing:.02em}.stat-label{font-size:.8rem;font-weight:500;color:var(--color-text);opacity:.7;letter-spacing:.02em}.guess-distribution h3{font-size:1.1rem;font-weight:700;margin-bottom:16px;letter-spacing:.02em}.distribution-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.distribution-label{font-weight:700;min-width:20px}.distribution-bar-container{flex:1;background-color:var(--color-empty);height:28px;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px #00000014}.distribution-bar{background:linear-gradient(135deg,#6aaa64,#5a9a54);height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;transition:width .3s ease;box-shadow:inset 0 1px 1px #fff3,inset 0 -1px 2px #0003}.distribution-count{color:#fff;font-size:.85rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2)}@media (max-width: 768px){.stats-summary{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-correct: #6aaa64;--color-present: #c9b458;--color-absent: #787c7e;--color-empty: #d3d6da;--color-bg: #ffffff;--color-text: #1a1a1b;--color-key-bg: #d3d6da;--color-border: #d3d6da}@media (prefers-color-scheme: dark){:root{--color-bg: #121213;--color-text: #ffffff;--color-key-bg: #818384;--color-border: #3a3a3c;--color-empty: #3a3a3c;--color-absent: #3a3a3c}}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--color-bg);color:var(--color-text);height:100vh;width:100vw;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}button{cursor:pointer;border:none;font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}
