/* feel.css — 회피 버튼 · 콤보 계기 · 손맛 알림(JUST!/섬멸!/BREAK) · 전투 평가 도장 (feel.js) */

/* 회피: 궁극기 버튼 위, 엄지가 바로 닿는 자리 */
.sb.dg { right: 14px; bottom: 150px; width: 54px; height: 54px; --c: #9ae0ff; }
.sb.dg .ic { background: radial-gradient(circle at 50% 35%, #2a5a78, #0e0c18 75%); font-size: 22px; }
.sb.dg .nm { font-size: 9px; bottom: 3px; }
.sb.dg.ready { box-shadow: 0 0 0 2px #000, 0 0 10px rgba(154,224,255,.55); }
.sb.dg.hint { animation: dgHint .55s ease-in-out 7 alternate; }
.sb.dg.flash { animation: dgFlash .5s; }
@keyframes dgHint { from { transform: scale(1); box-shadow: 0 0 0 2px #000, 0 0 6px #ff5a4a; } to { transform: scale(1.18); box-shadow: 0 0 0 2px #000, 0 0 26px #ff5a4a; } }
@keyframes dgFlash { 0% { transform: scale(1.3); box-shadow: 0 0 0 2px #000, 0 0 30px #fff6c0; } 100% { transform: scale(1); } }

/* 콤보 계기: 오른쪽 가운데 */
#combo { position: absolute; right: 16px; top: 44%; text-align: right; pointer-events: none; opacity: 0; transition: opacity .25s; }
#combo.on { opacity: 1; }
#combo b { display: inline-block; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-style: italic; font-size: 34px; line-height: 1; color: #fff; text-shadow: 2px 2px 0 #000, 0 0 10px #8ad8ff; font-variant-numeric: tabular-nums; }
#combo small { margin-left: 3px; font-weight: 900; font-style: italic; font-size: 12px; color: #8ad8ff; text-shadow: 1px 1px 0 #000; }
#combo em { display: block; font-style: normal; font-weight: 900; font-size: 10px; color: #ffe680; text-shadow: 1px 1px 0 #000; min-height: 12px; }
#combo i { display: block; margin: 2px 0 0 auto; width: 76px; height: 3px; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
#combo i s { display: block; height: 100%; background: linear-gradient(90deg, #8ad8ff, #fff); }
#combo.pop b { animation: comboPop .16s ease-out; }
#combo.hot b { color: #ffe680; text-shadow: 2px 2px 0 #000, 0 0 14px #ff8a20; }
#combo.hot i s { background: linear-gradient(90deg, #ff8a20, #ffe680); }
@keyframes comboPop { from { transform: scale(1.35); } }

/* 손맛 알림: 화면 가운데 위, 짧고 굵게 */
#burst { position: absolute; left: 0; right: 0; top: 22%; text-align: center; pointer-events: none; opacity: 0; }
#burst b { display: block; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-style: italic; font-size: clamp(26px, 8vh, 48px); letter-spacing: 2px; color: #fff; text-shadow: 3px 3px 0 #000, 0 0 18px #8ad8ff; }
#burst small { display: inline-block; margin-top: 2px; padding: 2px 10px; font-weight: 900; font-size: 11px; background: rgba(8,6,20,.7); border-radius: 3px; text-shadow: 0 1px 2px #000; color: #e8f4ff; }
#burst.on { animation: burst 1.1s forwards; }
#burst.just b { color: #fff6c0; text-shadow: 3px 3px 0 #000, 0 0 22px #ffd84a; }
#burst.combo b { color: #8ad8ff; font-size: clamp(22px, 6.5vh, 38px); }
#burst.wipe b { color: #ffe680; text-shadow: 3px 3px 0 #000, 0 0 22px #ff8a20; }
#burst.brk b { color: #ff7a6a; font-size: clamp(18px, 5vh, 30px); text-shadow: 2px 2px 0 #000; }
#burst.brk small { color: #ffc0b8; }
@keyframes burst { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(.94); } 20% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

html.vp-touch #hud .sb.dg { min-width: calc(40px / var(--vs, 1)); min-height: calc(40px / var(--vs, 1)); }
html.vp-touch #hud .sb.dg .nm { font-size: calc(12px / var(--vs, 1)); }
html.vp-touch #combo small, html.vp-touch #combo em,
html.vp-touch #burst small, html.vp-touch #bossbar .brk span { font-size: calc(12px / var(--vs, 1)); }
@media (max-height: 420px) {
  #combo { top: 38%; }
  #combo b { font-size: 26px; }
}

/* 결과: 전투 평가 도장 */
.res-rank { position: absolute; right: 18px; top: 10px; width: 78px; height: 78px; display: grid; place-items: center; border: 4px solid var(--rk, #ffd84a); border-radius: 50%; transform: rotate(-12deg); font-family: 'Black Han Sans', sans-serif; font-size: 50px; line-height: 1; color: var(--rk, #ffd84a); text-shadow: 2px 2px 0 #000; box-shadow: 0 0 0 3px #000, 0 0 24px color-mix(in srgb, var(--rk, #ffd84a) 60%, transparent); background: rgba(10,6,24,.72); animation: rankStamp .45s cubic-bezier(.2,1.6,.4,1) .9s both; }
.res-rank small { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%) rotate(12deg); white-space: nowrap; font-family: inherit; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.res-rank.S { --rk: #ffd84a; } .res-rank.A { --rk: #ff9ad0; } .res-rank.B { --rk: #8ad8ff; } .res-rank.C { --rk: #b0b0c0; }
.res-box { position: relative; }
.res-feel { font-size: 11px; font-weight: 900; color: #ffe680; margin: 2px 0; }
.res-feel em { font-style: normal; color: #fff; }
@keyframes rankStamp { from { opacity: 0; transform: rotate(-12deg) scale(3); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* 보스 그로기 게이지: 체력 막대 아래 얇은 띠 */
#bossbar .brk { position: relative; margin: 6px 6% 0 8%; height: 5px; background: rgba(0,0,0,.7); box-shadow: 0 0 0 1px rgba(255,230,128,.35); }
#bossbar .brk i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #c08a20, #ffe680); transition: width .12s; }
#bossbar .brk span { position: absolute; right: 0; top: 6px; font-size: 9px; font-weight: 900; color: #ffe680; text-shadow: 0 1px 2px #000; opacity: .75; }
#bossbar.broken .brk i { background: #fff6c0; box-shadow: 0 0 10px #ffe680; animation: brkBlink .3s infinite alternate; }
#bossbar.broken .brk span { opacity: 1; }
@keyframes brkBlink { to { opacity: .45; } }

/* 최고 평가 배지(필드 조우 창·스토리 목록) */
.fp-rank { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 3px; border-radius: 3px; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 13px; line-height: 1; color: #1a1206; background: #b0b0c0; box-shadow: 0 0 0 1px #000; vertical-align: middle; }
.fp-rank.rS { background: linear-gradient(#fff2b0, #ffc840); box-shadow: 0 0 0 1px #000, 0 0 8px #ffd84a; }
.fp-rank.rA { background: #ff9ad0; } .fp-rank.rB { background: #8ad8ff; }

/* 안전 이동: 조작 캐릭터가 적 장판 안에 있을 때만 회피 버튼 왼쪽에 나타난다 */
.sb.sm { right: 74px; bottom: 156px; width: 46px; height: 46px; --c: #8ad8ff; opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .12s, transform .12s; }
.sb.sm .ic { background: radial-gradient(circle at 50% 35%, #245a6a, #0e0c18 75%); font-size: 18px; }
.sb.sm .nm { font-size: 9px; bottom: 2px; }
.sb.sm.on { opacity: 1; transform: none; pointer-events: auto; animation: smPulse .5s ease-in-out infinite alternate; }
.sb.sm.go { animation: none; box-shadow: 0 0 0 2px #000, 0 0 16px #8ad8ff; }
.sb.sm:not(.ready) .ic { opacity: 1; filter: none; }
@keyframes smPulse { from { box-shadow: 0 0 0 2px #000, 0 0 4px #ff5a4a; } to { box-shadow: 0 0 0 2px #000, 0 0 18px #ff5a4a; } }
html.vp-touch #hud .sb.sm .nm { font-size: calc(10px / var(--vs, 1)); }

/* 전투 끝: VICTORY / DEFEAT */
#burst.win b { font-size: clamp(34px, 11vh, 68px); letter-spacing: 6px; color: #ffe680; text-shadow: 3px 3px 0 #000, 0 0 26px #ff9a20, 0 0 50px #ffd84a; }
#burst.win small { color: #fff6c0; font-size: 12px; }
#burst.lose b { font-size: clamp(30px, 10vh, 60px); letter-spacing: 6px; color: #b8b8c8; text-shadow: 3px 3px 0 #000, 0 0 20px #402060; }
#burst.win.on, #burst.lose.on { animation: burstEnd 2.2s forwards; }
@keyframes burstEnd { 0% { opacity: 0; transform: scale(2.2); } 10% { opacity: 1; transform: scale(.94); } 16% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }