/* chest screen styles — WP-ITEMS (보강-설계서 3-6). Everything is scoped to #screen-chest. */
#screen-chest { gap: 0; padding: 12px 8px; justify-content: center; }
#screen-chest .cw {
  position: relative;
  width: min(440px, calc(100vw - 16px));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 12px 14px;
  background: #22183a; background-clip: padding-box;
  border: 4px solid #6fae3a; box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
  transform-origin: 50% 50%;
}
#screen-chest.framed .cw { border: 32px solid transparent; border-image: var(--cw-frame) 32 / 32px stretch; padding: 0 2px 4px; }
#screen-chest .cw-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; z-index: 0; }
#screen-chest .cw > :not(.cw-fx) { position: relative; z-index: 1; }
#screen-chest .cw-title { font-size: 20px; margin-top: -6px; }
#screen-chest[data-grade="mid"] .cw-title { color: #e8ecff; }
#screen-chest[data-grade="big"] .cw-title { color: #ffe14a; text-shadow: 2px 2px 0 #8a3a10; }
#screen-chest .cw-stage { width: 100%; height: 84px; flex: 0 0 84px; }

/* reels: 20 art px slot frame x3, 16 px icon x3 */
#screen-chest .cw-reels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 6px; width: 100%; max-width: 360px; min-height: 96px; }
#screen-chest .reel { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#screen-chest .reel .slot {
  position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  background: #3a2a1a; border: 3px solid #8a5a2a; box-sizing: border-box;
  image-rendering: pixelated;
}
#screen-chest .slot .bg { position: absolute; inset: 7px; opacity: .75; }
#screen-chest[style*="--slot"] .reel .slot { background: var(--slot) center / 100% 100% no-repeat; border: 0; }
#screen-chest[style*="--slot-new"] .reel.new .slot { background-image: var(--slot-new); }
#screen-chest[style*="--slot-evo"] .reel.evo .slot { background-image: var(--slot-evo); }
#screen-chest .reel.evo .slot .bg { background: #ffd23a !important; opacity: .55 !important; }
#screen-chest .reel .ic { position: relative; width: 48px; height: 48px; image-rendering: pixelated; }
#screen-chest .reel .from { display: none; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; image-rendering: pixelated;
  background: rgba(26, 16, 32, .7); border: 1px solid #ffd23a; }
#screen-chest .reel.evo .from { display: block; }
#screen-chest .reel.evo .ic { left: 6px; top: 4px; }
#screen-chest .reel.flash .slot::after { content: ''; position: absolute; inset: 0; background: #ffffff; }
#screen-chest .reel .cap { min-height: 26px; width: 70px; font-size: 10px; line-height: 1.25; color: var(--paper, #fff6e0); text-shadow: 1px 1px 0 #1a1020; word-break: keep-all; }
#screen-chest .reel .cap b { display: block; font-weight: bold; }
#screen-chest .reel .cap span { color: #ffd23a; }
#screen-chest .reel.evo .cap span { color: #1a1020; background: #ffd23a; padding: 0 3px; }

#screen-chest .cw-evo { display: none; font-size: 18px; font-weight: bold; color: #1a1020; background: #ffd23a; padding: 2px 10px;
  border: 2px solid #1a1020; box-shadow: 0 3px 0 #8a3a10; animation: cwBlink .5s steps(2) infinite; }
#screen-chest .cw-evo.on { display: block; }
@keyframes cwBlink { 50% { background: #fff3a0; } }

#screen-chest .cw-coins { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: bold; color: var(--paper, #fff6e0); text-shadow: 2px 2px 0 #1a1020; }
#screen-chest .cw-coin-ic { width: 20px; height: 20px; image-rendering: pixelated; }
#screen-chest .cw-coins.final { color: #ffe14a; }
#screen-chest .cw-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #ffe14a; border-radius: 50%; opacity: 0; pointer-events: none; }
#screen-chest .cw-coins.final .cw-ring { animation: cwRing .5s ease-out 1 both; }
@keyframes cwRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

#screen-chest .cw-btns { position: relative; height: 52px; width: 100%; display: flex; justify-content: center; align-items: center; }
#screen-chest .cw-btns .btn { position: absolute; left: 50%; top: 50%; margin: 0; min-width: 160px; }
#btn-chest-open { transform: translate(-50%, -50%) scale(0); transition: transform .15s ease-out; }
#btn-chest-open.on { transform: translate(-50%, -50%) scale(1); }
#btn-chest-open.gone { display: none; }
#btn-chest-ok { transform: translate(-50%, -50%) scale(0); transition: transform .15s ease-out; }
#btn-chest-ok.on { transform: translate(-50%, -50%) scale(1); }
#screen-chest .btn:disabled { cursor: default; filter: saturate(.6); }
#btn-chest-ok.on:disabled { opacity: .8; }

#screen-chest .cw-skip { font-size: 11px; color: #c9b8e0; min-height: 14px; visibility: hidden; }
#screen-chest .cw-skip.on { visibility: visible; animation: cwBlink2 1s steps(2) infinite; }
@keyframes cwBlink2 { 50% { opacity: .4; } }

@media (max-width: 420px) {
  #screen-chest .cw-reels { max-width: 216px; }
  #screen-chest .cw-reels.n5 { max-width: 216px; }
}