/* =========================================================
   $UNCPUMP GAME | #Clarawinny_
   Bahasa visual: arcade piksel, kota malam ungu gelap.
   Warna inti: ungu-hitam, cyan, magenta. Bayangan keras ala piksel.
   Seluruh ukuran UI memakai --u (piksel per satuan dunia game).
   ========================================================= */
:root {
  --ink: #0e031a; --panel: #14061f; --cyan: #2ef2e0; --mag: #ff4fd8;
  --white: #f4ecff; --mute: #c9b6ff; --bad: #ff5a78; --u: 1px;
  --font: 'Press Start 2P', ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--white); line-height: 1.6; }
button, label, input[type=range] { cursor: pointer; font-family: inherit; }
button:disabled { cursor: not-allowed; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); background: #000; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- overlay ---------- */
.ov { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 12); text-align: center; background: rgba(8, 0, 20, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow-y: auto; touch-action: pan-y; z-index: 5; }
.ov.show { display: flex; animation: ovIn .28s ease-out; }
.ov.clear { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: flex-end; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 10) calc(var(--u) * 6); pointer-events: none; overflow: visible; }
.ov.clear > * { pointer-events: auto; }
@keyframes ovIn { from { opacity: 0; transform: translateY(calc(var(--u) * 8)); } to { opacity: 1; transform: none; } }
h2 { font-size: calc(var(--u) * 16); line-height: 1.5; color: var(--cyan); font-weight: 400; letter-spacing: .02em; text-shadow: 0 calc(var(--u) * 2) 0 #00606b, 0 0 calc(var(--u) * 14) rgba(46, 242, 224, .6); }
h2.bad { color: var(--bad); text-shadow: 0 calc(var(--u) * 2) 0 #6b0020, 0 0 calc(var(--u) * 14) rgba(255, 90, 120, .55); }
.info { font-size: calc(var(--u) * 8); color: var(--mute); line-height: 1.8; max-width: 92%; }
.hint { font-size: calc(var(--u) * 7); color: var(--mute); }
.tagl { font-size: calc(var(--u) * 9); color: var(--mag); margin-top: calc(var(--u) * 2); }
.credit { font-size: calc(var(--u) * 7); color: var(--mute); }
.row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); justify-content: center; }

