/* Empayar Malaya - gaya tambahan */
body { font-family: Inter, sans-serif; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Latar kota malam */
.city-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(245,197,66,.10), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(168,85,247,.10), transparent 60%),
    #0b0e13; }
.glow-text { text-shadow: 0 0 24px rgba(245,197,66,.35); }

/* Komponen */
.card { background: linear-gradient(180deg, #161b24, #12161e); border: 1px solid #232b37; border-radius: .9rem; }
.card-hover { transition: transform .15s, border-color .15s, box-shadow .15s; }
.card-hover:hover { transform: translateY(-2px); border-color: #3a4658; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.btn { padding: .5rem 1rem; border-radius: .6rem; font-weight: 700; font-size: .85rem; transition: transform .1s, background .15s, opacity .15s; user-select: none; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-gold { background: linear-gradient(180deg, #f5c542, #e0a800); color: #111; box-shadow: 0 2px 0 #8a6800; }
.btn-gold:hover:not(:disabled) { filter: brightness(1.08); }
.btn-red { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; box-shadow: 0 2px 0 #7f1d1d; }
.btn-red:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost { background: #232b37; color: #e5e7eb; }
.btn-ghost:hover:not(:disabled) { background: #2f3a4a; }
.btn-sm { padding: .3rem .6rem; font-size: .75rem; }
.icon-btn { width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: #1c2330; display: grid; place-items: center; font-size: 1rem; }
.icon-btn:hover { background: #2f3a4a; }
.inp { background: #0d1117; border: 1px solid #2b3544; border-radius: .6rem; padding: .55rem .75rem; color: #e5e7eb; outline: none; }
.inp:focus { border-color: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.15); }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: #1c2330; }
.section-title { font-family: "Bebas Neue", sans-serif; font-size: 1.9rem; line-height: 1; color: #f5c542; letter-spacing: .02em; }

/* Meter */
.meter { height: .55rem; background: #1c2330; border-radius: 999px; overflow: hidden; position: relative; }
.meter-fill { height: 100%; width: 0; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); position: relative; }
.meter-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shimmer 2.4s infinite; }

/* Tab */
.tab-btn { position: relative; padding: .6rem 1rem; font-weight: 600; color: #9ca3af; border-bottom: 2px solid transparent; }
.tab-btn:hover { color: #e5e7eb; }
.tab-btn.active { color: #f5c542; border-color: #f5c542; }
.bnav { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .55rem; font-size: .68rem; font-weight: 600; color: #9ca3af; }
.bnav span { font-size: 1.25rem; transition: transform .15s; }
.bnav.active { color: #f5c542; }
.bnav.active span { transform: translateY(-2px) scale(1.12); }
.tab-badge { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 800; font-style: normal; margin-left: .25rem; }
.bnav .tab-badge { position: absolute; top: .2rem; right: 22%; }
.tab-pane { animation: fadeUp .25s ease; }

/* Kad tugasan */
.job-card { text-align: left; position: relative; overflow: hidden; }
.job-card .job-icon { font-size: 2.4rem; line-height: 1; transition: transform .2s; display: inline-block; }
.job-card:hover:not(:disabled) .job-icon { transform: scale(1.15) rotate(-6deg); }
.job-card:disabled { cursor: not-allowed; }
.job-card:disabled > *:not(.lock-veil) { opacity: .45; }
.lock-veil { position: absolute; top: .6rem; right: .6rem; }

/* Adegan tugasan */
.scene { position: relative; height: 7.5rem; border-radius: .8rem; overflow: hidden;
  background: linear-gradient(180deg, #1b2440 0%, #2a2447 55%, #1a1f29 55%, #151a22 100%); }
.scene .skyline { position: absolute; left: 0; right: 0; bottom: 45%; height: 40%; opacity: .35;
  background: repeating-linear-gradient(90deg, #0b0e13 0 18px, transparent 18px 22px, #0b0e13 22px 34px, transparent 34px 40px);
  mask: linear-gradient(0deg, #000 60%, transparent); -webkit-mask: linear-gradient(0deg, #000 60%, transparent); }
.scene .road { position: absolute; left: 0; right: 0; bottom: 22%; height: 3px;
  background: repeating-linear-gradient(90deg, #f5c542 0 16px, transparent 16px 30px); animation: road .6s linear infinite; opacity: .6; }
.scene .spot { position: absolute; bottom: 26%; font-size: 2rem; }
.scene .mover { position: absolute; bottom: 24%; left: 3rem; font-size: 2.2rem; transition: left 2.4s cubic-bezier(.45,.05,.55,.95); animation: bob .35s ease-in-out infinite alternate; }
.scene .mover.flip { transform: scaleX(-1); }
.progress { height: .45rem; border-radius: 999px; background: #1c2330; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, #f5c542, #fb923c); }

/* Pertempuran */
.army { display: flex; flex-wrap: wrap; gap: 2px; font-size: 1.1rem; min-height: 1.6rem; }
.army span { transition: opacity .6s, transform .6s, filter .6s; }
.army span.dead { opacity: .15; transform: translateY(4px) rotate(80deg); filter: grayscale(1); }
.pbar { height: 1.1rem; border-radius: .4rem; background: #1c2330; overflow: hidden; }
.pbar > div { height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.shake { animation: shake .45s ease; }
.vs { font-family: "Bebas Neue"; font-size: 2.5rem; color: #f5c542; text-shadow: 0 0 20px rgba(245,197,66,.5); }

/* Peta */
.map-wrap { overflow-x: auto; border-radius: .9rem; border: 1px solid #232b37; background: #0a1a2b; -webkit-overflow-scrolling: touch; }
.map-svg { display: block; width: 100%; min-width: 600px; height: auto; }
.map-svg .tile { transition: filter .2s; }
.map-svg .wave { animation: wave 3s ease-in-out infinite; }
.mk { cursor: pointer; }
.mk .halo { transform-box: fill-box; transform-origin: center; fill: none; stroke-width: 2; opacity: 0; }
.mk-enemy .halo { stroke: #ef4444; animation: pulse 1.8s ease-out infinite; }
.mk-me.rich .halo { stroke: #f5c542; animation: pulse 1.6s ease-out infinite; }
.mk .dot { transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.mk:hover .dot, .mk.sel .dot { transform: scale(1.25); }
.mk.sel .ring { stroke: #fff !important; stroke-width: 3; }
.mk .bag { animation: bob .6s ease-in-out infinite alternate; }
.mk.dim { opacity: .18; }
.filter-chip { padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #1c2330; color: #9ca3af; }
.filter-chip.active { background: #f5c542; color: #111; }

/* Peti hasil */
.chest { height: .4rem; border-radius: 999px; background: #1c2330; overflow: hidden; }
.chest > div { height: 100%; background: linear-gradient(90deg, #10b981, #6ee7b7); transition: width 1s linear; }

/* Efek */
.float-txt { position: fixed; font-weight: 800; font-size: 1.1rem; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,.7); animation: floatUp 1.3s ease-out forwards; white-space: nowrap; }
.coin { position: fixed; font-size: 1.2rem; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: .8rem; font-size: .85rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: toastIn .3s ease; border: 1px solid rgba(255,255,255,.08); }
.toast.out { animation: toastOut .3s ease forwards; }
.pop-num { animation: pop .5s ease; display: inline-block; }
.crit-badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: linear-gradient(90deg, #f5c542, #fb923c); color: #111; font-weight: 800; font-size: .75rem; animation: pop .5s ease, glow 1.2s ease-in-out infinite alternate; }

.anim-pop { animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.anim-fade { animation: fadeUp .4s ease; }

@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes road { from { background-position: 0 0; } to { background-position: -30px 0; } }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, -1px); } }
@keyframes pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes wave { 0%,100% { opacity: .15; transform: translateX(0); } 50% { opacity: .4; transform: translateX(3px); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes glow { from { box-shadow: 0 0 0 rgba(245,197,66,0); } to { box-shadow: 0 0 18px rgba(245,197,66,.7); } }

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

/* elak item grid menolak lebar halaman (teks truncate / peta) */
.grid > * { min-width: 0; }

/* Naik taraf premis */
.btn-upg { background: linear-gradient(180deg, #7c3aed, #5b21b6); color: #fff; box-shadow: 0 2px 0 #3b0f7a; line-height: 1.25; }
.btn-upg:hover:not(:disabled) { filter: brightness(1.12); }
.stars { color: #f5c542; letter-spacing: .05em; font-size: .8rem; }
.stars i { font-style: normal; color: #3a4658; }

/* Auth tab */
.auth-tab { padding: .5rem; border-radius: .6rem; font-weight: 700; font-size: .85rem; color: #9ca3af; }
.auth-tab.active { background: #f5c542; color: #111; }

/* Profil / avatar */
.avatar { cursor: pointer; transition: transform .15s; line-height: 1; }
.avatar:hover { transform: scale(1.08); }
.av-opt { aspect-ratio: 1; border-radius: .6rem; background: #1c2330; font-size: 1.5rem; display: grid; place-items: center; border: 2px solid transparent; transition: transform .1s; }
.av-opt:hover { transform: scale(1.08); background: #232b37; }
.av-opt.on { border-color: #f5c542; background: #2f3a4a; }
.col-opt { width: 2rem; height: 2rem; border-radius: 999px; border: 3px solid transparent; }
.col-opt.on { border-color: #fff; box-shadow: 0 0 0 2px #f5c542; }
.progress.h-1\.5 { height: .375rem; }

/* Ganjaran harian */
.streak-day { text-align: center; padding: .4rem .2rem; border-radius: .6rem; background: #1c2330; border: 1px solid #232b37; }
.streak-day.got { opacity: .55; }
.streak-day.now { border-color: #f5c542; background: rgba(245,197,66,.12); animation: pulseGold 1.6s infinite; }
.streak-day.big:not(.got) { background: linear-gradient(180deg, rgba(168,85,247,.2), #1c2330); }
.chest-glow { animation: pulseGold 1.4s infinite; }
@keyframes pulseGold { 0%,100% { box-shadow: 0 0 0 0 rgba(245,197,66,.45); } 50% { box-shadow: 0 0 0 6px rgba(245,197,66,0); } }

/* Geng */
.gang-tag { color: #c084fc; font-weight: 800; font-size: .85em; }
.gang-badge { min-width: 3rem; height: 3rem; padding: 0 .4rem; border-radius: .7rem; display: grid; place-items: center; font-family: "Bebas Neue", sans-serif; font-size: 1.4rem; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.gang-badge.big { min-width: 4.5rem; height: 4.5rem; font-size: 2.1rem; border-radius: 1rem; }
.online-dot { position: absolute; right: -1px; bottom: -1px; width: .65rem; height: .65rem; border-radius: 999px; background: #4b5563; border: 2px solid #12161e; }
.online-dot.on { background: #34d399; }
/* Chat */
.chat-box { min-height: 260px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding: .5rem; background: #0d1117; border: 1px solid #232b37; border-radius: .7rem; }
.chat-bubble { max-width: 78%; background: #1c2330; padding: .4rem .7rem; border-radius: .8rem; border-top-left-radius: .2rem; }
.chat-bubble.me { background: linear-gradient(180deg, #f5c542, #e0a800); color: #111; border-top-left-radius: .8rem; border-top-right-radius: .2rem; }
.chat-sys { text-align: center; font-size: .72rem; color: #a78bfa; }

/* Boss mingguan */
.boss-card { background: radial-gradient(600px 260px at 15% 0%, rgba(239,68,68,.18), transparent 70%), linear-gradient(180deg, #1a1418, #12161e); border-color: rgba(239,68,68,.35); }
.boss-card.dead { filter: saturate(.6); border-color: rgba(245,197,66,.4); }
.boss-emo { font-size: 4.5rem; line-height: 1; filter: drop-shadow(0 6px 18px rgba(239,68,68,.45)); animation: bossIdle 2.4s ease-in-out infinite; }
.boss-card.dead .boss-emo { animation: none; transform: rotate(90deg); opacity: .6; }
.boss-emo.hit { animation: bossHit .35s ease; }
@keyframes bossIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bossHit { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(.88) rotate(-6deg); filter: brightness(2) drop-shadow(0 0 12px #ef4444); } 100% { transform: scale(1); } }
.boss-hp { height: .9rem; border-radius: 999px; background: #2a1215; overflow: hidden; border: 1px solid #4c1d1d; }
.boss-hp > div { height: 100%; background: linear-gradient(90deg, #dc2626, #f97316); transition: width .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(239,68,68,.6); }
/* Pencapaian */
.ach { display: flex; align-items: center; gap: .75rem; padding: .7rem; border-radius: .8rem; background: #161b24; border: 1px solid #232b37; }
.ach.ready { border-color: #f5c542; background: rgba(245,197,66,.08); }
.ach.done { opacity: .6; }

/* Peristiwa */
.evt-bar { display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem; border-radius: .6rem; font-size: .75rem; background: #161b24; border: 1px dashed #2f3a4a; color: #9ca3af; }
.evt-bar.on { border: 1px solid rgba(245,197,66,.6); color: #fff; background: linear-gradient(90deg, rgba(168,85,247,.35), rgba(245,197,66,.25), rgba(239,68,68,.3)); background-size: 200% 100%; animation: evtShift 4s linear infinite; }
@keyframes evtShift { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
/* Pasaran Gelap */
.market-card { background: radial-gradient(500px 200px at 90% 0%, rgba(168,85,247,.18), transparent 70%), linear-gradient(180deg, #13111a, #0f1218); border-color: rgba(168,85,247,.35); }
.mk-offer { position: relative; display: flex; flex-direction: column; padding: .75rem; border-radius: .8rem; background: #161b24; border: 1px solid #2a2440; }
.mk-offer.gear { border-color: rgba(245,197,66,.55); box-shadow: inset 0 0 24px rgba(245,197,66,.07); }
.mk-offer > button { margin-top: auto; }
.mk-rare { position: absolute; top: -.5rem; right: .6rem; font-size: .55rem; font-weight: 800; letter-spacing: .12em; padding: .1rem .4rem; border-radius: 999px; background: linear-gradient(90deg, #f5c542, #fb923c); color: #111; }

/* Bingkai avatar (hadiah musim) */
.av-frame { position: relative; }
.frame-emas    { box-shadow: 0 0 0 2px #0b0e13, 0 0 0 4px #f5c542, 0 0 14px 3px rgba(245,197,66,.7); animation: frameGlow 2s ease-in-out infinite; }
.frame-perak   { box-shadow: 0 0 0 2px #0b0e13, 0 0 0 4px #d1d5db, 0 0 10px 2px rgba(209,213,219,.5); }
.frame-gangsa  { box-shadow: 0 0 0 2px #0b0e13, 0 0 0 4px #c2773a, 0 0 10px 2px rgba(194,119,58,.5); }
.frame-elit    { box-shadow: 0 0 0 2px #0b0e13, 0 0 0 4px #a855f7, 0 0 10px 2px rgba(168,85,247,.5); }
.frame-pejuang { box-shadow: 0 0 0 2px #0b0e13, 0 0 0 3px #38bdf8; }
@keyframes frameGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.season-card { background: radial-gradient(500px 220px at 0% 0%, rgba(168,85,247,.2), transparent 70%), linear-gradient(180deg, #15121d, #12161e); border-color: rgba(168,85,247,.4); }

/* Cerita bab */
.story-card { background: radial-gradient(500px 200px at 100% 0%, rgba(245,158,11,.16), transparent 70%), linear-gradient(180deg, #1a1712, #12161e); border-color: rgba(245,158,11,.4); }
/* Kasino */
.casino-card { background: radial-gradient(500px 220px at 50% 0%, rgba(16,185,129,.14), transparent 70%), linear-gradient(180deg, #0f1a16, #12161e); border-color: rgba(16,185,129,.35); }
.slot-machine { padding: .8rem; border-radius: 1rem; background: linear-gradient(180deg, #7f1d1d, #450a0a); border: 3px solid #f5c542; box-shadow: 0 0 24px rgba(245,197,66,.25), inset 0 2px 0 rgba(255,255,255,.15); }
.slot-reels { display: flex; gap: .5rem; }
.slot-reel { width: 4.2rem; height: 4.8rem; display: grid; place-items: center; font-size: 2.6rem; border-radius: .6rem; background: linear-gradient(180deg, #fff, #e5e7eb 45%, #fff); box-shadow: inset 0 4px 8px rgba(0,0,0,.35), inset 0 -4px 8px rgba(0,0,0,.25); }
.slot-reel.rolling { animation: reelBlur .12s linear infinite; }
@keyframes reelBlur { 0% { transform: translateY(-3px); filter: blur(1px); } 50% { transform: translateY(3px); filter: blur(2px); } 100% { transform: translateY(-3px); filter: blur(1px); } }
/* Perang wilayah */
.war-card { background: radial-gradient(600px 220px at 0% 0%, rgba(239,68,68,.14), transparent 70%), linear-gradient(180deg, #1a1215, #12161e); border-color: rgba(239,68,68,.35); }
.war-state { padding: .6rem; border-radius: .7rem; background: #161b24; border: 1px solid #232b37; }
.war-state.leading { border-color: rgba(52,211,153,.5); }
.war-state.own { border-color: #f5c542; background: rgba(245,197,66,.07); }

/* Pemberitahuan */
.notif-badge { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .6rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #0b0f16; }
.notif-badge.hidden { display: none; }
#btnNotif.ring { animation: bell-ring .9s ease; }
@keyframes bell-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.notif-item { display: flex; gap: .6rem; padding: .6rem .5rem; border-bottom: 1px solid #1c2330; }
.notif-item:last-child { border-bottom: 0; }
.notif-item.new { background: rgba(245,197,66,.07); border-radius: .5rem; }
.notif-pref { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .25rem 0; cursor: pointer; }
.notif-pref input { accent-color: #f5c542; width: 1rem; height: 1rem; }
@media (max-width: 420px) { .icon-btn { width: 1.8rem; height: 1.8rem; font-size: .85rem; } #btnSound { display: none; } }  /* bunyi: tetapan dalam Profil */
#overlayCard { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }   /* modal panjang (Profil) boleh skrol di telefon */

/* Penjara & Polis */
.jail-card { border-color: rgba(244,63,94,.55); background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 10px, transparent 10px 34px), linear-gradient(180deg, #2a0f16, #12161e); }
.police-hot { border-color: rgba(251,146,60,.55); animation: police-glow 1.6s ease-in-out infinite; }
@keyframes police-glow { 0%,100% { box-shadow: 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 18px rgba(59,130,246,.35), 0 0 10px rgba(239,68,68,.35); } }
.heat-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }

/* Kereta, garaj & lumba */
.garage-card { background: radial-gradient(420px 180px at 0% 0%, rgba(56,189,248,.10), transparent 70%), #12161e; }
.car-card { border: 1px solid #232b37; border-radius: .8rem; padding: .7rem; background: #151a22; }
.car-card.active { border-color: rgba(245,197,66,.6); box-shadow: 0 0 0 1px rgba(245,197,66,.25) inset; }
.car-shop { display: flex; align-items: center; gap: .6rem; border: 1px solid #232b37; border-radius: .7rem; padding: .55rem .65rem; background: #151a22; }
.race-card { background: radial-gradient(500px 200px at 100% 0%, rgba(239,68,68,.12), transparent 70%), #12161e; }
.race-track { position: relative; border-radius: .8rem; overflow: hidden; background: repeating-linear-gradient(90deg, #1c2330 0 40px, #232b37 40px 44px); border: 1px solid #2f3a4a; }
.race-track .lane { position: relative; height: 3.4rem; border-bottom: 2px dashed rgba(255,255,255,.18); }
.race-track .lane:last-of-type { border-bottom: 0; }
.race-track .lane-lbl { position: absolute; left: .5rem; top: .2rem; font-size: .6rem; color: #9ca3af; }
.race-track .racer { position: absolute; left: .3rem; top: 1rem; font-size: 2rem; line-height: 1; transform: scaleX(-1); }
.race-track .finish { position: absolute; top: 0; bottom: 0; right: .6rem; width: .5rem; background: repeating-linear-gradient(180deg, #fff 0 6px, #111 6px 12px); opacity: .8; }

/* Kejohanan PvP */
.pvp-card { background: radial-gradient(520px 200px at 0% 0%, rgba(244,63,94,.14), transparent 70%), radial-gradient(420px 180px at 100% 100%, rgba(168,85,247,.12), transparent 70%), #12161e; border-color: rgba(244,63,94,.35); }
.pvp-strip { border-color: rgba(244,63,94,.35); }
.car-tint { display: inline-block; }
.tint-hitam { filter: grayscale(1) brightness(.5) contrast(1.4) drop-shadow(0 0 3px rgba(245,197,66,.9)); }

/* Roda Tuah & Kotak Misteri */
.luck-card { background: radial-gradient(420px 200px at 0% 50%, rgba(245,197,66,.12), transparent 70%), #12161e; border-color: rgba(245,197,66,.35); }
.wheel-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.wheel-svg { width: 190px; height: 190px; border-radius: 50%; box-shadow: 0 0 0 4px #f5c542, 0 0 24px rgba(245,197,66,.35); }
.wheel-pin { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: #f5c542; font-size: 1.4rem; z-index: 2; text-shadow: 0 2px 4px #000; }
.box-slot { border: 1px solid #232b37; border-radius: .8rem; padding: .6rem .4rem; text-align: center; background: #151a22; }
.box-slot.has { border-color: rgba(245,197,66,.45); }
.box-bob { animation: box-bob 1.8s ease-in-out infinite; }
@keyframes box-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.box-shake { animation: box-shake .35s linear infinite; }
@keyframes box-shake { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-9deg) scale(1.05); } 75% { transform: rotate(9deg) scale(1.05); } }
.tint-emas { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 4px rgba(245,197,66,.9)); }

/* Heist geng */
.heist-card { background: radial-gradient(520px 200px at 100% 0%, rgba(16,185,129,.12), transparent 70%), #12161e; border-color: rgba(16,185,129,.35); }
.heist-live { border: 1px solid rgba(245,197,66,.35); border-radius: .9rem; padding: .9rem; background: rgba(0,0,0,.2); }
.crew-slot { width: 4rem; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Kontrak buruan */
.bounty-card { background: radial-gradient(520px 200px at 100% 0%, rgba(244,63,94,.14), transparent 70%), #12161e; border-color: rgba(244,63,94,.35); }

/* Chat dunia */
.world-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 3.2rem; height: 3.2rem; border-radius: 999px; font-size: 1.5rem; display: grid; place-items: center; background: linear-gradient(180deg, #f5c542, #e0a800); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.world-fab.hidden { display: none; }
.world-drawer { position: fixed; right: 1rem; bottom: 5rem; z-index: 45; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100dvh - 7rem)); display: flex; flex-direction: column; background: #11151c; border: 1px solid #2f3a4a; border-radius: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.world-drawer.hidden { display: none; }
@media (max-width: 767px) { .world-fab { bottom: 5.2rem; } .world-drawer { right: .5rem; left: .5rem; width: auto; bottom: 9rem; height: calc(100dvh - 12rem); } }

/* Pasaran saham */
:root { --spark-up: #34d399; --spark-down: #fb7185; }
.stock-card { background: radial-gradient(520px 200px at 0% 0%, rgba(52,211,153,.10), transparent 70%), #12161e; }
.stock-row { display: grid; grid-template-columns: minmax(0,1.6fr) auto auto auto auto; gap: .75rem; align-items: center; padding: .55rem .25rem; border-bottom: 1px solid #1c2330; }
.stock-row:last-child { border-bottom: 0; }
.spark { width: 120px; height: 34px; display: block; }
@media (max-width: 639px) { .stock-row { grid-template-columns: minmax(0,1fr) auto auto; } .stock-row > div:nth-child(4) { display: none; } .stock-row > div:last-child { grid-column: 1 / -1; } }

/* Perniagaan haram */
.op-box { border: 1px dashed rgba(168,85,247,.45); border-radius: .7rem; padding: .55rem .65rem; background: rgba(168,85,247,.06); }

/* Boss geng */
.gboss-card { background: radial-gradient(520px 220px at 0% 0%, rgba(239,68,68,.16), transparent 70%), #12161e; border-color: rgba(239,68,68,.4); }
.gboss-ico { animation: box-bob 2.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(239,68,68,.55)); }
.tint-ungu { filter: hue-rotate(250deg) saturate(1.6) brightness(.8) drop-shadow(0 0 4px rgba(168,85,247,.9)); }

/* Modal pengesahan */
.ask-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.ask-card { width: 100%; max-width: 22rem; padding: 1.2rem; text-align: center; }

/* Sub-tab & panel tugasan */
/* sub-menu turun ke baris baharu jika tidak muat (semua butang sentiasa kelihatan, tiada skrol tersembunyi) */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 1rem; }
.subnav-btn { flex-shrink: 0; position: relative; padding: .45rem .8rem; border-radius: 999px; background: #151a22; border: 1px solid #232b37; font-size: .8rem; font-weight: 700; color: #9ca3af; white-space: nowrap; }
.subnav-btn:hover { color: #e5e7eb; border-color: #2f3a4a; }
.subnav-btn.active { background: #f5c542; border-color: #f5c542; color: #11151c; }
.subnav-btn .tab-badge { margin-left: .35rem; }
.todo-card { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg, rgba(16,185,129,.08), transparent), #12161e; }
.todo-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: .7rem; background: #151a22; border: 1px solid #1c2330; }
.todo-item:hover { border-color: #2f3a4a; background: #1c2330; }

/* "hidden" sentiasa menang ke atas kelas app.css yang set display (cth. .tab-badge, .icon-btn),
   kecuali elemen responsif seperti "hidden md:flex" supaya Tailwind md:/lg: masih berfungsi */
.hidden:not([class*="md:"]):not([class*="sm:"]):not([class*="lg:"]) { display: none !important; }
@media (max-width: 420px) { .subnav-btn { padding: .4rem .65rem; font-size: .75rem; } }
.wheel-prize { margin-top: .5rem; font-size: .8rem; padding: .4rem .6rem; border-radius: .6rem; background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.35); color: #fde68a; }