*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#17151b;font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#40363c 0%,#17151b 65%,#0a0a10)}
#stage{position:relative;width:min(100vw,56.25dvh);height:min(100dvh,177.77778vw);aspect-ratio:9/16;overflow:hidden;isolation:isolate;box-shadow:0 4px 44px rgba(0,0,0,.25);background:#2c292c;touch-action:manipulation}
.visual-layer{position:absolute;inset:0;overflow:hidden;z-index:1}
.screen{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.screen.enter{animation:screenEnter .36s cubic-bezier(.2,.75,.18,1) both}
@keyframes screenEnter{from{opacity:.65;transform:scale(1.012);filter:brightness(1.04)}to{opacity:1;transform:scale(1);filter:brightness(1)}}
#interaction-layer{position:absolute;inset:0;z-index:2}
.tap{position:absolute;display:block;border:0;appearance:none;-webkit-appearance:none;background:transparent;outline:0;cursor:pointer;padding:0;overflow:hidden;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.tap .surface{position:absolute;inset:2px;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0);clip-path:inset(0 round 999px)}
.tap .surface::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(241,181,196,.2),rgba(227,173,194,.11) 60%,rgba(192,132,169,.14));opacity:0;transition:opacity .12s ease;border-radius:inherit}
.tap .ripple{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,rgba(235,157,185,.26) 0%,rgba(225,152,185,.12) 42%,transparent 75%);border-radius:50%;opacity:0;pointer-events:none}
.tap.menu,.tap.back,.tap.home{border-radius:999px}
.tap.tile{border-radius:50%}
.tap.icon{border-radius:20%}
.tap.cover{border-radius:0}
.tap.pressed{transform:scale(.99)}
.tap.pressed .surface::before{opacity:1}
.tap.pressed .surface{box-shadow:inset 0 0 0 1px rgba(190,105,145,.24),inset 0 0 8px rgba(217,126,157,.13)}
.tap.pressed .ripple{animation:softRipple .4s ease-out both}
@keyframes softRipple{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}24%{opacity:.38}100%{opacity:0;transform:translate(-50%,-50%) scale(4.5)}}
.tap:focus-visible{outline:2px solid rgba(255,217,173,.85);outline-offset:2px}
.tap.cover.pressed{transform:none}.tap.cover .surface,.tap.cover .ripple{display:none}
#transition-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(230,165,196,.06));opacity:0}
#transition-overlay.transition{animation:softTransition .29s ease-in-out both}
@keyframes softTransition{0%{opacity:0}42%{opacity:.13}100%{opacity:0}}
body.debug .tap{background:rgba(255,180,0,.2);outline:1px dashed #ffb338}body.debug .tap:after{content:attr(aria-label);font-size:10px;color:white;background:#000a;position:absolute;top:0;left:0}
@media(prefers-reduced-motion:reduce){.screen.enter,.tap.pressed .ripple,#transition-overlay.transition{animation:none!important}}
/* V4: efek tombol menu terkurung sepenuhnya dalam capsule putih. */
.tap.menu{border-radius:9999px;overflow:hidden;clip-path:inset(0 round 9999px);transform-origin:center}
.tap.menu .surface{inset:3px;border-radius:9999px;clip-path:inset(0 round 9999px)}
.tap.menu .surface::before{background:linear-gradient(180deg,rgba(183,114,144,.16),rgba(255,255,255,.02) 55%,rgba(190,126,158,.11))}
.tap.menu.pressed .surface::before{opacity:.7}
.tap.menu.pressed .surface{box-shadow:inset 0 0 0 1px rgba(154,87,128,.20),inset 0 0 8px rgba(206,135,163,.13)}
.tap.menu.pressed{transform:scale(.992)}
.tap.menu .ripple{width:20%;background:radial-gradient(circle,rgba(208,129,167,.18),rgba(218,145,173,.07) 42%,transparent 72%)}
.tap.menu:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #9b5778}
/* V6 — premium micro-transition without fullscreen flash */
.screen.enter{animation:premiumIn .42s cubic-bezier(.16,1,.3,1) both}
.screen.screen-exit{animation:premiumOut .42s cubic-bezier(.4,0,.2,1) both}
@keyframes premiumIn{0%{opacity:0;transform:translateY(9px) scale(1.014);filter:blur(2px)}60%{opacity:.93;filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes premiumOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-7px) scale(.993);filter:blur(2px)}}
#transition-overlay.transition{animation:premiumVeil .3s ease-out both}
@keyframes premiumVeil{0%{opacity:0}40%{opacity:.07}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.screen.enter,.screen.screen-exit{animation:none!important}.screen.screen-exit{opacity:0!important}}
/* V9 OPTIONAL ADDITION — polished light feedback, clipped inside each button.
No new interaction logic, layout changes, or fullscreen flash. */
.tap:not(.cover) .surface{isolation:isolate;overflow:hidden;clip-path:inset(0 round 999px)}
.tap:not(.cover) .surface::after{
content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;opacity:0;
background:linear-gradient(110deg,
transparent 8%,rgba(255,255,255,.02) 28%,
rgba(255,255,255,.55) 49%,rgba(255,226,235,.24) 57%,transparent 76%);
transform:translateX(-110%);
}
.tap:not(.cover).pressed .surface::after{
animation:hajuSilkShimmer .23s cubic-bezier(.2,.55,.28,1) both;
}
.tap:not(.cover).pressed .surface{
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(219,145,170,.15));
}
.tap.menu.pressed .surface{
box-shadow:inset 0 0 0 1px rgba(170,93,136,.14),inset 0 0 10px rgba(200,119,155,.12);
}
.tap:not(.cover).pressed .ripple{
background:radial-gradient(circle,rgba(255,255,255,.35) 0%,rgba(245,194,211,.14) 35%,transparent 73%);
}
@keyframes hajuSilkShimmer{
0%{opacity:0;transform:translateX(-110%)}
20%{opacity:.62}
78%{opacity:.6}
100%{opacity:0;transform:translateX(110%)}
}
@media(prefers-reduced-motion:reduce){
.tap:not(.cover).pressed .surface::after{animation:none!important}
}