*{box-sizing:border-box;padding:0;margin:0}body{background-color:#e9e3e6;font-family:Verdana,Geneva,Tahoma,sans-serif}html,body{max-width:100%;overflow-x:hidden}.main-screen{background:url(/assets/mystical-math-hero-HkxMCzlE.png);height:100vh;width:auto;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;justify-content:center;align-items:flex-end;padding-bottom:50px}.main-screen img{max-width:100%;height:auto}.mobile-hero{display:none}.choose-game-modal{background-color:#26547c;box-shadow:0 4px 6px -2px #0003;border-radius:20px;display:flex;position:relative}.close-modal-btn{padding:8px 16px;background-color:#f49d37;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;box-shadow:0 4px 6px -2px #0003;transition:background-color .3s ease;position:absolute;right:20px;top:20px}.choose-operation-text{font-size:32px;font-weight:700;color:#fff;margin:20px 0;text-align:center}.button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap}.add-subtract-buttons,.multiply-divide-buttons{display:flex;gap:20px;margin:10px 0}.footer{padding:10px;position:absolute;width:100%;bottom:0;font-size:10px}.game-button{background-color:#f49d37;color:#fff;border:none;border-radius:8px;padding:15px 30px;margin:10px;font-size:24px;cursor:pointer;box-shadow:0 4px 6px -2px #0003;transition:background-color .3s ease;width:220px}.game-button:hover{background-color:#d97818}.game-screen{display:flex;flex-direction:column;align-items:center;height:100vh;background:url(/assets/mystical-math-background-DJNVPnr8.png)}.header{position:relative;top:0;width:100%;box-shadow:0 4px 6px -2px #0003;height:150px;background-color:#14193cb3;display:flex;justify-content:space-between;align-items:center}.header .header-hero{height:150px;width:auto}.nav{display:flex;flex-direction:column;height:100%;width:100%;justify-content:center;align-items:center}.header h1{display:flex;justify-content:center;text-align:center;font-size:30px;font-weight:700;height:50%;color:#e6e8ff;width:100%;padding:30px 10px 0}.nav-links{display:flex;justify-content:center;align-items:flex-end;list-style:none;gap:20px;padding-bottom:10px;height:50%;width:100%}.nav-links li{font-size:18px;padding:8px 12px;border-radius:8px}.nav-links li:hover{transform:scale(1.2);cursor:pointer}.nav-links li a{color:#e6e8ff;text-decoration:none;position:relative}.nav-links li a:after{content:"";position:absolute;left:0;bottom:-2px;width:0%;height:2px;background:#e6e8ff;transition:width .25s ease-in-out}.nav-links li a:hover:after{width:100%}.nav-links li a.active{font-weight:700;color:#c6a3ff}.nav-links li a.active:after{content:"";position:absolute;left:0;bottom:-2px;background:#c6a3ff}.nav-hamb-menu{display:none}.links-powerbar-container{display:flex;justify-content:space-around;align-items:center;width:80%}.header-powerbar-container .powerbar-container{position:relative;bottom:20px;right:3px}.header-powerbar-container{position:relative}.charge-text{position:absolute;bottom:18px;font-size:12px;color:#c6a3ff;text-shadow:1px 1px 2px #000000;width:100%}.charge-text p{text-align:center}.battle-overlay{position:fixed;top:25%;left:50%;transform:translate(-50%);width:auto;height:auto;background-color:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;z-index:9999;text-align:center;padding:40px;border-radius:12px}.battle-overlay h1{color:#fff;font-size:2rem;font-family:"Press Start 2P",cursive;text-shadow:0 0 10px #00ffff;margin:0}.overlay-blocker{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9998;background:transparent}.battle-button{padding:20px 40px;font-size:1.5rem;background-color:#0cf;color:#000;border:3px solid #00ffff;border-radius:12px;cursor:pointer;font-family:"Press Start 2P",cursive;text-shadow:0 0 10px #00ffff;box-shadow:0 0 20px #0ff;transition:transform .2s ease,box-shadow .2s ease}.battle-button:hover{transform:scale(1.05);box-shadow:0 0 30px #0ff}@keyframes pulseOverlay{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}.battle-overlay h1,.battle-button{animation:pulseOverlay 1.5s infinite}main{display:flex;justify-content:center;align-items:center;padding:40px}.game-container{display:flex;align-items:center;justify-content:center;gap:60px;height:100%;width:100%;padding-inline:30px}.top-info-bar{display:flex;justify-content:space-evenly;align-items:center;width:80%;height:120px}.top-info-bar p{font-size:18px;color:#b8c0ff}.top-info-bar div{display:flex;justify-content:center;align-items:center}.wooden-door{width:80px}.info-text{max-width:30%;text-align:center;border:1px dashed #B8C0FF;padding:10px;border-radius:12px}.score-container{display:flex;flex-direction:column;align-items:flex-end;width:30vw;gap:30px}.score-container>p{font-size:30px;font-weight:700;color:#b8c0ff}.chest-key-container{display:flex;justify-content:flex-end;position:relative}.score-container .chest{width:50%}.key{height:150px;cursor:grab;position:absolute;right:-130px;touch-action:none}.key-animate{animation:keyBounceIn .6s ease-out,keyShimmer 1.5s infinite ease-in-out}@keyframes keyBounceIn{0%{transform:scale(0) translateY(-20px);opacity:0}60%{transform:scale(1.2) translateY(5px);opacity:1}to{transform:scale(1) translateY(0)}}@keyframes keyShimmer{0%{filter:drop-shadow(0 0 4px gold)}50%{filter:drop-shadow(0 0 14px gold)}to{filter:drop-shadow(0 0 4px gold)}}.key:hover{cursor:grab;filter:drop-shadow(0 0 18px gold);transform:scale(1.05)}.key:active{cursor:grabbing}.key-text{width:70%;font-size:14px;text-align:center;color:#f49d37}.item-name{font-weight:700}.equation-container{width:30vw;display:flex;flex-direction:column;align-items:center;height:400px}.equation-container>p{color:#f49d37;font-size:14px;padding-bottom:10px}.equation{font-size:56px;font-weight:700;color:#7ea6ff;text-align:center;position:relative;max-width:300px;display:flex;flex-direction:column;align-items:center;border:1px solid black;border-radius:15px;background-color:#505aaa40;padding:20px 80px}.equation-numbers{display:flex;flex-direction:column;align-items:flex-end}.top-number,.operator,.bottom-number,.answer{margin:5px 0}.equation-line{width:100%;border:1px solid #7EA6FF;margin:10px auto}.operator{padding-top:25px}.multiple-choice{display:flex;gap:15px;margin-top:10px}.answer-button{background-color:#7ea6ff;color:#fff;border:none;border-radius:8px;width:50px;height:50px;font-size:28px;cursor:pointer;box-shadow:0 4px 6px -2px #0003;transition:background-color .3s ease}.hint-container{display:flex;align-items:center;justify-content:flex-start;width:30vw;height:355px}.hint{display:flex;flex-direction:column;align-items:center;justify-content:center}.hint p{text-align:center;font-size:16px;margin-bottom:10px;color:#86615c;font-weight:700}.hint img{width:200px;height:auto;cursor:pointer}.chart-container{width:30vw;display:flex;height:355px}.chart{position:relative;width:400px}.chart-image{width:350px;height:auto}.close-chart{padding:8px 16px;background-color:#f49d37;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;box-shadow:0 4px 6px -2px #0003;transition:background-color .3s ease;position:absolute;right:0;top:0}.feedback-modal{position:fixed;top:40%;left:37%;width:400px;height:200px;background-color:#1f255d;border:3px solid #1F1300;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;z-index:1000;box-shadow:0 0 10px #000;gap:20px}.feedback-modal p{text-align:center}.inventory-page{background:linear-gradient(135deg,#2b1055,#7597de);color:#fff;font-family:Cinzel,Times New Roman,serif;min-height:100vh;display:flex;flex-direction:column;position:relative}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,200px));gap:5px;padding:10px;flex:1}.inventory-card{width:100%;height:200px;background:#ffffff1a;padding:1rem;border-radius:12px;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 12px #0000004d;display:flex;flex-direction:column;justify-content:space-between;align-items:center;transition:transform .2s ease,box-shadow .2s ease}.inventory-card:hover{transform:translateY(-5px);box-shadow:0 0 18px #fff6;cursor:pointer}.inventory-image{width:100%;height:110px;object-fit:contain}.inventory-empty-text{width:100vw;text-align:center;font-size:1.5rem;padding:2rem;flex:1;display:flex;justify-content:center;align-items:center}.inventory-modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000}.inventory-modal-content{background:linear-gradient(135deg,#2b1055,#7597de);padding:2rem;border-radius:12px;text-align:center;max-width:400px;width:90%;position:relative;border:3px solid black;box-shadow:0 6px 10px #000000e6}.inventory-modal-image{width:100%;height:300px;object-fit:contain;margin-bottom:1rem}.inventory-modal-text{font-size:1.2rem;margin-bottom:1rem}.inventory-modal-close{padding:.5rem 1rem;border:none;background:#2b1055;color:#fff;border-radius:8px;cursor:pointer;font-size:1rem}.inventory-modal-close:hover{background:#9b59f6}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{transform:scale(.8)}to{transform:scale(1)}}.reset-inventory-btn{position:absolute;bottom:10px;right:10px;background-color:#d97818;color:#fff;border-radius:10px;border:none;padding:8px 12px;cursor:pointer}.inventory-empty-message{text-align:center;font-size:18px;margin-top:50px;opacity:.85}.wizard-battle-container{position:relative;text-align:center;padding:0 20px;transition:background .2s}.flash-bg{background:#ff646433}.wizard-image-wrapper{display:inline-block;position:relative;width:auto;height:500px;transition:transform .3s ease,filter .2s ease}.wizard-image{width:100%;height:100%;transition:opacity .3s ease,transform .3s ease}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(var(--shake-dist))}40%{transform:translate(calc(var(--shake-dist) * -1))}60%{transform:translate(var(--shake-dist))}80%{transform:translate(calc(var(--shake-dist) * -1))}to{transform:translate(0)}}.shake{animation:shake .3s}.shake-1{--shake-dist: 5px}.shake-2{--shake-dist: 10px}.shake-3{--shake-dist: 15px}.shake-4{--shake-dist: 20px}.shake-5{--shake-dist: 25px}.hit-effect{animation:hitFlash .15s ease}@keyframes hitFlash{0%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(2) drop-shadow(0 0 10px red);transform:scale(1.1)}to{filter:brightness(1);transform:scale(1)}}.damage-number{position:absolute;top:0;font-weight:700;color:#ff0;font-size:20px;animation:floatUp .8s ease forwards}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}.spark{position:absolute;width:5px;height:5px;background:#ff0;border-radius:50%;animation:sparkFly .5s ease forwards}@keyframes sparkFly{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(calc(-20px + 40px * var(--rand)),-50px) scale(0)}}.game-over-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#161616b9;display:flex;flex-direction:column;justify-content:center;align-items:center;color:red;font-family:"Press Start 2P",cursive;font-size:48px;text-align:center;z-index:9999;animation:gameOverPulse 1s infinite alternate;-webkit-user-select:none;user-select:none}.game-over-overlay h1{font-size:64px;margin:20px 0 0;color:red;text-shadow:0 0 10px #ff0000,0 0 20px #ff0000,0 0 30px #ff9900}.game-over-overlay p{font-size:24px;margin-top:20px;margin-bottom:20px;color:#fff}@keyframes gameOverPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.arcade-button{font-family:"Press Start 2P",cursive;font-size:16px;color:#fff;background:linear-gradient(145deg,#ff3c3c,#ff1a1a);border:4px solid #fff;border-radius:12px;padding:12px 24px;cursor:pointer;text-transform:uppercase;letter-spacing:2px;box-shadow:0 6px #900,0 0 10px #f009;transition:all .1s ease-in-out;position:relative;outline:none}.arcade-button:active{transform:translateY(4px);box-shadow:0 2px #900,0 0 10px #f009}.arcade-button:hover{background:linear-gradient(145deg,#ff5c5c,#ff2a2a);box-shadow:0 6px #900,0 0 20px #ff6464e6}.arcade-button:after{content:"";position:absolute;inset:-6px;border-radius:16px;box-shadow:0 0 20px #ff3232b3;opacity:0;transition:opacity .2s}.arcade-button:hover:after{opacity:1}.after-battle-text{font-size:36px;font-weight:700;color:#f49d37;position:absolute;top:20%;left:50%;transform:translate(-50%,-50%)}.wizard-battle-close-button{position:absolute;top:20px;left:20px}.mystic-shot{position:absolute;top:0;left:0;width:25px;height:25px;background:radial-gradient(circle,#0ff,#00f);border-radius:50%;animation:shoot-desktop .5s linear forwards;z-index:5}@keyframes shoot-desktop{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(400px,200px) scale(.5);opacity:0}}@keyframes shoot-tablet{0%{transform:translate(-150px) scale(1);opacity:1}to{transform:translate(200px,200px) scale(.5);opacity:0}}@keyframes shoot-mobile{0%{transform:translate(-150px) scale(1);opacity:1}to{transform:translate(150px,200px) scale(.5);opacity:0}}@keyframes shoot-mobile-small{0%{transform:translate(-150px) scale(1);opacity:1}to{transform:translate(50px,200px) scale(.5);opacity:0}}.powerbar-container{margin-top:20px;display:flex;justify-content:center;position:absolute;bottom:0;right:80%;transform:translateY(10px)}.wizard-powerbar-container{margin-top:20px;display:flex;justify-content:center;position:absolute;bottom:0;right:20%;transform:translateY(60px)}.powerbar-image{width:150px;height:auto}.powerbar-fill-container{position:absolute;bottom:40px;right:24px;width:95px;height:18px}.powerbar-fill{position:absolute;bottom:4px;right:4px;height:14px;background:linear-gradient(90deg,#0ff,#0cf,#09f);border-radius:6px;box-shadow:0 0 10px #0ffc;transition:width .5s ease-in-out;z-index:1}.wizard-battle-powerbars{position:relative;top:50px;width:100vw;margin:0 auto 20px;display:flex;justify-content:space-around;color:#fff}.battle-powerbar-wrapper{position:relative;top:50px;left:80px;width:200px;height:50px}.wizard-powerbar-fill{background:linear-gradient(90deg,#ff1e00,#ff5e00,#ffa600)}@media(max-width:980px){.header h1{font-size:22px;margin-left:20px;padding-top:0}.header .nav{flex-direction:row;justify-content:center;align-items:center}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;right:0;background:#111;width:100%;padding:1rem}.nav-links.open{display:flex;z-index:1000;width:200px;height:auto}.nav-hamb-menu{display:block;font-size:2rem;background:none;border:none;color:#fff;cursor:pointer}.links-powerbar-container{flex-direction:row-reverse;justify-content:flex-start;gap:20px;padding-right:20px}.top-info-bar .info-text,.inventory-link-container p{font-size:14px}.mystic-shot{animation:shoot-tablet .5s linear forwards}}@media(max-width:768px){.main-screen{background:#00a19b;padding-bottom:20px;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:40px}.mobile-hero{display:flex;justify-content:center;align-items:center;width:80%;height:auto}.choose-game-modal{position:absolute}.choose-game-modal>main{padding:30px}.choose-operation-text{padding-top:20px}.add-subtract-buttons,.multiply-divide-buttons{flex-direction:column;gap:12px}.game-button{font-size:18px;padding:12px}.footer{text-align:center}.header{height:100px;padding:10px 0}.header .header-hero{height:90px}.header h1{font-size:14px;height:auto;margin:10px 0}.nav-links{display:none;flex-direction:column;gap:1.5rem;list-style:none}.nav-links.open{display:flex;position:absolute;top:100%;left:0;width:100%;background:#111;z-index:1000}main{padding:10px}.game-container{flex-direction:column;gap:2px;height:auto}.game-screen .top-info-bar{width:100%;height:auto;gap:10px}.top-info-bar .info-text,.inventory-link-container p{font-size:12px}.score-container{align-items:center;flex-direction:row;margin-left:30%;width:100%;gap:0}.score-container>p{font-size:12px;width:30%;margin:10px}.chest-key-container{width:50%;justify-content:flex-start}.key{position:absolute;height:80px;margin-top:10px;right:25%;touch-action:none}.key-text{font-size:10px;width:20%;position:relative;right:10%}.equation-container{width:100%;height:auto}.equation-container>p{font-size:11px;text-align:center}.equation{font-size:16px;padding:20px;max-width:100%}.multiple-choice{flex-wrap:wrap;justify-content:center;gap:10px}.answer-button{width:35px;height:35px;font-size:16px}.equation-container>.game-button{padding:10px 16px;font-size:14px;width:160px}.hint-container,.chart-container{width:100%;justify-content:center;height:auto}.hint{flex-direction:row}.hint img{width:100px}.chart{width:50%;margin:-200px}.chart-image{width:100%}.feedback-modal{width:90%;left:50%;transform:translate(-50%);top:30%;height:auto;padding:20px;font-size:18px}.battle-overlay{width:90%;padding:20px}.battle-overlay h1{font-size:1.4rem}.battle-button{font-size:1rem;padding:12px 20px}.inventory-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.inventory-modal-image{height:200px}.wizard-image-wrapper{height:375px}.game-over-overlay h1{font-size:36px}.game-over-overlay p{font-size:16px}.after-battle-text{font-size:22px;width:90%;text-align:center}.mystic-shot{animation:shoot-mobile-small .5s linear forwards}.powerbar-container{right:85%}.wizard-powerbar-container{right:15%}}@media(max-width:480px){.equation{font-size:28px}.game-button{font-size:16px}.header .header-hero{display:none}.nav-links li{font-size:14px}.home-link{display:none}.battle-overlay h1{font-size:1.2rem}.wooden-door{width:50px}.info-text{max-width:50%}.score-container{margin-left:5%}.key{height:60px;right:20%;touch-action:none}.key-text{right:5%}.wizard-image-wrapper{margin-top:50px}.wizard-battle-powerbars{margin-top:20px}.mystic-shot{animation:shoot-mobile-small .5s linear forwards}}@media(max-width:426px){.main-screen{gap:10px}.mobile-hero{width:60%;flex-direction:column}.choose-operation-text{font-size:20px}.inventory-link-container{flex-direction:column}.header h1{font-size:10px}.hint img{width:80px}.key-text{right:1%}.powerbar-container .charge-text,.wizard-powerbar-container .charge-text{font-size:10px}.powerbar-container{right:95%}.wizard-powerbar-container{right:5%}}
