/*
 * Auth Pixel — halaman Masuk / Daftar bergaya main menu game pixel-art.
 * Video latar penuh, menu di kiri, panel & tombol kayu. Menggantikan auth-mobile.css
 * (struktur HTML & id formulir tidak berubah, jadi JS login/daftar/2FA tetap sama).
 */
body.px-auth {
  background: #140d1d url(/assets/img/pixel/login-poster.jpg) center / cover no-repeat fixed !important;
  overflow-x: hidden;
}
body.px-auth .app-shell, body.px-auth main { padding: 0 !important; margin: 0 !important; max-width: none !important; background: transparent !important; }
body.px-auth .site-footer, body.px-auth footer, body.px-auth .mascot-companion-fab { display: none !important; }

.px-login__bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
  image-rendering: pixelated;
  z-index: -2; pointer-events: none;
  background: #140d1d url(/assets/img/pixel/login-poster.jpg) center / cover no-repeat;
}
/* Gelap hanya di sisi kiri (tempat menu) → video tetap jelas di kanan */
.px-login__shade {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 9, 22, .78) 0%, rgba(14, 9, 22, .55) 34%, rgba(14, 9, 22, 0) 58%);
}
.au-page {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 470px;
  padding: max(18px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom)) max(22px, calc(env(safe-area-inset-left) + 16px));
  margin: 0 !important;
  box-sizing: border-box;
}
.au-header { display: none !important; }

/* Judul game */
.px-login__logo { margin: 0 0 14px 4px; line-height: 1; }
.px-login__logo b {
  display: block; font-size: clamp(30px, 5.2vw, 50px); font-weight: 700; letter-spacing: 2px;
  color: var(--px-gold);
  text-shadow: 3px 3px 0 #b8501a, 6px 6px 0 var(--px-outline);
}
.px-login__logo span {
  display: inline-block; margin-top: 10px; padding: 4px 10px;
  font-size: clamp(15px, 2vw, 19px); letter-spacing: 3px; color: var(--px-cream);
  background: var(--px-wood-dk); box-shadow: var(--px-ring-sm);
}

/* Panel kayu */
.au-card {
  position: relative;
  background: rgba(34, 23, 43, .93);
  padding: 22px 20px 18px;
  box-shadow: inset 0 0 0 4px var(--px-wood-2), inset 0 0 0 8px var(--px-wood-dk), var(--px-ring), 0 10px 0 rgba(0, 0, 0, .4);
  animation: pxPanelIn .35s steps(5) both;
}
.au-card::before, .au-card::after { /* paku sudut */
  content: ""; position: absolute; top: 12px; width: 6px; height: 6px; background: var(--px-wood-hi); box-shadow: 2px 2px 0 var(--px-outline);
}
.au-card::before { left: 12px; }
.au-card::after { right: 12px; }
@keyframes pxPanelIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.au-brand { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; margin: 0 0 14px; text-align: left; }
.au-brand > :not(.au-logo) { grid-column: 2; }
.au-brand .au-logo { grid-row: 1 / span 2; }
.au-logo { width: 46px; height: 46px; box-shadow: var(--px-ring-sm); image-rendering: auto; flex: 0 0 auto; }
.au-title { margin: 0; font-size: 21px !important; color: var(--px-gold) !important; }
.au-sub { margin: 2px 0 0; font-size: 14px; color: var(--px-muted); }

/* Tab Siswa / Staf */
.au-tabs { display: flex; gap: 10px; margin: 0 0 14px; }
.au-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 6px 8px; cursor: pointer;
  font: 700 15px var(--px-font); color: var(--px-cream-2);
  background: var(--px-ink-3); border: 0;
  box-shadow: var(--px-ring-sm);
}
.au-tab[aria-selected="true"] {
  color: #fff6e0; text-shadow: 2px 2px 0 var(--px-wood-dk);
  background: var(--px-grain), var(--px-wood);
  box-shadow: inset 0 2px 0 var(--px-wood-hi), inset 0 -3px 0 var(--px-wood-lo), var(--px-ring-sm);
}
.au-card.au-admin .au-tab[aria-selected="true"] { background: var(--px-grain), var(--px-red); box-shadow: inset 0 2px 0 #e8836a, inset 0 -3px 0 #6e2116, var(--px-ring-sm); }

/* Field */
.au-field { margin: 0 0 12px; }
.au-label { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--px-cream-2); margin: 0 0 4px 2px; }
.au-label svg { color: var(--px-gold); }
.au-input { display: block; width: calc(100% - 12px) !important; box-sizing: border-box; padding: 10px 12px !important; }
.au-passwrap { position: relative; }
.au-passwrap .au-input { padding-right: 52px !important; }
.au-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0; color: var(--px-gold); cursor: pointer;
}
.au-hint { margin: 2px 0 0 4px; font-size: 13px; color: var(--px-muted); }