/* ---------- tombol ---------- */
.btn { font-size: calc(var(--u) * 9); color: var(--white); background: #1a0830; border: 2px solid var(--mag); border-radius: 0; padding: calc(var(--u) * 8) calc(var(--u) * 14); min-height: max(44px, calc(var(--u) * 28)); min-width: max(44px, calc(var(--u) * 100)); box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--mag); transition: transform .08s, box-shadow .08s, background .12s; line-height: 1.4; }
.btn:hover { background: #2c0f4d; transform: translate(-1px, -1px); box-shadow: calc(var(--u) * 4) calc(var(--u) * 4) 0 var(--mag); }
.btn:active { transform: translate(calc(var(--u) * 2), calc(var(--u) * 2)); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--mag); }
.btn.primary { background: var(--cyan); color: var(--ink); border-color: #fff; box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--mag), 0 0 calc(var(--u) * 16) rgba(46, 242, 224, .55); }
.btn.primary:hover { background: #7ffcf0; }
.btn:disabled { color: #b8a6d9; background: #10061b; border-color: #5a4a7a; box-shadow: none; transform: none; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn.primary:focus-visible { outline-color: var(--mag); }

/* ---------- grid level dan skin ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); width: 92%; max-width: calc(var(--u) * 560); }
.lvl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); min-width: 0; padding: calc(var(--u) * 6); }
.lvl .n { font-size: calc(var(--u) * 18); color: var(--cyan); }
.lvl .nm { font-size: calc(var(--u) * 7); }
.lvl .st { font-size: calc(var(--u) * 6); color: var(--mute); }
.lvl:disabled .n { color: #8a78aa; }
.skins { display: flex; gap: calc(var(--u) * 8); width: 100%; justify-content: center; flex-wrap: wrap; }
.skin { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); min-width: 0; width: calc(var(--u) * 104); padding: calc(var(--u) * 4); }
.skin canvas { width: calc(var(--u) * 52); height: calc(var(--u) * 65); }
.skin .nm { font-size: calc(var(--u) * 6); line-height: 1.5; }
.skin .st { font-size: calc(var(--u) * 6); color: var(--mute); }
.skin.current { border-color: var(--cyan); box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--cyan); }
.skin.current .st { color: var(--cyan); }

/* ---------- HUD tombol ---------- */
#hud { position: absolute; top: calc(var(--u) * 8); right: calc(var(--u) * 8); z-index: 4; display: none; gap: calc(var(--u) * 6); align-items: center; }
body.playing #hud { display: flex; }
.sm { font-size: calc(var(--u) * 7); color: var(--white); background: rgba(14, 3, 26, .88); border: 1px solid var(--cyan); border-radius: 0; min-height: max(44px, calc(var(--u) * 26)); min-width: max(44px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 8); box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--mag); }
.sm:hover { background: #2c0f4d; }
.vol { display: flex; align-items: center; min-height: 44px; padding: 0 calc(var(--u) * 4); }
.vol input { width: calc(var(--u) * 54); accent-color: var(--cyan); height: 44px; }

/* ---------- toast dan pemasangan ---------- */
#toast { position: absolute; top: calc(var(--u) * 78); left: 50%; transform: translate(-50%, calc(var(--u) * -10)); max-width: 90%; font-size: calc(var(--u) * 8); line-height: 1.7; text-align: center; color: var(--ink); background: var(--cyan); border: 2px solid #fff; padding: calc(var(--u) * 6) calc(var(--u) * 10); box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--mag); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#install { position: absolute; top: calc(var(--u) * 8); left: 50%; transform: translateX(-50%); width: min(92%, calc(var(--u) * 520)); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); background: rgba(14, 3, 26, .94); border: 2px solid var(--cyan); box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--mag); padding: calc(var(--u) * 8) calc(var(--u) * 10); z-index: 8; animation: ovIn .4s ease-out; }
#install p { font-size: calc(var(--u) * 7); line-height: 1.8; text-align: left; }
#install .btn { min-width: max(44px, calc(var(--u) * 64)); }

/* ---------- kontrol sentuh ---------- */
#touch { position: fixed; left: 0; right: 0; bottom: 0; display: none; justify-content: space-between; align-items: flex-end; padding: 0 max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); z-index: 6; pointer-events: none; }
body.playing.touch #touch { display: flex; }
#touch .grp { display: flex; gap: 12px; align-items: flex-end; }
#touch .grp.col { flex-direction: column; align-items: flex-end; gap: 10px; }
.tb { pointer-events: auto; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--cyan); background: rgba(14, 3, 26, .55); color: var(--white); font-size: 8px; touch-action: none; display: grid; place-items: center; box-shadow: 3px 3px 0 rgba(255, 79, 216, .8); }
.tb.small { width: 54px; height: 54px; font-size: 7px; border-color: var(--mag); }
.tb.act { background: rgba(46, 242, 224, .4); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mag); }
.arr { width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.arr.l { border-right: 18px solid var(--white); margin-right: 4px; }
.arr.r { border-left: 18px solid var(--white); margin-left: 4px; }

/* ---------- boot, transisi, putar layar ---------- */
#boot { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #2a0f4a, #0e031a 70%); transition: opacity .5s; }
#boot.done { opacity: 0; pointer-events: none; }
#boot img { height: min(42vh, 200px); width: auto; animation: bob 1.6s ease-in-out infinite; }
.bt { font-size: 12px; color: var(--cyan); text-align: center; padding: 0 12px; }
.bn { font-size: 8px; color: var(--mute); }
.tag { font-size: 12px; color: var(--mag); }
.bar { width: min(60vw, 240px); height: 8px; border: 2px solid var(--cyan); }
.bar i { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, #14f195, #9945ff); animation: load 1.1s ease-in-out infinite alternate; }
@keyframes load { to { margin-left: 70%; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .33s; z-index: 20; }
#rot { position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #0e031a; padding: 20px; text-align: center; }
#rot p { font-size: 11px; line-height: 1.8; }
.phone { width: 54px; height: 92px; border: 4px solid var(--cyan); animation: turn 2.2s ease-in-out infinite; position: relative; }
.phone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; background: var(--mag); }
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rot { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}