/* field.css — 필드 HUD(#fhud)와 스토리 대사창(#story). pixel-theme.css 다음에 읽는다 */
#fhud, #story { font-family: var(--pixel-font, 'Galmuri11', sans-serif); }
#fhud { position: fixed; inset: 0; pointer-events: none; z-index: 8; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#fhud.hide { display: none; }
#fhud button { pointer-events: auto; font-family: inherit; }
.fh-top { position: absolute; left: 10px; top: 10px; }
.fh-reg { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px 7px; background: #111d2c; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c, 4px 4px 0 rgba(0,0,0,.45); color: #fff; }
.fh-reg small { color: #ffd76a; font-size: 10px; }
.fh-reg b { font-size: 16px; letter-spacing: 1px; }
.fh-goal { font-size: 11px; color: #ffe0a0; }
.fh-goal::before { content: '▶ '; color: #ff8a5a; }
.fh-mini { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fh-mini canvas { width: min(190px, 24vw); aspect-ratio: 16 / 10; background: #0a1420; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c, 4px 4px 0 rgba(0,0,0,.45); image-rendering: pixelated; }
.fh-btns { display: flex; gap: 4px; }
.fh-btns button { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; font-size: 9px; color: #f5e6ba; background: #1c2c44; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c, 3px 3px 0 rgba(0,0,0,.4); cursor: pointer; }
.fh-btns button .ico { width: 18px; height: 18px; }
.fh-btns button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #111d2c; }
.fh-panel { position: absolute; right: 10px; bottom: 12px; width: min(300px, 44vw); max-height:calc(100vh - 24px); overflow-y:auto; padding: 10px 12px; background: #111d2c; color: #fff; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c, 5px 5px 0 rgba(0,0,0,.5); pointer-events: auto; transform: translateY(130%); transition: transform .22s steps(6); }
.fh-panel:not(.on) { visibility: hidden; pointer-events: none; }
.fh-panel.on { transform: none; visibility: visible; }
.fp-h em { display: inline-block; font-style: normal; font-size: 10px; padding: 1px 6px; background: #ffd76a; color: #111d2c; }
.fp-h em.boss { background: #ff4a3a; color: #fff; } .fp-h em.dg { background: #b080ff; color: #fff; }
.fp-h b { display: block; font-size: 16px; margin-top: 3px; }
.fp-h small { font-size: 10px; opacity: .75; }
.fp-b { margin: 6px 0; font-size: 11px; display: flex; flex-direction: column; gap: 5px; }
.fp-b p { margin: 0; line-height: 1.4; }
.fp-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 6px; align-items: baseline; }
.fp-row span { opacity: .7; } .fp-row b { font-size: 13px; }
.fp-foe { display: flex; align-items: center; gap: 2px; }
.fp-foe i { width: 24px; height: 24px; background: #0a1420 center/contain no-repeat; image-rendering: pixelated; border: 1px solid #5a6a80; }
.fp-foe small { margin-left: 6px; opacity: .8; }
.fp-stars span { color: #3a4a5a; font-size: 14px; } .fp-stars span.on { color: #ffd84a; }
.fp-stars small { opacity: .7; }
.fp-gimmicks { display:flex; flex-direction:column; gap:4px; padding:5px 7px; border:2px solid #b69b6c; background:#1b2c3d; }
.fp-gimmicks>div { display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; }
.fp-gimmicks span { flex:0 0 auto; padding:1px 4px; border:1px solid #887354; background:#273646; }
.fp-gimmicks small { flex:1 1 130px; min-width:0; color:#d6e2dc; font-size:10px; line-height:1.35; }
.fp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fp-tiers button small { display: block; font-size: 9px; }
.fp-act { display: flex; gap: 6px; flex-wrap: wrap; }
.fh-panel .gbtn, .fh-panel .nbtn { min-width: 0; flex: 1; height: 34px; font-size: 12px; white-space: nowrap; padding: 0 4px; }
.fh-panel .ok { color: #7aff9a; } .fh-panel .warn { color: #ff9a7a; }
.fh-toast { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); max-width: 80vw; padding: 6px 14px; background: #111d2c; color: #fff; border: 2px solid #f5e6ba; font-size: 12px; text-align: center; opacity: 0; pointer-events: none; }
.fh-toast.on { animation: fhToast 2.8s forwards; }
@keyframes fhToast { 0% { opacity: 0; transform: translate(-50%, 6px); } 8%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.fh-banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 8px 0 10px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(17,29,44,.92) 20%, rgba(17,29,44,.92) 80%, transparent); border-top: 2px solid #f5e6ba; border-bottom: 2px solid #f5e6ba; }
.fh-banner b { display: block; font-size: 26px; letter-spacing: 4px; color: #ffe07a; text-shadow: 2px 2px 0 #000; }
.fh-banner span { font-size: 13px; color: #fff; }
.fh-banner.foe { border-color: #ff5a4a; } .fh-banner.foe b { color: #ff6a5a; }
.fh-banner.dg b { color: #d8b0ff; } .fh-banner.ally b { color: #8affb0; }
.fh-banner.on { animation: fhBan 2.4s steps(24) forwards; }
.fh-banner.foe.on { animation-duration: .9s; }
@keyframes fhBan { 0% { opacity: 0; transform: scaleY(0); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fh-loading { position: fixed; inset: 0; display: grid; place-items: center; background: #0a1420; color: #f5e6ba; font-family: var(--pixel-font, sans-serif); z-index: 30; font-size: 16px; }

/* ---------- 스토리 대사창 ---------- */
#story { position: fixed; inset: 0; z-index: 45; cursor: pointer; }
#story.hide { display: none; }
#story .st-dim { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(6,8,16,.75)); }
#story .st-title { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); padding: 6px 22px; background: #111d2c; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c; color: #ffe07a; font-size: 15px; letter-spacing: 2px; opacity: 0; white-space: nowrap; }
#story .st-title.on { animation: fhBan 3.2s steps(24) forwards; }
.st-por { position: absolute; bottom: 0; height: 88%; max-width: 46vw; object-fit: contain; object-position: bottom; opacity: 0; filter: brightness(.45) saturate(.6); transition: filter .15s, opacity .15s; pointer-events: none; }
.st-por.l { left: 2%; } .st-por.r { right: 2%; transform: scaleX(-1); }
.st-por.on { opacity: 1; }
.st-por.talk { filter: none; }
.st-por.in { animation: porSlide .3s steps(6); }
.st-por.r.in { animation-name: porSlideR; }
@keyframes porSlide { from { transform: translateX(-30px); opacity: 0; } }
@keyframes porSlideR { from { transform: scaleX(-1) translateX(-30px); opacity: 0; } }
.st-box { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: min(760px, 90vw); min-height: 86px; padding: 18px 20px 14px; background: #111d2c; color: #fff; border: 2px solid #f5e6ba; box-shadow: 0 0 0 2px #111d2c, 6px 6px 0 rgba(0,0,0,.5); }
.st-name { position: absolute; left: 14px; top: -14px; padding: 2px 12px; background: var(--c, #ffe07a); color: #111d2c; font-size: 13px; border: 2px solid #111d2c; }
.st-name:empty { display: none; }
.st-text { margin: 0; font-size: 15px; line-height: 1.6; min-height: 2.9em; }
.st-box.narr { background: rgba(10,14,24,.94); text-align: center; } .st-box.narr .st-text { color: #e8e0c8; font-size: 14px; }
.st-box.tip { border-color: #8ad8ff; } .st-box.tip .st-name { background: #8ad8ff; }
.st-box.enemy { border-color: #ff6a5a; }
.st-next { position: absolute; right: 12px; bottom: 6px; font-style: normal; color: #ffe07a; animation: blink .6s steps(2) infinite alternate; }
.st-skip { position: absolute; right: 12px; top: 10px; padding: 4px 12px; background: #1c2c44; color: #f5e6ba; border: 2px solid #f5e6ba; font-family: inherit; font-size: 11px; cursor: pointer; }
@media (max-height: 420px) { .st-text { font-size: 13px; } .st-box { min-height: 70px; padding: 14px 16px 10px; } .st-por { height: 92%; } }

/* 길잡이: 권장 레벨 미달 경고(guide.js) */
.fp-train { margin: 4px 0; padding: 4px 6px; border-radius: 4px; background: rgba(120, 40, 20, .55); color: #ffd8b0; font-size: 11px; font-weight: 700; line-height: 1.35; }
.fp-train .nbtn { margin-left: 4px; padding: 2px 8px; font-size: 11px; }