/* 레벨 업 보상 카드(levelreward.js) — 창 층(#win-screen, GUI 450 배율) 가운데 위. 말씨 = 퀘스트 완료 띠(features/quest/quest.css ⑤): 짙은 반투명 띠 + 위아래 1px 금빛선 + 진주빛 명조.
   더함: 세로 빛기둥(아래에서 솟음) · 레벨 숫자 한 자씩 튐 · 보상 칸 순차 펼침(공용 .qr-cell 팝 70 ms) · 베이지 글자 폭 알약 · 다음 보상 미리보기(작은 칸, 흐림).
   튐(1 넘는 크기)은 숫자 · 칸에만 — 담은 판은 잘리는 스크롤 칸이 아니다. 단추는 #ui 를 붙인다(windows.css #ui button 이 배경 · 글꼴을 지움). */
.lvr { position: absolute; left: 0; right: 0; top: 58px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: var(--z-reward, 61); pointer-events: none; }
.lvr > * { pointer-events: auto; }
.lvr .lvr-dim { position: fixed; inset: -200px; z-index: -2; background: radial-gradient(ellipse 60% 52% at 50% 34%, rgba(6, 8, 10, .78), rgba(6, 8, 10, .55) 60%, rgba(6, 8, 10, .35)); animation: lvr-in .3s ease-out both; }
/* 빛기둥 = 가운데 세로 밝은 줄(아래 → 위로 솟음, 위 끝 흐림) — 발밑 연출(battle.js LV.pillar)과 같은 방향 */
.lvr .lvr-pillar { position: absolute; left: 50%; top: -58px; width: 150px; height: 330px; margin-left: -75px; z-index: -1; pointer-events: none; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 22% 60% at 50% 62%, rgba(255, 246, 214, .55), transparent 70%), linear-gradient(90deg, transparent, rgba(255, 228, 160, .2) 36%, rgba(255, 244, 210, .42) 50%, rgba(255, 228, 160, .2) 64%, transparent);
  -webkit-mask: linear-gradient(to top, transparent, #000 22%, #000 62%, transparent); mask: linear-gradient(to top, transparent, #000 22%, #000 62%, transparent);
  animation: lvr-pillar .62s cubic-bezier(.2, .8, .3, 1) both, lvr-breathe 2.2s ease-in-out .7s infinite; }
.lvr .lvr-rays { position: absolute; left: 50%; top: 32px; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 168, .12) 0deg 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 66%); mask: radial-gradient(circle, #000 16%, transparent 66%); animation: lvr-spin 10s linear infinite, lvr-in .5s ease-out .15s both; }
.lvr .lvr-motes { position: absolute; left: 50%; top: 36px; width: 0; height: 0; pointer-events: none; }
.lvr .lvr-motes > i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 5px rgba(255, 220, 140, .9); opacity: 0; animation: lvr-mote 1.6s cubic-bezier(.2, .7, .3, 1) both; }
.lvr .lvr-motes > i:nth-child(1) { --mx: -140px; --my: -30px; animation-delay: .2s; } .lvr .lvr-motes > i:nth-child(2) { --mx: 132px; --my: -36px; animation-delay: .24s; }
.lvr .lvr-motes > i:nth-child(3) { --mx: -84px; --my: -58px; animation-delay: .3s; } .lvr .lvr-motes > i:nth-child(4) { --mx: 90px; --my: -62px; animation-delay: .34s; }
.lvr .lvr-motes > i:nth-child(5) { --mx: -30px; --my: -74px; animation-delay: .4s; } .lvr .lvr-motes > i:nth-child(6) { --mx: 36px; --my: -78px; animation-delay: .44s; }
.lvr .lvr-motes > i:nth-child(7) { --mx: -176px; --my: 6px; animation-delay: .5s; } .lvr .lvr-motes > i:nth-child(8) { --mx: 170px; --my: 2px; animation-delay: .54s; }

