#interact{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(34px,env(safe-area-inset-bottom));min-width:110px}#dialogue{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(620px,90vw);padding:16px 20px;background:var(--ui-panel-interactions-dialogue-background);border:1px solid var(--ui-panel-interactions-dialogue-border);border-radius:15px;z-index:4}#dialogue p{margin:0 0 14px;line-height:1.6;font-size:15px}#dialogue button{margin-right:10px}#notice{background:var(--ui-hud-interactions-notice-background);border:1px solid var(--ui-hud-interactions-notice-border);border-radius:10px;padding:8px 14px;font-size:12px;pointer-events:none}@media(max-height:450px){#dialogue{bottom:14px;padding:10px 16px}#dialogue p{font-size:13px;margin-bottom:8px}}

#dialogue-speaker{display:block;color:inherit;font-size:.92rem;line-height:1.4;margin:0 0 .3rem;overflow-wrap:anywhere;}
#dialogue-speaker[hidden]{display:none;}
/* F419: 의뢰 받기·완료 표시 — 대화 창 맨 위 꼬리표(받음 노랑 · 끝냄 금빛, 둘째 줄 목표/보상)와 화면 가운데 위 큰 알림(약 1.8초, 대화 창과 안 겹치는 높이). */
#dialogue-quest-tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px;padding:5px 10px;border:1px solid var(--ui-hud-f419-tag-accepted-line);border-radius:6px;background:var(--ui-hud-f419-tag-accepted-bg);color:var(--ui-hud-f419-tag-accepted-text);line-height:1.4;overflow-wrap:anywhere}
#dialogue-quest-tag[hidden],#dialogue-quest-tag span[hidden]{display:none}
#dialogue-quest-tag strong{font-size:14px;font-weight:800}
#dialogue-quest-tag span{font-size:12px;color:var(--ui-hud-f419-tag-detail-text)}
#dialogue-quest-tag.done{border-width:2px;border-color:var(--ui-hud-f419-tag-done-line);background:var(--ui-hud-f419-tag-done-bg);color:var(--ui-hud-f419-tag-done-text)}
#quest-banner{position:fixed;left:50%;top:max(12px,calc(env(safe-area-inset-top) + 15vh));transform:translateX(-50%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);padding:10px 28px;border:2px solid var(--ui-hud-f419-accepted-line);border-radius:999px;background:var(--ui-hud-f419-banner-bg);color:var(--ui-hud-f419-accepted-text);text-shadow:0 2px 0 var(--ui-hud-f419-banner-shadow);text-align:center;animation:f419-banner 1.8s ease-out both}
#quest-banner[hidden],#quest-banner span[hidden]{display:none}
#quest-banner strong{font-size:28px;font-weight:800;letter-spacing:.04em;line-height:1.15}
#quest-banner span{font-size:14px;font-weight:700;color:var(--ui-hud-f419-banner-sub);overflow-wrap:anywhere}
#quest-banner.done{border-color:var(--ui-hud-f419-done-line);color:var(--ui-hud-f419-done-text);box-shadow:0 0 18px var(--ui-hud-f419-done-glow)}
#quest-banner.done::before,#quest-banner.done::after{content:'\2726';position:absolute;font-size:20px;color:var(--ui-hud-f419-done-text);animation:f419-sparkle .9s ease-out 2 both}
#quest-banner.done::before{left:-6px;top:-8px}
#quest-banner.done::after{right:-6px;bottom:-8px;animation-delay:.25s}
@keyframes f419-banner{0%{opacity:0;transform:translate(-50%,-8px) scale(.92)}12%{opacity:1;transform:translate(-50%,0) scale(1.05)}22%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,0) scale(1)}}
@keyframes f419-sparkle{0%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){#quest-banner,#quest-banner.done::before,#quest-banner.done::after{animation:none}}
@media(max-height:450px){#quest-banner{padding:6px 20px}#quest-banner strong{font-size:20px}#quest-banner span{font-size:12px}}
