@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}
::-webkit-scrollbar{display:none;}

/* Restore a visible keyboard-focus indicator app-wide. Most interactive elements use
   focus:outline-none (Tailwind) for a cleaner look on mouse click, which also strips the
   indicator for keyboard users unless we put it back here. */
:focus-visible{outline:2px solid #d0bcff!important;outline-offset:2px;border-radius:2px;}

/* The native `hidden` attribute loses to Tailwind's own flex/grid display utility classes
   (both are plain classes/attribute selectors with equal specificity, so source order in the
   generated stylesheet decides the winner — not reliably "hidden"). Force it to always win
   app-wide instead of chasing this per element. */
[hidden]{display:none!important;}

/* Ornamen blur (div absolute w-96 dsb) di beberapa halaman menjulur keluar viewport HP dan
   membuat halaman bisa digeser ke samping. Potong overflow horizontal di level body; pakai `clip`
   (bukan hidden) supaya body tidak jadi scroll container dan position:sticky tetap bekerja. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Deretan yang digeser ke samping (chip mode duel, tab, daftar hadiah spin) memakai .no-scrollbar
   supaya batang gulir abu-abunya tidak memotong tampilan. Kelas ini bukan bawaan Tailwind, jadi
   didefinisikan di sini — sebelumnya dipakai di 4 halaman tanpa pernah ada isinya. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Animasi kosmetik Toko KILAS. Dideklarasikan di sini karena gaya tiap barang disimpan di database
   sebagai potongan CSS inline (kolom cosmetics.style) — inline style tidak bisa memuat @keyframes.
   Warna pendar mk-denyut diambil dari --mk-glow yang ikut diset di gaya barangnya. */
@keyframes mk-denyut { 0%,100% { box-shadow: 0 0 4px var(--mk-glow,#a078ff); } 50% { box-shadow: 0 0 16px var(--mk-glow,#a078ff), 0 0 28px var(--mk-glow,#a078ff); } }
@keyframes mk-kilau { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes mk-geser { 0% { background-position: 0 0; } 100% { background-position: 48px 48px; } }

/* Hormati setelan "kurangi animasi" di HP/OS. Gaya kosmetik datang dari atribut style, jadi
   penyaringnya lewat selector atribut — tidak ada kelas yang bisa dijadikan pegangan. */
@media (prefers-reduced-motion: reduce) {
  [style*="animation:mk-"] { animation: none !important; }
}