:root{--width:min( 48vh, 96vw);--cellWidth:min( calc(100vw / 12), calc( ( 50vh - var(--headerHeight) ) / 12 ) )}.screen#play.active{justify-content:stretch;flex-direction:column}.choices{text-align:center;display:flex;justify-content:center;--gap:calc( var(--cellWidth) * .1 );gap:var(--gap);width:100%;padding:var(--gap) 0}.input{border-radius:5px;background-color:red;width:var(--cellWidth);aspect-ratio:1;font-size:calc( var(--cellWidth) /1.5);display:flex;justify-content:center;align-items:center;text-transform:uppercase;padding:calc(var(--cellwidth)/ 2) 0}.input.empty{background-color:lch(var(--grey-30))}#keyboard{text-align:center;text-transform:uppercase;background-color:hsla(0,0%,0%,.05);border-top:1px solid rgba(255,255,255,.5);position:relative;width:100%;max-width:calc(var(--width) * 2);--keyWidth:var(--cellWidth);padding:calc(var(--keyWidth)/2) 0}#keyboard .row{display:flex;justify-content:space-around;width:100%}#keyboard .key{display:flex;justify-content:center;align-items:center;width:var(--keyWidth);margin:calc(var(--keyWidth)/ 2) 0;cursor:pointer;line-height:1;font-size:calc( var(--keyWidth) /1.5)}#keyboard .key.clicked{opacity:.25;pointer-events:none}#grid{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;flex-grow:1;flex-shrink:0;margin:0 auto;--cellWidth:50px}#grid .row{display:flex}#grid .cell{font-family:sans-serif;font-size:calc(var(--cellWidth)/1.5);font-weight:700;color:#663399;display:flex;justify-content:center;align-items:center;width:calc(var(--cellWidth)*.9);height:calc(var(--cellWidth)*.9);aspect-ratio:1;margin:calc(var(--cellWidth)*.05);border-radius:5px;line-height:1;text-transform:uppercase}#grid .cell.active{background-color:#fff;outline:1px solid rebeccapurple}#grid .cell.active::before{content:''}#grid .cell.active.correct{background-color:#663399;color:#fff}#grid .cell.active.correct::before{content:attr(data-value)}#grid.flip{flex-direction:row}#grid.flip .row{flex-direction:column}