@import "https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Roboto+Slab:wght@100..900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap";:root{--bg:#eee;--off-color:#333;--on-color:#eee;--border-radius:2em;--results-animation-delay:3s;overflow:hidden}body{background-color:var(--bg);justify-content:center;align-items:center;height:100dvh;font-family:DM Sans,sans-serif;display:flex;overflow:clip}*,:before,:after{-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:box-shadow var(--qtime);box-sizing:border-box;border:none;outline:none;margin:0}#game{flex-direction:column;justify-content:center;align-items:center;gap:50px;width:40rem;max-width:100dvw;height:90rem;max-height:100dvh;display:flex;container-type:size}#board{border-radius:var(--border-radius);aspect-ratio:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:5px;width:min(90cqw,60cqh);display:grid;box-shadow:-20px -20px 40px #fff}#board .cell{box-shadow:inset 24px 24px 24px #000a,0 0 #0000}@media (hover:hover){#board .cell:hover{background-color:color-mix(in srgb, var(--on-color), var(--off-color) 85%);box-shadow:inset 12px 12px 12px #000a,0 0 #0000}#board .cell.on:hover{background-color:color-mix(in srgb, var(--on-color), var(--off-color) 10%);box-shadow:inset 0 0 #0000,12px 12px 12px #0002}}#board .cell.on{box-shadow:inset 0 0 #0000,24px 24px 32px #0002}.win #board{box-shadow:none}.win #board .cell{--f:calc(abs(1 - mod(var(--index) - 1, 3)) + 1 - mod(round(down, (var(--index) - 1) / 3), 2));animation:2s forwards winning-cell-alt;animation-delay:calc(var(--f) * .2s);pointer-events:none}#board.hide{box-shadow:none}#board.hide .cell{box-shadow:none;background-color:var(--bg);pointer-events:none}.cell{cursor:pointer;background-color:var(--off-color);transition:all .5s}.cell.on{background-color:var(--on-color)}.cell:first-child{border-radius:var(--border-radius) 0 0 0;--index:1}.cell:nth-child(2){--index:2}.cell:nth-child(3){border-radius:0 var(--border-radius) 0 0;--index:3}.cell:nth-child(4){--index:4}.cell:nth-child(5){--index:5}.cell:nth-child(6){--index:6}.cell:nth-child(7){border-radius:0 0 0 var(--border-radius);--index:7}.cell:nth-child(8){--index:8}.cell:nth-child(9){border-radius:0 0 var(--border-radius) 0;--index:9}#stages{flex-direction:row;align-items:center;gap:5cqw;height:20cqh;display:flex}.pattern{border-radius:var(--border-radius);aspect-ratio:1;--border-radius:1em;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:min(18cqh,18cqw);transition:all .5s;display:grid;box-shadow:-5px -5px 10px #fff,5px 5px 10px #0002}.pattern.inactive{opacity:.3}.pattern.active{width:min(25cqh,25cqw)}:is(.win .pattern,.stages.hide .pattern) .cell{box-shadow:none;background-color:var(--bg)}#select-mode{z-index:0;flex-direction:column;justify-content:center;align-items:center;gap:50px;transition:opacity .5s;display:flex;position:absolute}#select-mode h1,#select-mode .row{transition:transform .5s;transform:scale(1)}#select-mode h1{-webkit-user-select:none;user-select:none;text-align:center;font-size:4em}#select-mode .row{border-radius:1337px;flex-direction:row;width:600px;max-width:90dvw;display:flex;box-shadow:-20px -20px 40px #fff,20px 20px 40px #0003,inset 5px 5px 20px -5px #fff,inset -5px -5px 20px -5px #0003}#select-mode .row .mode{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:1337px;flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:10%;width:50%;height:150px;display:flex}#select-mode .row .mode .square{background-color:var(--off-color);aspect-ratio:1;border-radius:15px;width:3em;max-width:10dvw;height:3em;max-height:10dvw;box-shadow:6px 6px 12px #0003,-6px -6px 12px #fff,inset 0 0 #0000,inset 0 0 #0000}#select-mode .row .mode:hover{box-shadow:inset 12px 12px 24px #0002,inset -12px -12px 24px #fff}#select-mode .row .mode:hover .square{box-shadow:0 0 #0000,0 0 #0000,inset 6px 6px 12px #000,inset -6px -6px 12px #fff4}#select-mode:after{z-index:-1;background-color:var(--bg);content:"";width:100dvw;height:100dvh;position:fixed;top:0;left:0}#select-mode.fade{opacity:0;pointer-events:none}#select-mode.fade .row,#select-mode.fade h1{transform:scale(1.2)}#results{transition:all .2s var(--results-animation-delay);-webkit-user-select:none;user-select:none;text-align:center;border-radius:2em;flex-direction:column;justify-content:center;align-items:center;width:560px;max-width:90dvw;height:300px;font-size:2rem;display:flex;position:absolute;box-shadow:-20px -20px 40px #fff,20px 20px 40px #0003}#results h1{transition:opacity .2s ease var(--results-animation-delay)}#results .perfect-star{color:#0000;font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;font-family:Material Symbols Rounded;font-size:0}.perfect :is(#results .perfect-star){animation:star-in 1s ease forwards var(--results-animation-delay);font-size:8rem}#results.faded{box-shadow:none;pointer-events:none;transition-delay:0s;display:flex}#results.faded h1{opacity:0;transition-delay:0s}@keyframes winning-cell{0%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}17%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}33%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}50%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}67%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}83%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}to{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}}@keyframes winning-cell-alt{0%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}17%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}33%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}50%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}67%{background-color:var(--off-color);box-shadow:inset 24px 24px 24px #000a,0 0 #0000}83%{background-color:var(--on-color);box-shadow:inset 0 0 #0000,24px 24px 24px #0002}to{box-shadow:none;background-color:var(--bg)}}@keyframes star-in{0%{color:var(--on-color);text-shadow:0 0 #fff0,0 0 #0000;transform:scale(.5)}50%{color:var(--on-color);text-shadow:-8px -8px 12px #fff,8px 8px 12px #0003;transform:scale(1.2)}to{color:#fd3;transform:scale(1)}}#win-button{cursor:pointer;color:#ff0;background:linear-gradient(45deg,red,orange);padding:10px 40px;font-family:cursive;font-size:3rem;animation:.7s linear infinite colorpulse;position:absolute;top:20px;right:50px;transform:rotate(20deg)}#win-button:hover{animation:.5s ease-in-out infinite spin-jitter,.5s linear infinite colorpulse}@keyframes spin-jitter{0%{transform:rotate(10deg)scale(1)translateY(0)}10%{transform:rotate(-10deg)scale(1.2)translateY(-10px)}20%{transform:rotate(5deg)scale(1.1)translateY(10px)}30%{transform:rotate(-5deg)scale(1.3)translateY(-15px)}40%{transform:rotate(15deg)scale(1)translateY(10px)}50%{transform:rotate(-15deg)scale(1.25)translateY(-10px)}60%{transform:rotate(10deg)scale(1)translateY(10px)}70%{transform:rotate(-10deg)scale(1.15)translateY(-10px)}80%{transform:rotate(20deg)scale(1.3)translateY(0)}90%{transform:rotate(-20deg)scale(1.1)translateY(10px)}to{transform:rotate(10deg)scale(1)translateY(0)}}@keyframes colorpulse{0%{color:#ff0;background:linear-gradient(45deg,red,orange)}20%{color:#00f;background:linear-gradient(90deg,#f0f,#ff0)}40%{color:red;background:linear-gradient(45deg,#0f0,#0ff)}60%{color:green;background:linear-gradient(90deg,#00f,pink)}80%{color:purple;background:linear-gradient(45deg,#000,#fff)}to{color:#ff0;background:linear-gradient(45deg,red,orange)}}