:root{font-family:Consolas,Courier New,monospace;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--color-bg: #061600;--color-text: rgba(21, 255, 0, .8);--color-text-dim: rgba(21, 255, 0, .15)}::selection{background:var(--color-text);color:var(--color-bg)}html{margin:0;padding:0;height:100%;color:var(--color-text);background-color:#000}body{height:100vh;margin:0;padding:20px 0;box-sizing:border-box;display:flex;flex-direction:column;background:var(--color-bg);background-image:radial-gradient(circle,transparent,rgb(2,10,0));overflow:scroll}#root{margin:auto}.app{display:flex;flex-direction:column;width:900px;margin:0 auto}.header{width:100%;box-sizing:border-box;border:2px solid var(--color-text);padding:20px 20px 0;box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset}h1.title{color:var(--color-text);font-size:16pt;text-align:center;border:6px double var(--color-text);border-radius:2rem;margin:auto;padding:0 100px;width:fit-content;box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset}.settings{display:flex;justify-content:space-between;margin:10px auto;width:400px}.settings p{margin:0;padding:15px}.header button{color:var(--color-text);background-color:var(--color-bg);height:40px;margin:auto;padding:0 15px;border:1px solid var(--color-text);cursor:pointer;box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset;transition:.3s}.header button:hover{background-color:var(--color-text-dim)}.header button:active{background-color:var(--color-text);color:var(--color-bg)}.header button.active{color:var(--color-bg);background-color:var(--color-text)}.header button span.icon{font-size:15pt;line-height:15pt;vertical-align:middle;margin:auto}.header button span.text{vertical-align:middle;margin-left:6px}.status{display:flex;justify-content:space-between;margin:10px auto;padding:10px 15px 0;border-top:2px solid var(--color-text)}.status span#mineNum{margin-right:70px}.win-box,.lose-box{margin:0 auto;text-align:center;height:0px;overflow:hidden;transition:.3s}.win-box.show{margin:0 auto 20px;display:block;border:2px solid var(--color-text);background-color:var(--color-text-dim);box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset;height:auto}.lose-box.show{margin:0 auto 20px;display:block;color:red;border:2px solid red;background-color:#ff000026;height:auto;box-shadow:1px 1px 20px #f006,1px 1px 20px #f006 inset}.lose-box ::selection{background:#ff0000b3;color:var(--color-bg)}.board{width:100%;box-sizing:border-box;margin:20px 0;display:flex;flex-direction:column;gap:2px}.board-row{display:flex;gap:2px;margin:auto}.cell{width:24px;height:24px;border:1px solid var(--color-text);display:flex;justify-content:center;align-items:center;font-size:14pt;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.5s;box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset}.cell:hover{background-color:var(--color-text-dim)}.cell:active{background-color:var(--color-text);color:var(--color-bg)}.cell.revealed{background-color:var(--color-bg);border:1px solid var(--color-text-dim);cursor:default;box-shadow:none}.cell.mine{color:red;border:1px solid red;box-shadow:1px 1px 20px #f006,1px 1px 20px #f006 inset}.cell.flagged{color:orange}.board.difficulty-0 .cell{width:32px;height:32px;font-size:18pt}.board.difficulty-0 .board-row{gap:4px}.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0 auto;padding:20px;box-sizing:border-box;width:900px;border:2px solid var(--color-text);box-shadow:1px 1px 20px var(--color-text-dim),1px 1px 20px var(--color-text-dim) inset}.footer p{margin:auto auto auto 0;text-align:center}.footer button{margin:auto 20px auto auto;text-align:end;color:var(--color-text);background-color:transparent;font-size:20pt;padding:0;border:none;cursor:pointer;transition:.3s}.footer button:hover{color:orange;filter:drop-shadow(0 0 3px orange)}.footer a{margin:auto 0 auto 20px;color:var(--color-text);text-decoration:none;font-size:18pt;display:block;text-align:center;transition:.3s;filter:drop-shadow(0 0 3px var(--color-text));transform:translateY(2px)}.footer a:hover{color:orange;filter:drop-shadow(0 0 6px orange)}.scanlines{overflow:hidden;position:relative}.scanlines:before,.scanlines:after{display:block;pointer-events:none;content:"";position:absolute}.scanlines:before{width:100%;height:2px;z-index:2147483649;background:#32cd3233;opacity:.75;animation:scanline 6s linear infinite}.scanlines:after{inset:0;z-index:2147483648;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.1) 51%);background-size:100% 5px;animation:scanlines 1s steps(60) infinite}@keyframes scanline{0%{transform:translate3d(0,200000%,0)}}@keyframes scanlines{0%{background-position:0 50%}}@keyframes tilt-n-move-shaking{0%{transform:translate(0) rotate(0)}25%{transform:translate(5px,5px) rotate(5deg)}50%{transform:translate(0) rotate(0)}75%{transform:translate(-5px,5px) rotate(-5deg)}to{transform:translate(0) rotate(0)}}
