:root{--white:#181a1b;--black:#fff;--app-red:red;--app-green:green;--guess-black:#fff;--guess-gray:#919191;--guess-yellow:#fc0;--guess-green:#0c8;--guess-text-red:red;--app-width:min(100vw,var(--app-max-width));--app-max-width:600px}
body,html{height:100%}
body{background:#fff;background:var(--black);color:#181a1b;color:var(--white);font-family:Outfit,sans-serif;font-size:calc(min(100vw,600px)/30);font-size:calc(var(--app-width)/30)}
#root{height:100%}
p,ul{margin:0}
a,button{color:#181a1b;color:var(--white)}
button{background-color:#fff;background-color:var(--black);border:double;cursor:pointer;font-size:calc(min(100vw,600px)/30);font-size:calc(var(--app-width)/30);padding:calc(min(100vw,600px)/75);padding:calc(var(--app-width)/75)}
.game{display:grid;grid-template-rows:auto 1fr auto;height:100%;margin:auto;max-width:600px;max-width:var(--app-max-width)}
.game.win{background:green;background:var(--app-green)}
.game.lose{background-color:red;background-color:var(--app-red)}
.game.color-blind{--guess-yellow:#60a5fa;--guess-green:#fb923c}
.game.wide{max-width:1200px;max-width:calc(var(--app-max-width)*2)}
.header{display:grid;grid-template-rows:auto auto;padding:4px}
.row-1{grid-column-gap:8px;align-items:center;-webkit-column-gap:8px;column-gap:8px;display:grid;grid-template-columns:auto auto 1fr auto auto auto;justify-content:center}
.title{font-size:calc(min(100vw,600px)/18.5);font-size:calc(var(--app-width)/18.5);margin:0;text-align:center}
.icon{cursor:pointer;width:calc(min(100vw,600px)/18.5);width:calc(var(--app-width)/18.5)}
.row-2{display:flex;justify-content:space-between}
.cannot-win{color:red;color:var(--guess-text-red)}
.timer{font-family:monospace}
.boards{grid-column-gap:calc(min(100vw,600px)/75);grid-column-gap:calc(var(--app-width)/75);grid-row-gap:calc(min(100vw,600px)/25);grid-row-gap:calc(var(--app-width)/25);align-content:start;-webkit-column-gap:calc(min(100vw,600px)/75);column-gap:calc(min(100vw,600px)/75);-webkit-column-gap:calc(var(--app-width)/75);column-gap:calc(var(--app-width)/75);display:grid;grid-template-columns:repeat(4,auto);overflow-y:scroll;padding:0 calc(min(100vw,600px)/75) calc(min(100vw,600px)/25);padding:0 calc(var(--app-width)/75) calc(var(--app-width)/25) calc(var(--app-width)/75);row-gap:calc(min(100vw,600px)/25);row-gap:calc(var(--app-width)/25)}
.game.wide .boards{grid-template-columns:repeat(8,auto)}
.board{grid-gap:calc(min(100vw,600px)/600);grid-gap:calc(var(--app-width)/600);background:#181a1b;background:var(--white);display:grid;gap:calc(min(100vw,600px)/600);gap:calc(var(--app-width)/600);grid-template-columns:repeat(5,1fr);padding:calc(min(100vw,600px)/600);padding:calc(var(--app-width)/600)}
.board.complete{-webkit-filter:contrast(.5) brightness(.5);filter:contrast(.5) brightness(.5)}
.game.hide-completed-boards .board.complete{display:none}
.cell{align-items:center;aspect-ratio:1/1;background:#fff;background:var(--guess-black);display:flex;font-size:calc(min(100vw,600px)/25);font-size:calc(var(--app-width)/25);justify-content:center;line-height:.75;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.cell.yellow{background:#fc0;background:var(--guess-yellow)}
.cell.green,.cell.yellow{color:#fff;color:var(--black)}
.cell.green{background:#0c8;background:var(--guess-green)}
.cell.text-red{color:red;color:var(--guess-text-red)}
.letter{position:absolute}
.keyboard{grid-row-gap:2px;grid-column-gap:2px;-webkit-column-gap:2px;column-gap:2px;display:grid;font-size:calc(min(100vw,600px)/20);font-size:calc(var(--app-width)/20);grid-template-columns:repeat(10,1fr);padding:2px;row-gap:2px}
.keyboard.hidden{display:none}
.game.wide .keyboard{justify-self:center;width:600px;width:var(--app-max-width)}
.key{align-items:center;aspect-ratio:1/1;border:1px solid #181a1b;cursor:pointer;display:flex;justify-content:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.key.enter-1{border-bottom:none}
.key.enter-2{border-right:none}
.key.enter-3{border-left:none;border-top:none}
.result{grid-column-gap:calc(min(100vw,600px)/75);grid-column-gap:calc(var(--app-width)/75);-webkit-column-gap:calc(min(100vw,600px)/75);column-gap:calc(min(100vw,600px)/75);-webkit-column-gap:calc(var(--app-width)/75);column-gap:calc(var(--app-width)/75);display:grid;font-size:calc(min(100vw,600px)/30);font-size:calc(var(--app-width)/30);grid-template-columns:1fr auto;padding:calc(min(100vw,600px)/75);padding:calc(var(--app-width)/75)}
.result.hidden{display:none}
.share{grid-row-gap:calc(min(100vw,600px)/75);grid-row-gap:calc(var(--app-width)/75);display:grid;grid-template-rows:1fr auto;row-gap:calc(min(100vw,600px)/75);row-gap:calc(var(--app-width)/75)}
.text{background-color:#fff;background-color:var(--black);border:1px solid;color:#181a1b;font-size:calc(min(100vw,600px)/50);font-size:calc(var(--app-width)/50);margin:0;text-align:center}
.text .emoji{width:calc(min(100vw,600px)/50);width:calc(var(--app-width)/50)}
.words{grid-column-gap:calc(min(100vw,600px)/75);grid-column-gap:calc(var(--app-width)/75);-webkit-column-gap:calc(min(100vw,600px)/75);column-gap:calc(min(100vw,600px)/75);-webkit-column-gap:calc(var(--app-width)/75);column-gap:calc(var(--app-width)/75);display:grid;grid-template-columns:1fr 1fr 1fr 1fr;text-align:center}
.popup-wrapper{align-items:center;background:hsla(0,0%,8%,.6);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:fixed;right:0;top:0}
.popup-wrapper.hidden{display:none}
.popup{background-color:#fff;background-color:var(--black);border:1px solid #181a1b;display:flex;flex-direction:column;overflow:auto;padding:calc(min(100vw,600px)/20);padding:calc(var(--app-width)/20);width:min(450px,100vw);width:min(calc(var(--app-max-width)*.75),100vw)}
.separator{width:100%}
.close{margin-top:calc(min(100vw,600px)/30);margin-top:calc(var(--app-width)/30)}
.group label{margin-left:calc(min(100vw,600px)/75);margin-left:calc(var(--app-width)/75)}