/* «Рулетка» — пустое состояние (Z-157, Claude Design «Empty States», ec-tape). Цвета — слой темы. */
.ruletka { display: block; width: 280px; max-width: 100%; margin: 0 auto 12px; }
.ruletka svg { display: block; width: 100%; height: auto; overflow: visible; }
.ruletka__setka { stroke: var(--border, #DAD5CB); opacity: .45; }
.ruletka__liniya { stroke: var(--border, #DAD5CB); }
.ruletka__chernila { stroke: var(--text, #24221F); }
.ruletka__zalivka { fill: var(--text, #24221F); }
.ruletka__lenta-fon { fill: var(--warning-light, #F7D9C2); stroke: var(--text, #24221F); }
.ruletka__korpus { fill: var(--warning, #EC7A2C); stroke: var(--text, #24221F); }
.ruletka__bumaga { fill: var(--surface, #FBFAF7); }
.ruletka__bumaga-liniya { stroke: var(--surface, #FBFAF7); }
.ruletka__tekst { fill: var(--text, #24221F); stroke: none; font-family: 'Montserrat', sans-serif; }
.ruletka__lenta { animation: ruletka-lenta 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.ruletka__razmer { animation: ruletka-razmer 6s ease infinite; }
@keyframes ruletka-lenta { 0%, 8% { transform: translateX(-150px); } 38%, 72% { transform: translateX(0); } 92%, 100% { transform: translateX(-150px); } }
@keyframes ruletka-razmer { 0%, 38% { opacity: 0; } 46%, 68% { opacity: 1; } 76%, 100% { opacity: 0; } }
/* «Уменьшить движение» — лента вытянута, размер виден, ничего не движется. */
@media (prefers-reduced-motion: reduce) {
    .ruletka__lenta { animation: none; transform: none; }
    .ruletka__razmer { animation: none; opacity: 1; }
}