[data-rare="common"]   { --rc: #8e97aa; --rc-soft: rgba(142,151,170,.14); }
[data-rare="uncommon"] { --rc: #36d89a; --rc-soft: rgba(54,216,154,.14); }
[data-rare="rare"]     { --rc: #4d8dff; --rc-soft: rgba(77,141,255,.16); }
[data-rare="epic"]     { --rc: #b48cff; --rc-soft: rgba(180,140,255,.16); }
[data-rare="legend"]   { --rc: #f7c94b; --rc-soft: rgba(247,201,75,.16); }

.cs-pick { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.cs-pick .c {
    position: relative; overflow: hidden; padding: 14px 14px 15px; border-radius: 20px; text-align: left;
    border: 1px solid var(--line); color: var(--text);
    background: radial-gradient(260px 160px at 100% 0%, var(--tone-a), transparent 70%), var(--panel-2);
    transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.cs-pick .c:hover { transform: translateY(-3px); border-color: var(--tone-c); }
.cs-pick .c.on { border-color: var(--tone-b); box-shadow: 0 18px 40px -20px var(--tone-b), inset 0 0 0 1px var(--tone-c); }
.cs-pick .c .art {
    position: relative; display: block; height: 96px; margin-bottom: 12px; border-radius: 14px; overflow: hidden;
    background: radial-gradient(120% 100% at 50% 20%, var(--tone-c), transparent 68%), linear-gradient(160deg,#1d2231,#11141f);
}
.cs-pick .c .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.cs-pick .c b { display: block; font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 8px; }

.cs-pick .c .row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-pick .c .price { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #10131e; background: var(--tone); }
.cs-pick .c small { display: block; min-width: 0; color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.cs-pick .c .on-tag {
    position: absolute; z-index: 2; top: 10px; right: 10px; padding: 4px 8px; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #10131e; background: var(--tone);
    opacity: 0; transition: opacity .2s;
}
.cs-pick .c.on .on-tag { opacity: 1; }

.cs-stage { padding: 18px 18px 20px; border-radius: 24px; margin-bottom: 16px; }
.cs-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cs-head .eyebrow { display: block; margin-bottom: 5px; }
.cs-head strong { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.cs-note { color: var(--muted); font-size: 12px; font-weight: 700; padding-top: 4px; white-space: nowrap; }

.cs-reel {
    position: relative; padding: 16px 0; border-radius: 18px; overflow: hidden; margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border: 1px solid var(--line-soft);
}
.cs-reel::before, .cs-reel::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none;
}
.cs-reel::before { left: 0; background: linear-gradient(90deg, #0f1522, transparent); }
.cs-reel::after  { right: 0; background: linear-gradient(270deg, #0f1522, transparent); }
.cs-reel .strip { display: flex; gap: 10px; padding: 0 16px; will-change: transform; }
.cs-reel .it {
    flex: none; width: 124px; padding: 10px; border-radius: 16px; text-align: center;
    background: linear-gradient(170deg,#1d2231,#12151f); border: 1px solid var(--line);
    box-shadow: inset 0 -3px 0 var(--rc, transparent);
}
.cs-reel .it .art {
    display: block; position: relative; height: 66px; margin-bottom: 8px; border-radius: 11px; overflow: hidden;
    background: radial-gradient(90% 90% at 50% 25%, var(--rc-soft, rgba(255,255,255,.06)), transparent 70%), #181c28;
}
.cs-reel .it .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.cs-reel .it small { display: block; color: var(--muted); font-size: 10px; font-weight: 700; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-reel .it b { display: block; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rc, var(--text)); }
.cs-reel .it.hit { border-color: var(--rc, #fff); box-shadow: 0 0 0 1px var(--rc, #fff), 0 0 26px -6px var(--rc, #fff), inset 0 -3px 0 var(--rc, transparent); }
.cs-reel .needle {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 3;
    background: linear-gradient(180deg,#fff,#8fe4ff); box-shadow: 0 0 18px rgba(143,228,255,.9);
}
.cs-reel .needle::before, .cs-reel .needle::after {
    content: ''; position: absolute; left: 50%; margin-left: -6px; border: 6px solid transparent;
}
.cs-reel .needle::before { top: 0; border-top-color: #fff; }
.cs-reel .needle::after  { bottom: 0; border-bottom-color: #fff; }

.cs-reel .needle.tk { animation: csTick .14s ease-out; }
@keyframes csTick { 40% { transform: scaleY(.9) translateX(1.5px); } }

.cs-reel.is-fast .strip { filter: blur(1.4px); }
.cs-reel .strip { transition: filter .5s ease; }

.cs-reel .it { transition: opacity .6s ease, filter .6s ease; }
.cs-reel::before, .cs-reel::after { transition: width .8s ease; }
.cs-reel.is-slow::before, .cs-reel.is-slow::after { width: 34%; }

.cs-reel .it.won { animation: csWon .6s cubic-bezier(.2,.8,.3,1); position: relative; z-index: 1; }
@keyframes csWon {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.1); box-shadow: 0 0 0 2px var(--rc, #fff), 0 0 44px 4px var(--rc, #fff); }
    100% { transform: scale(1.04); }
}
.cs-reel .it.won { transform: scale(1.04); }

.cs-result { margin-bottom: 14px; }
.cs-idle { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; padding: 10px 0; }
.cs-drop {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px;
    background: var(--rc-soft, var(--surface)); border: 1px solid var(--rc, var(--line));
    animation: csDrop .4s var(--ease);
}
@keyframes csDrop { from { opacity: 0; transform: translateY(8px); } }
.cs-drop .pic {
    display: block; position: relative; flex: none; width: 74px; height: 74px; border-radius: 14px; overflow: hidden;
    background: radial-gradient(90% 90% at 50% 25%, var(--rc-soft), transparent 70%), #181c28;
}
.cs-drop .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.cs-drop .tx { min-width: 0; flex: 1; }
.cs-drop .tx small { display: block; margin-bottom: 4px; color: var(--rc, var(--faint)); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cs-drop .tx b { display: block; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-drop .tx span { display: block; margin-top: 3px; font-family: var(--f-display); font-size: 17px; font-weight: 700; letter-spacing: -.03em; color: var(--rc, var(--text)); }

.cs-open { min-height: 62px; border-radius: 18px; font-size: 16px; box-shadow: var(--acc-sh-lg); }
.cs-open .cs-price { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 13px; font-weight: 800; }
.cs-open.is-off, .dock [data-case-open].is-off { opacity: .55; pointer-events: none; }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.cs-grid .g {
    padding: 9px; border-radius: 14px; text-align: center;
    background: var(--surface); border: 1px solid var(--line-soft); box-shadow: inset 0 -2px 0 var(--rc, transparent);
}
.cs-grid .g .art {
    display: block; position: relative; height: 58px; margin-bottom: 7px; border-radius: 10px; overflow: hidden;
    background: radial-gradient(90% 90% at 50% 25%, var(--rc-soft), transparent 70%), #181c28;
}
.cs-grid .g .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.cs-grid .g small { display: block; color: var(--muted); font-size: 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-grid .g b { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rc, var(--text)); }
.cs-grid .g .odds { display: block; margin-top: 3px; color: var(--faint); font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

img + .cs-letter { display: none; }
.cs-letter {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--f-display); font-size: 22px; font-weight: 800; color: var(--rc, var(--dim)); opacity: .7;
}
.cs-drop .pic .cs-letter { font-size: 26px; }

@media (max-width: 1040px) {
    .cs-pick { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {

    .cs-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .cs-pick .c { padding: 6px 5px 8px; border-radius: 14px; text-align: center; }
    .cs-pick .c:hover { transform: none; }
    .cs-pick .c.on { box-shadow: 0 10px 24px -14px var(--tone-b), inset 0 0 0 1.5px var(--tone-b); }
    .cs-pick .c .art { height: 46px; margin-bottom: 5px; border-radius: 10px; }
    .cs-pick .c .art img { padding: 3px; }
    .cs-pick .c b {
        margin: 0 -3px 5px; font-family: var(--f-text); font-size: 10.5px; font-weight: 800; letter-spacing: -.02em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cs-pick .c .row { align-items: center; }
    .cs-pick .c .price { min-height: 22px; padding: 0 8px; font-size: 11px; }
    .cs-pick .c small, .cs-pick .c .on-tag { display: none; }
    .cs-stage { padding: 14px 14px 16px; border-radius: 20px; }
    .cs-reel .it { width: 96px; }
    .cs-reel .it .art { height: 52px; }
    .cs-drop { flex-wrap: wrap; }
    .cs-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-reel .strip { transition: none !important; }
}

.cs-stage.csl {

    --ct: #f0a62c;
    --cl-gold: color-mix(in srgb, var(--ct) 72%, #fff);
    --cl-gold-2: color-mix(in srgb, var(--ct) 38%, #fff);
    --cl-ink: color-mix(in srgb, var(--ct) 18%, color-mix(in srgb, var(--ct) 14%, #080808));
    container: csl / inline-size;
    isolation: isolate;
    background: color-mix(in srgb, var(--ct) 14%, #090909);
    border-color: color-mix(in srgb, var(--ct) 20%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cl-gold-2) 7%, transparent), 0 26px 60px -30px rgba(0,0,0,.95);
}
.csl > .csl-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit;
    background:
        radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--ct) 22%, transparent), transparent 70%),
        radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, var(--ct) 14%, rgba(67,67,67,.28)), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--ct) 14%, #161616), color-mix(in srgb, var(--ct) 14%, #0e0e0e) 50%, color-mix(in srgb, var(--ct) 14%, #080808));
}

.csl-arch {
    position: absolute; inset: 0; opacity: .5;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 38px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 76px) 0 0 / 100% 76px,
        linear-gradient(180deg, color-mix(in srgb, var(--ct) 14%, #292929), color-mix(in srgb, var(--ct) 14%, #141414));
    -webkit-mask: radial-gradient(75% 90% at 50% 38%, transparent 38%, #000 80%);
            mask: radial-gradient(75% 90% at 50% 38%, transparent 38%, #000 80%);
}
.csl-rays {
    position: absolute; left: 50%; top: 150px; width: 1300px; aspect-ratio: 1; margin: -650px 0 0 -650px;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ct) 8%, transparent) 0 6deg, transparent 6deg 20deg);
    -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 70%);
            mask: radial-gradient(closest-side, #000 8%, transparent 70%);
    animation: clRays 70s linear infinite;
}
.csl.is-open .csl-rays { animation-duration: 12s; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc, #ffc860) 16%, transparent) 0 6deg, transparent 6deg 20deg); }
@keyframes clRays { to { transform: rotate(360deg); } }
.csl-glow {
    position: absolute; left: 50%; top: 60px; width: 70%; aspect-ratio: 1.6; transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ct) 20%, transparent), transparent);
    animation: clGlow 4.5s ease-in-out infinite;
}
@keyframes clGlow { 50% { opacity: .55; transform: translateX(-50%) scale(1.1); } }

.csl-dust {
    position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: .7; will-change: transform;
    background-image:
        radial-gradient(1.5px 1.5px at 14% 30%, color-mix(in srgb, var(--cl-gold-2) 90%, transparent), transparent),
        radial-gradient(1px 1px at 36% 70%, color-mix(in srgb, var(--cl-gold-2) 80%, transparent), transparent),
        radial-gradient(2px 2px at 64% 22%, color-mix(in srgb, var(--ct) 70%, transparent), transparent),
        radial-gradient(1px 1px at 86% 60%, color-mix(in srgb, var(--cl-gold-2) 80%, transparent), transparent),
        radial-gradient(1.5px 1.5px at 52% 90%, color-mix(in srgb, var(--cl-gold-2) 60%, transparent), transparent);
    background-size: 100% 22.5%;
    animation: clDust 18s linear infinite;
}
@keyframes clDust { to { transform: translateY(-22.5%); } }

.csl .cs-head .eyebrow { color: color-mix(in srgb, var(--cl-gold-2) 70%, transparent); }
.csl .cs-head strong { color: var(--cl-gold-2); text-shadow: 0 2px 14px color-mix(in srgb, var(--ct) 35%, transparent); }
.csl .cs-note {
    padding: 6px 11px; border-radius: 999px; color: var(--cl-gold-2);
    background: color-mix(in srgb, var(--ct) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ct) 18%, transparent);
}

.csl-top {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px 22px;
    margin: -6px 0 6px; min-height: 196px;
}
.csl-lion {
    position: relative; justify-self: end; width: 170px; height: 188px; z-index: 2;
    filter: drop-shadow(0 16px 18px rgba(0,0,0,.6));
}
.csl-lion img {
    position: absolute; left: 50%; bottom: 0; height: 188px; width: auto; max-width: none;
    transform: translateX(-50%) scale(.92); transform-origin: 50% 100%;
    opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.csl-lion[data-pose="idle"] .p-idle,
.csl-lion[data-pose="win"]  .p-win,
.csl-lion[data-pose="miss"] .p-miss { opacity: 1; transform: translateX(-50%) scale(1); }
.csl-lion[data-pose="idle"] .p-idle { animation: clBreath 3.6s ease-in-out infinite; }
.csl-lion[data-pose="win"] .p-win { animation: clCheer .9s cubic-bezier(.34,1.56,.64,1); }
.csl-lion[data-pose="miss"] .p-miss { animation: clShrug .7s ease-out; }

.csl-lion.turn .p-idle { animation: clTurn .75s cubic-bezier(.3,1.3,.5,1); }

.csl-lion.watch .p-idle { animation: clWatch 1.1s ease-in-out infinite; }
@keyframes clBreath { 50% { transform: translateX(-50%) scale(1.012, .988) translateY(1px); } }
@keyframes clTurn {
    35% { transform: translateX(-44%) rotate(6deg) scale(1.03); }
    60% { transform: translateX(-44%) rotate(-3deg) scale(1.03); }
}
@keyframes clWatch { 50% { transform: translateX(-47%) rotate(3deg) scale(1.02, .98); } }
@keyframes clCheer {
    0% { transform: translateX(-50%) translateY(12px) scale(.9); }
    45% { transform: translateX(-50%) translateY(-14px) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
}
@keyframes clShrug { 40% { transform: translateX(-50%) translateY(4px) rotate(-3deg); } }
.csl-say {
    position: absolute; left: 62%; top: 2px; z-index: 3; padding: 7px 11px; border-radius: 13px 13px 13px 4px;
    background: #fff8e8; color: color-mix(in srgb, var(--ct) 14%, #181818); font-size: 12px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.8);
    opacity: 0; transform: translateY(6px) scale(.8); transform-origin: 0 100%; pointer-events: none;
}
.csl-say.on { animation: clSay 2.4s cubic-bezier(.34,1.56,.64,1) forwards; }
.csl-say.win { background: linear-gradient(135deg, #fff5cf, #ffd560); }
@keyframes clSay {
    0% { opacity: 0; transform: translateY(6px) scale(.8); }
    12%, 84% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-6px); }
}

.csl-chest { position: relative; width: 196px; height: 196px; z-index: 1; }
.csl-chest img {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 18px 16px rgba(0,0,0,.65));
    transform-origin: 50% 88%;
}

.csl-chest .c-lid { z-index: 2; transform-origin: 50% 34%; }
.csl-chest .c-body, .csl-chest .c-lid { visibility: hidden; }
.csl.is-open:not(.no-lid) .csl-chest .c-box { visibility: hidden; }
.csl.is-open:not(.no-lid) .csl-chest .c-body,
.csl.is-open:not(.no-lid) .csl-chest .c-lid { visibility: visible; }
.csl-chest .c-box { animation: clIdleChest 5s ease-in-out infinite; }

.csl.is-shake .csl-chest .c-box { animation: clRattle .32s ease-in-out infinite; }
.csl.is-shake .csl-chest img { filter: drop-shadow(0 18px 16px rgba(0,0,0,.65)) drop-shadow(0 0 16px color-mix(in srgb, var(--ct) 55%, transparent)); }

.csl.is-open .csl-chest .c-lid {
    transform: translate(30%, -22%) rotate(24deg) scale(.86);
    animation: clLidPop .75s cubic-bezier(.2,1.5,.4,1) forwards, clLidHover 2.8s ease-in-out .75s infinite;
}
.csl.is-open .csl-chest .c-body { animation: clBodyThud .45s ease-out; }
@keyframes clLidPop {
    0%   { transform: none; }
    35%  { transform: translate(10%, -44%) rotate(10deg); }
    100% { transform: translate(30%, -22%) rotate(24deg) scale(.86); }
}
@keyframes clLidHover {
    0%, 100% { transform: translate(30%, -22%) rotate(24deg) scale(.86); }
    50%      { transform: translate(30%, -26%) rotate(21deg) scale(.86); }
}
@keyframes clBodyThud { 30% { transform: scale(1.04, .95); } 60% { transform: scale(.99, 1.02); } }

.csl-gap {
    position: absolute; left: 12%; right: 12%; top: 40%; height: 20%; z-index: 1; border-radius: 50%;
    background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--rc, var(--ct)) 80%, #fff) 35%, transparent);
    filter: blur(4px); opacity: 0; transform: scale(.3, .2);
    transition: opacity .3s, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.csl.is-open .csl-gap { opacity: 1; transform: none; animation: clGapPulse 1.8s ease-in-out infinite; }
@keyframes clGapPulse { 50% { opacity: .7; transform: scale(1.08, .9); } }
@keyframes clIdleChest { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-2deg) translateY(-2px); } 96% { transform: rotate(1.5deg); } }
@keyframes clRattle {
    0%, 100% { transform: rotate(0) translateY(0); }
    25% { transform: rotate(-3.5deg) translateY(-3px) scale(1.02, .98); }
    75% { transform: rotate(3deg) translateY(-1px) scale(.99, 1.01); }
}

.csl-floor {
    position: absolute; left: 6%; right: 6%; bottom: 4px; height: 26px; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ct) 40%, transparent), transparent);
    transition: opacity .4s;
}
.csl.is-open .csl-floor { background: radial-gradient(closest-side, color-mix(in srgb, var(--rc, var(--ct)) 60%, transparent), transparent); }

.csl-beam {
    position: absolute; left: 50%; bottom: 44%; width: 120px; height: 260px; margin-left: -60px; z-index: -1;
    background: linear-gradient(0deg, color-mix(in srgb, var(--rc, #ffc860) 70%, transparent), transparent 85%);
    -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
            mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
    opacity: 0; transform: scaleY(.2); transform-origin: 50% 100%;
    transition: opacity .35s, transform .6s cubic-bezier(.2,.9,.3,1);
}
.csl.is-open .csl-beam { opacity: .55; transform: none; animation: clBeam 2.4s ease-in-out infinite; }
.csl.is-loot .csl-beam { opacity: .9; }
@keyframes clBeam { 50% { opacity: .35; } }
.csl-flash {
    position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 3;
    background: #fff; opacity: 0; pointer-events: none;
}
.csl-flash.go { animation: clFlash .6s ease-out; }
@keyframes clFlash {
    0% { opacity: .95; box-shadow: 0 0 0 0 rgba(255,230,160,.9); }
    100% { opacity: 0; box-shadow: 0 0 60px 90px rgba(255,210,120,0); transform: scale(8); }
}

.csl-chest .c-body { z-index: 1; }
.csl.is-loot .csl-chest .c-lid { animation: clLidAway .38s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes clLidAway {
    0%   { opacity: 1; transform: translate(30%, -22%) rotate(24deg) scale(.86); }
    100% { opacity: 0; transform: translate(95%, -75%) rotate(55deg) scale(.55); }
}
.csl-loot {
    position: absolute; left: 50%; top: -20%; width: 96px; height: 96px; margin-left: -48px; z-index: 0;
    display: grid; place-items: center; pointer-events: none;
    opacity: 0;
}
.csl-loot::before {
    content: ''; position: absolute; inset: -38px; border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rc, #ffc860) 60%, transparent), color-mix(in srgb, var(--rc, #ffc860) 18%, transparent) 55%, transparent);
    opacity: 0; transform: scale(.4);
}
.csl-loot.up::before { animation: clHalo .7s ease-out .5s forwards, clHaloPulse 2.4s ease-in-out 1.2s infinite; }
@keyframes clHalo { to { opacity: 1; transform: none; } }
@keyframes clHaloPulse { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .65; transform: scale(1.12); } }
.csl-loot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 10px color-mix(in srgb, var(--rc, #ffc860) 70%, transparent)); }
.csl-loot .cs-letter { position: static; width: 72px; height: 72px; border-radius: 20px; background: rgba(0,0,0,.45); font-size: 32px; opacity: 1; }

.csl-loot .csl-wave {
    position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%;
    border: 3px solid var(--rc, #ffc860); box-shadow: 0 0 18px var(--rc, #ffc860), inset 0 0 12px var(--rc, #ffc860);
    opacity: 0;
}
.csl-loot.up .csl-wave { animation: clRing .8s ease-out .55s; }
@keyframes clRing { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.4); border-width: 1px; } }

.csl-loot b {
    position: absolute; left: 88%; top: 6px; padding: 4px 10px; border-radius: 999px;
    white-space: nowrap; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--cl-ink); background: var(--rc, var(--cl-gold)); box-shadow: 0 6px 16px -6px var(--rc, #000);
    opacity: 0; transform: rotate(8deg) scale(.4); transform-origin: 0 50%;
}
.csl-loot.up b { animation: clTag .45s cubic-bezier(.3,1.6,.5,1) 1s forwards; }
@keyframes clTag { to { opacity: 1; transform: rotate(8deg); } }
@keyframes clTagL { to { opacity: 1; transform: rotate(-8deg); } }
.csl-loot.up { animation: clLoot 1s cubic-bezier(.25,1.25,.4,1) .28s both, clFloat 3.2s ease-in-out 1.3s infinite; }
@keyframes clLoot {
    0%   { opacity: 1; transform: translateY(118px) scale(.5); }
    55%  { opacity: 1; transform: translateY(-12px) scale(1.12) rotate(-4deg); }
    78%  { opacity: 1; transform: translateY(4px) scale(.97) rotate(2deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes clFloat { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-7px) rotate(-2deg); } }

.csl-prize {
    justify-self: start; align-self: center; width: 150px; padding: 10px 10px 11px; border-radius: 18px; text-align: center;
    background: linear-gradient(170deg, color-mix(in srgb, var(--ct) 14%, rgba(38,38,38,.85)), color-mix(in srgb, var(--ct) 14%, rgba(17,17,17,.9)));
    border: 1px solid color-mix(in srgb, var(--rc, var(--ct)) 45%, transparent);
    box-shadow: 0 16px 30px -18px #000, inset 0 0 22px -10px var(--rc, var(--ct));
}
.csl-prize:empty { visibility: hidden; }
.csl-prize small { display: block; margin-bottom: 6px; color: color-mix(in srgb, var(--cl-gold-2) 70%, transparent); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.csl-prize .art { display: block; position: relative; height: 70px; margin-bottom: 6px; }
.csl-prize .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: clPrize 3.2s ease-in-out infinite; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rc, var(--ct)) 60%, transparent)); }
@keyframes clPrize { 50% { transform: translateY(-4px) rotate(-3deg) scale(1.04); } }
.csl-prize i { display: block; font-style: normal; color: var(--text); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csl-prize b { display: block; margin-top: 2px; font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.03em; color: var(--rc, var(--cl-gold)); }
.csl.is-open .csl-prize { opacity: .55; transition: opacity .4s; }

.csl .cs-reel {
    padding: 14px 0; border-radius: 20px;
    background: linear-gradient(180deg, rgba(0,0,0,.5), color-mix(in srgb, var(--ct) 14%, rgba(13,13,13,.7)));
    border: 1px solid color-mix(in srgb, var(--ct) 28%, transparent);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ct) 14%, rgba(25,25,25,.9)), inset 0 0 0 4px color-mix(in srgb, var(--ct) 22%, transparent), inset 0 10px 30px rgba(0,0,0,.6), 0 12px 30px -18px #000;
    transition: box-shadow .5s;
}
.csl.is-open .cs-reel { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ct) 14%, rgba(25,25,25,.9)), inset 0 0 0 4px color-mix(in srgb, var(--ct) 50%, transparent), inset 0 10px 30px rgba(0,0,0,.6), 0 0 34px -10px color-mix(in srgb, var(--ct) 60%, transparent); }
.csl .cs-reel::before { background: linear-gradient(90deg, color-mix(in srgb, var(--ct) 14%, #0c0c0c), transparent); }
.csl .cs-reel::after  { background: linear-gradient(270deg, color-mix(in srgb, var(--ct) 14%, #0c0c0c), transparent); }
.csl .cs-reel .it { background: linear-gradient(170deg, color-mix(in srgb, var(--ct) 14%, #1d1d1d), color-mix(in srgb, var(--ct) 14%, #0e0e0e)); border-color: color-mix(in srgb, var(--cl-gold-2) 10%, transparent); }
.csl .cs-reel .it .art { background: radial-gradient(90% 90% at 50% 25%, var(--rc-soft, rgba(255,255,255,.06)), transparent 70%), color-mix(in srgb, var(--ct) 14%, #121212); }

.csl .cs-reel .needle { width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--cl-gold-2), var(--cl-gold) 50%, var(--cl-gold-2)); box-shadow: 0 0 14px color-mix(in srgb, var(--ct) 90%, transparent); }
.csl .cs-reel .needle::before, .csl .cs-reel .needle::after {
    width: 16px; height: 16px; margin-left: -8px; border: 0; border-radius: 3px;
    background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff6b8a 35%, #b3123c 80%);
    box-shadow: 0 0 0 2px var(--cl-gold), 0 0 14px rgba(255,90,120,.8);
}
.csl .cs-reel .needle::before { top: 3px; transform: rotate(45deg); }
.csl .cs-reel .needle::after  { bottom: 3px; transform: rotate(45deg); }

.csl .cs-reel .it.won { overflow: hidden; }
.csl .cs-reel .it.won::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
    background-size: 250% 100%; animation: clSweep 1.1s ease-out .1s both;
}
@keyframes clSweep { from { background-position: 130% 0; } to { background-position: -40% 0; } }

.csl .cs-idle { color: color-mix(in srgb, var(--cl-gold-2) 60%, transparent); }
.csl .cs-drop { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--rc-soft), color-mix(in srgb, var(--ct) 14%, rgba(13,13,13,.6))); }
.csl .cs-drop::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
    background-size: 250% 100%; animation: clSweep 1.4s ease-out .2s both;
}
.csl .cs-drop .pic { background: radial-gradient(90% 90% at 50% 25%, var(--rc-soft), transparent 70%), color-mix(in srgb, var(--ct) 14%, #121212); }
.csl .cs-open {
    color: color-mix(in srgb, var(--ct) 14%, #161616); background: linear-gradient(180deg, var(--cl-gold-2), var(--ct) 55%, color-mix(in srgb, var(--ct) 72%, #000));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 color-mix(in srgb, var(--ct) 14%, rgba(60,60,60,.35)), 0 16px 34px -14px color-mix(in srgb, var(--ct) 70%, transparent);
    position: relative; overflow: hidden;
}
.csl .cs-open::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
    background-size: 260% 100%; animation: clBtn 3.8s ease-in-out infinite;
}
@keyframes clBtn { 0%, 70% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.csl .cs-open .cs-price { background: color-mix(in srgb, var(--ct) 14%, rgba(40,40,40,.18)); }
body[data-page="cases"] .dock [data-case-open] {
    --ct: #f0a62c; --cl-gold-2: color-mix(in srgb, var(--ct) 38%, #fff);
    color: color-mix(in srgb, var(--ct) 14%, #161616); background: linear-gradient(180deg, var(--cl-gold-2), var(--ct) 55%, color-mix(in srgb, var(--ct) 72%, #000));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -12px color-mix(in srgb, var(--ct) 70%, transparent);
}

.csl > .csl-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cl-coin {
    position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c8 0 12%, #ffd35a 38%, #c98a14 80%);
    box-shadow: inset 0 0 0 2px rgba(150,95,10,.55);
    animation: clCoin 1.2s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes clCoin {
    0% { transform: translate(0,0) scale(.4) rotateY(0); opacity: 1; }
    45% { transform: translate(calc(var(--x) * .7), var(--y)) scale(1) rotateY(360deg); opacity: 1; }
    100% { transform: translate(var(--x), calc(var(--y) + 120px)) scale(.8) rotateY(720deg); opacity: 0; }
}
.cl-gem {
    position: absolute; width: 11px; height: 11px; margin: -5.5px;
    background: linear-gradient(135deg, #fff, var(--rc, #7fb2ff) 45%, color-mix(in srgb, var(--rc, #7fb2ff) 60%, #000));
    transform: rotate(45deg); box-shadow: 0 0 10px var(--rc, #7fb2ff);
    animation: clGem 1.1s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes clGem {
    0% { transform: translate(0,0) rotate(45deg) scale(.3); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) rotate(405deg) scale(1); opacity: 0; }
}
.cl-float {
    position: absolute; transform: translate(-50%, 0); white-space: nowrap;
    font-family: var(--f-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em;
    color: var(--cl-gold-2); text-shadow: 0 2px 0 #7a4a08, 0 0 20px rgba(255,190,70,.8);
    animation: clFloatUp 1.7s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes clFloatUp {
    0% { opacity: 0; transform: translate(-50%, 16px) scale(.6); }
    20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

@container csl (max-width: 560px) {
    .csl-top { grid-template-columns: auto auto; justify-content: center; min-height: 160px; gap: 0; }
    .csl-prize { display: none; }
    .csl-lion { width: 120px; height: 150px; margin-right: -18px; }
    .csl-lion img { height: 150px; }
    .csl-chest { width: 160px; height: 160px; }
    .csl-say { left: 14px; top: -10px; font-size: 11px; padding: 6px 9px; max-width: 118px; white-space: normal; text-align: center; border-radius: 12px; }
    .csl-loot { width: 78px; height: 78px; margin-left: -39px; }

    .csl-loot b { left: auto; right: 88%; top: 18px; transform-origin: 100% 50%; }
    .csl-loot.up b { animation-name: clTagL; }
}
@container csl (min-width: 760px) {
    .csl-top { min-height: 220px; }
    .csl-lion { width: 196px; height: 214px; }
    .csl-lion img { height: 214px; }
    .csl-chest { width: 220px; height: 220px; }
    .csl-prize { width: 164px; }
}

@media (min-width: 1101px) and (max-height: 880px) {
    .cs-pick { margin-bottom: 12px; }
    .cs-pick .c { padding: 12px 12px 13px; }
    .cs-pick .c .art { height: 44px; margin-bottom: 8px; border-radius: 12px; }
    .cs-pick .c b { margin-bottom: 6px; }
    .cs-pick .c small { display: none; }
    .csl-top { min-height: 156px; }
    .csl-lion { width: 140px; height: 156px; }
    .csl-lion img { height: 156px; }
    .csl-chest { width: 160px; height: 160px; }
    .csl-prize .art { height: 54px; }
    .cs-result { margin-bottom: 10px; }
    .cs-open { min-height: 54px; }
}

html.is-lite .csl-rays, html.is-lite .csl-glow, html.is-lite .csl-dust, html.is-lite .csl > .csl-fx,
html.is-lite .csl .cs-open::after { display: none; }
html.is-lite .csl *, html.is-lite .csl { animation: none !important; }
html.is-lite .csl-say.on { opacity: 1; transform: none; }
html.is-lite .csl-loot.up, html.is-lite .csl-loot.up b, html.is-lite .csl-loot.up::before { opacity: 1; transform: none; }
html.is-lite .csl.is-loot .csl-chest .c-lid { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .csl *, .csl { animation: none !important; }
    .csl > .csl-fx, .csl-rays { display: none; }
    .csl-say.on { opacity: 1; transform: none; }
    .csl-loot.up, .csl-loot.up b, .csl-loot.up::before { opacity: 1; transform: none; }
    .csl.is-loot .csl-chest .c-lid { opacity: 0; }
}

.csl > .brandmark { left: 3.5%; top: 104px; z-index: 1; --bm-w: clamp(72px, calc(50% - 370px), 150px); }
@media (max-width: 760px) {

    .csl > .brandmark { left: auto; right: 4%; top: 13%; transform: none; --bm-w: clamp(84px, 18%, 150px); }
}