/* NACHHALL – HUD */
#hud { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
body.cinematic #hud-vitals, body.cinematic #hud-equip, body.cinematic #hud-quest, body.cinematic #hud-top, body.cinematic #hud-sneak,
body.in-dialogue #hud-vitals, body.in-dialogue #hud-equip, body.in-dialogue #hud-quest, body.in-dialogue #hud-prompt { opacity: 0; }
#hud > * { transition: opacity 0.4s; }

/* Lebens-, Ausdauer-, Fokusbalken */
#hud-vitals { position: absolute; left: calc(18px + var(--safe-l)); top: calc(16px + var(--safe-t)); display: flex; flex-direction: column; gap: 5px; }
.hud-bar { position: relative; height: 5px; width: clamp(130px, 18vw, 230px); background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.hud-bar .fill, .hud-bar .lag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
.hud-bar.hp { height: 7px; }
.hud-bar.hp .fill { background: linear-gradient(90deg, #b8423a, #e8766a); box-shadow: 0 0 8px rgba(232, 118, 106, 0.5); }
.hud-bar.hp .lag { background: rgba(255, 230, 200, 0.55); transition: transform 0.6s ease 0.3s; }
.hud-bar.st { width: clamp(100px, 14vw, 180px); height: 3px; }
.hud-bar.st .fill { background: #d8d2c0; }
.hud-bar.fo { width: clamp(100px, 14vw, 180px); height: 3px; display: none; }
.hud-bar.fo .fill { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hud-bar.fo.show { display: block; }
.hud-bar.flash { animation: barflash 0.4s 2; }
@keyframes barflash { 50% { border-color: var(--danger); background: rgba(160,30,20,0.6); } }
#hud-vitals.low .hp .fill { animation: lowhp 1s infinite; }
@keyframes lowhp { 50% { opacity: 0.5; } }

/* Ausrüstung */
#hud-equip { position: absolute; left: calc(18px + var(--safe-l)); top: calc(46px + var(--safe-t)); display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
#hud-equip .eq { display: flex; align-items: center; gap: 5px; }
#hud-equip svg { width: 15px; height: 15px; color: #ddd; }
#hud-equip .eq.dim { opacity: 0.4; }

/* Quest */
#hud-quest { position: absolute; right: calc(18px + var(--safe-r)); top: calc(18px + var(--safe-t)); max-width: min(330px, 40vw); text-align: right; }
#hud-quest .q-title { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px; }
#hud-quest .q-title.side { color: var(--accent); }
#hud-quest .q-obj { font-size: 13px; color: var(--text); line-height: 1.4; text-shadow: 0 1px 4px #000; }
#hud-quest .q-obj div { margin-bottom: 2px; }
#hud-quest .q-obj div::before { content: '◇ '; color: var(--text-faint); font-size: 10px; }
#hud-quest.pulse .q-obj { animation: qpulse 1.2s ease 2; }
@keyframes qpulse { 50% { color: #fff; text-shadow: 0 0 12px rgba(240,179,100,0.9); } }
body.has-touch #hud-quest { top: calc(62px + var(--safe-t)); }

/* Oben rechts: Tagebuch / Pause */
#hud-top { position: absolute; right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t)); display: none; gap: 8px; pointer-events: auto; }
body.has-touch #hud-top, body.show-hud-buttons #hud-top { display: flex; }
body.has-touch #hud-quest, body.show-hud-buttons #hud-quest { top: calc(60px + var(--safe-t)); }
.hud-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(10,12,18,0.5); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }
.hud-btn svg { width: 20px; height: 20px; color: #ddd; }
.hud-btn:active { background: rgba(127,216,230,0.25); }

/* Toasts */
#hud-toasts { position: absolute; right: calc(18px + var(--safe-r)); top: calc(110px + var(--safe-t)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.toast { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; background: linear-gradient(90deg, rgba(10,12,18,0), rgba(10,12,18,0.8) 20%); color: var(--text); font-size: 13px; letter-spacing: 0.03em; animation: toastIn 0.4s ease, toastOut 0.6s ease forwards; animation-delay: 0s, var(--life, 3.4s); border-right: 2px solid var(--text-dim); max-width: min(380px, 60vw); }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.item { border-right-color: var(--accent-2); }
.toast.doc, .toast.people { border-right-color: var(--accent); }
.toast.warn { border-right-color: var(--danger); color: #f0c8c0; }
.toast.save, .toast.heal { border-right-color: var(--good); }
.toast.upgrade { border-right-color: #fff; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(10px); } }

/* "... wird sich daran erinnern." */
#hud-remember { position: absolute; left: calc(18px + var(--safe-l)); top: calc(76px + var(--safe-t)); display: flex; align-items: center; gap: 10px; font-family: var(--font-story); font-style: italic; font-size: 15px; color: #f2eee4; opacity: 0; transition: opacity 0.8s; text-shadow: 0 1px 6px #000; }
#hud-remember.show { opacity: 1; }
#hud-remember::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); box-shadow: 0 0 12px var(--accent), inset 0 0 8px var(--accent); animation: remPulse 1.4s ease-in-out infinite; }
@keyframes remPulse { 50% { transform: scale(0.8); opacity: 0.5; } }

/* Quest-Banner */
#hud-banner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.7s; white-space: nowrap; }
#hud-banner.show { opacity: 1; }
#hud-banner .b-kind { font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
#hud-banner .b-title { font-size: clamp(20px, 3vw, 34px); letter-spacing: 0.15em; color: #fff; font-weight: 300; text-shadow: 0 2px 20px #000; }
#hud-banner.side .b-kind { color: var(--accent); }
#hud-banner.done .b-kind { color: var(--good); }
#hud-banner.failed .b-kind { color: var(--danger); }
#hud-banner::after { content: ''; display: block; height: 1px; margin: 12px auto 0; width: 0; background: currentColor; transition: width 1.2s ease; color: var(--text-dim); }
#hud-banner.show::after { width: 100%; }

/* Gebietstitel */
#hud-area { position: absolute; left: calc(7vw + var(--safe-l)); bottom: 20%; opacity: 0; transition: opacity 1.4s; }
#hud-area.show { opacity: 1; }
#hud-area .a-name { font-size: clamp(22px, 3.4vw, 44px); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 300; color: #f4f0e8; text-shadow: 0 0 30px rgba(0,0,0,0.9); }
#hud-area .a-line { height: 1px; width: 0; background: var(--accent); margin: 10px 0; transition: width 1.6s ease 0.3s; }
#hud-area.show .a-line { width: 180px; }
#hud-area .a-sub { font-family: var(--font-story); font-style: italic; font-size: clamp(13px, 1.5vw, 17px); color: var(--text-dim); }

/* Interaktionshinweis */
#hud-prompt { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; transform: translate(-50%, -100%); opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
#hud-prompt.show { opacity: 1; }
#hud-prompt .key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid rgba(255,255,255,0.7); border-radius: 3px; font-size: 11px; background: rgba(0,0,0,0.6); color: #fff; }
#hud-prompt .key svg { width: 14px; height: 14px; }
#hud-prompt .lbl { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px #000, 0 0 10px #000; }

/* Tutorial-Hinweis */
#hud-hint { position: absolute; left: 50%; bottom: calc(18% + var(--safe-b)); transform: translateX(-50%); padding: 10px 18px; background: rgba(8,10,14,0.78); border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--text); letter-spacing: 0.04em; opacity: 0; transition: opacity 0.5s; max-width: 86vw; text-align: center; line-height: 1.6; }
#hud-hint.show { opacity: 1; }
#hud-hint .kbd { margin: 0 2px; }
body.has-touch #hud-hint { bottom: auto; top: 26%; }

#hud-popup { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 22px; letter-spacing: 0.5em; color: #fff4d0; text-shadow: 0 0 20px rgba(255,220,150,0.9); opacity: 0; font-weight: 300; }
#hud-popup.show { animation: pop 0.9s ease forwards; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(1.3); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%); } }

/* Boss */
#hud-boss { position: absolute; left: 50%; bottom: calc(9% + var(--safe-b)); transform: translateX(-50%); width: min(560px, 70vw); opacity: 0; transition: opacity 0.6s; text-align: center; }
#hud-boss.show { opacity: 1; }
#hud-boss .name { font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; color: #e8c8b8; margin-bottom: 6px; }
#hud-boss .bar { height: 6px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); }
#hud-boss .fill { height: 100%; background: linear-gradient(90deg, #7a1e18, #d8543e); transform-origin: left; transition: transform 0.2s; }
body.has-touch #hud-boss { bottom: auto; top: calc(14px + var(--safe-t)); width: min(420px, 46vw); }

#hud-sneak { position: absolute; left: calc(18px + var(--safe-l)); top: calc(68px + var(--safe-t)); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); opacity: 0; }
#hud-sneak.show { opacity: 0.85; }
#hud-fps { position: absolute; left: 50%; top: calc(6px + var(--safe-t)); transform: translateX(-50%); font: 11px monospace; color: #8f8; display: none; }
body.show-fps #hud-fps { display: block; }
#hud-save { position: absolute; right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); width: 22px; height: 22px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; opacity: 0; transition: opacity 0.5s; }
#hud-save.show { opacity: 0.8; animation: spin 1s linear infinite; }
body.has-touch #hud-save { bottom: auto; top: calc(64px + var(--safe-t)); right: auto; left: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sprechblasen über Figuren */
#barks { position: absolute; inset: 0; }
.bark { position: absolute; transform: translate(-50%, -100%); max-width: 260px; padding: 6px 10px; background: rgba(8,10,14,0.78); border-radius: 3px; font-size: 12px; font-family: var(--font-story); font-style: italic; color: #eee; text-align: center; animation: toastIn 0.3s ease; white-space: normal; line-height: 1.35; }
.bark::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(8,10,14,0.78); border-bottom: 0; }

@media (max-height: 460px) {
  #hud-quest .q-obj { font-size: 11px; }
  #hud-toasts { top: calc(96px + var(--safe-t)); }
  .toast { font-size: 11px; padding: 5px 10px; }
  #hud-area { bottom: 26%; }
}