.roulette-page { --gold: #e9c574; --ink: #171c29; max-width: 1120px; margin: 0 auto 36px; }
.roulette-page [hidden] { display: none !important; }
.roulette-heading { text-align: center; margin: 26px 0; }
.roulette-heading h2 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0; }
.roulette-heading p { color: #667085; }
.roulette-heading .roulette-eyebrow { color: #806126; font-size: 11px; letter-spacing: .22em; font-weight: 700; }
.roulette-tabs { display: flex; max-width: 660px; margin: 0 auto 24px; padding: 5px; border-radius: 12px; background: #e9edf2; gap: 5px; }
.roulette-page button { font: inherit; cursor: pointer; border-radius: 8px; padding: 10px 20px; border: 1px solid #cbd2dc; background: white; color: #263248; }
.roulette-page button:disabled { opacity: .42; cursor: not-allowed; }
.roulette-page button:focus-visible, .roulette-page input:focus-visible { outline: 3px solid #468bd7; outline-offset: 3px; }
.roulette-tabs button { flex: 1; border: 0; background: transparent; font-weight: 700; }
.roulette-tabs button[aria-selected="true"] { background: var(--ink); color: white; box-shadow: 0 2px 6px #0002; }
.roulette-settings { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roulette-settings > div { display: flex; align-items: center; gap: 14px; }
.roulette-settings label { font-weight: 700; }
.roulette-settings input { width: 78px; padding: 8px; border: 1px solid #bec7d3; border-radius: 7px; font: inherit; }
#rouletteProgress { font-variant-numeric: tabular-nums; font-weight: 700; }
#rouletteRemaining, .roulette-help { font-size: 13px; color: #667085; }
.roulette-help { margin: 10px 0 18px; }
.roulette-scope-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; }
.roulette-scope-setting label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.roulette-scope-setting input { width: 17px; height: 17px; accent-color: #9b742b; }
.roulette-scope-setting small { color: #667085; font-size: 12px; }
.roulette-error { color: #ad2938; }
.roulette-stage { --card-width: 160px; --card-height: 194px; height: 360px; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 50% 90%, #52432b 0%, #242735 42%, #121724 85%); box-shadow: inset 0 0 0 1px #e9c57435, 0 12px 28px #17233318; }
.roulette-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(90deg, #121724e6, transparent 14%, transparent 86%, #121724e6); }
.roulette-stage-title { position: absolute; top: 25px; width: 100%; text-align: center; font-size: 11px; letter-spacing: .32em; color: #e5d8b6; }
.roulette-reel { position: absolute; inset: 0; z-index: 1; }
.roulette-card { position: absolute; left: 50%; top: 50%; width: var(--card-width); height: var(--card-height); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 16px 9px; color: #fff; border: 1px solid #d0bc9048; border-radius: 9px; background: linear-gradient(145deg, #ffffff0f, #ffffff03); will-change: transform; }
.roulette-card img { width: 105px; height: 105px; object-fit: contain; filter: drop-shadow(0 4px 8px #0005); }
.roulette-card span { font-size: 13px; font-weight: 700; text-align: center; overflow-wrap: anywhere; line-height: 1.4; }
.roulette-card img.is-missing { visibility: hidden; }
.roulette-scope-badge { font-style: normal; font-size: 10px; font-weight: 700; color: #674507; background: #f3dfaa; border-radius: 4px; padding: 2px 6px; }
.roulette-scope-badge.is-excluded { color: #fff; background: #697386; }
.roulette-card .roulette-scope-badge { position: absolute; top: 6px; right: 6px; }
.roulette-target { position: absolute; width: var(--card-width); height: var(--card-height); left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid var(--gold); border-radius: 9px; box-shadow: 0 0 22px #e9c57420, inset 0 0 20px #e9c5740b; pointer-events: none; z-index: 3; }
.roulette-marker { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.roulette-marker--top { top: 61px; border-top: 11px solid var(--gold); }
.roulette-marker--bottom { bottom: 61px; border-bottom: 11px solid var(--gold); }
.roulette-reveal { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: radial-gradient(ellipse, #554728, #131927 74%); }
.roulette-reveal::before { content: ''; position: absolute; width: 290px; height: 290px; border-radius: 50%; background: repeating-conic-gradient(from 10deg, transparent 0deg 17deg, #efd48a30 18deg 19deg, transparent 20deg 35deg); mask-image: radial-gradient(transparent 35%, black 55%, transparent 70%); animation: roulette-rays 2s ease-out both; }
.roulette-reveal .roulette-card { width: 220px; height: 260px; border-color: var(--gold); background: linear-gradient(145deg, #b9a37122, #ffffff05); transform: translate(-50%, -50%); box-shadow: 0 0 45px #e9c57435; animation: roulette-win .65s cubic-bezier(.2,.8,.2,1) both; }
.roulette-reveal .roulette-card img { width: 150px; height: 150px; }
.roulette-reveal .roulette-card span { font-size: 19px; }
.roulette-destiny { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #fffbe6 0%, #d49d35f2 38%, #191622f2 75%); animation: roulette-destiny-screen 1.8s ease both; }
.roulette-destiny::before, .roulette-destiny::after { content: ''; position: absolute; z-index: 1; inset: -45%; background: repeating-conic-gradient(transparent 0deg 9deg, #fff8cd9c 10deg 11deg, transparent 12deg 20deg); animation: roulette-destiny-rays 1.8s ease-out both; }
.roulette-destiny::after { transform: rotate(8deg); opacity: .5; }
.roulette-destiny-swarm { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.roulette-destiny-swarm-item { position: absolute; left: -120px; top: calc(20% + var(--swarm-row) * 24%); display: grid; place-items: center; width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px); animation: roulette-swarm 1.35s linear infinite; animation-delay: calc(var(--swarm-index) * -90ms); }
.roulette-destiny-swarm-item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px #0009) drop-shadow(0 0 8px #fff4b0); }
.roulette-destiny-swarm-item.is-destiny-target { z-index: 2; }
.roulette-destiny-swarm-item.is-destiny-target img { padding: 6px; border: 2px solid #ffed98; border-radius: 50%; background: radial-gradient(circle, #fffbdc9e, #eab83c4d 58%, transparent 72%); box-shadow: 0 0 12px #fff5b8, 0 0 28px #ffc840; animation: roulette-destiny-glow .46s ease-in-out infinite alternate; }
.roulette-destiny-copy { position: absolute; top: 16px; z-index: 3; display: flex; align-items: center; flex-direction: column; padding: 7px 18px; border: 1px solid #fff3b35c; border-radius: 999px; color: #fff; background: #241a20b8; text-shadow: 0 2px 8px #503500; }
.roulette-destiny-copy small { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
@keyframes roulette-destiny-screen { 0% { opacity: 0; filter: brightness(4); } 12%, 100% { opacity: 1; filter: brightness(1); } }
@keyframes roulette-destiny-rays { from { transform: rotate(-18deg) scale(.45); } to { transform: rotate(18deg) scale(1.15); } }
@keyframes roulette-swarm { 0% { transform: translateX(0) scale(.72) rotate(-7deg); opacity: 0; } 8%, 91% { opacity: 1; } 100% { transform: translateX(calc(100vw + 240px)) scale(1.08) rotate(7deg); opacity: 0; } }
@keyframes roulette-destiny-glow { from { filter: brightness(1) drop-shadow(0 3px 6px #0009) drop-shadow(0 0 6px #fff3a5); } to { filter: brightness(1.22) drop-shadow(0 3px 6px #0009) drop-shadow(0 0 17px #fffbd0); } }
.roulette-status { min-height: 28px; text-align: center; margin: 22px 0 15px; font-weight: 700; color: #775a22; }
.roulette-controls { display: flex; justify-content: center; gap: 14px; }
.roulette-controls button { min-width: 155px; padding: 14px 28px; font-weight: 700; }
.roulette-page .roulette-primary { color: #1b2230; border-color: #dbb669; background: linear-gradient(135deg, #f2dca3, #dfb65f); }
.roulette-page .roulette-stop { color: #fff; background: #293345; border-color: #293345; }
.roulette-motion { display: flex; gap: 7px; align-items: center; justify-content: center; font-size: 12px; color: #667085; margin: 18px 0 28px; }
.roulette-stock { border-top: 1px solid #dfe4eb; padding-top: 22px; }
.roulette-stock-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roulette-stock-heading h3 { margin: 0; font-size: 18px; }
.roulette-page .roulette-reset { padding: 7px 10px; font-size: 12px; background: transparent; }
#rouletteEmpty { color: #77808f; padding: 28px 12px; text-align: center; border: 1px dashed #ccd3dd; border-radius: 10px; }
#rouletteResults { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#rouletteResults li { position: relative; display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 20px 12px 16px; background: #fff; border: 1px solid #d9c695; border-radius: 10px; text-align: center; }
#rouletteResults img { width: 72px; height: 72px; object-fit: contain; }
#rouletteResults span { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
#rouletteResults small { position: absolute; top: 7px; left: 10px; color: #8b703a; }
.roulette-dialog { max-width: 420px; width: calc(100% - 48px); box-sizing: border-box; padding: 26px; border: 1px solid #d2bc8a; border-radius: 14px; color: #263248; }
.roulette-dialog::backdrop { background: #11182799; }
.roulette-dialog form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.roulette-custom-setting { margin: 0 0 20px; padding: 14px; border: 1px solid #d9e0e8; border-radius: 12px; background: #f8fafc; }
.roulette-custom-setting__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roulette-custom-setting__head button { padding: 7px 12px; font-size: 12px; }
.roulette-custom-icons { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.roulette-custom-icons:empty { display: none; }
.roulette-custom-icons img { width: 36px; height: 36px; padding: 3px; object-fit: contain; border: 1px solid #d5dce5; border-radius: 7px; background: #fff; }
.roulette-custom-setting .roulette-help { margin: 10px 0 0; }
.roulette-custom-dialog { max-width: 960px; height: min(760px, calc(100vh - 40px)); padding: 0; overflow: hidden; }
.roulette-custom-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 22px 12px; border-bottom: 1px solid #e1e6ed; }
.roulette-custom-dialog__head h3, .roulette-custom-dialog__head p { margin: 0 0 5px; }
.roulette-custom-dialog__head > button { border: 0; padding: 2px 9px; font-size: 25px; background: transparent; }
.roulette-custom-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 22px; background: #f8fafc; }
.roulette-custom-tools > input { flex: 1 1 230px; }
.roulette-custom-tools input { min-height: 38px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.roulette-custom-tools > div { display: flex; align-items: center; gap: 5px; }
.roulette-custom-tools input[type="number"] { width: 65px; }
.roulette-custom-tools button { padding: 8px 11px; font-size: 12px; }
.roulette-custom-dialog > .roulette-error { margin: 8px 22px; }
.roulette-custom-grid { height: calc(100% - 210px); overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 8px; padding: 12px 22px 20px; align-content: start; }
.roulette-page .roulette-custom-choice { position: relative; min-height: 132px; padding: 12px 7px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 2px solid transparent; background: #f4f6f9; }
.roulette-page .roulette-custom-choice[aria-pressed="true"] { border-color: #b1873a; background: #fff8e6; box-shadow: inset 0 0 0 2px #f0d99e; }
.roulette-custom-choice img { width: 72px; height: 72px; object-fit: contain; }
.roulette-custom-choice span { font-size: 12px; font-weight: 700; line-height: 1.25; }
.roulette-custom-choice__badge { position: absolute; top: 5px; right: 5px; padding: 2px 5px; border-radius: 4px; font-style: normal; font-size: 9px; color: #674507; background: #f3dfaa; }
.roulette-custom-choice__badge.is-excluded { color: #fff; background: #697386; }
.roulette-custom-dialog__actions { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid #e1e6ed; background: #fff; }
@keyframes roulette-win { from { transform: translate(-50%, -50%) scale(.72); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes roulette-rays { from { transform: scale(.6) rotate(-20deg); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1.3) rotate(20deg); opacity: .4; } }
.roulette-page.is-reduced-motion *, .roulette-page.is-reduced-motion *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .roulette-reveal::before, .roulette-reveal .roulette-card { animation: none; } }
@media (max-width: 600px) {
    .roulette-heading { margin: 18px 0; }
    .roulette-stage { --card-width: 126px; --card-height: 168px; height: 310px; border-radius: 12px; }
    .roulette-card img { width: 84px; height: 84px; }
    .roulette-card span { font-size: 12px; }
    .roulette-marker--top { top: 51px; } .roulette-marker--bottom { bottom: 51px; }
    .roulette-reveal .roulette-card { width: 184px; height: 230px; }
    .roulette-reveal .roulette-card img { width: 126px; height: 126px; }
    .roulette-controls button { min-width: 0; flex: 1; max-width: 190px; padding: 14px; }
    .roulette-settings > div { gap: 10px; }
    #rouletteResults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roulette-tabs button { padding-inline: 7px; font-size: 12px; }
    .roulette-custom-dialog { width: calc(100% - 18px); height: calc(100vh - 18px); }
    .roulette-custom-dialog__head, .roulette-custom-tools { padding-inline: 12px; }
    .roulette-custom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-inline: 8px; }
    .roulette-page .roulette-custom-choice { min-height: 112px; padding-inline: 4px; }
    .roulette-custom-choice img { width: 58px; height: 58px; }
}