.botones{position:absolute;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:8px;top:0;left:-6rem}.botones button{background-color:#088395;border:none;height:2.2rem;width:2.2rem;color:#fff;font-size:1.1em;border-radius:.5rem;transition:all .1s ease}.botones button:hover{transform:scale(1.1)}.botones .c5{background-color:#5a5}.botones .c10{background-color:#aa3}.botones .c20{background-color:#a2a}.botones .reiniciar{color:#fff;background-color:#a33;display:grid;place-content:center}:root{--casilla-default: #356F8B;--casilla-desactivada: #00aF7A;--casilla-container: #088395;--fondo: #447;--tamaño-casilla: 10rem}.App{display:flex;flex-direction:column;justify-content:center;height:100vh}main{flex:1;display:grid;place-content:center}.casillas-container{position:relative;height:fit-content;display:grid;place-content:center;margin:0 auto;margin-top:1rem}.casillas{background-color:var(--casilla-container);border-radius:1em;padding:1em;display:flex;flex-direction:column;flex-wrap:wrap;gap:8px;max-height:40em}.casilla{height:3.2rem;width:var(--tamaño-casilla);border-radius:10px;font-size:1.2rem;color:#fff;border:none;background-color:var(--casilla-default)}.casillaA{background-color:var(--casilla-desactivada)}.casillaA:hover{background-color:#00bf8a}.randomNumber-buttons{width:fit-content;margin:0 auto}.mCasillas{width:calc(var(--tamaño-casilla) * 2.25)}@media (max-width: 650px){.mCasillas{width:calc(var(--tamaño-casilla) * 2.35)}.randomNumber-buttons{position:relative}.botones{position:absolute;left:initial;margin:0;top:50%;transform:translateY(-50%);right:-6.5rem}.casilla{height:3rem}.casillas{max-height:37rem}.casillas-container{position:inherit}:root{--tamaño-casilla: 9rem}}.haveNumber{background-color:#555;color:#fff}.numeroRandom{color:#fff;margin:3em auto;height:4em;border-radius:1em}h2{margin:0}.gameOver{font-size:1rem;border:none;border-radius:1.25rem;padding:2.5rem 3rem;min-width:22rem;max-width:90vw;text-align:center;color:#fff;background-color:var(--fondo)}.gameOver[open]{animation:dialogIn .35s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes dialogIn{0%{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.gameOver::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:backdropIn .3s ease forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes btnIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.gameOver.win h2{color:#00bf8a}.gameOver.lose h2{color:#c0392b}.gameOver h2{font-size:2.25rem;margin:0 0 .25rem;letter-spacing:-.02em}.gameOver p{margin:0 0 2rem;font-size:1.05rem;line-height:1.5;opacity:.9}.gameOver button{background-color:#fffffff2;border:none;color:#222;font-size:1rem;font-weight:600;padding:.75rem 1.75rem;border-radius:.625rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;margin:0 auto;opacity:0;animation:btnIn .4s ease .2s forwards;transition:background-color .2s ease,box-shadow .2s ease}.gameOver button:hover{box-shadow:0 4px 12px #0003}.gameOver button:active{background-color:#ccc}.gameOver button .reset-icon{width:1.1rem;height:1.1rem}@media (max-width: 650px){.gameOver{min-width:unset;width:88vw;padding:2rem 1.5rem}.gameOver h2{font-size:1.85rem}.gameOver p{font-size:.95rem}}footer{padding-left:1rem;opacity:.2;color:#fff}.box-placeholder{color:#ffffff38}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--fondo);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}