: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: #121213;--text: #fff;--muted: #818384;--green: #538d4e;--yellow: #b59f3b;--grey: #3a3a3c;--border: #3a3a3c;--border-filled: #565758;--key: #818384;--switch-track: #565758}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}.langLabel.ar{font-family:Noto Kufi Arabic,sans-serif;font-size:.95rem}:root:not([lang=ar]) .langLabel.en,:root[lang=ar] .langLabel.ar{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}#themeToggle svg{width:1.5rem;height:1.5rem}#themeToggle .sun,:root[data-theme=dark] #themeToggle .moon{display:none}:root[data-theme=dark] #themeToggle .sun{display:block}*{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>button:active{scale:.85}.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;justify-content:center;align-items:center;gap:1rem;min-height:2.5rem;margin:1.5rem 0}#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){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:.75rem 0}}:root[lang=ar] .keyboard{direction:ltr}:root[lang=ar] .keyboardRow>button{font-family:Rubik,Noto Kufi Arabic,Arial,sans-serif;vertical-align:top;width:1.5rem}:root[lang=ar] .keyboardRow>.wideKeys{width:1.5rem}:root[lang=ar] .wideKeys svg{display:block;width:1.1em;height:1.1em;transform:scaleX(-1)}:root[lang=ar] .box{width:2.8rem;height:2.8rem}:root[lang=ar] .box>p{font-size:1.45em}:root[lang=ar] .box>p{line-height:1;padding-top:.15em}@media(max-width:600px){:root[lang=ar] .box{width:min(4rem,15vw,4.8vh);height:min(4rem,15vw,4.8vh)}:root[lang=ar] .box>p{font-size:1.5em}:root[lang=ar] .keyboardRow>button{flex:0 0 calc(100% / 12 - .3rem);width:auto;height:3rem;min-width:0}:root[lang=ar] .keyboardRow>.wideKeys{flex:1 1 0;font-size:inherit}}
