:root{--bg: white;--text: #000;--muted: #787c7e;--green: #6aaa64;--yellow: #c9b458;--grey: #787c7e;--border: #DDD;--border-filled: #999;--key: #eee;--key-hover: #00aa55;--switch-track: #cfcfcf}:root[data-theme=dark]{--bg: #0f1115;--text: #e8eaf0;--muted: #8b93a7;--green: #3a9a62;--yellow: #c2952b;--grey: #262a33;--border: #2a2f39;--border-filled: #4c5466;--key: #4a5263;--key-hover: #4ade80;--switch-track: #3a4150}:root[data-theme=dark] .keyboardRow>button.absent{color:var(--muted)}body{background-color:var(--bg);color:var(--text)}.cornerButton{position:absolute;top:1rem;display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;border:none;background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}#themeToggle{right:1rem}#langToggle{left:1rem;gap:.4rem;direction:ltr;font-size:.8rem;font-weight:700}.langLabel{color:var(--muted);transition:color .2s ease}:root:not([lang=ar]) .langLabel.en,:root[lang=ar] .langLabel.ar{color:var(--text)}:root:not([lang=ar]) #langToggle.switching .langLabel.en,:root[lang=ar] #langToggle.switching .langLabel.ar{color:var(--muted)}:root:not([lang=ar]) #langToggle.switching .langLabel.ar,:root[lang=ar] #langToggle.switching .langLabel.en{color:var(--text)}.track{position:relative;width:2.6rem;height:1.5rem;border-radius:1rem;background-color:var(--switch-track)}.knob{position:absolute;top:.15rem;left:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#fff;box-shadow:0 1px 3px #0000004d;transition:translate .2s ease}:root[lang=ar] .knob,:root:not([lang=ar]) #langToggle.switching .knob{translate:1.1rem 0}:root[lang=ar] #langToggle.switching .knob{translate:0 0}#themeIcon{position:relative;display:block;width:1.5rem;height:1.5rem}#themeIcon svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s ease}#themeIcon .sun,:root[data-theme=dark] #themeIcon .moon{opacity:0}:root[data-theme=dark] #themeIcon .sun{opacity:1}:root.themeFade,:root.themeFade *{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease,stroke .3s ease,-webkit-text-fill-color .3s ease,opacity .3s ease!important}*{margin:0;padding:0;font-family:outfit,Noto Kufi Arabic,Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none}h1{text-align:center;font-size:1.5em;font-weight:800;margin-top:3rem;margin-bottom:3rem}#whole{display:flex;flex-direction:column}.line{display:flex;flex-direction:row;justify-content:center}.box{background-color:var(--bg);border-color:var(--border);border-width:.15em;border-style:solid;width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;margin:.25em}.box>p{font-size:2em;font-weight:800;color:var(--text)}.keyboard{margin-top:3rem;font-size:1.5em}.keyboardRow{text-align:center}.keyboardRow>button{border:none;font-size:inherit;color:inherit;box-sizing:content-box;font-family:Arial,sans-serif;font-weight:600;background-color:var(--key);display:inline-flex;justify-content:center;align-items:center;margin:.25rem;padding:.5rem;width:1.75rem;height:3rem;border-radius:.25rem;transition:scale .2s ease,color .2s ease}@media(hover:hover){.keyboardRow>button:hover{scale:1.1;color:var(--key-hover)}}.keyboardRow>button.pressed{scale:1.1;color:var(--key-hover)}.keyboardRow>.wideKeys{width:4.5rem}#message{text-align:center;font-weight:700;height:1.5em;margin-top:-1.5rem;margin-bottom:1.5rem}#endGame{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:3rem 0 1.5rem}main:not(.gameOver) #endGame,main.gameOver .keyboard{display:none}#countdown{text-align:center;font-weight:700;color:var(--muted)}#share{border:none;border-radius:.25rem;background-color:var(--green);color:#fff;font-size:1rem;font-weight:700;padding:.6rem 1.5rem;cursor:pointer;transition:scale .2s ease}#share[hidden]{display:none}@media(hover:hover){#share:hover{scale:1.05}}#share:active{scale:.95}main{min-height:100vh;min-height:100dvh}footer{text-align:center;font-size:.75rem;font-weight:300;color:var(--muted);margin-bottom:1.5rem}.disclaimer{font-size:.65rem;max-width:32rem;margin:.5rem auto 0;padding:0 1rem;line-height:1.4}.disclaimer a,.disclaimer a:visited,.disclaimer a:hover,.disclaimer a:active{color:var(--muted);-webkit-text-fill-color:var(--muted);-webkit-tap-highlight-color:transparent}.signature{margin-top:1rem}.box.filled{border-color:var(--border-filled);animation:pop .1s ease-out}.box.flip{animation:flip .5s ease-in-out}@keyframes pop{50%{scale:1.1}}@keyframes flip{50%{transform:rotateX(90deg)}}.box.correct,.keyboardRow>button.correct{background-color:var(--green);border-color:var(--green);color:#fff}.box.present,.keyboardRow>button.present{background-color:var(--yellow);border-color:var(--yellow);color:#fff}.box.absent,.keyboardRow>button.absent{background-color:var(--grey);border-color:var(--grey);color:#fff}.box.correct>p,.box.present>p,.box.absent>p{color:#fff}.line.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{translate:0}20%,60%{translate:-.5rem}40%,80%{translate:.5rem}}@media(max-width:600px){#langToggle{left:.5rem;gap:.25rem;font-size:.7rem}.track{width:2.2rem;height:1.3rem}.knob{width:1rem;height:1rem}:root[lang=ar] .knob,:root:not([lang=ar]) #langToggle.switching .knob{translate:.9rem 0}:root[lang=ar] #langToggle.switching .knob{translate:0 0}h1{margin-top:1rem;margin-bottom:2rem}#message{margin-bottom:.5rem}.box{width:min(4rem,15vw,7vh);height:min(4rem,15vw,7vh);margin:.2rem}.box>p{font-size:1.75em}.keyboard{margin-top:1rem;font-size:1.1rem;padding:0 .25rem}.keyboardRow{display:flex;justify-content:center;max-width:500px;margin:0 auto}.keyboardRow>button{flex:0 0 calc(10% - .3rem);width:auto;height:3.25rem;padding:0;margin:.15rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.keyboardRow>.wideKeys{flex:1 1 0;width:auto;font-size:.75rem}#endGame{margin:1.5rem 0}}:root[lang=ar] .keyboard{direction:ltr;margin-top:2rem}:root[lang=ar] .keyboardRow>button{font-family:Rubik,Noto Kufi Arabic,Arial,sans-serif;width:1.5rem;height:2.5rem;vertical-align:top}:root[lang=ar] .keyboardRow>.wideKeys{width:3.25rem;font-size:.7em}:root[lang=ar] h1{margin-bottom:1.75rem}:root[lang=ar] .box{--box-size: 3rem;width:var(--box-size);height:var(--box-size);margin:.125rem}:root[lang=ar] .box>p{font-family:Rubik,Noto Kufi Arabic,sans-serif;font-weight:700;font-size:calc(var(--box-size) * .5);line-height:1}:root[lang=ar] h1{margin-bottom:1.25rem}@media(max-width:600px){:root[lang=ar] .box{--box-size: min(4rem, 15vw, calc((100vh - 325px)/8 - 9px) );--box-size: min(4rem, 15vw, calc((100dvh - 325px)/8 - 9px) )}:root[lang=ar] .keyboard{margin-top:1rem}:root[lang=ar] .keyboardRow>button{flex:0 0 calc(100% / 11 - .3rem);width:auto;height:2.75rem;min-width:0}:root[lang=ar] .keyboardRow>.wideKeys{flex:1 1 0;font-size:.8rem}}@media(max-width:350px){h1{font-size:1.25em}}@media(max-width:600px)and (max-height:600px){h1{margin-top:.75rem;margin-bottom:1.25rem}}