/* Alert (tersembunyi sampai diberi status) */
.au-alert { display: none; padding: 10px 12px; margin: 0 0 12px; font-size: 15px; line-height: 1.4; gap: 8px; align-items: center; box-shadow: var(--px-ring-sm); }
.au-alert--ok, .au-alert--err, .au-alert--info, .au-alert--warn { display: flex; }
.au-alert--ok { background: #24401c; color: #c9f2a5; }
.au-alert--err { background: #4a1a14; color: #ffc2b4; }
.au-alert--info { background: #1d2a44; color: #cfe3ff; }
.au-alert--warn { background: #4a3210; color: #ffe2a0; }

/* Tombol utama */
.au-cta {
  width: calc(100% - 8px); display: flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px !important; font-size: 19px !important; margin: 6px 4px 4px !important;
}
.au-cta:not(:disabled) { animation: pxGlow 2.4s steps(4) infinite; }
@keyframes pxGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.au-card.au-admin .au-cta { background: var(--px-grain), var(--px-red) !important; box-shadow: inset 0 3px 0 #e8836a, inset 0 -4px 0 #6e2116, var(--px-ring), 0 7px 0 rgba(0, 0, 0, .35) !important; }
.au-spin { width: 16px; height: 16px; background: var(--px-cream); animation: pxSpin .6s steps(4) infinite; display: inline-block; }
@keyframes pxSpin { to { transform: rotate(360deg); } }

/* Langkah daftar */
.au-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; color: var(--px-muted); }
.au-step { display: inline-flex; align-items: center; gap: 6px; }
.au-step__num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--px-ink-3); box-shadow: var(--px-ring-sm); }
.au-step.is-active { color: var(--px-gold); }
.au-step.is-active .au-step__num { background: var(--px-wood); color: #fff6e0; }
.au-step.is-done .au-step__num { background: var(--px-green); color: #fff; }
.au-step-sep { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--px-wood-2) 0 6px, transparent 6px 10px); }
.au-stepbody { display: none; }
.au-stepbody.is-open { display: block; }
.au-stepnav { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
.au-meter { height: 10px; margin: 8px 6px 4px; background: var(--px-ink-3); box-shadow: var(--px-ring-sm); }
.au-meter__bar { height: 100%; width: 0; transition: width .2s steps(4); }
.au-meter__label { font-size: 13px; color: var(--px-muted); margin: 4px 0 0 4px; }

/* OTP 2FA */
.au-otp { display: flex; gap: 8px; justify-content: center; margin: 4px 0 14px; }
.au-otp__digit { width: 42px !important; height: 52px; text-align: center; font-size: 22px !important; padding: 0 !important; margin: 4px !important; }
.au-center { text-align: center; }
.au-back { color: var(--px-gold); }

/* Kaki panel */
.au-foot { margin-top: 14px; font-size: 15px; color: var(--px-cream-2); text-align: center; }
.au-foot a { color: var(--px-gold); font-weight: 700; }
.au-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font-size: 14px; }
.au-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--px-cream-2); }
.au-copy { display: none; }

/* Menu cepat di bawah panel (Gabung pakai kode, dst.) */
.px-login__extra { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.px-login__extra .px-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; text-decoration: none; }

.px-credit {
  position: fixed; right: 10px; bottom: 8px; z-index: 2; margin: 0; max-width: 46vw;
  font-size: 12px; color: rgba(255, 241, 208, .85); text-shadow: 1px 1px 0 #000; text-align: right;
}

