/* TAPAK-ASA: identity and animation layer for menus only. */
#bg{background-image:url(latar_petualangan.webp)}
#stage[data-page] #bg{background-image:url(latar_petualangan.webp)!important}
#stage[data-page="home"] #bg{background-image:url(latar_karakter.webp)!important;filter:saturate(.96);transform:translate(var(--pg-drift-x,0px),var(--pg-drift-y,0px)) scale(1.025);transform-origin:65% 50%;will-change:transform}
#stage[data-page="home"] #bgShade{background:linear-gradient(90deg,rgba(5,30,35,.70) 0%,rgba(8,37,41,.52) 43%,rgba(7,29,36,.08) 73%)}
.pg-icon{width:30px;height:30px;flex-shrink:0;display:inline-block;vertical-align:middle}
#home .left{left:88px;top:100px;width:870px;gap:18px;z-index:2}
.pg-brand-top{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.pg-brand-top>img{width:64px;height:64px;filter:drop-shadow(0 6px 14px #05282966)}
.pg-brand-top>div{display:flex;flex-direction:column;gap:5px}.pg-brand-top .eyebrow{font-size:15px;letter-spacing:.15em;color:#e9e4d1}
.pg-brand-top>div>span:last-child{font-size:19px;color:#accbc4}
#home .brand h1{font-size:144px;line-height:1;white-space:nowrap;position:relative;letter-spacing:-1.8px;color:#fff4da;text-shadow:0 5px 0 #0d3b3d66;width:max-content;margin:0 0 20px}
#home .brand h1>span{font-size:inherit;letter-spacing:-2px;color:#ffc858;display:inline-block}
#home .brand h1>i{font-style:normal;font-size:50px;color:#f4d589;position:absolute;right:-67px;top:24px;transform:rotate(12deg)}
#home .brand .tag{font-size:24px;line-height:1.5;color:#e1e9df;max-width:54ch;margin:0}
#home .chiprow{gap:10px}#home .chiprow>span{padding:7px 15px;font-size:17px;background:#214e4bc9;border:1px solid #78938b55;display:flex;gap:8px;align-items:center;backdrop-filter:blur(8px)}
#home .chiprow .pg-icon{width:20px;height:20px;color:#ffd27a}
#home .menu{width:870px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:132px 116px 116px;gap:14px;margin-top:4px}
#home .tile{padding:20px 22px;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;border:1px solid #79999055;background:linear-gradient(140deg,#204a4bf5,#123b41f5);border-radius:24px;box-shadow:0 7px 0 #052b3166;transition:transform .22s cubic-bezier(.2,.75,.2,1),border-color .22s,box-shadow .22s;isolation:isolate}
#home .tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,#a8d2b81a,transparent 70%);z-index:-1;pointer-events:none}
#home .tile:hover,#home .tile:focus-visible{transform:translateY(-5px);border-color:#e7bf75;box-shadow:0 12px 0 #052b3177}
#home .tile:active{transform:translateY(1px);box-shadow:0 3px 0 #052b3177}
#home .tile.play{grid-column:1 / -1;grid-row:auto;background:linear-gradient(112deg,#ef7951,#e66a46 70%,#d85c38);border-color:#ffb28e;box-shadow:0 7px 0 #9d422c;gap:18px;padding:18px 24px}
#home .tile.play:hover{box-shadow:0 12px 0 #9d422c}
#home .tile-icon{width:58px;height:58px;background:#6caa8526;border:1px solid #9bc4ae33;border-radius:18px;display:grid;place-items:center;flex-shrink:0;color:#f4d48d}
#home .tile-icon>.pg-icon{width:31px;height:31px}
#home .tile-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
#home .tile-copy>b{font-size:32px;line-height:1.05;white-space:nowrap}
#home .tile-copy>small{font-size:18px;line-height:1.35;color:#c2d8ce}
#home .play .tile-copy>b{font-size:43px;color:#fff8e9;text-shadow:0 2px 0 #a23f2c66}
#home .play .tile-copy>small{font-size:19px;color:#ffead9;max-width:none}
#home .tile.play img{position:static;width:72px;height:72px;transform:none;filter:none}
#home .play-emblem{width:78px;height:78px;background:none;border:0}
#home .tile-arrow{margin-left:auto;border:1px solid #ffdcc599;background:#fff2dd1c;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;transition:transform .22s}
#home .tile.play:hover .tile-arrow{transform:translateX(4px)}
.menu-footer{display:flex;align-items:center;justify-content:space-between;color:#c7dacb;font-size:16px;padding:6px 4px 0}
.menu-footer>span{display:flex;gap:9px;align-items:center}.menu-footer .pg-icon{width:21px;height:21px;color:#e5cc91}
#menuMotion{border:1px solid #9bb7a655;border-radius:999px;background:#103b3dbb;color:#d9e5d6;display:flex;align-items:center;gap:9px;padding:9px 14px;font:16px var(--body);position:relative;z-index:3}
#menuMotion:hover{border-color:#f0ca7d;background:#28544d}#menuMotion .motion-symbol{width:17px;color:#ffce76;font-weight:700}
.menu-vignette{position:absolute;left:970px;right:0;top:125px;bottom:0;pointer-events:none;z-index:1;overflow:hidden}
.menu-sunlight{position:absolute;width:640px;height:640px;right:-120px;top:-240px;border-radius:50%;background:radial-gradient(circle,#ffdf9c17,transparent 68%);animation:pg-sunlight 15s ease-in-out infinite alternate}
.menu-mote{position:absolute;width:4px;height:4px;background:#ffe5a2;border-radius:50%;box-shadow:0 0 12px #ffe3a288;opacity:.3;animation:pg-mote 9s ease-in-out infinite alternate}.mote-a{left:28%;top:48%}.mote-b{left:80%;top:70%;animation-delay:-4s;width:3px;height:3px}.mote-c{left:63%;top:31%;animation-delay:-7s}
@keyframes pg-mote{from{transform:translate(0,8px);opacity:.15}to{transform:translate(8px,-12px);opacity:.5}}
@keyframes pg-sunlight{from{opacity:.4;transform:translate(0,0)}to{opacity:.85;transform:translate(-20px,12px)}}
#tools{top:24px;right:32px;gap:10px}#tools .ibtn{position:relative;width:76px;height:78px;border:1px solid #9eb9a333;border-radius:20px;padding-bottom:15px;background:#123c3ee6;box-shadow:0 6px 12px #092a2b22;transition:transform .2s,background .2s,border-color .2s}
#tools .ibtn::after{content:attr(data-label);position:absolute;bottom:7px;left:0;right:0;color:#d2e1cf;font:12px var(--body);text-align:center;pointer-events:none}
#tools .ibtn svg{width:29px;height:29px}#tools .ibtn:hover{border-color:#e9cb88;transform:translateY(-3px);background:#2b5650}
.pg-section-title{display:flex;flex-direction:column;gap:6px}.pg-section-title>span{font:14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#bacfc0}.pg-section-title>h2{font-size:51px}.view .topbar{padding-top:25px;padding-right:460px;align-items:center}
.view .card{border:1px solid #71968c22}.view .btn,.view .tab,.view .ropt,.view .opt{transition:transform .18s,background .18s,border-color .18s}.view .btn:hover{transform:translateY(-2px)}
.pg-guide-intro{display:grid;grid-template-columns:165px 1fr;gap:30px;align-items:center}.pg-guide-intro>img{width:150px}.pg-guide-intro h3{margin:9px 0 16px}.pg-guide-intro .actions{margin-top:18px}.pg-brand-illustration{padding:15px;filter:drop-shadow(0 8px 12px #062d3066)}
.quiz-companions{width:300px;display:flex;flex-direction:column;align-items:center;gap:14px;background:linear-gradient(145deg,#27544a,#123c40);padding:20px;border:1px solid #759a8b66;border-radius:26px}
.quiz-companions .mascot{width:195px;height:195px}.quiz-companions .quiz-horse{width:195px;height:195px;border-radius:24px;object-fit:cover}.quiz-companions>span{text-align:center;font-size:18px;line-height:1.5;color:#bcd3c6}.quiz-companions b{color:#f7d692;font-family:var(--display);font-size:29px}
.learning-trace{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.trace-item{border-radius:24px;background:#19434a;border:1px solid #6e98854d;padding:24px;display:flex;flex-direction:column;gap:14px}.trace-item>.pg-icon{color:#edc87f;width:34px;height:34px}.trace-item h3{font-size:29px;color:#f8dda0}.trace-item p{font-size:20px;line-height:1.55;margin:0;color:#c7d9cb}.trace-item strong{font:800 39px var(--display);color:#fff1d1}.pg-badge-heading{gap:8px}.pg-badge-heading p{font-size:20px;color:#b8d0c4}
.adventure{transition:transform .25s,border-color .25s,box-shadow .25s}.adventure:hover,.adventure:focus-visible{transform:translateY(-6px);box-shadow:0 14px 0 #092e3566}.adventure>.pg-adventure-icon{position:absolute;right:24px;bottom:24px;width:38px;height:38px;color:#f0cf87;opacity:.7}.adventure img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.adventure:hover img{transform:translateY(-6px) rotate(-2deg)}
.pg-ripple{position:absolute;border-radius:50%;pointer-events:none;background:#fff4c933;transform:scale(0);z-index:4;mix-blend-mode:screen}
.pg-motion-off .menu-vignette>*,.pg-menu-still .menu-vignette>*{animation-play-state:paused!important}
.pg-motion-off #bg{transform:none!important;will-change:auto!important}
@media(prefers-reduced-motion:reduce){.menu-vignette>*{animation:none!important}#stage[data-page="home"] #bg{transform:none!important;will-change:auto}.adventure:hover img{transform:none}.view .btn,.view .tab,.view .ropt,.view .opt,#home .tile,#tools .ibtn,.adventure,.adventure img{transition:none!important}#home .tile:hover,#tools .ibtn:hover,.adventure:hover,.view .btn:hover{transform:none}}
/* Themed pictograms: feather, hoof, ring and trail details. */
#home .tile-icon:not(.play-emblem){width:66px;height:66px;border-radius:20px;background:linear-gradient(145deg,#4c796445,#143e3d99);border-color:#d4bf763d}
#home .tile-icon>.pg-theme-icon{width:46px;height:46px;filter:drop-shadow(0 2px 2px #062b3066)}
#home .chiprow .pg-theme-icon{width:22px;height:22px}
#tools .ibtn .pg-theme-icon{width:38px;height:38px;filter:drop-shadow(0 2px 2px #062b3055)}
#tools .volbtn svg,#tools .fsbtn svg{color:#fff0ca;width:32px;height:32px}
/* Opening illustration appears before the interface. */
#stage.intro-active #home,#stage.intro-active #tools{visibility:hidden}
.intro-overlay{position:absolute;inset:0;z-index:200;background:#0b3237;overflow:hidden;isolation:isolate}
.intro-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.075);transform-origin:70% 50%}
.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052c36a6 0%,#082f3544 47%,transparent 74%)}
.intro-copy{position:absolute;left:105px;top:200px;max-width:840px;color:#fff0cf}
.intro-emblem{width:112px;height:112px;filter:drop-shadow(0 8px 18px #052c3688)}
.intro-eyebrow{font:18px var(--body);letter-spacing:.17em;color:#f0d49c;margin:30px 0 25px}
.intro-copy h2{font:800 144px/1 var(--display);white-space:nowrap;letter-spacing:-1px;text-shadow:0 4px 0 #173c3999}
.intro-copy h2 span{font-size:inherit;color:#ffce72}
.intro-tagline{font:25px var(--body);line-height:1.4;color:#e5eadb;margin:26px 0 30px}
.intro-track{height:4px;width:210px;background:#c3b47c33;overflow:hidden;border-radius:4px}
.intro-track>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#86cbb6,#ffcf73);transform:scaleX(0);transform-origin:left}
#introSkip{position:absolute;right:58px;bottom:42px;background:#113d3bc4;border:1px solid #f2d09266;border-radius:999px;padding:13px 21px;font:17px var(--body);color:#fff0cf;display:flex;gap:13px;align-items:center;backdrop-filter:blur(8px)}
#introSkip:hover{background:#31594de6;border-color:#ffe3a5}
.intro-running .intro-wallpaper{animation:pg-intro-camera 2s cubic-bezier(.16,.6,.3,1) both}
.intro-running .intro-copy{animation:pg-intro-title .6s cubic-bezier(.2,.75,.2,1) both}
.intro-running .intro-track>span{animation:pg-intro-progress 2s linear both}
.intro-leaving .intro-overlay{pointer-events:none}
.intro-overlay.intro-leaving{animation:pg-intro-exit var(--intro-exit-ms,700ms) cubic-bezier(.3,.7,.25,1) both;pointer-events:none}
.intro-tab-hidden .intro-wallpaper,.intro-tab-hidden .intro-copy,.intro-tab-hidden .intro-track>span{animation-play-state:paused}
@keyframes pg-intro-camera{from{transform:scale(1.075) translateX(-7px)}to{transform:scale(1.015) translateX(0)}}
@keyframes pg-intro-title{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pg-intro-progress{to{transform:scaleX(1)}}
@keyframes pg-intro-exit{from{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(1.035);filter:blur(5px)}}
@media(prefers-reduced-motion:reduce){.intro-wallpaper{transform:none!important}.intro-copy{opacity:1!important;transform:none!important}.intro-track>span{transform:scaleX(1)}.intro-overlay.intro-leaving{animation:none!important;opacity:0;transform:none;filter:none}}

/* TAPAK-ASA: an illustrated, animated identity. The title font is bundled offline. */
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/LuckiestGuy-Regular.ttf') format('truetype')}
#stage[data-page="home"] #bg{background-image:url(latar_petualangan.webp)!important}
#home .left{top:82px}
.pg-brand-top{gap:18px;margin-bottom:18px}
.pg-brand-top>img{width:88px;height:88px;filter:drop-shadow(0 5px 0 #072a32) drop-shadow(0 9px 16px #05282966);animation:ta-emblem 6s ease-in-out infinite}
#home .brand h1,.intro-copy h2{font-family:'Luckiest Guy','Baloo 2',sans-serif;font-weight:400;font-size:136px;line-height:1.12;letter-spacing:1px;white-space:nowrap;transform:rotate(-2deg);transform-origin:15% 70%;paint-order:stroke fill;-webkit-text-stroke:7px #103b40;text-shadow:0 5px 0 #ba7b30,0 10px 0 #092d35,0 17px 22px #061f3390;animation:ta-title 5.5s ease-in-out infinite}
#home .brand h1>span,.intro-copy h2>span{font-size:inherit;letter-spacing:inherit;display:inline-block}
#home .brand h1 .ta-tapak,.intro-copy h2 .ta-tapak{color:#fff0b3}
#home .brand h1 .ta-hyphen,.intro-copy h2 .ta-hyphen{color:#9bd3a2;transform:rotate(-9deg);margin:0 3px}
#home .brand h1 .ta-asa,.intro-copy h2 .ta-asa{color:#ffbe43}
#home .brand h1>i{right:-53px;top:9px;font-size:42px;-webkit-text-stroke:0;text-shadow:0 3px 0 #0a343b;animation:ta-sparkle 3.5s ease-in-out infinite}
#home .brand .tag{font-size:25px;color:#fff4d4;margin-top:6px}
.intro-copy{top:180px;max-width:900px}
.intro-emblem{width:138px;height:138px;animation:ta-emblem 6s ease-in-out infinite}
.intro-copy h2{font-size:145px}
.menu-vignette{left:0;right:0;top:0;bottom:0;overflow:hidden}
.pg-character{position:absolute;pointer-events:none;filter:drop-shadow(0 12px 13px #102f3338);will-change:transform}
.pg-character-frame{display:block;position:absolute;inset:0;background-size:200% 200%;background-repeat:no-repeat}
.pg-eagle{left:1160px;top:30px;width:420px;height:420px;animation:ta-eagle-path 5s ease-in-out infinite}
.pg-eagle .pg-character-frame{background-image:url(eagle-flight.webp)}
.pg-horse{left:1090px;top:310px;width:720px;height:720px;animation:ta-horse-bob .5s ease-in-out infinite}
.pg-horse .pg-character-frame{background-image:url(horse-gallop.webp)}
.pg-horse-shadow{position:absolute;left:1220px;top:958px;width:390px;height:30px;background:#18382c55;border-radius:50%;filter:blur(10px);animation:ta-shadow .5s ease-in-out infinite}
.pg-dust{position:absolute;left:1580px;top:935px;width:140px;height:70px;opacity:.6}
.pg-dust i{position:absolute;width:28px;height:20px;border-radius:50%;background:#f1d19166;filter:blur(4px);animation:ta-dust 1.2s ease-out infinite}
.pg-dust i:nth-child(2){animation-delay:-.4s;top:12px}.pg-dust i:nth-child(3){animation-delay:-.8s;top:26px}
.dev-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.dev-socials a{font:600 22px var(--body);display:inline-flex;gap:10px;align-items:center;padding:15px 20px;border:1px solid #b1c9b34d;border-radius:16px;background:#ffffff0b;text-decoration:none;min-height:58px}
.dev-socials a:hover{background:#ffffff18;border-color:#ffca75;transform:translateY(-2px)}
.dev-socials .yt{width:auto;margin:0;color:#ffe3b5}.dev-socials .ig{color:#ffd0de}.dev-socials svg{width:26px;height:26px}
.asset-credit-card .credits{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.asset-credit-card .credits>div{padding:24px;border:1px solid #ddc58440;border-radius:20px;background:#082e3b66;line-height:1.7;font-size:22px}
.asset-credit-card .credits b{display:block;font:800 32px var(--display);color:#ffe0a0;margin-bottom:12px}
.asset-credit-card .credits a{font-weight:600;text-underline-offset:4px}
@keyframes ta-emblem{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-7deg)}83%{transform:rotate(5deg)}90%{transform:rotate(-3deg)}}
@keyframes ta-title{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-5px)}}
@keyframes ta-sparkle{0%,100%{transform:scale(.8) rotate(0);opacity:.6}50%{transform:scale(1.18) rotate(20deg);opacity:1}}
@keyframes ta-eagle-path{0%,100%{transform:translate(-10px,2px) rotate(-2deg)}50%{transform:translate(22px,-24px) rotate(1deg)}}
@keyframes ta-horse-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ta-shadow{0%,100%{transform:scaleX(1);opacity:.7}50%{transform:scaleX(.88);opacity:.45}}
@keyframes ta-dust{from{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:.7}to{transform:translate(105px,-50px) scale(2.3);opacity:0}}
.pg-motion-off #home *,.pg-menu-still #home *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#home .ta-wordmark,.intro-copy .ta-wordmark,.intro-emblem,.pg-brand-top>img,#home .pg-character,#home .pg-horse-shadow,#home .pg-dust i,#home .brand h1>i{animation:none!important}.pg-dust{display:none}}
/* Keep the eagle's body aligned while its wings change pose. */
.pg-eagle [data-frame="1"]{transform:translateX(-1%)}
.pg-eagle [data-frame="2"],.pg-eagle [data-frame="3"]{transform:translate(0,10%)}

/* Exclude the neighboring pose at the upper right of the first sheet cell. */
.pg-eagle [data-frame="0"]{clip-path:polygon(0 0,93% 0,93% 68%,100% 68%,100% 100%,0 100%)}

/* Larger, interactive wordmark. The child effects do not replace its floating animation. */
#home .brand h1{font-size:150px;cursor:pointer;touch-action:manipulation;border-radius:16px;isolation:isolate}
#home .brand h1:focus-visible{outline:4px solid #ffe4a1;outline-offset:16px}
#home .brand h1>b.ta-click-spark{position:absolute;z-index:2;left:50%;top:55%;pointer-events:none;font:400 32px/1 'Luckiest Guy',sans-serif;color:#ffdf7b;-webkit-text-stroke:0;text-shadow:0 0 15px #ffbd43}
#home .brand h1.ta-click-flash{filter:brightness(1.3) drop-shadow(0 0 15px #ffc756)}