*,::after,::before{box-sizing:border-box;font-family:Arial}html{margin:0;height:100%;overflow:hidden}body{height:100%;background-color:#111112 !important;display:flex;flex-direction:column;min-height:90vh;margin:0;padding:1em;font-size:clamp(.5rem,2.5vmin,1.5rem);overflow:hidden}.screen{display:grid;height:100%;width:100%;grid-gap:10px;grid-template-columns:31% 13%;grid-template-rows:55% 25% 15%;grid-template-areas:"guess menu" "keyboard keyboard" "answer answer";justify-content:center}.keyboard{display:grid;grid-template-columns:repeat(23,1.4em);grid-auto-rows:3em;gap:.25em;justify-content:flex;grid-area:keyboard}.empty1{display:grid;grid-area:empty1}.empty2{display:grid;grid-area:empty2}.key{font-size:1.2em;grid-column:span 2;border:none;padding:0;display:flex;justify-content:center;align-items:center;background-color:hsl(var(--hue,200),var(--saturation,1%),calc(var(--lightness-offset,0%) + var(--lightness,51%)));color:#fff;fill:#fff;text-transform:uppercase;border-radius:.25em;cursor:pointer;user-select:none}.key[data-enter]{grid-column:span 4;font-size:1.3em;font-family:'Arial Narrow'}.key[data-delete]{grid-column:span 3;background:url(images/delete-icon2.png) center;background-repeat:no-repeat;background-size:80%;background-color:hsl(var(--hue,200),var(--saturation,1%),calc(var(--lightness-offset,0%) + var(--lightness,51%)))}.dropbtn{position:relative;width:100%;height:100%;grid-column:span 4;background-color:transparent;color:#fff;border:none;margin-top:1em;display:grid;justify-content:center;align-items:center;font-size:1.7em;font-family:'Arial Narrow';cursor:pointer;margin-top:1em}.key[data-reload]{grid-column:span 4;border:.05em solid #fff;margin-top:1em;background-color:transparent;justify-content:center}.key[data-help]{grid-column:span 4;border:.05em solid #fff;margin-top:1em;background-color:transparent;justify-content:center}.key[data-language]{height:100%;width:450%;grid-column:span 4;border:.05em solid #fff;margin-top:-.3em;background-color:transparent;justify-content:center}.key[data-language2]{left:1500%;display:none}.dropdown{position:relative}.dropdown-content{display:none;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block;width:120%}.dropdown:hover .dropdown-content{display:block}.flag-icon{display:inline-flex;align-items:center;margin-right:8px}.flag-icon img{width:16px;height:16px;vertical-align:middle}.key[data-credit]{grid-column:span 1;background-color:transparent;font-size:.6em;padding-top:40px;text-align:end;font-family:Papyrus;opacity:.6}.key>svg{width:1.75em;height:1.75em}.key:focus,.key:hover{--lightness-offset:10%}.key.wrong-wrong{background:url(images/ss-tile.png) center}.key.nearly-wrong{background:url(images/ys-tile.png) center}.key.correct-wrong{background:url(images/zs-tile.png) center}.key.wrong-nearly{background:url(images/sy-tile.png) center}.key.nearly-nearly{background:url(images/yy-tile.png) center}.key.correct-nearly{background:url(images/zy-tile.png) center}.key.wrong-correct{background:url(images/sz-tile.png) center}.key.nearly-correct{background:url(images/yz-tile.png) center}.key.correct-correct{background:url(images/zz-tile.png) center}.guess-grid{display:grid;justify-content:flex;align-content:center;flex-grow:1;grid-template-columns:repeat(5,3.4em);grid-template-rows:repeat(7,2.6em);gap:.25em;margin-bottom:1em;margin-left:2em;grid-area:guess}.tile{font-size:2em;color:#fff;border:.05em solid #39393b;text-transform:uppercase;font-weight:700;display:flex;justify-content:center;align-items:center;user-select:none;transition:transform 250ms linear}#left1,#left2,#left3,#left4,#left5{background:url(images/zz-tile.png) center;font-size:2.1em;color:#fff;border:.05em solid #39393b;text-transform:uppercase;text-align:left;font-weight:700;display:flex;padding-left:5px;justify-content:left;align-items:left;user-select:none;transition:transform 250ms linear}#right1,#right2,#right3,#right4,#right5{background:url(images/zz-tile.png) center;font-size:2.1em;color:#fff;border:.05em solid #39393b;text-transform:uppercase;text-align:center;font-weight:700;display:flex;padding-left:15px;justify-content:center;align-items:center;user-select:none;transition:transform 250ms linear}#level{grid-column:span 3;user-select:none;color:#8b0000;align-items:center;font-size:2em;margin-left:1em}#flag{visibility:hidden;grid-column:span 4;background:url(images/lng-eng-usa.png) center;background-repeat:no-repeat;background-size:65%;position:relative;font-size:1.1em;color:#ff0;white-space:nowrap}#flag[data-veto=ban]{background:0 0}#lives{grid-column:span 4;user-select:none;font-size:2.2em;color:#8b0000;font-weight:700;display:flex;padding-left:30px;margin-top:.5em}#lives[data-state=game-over]{background:url(images/game-over2.png) center;background-repeat:no-repeat;background-size:100%}#score{grid-column:span 4;user-select:none;font-size:2.5em;color:green;font-weight:700;display:flex;padding-left:30px;margin-top:.5em}.answer-grid{display:grid;justify-content:flex;align-content:center;flex-grow:1;grid-template-columns:repeat(9,3.4em);grid-template-rows:repeat(2,2.6em);gap:.25em;margin-top:1em;margin-left:2em;grid-area:answer}.menu-grid{display:grid;justify-content:flex;align-content:center;grid-template-columns:repeat(5,2em);grid-template-rows:repeat(8,3em);gap:.25em;margin-top:.25em;margin-left:-1em;grid-area:menu;position:relative}.tile[data-state=active]{border-color:#555657}.tile[data-state=wrong-wrong]{border:none;background:url(images/ss-tile.png) center}.tile[data-state=wrong-nearly]{border:none;background:url(images/sy-tile.png) center}.tile[data-state=wrong-correct]{border:none;background:url(images/sz-tile.png) center}.tile[data-state=nearly-wrong]{border:none;background:url(images/ys-tile.png) center}.tile[data-state=nearly-nearly]{border:none;background:url(images/yy-tile.png) center}.tile[data-state=nearly-correct]{border:none;background:url(images/yz-tile.png) center}.tile[data-state=correct-wrong]{border:none;background:url(images/zs-tile.png) center}.tile[data-state=correct-nearly]{border:none;background:url(images/zy-tile.png) center}.tile[data-state=correct-correct]{border:none;background:url(images/zz-tile.png) center}.tile[data-veto=ban]{border:none;background:url(images/stars.png) center;background-repeat:no-repeat;background-size:100%;opacity:.7}.tile.shake{animation:shake 250ms ease-in-out}.tile.dance{animation:dance .5s ease-in-out}.tile.flip{transform:rotateX(90deg)}.tileLeft[data-state=correct-correct]{border:none;background:url(images/zz-tile.png) center}.tileRight[data-state=correct-correct]{border:none;background:url(images/zz-tile.png) center}@keyframes shake{10%{transform:translateX(-5%)}30%{transform:translateX(5%)}50%{transform:translateX(-7.5%)}70%{transform:translateX(7.5%)}90%{transform:translateX(-5%)}100%{transform:translateX(0)}}@keyframes dance{20%{transform:translateY(-50%)}40%{transform:translateY(5%)}60%{transform:translateY(-25%)}80%{transform:translateY(2.5%)}90%{transform:translateY(-5%)}100%{transform:translateY(0)}}.alert-container{position:fixed;top:10vh;left:50vw;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;font-size:3em}.alert{pointer-events:none;background-color:#f5f5f5;padding:.75em;border-radius:.25em;opacity:1;transition:opacity .5s ease-in-out;margin-bottom:.5em}.alert:last-child{margin-bottom:0}.alert.hide{opacity:0}.rules-container{position:fixed;top:5vh;left:50vw;transform:translateX(-50%);z-index:1;display:block;flex-direction:column;align-items:center;text-align:end}.rules{position:fixed;margin-left:-250px;width:490px;height:720px;background:url(images/twordle-rules.png) top;background-repeat:no-repeat;pointer-events:none;background-color:#000;padding:.75em;border-radius:.25em;opacity:1;transition:opacity .5s ease-in-out}.infolink{position:fixed;color:orange;font-size:1em;z-index:2;white-space:nowrap;right:-18em;margin-top:30px;}.rules:last-child{margin-bottom:0}.rules.hide{opacity:0}.closebtn{position:fixed;color:orange;font-weight:700;float:right;font-size:35px;line-height:20px;z-index:3;cursor:pointer;transition:.3s}.closebtn:hover{color:red}.closebtn:focus{outline:0}.music-icon{grid-row:span 2;grid-column:span 2;margin-top:1em;cursor:pointer;padding:0;display:inline-flex;margin-top:4em}.sound-icon{grid-row:span 3;grid-column:span 2;margin-top:1em;cursor:pointer;padding:0;background-size:contain;display:inline-block;margin-top:4em}@media only screen and (max-width:1300px){.screen{display:grid;height:100%;width:100%;grid-gap:10px;grid-template-columns:40% 15%;grid-template-rows:55% 25% 15%;grid-template-areas:"guess menu" "keyboard keyboard" "answer answer";justify-content:center}.menu-grid{display:grid;justify-content:flex;align-content:left;left:0;transform:scale(.7,.7)}.music-icon,.sound-icon{margin-top:-50px}}@media only screen and (max-width:820px) and (orientation:landscape){.screen{grid-template-columns:30% 66%;grid-template-rows:70% 25%;grid-template-areas:"guess keyboard" "answer menu";margin-left:0}.keyboard{margin-top:15%;margin-left:15%;transform:scale(1.2,1.3)}.menu-grid{justify-content:center}.answer-grid,.guess-grid{transform:scale(1.1,1.1);margin-left:10%}.closebtn{margin-top:1em}#lives,#score{font-size:4em;margin-left:-120px;margin-top:-120px;z-index:-10}.music-icon,.sound-icon{transform:scale(.66,.66);margin-top:50px;margin-left:100px}.sound-icon{margin-left:110px}.key[data-help],.key[data-reload]{top:2em;transform:scale(1.2,1.2);font-size:1.2em}.key{font-size:2em}.rules-container{top:-1vh}.rules{left:5%;margin-top:2em;width:600px;height:250px;background:url(images/TWO-rules.png) top;background-size:100%}.key[data-language]{display:none}.key[data-language2]{display:flex;top:3em}.key[data-language2] a{display:inline-block;margin-right:10px}.dropdown-content a{display:none}}@media only screen and (max-width:600px) and (orientation:portrait){.screen{grid-template-columns:60% 35%;grid-template-rows:40% 20% 10%;grid-template-areas:"guess menu" "keyboard keyboard" "answer answer";justify-content:center;margin-top:2em;margin-left:1em}.rules{left:5%;margin-top:-4em;transform:scale(.9,.9);z-index:2}.music-icon,.sound-icon{transform:scale(.66,.66);margin-top:-10px}#lives,#score{gap:1em;font-size:3.5em}}.answer-grid > *,.keyboard > *,.guess-grid > *{margin:0;}