*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#102e35;color:#071b60;font-family:'Arial Rounded MT Bold','Trebuchet MS',Verdana,sans-serif;font-weight:900;display:grid;place-items:center}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible{outline:4px solid #ff5cb3;outline-offset:4px}button:disabled{cursor:default}#scene{position:relative;width:min(100vw,calc(100svh * 2048 / 1149));aspect-ratio:2048/1149;background-size:100% 100%;background-repeat:no-repeat;container-type:inline-size;overflow:hidden}header{position:absolute;inset:0;pointer-events:none}header>*{pointer-events:auto;position:absolute}.pill{height:8%;top:8%;border:clamp(2px,.23cqw,5px) solid #072962;border-radius:100px;background:linear-gradient(#fff,#fffdf4 65%,#ffe4bc);box-shadow:0 .35cqw .1cqw #25466d55;display:flex;align-items:center;justify-content:center;font-size:2.65cqw;letter-spacing:-.07cqw;text-shadow:.08cqw .08cqw .06cqw #15216766}.level{left:19.7%;width:17.8%}.timer{left:40%;width:15.2%;padding-left:4.6%;}.coins{left:58.3%;width:15.3%;padding-left:4.8%}.pill img{position:absolute;left:-2%;top:-16%;height:130%;width:auto;border-radius:50%;clip-path:circle(48%)}.icon{border:0;background:transparent;padding:0;left:8.4%;top:6.3%;width:8.4%;height:13.6%;clip-path:inset(3% 3% 3% 3% round 27%)}.icon img{height:100%;width:100%;object-fit:fill}.arena{position:absolute;left:29%;top:20.3%;width:40.2%;height:64.2%;display:grid;place-items:center}#grid{display:grid;grid-template-columns:repeat(3,1fr);width:75%;gap:1%;align-content:center;justify-content:center}#grid.reference-grid{width:100%;height:100%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1%}.card{border:0;background:none;padding:0;position:relative;aspect-ratio:1.10;perspective:900px;transition:opacity .25s,transform .25s;min-width:0}.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .32s}.card.open .flip{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;clip-path:url(#cardShape)}.face img.frame{position:absolute;max-width:none}.back .frame{left:-3.2%;top:-6.9%;width:108.4%;height:113.7%}.front{transform:rotateY(180deg)}.front .frame{left:-7.5%;top:-5.3%;width:114.5%;height:110.2%}.object{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain}.card.matched{opacity:0;pointer-events:none;transform:scale(.8)}#mascotStage{position:absolute;left:68.4%;top:33.5%;width:20%;height:56%;pointer-events:none}.mascot{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom}.mascot[hidden]{display:none}#mascotStage.jumping{transform:translateY(calc(var(--jump-y,0) * 1%));}.helps{position:absolute;left:87.5%;top:21.5%;width:10.8%;height:58.2%;display:flex;flex-direction:column;gap:4.5%}.helps button{position:relative;width:100%;height:30.4%;border:0;padding:0;background:none;border-radius:24%;filter:drop-shadow(0 .15cqw .06cqw #123c5455)}.help-art{width:100%;height:100%;object-fit:fill;clip-path:inset(1% 1% 1% 1% round 22%)}.badge{position:absolute;right:-2%;top:-10%;border:.2cqw solid #9b0d2a;background:radial-gradient(at 30% 20%,#ff8490,#ff3049 60%,#db0a2b);border-radius:50%;height:32%;aspect-ratio:1;display:grid;place-items:center;color:#fff;font-size:2.2cqw;text-shadow:.1cqw .1cqw #851e34;box-shadow:inset .1cqw .1cqw .1cqw #fff}.helps small{position:absolute;left:10%;bottom:1%;width:80%;font-size:.65cqw;color:#78521e;background:#fff6e4d9;border-radius:10px;text-align:center}.helps button:disabled .help-art{filter:saturate(.75)}.helps button.used .help-art{filter:grayscale(.8);opacity:.7}#message{position:absolute;bottom:104%;left:0;width:100%;text-align:center;font-size:1.15cqw;line-height:1.4;color:#092864;text-shadow:0 1px #fff;background:#fff5dce6;border-radius:40px;padding:.45cqw;opacity:0}#message.notice{opacity:1}.progress{position:absolute;bottom:-6%;left:20%;width:60%;text-align:center;font-size:.8cqw;display:flex;justify-content:center;gap:1cqw;background:#fff7e3cd;border-radius:50px;padding:.3cqw}#enemyReference{position:absolute;left:1.7%;top:38%;width:24%;height:36.5%;pointer-events:none}#enemyReference img{width:100%;height:100%;object-fit:fill}#overlay{position:fixed;inset:0;background:#073c5266;display:flex;align-items:center;justify-content:center;z-index:10;padding:18px;backdrop-filter:blur(4px)}#overlay[hidden]{display:none}.dialog{background:#fff8e5;border:5px solid #ef982d;outline:3px solid #075264;border-radius:36px;padding:25px;max-width:460px;text-align:center;box-shadow:0 10px 0 #07526455}.dialog h1{margin:0 0 12px;font-size:30px;color:#b95506}.dialog p{font-size:16px;line-height:1.5;margin:12px 0}.dialog button{width:100%;padding:10px 20px;border:3px solid #a85a10;border-radius:24px;background:linear-gradient(#ffc647,#ff9825);color:#713506;box-shadow:0 4px 0 #a75f2b44;margin-top:10px;font-size:18px;min-height:44px}.dialog button.secondary{background:#d9f5f1;border-color:#208780;color:#075264}.dialog-sound{max-width:140px!important;padding:4px 10px!important;background:#ddf4f5!important;color:#075264!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px!important}.dialog-sound img{width:28px;height:28px}.stars{display:flex;justify-content:center;gap:5px}.stars img{width:70px;height:70px;object-fit:contain}.dim{filter:grayscale(1);opacity:.4}.note{font-size:12px!important;font-weight:400}#sound[aria-pressed=true]{opacity:.6}#scene.reference #message,#scene.reference .progress,#scene.reference .helps small{display:none} @media(orientation:portrait){body:before{content:'Putar layar untuk tampilan landscape seperti referensi';position:absolute;top:12%;font-size:14px;color:#fff;text-align:center;padding:0 20px;max-width:100%}}@media(max-height:500px){.dialog{padding:14px;max-width:430px}.dialog h1{font-size:24px;margin-bottom:4px}.dialog p{font-size:13px;margin:6px 0}.dialog button{font-size:15px;padding:5px 15px;min-height:36px;margin-top:7px}.dialog-sound img{width:22px;height:22px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}#mascotStage.jumping{transform:none!important}}
@media(orientation:portrait){body:before{content:none}#scene{width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16}.icon{left:3.4%;top:3.3%;width:14.5%;height:8%}.pill{top:4.3%;height:5.5%;font-size:4.2cqw;border-width:.5cqw;box-shadow:0 .55cqw .2cqw #25466d55}.level{left:19.7%;width:24.2%}.timer{left:46.5%;width:24.7%;padding-left:7%}.coins{left:73%;width:23.6%;padding-left:7%}.pill img{top:-10%;height:120%;left:-2%}.arena{left:8%;top:27.3%;width:84%;height:43.5%}#grid{width:75%;grid-template-columns:repeat(3,1fr);gap:1.2%}#grid.reference-grid{width:100%;height:100%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1.2%}#mascotStage{left:64%;top:68.5%;width:36%;height:30.5%;z-index:3}.helps{left:3%;top:74.9%;width:61%;height:9.8%;flex-direction:row;gap:2.3%}.helps button{width:31.8%;height:100%;filter:drop-shadow(0 .4cqw .1cqw #123c5455)}.badge{font-size:5.2cqw;height:36%;border-width:.4cqw;top:-12%;right:-2%}.helps small{font-size:1.4cqw;bottom:0}.progress{font-size:2cqw;bottom:-5%;padding:.5cqw}#message{font-size:2.3cqw;bottom:102%;padding:.6cqw}#enemyReference{left:30%;top:12.2%;width:40%;height:13%;}#enemyReference img{object-fit:contain}}
.helps small{display:none}.progress{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
@media(orientation:landscape){#mascotStage{left:68.2%;top:32.5%;width:21.6%;height:57.7%}}
#mascotJump{height:108%;top:-8%}
#scene[hidden],#mapScene[hidden],#enemyActor[hidden],#enemyNotice[hidden]{display:none!important}#grid{grid-template-columns:repeat(var(--cols,3),1fr)}#grid.large-grid,#grid.medium-grid{width:var(--grid-width,100%);max-width:100%;gap:var(--grid-gap,1%);height:auto;grid-template-columns:repeat(var(--cols,4),1fr);grid-template-rows:none}.cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:5;display:none}.card.covered .cover-art{display:block}.card.covered .flip{opacity:.1}.card{will-change:transform}#enemyActor{position:absolute;left:1.5%;top:38%;width:24%;height:35%;padding:0;border:0;background:none;z-index:5}#enemyActor img{width:100%;height:100%;object-fit:contain}#enemyHp{position:absolute;left:40%;bottom:2%;min-width:20%;border:3px solid #fff;border-radius:24px;background:#c327ad;color:#fff;font-size:2.5cqw;box-shadow:0 3px 0 #52248a}#enemyNotice{position:absolute;left:2%;top:27%;width:25%;padding:1%;font-size:1.35cqw;text-align:center;border:3px solid #fff;border-radius:24px;background:#fa344b;color:white;z-index:6}#mapScene{position:relative;width:min(100vw,calc(100svh * 2048 / 1149));aspect-ratio:2048/1149;container-type:inline-size;overflow:hidden;background:#29c2da}#mapCanvas{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}#mapNodes{position:absolute;inset:0}.map-node{position:absolute;width:7.8%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:none;padding:0;z-index:2;transition:filter .2s}.map-node>img{width:100%;height:100%;object-fit:contain}.map-number{position:absolute;left:25%;right:25%;top:29%;font-size:2.3cqw;color:#9b3c03;text-align:center;text-shadow:1px 1px white}.map-stars{position:absolute;left:17%;right:17%;top:73%;display:flex;justify-content:center}.map-stars img{width:33.333%;height:auto}.map-node.locked>img{filter:grayscale(1);opacity:.9}.map-node.locked .map-number{color:#38454d}.map-node.next-level{filter:drop-shadow(0 0 .35cqw #fff) drop-shadow(0 0 .25cqw #ffd630)}.lock-mark{position:absolute;right:9%;top:10%;width:25%;height:25%;fill:#fff;stroke:#334952;stroke-width:1}.map-header{position:absolute;left:3%;right:3%;top:4%;height:10%;display:flex;align-items:center;justify-content:space-between;pointer-events:auto}.map-header>*{position:static}.map-header button,.map-footer button{min-width:44px;min-height:44px;border:3px solid #067f9d;border-radius:20px;background:linear-gradient(#fff,#46d6f6);color:#063457;padding:.35cqw 1.1cqw;box-shadow:0 .2cqw #046f86}.map-header button{font-size:3.6cqw;line-height:1}.map-header h1{margin:0;border:3px solid #cf770c;border-radius:30px;padding:.3cqw 2cqw;background:linear-gradient(#fff29d,#ffb421);font-size:2.9cqw;text-shadow:1px 1px white;color:#743b03}.map-wallet{height:100%;display:flex;align-items:center;gap:.7cqw;background:#fffbe8;border:3px solid #075f88;border-radius:50px;padding:0 1.3cqw 0 .5cqw;font-size:2.8cqw}.map-wallet img{height:100%;max-width:6cqw;object-fit:contain;clip-path:circle(48%)}.map-footer{position:absolute;bottom:3%;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:1cqw;font-size:1.35cqw}.map-footer>span{background:#fffbe8e8;border-radius:25px;padding:.5cqw 1.2cqw}.map-footer #mapContinue{background:linear-gradient(#ffef8c,#ff9b23);border-color:#cb7107;color:#743b03;font-size:1.55cqw}.map-footer #mapSound{font-size:1.2cqw}#mapStorage{position:absolute;bottom:0;margin:0;width:100%;text-align:center;font-size:12px;background:#fff4ca}
@media(orientation:portrait){#mapScene{width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16}#mapCanvas{inset:11% 4% 10%}.map-node{width:17%}.map-number{font-size:5.4cqw}.map-header{top:2.5%;height:6%;left:4%;right:4%}.map-header h1{font-size:5cqw;padding:1cqw 2cqw;border-width:2px}.map-header button{font-size:8cqw;padding:0 1.5cqw;border-width:2px;border-radius:15px}.map-wallet{font-size:5cqw;padding:0 2cqw 0 1cqw;border-width:2px}.map-wallet img{max-width:9cqw}.map-footer{bottom:3%;left:3%;right:3%;gap:1cqw;font-size:2.7cqw}.map-footer button{border-width:2px;border-radius:14px;padding:1cqw 2cqw}.map-footer #mapContinue{font-size:3.1cqw}.map-footer #mapSound{font-size:2.7cqw}#enemyActor{left:30%;top:12.1%;width:40%;height:14.3%}#enemyHp{bottom:2%;font-size:4cqw;border-width:2px;left:42%;min-width:16%}#enemyNotice{left:17%;top:23%;width:66%;padding:.5%;font-size:2.8cqw;border-width:2px}.card{min-height:0}#grid.large-grid,#grid.medium-grid{grid-template-columns:repeat(var(--cols,4),1fr)}}
@media(prefers-reduced-motion:reduce){.map-node{transition:none}}
/* Swap position follows active game time, with no independent CSS motion. */
.card{transition:opacity .25s}.card:disabled{cursor:default}
@media(orientation:portrait){#enemyNotice{top:10.5%}#scene.dense-board .arena{top:24.1%;height:49%}#scene.dense-board #mascotStage{left:72%;top:76.5%;width:27%;height:22.5%}#scene.dense-board #enemyActor{height:11%}}
.map-stars{top:83%;left:18%;right:18%;background:#fffbe8ed;border-radius:20px;padding:1%;border:1px solid #af7927}.map-node.locked .map-stars{display:none}
body>svg{position:absolute;width:0;height:0}#homeScene,#menuScene{position:relative;width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;background:#52cfdc}#homeScene[hidden],#menuScene[hidden]{display:none!important}#homePoster,#homeVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}#homeVideo[hidden]{display:none}#homeMain{position:absolute;left:46.7%;top:54%;width:33.3%;height:16.8%;min-height:44px;border:0;background:transparent;border-radius:100px;padding:0;color:#fff;font-size:5cqw;letter-spacing:.1cqw;text-shadow:0 .15cqw #aa2909,.1cqw 0 #a92909,-.1cqw 0 #a92909,0 -.1cqw #a92909}#homeMain:hover{text-shadow:0 .2cqw #aa2909,.15cqw 0 #a92909,-.15cqw 0 #a92909,0 -.15cqw #a92909}.screen-sound,#menuBack{position:absolute;top:4%;right:3%;width:5.3%;aspect-ratio:1;min-width:44px;min-height:44px;border:3px solid #08779a;border-radius:22%;padding:0;background:linear-gradient(#fff,#4bddf6);color:#093a67;font-size:3cqw;box-shadow:0 .2cqw #045b76;z-index:3}#menuBack{left:3%;right:auto}.home-version{position:absolute;bottom:2%;right:3%;font-size:.9cqw;padding:.15cqw .5cqw;border-radius:10px;background:#fff8dcad;color:#075471}#menuScene{background-size:100% 100%;background-repeat:no-repeat}.menu-logo{position:absolute;left:49%;top:7%;width:43%;height:23%;object-fit:contain}.menu-mascot{position:absolute;left:6%;top:24%;width:32%;height:69%;object-fit:contain;object-position:center bottom;pointer-events:none}.menu-buttons{position:absolute;left:52%;top:32%;width:37%;height:52%;display:grid;grid-template-rows:repeat(4,minmax(44px,1fr));gap:3%}.menu-buttons button{min-height:44px;border:3px solid #087994;outline:2px solid #fffbe6;border-radius:100px;background:linear-gradient(#fffef5,#fff3d6 65%,#ffdfad);box-shadow:0 .35cqw .04cqw #096f8999;color:#084467;padding:.3cqw 1cqw;font-size:2.1cqw;letter-spacing:.04cqw}.menu-buttons button.primary{background:linear-gradient(#fff69b,#ffbe2f 40%,#ff8620);border-color:#b85710;color:#fff;text-shadow:0 .13cqw #a1350a,.08cqw 0 #a1350a,-.08cqw 0 #a1350a; font-size:2.65cqw}.menu-buttons button:hover{filter:brightness(1.06)}#menuProgress{position:absolute;left:45%;top:88%;width:50%;margin:0;text-align:center;font-size:1.25cqw;color:#073553;text-shadow:0 1px white}.settings-form{text-align:left;font-size:16px;display:grid;gap:14px}.settings-form>label:first-child{display:flex;justify-content:space-between;gap:10px}.settings-form input[type=range]{width:100%;accent-color:#ed9228;min-height:44px}.toggle-label{display:flex;align-items:center;gap:10px;min-height:44px}.toggle-label input{width:24px;height:24px;accent-color:#16a8c5}.guide-pair{height:90px;display:grid;grid-template-columns:repeat(2,90px);justify-content:center;gap:12px;position:relative}.guide-pair img{width:90px;height:90px;object-fit:contain;grid-row:1}.guide-pair img:nth-child(1),.guide-pair img:nth-child(2){grid-column:1}.guide-pair img:nth-child(3),.guide-pair img:nth-child(4){grid-column:2}.guide-pair img:nth-child(2),.guide-pair img:nth-child(4){width:58px;height:58px;place-self:center}#overlay{overflow:auto}.dialog{max-height:94svh;overflow:auto}
@media(orientation:portrait){#homeScene,#menuScene{width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16}#homeMain{left:18%;top:71.4%;width:65%;height:11.8%;font-size:9cqw}.screen-sound,#menuBack{top:3%;width:12%;font-size:7cqw;right:4%;border-width:2px}.home-version{bottom:2%;font-size:2.1cqw;right:4%}.menu-logo{left:17%;top:8%;width:66%;height:19%}.menu-mascot{left:2%;top:32%;width:41%;height:43%}.menu-buttons{left:44%;top:32%;width:51%;height:40%;gap:4%}.menu-buttons button{font-size:3.8cqw;padding:1cqw;border-width:2px;outline-width:1px;box-shadow:0 .7cqw #096f8999}.menu-buttons button.primary{font-size:4.7cqw}#menuProgress{left:6%;top:81%;width:88%;font-size:3.3cqw;line-height:1.6}}
@media(orientation:landscape) and (max-height:430px){.menu-buttons{left:45%;top:44%;width:51%;height:37%;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(44px,1fr));gap:8% 5%}.menu-buttons button{font-size:1.95cqw}.menu-buttons button.primary{font-size:2.5cqw}.menu-logo{left:45%;width:51%;top:7%;height:30%}#menuProgress{left:45%;top:86%;width:51%;font-size:1.6cqw}.menu-mascot{top:21%;height:75%}.home-version{font-size:1.35cqw}.guide-pair{height:55px;grid-template-columns:repeat(2,55px)}.guide-pair img{width:55px;height:55px}.guide-pair img:nth-child(2),.guide-pair img:nth-child(4){width:38px;height:38px}}

/* Glossy artwork from the approved reference; mute slash remains semantic UI. */
.art-icon{position:relative!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:44px;min-height:44px;line-height:0;overflow:hidden;border-radius:23%!important}
.art-icon img{display:block;width:100%;height:100%;object-fit:contain}
.art-icon.muted::after{content:"";position:absolute;left:16%;top:48%;width:68%;height:6%;min-height:3px;background:#e83c51;border:1px solid white;border-radius:99px;transform:rotate(-42deg);box-shadow:0 1px 2px #06245a}
#mapSound{width:clamp(44px,5.5cqw,72px);aspect-ratio:1.14}
.dialog-sound.art-icon{width:52px;height:46px;margin:8px auto}
.settings-form input[type=range]{accent-color:#08bada;width:100%}

.settings-form>label:not(.toggle-label){display:flex;justify-content:space-between;gap:10px}

/* Shared Khaira UI: approved PNG artwork, rounded typography, one button system. */

:root{--button-orange:none;--button-blue:none;--ink:#092967;--cream:#fff8e5;--orange:#ff9d20;--red:#bd260c}
body,button,input,output{font-family:KhairaRounded,'Arial Rounded MT Bold',sans-serif;font-weight:400}
button{user-select:none;-webkit-tap-highlight-color:transparent}
.capsule,.dialog #actions button,.menu-buttons button,#homeMain,.map-footer #mapContinue{
 background:var(--button-orange) center/100% 100% no-repeat!important;border:0!important;outline:0;box-shadow:none!important;border-radius:999px!important;
 color:white!important;-webkit-text-stroke:1.5px var(--red);paint-order:stroke fill;text-shadow:0 2px 0 #8e220b!important;letter-spacing:.03em;padding:12px 24px;min-height:48px;
}
.capsule:hover,.capsule:focus-visible,.capsule:active,.dialog #actions button:hover,.dialog #actions button:focus-visible,.dialog #actions button:active,.menu-buttons button:hover,.menu-buttons button:focus-visible,.menu-buttons button:active,#homeMain:hover,#homeMain:focus-visible,.map-footer #mapContinue:hover,.map-footer #mapContinue:focus-visible{
 background-image:var(--button-blue)!important;-webkit-text-stroke-color:#064b9d;text-shadow:0 2px 0 #07509d!important;filter:none!important;
}
button:focus-visible{outline:3px solid white!important;outline-offset:3px;box-shadow:0 0 0 6px #078ce4!important}
button[hidden]{display:none!important}
#pause{clip-path:none;border-radius:28%}.icon img{object-fit:contain}
.dialog #dialogSettings{margin-top:10px;min-height:44px;font-size:18px;max-width:150px}
.art-icon{border:0!important;border-radius:28%!important;overflow:visible;background:transparent!important;box-shadow:none!important}
.art-icon img{object-fit:contain}
.art-icon:hover img,.art-icon:focus-visible img{filter:brightness(1.1)}
.screen-sound,#menuBack{position:absolute!important;top:4%;width:5.5%;height:auto;aspect-ratio:1;z-index:4}
.screen-sound{right:3%}#menuBack{left:3%;right:auto}
#homeMain .button-label{width:70%;height:67%;object-fit:contain;pointer-events:none}
#menuPoster,#menuVideo,#completionPoster,#completionVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#menuVideo[hidden],#completionVideo[hidden]{display:none}
#menuScene{background-image:none!important}.menu-logo,.menu-mascot{display:none}
.menu-buttons{left:51%;top:32%;width:37%;height:50%;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:3%;z-index:2}
.menu-buttons button{position:relative;width:100%;height:100%;padding:0!important;min-height:44px;outline:0;font-size:2.3cqw}
.button-label{width:78%;height:67%;object-fit:contain;pointer-events:none;vertical-align:middle}
#menuPlay .button-label{width:47%;height:67%}
#menuProgress{top:86%;left:51%;width:37%;font-size:1.45cqw;color:var(--ink);text-shadow:1px 1px white,-1px -1px white;z-index:2}
.small-settings{position:absolute;right:10%;top:4%;font-size:1.4cqw;min-height:44px;z-index:4;min-width:92px;padding:8px 20px!important}
#scene .game-nav{position:absolute;right:3%;bottom:2%;display:flex;align-items:center;gap:1cqw;height:8%;z-index:7}
.game-nav .art-icon{width:5cqw;height:5cqw;min-width:44px;min-height:44px;max-height:100%}
.game-nav .capsule{font-size:1.5cqw;min-width:94px;padding:8px 18px}
.dialog{border:5px solid #ed9a2a;outline:3px solid #b55b10;border-radius:36px;background:linear-gradient(#fffdf2,#fff4d8);color:var(--ink);width:min(94vw,460px);box-shadow:0 8px 0 #91410866;padding:24px}
.dialog h1{font-family:KhairaRounded,sans-serif;color:white;-webkit-text-stroke:2px var(--red);paint-order:stroke fill;text-shadow:0 3px #8e220b;font-size:30px;line-height:1.15}
.dialog p{font-size:18px;line-height:1.4}.dialog .note{font-size:14px!important;font-weight:400}
.dialog #actions{display:grid;gap:8px}.dialog #actions button{font-size:20px;margin:0;min-height:52px;padding:13px 28px;text-transform:uppercase}
.dialog-sound.art-icon{width:48px;height:48px;margin:4px auto 12px;min-width:44px;max-width:none!important}
.settings-form{font-size:20px;gap:8px}.settings-form input[type=range]{accent-color:#ff9d20;min-height:44px}
.map-header h1{color:white;-webkit-text-stroke:1.5px var(--red);paint-order:stroke fill;text-shadow:0 2px #8e220b;background:var(--button-orange) center/100% 100%;border:0;outline:0;border-radius:999px;padding:1cqw 2.5cqw}
.map-footer #mapSettings{font-size:1.5cqw;padding:8px 20px;min-width:92px;border:0;box-shadow:none}
.map-header .art-icon{width:5.5cqw;height:5.5cqw;min-width:44px;min-height:44px}
.map-number{font-family:KhairaRounded,sans-serif;font-weight:400}.map-node .lock-mark{position:absolute;width:27%;height:27%;right:8%;top:8%;object-fit:contain}
#completionScene{position:relative;width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;background:#72c77b}
#completionScene[hidden]{display:none!important}
#completionReplay,#completionMenu{position:absolute;left:49.4%;width:35.5%;height:12.8%;font-size:3.4cqw;padding:0;min-height:44px;z-index:3}
#completionReplay{top:64.1%}#completionMenu{top:77.4%}
#completionHome{position:absolute!important;left:2%;top:3%;width:5.5%;aspect-ratio:1;z-index:4}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(orientation:portrait){
 .screen-sound,#menuBack{top:3%;width:12%;right:4%}#menuBack{left:4%;right:auto}
 .small-settings{right:19%;top:3%;font-size:3.4cqw;min-width:78px;padding:8px 17px!important}
 .menu-buttons{left:43%;top:32%;width:53%;height:40%;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:4%}
 #menuProgress{top:82%;left:6%;width:88%;font-size:3.4cqw;line-height:1.3}
 #scene .game-nav{bottom:2%;left:4%;right:auto;height:7%;gap:2cqw}
 .game-nav .art-icon{width:10cqw;height:10cqw}.game-nav .capsule{font-size:3.5cqw;min-width:88px;min-height:44px}
 .map-footer{flex-wrap:wrap;justify-content:center;gap:2cqw;bottom:2%}.map-footer>span{width:100%;text-align:center;font-size:3cqw}
 .map-footer #mapSettings{font-size:3.2cqw;min-width:78px;padding:10px 18px}.map-footer #mapContinue{font-size:3.4cqw;padding:10px 20px;min-height:44px}
 .map-header .art-icon{width:11cqw;height:11cqw}.map-header h1{font-size:5cqw;padding:2cqw 4cqw}
 #mapCanvas{inset:12% 4% 16%}
 #completionScene{width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16}
 #completionReplay,#completionMenu{left:16.3%;width:67.3%;height:7.7%;font-size:6.3cqw}
 #completionReplay{top:76.1%}#completionMenu{top:84.1%}
 #completionHome{left:3%;top:3%;width:12%}
}
@media(max-height:450px){.dialog{padding:12px 20px}.dialog h1{font-size:25px}.dialog p{font-size:15px;margin:8px 0}.dialog #actions button{min-height:44px;font-size:18px;padding:9px 22px}.settings-form{font-size:16px;gap:4px}}

/* Icon-only settings next to Home; speaker opens a transient volume slider. */
.settings-icon img{width:100%;height:100%;object-fit:contain}
#mapSettings{position:absolute;left:10%;top:0;width:5.5cqw;height:5.5cqw;min-width:44px;min-height:44px;padding:0!important;z-index:5}
#homeSettings,#menuQuickSettings,#completionSettings{position:absolute;left:10%;top:4%;width:5.5%;height:auto;aspect-ratio:1;padding:0!important;z-index:5}
#homeSettings{left:3%}#completionSettings{top:3%;left:9%}
#dialogSettings.art-icon{width:48px;height:48px;padding:0;max-width:none;margin:0 auto}
#volumePopover{position:fixed;display:flex;align-items:center;gap:9px;padding:4px 12px;border:3px solid #07509d;border-radius:999px;background:#fff8e5;color:#092967;box-shadow:0 3px 0 #07509d55;z-index:100;font-size:16px;box-sizing:border-box}
#volumePopover[hidden]{display:none!important}#quickVolume{width:100%;min-width:0;min-height:44px;accent-color:#00b7ed;touch-action:pan-x}#quickVolumeValue{min-width:28px;text-align:center}
@media(orientation:portrait){#mapSettings{left:18%;width:11cqw;height:11cqw}#homeSettings,#menuQuickSettings,#completionSettings{left:19%;top:3%;width:12%}#homeSettings{left:4%}#completionSettings{left:18%}}

#enemyActor{touch-action:manipulation}#enemyActor>img{pointer-events:none}#enemyActor[data-phase=warning]>img{animation:cloudThreat .65s ease-in-out infinite alternate}#enemyActor[data-phase=cover]>img{animation:cloudThreat .4s ease-in-out infinite alternate}.card.covered .cover-art{pointer-events:none}
@keyframes cloudThreat{from{transform:translateY(-3px) scale(1)}to{transform:translateY(4px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){#enemyActor>img{animation:none!important}}
/* Nine-slice PNG: fixed round corners, stretch only straight edges/centre. */
:root{--ui-corner:20px}
.capsule,.dialog #actions button,.menu-buttons button,#homeMain,.map-footer #mapContinue,.map-header h1{
 background:none!important;border:0 solid transparent!important;border-image-source:var(--button-orange)!important;border-image-slice:190 fill!important;border-image-width:var(--ui-corner)!important;border-image-outset:0!important;border-image-repeat:stretch!important;border-radius:var(--ui-corner)!important;box-sizing:border-box;
}
.capsule:hover,.capsule:focus-visible,.capsule:active,.dialog #actions button:hover,.dialog #actions button:focus-visible,.dialog #actions button:active,.menu-buttons button:hover,.menu-buttons button:focus-visible,.menu-buttons button:active,#homeMain:hover,#homeMain:focus-visible,.map-footer #mapContinue:hover,.map-footer #mapContinue:focus-visible{
 background:none!important;border-image-source:var(--button-blue)!important;
}
.pill,.map-wallet,.progress,.map-footer>span,#message,#enemyNotice,#enemyHp,.dialog,#volumePopover{border-radius:var(--ui-corner)!important}

/* Khaira helper PNGs with readable, explicit per-use coin prices. */
.helps button{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:2px;border-radius:20px;filter:none;touch-action:manipulation}
.helps .help-art{width:100%;height:100%;object-fit:contain;clip-path:none;pointer-events:none}
.helps .help-name{font-size:clamp(11px,1.1cqw,20px);color:#092967;text-shadow:0 1px white;line-height:1.1;pointer-events:none}
.helps small{position:static;width:auto;background:#fff8e5;color:#092967;border-radius:8px;font-size:clamp(11px,1cqw,18px);line-height:1.2;padding:2px 5px;pointer-events:none}
.helps button:disabled .help-art{filter:grayscale(.6);opacity:.7}
@media(orientation:portrait){.helps .help-name{font-size:clamp(10px,2.6cqw,15px)}.helps small{font-size:clamp(10px,2.6cqw,15px)}}

/* Shared logo-derived palette and one live UI typeface. */
:root{--orange:#f2a354;--logo-orange-light:#f6be70;--logo-orange-dark:#de8049;--logo-blue:#77c4d8;--red:#a45231;--ink:#092967}
#homeScene *,#menuScene *,#scene *,#mapScene *,#completionScene *,#overlay *,#volumePopover *{font-family:KhairaRounded,sans-serif!important;font-weight:400!important;font-style:normal;font-synthesis:none;letter-spacing:.02em}
button .ui-label{display:block;pointer-events:none;line-height:1.1;font-size:inherit}
#homeMain .ui-label{font-size:4cqw}.menu-buttons .ui-label{font-size:2.25cqw}
.capsule,.dialog #actions button,.menu-buttons button,#homeMain,.map-footer #mapContinue,.map-header h1{position:relative;isolation:isolate;border-image:none!important;-webkit-text-stroke-color:var(--ink)!important;text-shadow:0 2px #092967!important}
.capsule::before,.dialog #actions button::before,.menu-buttons button::before,#homeMain::before,.map-footer #mapContinue::before,.map-header h1::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:0 solid transparent;border-image-source:var(--button-orange);border-image-slice:190 fill;border-image-width:20px;border-image-repeat:stretch;filter:saturate(.55) brightness(1.2)}
.capsule:hover::before,.capsule:focus-visible::before,.capsule:active::before,.dialog #actions button:hover::before,.dialog #actions button:focus-visible::before,.dialog #actions button:active::before,.menu-buttons button:hover::before,.menu-buttons button:focus-visible::before,.menu-buttons button:active::before,#homeMain:hover::before,#homeMain:focus-visible::before,.map-footer #mapContinue:hover::before,.map-footer #mapContinue:focus-visible::before{border-image-source:var(--button-blue);filter:saturate(.35) brightness(1.1)}
.dialog{border-color:#dc9955;outline-color:#aa673f;box-shadow:0 8px 0 #aa673f66}.dialog h1{-webkit-text-stroke-color:var(--ink);text-shadow:0 2px #092967}
.settings-form input[type=range]{accent-color:var(--orange)}#quickVolume{accent-color:var(--logo-blue)}
@media(orientation:portrait){#homeMain .ui-label{font-size:8cqw}.menu-buttons .ui-label{font-size:4.7cqw}}
/* Coin prices remain readable on the smallest supported game viewport. */
.helps .help-name,.helps small{font-size:clamp(14px,1.1cqw,20px)}
@media(orientation:portrait){.helps .help-name,.helps small{font-size:14px}}

/* Intro uses the orange box already drawn in the video, with a text-only hit target. */
#homeScene #homeMain,
#homeScene #homeMain:hover,
#homeScene #homeMain:active,
#homeScene #homeMain:focus-visible{
 position:absolute;display:grid;place-items:center;z-index:3;padding:0!important;
 background:transparent!important;border:0!important;border-image:none!important;box-shadow:none!important;filter:none!important;
}
#homeScene #homeMain::before,#homeScene #homeMain::after{content:none!important;display:none!important}