/* Рулетка смен: вход в каталоге и лента в диалоге. Токены — из catalogue-ui.css. */
.roulette-entry{display:flex;align-items:center;gap:16px;margin:0 0 16px;padding:16px 16px 16px 20px;border:1px solid #c9def8;border-radius:16px;background:linear-gradient(120deg,var(--ice),#f6fbff 60%,#fff)}
.roulette-entry-mark{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#d4e9ff;font-size:28px;line-height:1}
.roulette-entry>div{flex:1;min-width:0}.roulette-entry strong{display:block;font-size:15px;line-height:1.4;letter-spacing:-.02em}.roulette-entry>div>span{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.5}
.roulette-entry .primary{flex:none;min-height:44px;padding:10px 16px;font-size:13px}

.roulette-intro{font-size:14px;line-height:1.6;color:#35445a;margin-bottom:16px}
.roulette-stage{position:relative;overflow:hidden;margin:0 -32px;padding:14px 0;background:var(--ice);border-block:1px solid #d5e7fb;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.roulette-reel{display:flex;gap:10px;width:max-content;will-change:transform}
.roulette-tile{display:flex;flex-direction:column;align-items:center;gap:6px;width:136px;flex:none;padding:12px 10px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;user-select:none}
.roulette-tile strong{font-size:12px;line-height:1.3;height:31px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.roulette-pay{font-size:11px;font-weight:800;color:#0758d4;white-space:nowrap;font-variant-numeric:tabular-nums}
.roulette-visual{display:grid;place-items:center;width:72px;height:72px;border-radius:12px;background:var(--ice);font-size:32px;overflow:hidden;flex:none}.roulette-visual img{width:100%;height:100%;object-fit:contain}
.roulette-pointer{position:absolute;left:50%;top:0;bottom:0;width:0;transform:translateX(-50%);pointer-events:none}
.roulette-pointer:before,.roulette-pointer:after{content:'';position:absolute;left:-9px;border:9px solid transparent}
.roulette-pointer:before{top:0;border-top-color:var(--blue)}.roulette-pointer:after{bottom:0;border-bottom-color:var(--blue)}
.roulette-stage.landed .is-winner{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 8px 24px #0968f933;animation:roulette-pop .5s ease-out}
.roulette-stage .is-winner{transition:border-color .2s,box-shadow .2s}
@keyframes roulette-pop{40%{transform:scale(1.07)}}
.roulette-spin{width:100%;margin-top:20px;font-size:16px;min-height:56px}
.roulette-live{margin-top:12px;font-size:12px;color:var(--muted);text-align:center;min-height:18px}
.roulette-live.is-quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;min-height:0}

.roulette-result{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:16px;animation:roulette-in .35s ease-out}
.roulette-result-head{display:flex;gap:16px;align-items:center}.roulette-result-head .roulette-visual{width:88px;height:88px}
.roulette-result h3{font-size:20px;line-height:1.25;letter-spacing:-.03em;margin-top:2px}
.roulette-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0758d4}
.roulette-facts{font-size:13px;line-height:1.6;color:#485c76;margin-top:4px}
.roulette-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
@keyframes roulette-in{from{opacity:0;transform:translateY(8px)}}

@media(max-width:600px){.roulette-stage{margin-inline:-16px}}
@container app (max-width:479px){.roulette-entry{padding:14px;gap:12px}.roulette-entry-mark{width:44px;height:44px;font-size:24px}.roulette-entry .primary{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.roulette-result,.roulette-stage.landed .is-winner{animation:none}}