/* progress.css — Misi Harian, Gelar, Statistik, kartu profil pemain & banner pengumuman dunia */
.progress-view { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 6px 2px; }
.pg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); font-weight: 800; }
.pg-head .chip.ok { color: var(--good-hi); border-color: rgba(63, 185, 80, 0.45); }
.quest-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #172031; border: 1.5px solid var(--line-2); }
.quest-card.is-ready { border-color: var(--gold); }
.quest-card.is-claimed { opacity: 0.6; }
.quest-card.bonus { background: #221f15; }
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.q-text { font-size: var(--fs-md); font-weight: 900; }
.q-bar { height: 8px; border-radius: 4px; background: #070a10; border: 1px solid #263248; overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--gold); transition: width 0.3s; }
.q-rewards { display: flex; gap: 6px; flex-wrap: wrap; }
.rw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 800; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); }
.rw-chip .gi { width: 16px; height: 16px; }
.q-act { flex: 0 0 auto; }
.q-count { font-weight: 900; color: var(--text-2); font-size: var(--fs-md); }
.chip.ok { color: var(--good-hi); }

/* Kartu gelar = tombol (pilih gelar aktif) */
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.title-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 8px; text-align: left; font-family: var(--font-ui); color: var(--text);
  background: #172031; border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent);
}
.title-card b { color: var(--tc); font-size: var(--fs-md); font-weight: 900; }
.title-card small { font-size: var(--fs-xs); color: var(--text-2); font-weight: 700; line-height: 1.3; }
.title-card.active { box-shadow: 0 0 0 2px var(--tc); }
.title-card em { position: absolute; top: -8px; right: 8px; padding: 0 6px; border-radius: 4px; font-style: normal; font-size: var(--fs-xs); font-weight: 900; color: #10141b; background: var(--tc); }
.title-card.locked { cursor: default; filter: grayscale(0.85); opacity: 0.55; }
.title-card:not(.locked):hover { background: #1d2a40; }

.stat-list { display: grid; gap: 4px; max-width: 520px; }
.stat-line { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; font-size: var(--fs-md); font-weight: 800; background: rgba(0, 0, 0, 0.25); }
.stat-line span { color: var(--text-2); }

/* Tombol HUD Misi: badge emas = misi siap diklaim (teks gelap di emas 8,8:1) */
#btn-quests.has-mail { border-color: rgba(242, 204, 96, 0.85); }
#btn-quests .mail-badge { background: #e2b54a; color: #2a1a04; }

/* ---------- Kartu profil pemain ---------- */
#profile-popup { position: fixed; inset: 0; z-index: 135; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 10, 0.55); animation: fadeIn 0.15s; }
.pf-card { position: relative; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.pf-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--text-2); font-weight: 900; font-size: 1.05rem; }
.pf-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.pf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding-right: 44px; }
.pf-lv { flex: 0 0 54px; height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #2a1a04; background: #e2b54a; border: 2px solid #0e131d; }
.pf-name { font-size: var(--fs-lg); font-weight: 900; }
.pf-title { font-size: var(--fs-sm); font-weight: 900; }
.pf-title.muted { color: var(--muted); font-weight: 700; }
/* Garis kiri = warna rarity barang yang dipakai (informasi) */
.pf-gear { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.28); border-left: 3px solid var(--rc, #3a4760); }
.pf-gear.empty { color: var(--muted); justify-content: space-between; font-size: var(--fs-sm); }
.pf-ic { width: 34px; height: 34px; flex: 0 0 34px; }
.pf-ic .gi { width: 100%; height: 100%; }
.pf-gear span { display: block; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.pf-gear b { font-size: var(--fs-md); color: var(--rc); }
.pf-gear b i { font-style: normal; color: #ff8a80; }
.pf-gear small { display: block; font-size: var(--fs-xs); color: var(--text-2); font-weight: 800; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 2px; }
.pf-stats div { padding: 6px 4px; border-radius: 6px; text-align: center; background: rgba(0, 0, 0, 0.28); }
.pf-stats b { display: block; font-size: var(--fs-md); }
.pf-stats small { font-size: var(--fs-xs); color: var(--muted); font-weight: 800; }

/* ---------- Banner pengumuman dunia (item Legendary/Mythic, gelar langka): pendar teks diizinkan di sini ---------- */
#world-banner-stack { position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 126; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, 80vw); }
body.modal-open #world-banner-stack { visibility: hidden; }
.world-banner { padding: 8px 18px; border-radius: 8px; text-align: center; font-size: var(--fs-md); font-weight: 900; color: #fff; background: linear-gradient(90deg, transparent, rgba(20, 16, 8, 0.92) 12%, rgba(20, 16, 8, 0.92) 88%, transparent); border-top: 1.5px solid var(--bc, #f2cc60); border-bottom: 1.5px solid var(--bc, #f2cc60); text-shadow: 0 0 10px var(--bc, #f2cc60); animation: bannerIn 0.45s var(--ease-out); }
.world-banner.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 0.4s, transform 0.4s; }
@keyframes bannerIn { from { opacity: 0; transform: scale(0.85); } }

@media (max-width: 760px), (max-height: 520px) {
  .quest-card { padding: 7px 9px; gap: 8px; }
  .q-text { font-size: var(--fs-sm); }
  .title-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .title-card { padding: 6px 8px; }
  .title-card b { font-size: var(--fs-sm); }
  .world-banner { font-size: var(--fs-sm); padding: 5px 12px; }
  #world-banner-stack { top: calc(40px + env(safe-area-inset-top)); }
}

/* Syarat level item */
.req-lv { color: #ff8a80; font-weight: 900; }
.chip.req-no { color: #ff8a80; border-color: rgba(248, 81, 73, 0.5); }