.lvr .lvr-band { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 120px 7px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 14, .74) 22%, rgba(10, 12, 14, .74) 78%, transparent); animation: lvr-open .32s cubic-bezier(.2, .9, .3, 1) .12s both; }
.lvr .lvr-band::before, .lvr .lvr-band::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); }
.lvr .lvr-band::before { top: 0; } .lvr .lvr-band::after { bottom: 0; }
.lvr .lvr-big { font-family: "QuestTitle", "GwTitle", GFUIFont, serif; font-size: 15px; font-weight: 900; letter-spacing: 5px; color: #e9dcb8; text-shadow: 0 0 10px rgba(255, 228, 168, .5), 0 1px 3px #000;
  animation: lvr-gather .5s ease-out .2s both; }
.lvr .lvr-lv { display: flex; align-items: baseline; gap: 1px; font-family: "QuestTitle", "GwTitle", GFUIFont, serif; color: #fbf6ea; text-shadow: 0 0 14px rgba(255, 236, 190, .6), 0 2px 4px rgba(0, 0, 0, .85); line-height: 1; }
.lvr .lvr-lv > i { font-style: normal; font-size: 15px; font-weight: 900; margin-right: 3px; animation: lvr-fade .3s ease-out .34s both; }
.lvr .lvr-lv > b { display: inline-block; font-size: 34px; font-weight: 900; animation: lvr-digit .5s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(.38s + var(--i, 0) * 80ms); }
.lvr .lvr-sub { font-size: 12px; font-weight: 800; color: #c8c3b5; letter-spacing: 1px; pointer-events: none; animation: lvr-fade .35s ease-out .6s both; }
.lvr .lvr-cells { display: flex; gap: 8px; justify-content: center; max-width: 420px; pointer-events: none; }
.lvr .lvr-cells .qr-cell { animation-delay: calc(.72s + var(--i, 0) * 70ms); pointer-events: auto; }
.lvr .lvr-cells .qr-grid { --d0: .72s; }
#ui .lvr .lvr-claim { flex: none; min-width: 108px; min-height: 30px; padding: 0 18px; border: 0; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; font: 800 13px GFUIFont, sans-serif;
  white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 226, 160, .32); cursor: pointer; animation: lvr-fade .3s ease-out 1s both; }
#ui .lvr .lvr-claim:active { transform: scale(.92); transition: transform 60ms; }
#ui .lvr.taking .lvr-claim { filter: grayscale(.6); opacity: .6; pointer-events: none; }
.lvr .lvr-next, .lvr-strip { display: flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: rgba(10, 12, 14, .62); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .35);
  font-size: 11px; font-weight: 800; color: #c8c3b5; white-space: nowrap; pointer-events: none; }
.lvr .lvr-next { animation: lvr-fade .35s ease-out 1.15s both; opacity: .9; }
.lvr-ncells { display: flex; gap: 4px; }
.lvr-ncells .qr-cell { width: 28px; height: 28px; animation: none; }
.lvr-ncells .qr-cell .qr-pic, .lvr-ncells .qr-cell .qr-pic img { width: 18px; height: 18px; }
.lvr-ncells .qr-cell > em { font-size: 7.5px; line-height: 9px; }
.lvr.out { animation: lvr-out .4s ease-in both; }
/* 보상 없는 레벨 업 = 다음 보상 한 줄(위 가운데, 2.2초) */
.lvr-strip { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: var(--z-reward, 61); animation: lvr-strip .32s cubic-bezier(.2, .9, .3, 1) both; }
.lvr-strip.out { animation: lvr-strip-out .45s ease-in both; }

@keyframes lvr-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lvr-pillar { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes lvr-breathe { 50% { opacity: .72; } }
@keyframes lvr-spin { to { transform: rotate(360deg); } }
@keyframes lvr-mote { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(1); } }
@keyframes lvr-open { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lvr-gather { from { letter-spacing: 20px; opacity: 0; filter: blur(3px); } to { letter-spacing: 5px; opacity: 1; filter: none; } }
@keyframes lvr-digit { 0% { transform: translateY(-16px) scale(1.5); opacity: 0; } 55% { transform: translateY(2px) scale(.94); opacity: 1; } 78% { transform: translateY(-3px) scale(1.06); } 100% { transform: none; opacity: 1; } }
@keyframes lvr-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lvr-strip { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lvr-strip-out { to { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes lvr-out { to { opacity: 0; transform: translateY(-14px); } }