body{margin:0}:root{--primary: #FF6B6B;--secondary: #4ECDC4;--accent: #FFE66D;--dark: #292F36;--light: #F7FFF7}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 4px 8px #0003;top:0;z-index:100;border-bottom:4px dashed var(--accent)}.logo{height:50px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.bounce{animation:bounce 2s infinite}.nav-links{display:flex;gap:1.5rem}.nav-link{text-decoration:none;color:var(--dark);font-weight:700;padding:.8rem 1.5rem;border-radius:50px;transition:all .3s ease;font-size:1.1rem;display:inline-block;position:relative;overflow:hidden;border:none}.nav-link span{position:relative;z-index:2}.level-btn{background-color:var(--accent);box-shadow:0 4px #e8c547,0 5px 10px #0003}.rules-btn{background-color:#ff9fe5;box-shadow:0 4px #e88bc4,0 5px 10px #0003}.nav-link:hover{transform:translateY(-2px);box-shadow:0 6px #0003}.nav-link:active{transform:translateY(2px);box-shadow:0 2px #0003}@keyframes press{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.nav-link:active{animation:press .2s}@media (max-width: 768px){.header{padding:.8rem 1rem}.nav-links{gap:1rem}.logo{height:45px}.nav-link{padding:.6rem 1rem;font-size:1rem}}@media (max-width: 480px){.header{flex-direction:column;padding:.5rem;gap:.5rem}.nav-links{width:100%;justify-content:space-around;gap:.5rem}.nav-link{padding:.5rem;font-size:.9rem}.logo{height:40px}}.rules-popup{position:fixed;top:0;left:0;width:100%;height:100vh;background:#ffffffd9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;justify-content:center;align-items:center;animation:fadeIn .3s ease-out;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.popup-content{width:90%;max-width:500px;max-height:90vh;background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #0003;border:4px solid #FFE66D;position:relative;overflow-x:auto}.popup-content:before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#ffe66d,#ff9fe5,#4ecdc4)}.popup-header{text-align:center;margin-bottom:20px;position:relative}.popup-header h1{color:#ff6b6b;font-size:2rem;margin:0;display:inline-block}.confetti{position:absolute;width:10px;height:10px;background-color:#ffe66d;opacity:0}.confetti:nth-child(2){background-color:#4ecdc4;animation:confettiFall 3s .5s infinite}.confetti:nth-child(3){background-color:#ff9fe5;animation:confettiFall 3s 1s infinite}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100px) rotate(360deg);opacity:0}}.rules-text{background:#f7fff7;border-radius:15px;padding:15px;border:2px dashed #4ECDC4}.rule-section{display:flex;gap:15px;margin-bottom:20px;align-items:flex-start}.rule-icon{font-size:2rem;flex-shrink:0}.highlight{background-color:#ffe66d;padding:0 5px;border-radius:4px;font-weight:700}.score-factors{display:flex;flex-direction:column;gap:10px}.factor{display:flex;align-items:center;gap:8px}.factor .emoji{font-size:1.2rem}.got-it-btn{width:100%;padding:15px;margin-top:20px;background:linear-gradient(to right,#ff6b6b,#ff9fe5);color:#fff;border:none;border-radius:50px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px #e88bc4;position:relative;overflow:hidden}.got-it-btn:hover{transform:translateY(-3px);box-shadow:0 7px #e88bc4}.got-it-btn:active{transform:translateY(2px);box-shadow:0 2px #e88bc4}.jumping-emoji{display:inline-block;animation:jump 1s infinite}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 600px){.popup-content{padding:15px}.rule-section{flex-direction:column;align-items:center;text-align:center}.rule-icon{margin-bottom:5px}}main{background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;padding:2rem 1rem;text-align:center;position:relative;overflow:hidden;box-shadow:0 -4px 12px #0000001a;z-index:100}.fun-message{font-size:1.1rem;margin-top:1rem;animation:pulse 2s infinite}.floating-shapes{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.shape{position:absolute;background-color:#ffffff26;animation:float 15s infinite linear}.circle{width:60px;height:60px;border-radius:50%;top:20%;left:10%;animation-delay:0s}.triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:60px solid rgba(255,255,255,.15);top:60%;left:80%;animation-delay:2s}.square{width:50px;height:50px;top:30%;left:70%;animation-delay:4s}@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}to{transform:translateY(0) rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-width: 768px){.footer-links{gap:1rem}.footer-link{padding:.4rem .8rem;font-size:.9rem}.fun-message{font-size:1rem}}@media (max-width: 480px){.footer{padding:1.5rem .5rem}.footer-links{flex-direction:column;gap:.5rem}.copyright,.fun-message{font-size:.9rem}.shape{display:none}}.home-page-main{min-height:80vh;padding:2rem;display:flex;flex-direction:column;align-items:center;background-color:#f8f9fa}.home-page-main h2{text-align:center;font-size:2.2rem;color:#2c3e50;margin-bottom:1.5rem;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.home-page-container{width:100%;max-width:1200px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin:1rem 0;padding:0 1rem;z-index:100}.home-page-game{border:2px solid #e9ecef;width:220px;display:flex;flex-direction:column;align-items:center;padding:1.5rem;border-radius:12px;background-color:#fff;box-shadow:0 4px 8px #0000001a;transition:all .3s ease;cursor:pointer}.home-page-game:hover{transform:translateY(-5px);box-shadow:0 8px 16px #00000026;border-color:#4dabf7}.home-page-game img{width:100%;height:auto;object-fit:contain;margin-bottom:1.2rem;transition:transform .3s ease;border:5px solid #495057}.home-page-game:hover img{transform:scale(1.1)}.home-page-game h3{font-size:1.5rem;color:#495057;margin:0;font-weight:500;text-align:center;font-weight:700}@media (max-width: 768px){.home-page-main{padding:1.5rem}.home-page-main h2{font-size:1.8rem}.home-page-container{gap:1rem}.home-page-game h3{font-size:1.3rem}}@media (max-width: 480px){.home-page-main{padding:1rem}.home-page-main h2{font-size:1.5rem;margin-bottom:1rem}.home-page-container{gap:.8rem}.home-page-game img{margin-bottom:.8rem}.home-page-game h3{font-size:1.2rem}}@keyframes card-appear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.home-page-game{animation:card-appear .5s ease forwards;opacity:0}.home-page-game:nth-child(1){animation-delay:.1s}.home-page-game:nth-child(2){animation-delay:.2s}.home-page-game:nth-child(3){animation-delay:.3s}.home-page-game:nth-child(4){animation-delay:.4s}.home-page-game:nth-child(5){animation-delay:.5s}.home-page-game:nth-child(6){animation-delay:.6s}.home-page-game:nth-child(7){animation-delay:.7s}.home-page-game:nth-child(8){animation-delay:.8s}.home-page-game:nth-child(9){animation-delay:.9s}.home-page-game:nth-child(10){animation-delay:1s}.home-page-game:nth-child(11){animation-delay:1.1s}.home-page-game:nth-child(12){animation-delay:1.2s}.main{width:auto;min-height:100vh;display:flex;flex-direction:column;align-items:center}h1,h2,p{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--dark-gray);text-align:center}h1{margin:5px}.scene{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 40px 40px;height:100%;border-radius:20px;box-shadow:0 8px 32px #0000004d;margin:20px 0;border:4px dashed var(--accent);background:linear-gradient(135deg,#efe1ca,#c8e6c9,#a5d6a7);z-index:100}.scene>h2{margin-bottom:30px;color:#075b5e}.grid{display:grid;gap:20px;justify-content:center;box-shadow:-10px -10px 10px 10px #9db49d;padding:1px 10px 10px 1px;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px)}.cube{width:100px;height:100px;position:relative;margin:auto;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-10deg);cursor:pointer}.face{position:absolute;width:100px;height:100px;border:2px solid rgb(225,235,211);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;color:#fff}.top{transform:translateZ(50px)}.bottom{transform:rotateY(180deg) translateZ(50px)}.left{transform:rotateY(-90deg) translateZ(50px)}.right{transform:rotateY(90deg) translateZ(50px)}.front{transform:rotateX(-90deg) translateZ(50px)}.back{transform:rotateX(90deg) translateZ(50px)}.shuffle-btn{background:linear-gradient(135deg,#ff6b6b,#ff9fe5)}.hint-btn{background:linear-gradient(135deg,#4ecdc4,#84dcc6)}.solve-btn{background:linear-gradient(135deg,#ffe66d,#a5ffd6);color:var(--dark)}.puzzle-controls{background:#ffffffe6;padding:1rem;border-radius:50px;margin:20px auto;box-shadow:0 4px 8px #0000001a;display:flex;justify-content:space-evenly;z-index:100}.puzzle-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:12px 24px;margin:0 10px;border-radius:50px;font-weight:700;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px #0000001a}.puzzle-btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000026}.puzzle-btn:active{transform:translateY(1px);box-shadow:0 2px 4px #0000001a}.puzzle-status{background:#ffffffe6;border-radius:50px;padding:12px;max-width:400px;margin:20px auto;box-shadow:0 4px 8px #0000001a;display:flex;justify-content:space-evenly}.status-item{padding:0 15px;font-weight:700;color:var(--dark);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.status-icon{font-size:1.4rem;vertical-align:middle;margin-right:8px}.win-popup{position:fixed;top:0;left:0;width:100%;height:100vh;background:#ffffffd9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;justify-content:center;align-items:center;animation:win-popup-fadeIn .3s ease-out;overflow-y:auto}.result-play-section{display:flex;flex-wrap:wrap-reverse;width:100%;justify-content:space-evenly;align-items:center;background-color:#ffffff82;border-radius:10px}.result-play-section>div{max-width:45%!important}.result-scene{color:#075b5e;display:flex;justify-content:center;flex-direction:column;align-items:center;padding:20px 0;border-radius:20px;max-width:45%!important;box-shadow:0 8px 32px #0000004d;margin:20px 0;border:4px dashed var(--accent);background:linear-gradient(135deg,#efe1ca,#c8e6c9,#a5d6a7);z-index:100}.result-image{width:84%}@keyframes win-popup-fadeIn{0%{opacity:0}to{opacity:1}}.win-popup-content{width:90%;max-width:500px;max-height:90vh;background:#fff;border-radius:20px;padding:25px;box-shadow:0 10px 30px #0003;border:4px solid #FFE66D;position:relative;overflow-x:auto}.win-popup-content:before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#ffe66d,#ff9fe5,#4ecdc4)}.win-popup-header{text-align:center;margin-bottom:20px;position:relative;display:flex;justify-content:center;align-items:center;gap:15px}.win-popup-header h1{color:#ff6b6b;font-size:2rem;margin:0;display:inline-block}.win-popup-trophy{font-size:2.5rem;animation:win-popup-pulse 1.5s infinite}@keyframes win-popup-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.win-popup-confetti-container{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;pointer-events:none}.win-popup-confetti{position:absolute;width:10px;height:10px;background-color:#ffe66d;opacity:0;border-radius:2px}.win-popup-confetti:nth-child(3n){background-color:#4ecdc4;width:8px;height:8px;animation:win-popup-confettiFall 3s .5s infinite ease-out;left:20%}.win-popup-confetti:nth-child(3n+1){background-color:#ff9fe5;width:12px;height:12px;animation:win-popup-confettiFall 4s 1s infinite ease-out;left:40%}.win-popup-confetti:nth-child(3n+2){background-color:#ff6b6b;animation:win-popup-confettiFall 3.5s 1.5s infinite ease-out;left:60%}@keyframes win-popup-confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(500px) rotate(360deg);opacity:0}}.win-popup-stars{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.win-popup-star{position:absolute;font-size:2rem;opacity:0}.win-popup-star-1{top:20%;left:20%;animation:win-popup-starTwinkle 4s 1s infinite}.win-popup-star-2{top:15%;right:25%;animation:win-popup-starTwinkle 3s .5s infinite}.win-popup-star-3{bottom:20%;left:15%;animation:win-popup-starTwinkle 5s 1.5s infinite}@keyframes win-popup-starTwinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}.win-popup-stats{display:flex;justify-content:space-between;margin:30px 0;text-align:center}.win-popup-stat-box{flex:1;padding:10px;background:#f7fff7;border-radius:15px;transition:all .3s}.win-popup-main-stat{transform:scale(1.1);background:linear-gradient(135deg,#ffe66d,#fffbea);box-shadow:0 5px 15px #ffe66d4d;border:2px solid #FFE66D;z-index:1}.win-popup-stat-icon{font-size:1.5rem;margin-bottom:5px}.win-popup-stat-value{font-size:1.8rem;font-weight:700;color:#333}.win-popup-stat-label{font-size:.9rem;color:#777}.win-popup-performance-message{background:#f7fff7;border-radius:15px;padding:15px;border:2px dashed #4ECDC4;display:flex;align-items:center;gap:15px;margin:20px 0}.win-popup-message-icon{font-size:2rem;animation:win-popup-ring 2s infinite}@keyframes win-popup-ring{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.win-popup-performance-message p{margin:0;font-weight:700;color:#333}.win-popup-action-buttons{display:flex;gap:15px;margin-top:25px}.win-popup-btn{flex:1;padding:15px;background:linear-gradient(to right,#ff6b6b,#ff9fe5);color:#fff;border:none;border-radius:50px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px #e88bc4;position:relative;overflow:hidden}.win-popup-btn:hover{transform:translateY(-3px);box-shadow:0 7px #e88bc4}.win-popup-btn:active{transform:translateY(2px);box-shadow:0 2px #e88bc4}.win-popup-play-again{background:linear-gradient(to right,#4ecdc4,#6ff8d7);box-shadow:0 4px #2e9e95}.win-popup-play-again:hover{box-shadow:0 7px #2e9e95}.win-popup-play-again:active{box-shadow:0 2px #2e9e95}.win-popup-character-celebration{position:relative;margin-top:30px;text-align:center}.win-popup-celebrating-character{width:100px;height:auto;animation:win-popup-bounce 1s infinite alternate}@keyframes win-popup-bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.win-popup-speech-bubble{position:absolute;background:#fff;border:2px solid #333;border-radius:20px;padding:8px 15px;top:-30px;right:30%;font-weight:700;animation:win-popup-float 2s infinite}.win-popup-speech-bubble:after{content:"";position:absolute;bottom:-10px;left:20px;border-width:10px 10px 0;border-style:solid;border-color:white transparent}.win-popup-speech-bubble:before{content:"";position:absolute;bottom:-12px;left:18px;border-width:12px 12px 0;border-style:solid;border-color:#333 transparent;z-index:-1}@keyframes win-popup-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (max-width: 1023px){.grid{grid-template-columns:repeat(3,70px);grid-template-rows:repeat(3,70px);gap:15px}.result-scene{width:350px}.cube,.face{width:70px;height:70px}.face.top{transform:rotateY(0) translateZ(35px)}.face.bottom{transform:rotateY(180deg) translateZ(35px)}.face.left{transform:rotateY(-90deg) translateZ(35px)}.face.right{transform:rotateY(90deg) translateZ(35px)}.face.front{transform:rotateX(-90deg) translateZ(35px)}.face.back{transform:rotateX(90deg) translateZ(35px)}}@media (max-width: 600px){h1{font-size:larger}h2{font-size:large}p{font-size:medium}button{font-size:small!important}.result-play-section{flex-direction:column-reverse;width:100%}.scene{padding:20px}.result-play-section>div{max-width:95%!important}.grid{box-shadow:-8px -8px 8px 8px #9db49d;grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,80px)}.cube,.face{width:80px;height:80px}.face.top{transform:rotateY(0) translateZ(40px)}.face.bottom{transform:rotateY(180deg) translateZ(40px)}.face.left{transform:rotateY(-90deg) translateZ(40px)}.face.right{transform:rotateY(90deg) translateZ(40px)}.face.front{transform:rotateX(-90deg) translateZ(40px)}.face.back{transform:rotateX(90deg) translateZ(40px)}.win-popup-content{padding:20px 15px}.win-popup-header h1{font-size:1.5rem}.win-popup-stats{flex-direction:column;gap:15px}.win-popup-main-stat{transform:scale(1.05);order:-1}.win-popup-action-buttons{flex-direction:column}.puzzle-controls{flex-wrap:wrap;gap:10px;justify-content:space-evenly}}