/* ---- Responsif ---- */
/* HP landscape / layar pendek: kolom kiri bisa digulir, judul mengecil */
@media (max-height: 560px) {
  .au-page { justify-content: flex-start; max-width: 400px; padding-top: 10px; padding-bottom: 10px; }
  .px-login__logo { margin: 0 0 8px 2px; display: flex; align-items: center; gap: 10px; }
  .px-login__logo b { font-size: 24px; }
  .px-login__logo span { margin-top: 0; font-size: 12px; padding: 3px 8px; }
  .au-card { padding: 12px 12px 10px; }
  .au-card::before, .au-card::after { display: none; }
  .au-brand { display: none; }
  .au-tabs { margin-bottom: 8px; }
  .au-tab { min-height: 36px; font-size: 14px; }
  .au-field { margin-bottom: 4px; }
  .au-label { font-size: 13px; margin-bottom: 0; }
  .au-input { min-height: 40px !important; padding: 6px 12px !important; margin-top: 4px !important; margin-bottom: 6px !important; }
  .au-cta { min-height: 44px !important; font-size: 17px !important; }
  .au-foot { margin-top: 8px; font-size: 13px; }
  .au-links { display: none; }
  .au-steps { margin-bottom: 8px; }
  .px-login__extra { margin-top: 10px; }
  .px-login__extra .px-btn { min-height: 40px; font-size: 14px; }
  .px-credit { font-size: 10px; max-width: 36vw; }
}
/* Potret sempit: menu penuh lebar, video tetap terlihat di atas & bawah */
@media (max-width: 560px) and (orientation: portrait) {
  .px-login__shade { background: linear-gradient(180deg, rgba(14, 9, 22, .15) 0%, rgba(14, 9, 22, .70) 40%, rgba(14, 9, 22, .80) 100%); }
  .au-page { max-width: none; padding: 26vh 14px 40px; justify-content: flex-start; }
  .px-login__bg { object-position: 55% center; }
  .px-credit { position: static; max-width: none; text-align: center; margin: 14px 0 0; }
}
@media (min-width: 1400px) {
  .au-page { max-width: 520px; padding-left: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  .au-card, .au-cta { animation: none !important; }
}

/* =====================================================================
 * v7.6 — "Main menu" game: judul melayang + PRESS START, pita PLAYER LOGIN,
 * pilih mode ►, tombol START berkilau, menu daftar ala game, partikel cahaya.
 * Warna ikut tema tombol pemilik (--px-acc*, --px-wood*). Struktur HTML/JS tetap.
 * ===================================================================== */
body.px-auth::before { /* partikel cahaya melayang */
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 200%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(255, 224, 138, .9) 50%, transparent 51%),
    radial-gradient(3px 3px at 28% 64%, rgba(255, 207, 74, .7) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 38%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(3px 3px at 61% 82%, rgba(255, 224, 138, .6) 50%, transparent 51%),
    radial-gradient(2px 2px at 77% 30%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 58%, rgba(255, 207, 74, .8) 50%, transparent 51%);
  background-size: 100% 50%;
  animation: vcSparks 18s linear infinite;
  opacity: .8;
}
@keyframes vcSparks { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.px-login__logo { position: relative; animation: vcFloat 3.2s ease-in-out infinite; }
.px-login__logo b {
  background: linear-gradient(180deg, #fff6c2 0%, var(--px-gold) 45%, #f39c2a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #b8501a) drop-shadow(3px 3px 0 var(--px-outline)) drop-shadow(0 0 14px rgba(255, 207, 74, .35));
  text-shadow: none;
}
.px-login__logo::after {
  content: "▶ PRESS START ◀"; display: block; margin: 10px 0 0 2px;
  font: 700 13px var(--px-font); letter-spacing: 4px; color: #fff6e0; text-shadow: 2px 2px 0 var(--px-outline);
  animation: vcBlink 1.1s steps(2) infinite;
}
@keyframes vcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vcBlink { 50% { opacity: 0; } }

/* Panel: pita PLAYER LOGIN + bingkai ganda */
.au-card { margin-top: 18px; }
.au-card::before {
  content: "⚔ PLAYER LOGIN ⚔"; left: 50% !important; top: -16px !important; width: auto !important; height: auto !important;
  transform: translateX(-50%); padding: 5px 14px; white-space: nowrap;
  font: 700 13px var(--px-font); letter-spacing: 3px; color: #fff6e0; text-shadow: 2px 2px 0 var(--px-wood-dk);
  background: var(--px-grain), var(--px-acc, #e0a032);
  box-shadow: inset 0 2px 0 var(--px-acc-hi, #ffe08a), inset 0 -3px 0 var(--px-acc-lo, #9a5f12), var(--px-ring-sm) !important;
  z-index: 3;
}
.au-card::after { display: none; }
.au-card.au-admin::before { content: "🛡 STAFF LOGIN 🛡"; background: var(--px-grain), var(--px-red); box-shadow: inset 0 2px 0 #e8836a, inset 0 -3px 0 #6e2116, var(--px-ring-sm) !important; }

/* Pilih mode (Siswa / Staf) */
.au-tab { position: relative; transition: transform .1s steps(2); }
.au-tab:hover { transform: translateY(-2px); }
.au-tab[aria-selected="true"]::before {
  content: "►"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--px-gold); text-shadow: 2px 2px 0 var(--px-outline); animation: vcNudge .6s steps(2) infinite;
}
@keyframes vcNudge { 50% { margin-left: 3px; } }

/* Kotak isian ala game */
.au-input { background: #120b19 !important; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .55), 0 0 0 3px var(--px-wood-2), 0 0 0 6px var(--px-outline) !important; transition: box-shadow .15s; }
.au-input:focus { box-shadow: inset 0 3px 0 rgba(0, 0, 0, .55), 0 0 0 3px var(--px-gold), 0 0 0 6px var(--px-outline), 0 0 18px rgba(255, 207, 74, .45) !important; }

/* Tombol START (selektor body.px-auth agar menang atas gaya tombol kayu global) */
body.px-auth .au-cta {
  position: relative; overflow: hidden;
  min-height: 58px !important; font-size: 21px !important; letter-spacing: 2px;
  background: var(--px-grain), linear-gradient(180deg, var(--px-acc-hi, #ffe08a) 0%, var(--px-acc, #e0a032) 38%, var(--px-acc-lo, #9a5f12) 100%) !important;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(0, 0, 0, .3), var(--px-ring), 0 8px 0 0 rgba(0, 0, 0, .45) !important;
  transition: transform .08s steps(2), filter .12s;
}
.au-cta::before { content: "▶"; margin-right: 4px; animation: vcBlink 1s steps(2) infinite; }
.au-cta svg { display: none; }
.au-cta::after { /* kilatan cahaya lewat */
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-20deg); animation: vcShine 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes vcShine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
body.px-auth .au-cta:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.1); }
body.px-auth .au-cta:active { transform: translateY(4px) scale(.99); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3), var(--px-ring) !important; }
body.px-auth .au-card.au-admin .au-cta { background: var(--px-grain), linear-gradient(180deg, #e8836a 0%, var(--px-red) 40%, #6e2116 100%) !important; }
/* tombol musik: pojok kanan atas (tidak menutupi menu) */
body.px-auth .vcm-toggle--float { left: auto !important; right: max(12px, env(safe-area-inset-right)) !important; top: max(12px, env(safe-area-inset-top)) !important; bottom: auto !important; }

/* Menu bawah: daftar menu game dengan kursor ► */
.px-login__extra { flex-direction: column; gap: 6px; }
.px-login__extra .px-btn { position: relative; justify-content: flex-start; padding-left: 36px; transition: transform .1s steps(2), padding-left .1s steps(2); }
.px-login__extra .px-btn::before { content: "►"; position: absolute; left: 14px; opacity: 0; color: var(--px-gold); text-shadow: 2px 2px 0 var(--px-outline); }
.px-login__extra .px-btn:hover, .px-login__extra .px-btn:focus-visible { transform: translateX(6px); }
.px-login__extra .px-btn:hover::before, .px-login__extra .px-btn:focus-visible::before { opacity: 1; animation: vcNudge .6s steps(2) infinite; }

@media (max-height: 560px) {
  .px-login__logo::after { display: none; }
  .au-card { margin-top: 12px; }
  .au-card::before { font-size: 11px; top: -12px !important; padding: 3px 10px; }
  .au-cta { min-height: 46px !important; font-size: 18px !important; }
  .px-login__extra { flex-direction: row; }
  .px-login__extra .px-btn { padding-left: 12px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.px-auth::before, .px-login__logo, .px-login__logo::after, .au-cta::before, .au-cta::after, .au-tab[aria-selected="true"]::before { animation: none !important; }
}

/* =====================================================================
 * v7.6.5 — MENU UTAMA game di halaman login: START · GABUNG KODE · AUTHOR · HELP.
 * data-stage="menu" → hanya menu; "form" → panel login + tombol ◀ MENU.
 * Tombol: pelat bersudut terpotong, badge ikon, judul + subjudul, petunjuk tombol, sapuan warna saat dipilih.
 * Semua warna dari variabel tema (--px-wood*, --px-acc*, --px-ink*) → ikut tema pilihan pemilik.
 * ===================================================================== */
.au-page[data-stage="menu"] #loginCard, .au-page[data-stage="menu"] .px-login__extra, .au-page[data-stage="menu"] .px-backmenu { display: none !important; }
.au-page[data-stage="form"] .px-mainmenu { display: none !important; }
.au-page[data-stage="form"] .px-login__logo::after { display: none; }
#auPage .px-mainmenu {
  display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; max-width: 400px;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 1px var(--px-outline));
}
#auPage .px-mm {
  --notch: 10px;
  position: relative; display: flex !important; align-items: center; gap: 14px;
  min-height: 66px !important; margin: 0 !important; padding: 8px 16px 8px 8px !important; box-sizing: border-box;
  font-family: var(--px-font) !important; color: #fff6e0 !important; -webkit-text-fill-color: #fff6e0; text-decoration: none !important; text-align: left;
  background: linear-gradient(90deg, var(--px-wood) 0 0) no-repeat 0 0 / 0% 100%, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18)), var(--px-ink-2) !important;
  border: 0 !important; cursor: pointer; overflow: hidden;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
  box-shadow: inset 0 0 0 3px var(--px-wood), inset 0 0 0 6px var(--px-outline), inset 0 -10px 0 rgba(0, 0, 0, .25) !important;
  text-shadow: 2px 2px 0 var(--px-outline) !important;
  transition: background-size .22s steps(6), transform .12s steps(3), filter .15s;
  animation: vcMenuIn .45s steps(6) both;
}
#auPage .px-mm:nth-child(2) { animation-delay: .06s; } #auPage .px-mm:nth-child(3) { animation-delay: .12s; } #auPage .px-mm:nth-child(4) { animation-delay: .18s; }
@keyframes vcMenuIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
#auPage .px-mm__ic {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; font-style: normal; font-size: 26px; text-shadow: none !important;
  background: var(--px-grain), var(--px-wood);
  box-shadow: inset 0 3px 0 var(--px-wood-hi), inset 0 -4px 0 var(--px-wood-lo), 0 0 0 3px var(--px-outline);
}
#auPage .px-mm b { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 21px; letter-spacing: 3px; line-height: 1; }
#auPage .px-mm small { font-size: 12px; letter-spacing: .5px; font-weight: 400; color: var(--px-cream-2); -webkit-text-fill-color: var(--px-cream-2); opacity: .9; }
#auPage .px-mm kbd {
  flex: 0 0 auto; min-width: 26px; padding: 3px 7px; text-align: center; font: 700 12px var(--px-font); letter-spacing: 1px;
  color: var(--px-gold); -webkit-text-fill-color: var(--px-gold); background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 2px var(--px-wood-2); text-shadow: none !important;
}
#auPage .px-mm::before { /* kursor pilihan berkedip di kiri */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--px-gold); opacity: 0;
  box-shadow: 0 0 14px var(--px-gold);
}
#auPage .px-mm:hover, #auPage .px-mm:focus-visible {
  background-size: 100% 100%, auto, auto !important; transform: translateX(12px); filter: brightness(1.08); outline: none !important;
}
#auPage .px-mm:hover::before, #auPage .px-mm:focus-visible::before { opacity: 1; animation: vcBlink .8s steps(2) infinite; }
#auPage .px-mm:hover .px-mm__ic, #auPage .px-mm:focus-visible .px-mm__ic { animation: vcBounce .5s steps(3) infinite alternate; background: var(--px-grain), var(--px-wood-dk); }
#auPage .px-mm:hover kbd, #auPage .px-mm:focus-visible kbd { color: #20130a; -webkit-text-fill-color: #20130a; background: var(--px-gold); }
@keyframes vcBounce { to { transform: translateY(-3px) rotate(-6deg); } }
#auPage .px-mm:active { transform: translateX(12px) translateY(3px) scale(.99); filter: brightness(.95); }

