:root{--cell-color: rgb(30, 30, 150);--mistake-color: var(--cell-color);--highlight-color: rgb(135, 140, 165);background-color:#87ceeb;background-image:linear-gradient(to top,#87ceeb,#82c8e6)}body{margin:0;padding:0;font-family:Arial,Roboto,Helvetica,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;overflow-y:scroll}button{cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:#00000073 .25vmin .4vmin 1.1vmin}button:not(#newGameBtn):hover{text-shadow:whitesmoke 0 0 .6vmin}:is(.cell,.number,#newGameBtn):active{opacity:.8}header{display:flex;font-size:4.5vmin;width:100%;transition:height .3s ease-out;height:14vmin;text-align:center;padding:0;background-color:#22009d;background-image:linear-gradient(to bottom,#22009d,#000064);color:#f5f5f5;align-items:center;justify-content:center;cursor:default;z-index:20}header h1{display:flex;width:100%;height:14vmin;text-shadow:black 0 0 1.25vmin;font-style:italic;margin:0;align-content:center;align-items:center;justify-content:center;z-index:2;pointer-events:none}header button#leaderboardBtn{position:absolute;top:0vmin;right:0vmin;width:11vmin;height:11vmin;padding:1vmin;box-sizing:content-box;font-size:9vmin;background:none;border:none;display:flex;justify-content:center;align-items:center;box-shadow:none}header button#fullscreenBtn{position:absolute;top:0;right:50%;transform:translate(50%);width:75vmin;height:14vmin;padding:0;box-shadow:none;border:none;background-color:transparent;z-index:90}#topBarBtns,#inputControls{display:flex;margin-top:2.75vh;margin-bottom:2.75vh;justify-content:space-between;align-items:center;width:100%}:where(#topBarBtns,#inputControls) button{width:20vmin;height:9.75vmin;font-size:4.75vmin;margin:0 2vmin;border:silver .5vmin outset;border-radius:44%;text-shadow:black 0 0 .5vmin}:is(#topBarBtns,#inputControls) button:disabled{opacity:1;cursor:not-allowed;color:#3c3c3cbf;background:#a0a0a0b3;text-shadow:none}:where(#topBarBtns,#inputControls) button:last-child{margin-right:4vmin}:where(#inputControls) button:first-child{margin-left:4vmin}#eraseBtn,#noteInputBtn{display:flex;flex-direction:column;justify-content:center;align-items:center}#eraseBtn:after,#noteInputBtn:after{position:relative;content:"";font-size:.45em;font-weight:700;margin-top:-.1em;color:#808080b3;text-shadow:none;pointer-events:none}#eraseBtn:after{content:"Erase"}#noteInputBtn:after{content:"Notes"}#newGameBtn{height:10vmin;width:max-content;margin-right:auto;margin-left:3vmin;border-radius:4.5vmin;padding:1vmin 2.5vmin;background-color:#4c65af;background-image:linear-gradient(to bottom right,#667dc0,#423fbc);color:#fff;font-size:4vmin;font-weight:700}#newGameBtn:hover{text-shadow:grey 0 0 .6vmin;background-color:#445c94}#timer{position:relative;font-size:3.5vmin;font-weight:700;color:#f5f5f5;margin:0 auto;padding:1.5vmin;box-shadow:#000 0 0 1vmin inset;text-shadow:rgba(0,0,0,.85) 0vmin 0vmin .8vmin;border-radius:.75vmin;cursor:default;z-index:30}#hintBtn{margin-left:auto}#hintBtn:after,#showMistakesBtn:after{position:absolute;transform:translate(2.7em,.05em);content:"";font-size:.45em;font-weight:700;color:#808080b3;text-shadow:none;pointer-events:none}#hintBtn:after{content:"+20s"}#showMistakesBtn:after{content:"+15s"}#sudoku{display:grid;box-sizing:border-box;width:92.7vw;height:92.7vw;border:black 3px solid;box-shadow:#0009 0 .2vmin 1.75vmin;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr)}.cell{color:var(--cell-color);display:flex;position:relative;justify-content:center;align-items:center;font-size:6.5vmin;background-color:#fff;width:auto;height:auto;cursor:pointer;min-height:0;min-width:0}:is(.cell,.number){box-sizing:border-box;border:1px solid black;padding:0;margin:0}:is(#sudoku .cell,#numbersInput .number):hover,.selectedCell{background-color:#dadada}.row3,.row6{border-bottom:2px solid black}.row4,.row7{border-top:2px solid black}.col3,.col6{border-right:2px solid black}.col4,.col7{border-left:2px solid black}.cell:has(>p){display:grid;grid-template-columns:1.2fr .6fr 1.2fr;grid-template-rows:1.2fr .7fr 1.1fr}.cell p{margin:0;padding:0;display:flex;justify-content:center;align-items:center;width:100%;height:0;font-size:2.25vmin;color:#828282;text-shadow:rgba(120,120,120,.3) 0vmin 0vmin .4vmin}#controls{display:flex;flex-direction:column;align-items:center;width:100%}#numbersInput{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(1,1fr);width:92.25vw;height:10.3vmin;align-items:center;justify-items:center;margin-bottom:4vh}#numbersInput .number{width:100%;height:100%;font-size:8vmin;display:flex;align-items:center;justify-content:center;border-color:#787878;border-radius:1vmin;background-color:#fff;cursor:pointer;text-shadow:rgba(0,0,0,.4) 0vmin 0vmin 1vmin;box-shadow:#0000004d .2vmin .3vmin .75vmin}#numbersInput .number:focus{z-index:1}#difficultySelectionContainer{display:none;position:fixed;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;background-color:#ffffffbf;z-index:99}#difficultySelectionContainer:before{content:"Generating new Sudoku...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:8vmin;font-weight:700;font-style:italic;text-align:center;text-shadow:rgba(80,80,100,.6) 0 0 .8vmin;max-width:35%;z-index:90}#difficultySelectionForm{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;width:auto;min-width:35%;max-width:95%;height:auto;min-height:50%;max-height:95%;padding:4vmin 0vmin;background-color:#dce1ff;background-image:linear-gradient(to bottom right,#4553ce,#22266e 80%);color:#f5f5f5;font-size:4.5vmin;text-shadow:rgba(200,200,200,.5) 0 0 1.5vmin;border:rgb(8,8,55) .7vmin ridge;border-radius:1.5vmin;box-shadow:#282828a6 0 0 4vmin;z-index:inherit}#difficultySelectionForm h4{margin:0;margin-bottom:2vmin;padding:1vmin 5vmin;font-size:6vmin;text-decoration:underline;text-shadow:rgba(40,40,40,.75) 0 0 1vmin;cursor:default}#difficultySelectionForm>div{display:grid;grid-template-columns:1fr 1.5fr;align-items:center;width:100%;margin:1vmin 0}#difficultySelectionForm input[type=radio]{justify-self:flex-end;align-self:center;width:2.8vmin;height:2.8vmin;margin:0 10% 0 0;cursor:pointer;box-shadow:#0000004d 0 0 .7vmin}#difficultySelectionForm label{display:flex;justify-self:flex-start;align-items:center;width:85%;margin:1.5vmin 0;font-weight:700;color:#ffe100ed;text-shadow:rgba(0,0,0,.8) 0 0 .5vmin;cursor:pointer}#difficultySelectionForm label:hover,#difficultySelectionForm input[type=radio]:checked+label{color:#ff0;text-shadow:rgba(0,0,0,.9) 0 0 1vmin}#difficultySelectionForm>div:last-child{grid-column:span 2;display:flex;justify-content:space-evenly}#difficultySelectionForm button,#nameInputButtons button{width:40%;height:8vmin;margin-top:3vmin;border-radius:1.5vmin;background-color:#50506e;color:#f5f5f5;font-size:4vmin;font-weight:700;border:none;cursor:pointer;box-shadow:#000c 0 0 1vmin}#difficultySelectionForm button:last-child,#nameInputButtons button:last-child{background-color:green}#difficultySelectionForm button:first-child,#nameInputButtons button:first-child{background-color:#d20000}#difficultySelectionForm :is(button):hover{background-image:radial-gradient(circle at center,rgba(60,60,60,.3),transparent 160%);text-shadow:rgba(0,0,0,.8) 0 0 1vmin}#gameOverMessage{display:none;position:fixed;top:0;left:0;text-align:center;flex-direction:column;align-items:center;justify-content:space-evenly;width:100%;height:100dvh;background-color:#000000f2;color:#fff;font-size:4.5vmin;text-shadow:rgba(200,200,200,.5) 0 0 1.5vmin;z-index:99;cursor:default}#gameOverText{position:relative;height:max-content;animation:gameOverAnimation 3s ease-out forwards;animation-play-state:paused}@keyframes gameOverAnimation{0%{transform-origin:40%;transform:rotateY(90deg) scale(.6);color:#1e1e1e}23%{transform-origin:60%;transform:rotateY(360deg) scale(.9);color:#fff;color:#f0b400}46%{transform-origin:50%;transform:rotateY(540deg) scale(1.2);color:#1e1e1e}69%{transform:rotateY(720deg) scale(1.6);color:#fff;color:#f0b400}to{transform:rotateY(720deg) scale(1.6);color:#fff;color:#f0b400}}#nameInput{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;width:75%;height:auto;background-color:#1e1e23;background-image:linear-gradient(to bottom,#2d2d32,#161619);box-shadow:#000 0 0 1.5vmin inset;border:rgb(0,0,0) 1.1vmin ridge;border-radius:1vmin}#nameInput label{font-size:4.5vmin;color:#f5f5f5;text-shadow:rgba(0,0,0,.5) 0 0 1vmin;margin:3vmin 4.5vmin 4.5vmin;text-wrap:wrap;text-wrap-style:balance}#nameInput input{width:80%;height:6vmin;font-size:3.5vmin;padding:.5vmin;border-radius:1.5vmin;border:none;background-color:#c8c8c8;color:#000;text-align:center;box-shadow:#0006 0 0 1vmin inset}#nameInput input:invalid{outline:red .5vmin solid;box-shadow:red 0 0 1.5vmin inset}#nameInputButtons{display:flex;justify-content:space-evenly;align-items:center;width:100%;height:min-content;margin:4.5vmin 1vmin 3.5vmin}#nameInputButtons button{margin:0}#nameInput #nameInputButtons button:disabled{opacity:.5;cursor:not-allowed;color:#3c3c3ce6;background:#a0a0a0bf;text-shadow:none}.stillMistakes{box-shadow:#dc0000 0 0 5.5vmin!important;outline:rgb(220,0,0) 1vmin solid!important;outline-offset:-.8vmin}footer{display:block;position:relative;bottom:0;width:max-content;margin-top:auto;padding:.5vmin 5vmin;background-color:#50506e;color:#f5f5f5;font-size:3vmin;font-weight:700;justify-content:center;align-items:center;border-radius:1.5vmin 1.5vmin 0 0;box-shadow:#00000080 0 0 1.25vmin;z-index:-1}footer div{height:8.5vmin;display:flex;align-items:center;justify-content:center}footer #madeByStehle{width:7vmin;height:6.8vmin;margin:0 1.4vmin}footer #version{font-size:2.7vmin}.activatedBtn{background-color:#9fa9b1;color:#fff;border-color:#000;border-style:inset}.selectedCell{outline:rgb(60,60,190) .9vmin ridge;outline-offset:.1vmin;z-index:1}.mistake{color:var(--mistake-color)}.given{color:#000;cursor:default;outline-width:.5vmin;outline-color:#64646499;outline-offset:0}.sameNum{background-image:radial-gradient(circle at center,rgba(145,167,160,.85),transparent 145%)}.sameCol:before{content:"";position:absolute;top:0;bottom:0;left:0;width:18%;background-image:linear-gradient(to right,var(--highlight-color) 5%,transparent)}.sameCol:after{content:"";position:absolute;top:0;bottom:0;right:0;width:18%;background-image:linear-gradient(to left,var(--highlight-color) 5%,transparent)}.sameRow:before{content:"";position:absolute;top:0;left:0;right:0;height:18%;background-image:linear-gradient(to bottom,var(--highlight-color) 5%,transparent)}.sameRow:after{content:"";position:absolute;bottom:0;left:0;right:0;height:18%;background-image:linear-gradient(to top,var(--highlight-color) 5%,transparent)}.grayedOut{background-color:#828282;background-image:radial-gradient(circle at center,rgba(60,60,60,.8),transparent 200%)}.leaderboardHeader{position:fixed;top:0;left:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:center;align-items:center;width:100%;height:100dvh;transition:height .5s ease-out;z-index:90;cursor:default;overflow:hidden}#leaderboardContainer{position:relative;top:0;left:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr 8vmin;gap:1.75vw;align-items:center;justify-content:center;width:96.5%;height:calc(100dvh - 14vmin)}.leaderboard{box-sizing:border-box;overflow-y:scroll;scrollbar-gutter:stable;width:100%;height:100%;background-color:#2d2d2da6;border:rgba(0,0,0,.3) .75vmin inset;box-shadow:#000 0 0 1.5vmin inset}.leaderboard table{width:100%;height:auto;border-collapse:collapse;overflow:scroll}.leaderboard h6{font-size:3.75vmin;text-align:center;margin:0;margin-bottom:.2vmin;padding:.7vmin;border-bottom:rgba(255,255,255,.25) .25vmin solid;overflow-anchor:auto;scroll-snap-align:center;position:sticky;top:0;background-color:#19192d;z-index:2}.leaderboard h6 span{vertical-align:text-top;font-size:.975em;line-height:.975}.leaderboard tbody{display:table;box-sizing:border-box;width:100%;max-width:100%;height:100%}.leaderboard :where(tr,td){font-weight:400;font-size:2.7vmin;height:4vmin;border-bottom:rgba(128,128,128,.4) 1px dotted}.leaderboard tr td:first-child{width:20%}.leaderboard tr td:nth-child(2){width:50%}.leaderboard tr td:last-child{width:30%}#closeLeaderboardBtn{grid-column:span 2;grid-row:3;width:50vw;height:100%;justify-self:center;font-size:4.5vmin;background-color:#fff3;font-size:10vmin;text-align:center;border:none;border-radius:2vmin 2vmin 0 0;cursor:pointer;box-shadow:#0009 0 0 1.25vmin}#closeLeaderboardBtn:hover{background-color:#ffffff4d;box-shadow:#000c 0 0 1.5vmin}#closeLeaderboardBtn img{width:13vmin}@media (max-aspect-ratio: 1/2){#numbersInput{width:94vmin;height:auto;gap:1vw;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}#numbersInput .number{font-size:8vmin}#nameInput{width:80%;margin-bottom:10vh}}@media (min-aspect-ratio: 1.1/1){header{order:-2;position:absolute;top:0;left:0;height:14dvh}header button#leaderboardBtn{padding-left:4.5vmin;padding-right:3vmin}#sudoku{position:absolute;top:14dvh;left:calc((80.1vh - 80.1dvh) / 3);margin:2.95dvh;width:80.1dvh;height:80.1dvh}#timer{position:absolute;top:-9.8dvh;left:calc(-83.8vmin + ((80.1vh - 80.1dvh) / 3 * 2));transform:translateY(-50%);font-size:min(2.7vw,5vmin);box-shadow:#000 0 0 1.75vmin inset}#topBarBtns,#controls,footer{position:absolute;left:calc(86.1vmin - ((80.1vh - 80.1dvh) / 3));right:calc(1.25vmin + ((80.1vh - 80.1dvh) / 3));width:auto;height:auto;margin:0}footer div{height:8.5dvh}#topBarBtns{top:16.8dvh}:is(#topBarBtns,#controls) button{margin:0;font-size:2.5vw;width:13vw;margin-left:-.2vmin;margin-right:.5vmin}button#newGameBtn{font-size:2vw;width:max-content;padding:0 2.35vmin}#controls{top:27.5dvh;height:63.5dvh}#inputControls{margin-bottom:2dvh}#numbersInput{width:100%;height:100%;gap:.5vw;margin-right:1vmin;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}#numbersInput .number{font-size:6.5dvh}footer{position:fixed;margin-right:.5vmin}footer p{font-size:1.5vw}footer #version{font-size:1.4vw}#nameInput{width:calc(30dvh + 27.5vw);margin-top:1dvh}#nameInput label{margin:3dvh 1.75vmin}#nameInput #nameInputButtons{margin:3dvh 3vmin}}@media (min-aspect-ratio: 1.1/1) and (max-aspect-ratio: 1.34/1){#hintBtn:after{content:""}#showMistakesBtn:after{content:""}}@media (min-aspect-ratio: 2/1){#controls{flex-direction:row-reverse;top:34dvh;height:53dvh}#inputControls{flex-direction:column;width:auto;height:100%;margin:0}#inputControls button,#topBarBtns button{font-size:5.5dvh;width:12vw;height:11.5dvh}#topBarBtns #newGameBtn{width:20vw;font-size:5dvh;height:13dvh}#numbersInput{height:100%;margin:0;margin-right:2.5vmin}}