.key-colors{opacity:0;flex-direction:row;align-items:stretch;transition:opacity .3s;display:flex}.key-colors.has-colors{opacity:1}.key-color-segment{flex:1;min-height:100%}.key-letter{z-index:10;text-shadow:0 0 2px #fffc;font-weight:700;position:relative}.board-complete{opacity:.5;pointer-events:none}.board-complete:after{content:"✓";color:#10b981;z-index:100;font-size:4rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.quordle-box{border:1px solid #0000;border-radius:4px;margin:1px;transition:all .2s ease-in-out}.quordle-box-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.quordle-box-connected{border-right:0;border-radius:0;margin:0}.quordle-box-connected:last-child{border-right:1px solid #e5e7eb;border-top-right-radius:4px;border-bottom-right-radius:4px}.quordle-box-connected:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.row-current .quordle-box{border:1px solid #d1d5db;background-color:#e4e4e7!important}.row-future .quordle-box{border:1px solid #e5e7eb;background-color:#f4f4f5!important}.bg-box-correct{color:#fff!important;background-color:#10b981!important}.bg-box-diff{color:#fff!important;background-color:#f59e0b!important}.bg-box-wrong{color:#fff!important;background-color:#6b7280!important}.quordle-key{cursor:pointer;text-transform:uppercase;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;justify-content:center;align-items:center;margin:1px;font-weight:700;transition:all .2s ease-in-out;display:flex;position:relative}.quordle-key:hover{opacity:.8}.quordle-key .quordle-box-content{z-index:10;color:inherit;justify-content:center;align-items:center;width:100%;height:100%;font-size:16px;font-weight:700;display:flex;position:relative}.quordle-key[data-key]{aspect-ratio:1;height:auto}.quordle-key#backspace-btn,.quordle-key#enter-btn{aspect-ratio:1.5;height:auto}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.animate-flip{animation:.6s ease-in-out flip}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-win{animation:.5s ease-in-out bounce}#game-over-modal{opacity:0;transition:opacity .2s ease-in-out}#game-over-modal.show{opacity:1}#game-over-modal>div{transition:transform .2s ease-in-out;transform:scale(.95)}#game-over-modal.show>div{transform:scale(1)}.demo-cell{border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;margin:1px auto;font-size:16px;font-weight:700;display:flex}.demo-key-container{border-radius:6px;width:60px;height:60px;position:relative;overflow:hidden}.demo-key-quadrants{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;display:grid;position:absolute;inset:0}.quadrant{border:none}.quadrant.top-left{border-top-left-radius:6px}.quadrant.top-right{border-top-right-radius:6px}.quadrant.bottom-left{border-bottom-left-radius:6px}.quadrant.bottom-right{border-bottom-right-radius:6px}.demo-key-letter{color:#fff;text-shadow:0 0 3px #000000b3;z-index:10;justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex;position:absolute;inset:0}@media (width<=640px){.demo-cell{width:28px;height:28px;font-size:14px}.demo-key-container{width:50px;height:50px}.demo-key-letter{font-size:20px}}