body{padding:0;margin:0}.page{height:100%;min-height:fit-content;background-color:red}:root{--gameCyan: #00D9BF;--gameYellow: #FFE787;--gamePurple: #D391FF;--gamePink: #FF4265;--primaryWhite: #FFFFF3;--primaryBlack: #030301}h1,h2,h3{font-family:casablanca-urw,sans-serif;font-weight:550;font-style:normal}p{font-family:Quicksand,sans-serif;font-weight:500;font-style:normal;font-optical-sizing:auto}.gamePage{display:flex;flex-direction:column;align-items:center;height:89vh;min-height:fit-content;background-color:var(--primaryWhite);padding-top:1%}.gameContainer{background-color:var(--gameCyan);min-height:fit-content;max-height:90%;min-width:fit-content;border-radius:50px;overflow:hidden;display:flex;flex-direction:column;align-items:center;border:5px solid black;box-shadow:0 7px #0f4b44a8;padding:2rem}.Screen{background-color:var(--primaryWhite);border-radius:inherit;overflow:hidden;min-height:50%;max-height:80%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);justify-items:center;align-items:center;gap:1rem;min-width:fit-content;margin-bottom:.5rem;border:1px solid black;padding:1.5rem}.button-lives-container{display:flex;align-items:center;gap:10px;justify-content:center;width:-webkit-fill-available}.tile{display:flex;align-items:center;justify-content:center;width:90px;aspect-ratio:1 / 1;border-radius:10%;border:2px solid black;cursor:pointer}.tile p{font-size:1.25rem;margin:0;padding:0;font-family:Quicksand,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal}.yellow{background-color:var(--gameYellow);color:var(--gamePink)}.purple{background-color:var(--gamePurple);color:var(--gameYellow)}.cyan{background-color:var(--gameCyan);color:var(--gameYellow)}.pink{background-color:var(--gamePink);color:var(--gameYellow)}.tile.selected{border:2px solid red}.tile.disabled{filter:grayscale(100%);opacity:.5;pointer-events:none}.navBar{display:flex;flex-direction:row;justify-content:center;height:9vh;min-height:fit-content;background-color:var(--gameYellow);align-items:center;position:relative}.navBar .left{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.navBar .right{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%;height:100%}.navBar .right .roundedButton{width:3rem;height:3rem;border-radius:50%;background-color:var(--gamePink);color:var(--gameYellow);display:flex;align-items:center;justify-content:center;font-size:3rem;filter:drop-shadow(0px 4px 0px rgba(0,0,0,.7));border:2px solid black;cursor:pointer}.navBar .right .roundedButton img{width:100%}.navBar .middle{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.gameTitleLogo{height:fit-content;max-height:90%;padding:2% 15%;background-color:var(--primaryWhite);color:var(--gamePink);display:flex;flex-direction:column;justify-content:center;align-content:center;align-self:center;align-items:center;border-radius:100rem;border:2px solid black}.gameTitleLogo h3{font-size:1.9rem;padding:0;margin:0}.allGamesButton{height:fit-content;max-height:90%;padding:2% 10%;background-color:var(--primaryWhite);color:var(--gamePink);display:flex;flex-direction:column;justify-content:center;align-content:center;align-self:center;align-items:center;border-radius:100rem;border:1px solid black;font-size:1.5rem;cursor:pointer;filter:drop-shadow(0px 4px 0px rgba(0,0,0,.7));border:2px solid black}.allGamesButton:hover{background-color:var(--gamePink);color:var(--primaryWhite)}.landing-page{min-height:100vh;padding:2rem;background:linear-gradient(135deg,#fffff3,#ffe787);color:#030301;font-family:Poppins,sans-serif;position:relative;overflow:hidden}.landing-page:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#d391ff33;top:-100px;right:-100px;z-index:0}.landing-page:after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:#00d9bf26;bottom:-50px;left:-50px;z-index:0}.hero-section{text-align:center;padding:4rem 0;margin-bottom:2rem;position:relative;z-index:1}.hero-section h1{font-size:3.5rem;color:#030301;margin-bottom:1rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.1);letter-spacing:-1px}.catchphrase{font-size:1.5rem;color:#ff4265;margin-bottom:2rem;font-weight:500}.search-container{max-width:600px;margin:0 auto;position:relative}.search-bar{width:100%;padding:1rem 1.5rem;font-size:1.1rem;border:2px solid #d391ff;border-radius:50px;outline:none;transition:all .3s ease;background-color:#fffff3;box-shadow:0 4px 15px #d391ff33}.search-bar:focus{border-color:#00d9bf;box-shadow:0 0 20px #00d9bf4d;transform:translateY(-2px)}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:2rem 0;position:relative;z-index:1}.game-card{background:#fffff3;border-radius:25px;padding:1.5rem;box-shadow:0 10px 20px #0303011a;transition:all .3s ease;border:1px solid rgba(211,145,255,.3);overflow:hidden;position:relative}.game-card:before{content:"";position:absolute;top:-50px;right:-50px;width:100px;height:100px;border-radius:50%;background:#ff42651a;z-index:0}.game-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 15px 30px #03030126}.game-image{width:100%;height:200px;margin-bottom:1rem;border-radius:20px;overflow:hidden;box-shadow:0 5px 15px #0000001a}.game-img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .5s ease}.game-card:hover .game-img{transform:scale(1.05)}.placeholder-image{width:100%;height:100%;background:#ffe787;display:flex;align-items:center;justify-content:center;border-radius:20px}.game-card h3{font-size:1.5rem;color:#030301;margin-bottom:.5rem;font-weight:600}.game-card p{color:#030301;margin-bottom:1.5rem;line-height:1.5}.play-button{width:100%;padding:.8rem;background:#00d9bf;color:#030301;border:none;border-radius:15px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;z-index:1}.play-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:all .5s ease;z-index:-1}.play-button:hover{background:#ff4265;color:#fffff3;transform:translateY(-3px);box-shadow:0 5px 15px #ff42654d}.play-button:hover:before{left:100%}@media (max-width: 768px){.hero-section h1{font-size:2.5rem}.catchphrase{font-size:1.2rem}.games-grid{grid-template-columns:1fr}}.modal-content{background-color:var(--primaryWhite);padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0303011a;width:90%;max-width:500px}.modal-content h2{margin:0 0 1.5rem;color:var(--primaryBlack);font-size:1.5rem}.setting-group{margin-bottom:1rem}.setting-group label{display:block;margin-bottom:.5rem;color:var(--primaryBlack);font-weight:500}.setting-group select{width:100%;padding:.5rem;border:1px solid var(--gameCyan);border-radius:4px;font-size:1rem;color:var(--primaryBlack);background-color:var(--primaryWhite)}.setting-group select:focus{outline:none;border-color:var(--gamePurple);box-shadow:0 0 0 2px #d391ff40}.close-button{background-color:var(--gameCyan);color:var(--primaryBlack);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .2s}[data-theme=dark] .modal-content{background-color:var(--darkBackground);box-shadow:0 4px 6px #0000004d}[data-theme=dark] .modal-content h2,[data-theme=dark] .setting-group label{color:var(--darkText)}[data-theme=dark] .setting-group select{background-color:var(--darkBackground);border-color:var(--darkCyan);color:var(--darkText)}[data-theme=dark] .setting-group select:focus{border-color:var(--darkPurple);box-shadow:0 0 0 2px #b366ff40}[data-theme=dark] .close-button{background-color:var(--darkCyan);color:var(--darkText)}[data-theme=dark] .close-button:hover{background-color:var(--darkPurple);color:var(--darkText)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#030301b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--primaryWhite);padding:2rem;border-radius:8px;max-width:600px;width:90%;box-shadow:0 4px 6px #0303011a}.modal-content h2{margin-bottom:1rem;color:var(--primaryBlack)}.modal-body{margin-bottom:1.5rem}.modal-body p{margin-bottom:1rem;line-height:1.6;color:var(--primaryBlack)}.modal-body ul{margin:1rem 0;padding-left:1.5rem}.modal-body li{margin-bottom:.5rem;color:var(--primaryBlack)}.close-button{background-color:var(--gameCyan);color:var(--primaryBlack);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background-color .2s}.close-button:hover{background-color:var(--gamePurple);color:var(--primaryWhite)}.stopwatch{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:600;color:var(--text-color, #222);padding:.5rem 1rem;background-color:var(--surface-color, #f5f5f5);border-radius:.75rem;box-shadow:0 2px 5px #0000001a;width:fit-content}.stopwatch-icon{font-size:1.5rem}.stopwatch-time{font-family:Courier New,Courier,monospace}.instructionsContainer{background:#f4f4f4;padding:15px;margin-top:10px;border-radius:5px;box-shadow:0 0 5px #0003;text-align:center;width:-webkit-fill-available}.instructionsHeader{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.chevron{transition:transform .3s ease}.chevron.open{transform:rotate(180deg)}.collapsable{background-color:#3498db;color:#fff;border:none;padding:10px 15px;font-size:16px;cursor:pointer;border-radius:5px;transition:background-color .3s ease}.collapsable:hover{background-color:#2980b9}.instructionsContent{animation:fadeIn .3s ease-in-out;margin:0;line-height:1.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.gameContainer .resultScreen{background-color:var(--gameCyan);border-radius:24px;overflow:hidden;width:90%;min-width:fit-content;margin:1.5rem 0;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;text-align:center;border:none;box-shadow:none}.gameContainer .share-button{background-color:#fff;color:var(--gamePink);padding:.75rem 2rem;border-radius:100px;border:none;font-family:Quicksand,sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:.5rem}.gameContainer .share-button .arrow{font-size:1.2rem;transition:transform .3s ease}.gameContainer .share-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.gameContainer .share-button:hover .arrow{transform:translate(4px)}.gameContainer .share-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.resultIcon{width:80px;height:auto;margin:1rem auto;display:block}.button-container{display:flex;gap:1rem;margin-top:1.5rem;width:100%;justify-content:center}.play-again-button{background-color:var(--gameYellow);color:var(--gamePink)}.play-again-button:hover{background-color:#e6c200;transform:translateY(-2px)}.gameContainer .resultScreen{border-radius:24px;overflow:hidden;width:90%;min-width:fit-content;margin:1.5rem 0;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;text-align:center;border:none;box-shadow:none}.gameContainer .resultTitle{font-size:1.5rem;font-weight:600;color:#fff;margin-bottom:.5rem;font-family:Quicksand,sans-serif}.gameContainer .resultHeading{font-size:3.5rem;font-weight:700;color:#fff;margin-bottom:2.5rem;font-family:Quicksand,sans-serif}.gameContainer .resultContent{background-color:#fff;padding:2rem;border-radius:16px;margin:1rem 0 2rem;width:70%;display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 4px 6px #0000001a}.gameContainer .stats-icon{margin-bottom:1rem}.gameContainer .solve-time{text-align:center}.gameContainer .solve-time h3{color:var(--gamePink);font-size:2rem;font-weight:600;margin-bottom:.5rem;font-family:Quicksand,sans-serif}.gameContainer .solve-time p{color:var(--gamePink);opacity:.7;font-size:1.2rem;font-family:Quicksand,sans-serif}.gameContainer .try-again-button{background-color:#fff;color:var(--gamePink);padding:.75rem 2rem;border-radius:100px;border:none;font-family:Quicksand,sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:.5rem}.gameContainer .try-again-button .arrow{font-size:1.2rem;transition:transform .3s ease}.gameContainer .try-again-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.gameContainer .try-again-button:hover .arrow{transform:translate(4px)}.gameContainer .try-again-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}