/* HUD v2 — susunan ala LifeAfter: status kiri-atas, kartu misi di bawahnya, minimap kanan-atas + cuaca,
   hotbar kecil di bawah, petunjuk tombol di kanan. Memuat setelah game.css (aturan di sini menang). */
:root { --hud-panel: rgba(10, 10, 12, 0.62); --hud-line: rgba(255, 255, 255, 0.1); }
#hud .hud-left { left: 18px; top: 16px; bottom: auto; align-items: flex-start; gap: 10px; }
#hud .portrait { width: 58px; height: 58px; }
#hud .portrait .face { inset: 3px; }
#hud .portrait .ring { background: none; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45); }
#hud .bars { width: 168px; gap: 4px; padding: 3px 0 0; }
#hud .bar { gap: 5px; }
#hud .bar .ico.sm { width: 12px; height: 12px; opacity: 0.9; filter: drop-shadow(0 1px 1px #000); }
#hud .bar .track { height: 7px; clip-path: none; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
#hud .bar .fill { border-radius: 2px; }
#hud .bar .num { width: 30px; font-family: var(--font-body); font-weight: 600; font-size: 11px; color: #e8e2d8; text-shadow: 0 1px 2px #000; }
#hud .bar.hp .fill { background: linear-gradient(90deg, #4caf50, #8ed36a); } #hud .bar.hp .lag { background: #fff; }
#hud .bar.st .fill { background: linear-gradient(90deg, #c7a23a, #e9d06a); }
#hud .bar.en .fill { background: linear-gradient(90deg, #2b8fc9, #6fd0ff); }
#hud .bar.hu .fill { background: linear-gradient(90deg, #b8652a, #f0a060); }

/* kartu misi (di bawah status, seperti "Survival Manual" LifeAfter) */
#hud .tracker { position: absolute; left: 18px; top: 96px; width: 272px; padding: 0; background: none; text-align: left; display: flex; }
#hud .tracker .tab { width: 22px; flex: none; background: rgba(255, 154, 60, 0.85); border-radius: 3px 0 0 3px; display: grid; place-items: center; }
#hud .tracker .tab i { width: 14px; height: 14px; background: url("../assets/ui/icons/quest.png") center/contain no-repeat; filter: brightness(0) invert(1); opacity: 0.95; }
#hud .tracker .body { flex: 1; padding: 8px 12px 9px; background: var(--hud-panel); border: 1px solid var(--hud-line); border-left: 0; border-radius: 0 3px 3px 0; backdrop-filter: blur(2px); }
#hud .tracker .label { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .12em; color: #ffc88a; }
#hud .tracker .title { font-family: var(--font-body); font-weight: 600; font-size: 15px; margin: 1px 0 3px; color: #fff; }
#hud .tracker .hint { font-size: 12.5px; color: #cfc8bd; line-height: 1.35; }
#hud .tracker .hint b { color: #ffe2b0; }
#hud .tracker .prog { margin-top: 6px; height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
#hud .tracker .prog i { background: #ffb15c; border-radius: 2px; }
#hud .tracker .side { margin-top: 6px; font-size: 11.5px; color: #8fe8b0; }
#hud .tracker .dist { float: right; font-size: 11px; color: #ffd28a; font-weight: 600; }

/* kanan-atas: cuaca + jam, minimap kotak membulat, zona, senjata terpasang */
#hud .hud-tr { right: 18px; top: 14px; gap: 6px; }
#hud .wx { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: #f0ebe4; text-shadow: 0 1px 3px #000; letter-spacing: .02em; }
#hud .wx .sym { font-size: 14px; line-height: 1; }
#hud .wx .temp { color: #d8d0c4; }
#hud .wx .clock { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border: 0; text-transform: none; letter-spacing: 0; font-size: 12px; }
#hud .wx .clock.night { color: #d9c2ff; }
#hud .minimap { width: 176px; height: 176px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5); background: #0e0d10; }
#hud .minimap canvas { inset: 0; width: 100%; height: 100%; border-radius: 0; }
#hud .minimap .ring { background: none; border: 0; }
#hud .minimap .ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0; }
#hud .zone-line { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; color: #e8e2d8; }
#hud .zone-line .clock { display: none; }
#hud .weap { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--hud-panel); border: 1px solid var(--hud-line); border-radius: 3px; min-width: 120px; }
#hud .weap .ico { width: 34px; height: 34px; }
#hud .weap .nm { font-size: 11px; color: #cfc8bd; letter-spacing: .04em; }
#hud .weap .am { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; line-height: 1; }
#hud .weap .am small { font-size: 11px; color: #a59b8e; font-weight: 500; }

