.roulette{--font-scale:1.2;--reel-card-width:250px;position:relative;isolation:isolate;color:#fffafc;background:rgb(24 10 20 / 86%);border:1px solid #ed1e68;border-radius:16px;font-family:inherit;overflow:visible}.roulette-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px}.roulette-title{min-width:0;margin:0;font-size:calc(22px * var(--font-scale));font-weight:750;line-height:1.25;overflow-wrap:anywhere}.roulette-count{flex:none;font-size:calc(15px * var(--font-scale));color:#ff9dbb;font-variant-numeric:tabular-nums}.roulette-progress{height:3px;background:#5c263d;overflow:hidden}.roulette-progress-fill{height:100%;background:#ed1e68;transform:scaleX(0);transform-origin:left}.roulette-viewport{height:112px;position:relative;overflow:hidden;background:#1a1018;border-radius:0 0 14px 14px}.roulette-viewport:after{position:absolute;content:"";inset:0;pointer-events:none;background:linear-gradient(90deg,#1a1018 0%,transparent 8%,transparent 92%,#1a1018 100%)}.roulette-track{position:absolute;display:flex;gap:10px;align-items:center;height:100%;will-change:transform}.roulette-card{box-sizing:border-box;width:var(--reel-card-width);height:88px;flex:none;display:flex;align-items:center;justify-content:flex-start;gap:12px;background:#30202c;border:1px solid #76405a;border-radius:12px;padding:12px}.roulette-avatar,.roulette-winner-avatar{position:relative;overflow:hidden;display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;background:hsl(var(--avatar-hue,90) 23% 32%);color:#fff;font-size:calc(19px * var(--font-scale));font-weight:800}.roulette-avatar img,.roulette-winner-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.roulette-card-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(20px * var(--font-scale));font-weight:700}.roulette-pointer{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid #ed1e68;z-index:2;filter:drop-shadow(0 3px 3px #0008)}.roulette-pointer:after{content:"";position:absolute;top:88px;left:-7px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #ed1e68}.roulette-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px 20px;color:#ff9dbb;font-size:calc(15px * var(--font-scale))}.roulette-empty[hidden]{display:none}.roulette-status{margin:0;padding:7px 20px 10px;text-align:center;color:#ff9dbb;font-size:calc(12px * var(--font-scale));line-height:1.3}.roulette.is-empty .roulette-viewport{height:34px;background:transparent}.roulette.is-empty .roulette-viewport:after{display:none}.roulette.is-empty .roulette-status{display:none}.roulette.is-empty .roulette-progress{display:none}.roulette-reveal{display:none;text-align:center;padding:14px 20px 4px;position:relative}.has-winner .roulette-reveal{display:flex;justify-content:center;align-items:center;gap:12px;animation:roulette-reveal .55s cubic-bezier(.16,1,.3,1)}.roulette-winner-label{color:#ffd14d;font-size:calc(12px * var(--font-scale));font-weight:850;letter-spacing:.12em}.roulette-winner-name{min-width:0;font-size:calc(34px * var(--font-scale));line-height:1.15;max-width:calc(100% - 170px);overflow-wrap:anywhere;color:#fffafc;letter-spacing:-.025em}.roulette-winner-avatar{background:#674b2c;color:#fffafc;width:48px;height:48px}.roulette-card.is-winner{border:2px solid #ffd14d;background:linear-gradient(135deg,#4d342a,#2e1e25);box-shadow:0 6px 20px #0005}.has-winner .roulette-progress-fill{background:#ffd14d}.roulette-confetti{position:absolute;inset:-170px 0 0;overflow:visible;pointer-events:none;z-index:5}.roulette-confetti-bit{position:absolute;left:var(--x);top:0;width:7px;height:13px;opacity:0;animation:roulette-confetti 2.5s var(--delay) ease-out forwards}
.roulette.is-vertical .roulette-viewport{height:220px}.roulette.is-vertical .roulette-track{width:100%;height:auto;flex-direction:column;align-items:stretch;padding:0 20px;box-sizing:border-box}.roulette.is-vertical .roulette-card{width:100%;height:64px;padding:7px 24px}.roulette.is-vertical .roulette-avatar{width:46px;height:46px}.roulette.is-vertical .roulette-card-name{white-space:normal;overflow-wrap:anywhere;font-size:calc(19px * var(--font-scale));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.roulette.is-vertical .roulette-viewport:after{background:linear-gradient(180deg,#1a1018 0%,transparent 12%,transparent 88%,#1a1018 100%)}.roulette.is-vertical .roulette-pointer{top:50%;left:0;transform:translateY(-50%);border:10px solid transparent;border-left:12px solid #ed1e68}.roulette.is-vertical .roulette-pointer:after{top:-7px;left:calc(100cqw - 24px);border:7px solid transparent;border-right:10px solid #ed1e68}.roulette.is-vertical .roulette-viewport{container-type:inline-size}.roulette.is-vertical.is-empty .roulette-viewport{height:34px}
@keyframes roulette-confetti{8%{opacity:1}100%{opacity:0;transform:translate(var(--drift),480px) rotate(var(--turn))}}@keyframes roulette-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
html:has(.overlay-stage){background:transparent;color-scheme:normal}body:has(.overlay-stage){margin:0;background:transparent!important}.overlay-stage{margin:0;max-width:none;width:auto;position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:32px 5vw;background:transparent;font-family:inherit}.overlay-panel{position:relative;width:min(960px,100%)}.overlay-panel .roulette{box-shadow:0 16px 48px #0005}.overlay-connection{position:absolute;right:16px;bottom:-22px;color:#f4dbe8;font-size:11px;background:#21131ded;padding:3px 8px;border-radius:4px}.overlay-stage--portrait{padding:24px clamp(16px,5.56vw,60px) clamp(64px,12.5dvh,240px)}.overlay-stage--portrait .overlay-panel{width:min(960px,100%)}
@media(max-width:600px){.overlay-stage{padding:24px 16px}.overlay-stage--portrait{padding-bottom:clamp(64px,12.5dvh,240px)}.roulette{--reel-card-width:220px}.roulette-header{padding:12px;gap:10px;align-items:flex-start}.roulette-title{font-size:calc(18px * var(--font-scale))}.roulette-count{font-size:calc(12px * var(--font-scale))}.has-winner .roulette-reveal{flex-wrap:wrap}.roulette-winner-label{flex:0 0 100%}.roulette-winner-name{font-size:calc(28px * var(--font-scale));max-width:calc(100% - 64px)}.roulette-status{font-size:12px}}
@media(prefers-reduced-motion:reduce){.roulette *, .roulette *:before,.roulette *:after{animation:none!important;transition:none!important}.roulette-confetti{display:none}}
/* Broadcast typography stays readable after OBS scales the source down. */
.roulette{--reel-card-width:280px}
.roulette-title{font-size:calc(24px * var(--font-scale))}
.roulette-card-name{font-size:calc(24px * var(--font-scale))}
.roulette-empty{font-size:calc(20px * var(--font-scale));line-height:1.25}
.roulette-winner-name{font-size:calc(40px * var(--font-scale))}
.roulette.is-vertical .roulette-card{height:calc(56px * var(--font-scale) + 16px)}
.roulette.is-vertical .roulette-card-name{font-size:calc(24px * var(--font-scale));line-height:1.15}
@media(max-width:600px){.roulette-header{flex-wrap:wrap;align-items:center;row-gap:6px}.roulette-title{font-size:calc(20px * var(--font-scale));flex:1 1 180px}.roulette-count{font-size:calc(12px * var(--font-scale));margin-left:auto}.roulette-card{width:280px}.roulette-winner-name{font-size:calc(34px * var(--font-scale));max-width:calc(100% - 64px)}.roulette.is-empty .roulette-viewport{height:auto;min-height:42px}.roulette.is-empty .roulette-empty{position:relative;font-size:calc(16px * var(--font-scale));padding:2px 12px 10px}.roulette.is-vertical .roulette-track{padding-inline:16px}.roulette.is-vertical .roulette-card{width:100%;padding-inline:10px;gap:8px}}
.roulette.is-empty .roulette-empty{padding-block:0}
/* Percentages describe available travel, so the full panel remains inside the canvas. */
html:has(.overlay-stage),body:has(.overlay-stage){overflow:hidden;width:100%;height:100%}
.overlay-stage,.overlay-stage--portrait{display:block;padding:0;overflow:hidden}
.overlay-stage .overlay-panel{position:absolute;width:min(var(--panel-width,960px),100%);max-width:100%;max-height:100dvh;left:var(--panel-x,50%);top:var(--panel-y,96%);transform:translate(calc(-1 * var(--panel-x,50%)),calc(-1 * var(--panel-y,96%)))}
.overlay-stage.is-constrained .overlay-panel{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#98657e rgb(24 10 20 / 86%)}
.overlay-stage .overlay-connection{bottom:4px;right:8px;font-size:10px}

.roulette-header{background:#ed1e68;color:#fff;border-radius:14px 14px 0 0}.roulette-count{color:#fff4f9}.roulette.is-empty .roulette-header{border-radius:14px 14px 0 0}.roulette-card.is-winner{border-color:#ffd14d}.roulette-winner-label{color:#ffd14d}
.roulette-avatar{background:#603047;color:#fff5fa}.roulette-confetti-bit{background:#ed1e68!important}.roulette-confetti-bit:nth-child(3n){background:#ffd14d!important}.roulette-confetti-bit:nth-child(3n + 1){background:#fff1f7!important}

/* Compact OBS recruitment scene, driven by the existing collection state. */
.roulette-collecting{padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;color:#fff4f9}
.roulette-collecting[hidden]{display:none}.roulette-collecting-title{margin:0;font-size:calc(26px * var(--font-scale));line-height:1.25;font-weight:750;overflow-wrap:anywhere}
.roulette-collecting-help{grid-column:1;margin:0;font-size:calc(15px * var(--font-scale));line-height:1.5;color:#ebcadb;overflow-wrap:anywhere}
.roulette-collecting-count{grid-column:2;grid-row:1 / 3;font-size:calc(22px * var(--font-scale));line-height:1.3;color:#ffb6d5;font-variant-numeric:tabular-nums;white-space:nowrap}
.roulette.is-collecting>.roulette-header,.roulette.is-collecting>.roulette-progress,.roulette.is-collecting>.roulette-viewport,.roulette.is-collecting>.roulette-reveal,.roulette.is-collecting>.roulette-status,.roulette.is-collecting>.roulette-confetti{display:none}
@media(max-width:600px){.roulette-collecting{padding:20px;grid-template-columns:1fr;gap:10px}.roulette-collecting-title{font-size:calc(22px * var(--font-scale))}.roulette-collecting-count{grid-column:1;grid-row:auto;font-size:calc(19px * var(--font-scale))}}

/* OBS Order Overlay reference: inset pink heading, translucent burgundy, gold results. */
.roulette{border-width:2px;background:rgb(24 10 20 / 86%);color:#fffafc}
.roulette-header,.roulette.is-empty .roulette-header{margin:8px;border-radius:10px;padding:6px 12px;background:#ed1e68;color:#fffafc}
.roulette-count{color:#fffafc}.roulette-title{color:#fffafc}.roulette-status,.roulette-empty{color:#ff9dbb}.roulette-winner-label,.roulette-winner-name{color:#ffd14d}.roulette-winner-avatar{background:#674b2c;color:#fffafc}
.roulette-collecting{padding:8px;gap:8px 12px;color:#fffafc}
.roulette-collecting-title{grid-column:1 / -1;padding:8px 12px;border-radius:10px;background:#ed1e68;color:#fffafc}
.roulette-collecting-help{padding:0 12px 8px;color:#ff9dbb}.roulette-collecting-count{grid-column:2;grid-row:2;padding:0 12px 8px 0;color:#ffd14d}
.roulette-confetti-bit:nth-child(3n){background:#ffd14d!important}
@media(max-width:600px){.roulette-header,.roulette.is-empty .roulette-header{padding:6px 10px}.roulette-collecting{padding:8px;gap:8px}.roulette-collecting-count{grid-column:1;grid-row:3;padding:0 12px 8px}.roulette-collecting-help{padding-bottom:0}}

.roulette[hidden]{display:none!important}.overlay-stage.is-hidden .overlay-panel{visibility:hidden}