*{margin:0;padding:0}:root{--main-color:#f0f8ff;--main-inc-color:#8a2be2;--comp-color:red;--player-color:#4169e1;--field-size:8}body,html{height:100%}body{display:flex;flex-direction:column}.content{align-items:center;display:flex;flex:1 0 auto;justify-content:space-between}footer{flex:0 0 auto}.box{display:grid;gap:3px;grid-template-columns:repeat(var(--field-size),1fr);margin:20px 5px;width:min(100vmin,600px)}.install{background-color:var(--main-color);border:0;cursor:pointer;font:700 24px/100px Tahoma,sans-serif;height:100px;padding:0;text-align:center;width:100%}.hidden{display:none}img{display:block;height:100px;margin-left:auto;margin-right:auto;max-width:100%}.cell{background-color:var(--main-color);border-radius:10px;box-shadow:inset 0 0 0 2px gray;font:2.5rem Tahoma,sans-serif;padding:0 0 100%;position:relative;touch-action:none;user-select:none}.message-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.message{color:var(--main-inc-color);display:inline-block;font-size:150px;font-style:italic}.cell div,span{left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.digit{cursor:grab}.player{--border-color:var(--player-color)}.comp{--border-color:var(--comp-color)}.best{border:2px solid green;color:green}.cell.disabled{border:2px solid var(--border-color);cursor:not-allowed}.digit.disabled{animation-duration:1.2s;animation-fill-mode:forwards;animation-name:bump;animation-timing-function:linear;overflow:hidden}@media (max-width:600px){.hidden2{display:none}.content{flex-direction:column}.message{font-size:30px}}.hole{color:transparent;cursor:default}.cell.last{box-shadow:inset 0 0 0 5px var(--border-color)}.flip{transform:scaleX(-1)}.active{background-color:var(--player-color)}.active.comp{background-color:var(--comp-color)}.overlay{background:rgba(0,0,0,.7);inset:0;opacity:0;position:fixed;transition:opacity .7s;visibility:hidden}.overlay.show{opacity:1;visibility:visible}.popup{background:#fff;border-radius:5px;margin:70px auto;max-width:600px;padding:20px;position:relative;transition:all 5s ease-in-out;width:80%}.popup h2{color:#333;font-family:Tahoma,Arial,sans-serif;font-size:1.5rem;margin-top:0}.popup .close{color:#333;font-size:30px;font-weight:700;position:absolute;right:30px;text-decoration:none;top:20px;transition:all .4s}.popup .close:hover{color:var(--player-color)}.message-content{font-size:1.2rem;max-height:30%;overflow:auto}