/* START: pelat emas besar, denyut cahaya + kilatan */
#auPage .px-mm--start {
  --notch: 12px; min-height: 84px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18) 0 0) no-repeat 0 0 / 0% 100%, linear-gradient(180deg, var(--px-acc-hi, #ffe08a) 0%, var(--px-acc, #e0a032) 42%, var(--px-acc-lo, #9a5f12) 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-acc-hi, #ffe08a), inset 0 0 0 6px var(--px-outline), inset 0 -12px 0 rgba(0, 0, 0, .22), inset 0 12px 0 rgba(255, 255, 255, .18) !important;
  animation: vcMenuIn .45s steps(6) both, vcPulse 1.8s ease-in-out .5s infinite;
}
#auPage .px-mm--start b { font-size: 30px; letter-spacing: 8px; }
#auPage .px-mm--start small { color: #fff6e0; -webkit-text-fill-color: #fff6e0; }
#auPage .px-mm--start .px-mm__ic { width: 58px; height: 58px; font-size: 32px; background: var(--px-grain), var(--px-outline); box-shadow: inset 0 0 0 3px var(--px-acc-hi, #ffe08a), 0 0 0 3px var(--px-outline); }
#auPage .px-mm--start kbd { color: #fff6e0; -webkit-text-fill-color: #fff6e0; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); animation: vcBlink 1.1s steps(2) infinite; }
#auPage .px-mm--start::after { content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: vcShine 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes vcPulse { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.12) drop-shadow(0 0 10px var(--px-gold)); } }

#auPage .px-mm__foot { margin: 6px 0 0 6px; font-size: 14px; color: var(--px-cream-2); text-shadow: 1px 1px 0 #000; }
#auPage .px-mm__foot a { color: var(--px-gold); font-weight: 700; }
#auPage .px-mm__foot::after { content: "  ·  ↑ ↓ pilih · Enter masuk"; opacity: .7; }
.px-backmenu { align-self: flex-start; margin: 4px 0 6px 4px !important; min-height: 38px !important; padding: 4px 14px !important; font-size: 15px !important; letter-spacing: 2px; }
.au-page[data-stage="menu"] .px-backmenu { display: none; }
@media (hover: none) { #auPage .px-mm__foot::after { content: none; } #auPage .px-mm--start kbd { display: none; } }
@media (max-height: 560px) {
  #auPage .px-mainmenu { margin-top: 8px; gap: 7px; max-width: 360px; }
  #auPage .px-mm { min-height: 46px !important; padding: 4px 12px 4px 5px !important; }
  #auPage .px-mm small { display: none; }
  #auPage .px-mm b { font-size: 17px; }
  #auPage .px-mm__ic { width: 36px; height: 36px; font-size: 20px; }
  #auPage .px-mm--start { min-height: 56px !important; }
  #auPage .px-mm--start b { font-size: 22px; }
  #auPage .px-mm--start .px-mm__ic { width: 42px; height: 42px; font-size: 24px; }
  #auPage .px-mm__foot { display: none; }
}
@media (max-width: 560px) and (orientation: portrait) { #auPage .px-mainmenu { max-width: none; } }
@media (prefers-reduced-motion: reduce) { #auPage .px-mm, #auPage .px-mm *, #auPage .px-mm::before, #auPage .px-mm::after { animation: none !important; transition: none !important; } }