:root{--cyan:#52f6ff;--blue:#1879ff;--violet:#7857ff;--pink:#ff68c8;--ink:#071331;--panel:rgba(8,25,79,.82);--white:#f6fdff;--gold:#ffd84f;--danger:#ff507d}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Nunito,system-ui,sans-serif;color:var(--white);background:radial-gradient(circle at 50% 10%,#3b247e 0,#101d57 36%,#030818 78%);overflow-x:hidden}.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#59e9ff 1px,transparent 1px);background-size:53px 53px,91px 91px;background-position:4px 8px,26px 31px;opacity:.35}.app{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;}.screen{width:min(1120px,100%);min-height:min(720px,calc(100vh - 48px));position:relative;overflow:hidden;border:1px solid rgba(82,246,255,.38);border-radius:28px;background:linear-gradient(145deg,rgba(20,36,107,.94),rgba(6,16,54,.94));box-shadow:0 0 0 4px rgba(28,114,224,.12),0 30px 90px rgba(0,0,0,.55),inset 0 0 70px rgba(48,88,210,.25);padding:clamp(24px,5vw,64px)}.screen:before,.screen:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(82,246,255,.12);transform:rotate(45deg);border-radius:40px}.screen:before{left:-180px;top:-90px}.screen:after{right:-180px;bottom:-100px}.arabic{font-family:"Noto Kufi Arabic",sans-serif;direction:rtl}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);font-weight:900;font-size:.76rem}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}.hero h1{font-size:clamp(2.1rem,5vw,4.8rem);line-height:1.25;margin:18px 0 8px;text-shadow:0 0 25px rgba(82,246,255,.42)}.hero h2{font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:700;color:#c6caff;margin:0 0 28px}.btn{border:0;border-radius:16px;padding:15px 25px;font:800 1rem Nunito,sans-serif;color:#071331;background:linear-gradient(135deg,var(--cyan),#7effca);box-shadow:0 7px 0 #147aa6,0 0 24px rgba(82,246,255,.34);cursor:pointer;transition:.18s transform,.18s filter}.btn:hover{transform:translateY(-3px);filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #147aa6}.btn.secondary{color:#fff;background:rgba(32,72,153,.72);border:1px solid #57b6ff;box-shadow:0 5px 0 #102b70}.btn.pink{background:linear-gradient(135deg,#ff78d4,#9f70ff);box-shadow:0 7px 0 #6c3c9c;color:#fff}.hero-art{height:430px;position:relative;display:grid;place-items:center}.portal{width:290px;height:120px;border-radius:50%;border:4px solid var(--cyan);box-shadow:0 0 15px var(--cyan),inset 0 0 45px #197cf0,0 0 70px #4b5fff;position:absolute;bottom:35px;animation:pulse 2s infinite}.robot{font-size:9rem;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));animation:float 3s ease-in-out infinite;position:relative;z-index:2}.drone{position:absolute;right:1%;top:15%;font-size:3rem;animation:float 2.2s .3s ease-in-out infinite}.chip{position:absolute;padding:10px 16px;border:1px solid var(--cyan);background:rgba(8,40,100,.75);border-radius:8px;color:var(--cyan);font-weight:900;box-shadow:0 0 18px rgba(82,246,255,.3)}.chip.c1{left:0;top:24%}.chip.c2{right:0;bottom:24%}@keyframes float{50%{transform:translateY(-16px)}}@keyframes pulse{50%{transform:scale(1.07);opacity:.7}}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;position:relative;z-index:2}.title{margin:0;font-size:clamp(1.45rem,3vw,2.4rem);color:#fff;text-shadow:0 0 18px #28adff}.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--cyan);background:rgba(19,70,145,.75);color:#fff;font-size:1.3rem;cursor:pointer}.rules{display:grid;grid-template-columns:1fr .42fr;gap:40px;align-items:center}.rule-list{display:grid;gap:14px}.rule{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:16px 20px;border:1px solid rgba(82,246,255,.22);border-radius:16px;background:rgba(10,29,83,.65)}.cube{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:linear-gradient(135deg,#2c9eff,#875eff);box-shadow:0 0 18px rgba(82,246,255,.35);font-weight:900}.rule p{margin:0;color:#d9e7ff}.rule b{display:block;color:#fff;margin-bottom:2px}.side-art{font-size:8rem;text-align:center;filter:drop-shadow(0 12px 12px #000)}.actions{display:flex;gap:14px;justify-content:flex-end;margin-top:28px;position:relative;z-index:2}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:55px}.level-card{border:1px solid rgba(82,246,255,.38);border-radius:24px;background:linear-gradient(165deg,rgba(28,76,166,.75),rgba(23,19,87,.8));padding:28px;text-align:center;cursor:pointer;color:white;transition:.25s;min-height:320px}.level-card:hover{transform:translateY(-10px);border-color:var(--cyan);box-shadow:0 16px 35px rgba(0,0,0,.3),0 0 30px rgba(82,246,255,.18)}.level-num{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;font:800 3rem "Noto Kufi Arabic";background:linear-gradient(145deg,var(--cyan),var(--violet));box-shadow:0 0 30px rgba(82,246,255,.55)}.level-card h3{font-size:1.35rem;margin:4px}.level-card p{color:#bccbed;margin:12px 0}.game-screen{padding:22px clamp(18px,3vw,38px)}.game-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.hud{display:flex;gap:10px;flex-wrap:wrap}.hud-item{padding:9px 14px;border:1px solid rgba(82,246,255,.4);border-radius:12px;background:rgba(7,38,98,.85);min-width:90px}.hud-item small{display:block;color:#86dfff;font-weight:800;font-size:.66rem;text-transform:uppercase}.hud-item b{font-size:1.1rem}.hearts{color:var(--danger);letter-spacing:2px}.instruction{text-align:center}.instruction h2{margin:0;font-size:clamp(1.2rem,2.8vw,2rem)}.instruction p{margin:5px 0;color:#b8c9ed}.board{position:relative;margin:22px auto 0;width:min(820px,100%);min-height:500px;border:1px solid rgba(82,246,255,.42);border-radius:22px;padding:26px;background-color:rgba(5,32,79,.75);background-image:linear-gradient(rgba(82,246,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(82,246,255,.13) 1px,transparent 1px);background-size:70px 70px;box-shadow:inset 0 0 45px rgba(29,122,220,.25)}.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}.column{display:flex;flex-direction:column;align-items:center;gap:14px}.column-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#83eaff;font-weight:900;min-height:22px}.word{width:min(190px,100%);min-height:61px;border:2px solid transparent;border-radius:50px;padding:9px 12px;background:linear-gradient(135deg,#e359a8,#a75cdb);color:white;font:700 1.2rem "Noto Kufi Arabic";cursor:pointer;box-shadow:0 8px 15px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.35);transition:.18s}.column:nth-child(2) .word{background:linear-gradient(135deg,#44c7bc,#319bd0)}.column:nth-child(3) .word{background:linear-gradient(135deg,#f39a43,#e15f78)}.word:hover,.word.selected{transform:scale(1.06);border-color:#fff;box-shadow:0 0 25px var(--cyan)}.word.matched{opacity:.25;pointer-events:none;transform:scale(.92)}.word.wrong{animation:shake .3s;border-color:#ff527d}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}#lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.toast{position:fixed;left:50%;bottom:35px;transform:translateX(-50%) translateY(130px);background:#071a42;border:1px solid var(--cyan);padding:12px 22px;border-radius:14px;font-weight:900;transition:.25s;z-index:10}.toast.show{transform:translateX(-50%) translateY(0)}.result{text-align:center;display:grid;place-items:center;align-content:center}.result .rocket{font-size:8rem;animation:launch 2.5s ease-in-out infinite;filter:drop-shadow(0 0 25px #7ae6ff)}@keyframes launch{50%{transform:translateY(-20px) rotate(4deg)}}.result h1{font-size:clamp(2rem,4vw,3.5rem);margin:5px}.stars-row{font-size:clamp(2.3rem,6vw,4rem);letter-spacing:5px;color:#44506d;margin:12px}.stars-row .on{color:var(--gold);text-shadow:0 0 15px #ffb900}.result p{color:#c2d3f1;font-size:1.1rem}.result .actions{justify-content:center}.progress{height:6px;background:#173369;border-radius:8px;overflow:hidden;margin-top:7px}.progress span{height:100%;display:block;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width 1s linear}@media(max-width:760px){.app{padding:0}.screen{min-height:100vh;border-radius:0;padding:24px 18px}.hero{grid-template-columns:1fr;text-align:center}.hero-art{height:280px}.robot{font-size:6rem}.portal{width:220px;height:80px}.rules{grid-template-columns:1fr}.side-art{display:none}.level-grid{grid-template-columns:1fr;margin-top:25px}.level-card{min-height:0}.game-header{grid-template-columns:auto 1fr}.hud{grid-column:1/-1;grid-row:2;justify-content:center}.instruction{text-align:right}.instruction p{display:none}.board{padding:16px 8px;min-height:470px}.match-grid{gap:7px}.word{font-size:.9rem;padding:7px 3px;min-height:54px}.column-label{font-size:.6rem}.result .rocket{font-size:6rem}}
:root body{background-image:linear-gradient(rgba(3,8,28,.2),rgba(3,8,28,.34)),url("assets/latar-tempat.png");background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
:root .screen{background:linear-gradient(145deg,rgba(8,18,63,.42),rgba(4,12,42,.32));backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
:root body.opening-page{height:100vh;height:100dvh;overflow:hidden;background-image:url("assets/tajuk.png")}
.opening-page .stars{display:none}
.opening-page .app{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:0}
.opening-screen{width:100%;height:100%;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 24px 9vh}
.opening-action{position:relative;z-index:2; padding-top: 120px;}
.image-start{display:block;width:min(300px,86vw);padding:0;border:0;background:transparent;cursor:pointer;transition:transform .18s ease,filter .18s ease;filter:drop-shadow(0 10px 6px rgba(2,8,35,.48)) drop-shadow(0 0 16px rgba(82,246,255,.44))}
.image-start img{display:block;width:100%;height:auto;clip-path:inset(16% 5.8% 15% 5.8% round 999px)}
.image-start:hover{transform:translateY(-5px) scale(1.025);filter:drop-shadow(0 14px 8px rgba(2,8,35,.5)) drop-shadow(0 0 24px rgba(82,246,255,.72)) brightness(1.06)}
.image-start:active{transform:translateY(4px) scale(.985);filter:drop-shadow(0 5px 4px rgba(2,8,35,.45)) drop-shadow(0 0 13px rgba(82,246,255,.5))}
.image-start:focus-visible{outline:3px solid var(--cyan);outline-offset:-30px;border-radius:999px}
.robot-flight{position:absolute;pointer-events:none;z-index:2;transform-origin:50% 70%;filter:drop-shadow(0 18px 13px rgba(2,7,30,.55)) drop-shadow(0 0 13px rgba(62,236,255,.3));will-change:transform,filter}
.robot-flight img{display:block;width:100%;height:auto}
.robot-flight::after{content:"";position:absolute;left:42%;bottom:13%;width:25%;height:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(102,248,255,.75),rgba(55,119,255,.25) 45%,transparent 72%);filter:blur(7px);animation:thruster 1.15s ease-in-out infinite alternate}
.robot-one{z-index: 3;width:min(360px,32vw);left:calc(50% + 90px);bottom:14%;animation:fly-one 4.2s ease-in-out infinite}
.robot-two{width:min(300px,32vw);left:calc(50% + 330px);bottom:36vh;animation:fly-two 5s .35s ease-in-out infinite}
.robot-two::after{animation-delay:.5s}
@keyframes fly-one{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}30%{transform:translate3d(8px,-17px,0) rotate(2deg)}65%{transform:translate3d(-5px,-9px,0) rotate(-1deg)}80%{filter:drop-shadow(0 22px 15px rgba(2,7,30,.5)) drop-shadow(0 0 22px rgba(62,236,255,.48))}}
@keyframes fly-two{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes thruster{to{transform:scale(1.25);opacity:.45;filter:blur(11px)}}
@media(max-width:900px){.robot-one{width:min(300px,38vw);left:0vw;right:auto;bottom:0}.robot-two{left:auto;right:0;bottom:0}}
@media(max-width:560px){:root body.opening-page{width:100%;min-width:100%;min-height:0;background-image:none;background-color:#061a55}:root body.opening-page::before{content:"";position:fixed;z-index:0;inset:0;background:url("assets/opening-mobile.png") center/100% 100% no-repeat;pointer-events:none}.opening-page .app{width:100%;min-width:100%;height:100%;min-height:0}.opening-screen{width:100%;min-width:100%;height:100%;min-height:0;padding-bottom:7vh}.opening-action{z-index:4;width: 100%;display:flex;justify-content: center;}.robot-one{width:74vw;left:-6vw;right:auto;bottom:-3vh}.robot-two{width:58vw;left:auto;right:-9vw;bottom:14vh}.image-start{width:65%;}}
@media(prefers-reduced-motion:reduce){.robot-flight,.robot-flight::after{animation:none}}
:root body.rules-page{background-image:url("assets/rules-background.png");background-position:center;background-size:cover}
.rules-page .stars{display:none}
.rules-page .app{padding:0}
.rules-screen{position:relative;width:100%;min-height:100vh;overflow:hidden}
.rules-home{position:absolute;top:24px;left:24px;z-index:7}
.rules-content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,34px);width:min(1500px,94vw);margin:auto}
.rules-panel-image{display:block;flex:0 1 1100px;width:min(72vw,1100px); margin-top:-90px;min-width:0;height:auto;filter:drop-shadow(0 0 25px rgba(68,235,255,.42))}
.rules-panel-mobile{display:none}
.rules-satellite{display:block;flex:0 0 auto;width:min(30vw,420px);max-width:420px;height:auto;filter:drop-shadow(0 22px 18px rgba(0,0,20,.45)) drop-shadow(0 0 20px rgba(128,67,255,.46));animation:rules-float 4s ease-in-out infinite}
.rules-next{position:absolute;z-index:7;right:32px;bottom:40px;width:66px;height:54px;border:2px solid #7af7ff;clip-path:polygon(0 0,76% 0,100% 50%,76% 100%,0 100%,14% 50%);background:linear-gradient(135deg,#62f5ff,#8965ff);color:#06163d;font-size:1.65rem;font-weight:900;cursor:pointer;filter:drop-shadow(0 0 14px rgba(91,244,255,.7));transition:.18s transform,.18s filter}
.rules-next:hover{transform:translateX(6px);filter:drop-shadow(0 0 22px #65f4ff) brightness(1.1)}
.loading-unit{position:absolute;z-index:6;left:28px;bottom:50px;display:flex;align-items:center;filter:drop-shadow(0 0 5px rgba(62,236,255,.72));animation:loader-glow 1.8s ease-in-out infinite}
.loading-unit::before{content:"SYSTEM LOADING";position:absolute;left:44px;bottom:calc(100% + 6px);font:800 .62rem Nunito,sans-serif;letter-spacing:.2em;color:#9cfaff;text-shadow:0 0 8px #30dfff;white-space:nowrap}
.rules-page .loading-unit::before{content:none}
.levels-page .loading-unit::before{content:none}
.loading-line{position:relative;width:28px;height:3px;background:linear-gradient(90deg,transparent 0,#31dff7 48%,#77f7ff 100%);box-shadow:0 0 6px rgba(73,235,255,.85)}
.loading-line:last-child{background:linear-gradient(90deg,#77f7ff 0,#31dff7 52%,transparent 100%)}
.loading-line::after{content:none}
.loading-frame{position:relative;width:min(200px,58vw);height:30px;padding:5px;background:linear-gradient(180deg,#91fbff 0,#25cee9 45%,#0c82b2 100%);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);overflow:hidden}
.loading-frame::after{content:"";position:absolute;z-index:2;inset:2px;clip-path:inherit;border:2px solid rgba(221,255,255,.65);pointer-events:none}
.loading-stripes{position:relative;z-index:1;width:100%;height:100%;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);background:repeating-linear-gradient(105deg,#fff 0 5px,#003384 8px 9px,#003384 12px 10px);background-size:50px 100%;box-shadow:inset 0 0 0 3px #183764,inset 0 0 10px rgba(0,15,58,.75);animation:loading-stripes .8s linear infinite}
@keyframes loading-stripes{to{background-position:50px 0}}
@keyframes loader-glow{50%{filter:drop-shadow(0 0 14px rgba(93,243,255,.95))}}
@keyframes rules-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@media(max-width:800px){.rules-content{flex-direction:column;gap:0;padding:35px 0 100px}.rules-panel-desktop{display:none}.rules-panel-mobile{display:block;flex:none;width:auto;max-width:100vw;max-height:78vh;margin-top:0;object-fit:contain}.rules-satellite{position:absolute;width:min(40vw,260px);left:0vw;bottom:4vh}.loading-unit{left:50%;transform: translateX(-50%);bottom:50px}.loading-line{width:14px}.rules-next{right:32px;bottom:40px}}
@media(prefers-reduced-motion:reduce){.rules-satellite,.loading-stripes{animation:none}}
:root body.levels-page{background-image:url("assets/rules-background.png");background-position:center;background-size:cover}
.levels-page .stars{display:none}.levels-page .app{padding:0}.levels-screen{position:relative;width:100%;min-height:100vh;overflow:hidden}.levels-content{position:absolute;inset:0;display:grid;grid-template-columns:minmax(430px,0.9fr) minmax(360px,1.1fr);align-items:center;gap:clamp(30px,5vw,90px);width:min(1500px,86vw);margin:auto;padding:3vh 0 8vh}.level-menu{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(28px,5.5vh,64px)}.level-choice{display:grid;grid-template-columns:minmax(300px,1fr) clamp(64px,6vw,88px);align-items:center;gap:clamp(18px,3vw,42px);width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;transition:transform .2s ease,filter .2s ease}.level-choice-label{display:grid;place-items:center;min-height:clamp(70px,8.5vh,98px);padding:12px 34px;border:2px solid rgba(221,239,255,.38);border-radius:999px;background:linear-gradient(100deg,rgba(166,187,221,.72),rgba(121,72,207,.82));box-shadow:inset 0 0 22px rgba(218,241,255,.16),0 9px 24px rgba(1,16,65,.28);font-size:clamp(1.55rem,3vw,3rem);line-height:1.35;text-shadow:0 3px 8px rgba(0,10,50,.5)}.level-choice-num{display:grid;place-items:center;width:clamp(64px,6vw,88px);aspect-ratio:1;border:4px solid rgba(213,239,255,.9);border-radius:50%;background:rgba(48,101,194,.3);box-shadow:0 0 0 5px rgba(168,61,209,.15),inset 0 0 15px rgba(94,221,255,.22),0 0 15px rgba(102,223,255,.28);font-size:clamp(1.7rem,3vw,2.8rem);text-shadow:0 0 10px #6fe9ff}.level-choice:hover{transform:translateX(8px);filter:brightness(1.12) drop-shadow(0 0 14px rgba(91,240,255,.28))}.level-choice:focus-visible{outline:3px solid var(--cyan);outline-offset:8px;border-radius:999px}.levels-ufo-slot{width:100%;height:min(62vh,620px);display:grid;place-items:center}
.levels-ufo-slot img{display:block;width:min(780px,48vw);max-width:125%;height:auto;filter:drop-shadow(0 24px 24px rgba(0,8,40,.5)) drop-shadow(0 0 24px rgba(82,241,255,.42));animation:levels-ufo-float 4.5s ease-in-out infinite}@keyframes levels-ufo-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
@media(max-width:900px){.levels-content{grid-template-columns:minmax(350px,1fr) minmax(240px,.65fr);gap:22px;width:92vw}.level-choice{grid-template-columns:minmax(250px,1fr) 68px;gap:16px}.level-choice-num{width:68px}}
@media(prefers-reduced-motion:reduce){.levels-ufo-slot img{animation:none}}
.level-menu{gap:clamp(24px,3.8vh,44px);align-items:center}.level-choice{position:relative;display:grid;grid-template-columns:minmax(260px,520px) 54px;align-items:center;justify-content:center;gap:14px;width:min(590px,100%);aspect-ratio:auto;overflow:visible;border:0;border-radius:0;background:transparent}.level-choice-art{position:relative;display:block;width:100%;aspect-ratio:3.15;overflow:hidden;border-radius:14px}.level-choice-image{position:absolute;left:60%;top:50%;display:block;width:75%;height:auto;max-width:none;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none}.level-choice-num{width:54px;border-width:3px;font-size:1.65rem}.level-choice:focus-visible{border-radius:14px}@media(max-width:900px){.level-choice{grid-template-columns:minmax(230px,460px) 50px;gap:12px;width:min(522px,100%)}.level-choice-num{width:50px;font-size:1.5rem}}@media(max-width:680px){.level-choice{grid-template-columns:minmax(0,1fr) 44px;gap:9px;width:100%}.level-choice-num{width:44px;font-size:1.3rem}}
.trace-game{width:100vw;min-height:100vh;overflow:hidden;background-image:linear-gradient(rgba(2,12,49,.08),rgba(2,12,49,.14)),url("assets/game-background.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.gameplay-layout{width:100%;height:100vh;display:grid;grid-template-columns:minmax(180px,1fr) minmax(480px,2.45fr) minmax(220px,1.15fr);align-items:stretch;gap:clamp(8px,1.4vw,26px);padding:clamp(12px,2vh,24px) clamp(12px,1.7vw,32px)}
.game-left,.game-right,.game-center{position:relative;min-width:0;min-height:0}.game-left{display:flex;flex-direction:column;align-items:center;padding-top:6vh}.game-left .hud{width:clamp(260px,21vw,330px);max-width: 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:7px;border:3px solid rgba(105,244,255,.82);border-radius:5px;background:rgba(22,183,218,.42);box-shadow:inset 0 0 15px rgba(67,226,255,.28),0 0 13px rgba(43,229,255,.36);z-index:3}.game-left .hud-item:first-child{grid-column:auto}.game-left .hud-item{display:flex;flex-direction:column;min-width:0;padding:7px 3px 0;overflow:hidden;text-align:center;border:1px solid rgba(0,27,73,.78);border-radius:3px;background:rgba(5,126,164,.9);box-shadow:inset 0 0 10px rgba(38,226,255,.2)}.game-left .hud-item b{display:grid;place-items:center;min-height:42px;font-size:clamp(.9rem,1.35vw,1.2rem)}.game-left .hud-item small{margin:auto -3px 0;padding:4px 2px;background:rgba(6,37,91,.94);color:#fff;font-family:"Noto Kufi Arabic",sans-serif;font-size:clamp(.62rem,.9vw,.82rem);line-height:1.3;text-transform:none}.hud-progress{grid-column:1/-1;width:100%;height:11px;margin-top:1px;border:2px solid rgba(104,243,255,.62);border-radius:2px;background:rgba(4,43,91,.8);box-shadow:inset 0 0 7px rgba(0,10,56,.7)}.hud-progress span{background:linear-gradient(90deg,#24f0d1,#59efff 58%,#8a74ff)}.game-robot{position:absolute;left:50%;top:39%;width:min(400px,36vw);max-height:55vh;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 15px 13px rgba(0,0,20,.48)) drop-shadow(0 0 15px rgba(55,231,255,.35));animation:game-character-float 4s ease-in-out infinite}
.hud-time b,.hud-score b{font-family:"Noto Kufi Arabic",sans-serif;white-space:nowrap}.hud-time b{direction:rtl;grid-template-rows:auto auto;align-content:center;gap:0;line-height:1.05}.time-count{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:900}.time-unit{font-size:clamp(.72rem,1vw,.92rem);font-weight:700}.hud-score b{direction:ltr}.score-value{display:flex;direction:ltr;align-items:center;justify-content:center;gap:.25em}.hearts{display:grid!important;grid-template-columns:repeat(2,clamp(25px,2.15vw,34px));grid-template-rows:repeat(2,clamp(23px,2vw,32px));align-items:center;justify-content:center;gap:0 2px;min-height:58px;letter-spacing:0}.life-icon{display:block;width:clamp(25px,2.15vw,34px);height:clamp(25px,2.15vw,34px);object-fit:contain}.life-icon:nth-child(1){grid-column:1/3;grid-row:1;justify-self:center}.life-icon:nth-child(2){grid-column:1;grid-row:2}.life-icon:nth-child(3){grid-column:2;grid-row:2}
.result .stars-row{display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(90px,16vh,150px);margin:8px 0;color:#9aa8c7;font-size:1rem;letter-spacing:0}.result .stars-row img{display:block;width:auto;max-width:min(720px,88vw);height:clamp(90px,16vh,150px);object-fit:contain}.result .no-stars{font-weight:800;color:#9aa8c7}
.game-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.game-title-wrap{width:min(760px,100%);margin-bottom: 1rem;height:auto;aspect-ratio:4.7;overflow:hidden;flex:none}.game-title-wrap img{display:block;width:100%;height:auto;transform:translateY(-31.5%)}
.phaser-shell{position:relative;isolation:isolate;width:min(700px,75vh,100%);aspect-ratio:var(--board-aspect,1/1);margin:0 auto;border:3px solid rgb(105,244,255);border-radius:24px;background:rgba(105,244,255,.22);box-shadow:0 0 5px #d7ffff,0 0 14px #54f5ff,0 0 32px rgba(25,216,255,.82),inset 0 0 12px rgba(105,244,255,.38);backdrop-filter:blur(5px) saturate(115%);-webkit-backdrop-filter:blur(5px) saturate(115%);overflow:hidden;touch-action:none}.phaser-shell.phaser-level-1{width:min(640px,70vh,100%)}
#phaser-game{position:relative;z-index:1;overflow:hidden;border-radius:20px}#phaser-game,#phaser-game canvas{display:block;width:100%!important;height:100%!important;border-radius:20px}
.game-right{display:flex;flex-direction:column;align-items:center;padding-top:5vh}.game-instruction-mobile{display:none}.game-instruction-wrap{width:min(370px,100%);margin-top: -6px;height:clamp(180px,32vh,320px);overflow:hidden;z-index:3}.game-instruction-wrap img{display:block;width:118%;height:auto;transform:translate(-9.4%,-7.8%)}.game-boy{position:absolute;right:0;bottom:-7vh;width:min(340px,27vw);max-height:60vh;object-fit:contain;filter:drop-shadow(0 15px 14px rgba(0,0,20,.5))}.game-right:after{content:"";position:absolute;right:4%;bottom:1%;width:60%;height:8%;background:radial-gradient(ellipse,rgba(52,225,255,.38),transparent 68%);filter:blur(7px)}
@keyframes game-character-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-16px)}}
@media(max-width:1050px){.gameplay-layout{grid-template-columns:170px minmax(430px,1fr) 190px;gap:6px;padding:10px}.game-title-wrap{height:auto}.game-instruction-wrap{height:190px}.game-robot{width:210px;left:43%}.game-boy{width:230px;right:-18px}.phaser-shell{width:min(680px,72vh,100%)}.phaser-shell.phaser-level-1{width:min(600px,68vh,100%)}}
@media(max-width:760px){.trace-game{overflow:auto}.gameplay-layout{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-areas:"center" "left" "right";padding:8px}.game-center{grid-area:center}.game-left{grid-area:left;padding:0;min-height:180px}.game-right{grid-area:right;padding:0;min-height:230px}.game-left .hud{width:min(420px,96vw);grid-template-columns:repeat(3,1fr)}.game-left .hud-item:first-child{grid-column:auto}.game-robot{top:65px;left:12%;width:180px}.game-instruction-wrap{width:300px;height:180px;margin-left:auto}.game-boy{width:170px;left:0;right:auto}.phaser-shell{width:min(96vw,68vh)}.phaser-shell.phaser-level-1{width:min(90vw,64vh)}.game-title-wrap{height:auto}}
:root body.result-page{background-image:url("assets/rules-background.png");background-position:center;background-size:cover}.result-page .stars{display:none}.result-page .app{padding:0}.result-screen{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20vh 20px 11vh}.result-rocket{position:absolute;z-index:3;left:50%;top:1vh;width:clamp(115px,12vw,175px);height:clamp(175px,27vh,275px);transform:translateX(-50%);overflow:hidden;filter:drop-shadow(0 0 20px rgba(79,232,255,.58));animation:result-rocket-float 3.8s ease-in-out infinite}.result-rocket img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;-webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%)}.result-panel{position:relative;width:min(1050px,90vw);aspect-ratio:2.05;}.result-panel-image{position:absolute;left:50%;top:50%;display:block;width:105%;height:auto;max-width:none;transform:translate(-50%,-50%)}.result-panel-content{position:absolute;z-index:2;inset:55% 8% 10%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.result-panel .stars-row{display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(70px,13vh,125px);margin:0;color:#29476d;font-size:1rem;letter-spacing:0}.result-panel .stars-row img{display:block;width:auto;max-width:min(650px,67vw);height:clamp(70px,13vh,125px);object-fit:contain}.result-panel .no-stars{font-weight:900;color:#29476d}.result-actions{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,42px);width:100%; padding-top: 8vw;}.result-image-btn{position:relative;width:min(330px,32vw);aspect-ratio:3.05;overflow:hidden;padding:0;border:0;background:transparent;cursor:pointer;transition:transform .18s ease,filter .18s ease}.result-image-btn>img{position:absolute;left:50%;top:50%;display:block;width:104%;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none}.result-btn-icon{position:absolute;z-index:2;right:8.5%;top:50%;display:grid;place-items:center;width:clamp(38px,4vw,56px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:linear-gradient(145deg,#ef2b71,#b6004e);box-shadow:0 0 13px rgba(218,0,88,.42),inset 0 0 7px rgba(255,255,255,.28);color:#fff;font:900 clamp(1.25rem,2.4vw,2rem)/1 Nunito,sans-serif}.result-image-btn:hover{transform:translateY(-4px);filter:brightness(1.08) drop-shadow(0 0 12px rgba(73,226,255,.42))}.result-image-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:18px}.result-screen>.loading-unit{left:50%;bottom:3vh;transform:translateX(-50%)}@keyframes result-rocket-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-12px)}}@media(prefers-reduced-motion:reduce){.result-rocket{animation:none}}
.result-page .loading-unit::before{content:none}.result-rocket{top:3vh;padding-block:8px}
@media(min-width:701px){.result-panel{width:min(1050px,46vw); margin-top: -4rem;}.result-image-btn{width:min(250px,22vw)}.result-btn-icon{width:clamp(30px,3vw,44px);font-size:clamp(1rem,1.8vw,1.5rem)}}
@media(max-width:700px){.result-screen{padding:16vh 8px 12vh}.result-rocket{top:2vh;width:100px;height:155px;padding-block:6px}.result-panel{width:92vw;}.result-panel-content{inset:52% 5% 8%}.result-panel .stars-row,.result-panel .stars-row img{height:68px;min-height:68px}.result-actions{gap:8px}.result-image-btn{width:36vw}.result-btn-icon{width:28px;font-size:.9rem}.result-screen>.loading-unit{bottom:2vh}}
@media(max-width:680px){.levels-screen{overflow:auto}.levels-content{position:relative;grid-template-columns:1fr;width:90vw;min-height:100vh;padding:90px 0 125px}.level-menu{gap:24px}.level-choice{grid-template-columns:minmax(0,1fr) 58px;gap:12px}.level-choice-label{min-height:64px;padding:9px 18px;font-size:1.35rem}.level-choice-num{width:58px;font-size:1.65rem}.levels-ufo-slot{position:absolute;z-index:1;right:-28vw;bottom:-4vh;display:block;width:105vw;height:auto;pointer-events:none}.levels-ufo-slot img{width:100%;max-width:none}.level-choice-art{aspect-ratio: unset;}.level-choice-image{position: relative; width: 100%; transform: unset; max-width: 400px; left: unset}}
@media(max-width:760px){.trace-game{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;min-height:0;padding:0;overflow:hidden;overscroll-behavior:none;background-image:linear-gradient(rgba(2,10,54,.08),rgba(2,10,54,.16)),url("assets/game-background-mobile.png");background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}.gameplay-layout{display:block;width:100%;height:100%;max-height:100%;min-height:0;padding:8px 12px 140px;overflow:hidden}.game-center{position:relative;z-index:2;width:100%;height:100%;max-height:100%;padding:0 0 8px;overflow:hidden}.game-title-wrap{margin-bottom:2px}.game-instruction-mobile{display:block;flex:none;width:min(260px,66vw);aspect-ratio:1.76;margin:0 auto 1rem;overflow:hidden}.game-instruction-mobile img{display:block;width:118%;height:auto;transform:translate(-9.4%,-7.8%)}.phaser-shell{width:min(calc(100vw - 24px),calc(119.3dvh - 447px));max-width:none;max-height:calc(100dvh - 375px);padding:5px;border-radius:18px}.phaser-shell.phaser-level-1{width:min(calc(100vw - 24px),calc(100dvh - 375px))}.game-left{position:static;min-height:0}.game-right{display:contents}.game-instruction-wrap,.game-right:after{display:none}.game-robot,.game-boy{display:block;position:fixed;z-index:1;top:auto;bottom:-35px;width:auto;height:min(43vh,330px);max-height:none;object-fit:contain;pointer-events:none;animation:none;filter:drop-shadow(0 10px 14px rgba(0,0,20,.5))}.game-robot{left:auto;right:-28px;transform:none}.game-boy{left:-28px;right:auto}.game-left .hud{position:fixed;z-index:100;left:50%;bottom:0;width:min(430px,100vw);margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));transform:translateX(-50%);border-radius:12px 12px 0 0;box-shadow:0 -5px 18px rgba(25,216,255,.42),inset 0 0 15px rgba(67,226,255,.28)}#phaser-game,#phaser-game canvas{border-radius:12px}}
@media(max-width:760px){.game-robot,.game-boy{height:min(47.3vh,363px)}.game-robot{left:-28px;right:auto}.game-boy{left:auto;right:-28px}}
@media(max-width:760px){.toast{z-index:120;bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);text-align:center}.toast.show{transform:translateX(-50%) translateY(0)}}
@media(min-width:701px){.result-panel .stars-row{min-height:clamp(45px,8vh,80px)}.result-panel .stars-row img{max-width:min(440px,42vw);height:clamp(45px,12vh,100px)}}
@media(max-width:700px){.result-panel .stars-row,.result-panel .stars-row img{height:70px;min-height:48px}.result-panel .stars-row img{max-width:65vw}}
@media(min-width:701px){.result-btn-icon.home-icon,.result-btn-icon.next-icon{width:clamp(24px,2.4vw,35px);font-size:clamp(.8rem,1.4vw,1.15rem)}}
@media(max-width:700px){.result-btn-icon.home-icon,.result-btn-icon.next-icon{width:23px;font-size:.72rem}}
@media(max-width:700px){.result-rocket{top:6vh;width:200px;height:auto}}
@media(max-width:700px){.result-actions{padding-top:16vw}}