body{text-align:center;font-size:1em;font-family:Verdana,Geneva,Tahoma,sans-serif;margin:0}h1{font-size:1.7em;padding:10px 0;border-bottom:1px solid #eee;margin:0 0 30px;color:#333}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;width:50px;height:50px;border:1px solid #bbb;margin:4px;text-align:center;line-height:50px;text-transform:uppercase;font-weight:700;font-size:2em}.grid{display:flex;flex-direction:column;align-items:center;gap:6px;margin:5px auto;padding:5px 10px}.row>div.green{--background: #5ac85a;--border-color: #5ac85a;animation:flip .5s ease forwards}.row>div.yellow{--background: #e2cc68;--border-color: #e2cc68;animation:flip .5s ease forwards}.row>div.gray{--background: #a1a1a1;--border-color: #a1a1a1;animation:flip .5s ease forwards}.row>div:nth-child(2){animation-delay:.2s}.row>div:nth-child(3){animation-delay:.4s}.row>div:nth-child(4){animation-delay:.6s}.row>div:nth-child(5){animation-delay:.8s}.row.current>div.filled{animation:bounce .2s ease-in-out forwards}.keypad-row{display:flex;justify-content:center;margin-bottom:3px}.keypad button{margin:2px;width:50px;height:50px;border-radius:6px;border:none;outline:none;background:#eee;cursor:pointer;text-transform:uppercase}.keypad button:hover{background:#ddd}.keypad button.green{background:#5ac85a;color:#fff}.keypad button.yellow{background:#e2cc68;color:#fff}.keypad button.gray{background:#a1a1a1;color:#fff}.keypad button.special-key{min-width:60px;background-color:#2f576b;color:#fff;font-weight:700;font-size:.8em}.keypad button.special-key:hover{background-color:#36656b}.modal{background:#fff9;position:fixed;width:100%;height:100%;top:0;left:0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal div{max-width:480px;background:#fff;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #0000004d}.modal h1{font-size:1.7em;border:none;margin:0 0 5px}.modal p{font-size:1.4em;margin:15px 0;color:#3a3a3c}.modal .solution{color:#6aaa64;font-weight:700;font-size:1.2em;text-transform:uppercase;letter-spacing:2px;background-color:#f0f7f0;border-radius:8px;padding:10px 20px;display:inline-block;cursor:pointer;transition:all .3s ease}.modal .solution:hover{background-color:#caf3ca}.modal button{background:#6aaa64;color:#fff;border:none;padding:10px 30px;font-size:1.1em;font-weight:700;border-radius:8px;cursor:pointer;margin-top:20px;transition:all .2s ease}@keyframes flip{0%{transform:rotateX(0);background:#fff;border-color:#333}45%{transform:rotateX(90deg);background:#fff;border-color:#333}55%{transform:rotateX(90deg);background:var(--background);border-color:var(--border-color)}to{transform:rotateX(0);background:var(--background);border-color:var(--border-color);color:#eee}}@keyframes bounce{0%{transform:scale(1);border-color:#ddd}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}