/* AivanCrate — Классическая рулетка (Demon roulette) в стиле V2 */
.rcx-setup { padding: .9rem 1rem; margin: 0 auto 1.1rem; }
.rcx-setup-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: .9rem; align-items: end; }
.rcx-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; min-width: 0; }
.rcx-field small { color: var(--av2-muted); font-size: .72rem; }
.rcx-field-end { gap: .45rem; }
.rcx-radio { margin: 0; cursor: pointer; }
.rcx-radio input { display: none; }
.rcx-radio span { display: inline-block; padding: .35rem .8rem; border-radius: .6rem; font-weight: 800; font-size: .82rem; color: var(--av2-ink); }
.rcx-radio input:checked + span { background: linear-gradient(180deg, var(--av2-blue-2), var(--av2-blue)); box-shadow: 0 0 0 2px #000; color: #fff; }
.rcx-check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; font-weight: 700; color: var(--av2-muted); cursor: pointer; }
.rcx-check input { accent-color: #3b49ff; }
.rcx-start { justify-content: center; padding: .6rem 1rem; font-size: 1rem; }

.rcx-game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; scroll-margin-top: 5rem; }
.rcx-game[hidden] { display: none; }
.rcx-main { padding: 1rem; }
.rcx-percent { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.rcx-percent b { font-size: clamp(3rem, 9vw, 5.2rem); line-height: 1; color: #fff; text-shadow: 0 4px 0 #000, 0 0 30px rgba(59, 73, 255, .7); }
.rcx-percent-sub { font-size: .8rem; color: var(--av2-muted); }
.rcx-meter { position: relative; height: 1.2rem; margin: .8rem 0 1rem; border-radius: 999px; overflow: hidden; background: rgba(2, 3, 20, .7); box-shadow: 0 0 0 2px #000; }
.rcx-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--av2-blue), var(--av2-sky), var(--av2-gold)); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.rcx-meter span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000; }

.rcx-current { transition: filter .3s, opacity .3s; }
.rcx-current.is-lost { filter: grayscale(1); opacity: .7; }
.rcx-current.is-rolling .rcx-card { border-color: var(--av2-gold); box-shadow: 0 0 0 2px var(--av2-gold), 0 0 30px rgba(255, 216, 74, .35); }
.rcx-current.is-landed .rcx-card { animation: rcxLand .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rcxLand { from { transform: scale(.94); } }
.rcx-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; padding: .7rem; border-radius: 1rem; background: rgba(2, 3, 20, .55); border: 1px solid var(--av2-line); box-shadow: 0 0 0 1px #000; }
.rcx-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .7rem; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #000; align-self: start; }
.rcx-thumb img.is-bg, .rcx-thumb img.is-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcx-thumb .is-bg { object-fit: cover; filter: blur(14px) brightness(.5); transform: scale(1.15); }
.rcx-thumb .is-img { object-fit: contain; }
.rcx-diff { position: absolute; left: .4rem; top: .35rem; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.rcx-dname { position: absolute; right: .4rem; bottom: .4rem; padding: .1rem .45rem; border-radius: .4rem; font-size: .72rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .75); }
.rcx-info { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.rcx-name { font-size: 1.35rem; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.rcx-by { color: var(--av2-muted); font-size: .85rem; }
.rcx-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.rcx-chips .av2-chip, .rcx-chips .av2-copy { height: 1.7rem; font-size: .72rem; }
.rcx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .2rem; }
.rcx-facts div { display: flex; flex-direction: column; gap: .1rem; padding: .35rem .5rem; border-radius: .55rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(143, 160, 255, .1); }
.rcx-facts span { font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--av2-sky); }
.rcx-facts b { font-size: .92rem; color: #fff; }
.rcx-genres { display: flex; flex-wrap: wrap; gap: .25rem; }
.rcx-genres img { width: 24px; height: 24px; object-fit: contain; border-radius: .3rem; box-shadow: 0 0 0 1px #000; }
.rcx-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.rcx-next { min-width: 10rem; justify-content: center; font-size: 1rem; }
.rcx-skips { margin-left: .2rem; padding: 0 .4rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .72rem; }
.rcx-keys { margin: .6rem 0 0; text-align: center; color: var(--av2-muted); font-size: .76rem; }
.rcx-keys b { color: #fff; padding: 0 .3rem; border-radius: .3rem; background: rgba(143, 160, 255, .15); }
.rcx-end { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 1rem; padding: .9rem; border-radius: 1rem; text-align: center; background: linear-gradient(180deg, rgba(255, 216, 74, .16), rgba(2, 3, 20, .6)); border: 1px solid rgba(255, 216, 74, .45); }
.rcx-end[hidden] { display: none; }
.rcx-end b { font-size: 1.5rem; color: #fff; }
.rcx-end strong { font-family: "Oxygene1", "PusabGD", sans-serif; font-weight: 400; color: var(--av2-gold); font-size: 1.3rem; }

.rcx-side { padding: .9rem; max-height: calc(100vh - 7rem); overflow: auto; position: sticky; top: 80px; }
.rcx-side-head { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .6rem; }
.rcx-side-head small { color: var(--av2-muted); font-size: .76rem; }
.rcx-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .45rem; }
.rcx-step { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .35rem; border-radius: .7rem; background: rgba(2, 3, 20, .55); border: 1px solid var(--av2-line); animation: av2Rise .3s ease both; }
.rcx-step img, .rcx-step-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; background: #070a33; display: block; }
.rcx-step-img.is-q { display: grid; place-items: center; font-family: "Oxygene1", "PusabGD", sans-serif; font-size: 1.4rem; color: var(--av2-muted); }
.rcx-step-p { position: absolute; left: .5rem; top: .45rem; z-index: 1; padding: 0 .35rem; border-radius: .35rem; font-size: .7rem; font-weight: 900; color: #fff; background: rgba(0, 0, 0, .75); }
.rcx-step-n { font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcx-step.is-done { border-color: rgba(74, 222, 128, .55); }
.rcx-step.is-done .rcx-step-p { background: #15803d; }
.rcx-step.is-current { border-color: var(--av2-gold); box-shadow: 0 0 0 1px var(--av2-gold), 0 0 18px rgba(255, 216, 74, .35); }
.rcx-step.is-notdone { filter: grayscale(1); opacity: .55; }
.rcx-confetti { position: fixed; inset: 0; z-index: 1090; pointer-events: none; }
.rcx .d-none { display: none !important; }

@media (max-width: 991.98px) {
    .rcx-setup-grid { grid-template-columns: 1fr 1fr; }
    .rcx-game { grid-template-columns: 1fr; }
    .rcx-side { position: static; max-height: none; }
}
@media (max-width: 575.98px) { .rcx-setup-grid, .rcx-card { grid-template-columns: 1fr; } }