/* Case reward dialog: keep styles isolated from the roulette and inventory. */
.cases-main-block .roulette .roulette-slider.case-chest-stage {
    box-shadow: 0 0 24px rgba(124, 112, 231, .12), 0 0 55px rgba(124, 112, 231, .06), inset 0 0 0 1px rgba(160, 150, 255, .08);
}
.case-chest-stage .case-chest-preview {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 1; transform: scale(1);
    transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.3,1);
}
.case-chest-preview img { width: 75%; max-width: 300px; height: 230px; max-height: 90%; object-fit: contain; filter: drop-shadow(0 12px 24px #0005); }
.case-chest-stage .roulette-area,
.case-chest-stage .top-arr,
.case-chest-stage .bottom-arr { opacity: 0; transition: opacity .3s ease; }
.case-chest-stage .roulette-area { transform: scale(.96); transition: opacity .3s ease, transform .38s ease; }
.case-chest-stage.is-opening .case-chest-preview { opacity: 0; transform: scale(1.12); }
.case-chest-stage.is-opening .roulette-area,
.case-chest-stage.is-opening .top-arr,
.case-chest-stage.is-opening .bottom-arr { opacity: 1; }
.case-chest-stage.is-opening .roulette-area { transform: scale(1); }
.case-opening-curtains {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden; border-radius: inherit; pointer-events: none;
}
.case-opening-curtains::before,
.case-opening-curtains::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 50%;
    box-sizing: border-box;
    background: linear-gradient(110deg, #11141c 20%, #1d2230 75%, #282637);
    transition: transform .7s cubic-bezier(.65, 0, .2, 1);
}
.case-opening-curtains::before { left: 0; border-right: 1px solid #efc57740; }
.case-opening-curtains::after { right: 0; background: linear-gradient(250deg, #11141c 20%, #1d2230 75%, #282637); border-left: 1px solid #efc57740; }
.case-chest-stage.is-opening .case-opening-curtains::before { transform: translateX(-101%); }
.case-chest-stage.is-opening .case-opening-curtains::after { transform: translateX(101%); }
.case-opening-light {
    position: absolute; inset: 0; z-index: 1; opacity: 0;
    background: radial-gradient(ellipse at center, #ffe5ac80 0%, #f4bb5824 25%, transparent 65%);
    pointer-events: none;
}
.case-chest-stage.is-opening .case-opening-light { animation: case-opening-flash .75s ease-out both; }
.case-chest-stage.is-opening .case-chest-preview { transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2,.8,.3,1); transform: scale(1.16); }
@keyframes case-opening-flash {
    0% { opacity: 0; transform: scaleX(.08); }
    28% { opacity: .85; transform: scaleX(.4); }
    65% { opacity: .35; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .case-chest-stage .case-chest-preview, .case-chest-stage .roulette-area,
    .case-chest-stage .top-arr, .case-chest-stage .bottom-arr { transition: opacity .3s ease; transform: none; }
    .case-chest-stage.is-opening .case-chest-preview { transition: opacity .3s ease; transform: none; }
    .case-opening-curtains::before, .case-opening-curtains::after { transition: opacity .3s ease; }
    .case-chest-stage.is-opening .case-opening-curtains::before,
    .case-chest-stage.is-opening .case-opening-curtains::after { transform: none; opacity: 0; }
    .case-chest-stage.is-opening .case-opening-light { animation: none; }
}
.case-spin-spotlight {
    position: fixed;
    pointer-events: none;
    z-index: 1039;
    background: transparent;
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .32);
    opacity: 0;
    transition: opacity .2s ease;
}
.case-spin-spotlight.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .case-spin-spotlight { transition: none; }
}
#prize { --prize-rgb: 104, 137, 246; }
#prize .modal-dialog { max-width: 440px; margin: 28px auto; width: calc(100% - 32px); }
#prize .modal-content { position: relative; overflow: hidden; background: #15151f; border: 1px solid #ffffff12; border-radius: 24px; color: #f5f4fa; box-shadow: 0 28px 75px #0005; }
#prize .modal-content::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, #aa91ff, transparent); }
#prize .modal-header { position: absolute; inset: 0 0 auto; height: 0; padding: 0; border: 0; z-index: 2; }
#prize .modal-header .close { position: absolute; right: 14px; top: 14px; float: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; width: 36px; height: 36px; border: 0; border-radius: 10px; background: #1b2030; color: #fff; opacity: 1; text-shadow: none; font-size: 25px; line-height: 1; font-weight: 400; }
#prize .modal-header .close:hover,
#prize .modal-header .close:focus { background: rgba(255, 50, 56, .18); color: #ff3d43; opacity: 1; }
#prize .modal-body { padding: 34px 28px 28px; text-align: center; }
#prize .case-prize-eyebrow { padding: 0 24px; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; color: #aa91ff; }
#prize .modal-content h4 { font-size: 27px; line-height: 1.25; font-weight: 600; letter-spacing: -.8px; text-transform: none; color: #f5f4fa; margin: 12px 0 0; }
#prize .modal-content #prize_area { padding: 0; text-align: center; }
#prize .case-prize-reward { position: relative; isolation: isolate; padding: 34px 0 24px; }
#prize .case-prize-reward::before { content: ''; position: absolute; z-index: -1; inset: 0 -20px; background: radial-gradient(ellipse at center, #aa91ff30, transparent 68%); pointer-events: none; }
#prize .case-prize-reward + .case-prize-reward { border-top: 1px solid #ffffff0d; }
#prize .case-prize-coin { width: 102px; height: 102px; box-sizing: border-box; margin: 0 auto 29px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #e6dcff, #b6a0ef 52%, #7961bd); border: 6px solid #c8b6f6; box-shadow: inset 0 0 0 2px #7c65b5, 7px 8px 0 #55417d, 0 22px 50px #aa91ff25; transform: rotate(-12deg); color: #574078; font-size: 57px; font-weight: 600; text-shadow: 0 1px #fff8; }
#prize .case-prize-info { position: static; display: block; }
#prize .case-prize-info > span { display: block; white-space: normal; overflow-wrap: anywhere; color: #aaa6bd; font-size: 14px; line-height: 1.5; }
#prize .case-prize-info > span:first-child { color: #f5f4fa; font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
#prize .case-prize-type-2 .case-prize-info > span:first-child { font-size: clamp(36px, 10vw, 66px); letter-spacing: -2px; }
#prize .case-prize-image { position: static; width: 100%; height: auto; margin: 0 auto 24px; filter: none; }
#prize .case-prize-image img { display: block; width: auto; max-width: 100%; height: 140px; object-fit: contain; margin: auto; }
#prize .case-prize-symbol { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 82px; line-height: 1; color: #c8b6f6; margin-bottom: 24px; text-shadow: 0 12px 35px #aa91ff30; }
#prize .modal-content .case-prize-status { color: #9bc9b0; font-size: 12px; line-height: 1.6; margin: 0 0 24px; padding: 0; }
#prize .case-prize-status a { color: #c8b6f6; text-decoration: underline; }
#prize .case-prize-confirm { display: block; width: 100%; margin-top: 24px; padding: 15px 20px; background: #aa91ff; border: 0; border-radius: 11px; color: #191326; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
#prize .modal-content #prize_area > .case-prize-status:last-child { margin-bottom: 0; }
#prize .case-prize-confirm:hover { background: #bca8ff; }
#prize button:focus-visible { outline: 2px solid #e6dcff; outline-offset: 3px; }
@media (max-width: 400px) { #prize .modal-body { padding: 34px 20px 24px; } }
@media (prefers-reduced-motion: reduce) { #prize.fade, #prize.fade .modal-dialog, #prize .case-prize-confirm { transition: none; } }

/* The server's rarity class supplies the accent for the entire reward dialog. */
#prize .modal-dialog .modal-content {
    background: #14151b;
    border-color: rgba(var(--prize-rgb), .3);
    box-shadow: 0 28px 75px #0008, 0 0 42px 5px rgba(var(--prize-rgb), .32), 0 0 100px 14px rgba(var(--prize-rgb), .17);
}
#prize .modal-content::before { background: linear-gradient(90deg, transparent, rgb(var(--prize-rgb)), transparent); }
#prize .case-prize-eyebrow, #prize .case-prize-status a { color: rgb(var(--prize-rgb)); }
#prize .case-prize-reward::before { background: radial-gradient(ellipse at center, rgba(var(--prize-rgb), .18), transparent 68%); }
#prize .case-prize-coin {
    background: linear-gradient(145deg, #f2f4fa, rgb(var(--prize-rgb)) 65%, #353945);
    border-color: rgb(var(--prize-rgb));
    box-shadow: inset 0 0 0 2px #ffffff40, 7px 8px 0 #303440, 0 22px 50px rgba(var(--prize-rgb), .2);
    color: #252935;
}
#prize .case-prize-symbol { color: rgb(var(--prize-rgb)); text-shadow: 0 12px 35px rgba(var(--prize-rgb), .2); }
#prize .case-prize-confirm { background: rgb(var(--prize-rgb)); color: #11151c; }
#prize .case-prize-confirm:hover { background: rgba(var(--prize-rgb), .85); }
#prize button:focus-visible { outline-color: rgb(var(--prize-rgb)); }
#prize .case-prize-rewards, #prize .case-prize-list, #prize .case-prize-items {
    position: static; width: 100%; height: auto; min-height: 0; max-width: none;
    background: none !important; border: 0; box-shadow: none; transform: none;
}

/* Replace Bootstrap's downward slide with a reveal from the dialog's centre. */
#prize.modal.fade .modal-dialog {
    -webkit-transform: none;
    transform: none;
    transition: none;
}
#prize.modal.fade .modal-content {
    transform-origin: center center;
    transform: scale(.88);
    opacity: 0;
    transition: transform .22s ease-in, opacity .18s ease;
}
#prize.modal.fade.show .modal-content,
#prize.modal.fade.in .modal-content {
    transform: scale(1);
    opacity: 1;
    transition: transform .46s cubic-bezier(.18, .85, .3, 1.18), opacity .26s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    #prize.modal.fade .modal-content {
        transform: none;
        transition: none;
    }
}