/* 하이랜드 UI 연출(2026-10-17 사용자 "UI 연출이나 맵 이동 연출 등 같은 것도 좀 추가해봐" · 같은 날 정정 "UI 나인패치 디자인은 유지해줘").
   windows.css · hud.css 뒤에 실린다. 겉모양(나인패치 panel.webp · slot.webp · button-*.webp, 색, 상자 크기 · 여백)은 한 줄도 바꾸지 않고 움직임만 더한다:
   - 창 팝(작게 → 살짝 넘침 → 제자리) · 처음 열 때 내용 · 칸 순차 등장(.fx-intro = ui_fx.js 가 열린 뒤 800ms 만 붙인다 — 칸이 다시 그려져도 다시 튀지 않게)
   - 메뉴 펼침 · 칸 순차 · 탭 판 바뀜 · 고른 물품 칸 테 맥박 · 대화 창(초상 · 아래 판 · 이름 · 대사) 등장 · 받음 창 빛살 · 재화 숫자 튐 */

/* ---------------- 창 팝 · 처음 열 때 순차 등장 */
#ui .dim.open .popup { animation: fx-pop .34s cubic-bezier(.2, .9, .25, 1.15) both; }
#ui .dim.fx-intro .popup > * { animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; }
#ui .dim.fx-intro .popup > :nth-child(1) { animation-delay: .05s; } #ui .dim.fx-intro .popup > :nth-child(2) { animation-delay: .1s; }
#ui .dim.fx-intro .popup > :nth-child(3) { animation-delay: .15s; } #ui .dim.fx-intro .popup > :nth-child(4) { animation-delay: .2s; }
#ui .dim.fx-intro .popup > :nth-child(n+5) { animation-delay: .24s; }
#ui .dim.fx-intro .popup-head h2 { animation: fx-title .4s .08s cubic-bezier(.2, .9, .3, 1.3) both; }
#ui .dim.fx-intro :is(.item-cell:not(.off), .shop-card, .vip-card, .equip-cell:not(.gap)) { animation: fx-cell .28s cubic-bezier(.2, .9, .3, 1.3) both; }
#ui .dim.fx-intro .mail-row { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; }   /* 우편 줄 = 스크롤 칸 안 덩어리라 1 을 넘으면 테두리에 잘린다(10-24 사용자 "우편함도 비슷하게 짤림") */
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(1) { animation-delay: .14s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(2) { animation-delay: .17s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(3) { animation-delay: .2s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(4) { animation-delay: .23s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(5) { animation-delay: .26s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(6) { animation-delay: .29s; }
#ui .dim.fx-intro :is(.item-cell, .shop-card, .mail-row, .vip-card, .equip-cell):nth-child(n+7) { animation-delay: .32s; }
#ui .tab-panel:not([hidden]) { animation: fx-fade .22s ease-out both; }
#ui .item-cell.on { animation: fx-ring 1.1s ease-in-out infinite; }
#ui .close:active { transform: scale(.9); }

/* ---------------- 메뉴 펼침: 도구 줄(오른쪽 위)에서 떨어지듯 + 칸 순차 */
#ui .menu-pop { transform-origin: calc(100% - 22px) 0; }
#ui .menu-pop:not([hidden]) { animation: fx-drop .26s cubic-bezier(.2, .9, .3, 1.2) both; }
#ui .menu-pop:not([hidden]) .menu-item { animation: fx-rise .3s cubic-bezier(.2, .9, .3, 1.25) both; }
#ui .menu-pop:not([hidden]) .menu-item { animation-delay: calc(var(--i, 0) * .03s + .03s); }   /* --i = 칸 순서(10-menu-pop) — 칸 수 제한 없음(전엔 8칸까지만 있어 9번째 친구가 같이 튀었다) */

/* ---------------- 받음 창(2026-10-18 EFZ obj_item_get_direction · obj_reward_window · scr_reward_flair_draw_ranked, 광마 띠 빛줄기): 자리 · 크기는 windows.css
   열림: 막 → 띠 펼침(세로 비율 유지가 아닌 띠 높이만 — 판이 아니라 빛 띠) → 섬광 입자 600ms → 제목 튐 → 칸마다 70ms 시차 420ms 팝인(고르게 커짐, 한 축 찌그러짐 없음) + 등장 번쩍 고리
   계속: 등급 글로우 맥동 1047ms(sin t·.006) · 에픽↑ 광선 회전 · 유니크↑ 고리 2400ms(전설 1500ms) · 판 모양 반짝임 · 띠 위아래 선을 지나는 빛(광마 tan 흐름) */
#ui #got-dim.open .got-band { animation: fx-got-band .36s cubic-bezier(.2, .9, .3, 1) both; }
#ui #got-dim.open .got-line::after { animation: fx-got-line 2.6s linear infinite; }
#ui #got-dim.open .got-line.bottom::after { animation-delay: -1.3s; animation-direction: reverse; }
#ui #got-dim.open .got-spark { animation: fx-got-spark .6s calc(.08s + var(--d) * .05s) cubic-bezier(.15, .8, .3, 1) both; }
#ui #got-dim.open .got-title { animation: fx-title .45s .1s cubic-bezier(.2, .9, .3, 1.4) both; }
#ui #got-dim.open .got-cell { animation: fx-got-in .42s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(.22s + var(--i, 0) * .07s); }
#ui #got-dim.open .got-cell:nth-child(2) { --i: 1; } #ui #got-dim.open .got-cell:nth-child(3) { --i: 2; } #ui #got-dim.open .got-cell:nth-child(4) { --i: 3; }
#ui #got-dim.open .got-cell:nth-child(5) { --i: 4; } #ui #got-dim.open .got-cell:nth-child(6) { --i: 5; } #ui #got-dim.open .got-cell:nth-child(7) { --i: 6; }
#ui #got-dim.open .got-cell:nth-child(8) { --i: 7; } #ui #got-dim.open .got-cell:nth-child(9) { --i: 8; } #ui #got-dim.open .got-cell:nth-child(n+10) { --i: 9; }
#ui #got-dim.open .got-glow { animation: fx-got-pulse 1.047s ease-in-out infinite; }
#ui #got-dim.open .got-rays { animation: fx-spin 25s linear infinite, fx-got-blink 1.047s ease-in-out infinite; }
#ui #got-dim.open .got-cell.g-legendary .got-rays { animation-duration: 18s, 1.047s; }
#ui #got-dim.open .got-ring { animation: fx-got-ring .55s calc(.3s + var(--i, 0) * .07s) ease-out both; }
#ui #got-dim.open .got-cell.g-unique .got-ring { animation: fx-got-ring .55s calc(.3s + var(--i, 0) * .07s) ease-out both, fx-got-ring 2.4s 1.2s ease-out infinite; }
#ui #got-dim.open .got-cell.g-legendary .got-ring { animation: fx-got-ring .55s calc(.3s + var(--i, 0) * .07s) ease-out both, fx-got-ring 1.5s 1s ease-out infinite; border-color: #ffd24a; }
#ui #got-dim.open .got-cell:is(.g-epic, .g-unique, .g-legendary) .got-slot { animation: fx-got-edge 1.047s ease-in-out infinite; }
#ui #got-dim.open .got .ask-buttons { animation: fx-rise .3s .5s both; }

/* ---------------- 구매 판: 그림이 튀어 오르고 후광이 번진다 */
#ui #buy-dim.open .buy-art { animation: fx-got-in .42s .08s cubic-bezier(.2, .9, .3, 1.35) both; }

/* ---------------- 필드 줍기 알림(ui_fx.js RtUiFx.itemToast — 장비를 주우면 화면 위 가운데에 칸 + 이름, 등급 빛. 창 층 #ui 안 = 캔버스와 같이 돈다) */
#ui #gf-toast { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#ui #gf-toast .toasts { position: absolute; left: 50%; top: 58px; width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#ui .gf-item-toast { --ac: #ffe08a; position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; white-space: nowrap;
  background: linear-gradient(90deg, rgba(10, 12, 8, 0), rgba(10, 12, 8, .66) 18%, rgba(10, 12, 8, .66) 82%, rgba(10, 12, 8, 0)); animation: fx-toast 2.4s ease-out both; }
#ui .gf-item-toast.g-rare { --ac: #6fb4ff; } #ui .gf-item-toast.g-epic { --ac: #c58cff; } #ui .gf-item-toast.g-unique { --ac: #ffc94a; } #ui .gf-item-toast.g-legendary { --ac: #ff8a5a; }
#ui .gf-item-toast::before, #ui .gf-item-toast::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: .8; }
#ui .gf-item-toast::before { top: 0; } #ui .gf-item-toast::after { bottom: 0; }
#ui .gf-item-toast .ts { position: relative; flex: none; width: 38px; height: 38px; border: 6px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 6px stretch; animation: fx-got-in .38s .05s cubic-bezier(.2, .9, .3, 1.4) both; }
#ui .gf-item-toast .ts::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 60%, transparent) 0 20%, transparent 62%); animation: fx-got-pulse 1.047s ease-in-out infinite; }
#ui .gf-item-toast:is(.g-epic, .g-unique, .g-legendary) .ts::after { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(var(--ac) 0 5deg, transparent 5deg 36deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 38%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 38%, transparent 70%); animation: fx-spin 9s linear infinite; }
#ui .gf-item-toast img { position: absolute; left: 1px; top: 1px; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
#ui .gf-item-toast b { position: relative; font-size: 14px; font-weight: 900; color: var(--ac); text-shadow: 1.3px 0 #000, -1.3px 0 #000, 0 1.3px #000, 0 -1.3px #000, 1px 1px #000, -1px -1px #000; }
#ui .gf-item-toast.g-common b { color: #fff; }
#ui .gf-item-toast span { position: relative; font-size: 12px; font-weight: 800; color: #f2f0e7; text-shadow: 1.2px 0 #000, -1.2px 0 #000, 0 1.2px #000, 0 -1.2px #000; }

/* ---------------- 대화 창 등장: 초상은 왼쪽에서 미끄러져, 아래 판은 올라오며, 이름 → 대사 순 */
#ui .talk:not([hidden]) .talk-dim { animation: fx-fade .25s ease-out both; }
#ui .talk:not([hidden]) .talk-portrait { animation: fx-slide-l .38s cubic-bezier(.2, .85, .3, 1.1) both; }
#ui .talk:not([hidden]) .talk-shade { animation: fx-up .3s ease-out both; }
#ui .talk:not([hidden]) :is(.talk-mark, .talk-name) { animation: fx-slide-l2 .3s .12s ease-out both; }
#ui .talk:not([hidden]) :is(.talk-rule, .talk-line) { animation: fx-fade .3s .2s ease-out both; }
#ui .talk-next i { animation: fx-bob .8s ease-in-out infinite alternate; }

/* ---------------- 머리줄 재화 숫자 튐(ui_fx.js 가 값이 바뀌면 .fx-bump) */
#hud .coin.fx-bump { animation: fx-bump .42s cubic-bezier(.2, .9, .3, 1.4); }
#hud .coin.fx-bump b { animation: fx-flash .42s ease-out; }

@keyframes fx-pop { 0% { transform: scale(.82) translateY(16px); opacity: 0; } 55% { transform: scale(1.025) translateY(-2px); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fx-rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-cell { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-title { 0% { transform: scale(.6); opacity: 0; } 65% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-drop { 0% { transform: scale(.7) translateY(-10px); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fx-up { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-slide-l { 0% { transform: translateX(-60px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-slide-l2 { 0% { transform: translateX(-16px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-bob { 0% { transform: translateY(-1px); } 100% { transform: translateY(3px); } }
@keyframes fx-ring { 0%, 100% { outline-offset: 2px; } 50% { outline-offset: 3.5px; } }
@keyframes fx-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes fx-bump { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes fx-flash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes fx-got-band { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes fx-got-line { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@keyframes fx-got-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(1.1); } }
@keyframes fx-got-in { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* 큰 덩어리(카드 · 판) 등장 = 1 을 넘지 않는다 — 스크롤 칸(overflow) 안에서 1.12 튐은 테두리에 잘린다(10-24 사용자 "연출 쓸 때 왜 이렇게 잘리냐 · 한두 가지가 아님"). 커지는 튐(fx-got-in)은 칸 · 아이콘 크기만 */
@keyframes fx-card-in { 0% { transform: translateY(6px) scale(.97); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-got-pulse { 0%, 100% { opacity: .62; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes fx-got-blink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fx-got-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes fx-got-edge { 0%, 100% { filter: drop-shadow(0 0 2px var(--ac)); } 50% { filter: drop-shadow(0 0 7px var(--ac)); } }
@keyframes fx-toast { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 10% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
/* 전광판 글자(ui_fx.js watchMarquee, 10-24 사용자 "영어는 칸을 넘어가는 문제 … 넘어가면 전광판 효과"): 칸보다 긴 글만 칸 안에서 오간다.
   양 끝 1.2s 쉼 → 22px/s 로 흐름, 칸 양 끝 4px 흐림(글자가 칸 테에 칼같이 잘려 보이지 않게). 가운데 맞춘 칸도 흐를 때는 왼쪽부터 보여 준다. */
#ui .fx-mq, #hud .fx-mq { overflow: hidden !important; text-overflow: clip !important; justify-content: flex-start !important; text-align: left !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent); mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent); }
#ui .fx-mq-in, #hud .fx-mq-in { display: inline-block; white-space: nowrap; will-change: transform; animation: fx-mq var(--mq-t, 4s) ease-in-out infinite alternate; }
/* 닉네임 칸(ui_fx.js MQ_NAME · nameFit, 10-25 사용자 "닉네임은 전광판효과없이 길어도 그냥 다 보여줘야할거같음"): 전광판 · 말줄임 없이 — 길면 글자 크기를 줄여 칸에 다 넣는다 */
#ui .rk-who > b, #ui .rk-me-name, #ui .f-text > b, #ui .pf-name, #ui .chat-name, #ui .inv-name, #ui .gd-row[data-row-profile] .gd-line1 > b, #ui .gd-row[data-row-profile] .gd-row-main > b,
#ui .gd-row.r44 .gd-row-main > b, #ui .gw-slot > b, #ui .pslot > b, #hud .pc-name, #ui .mp-name { text-overflow: clip !important; }
@keyframes fx-mq { 0%, 18% { transform: none; } 82%, 100% { transform: translateX(var(--mq-d, 0)); } }
@media (prefers-reduced-motion: reduce) { #ui *, #hud * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }