/* 보스 장비 상자(features/chest, 2026-11-04 피드백 2-2) — 고품질UI: 확률 창 = 강화 · 뽑기 확률표 판(scroll.css .scr .scr-odds-in · odds-*) 그대로,
   여는 연출 = 어두운 막 위 상자 도트 96(흔들림 0.9 초+ → 흰 빛 · 등급색 빛살 → 장비 칸 52 튀어나옴 + 이름 · 등급) → [확인] 알약. 보상 칸 [?] = 칸 오른쪽 위 작은 원. */
#ui .chest-odds-dim .ch-odds { position: relative; display: flex; align-items: center; justify-content: center; max-height: 100%; }
#ui .chest-odds-dim .scr-odds-in { width: 280px; max-height: 410px; }
#ui .scr .ch-orow { grid-template-columns: 22px minmax(0, 1fr) 54px 40px; height: 24px; }
#ui .scr .ch-orow .ch-oic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: rgba(0, 0, 0, .35); }
#ui .scr .ch-orow .ch-oic img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
#ui .scr .ch-orow .ch-on { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#ui .chest-show-dim { z-index: 30; }
#ui .chest-show-dim .shade { background: rgba(4, 5, 8, .78); }
#ui .ch-show { --gc: #e8c979; position: relative; width: 260px; height: 300px; display: grid; place-items: center; }
#ui .ch-show .ch-box { position: absolute; left: 50%; top: 46%; width: 96px; height: 96px; transform: translate(-50%, -50%); }
#ui .ch-show .ch-box img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 6px #000c); }
#ui .ch-show.shake .ch-box { animation: ch-shake .45s ease-in-out infinite; }
#ui .ch-show.flash .ch-box { animation: ch-burst .5s ease-out forwards; }
#ui .ch-show .ch-flash { position: absolute; left: 50%; top: 46%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--gc) 70%, #fff) 55%, transparent 72%); opacity: 0; pointer-events: none; }
#ui .ch-show.flash .ch-flash { animation: ch-flash .6s ease-out forwards; }
#ui .ch-show .ch-rays { position: absolute; left: 50%; top: 46%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--gc) 55%, transparent) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 68%); mask: radial-gradient(circle, #000 0 18%, transparent 68%); }
#ui .ch-show.flash .ch-rays { animation: ch-rays-in .4s ease-out forwards, ch-spin 9s linear infinite; }
#ui .ch-show .ch-got { position: absolute; left: 50%; top: 46%; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -40%) scale(.2); opacity: 0; pointer-events: none; }
#ui .ch-show.got .ch-got { animation: ch-pop .42s cubic-bezier(.2, .9, .3, 1.35) forwards; }
#ui .ch-show .ch-cell { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1.5px var(--gc), inset 0 -14px 18px -12px var(--gc), 0 0 14px 2px color-mix(in srgb, var(--gc) 60%, transparent); }
#ui .ch-show .ch-cell img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
#ui .ch-show .ch-name { max-width: 240px; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .ch-show .ch-grade { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--gc); text-shadow: 0 1px 2px #000; }
#ui .ch-show .ch-ok { position: absolute; left: 0; right: 0; bottom: 10px; width: max-content; margin: 0 auto; min-width: 0; padding: 0 22px; opacity: 0; pointer-events: none; transition: opacity .2s ease .25s; }   /* 가운데 = margin(transform 이면 .btn:active scale 이 덮어 눌린 동안 비켜 탭이 빗나감) */
#ui .ch-show.got .ch-ok { opacity: 1; pointer-events: auto; }
@keyframes ch-shake { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 20% { transform: translate(calc(-50% - 3px), -50%) rotate(-7deg); } 40% { transform: translate(calc(-50% + 3px), calc(-50% - 2px)) rotate(6deg); }
  60% { transform: translate(calc(-50% - 2px), -50%) rotate(-4deg); } 80% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(3deg); } }
@keyframes ch-burst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; filter: brightness(2.2); } 100% { transform: translate(-50%, -30%) scale(.85); opacity: 0; } }
@keyframes ch-flash { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(7); opacity: 0; } }
@keyframes ch-rays-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes ch-spin { to { rotate: 360deg; } }
@keyframes ch-pop { 0% { transform: translate(-50%, -40%) scale(.2); opacity: 0; } 60% { transform: translate(-50%, -62%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -55%) scale(1); opacity: 1; } }

/* 보상 칸 [?](quest.js rewardCells chest.* — 누르면 확률 창) */
.qr-cell .qr-odds { position: absolute; right: -4px; top: -4px; z-index: 2; width: 15px; height: 15px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center;
  color: #26221c; background: #e8c979; box-shadow: 0 1px 2px #000a; cursor: pointer; }
#ui .inv-chodds[hidden] { display: none; }