:root{--bg: #ffffff;--text: #000000;--border: #000000;--key-bg: #ffffff;--key-text: #000000;--correct: green;--misplaced: goldenrod}html.dark{--bg: black;--text: #ffffff;--border: #ffffff;--key-bg: black;--key-text: #ffffff;--correct: green;--misplaced: goldenrod}*{box-sizing:border-box}td{color:var(--text)}html,body,#app{height:100%;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);transition:.8s cubic-bezier(.11,0,.5,0);width:100%;min-height:100dvh}.show-setting{display:none;position:absolute;top:15px;left:50px;z-index:9999;border:none;border-radius:5px;font-size:1rem;cursor:pointer;padding:0}#ico-showSetting{width:40px;height:40px;fill:var(--text)}#settingsForm{position:absolute;top:15px;left:10px;z-index:9999;display:flex;align-items:center;gap:10px;color:var(--bg);padding:10px;border-radius:5px;background-color:var(--text)}#settingsForm label{font-size:1rem}#settingsForm select,#settingsForm button{background-color:var(--bg);color:var(--text);border:1px solid var(--bg);padding:5px;border-radius:5px;font-size:1rem;width:auto}.theme-transition{position:fixed;inset:0;background:var(--bg);pointer-events:none;z-index:-1;clip-path:circle(0% at var(--x) var(--y));transition:clip-path 1s ease-in-out}.theme-transition.active{clip-path:circle(150% at var(--x) var(--y))}button{background-color:transparent;border:none;cursor:pointer;width:40px;height:40px;padding:0}button svg{width:100%;height:100%;transition:transform .3s ease}button:hover svg{transform:scale(1.1)}.dark-ico{fill:var(--text)}.dark-toggle{outline:none;position:absolute;top:15px;right:50px;z-index:9999;transition:1s ease-in-out}#app{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;width:100%;height:100%;padding-top:15px;gap:10%}#gameBoard{z-index:1000}#wordGrid{max-height:45%;max-width:50%;border-collapse:separate;border-spacing:15px}td,th{border:1px solid var(--border);border-radius:10px}#wordGrid td{text-align:center;font-size:2rem;font-weight:700;height:3rem;width:3rem;text-transform:uppercase;border-radius:5px}.keysState{max-width:50%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(3,1fr);justify-content:center;align-content:center;align-items:center;justify-items:center;height:auto;width:30%;gap:10px;padding-bottom:40px}.key{width:100%;aspect-ratio:1;color:var(--text);border-radius:5px;min-width:min-content;border:.5px solid var(--border);font-size:1rem}.key:empty{border:none;cursor:auto}.key:hover{filter:opacity(.5)}.keyWide{grid-column:span 2;width:100%}#resultPopout{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:space-around;width:30%;height:50%}#resultPopout-box{background-color:var(--text);color:var(--bg);width:150%;height:fit-content;border-radius:15px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px;text-align:center}#replayBtn{position:relative;width:100%;bottom:10px;background-color:var(--bg);color:var(--text);padding:10px 20px;border-radius:5px;font-weight:700;cursor:pointer;margin-top:20px}#replayBtn:hover{cursor:pointer;filter:brightness(.5)}.keyWrong{filter:opacity(.2)}.keyMisplaced{background-color:var(--misplaced)}.keyCorrect{background-color:var(--correct)!important;color:var(--text)}@media screen and (max-width:1024px){.show-setting{display:flex}.visible{display:flex!important}#settingsForm{display:none;flex-direction:column;align-items:flex-center;top:50%;left:50%;transform:translate(-50%,-50%);gap:8px;width:70%}#settingsForm label{font-size:.9rem}#wordGrid{max-width:70%;border-spacing:10px}#wordGrid td{font-size:1.75rem;height:2.8rem;width:2.8rem}.keysState{width:60%;gap:8px}#resultPopout{width:50%;height:auto}#resultPopout-box{width:100%}}@media screen and (max-width:600px){.show-setting{top:10px;left:10px;display:flex}.visible{display:flex!important}#settingsForm{display:none;top:50%;left:50%;transform:translate(-50%,-50%);gap:5px;width:80%;flex-direction:column;align-items:center}#settingsForm label{font-size:.8rem}.dark-toggle{top:10px;right:10px}#app{gap:5%;padding-top:10px}#wordGrid{max-width:90%;max-height:45%;border-spacing:5px}#wordGrid td{font-size:1.2rem;height:2.2rem;width:2.2rem}.keysState{width:95%;grid-template-columns:repeat(10,1fr);gap:4px}.key{height:28px;font-size:.7rem;padding:0}.keyWide{grid-column:span 2}#resultPopout{width:85%}#resultPopout-box{width:100%;height:auto}}