body{font-family:Arial,sans-serif;max-width:720px;margin:20px auto;padding:0 10px;background:#f9f9f9;color:#333}h1{text-align:center}#notesGrid{pointer-events:none;display:grid;grid-area:grids;grid-template-columns:repeat(9,1fr);margin:20px auto;width:450px;height:450px;z-index:2}#notesGrid .note-cell{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:48px;height:48px;border:1px solid #bbb}#notesGrid .note-cell .note{font-size:.7rem;display:flex;text-align:center;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;font-weight:700}#notesGrid .note-cell:nth-child(3n){border-right:2px solid #333}#notesGrid .note-cell:nth-child(n+19):nth-child(-n+27),#notesGrid .note-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #333}#notesGrid .note-cell:nth-child(9n+1){border-left:2px solid #333}#notesGrid .note-cell:nth-child(-n+9){border-top:2px solid #333}#appGrid{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"message message message" "lives lives lives" "timer timer timer" "difficulties grids controls" "keys keys keys"}#timer{text-align:center;margin-bottom:10px;font-weight:700;color:#007bff;grid-area:timer}#gridContainer{grid-area:grids;position:relative}#difficulties{display:flex;flex-direction:column;grid-area:difficulties}#controls{display:flex;flex-direction:column;grid-area:controls}#grid{grid-area:grids;display:grid;top:240px;grid-template-columns:repeat(9,1fr);margin:20px auto;width:450px;height:450px}#grid .cell{width:48px;height:48px;font-size:1.4rem;display:flex;text-align:center;justify-content:center;align-items:center;cursor:pointer;border:1px solid #bbb;background-color:#fff;-webkit-user-select:none;user-select:none}#grid span{color:#000}#grid .cell:nth-child(3n){border-right:2px solid #333}#grid .cell:nth-child(n+19):nth-child(-n+27),#grid .cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #333}#grid .cell:nth-child(9n+1){border-left:2px solid #333}#grid .cell:nth-child(-n+9){border-top:2px solid #333}#grid .cell:nth-last-child(-n+9){border-bottom:2px solid #333}.disabled{background-color:#eee!important;color:#444!important}.highlighted{background-color:#d0e1ff!important}.highlighted-similar{background-color:#568ef7!important}.invalid{background-color:#ffb3b3!important}.notes{font-size:.6em;color:#666;text-align:left;line-height:1.2;padding-left:4px}.cell-notes{white-space:pre-wrap;word-break:break-word}#keys{grid-area:keys;display:flex;flex-direction:row;justify-content:center}#keys button{width:48px;height:48px;font-size:1.4rem;display:flex;text-align:center;justify-content:center;align-items:center;cursor:pointer;border:1px solid #1e1e1e;background-color:#b2adff;-webkit-user-select:none;user-select:none}.complete{background-color:#0c6!important}.controls{text-align:center;margin:10px 0}.controls button{font-size:1rem;margin:0 5px 10px;padding:8px 14px;cursor:pointer;border-radius:5px;border:1px solid #007bff;background-color:#fff;color:#007bff;-webkit-user-select:none;user-select:none;transition:background-color .2s,color .2s}.controls button:hover{background-color:#007bff;color:#fff;transition:background-color .3s ease-in-out}.selected{background-color:#007bff!important;color:#fff!important}#clear{background-color:#ff4d4d!important}.front{z-index:3}#message{text-align:center;margin-bottom:20px;font-weight:700;height:1.3em;color:#d33;grid-area:message}#lives{text-align:center;margin-bottom:10px;font-weight:700;color:#d33;grid-area:lives}#losePopup{z-index:3;display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:2em;text-align:center}#losePopup button{z-index:3;padding:10px 20px;font-size:1em;background-color:#0c6;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px}#rain{object-fit:cover;z-index:1;position:fixed;right:0;bottom:0;min-width:100%;min-height:100%;opacity:.5}#victoryPopup{z-index:3;display:none;position:fixed;inset:0;background-color:#000000b3;z-index:9999;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:2em;text-align:center}#victoryPopup button{z-index:3;padding:10px 20px;font-size:1em;background-color:#0c6;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px}#confetti{object-fit:cover;z-index:1;position:fixed;right:0;bottom:0;min-width:100%;min-height:100%}#closeLoseBtn,#closeVictoryBtn{background-color:#ff4d4d!important;margin-top:10px!important}