/* hotbar bawah: lebih kecil & lebih tenang */
#hud .hud-bottom { bottom: 24px; gap: 8px; }
#hud .hud-bottom .slot { width: 52px; height: 52px; background: rgba(8, 8, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; }
#hud .hud-bottom .slot .ico.lg { width: 30px; height: 30px; }
#hud .hud-bottom .slot .key { left: 5px; top: 3px; font-family: var(--font-body); font-weight: 600; font-size: 10px; color: #cfc8bd; }
#hud .hud-bottom .slot.active { border-color: #ffb15c; box-shadow: 0 0 0 1px rgba(255, 177, 92, 0.5), 0 0 12px rgba(255, 154, 60, 0.35); filter: none; }
#hud .hud-bottom .slot.active::after { display: none; }
#hud .hud-bottom .sep { height: 40px; }
#hud .slot .cd { inset: 4px; }
#hud .slot .count { right: 5px; bottom: 3px; font-size: 12px; }

/* petunjuk tombol di kanan (pengganti tombol aksi sentuh LifeAfter) */
#hud .keys { position: absolute; right: 22px; top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#hud .keys .k { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; color: rgba(236, 228, 216, 0.75); text-shadow: 0 1px 2px #000; }
#hud .keys .k kbd { min-width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(8, 8, 10, 0.55); font-family: var(--font-body); font-weight: 600; font-size: 11px; }
#hud .keys .k kbd.wide { border-radius: 15px; padding: 0 9px; }
#hud .keys .k.on kbd { border-color: #ffb15c; color: #ffd28a; }

/* prompt interaksi: di dekat karakter (kanan-tengah), bukan di kaki layar */
#hud .prompt { left: 56%; bottom: auto; top: 54%; transform: none; padding: 7px 12px; background: var(--hud-panel); border: 1px solid var(--hud-line); border-left: 2px solid #ffb15c; border-radius: 3px; font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; font-size: 13px; }
#hud .gather { bottom: auto; top: 60%; left: 56%; transform: none; width: 160px; height: 4px; border-radius: 2px; }
#hud .gather i { border-radius: 2px; background: #ffb15c; }

/* kartu tips & tooltip kunci: tipis, di atas hotbar */
.tipcard { bottom: 86px; padding: 8px 14px; background: var(--hud-panel); border: 1px solid var(--hud-line); border-top: 0; border-radius: 4px; font-size: 13.5px; }
.tipcard .lbl { display: none; }
.tipcard kbd { min-width: 28px; height: 26px; font-size: 12px; }
.hint-lock { bottom: 72px; font-family: var(--font-body); font-size: 11px; letter-spacing: .04em; color: rgba(236, 228, 216, 0.55); background: none; }
.vehpanel { bottom: 86px; }

/* spanduk bab: tipis, elegan, tanpa neon */
.banner h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(30px, 4.2vw, 54px); letter-spacing: .28em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85); color: #fff; }
.banner.vanta h2 { color: #e6dcff; text-shadow: 0 0 18px rgba(183, 123, 255, 0.5), 0 2px 18px rgba(0, 0, 0, 0.85); }
.banner.survivor h2 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
.banner p { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .3em; color: #d8d0c4; }

/* notifikasi: tengah-atas (tidak menabrak status kiri) */
#toasts { left: 50%; top: 56px; transform: translateX(-50%); align-items: center; }
.toast { background: var(--hud-panel); border: 1px solid var(--hud-line); border-left: 2px solid var(--survivor); border-radius: 3px; font-size: 13px; min-width: 0; }
.havenbadge { top: 14px; background: var(--hud-panel); border-radius: 3px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .12em; }
.bark { font-family: var(--font-body); border-radius: 6px; background: rgba(10, 10, 12, 0.86); border-color: rgba(255, 255, 255, 0.18); }
.bark b { font-family: var(--font-body); color: #ffc88a; letter-spacing: .14em; }
.objmark span { font-family: var(--font-body); font-weight: 600; }
.bossbar .name { font-family: var(--font-body); font-weight: 600; letter-spacing: .24em; }
#crosshair { top: 50%; opacity: .7; }
@media (max-width: 900px) { #hud .tracker { width: 220px; } #hud .bars { width: 140px; } #hud .minimap { width: 140px; height: 140px; } #hud .keys { display: none; } }
/* notifikasi sistem: kiri-bawah (area obrolan LifeAfter), tidak menabrak balon Dazzel */
#toasts { left: 18px; top: auto; bottom: 22px; transform: none; align-items: flex-start; }
.hint-lock { bottom: 2px; font-size: 10.5px; color: rgba(236, 228, 216, 0.4); }