/* ============================================
   MATRIX SQUAD — Roulette (Games) styles
   Uses global :root tokens from styles.css
   ============================================ */

.game-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  max-width:1180px; margin:0 auto 22px; padding:0 16px;
  position:relative;
  left:-148px;
}
.game-tab{
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.5px;
  font-size:13px; color:var(--text); cursor:pointer;
  background:var(--panel); border:1px solid var(--border-2);
  border-radius:12px; padding:11px 20px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, box-shadow .2s, color .2s;
}
.game-tab.active{
  color:#fff; border-color:rgba(0,245,255,.55);
  box-shadow:0 0 0 1px rgba(0,245,255,.25), 0 0 22px rgba(0,245,255,.18);
}
.game-tab.is-soon{ opacity:.4; cursor:not-allowed; font-weight:600; }

.roulette{ max-width:1280px; margin:0 auto; padding:0 16px 10px; position:relative; z-index:1; }

/* modes */
.rl-modes{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; left:-101px; position:relative;
}
.rl-mode{
  text-align:left; cursor:pointer; color:var(--text);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:3px;
  transition:border-color .2s, box-shadow .2s;
}
.rl-mode i{ color:var(--cyan); font-size:16px; margin-bottom:4px; }
.rl-mode span{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; }
.rl-mode small{ color:var(--muted); font-size:12px; }
.rl-mode.active{ border-color:rgba(0,245,255,.5); box-shadow:0 0 18px rgba(0,245,255,.14); }
.rl-mode.is-soon{ opacity:.45; cursor:not-allowed; }
.rl-mode.is-soon i{ color:var(--muted); }

/* themes — теперь над рулеткой, компактный inline-блок */
.rl-themes{
  display:inline-flex; align-items:center; gap:14px;
  margin:0 auto 14px; position:relative; left:-56px; flex-wrap:wrap; justify-content:center;
  width:auto; max-width:100%;
}
.rl-themes-label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.rl-theme-switch{ display:inline-flex; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:5px; }
.rl-theme{
  cursor:pointer; color:var(--muted); background:transparent; border:0; border-radius:9px;
  padding:8px 16px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px;
  transition:color .2s, background .2s;
}
.rl-theme.active{ color:#fff; background:linear-gradient(135deg, rgba(0,245,255,.18), rgba(145,70,255,.18)); }

/* grid layout — wheel должен быть строго по центру страницы.
   Реализуем компоновку через нормальный CSS Grid stack: и панель,
   и сцена находятся в одной grid-ячейке. Сцена растянута на всю ширину
   и центрирует колесо относительно контейнера .roulette
   (который сам margin:0 auto), а панель прижата к левому краю
   через justify-self:start. Никакого position:absolute. */
.rl-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
}
.rl-panel{
  grid-row:1; grid-column:1;
  justify-self:start;
  align-self:start;
  width:380px;
  padding:16px;
  margin-left:-120px;
}
.rl-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.rl-panel-head h3{ font-family:'Orbitron',sans-serif; font-size:15px; }
.rl-count{ font-size:12px; color:var(--cyan); border:1px solid var(--border-2); border-radius:999px; padding:2px 10px; }

/* список вариантов: max-height привязан к высоте stage (~колесо+текущий выбор).
   При > 12 вариантах появляется скролл внутри списка.
   Кнопки "Добавить" и "Очистить" в .rl-panel-actions НИЖЕ списка — всегда видны. */
.rl-list{ display:flex; flex-direction:column; gap:8px; height:790px; overflow-y:hidden; scroll-behavior:smooth; padding-bottom:0px; scrollbar-gutter:stable; }
.rl-list.scrollable{ overflow-y:auto; }
.rl-empty{ color:var(--dim); font-size:13px; text-align:center; padding:18px 6px; }
.rl-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--border); border-left-width:4px;
  border-radius:11px; padding:8px 10px;

  height:64px;
  min-height:64px;
  max-height:64px;
  overflow:hidden;
}
.rl-av{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#05070f; text-transform:uppercase;
  background-size:cover; background-position:center;
}
.rl-row-main{ flex:1; min-width:0; }
.rl-row-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-row-meta{ font-size:11px; color:var(--muted); }
.rl-mult{ color:var(--cyan); font-weight:700; }
.rl-row-btns{ display:flex; gap:4px; }
.rl-icbtn{ background:transparent; border:0; color:var(--muted); cursor:pointer; padding:6px; border-radius:8px; font-size:13px; transition:color .15s, background .15s; }
.rl-icbtn:hover{ background:rgba(255,255,255,.06); }
.rl-icbtn.del:hover{ color:#ff5b8a; }
.rl-panel-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }

/* wheel stage — занимает всю grid-ячейку, центрирует содержимое.
   Делит ячейку с .rl-panel (CSS Grid stack), благодаря чему
   высота .rl-grid автоматически подстраивается под более высокий из них. */
.rl-stage{
  grid-row:1; grid-column:1;
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.rl-wheel-wrap{ position:relative; width:min(520px,86vw); aspect-ratio:1/1; }
/* [FIX] Удалена осиротевшая строка `margin-top:20px;`, стоявшая ВНЕ правила:
   из-за неё CSS-парсер терял следующее правило #rlWheel (width/height:100%),
   и канвас на мобильных раздувался по devicePixelRatio. На десктопе (dpr=1)
   визуально ничего не меняется — колесо как было 520px, так и остаётся. */
#rlWheel{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 30px rgba(0,245,255,.12)); }
.rl-pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:17px solid transparent; border-right:17px solid transparent;
  border-top:30px solid var(--cyan);
  filter:drop-shadow(0 0 8px rgba(0,245,255,.8));
}
.rl-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:21%; height:21%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #0d1322, #05070f);
  border:1px solid var(--border-2); box-shadow:0 0 22px rgba(0,0,0,.6) inset, 0 0 18px rgba(0,245,255,.15);
}
.rl-hub i{
  font-size:clamp(18px,4vw,30px);
  background:linear-gradient(135deg,var(--cyan),var(--twitch),var(--magenta));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* current pick — фирменный MATRIX SQUAD стиль:
   неоновая cyan→purple рамка (через ::before + mask, как у кнопок сайта),
   мягкое многослойное свечение, лёгкая диагональная подложка.
   Без агрессивной анимации — только плавный transition. */
.rl-current{
  position:relative;
  width:min(520px,86vw);
  margin-top:20px;
  text-align:center;
  padding:18px 20px;
  border:1px solid transparent; /* рамка рисуется ::before, чтобы был градиент */
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(0,245,255,.06), rgba(145,70,255,.07)),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(0,245,255,.10),
    inset 0 0 18px rgba(0,245,255,.06),
    0 0 22px rgba(0,245,255,.16),
    0 0 44px rgba(145,70,255,.12),
    0 6px 22px rgba(0,0,0,.35);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.rl-current::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px; /* толщина "градиентной" рамки */
  background:linear-gradient(135deg,
    rgba(0,245,255,.85) 0%,
    rgba(145,70,255,.65) 55%,
    rgba(255,0,170,.7) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
  transition:opacity .35s ease, filter .35s ease;
  filter:drop-shadow(0 0 6px rgba(0,245,255,.25));
}
.rl-current-label{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  position:relative; /* поверх ::before */
}
.rl-current-value{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(26px,6vw,40px);
  margin:6px 0 4px; line-height:1.1;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  position:relative;
}
.rl-current-sub{ font-size:12px; color:var(--muted); position:relative; }
.rl-current.win{
  box-shadow:
    inset 0 0 0 1px rgba(0,245,255,.28),
    inset 0 0 24px rgba(0,245,255,.10),
    0 0 32px rgba(0,245,255,.32),
    0 0 60px rgba(145,70,255,.22),
    0 6px 26px rgba(0,0,0,.4);
}
.rl-current.win::before{
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(0,245,255,.45));
}

/* ═══════════════════════════════════════════
   INFO CARD — единый блок для сайта и overlay
   Четыре состояния: wait / spin / win / elim
   ═══════════════════════════════════════════ */
.rl-infocard{
  position:relative;
  width:min(520px,86vw);
  margin-top:-10px;        /* подняли ближе к колесу */
  border-radius:20px;
  border:1.5px solid rgba(255,255,255,.10);
  background:var(--panel);
  padding:22px 24px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  /* ФИКСИРОВАННАЯ высота — все состояния одинаковы, интерфейс не прыгает */
  height:210px;
  box-sizing:border-box;
  justify-content:center;
  overflow:hidden;
  transition:border-color .4s ease, box-shadow .4s ease, background .4s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.30);
}
/* ── state label top-left ── */
.rl-ic-state{
  position:absolute; top:12px; left:16px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.35); font-weight:600;
  transition:color .3s;
}
/* ── big icon (wait / win / elim) ── */
.rl-ic-icon{
  font-size:72px; line-height:1;
  display:block;
  transition:font-size .3s;
}
/* ── spinning number ── */
.rl-ic-num{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(52px,10vw,80px);
  line-height:1; color:#a78bfa;
  transition:color .3s;
}
/* ── avatar circle ── */
.rl-ic-avatar{
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.08) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:rgba(255,255,255,.7);
  border:2.5px solid rgba(255,255,255,.18);
  transition:border-color .3s;
}
/* ── name ── */
.rl-ic-name{
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:clamp(16px,3.5vw,22px); line-height:1.2;
  color:#fff; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
/* ── subtitle ── */
.rl-ic-sub{
  font-size:13px; color:rgba(255,255,255,.50); line-height:1.3;
}

/* ════ WAIT state ════ */
.rl-infocard.ic-wait .rl-ic-icon{ color:rgba(255,255,255,.22); font-size:72px; }
.rl-infocard.ic-wait .rl-ic-name{ color:rgba(255,255,255,.45); font-size:16px; font-family:inherit; font-weight:500; }

/* ════ SPIN state — фиолетовое свечение живое ════ */
@keyframes ic-spin-glow{
  0%  { box-shadow:0 0 0 1px rgba(139,109,255,.25), 0 0 18px rgba(139,109,255,.22), 0 0 42px rgba(100,70,240,.14), 0 4px 24px rgba(0,0,0,.30); }
  50% { box-shadow:0 0 0 1px rgba(167,139,250,.50), 0 0 32px rgba(139,109,255,.38), 0 0 64px rgba(100,70,240,.24), 0 4px 24px rgba(0,0,0,.30); }
  100%{ box-shadow:0 0 0 1px rgba(139,109,255,.25), 0 0 18px rgba(139,109,255,.22), 0 0 42px rgba(100,70,240,.14), 0 4px 24px rgba(0,0,0,.30); }
}
.rl-infocard.ic-spin{
  border-color:rgba(139,109,255,.60);
  background:linear-gradient(150deg, rgba(83,74,183,.14), var(--panel));
  animation:ic-spin-glow 1.8s ease-in-out infinite;
}
.rl-infocard.ic-spin .rl-ic-state{ color:rgba(167,139,250,.80); }
.rl-infocard.ic-spin .rl-ic-sub{ color:rgba(167,139,250,.70); }
@keyframes ic-num-pulse{
  0%  { opacity:.55; transform:scale(.93); }
  100%{ opacity:1;   transform:scale(1); }
}
.rl-infocard.ic-spin .rl-ic-num{
  animation:ic-num-pulse .35s ease-in-out infinite alternate;
}

/* ════ WIN state — живое золотое свечение, без белого ════ */
@keyframes ic-win-glow{
  0%  { box-shadow:0 0 0 2px rgba(234,179,8,.50), 0 0 20px rgba(234,179,8,.28), 0 0 50px rgba(161,106,0,.18), 0 4px 28px rgba(0,0,0,.35); }
  50% { box-shadow:0 0 0 2px rgba(250,204,21,.80), 0 0 38px rgba(234,179,8,.50), 0 0 80px rgba(161,106,0,.32), 0 4px 28px rgba(0,0,0,.35); }
  100%{ box-shadow:0 0 0 2px rgba(234,179,8,.50), 0 0 20px rgba(234,179,8,.28), 0 0 50px rgba(161,106,0,.18), 0 4px 28px rgba(0,0,0,.35); }
}
.rl-infocard.ic-win{
  border-color:rgba(234,179,8,.80);     /* сплошная золотая рамка */
  background:linear-gradient(150deg, rgba(161,106,0,.16), var(--panel));
  animation:ic-win-pop .55s cubic-bezier(.2,.9,.3,1.4) both,
            ic-win-glow 2.2s ease-in-out 0.55s infinite;
}
.rl-infocard.ic-win .rl-ic-state{ color:rgba(250,204,21,.75); }
.rl-infocard.ic-win .rl-ic-icon{ font-size:56px; }
/* золотой glow аватара — без белого */
.rl-infocard.ic-win .rl-ic-avatar{
  border-color:rgba(234,179,8,.85);
  box-shadow:0 0 12px rgba(234,179,8,.45), 0 0 28px rgba(161,106,0,.25);
}
.rl-infocard.ic-win .rl-ic-name{ color:#fde68a; }
.rl-infocard.ic-win .rl-ic-sub{ color:rgba(250,204,21,.80); font-weight:600; font-size:14px; }
@keyframes ic-win-pop{
  0%  { opacity:0; transform:translateY(10px) scale(.90); }
  60% { transform:translateY(-2px) scale(1.04); opacity:1; }
  100%{ transform:translateY(0) scale(1); }
}

/* ════ ELIM state — живое красное свечение ════ */
@keyframes ic-elim-glow{
  0%  { box-shadow:0 0 0 1px rgba(200,40,40,.25), 0 0 16px rgba(180,30,30,.20), 0 0 38px rgba(140,15,15,.14), 0 4px 24px rgba(0,0,0,.30); }
  50% { box-shadow:0 0 0 1px rgba(220,60,60,.55), 0 0 28px rgba(200,40,40,.42), 0 0 60px rgba(140,15,15,.26), 0 4px 24px rgba(0,0,0,.30); }
  100%{ box-shadow:0 0 0 1px rgba(200,40,40,.25), 0 0 16px rgba(180,30,30,.20), 0 0 38px rgba(140,15,15,.14), 0 4px 24px rgba(0,0,0,.30); }
}
.rl-infocard.ic-elim{
  border-color:rgba(200,40,40,.55);
  background:linear-gradient(150deg, rgba(140,20,20,.13), var(--panel));
  animation:ic-elim-in .35s ease both,
            ic-elim-glow 2.0s ease-in-out 0.35s infinite;
}
.rl-infocard.ic-elim .rl-ic-state{ color:rgba(250,100,100,.65); }
.rl-infocard.ic-elim .rl-ic-icon{ font-size:52px; color:rgba(220,60,60,.75); }
.rl-infocard.ic-elim .rl-ic-avatar{ border-color:rgba(200,40,40,.55); box-shadow:0 0 10px rgba(180,30,30,.22); }
.rl-infocard.ic-elim .rl-ic-name{ color:rgba(255,200,200,.88); }
.rl-infocard.ic-elim .rl-ic-sub{ color:rgba(250,100,100,.65); }
@keyframes ic-elim-in{
  0%  { opacity:0; transform:scale(.94); }
  100%{ opacity:1; transform:scale(1); }
}

/* ── адаптив ── */
@media(max-width:560px){
  .rl-infocard{ padding:16px 18px 14px; border-radius:16px; height:190px; }
  .rl-ic-num{ font-size:clamp(44px,11vw,64px); }
  .rl-ic-icon{ font-size:60px; }
}
@media(max-width:420px){
  .rl-infocard{ width:min(300px,80vw); padding:14px; height:172px; }
  .rl-ic-num{ font-size:clamp(36px,12vw,54px); }
  .rl-ic-icon{ font-size:52px; }
  .rl-ic-avatar{ width:58px; height:58px; font-size:22px; }
  .rl-ic-name{ font-size:clamp(14px,4vw,18px); }
}

/* Старые классы rl-current — сохраняем для обратной совместимости,
   но перекрываем через JS добавлением rl-infocard */
.rl-current{
  position:relative;
  width:min(520px,86vw);
  margin-top:20px;
  text-align:center;
  padding:18px 20px;
  border:1px solid transparent;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(0,245,255,.06), rgba(145,70,255,.07)), var(--panel);
  box-shadow: 0 0 22px rgba(0,245,255,.16), 0 6px 22px rgba(0,0,0,.35);
  transition:box-shadow .35s ease;
}
.rl-current-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.rl-current-value{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(26px,6vw,40px); margin:6px 0 4px; line-height:1.1; background:linear-gradient(135deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rl-current-sub{ font-size:12px; color:var(--muted); }
.rl-current.win{ box-shadow:0 0 32px rgba(0,245,255,.32), 0 0 60px rgba(145,70,255,.22), 0 6px 26px rgba(0,0,0,.4); }

/* controls — выровнены по центру страницы под рулеткой */
.rl-controls{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:-58px 0 10px; }
.rl-controls .btn{ min-width:210px; justify-content:center; }
.btn-spin{ border-color:rgba(0,245,255,.45); }
.btn-pick{ border-color:rgba(255,200,0,.45); }
.btn-reset{ border-color:rgba(145,70,255,.45); }
.btn-ghost{ opacity:.6; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.rl-overlay-link{ text-align:center; color:var(--muted); font-size:12px; margin-top:14px; }
.rl-overlay-link a{ color:var(--cyan); text-decoration:none; }
.rl-overlay-link i{ margin-right:5px; }

/* responsive */
@media (max-width:1240px){
  /* при сужении контейнера панель чуть прижата к левому краю,
     но колесо остаётся по центру страницы */
  .rl-panel{ width:300px; }
}
@media (max-width:1080px){
  .rl-panel{ width:280px; }
}
@media (max-width:980px){
  /* ================================================================
     МОБИЛЬНАЯ ВЕРСИЯ
     Десктоп (>980px) не меняется.

     Структура DOM в .roulette:
       .rl-modes  →  .rl-grid (panel + stage)  →  .rl-controls  →  .rl-overlay-link

     Чтобы получить нужный порядок:
       Рулетка → Текущий выбор → Кнопки управления → Активные варианты → Действия,
     раскладываем .roulette во flexbox-колонку и применяем `display:contents`
     к .rl-grid — её дети (.rl-panel и .rl-stage) становятся прямыми элементами
     flex-контейнера .roulette и получают свои `order`.
     ================================================================ */
  .roulette{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .rl-grid{ display:contents; }

  /* [FIX] Сброс ручных десктопных смещений на всём мобильном диапазоне (≤980px).
     Раньше left/margin-left сбрасывались только на ≤420px, поэтому в 421–980px
     блоки уезжали влево и наезжали друг на друга. Десктоп (>980px) не затронут. */
  .game-tabs{ left:-12px; }   /* ← ВКЛАДКИ НА МОБИЛЬНОМ: меняй 0 на минус = влево / плюс = вправо (напр. -10px) */
  .rl-modes { left:0; }
  .rl-themes{ left:0; }
  .rl-panel { margin-left:0; }

  /* [FIX v2] В текущем games.html блок «Стиль рулетки» (.rl-themes) находится
     ВНУТРИ .rl-stage первым элементом, поэтому порядок задаём только на уровне
     прямых детей .roulette. .rl-themes БЕЗ order — остаётся сверху стейджа, прямо
     НАД колесом. (.rl-connect удалён из разметки — его правило больше не нужно.)
     Порядок: Режимы → [Стиль → Колесо → Текущий выбор] → Кнопки → Варианты. */
  .rl-modes   { order:1; margin-bottom:0; }
  .rl-stage   { order:2; }       /* внутри: themes → wheel → current */
  .rl-controls{ order:3; margin:6px 0 4px; }
  .rl-panel   { order:4; width:auto; justify-self:auto; align-self:auto; }
  .rl-overlay-link{ display:none; }   /* OBS Overlay скрыт на мобильных */


  /* Режимы рулетки — одна строка с горизонтальной прокруткой.
     Карточки компактные, не переносятся на новую строку. */
  .rl-modes{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    gap:10px;
    padding:0 0 8px;
    margin-left:-16px; margin-right:-16px;   /* edge-to-edge свайп */
    padding-left:16px; padding-right:16px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,245,255,.35) transparent;
  }
  .rl-modes::-webkit-scrollbar{ height:6px; }
  .rl-modes::-webkit-scrollbar-thumb{ background:rgba(0,245,255,.35); border-radius:4px; }
  .rl-mode{
    flex:0 0 auto;
    min-width:180px;
    padding:10px 14px;
    scroll-snap-align:start;
  }
  .rl-mode span{ font-size:12px; }
  .rl-mode small{ font-size:11px; }

  /* Стиль рулетки — одна строка с горизонтальной прокруткой */
  .rl-themes{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    margin:0 0 10px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,245,255,.35) transparent;
  }
  .rl-themes::-webkit-scrollbar{ height:6px; }
  .rl-themes::-webkit-scrollbar-thumb{ background:rgba(0,245,255,.35); border-radius:4px; }
  .rl-themes-label{ flex:0 0 auto; }
  .rl-theme-switch{
    flex:0 0 auto;
    flex-wrap:nowrap;
  }
  .rl-theme{
    flex:0 0 auto;
    padding:7px 14px;
    font-size:12px;
    white-space:nowrap;
  }

  /* Кнопки управления на мобильном — занимают всю ширину строкой,
     группируются с обычным flex-wrap, без жёсткого «one per row» */
  .rl-controls .btn{ min-width:0; flex:1 1 calc(50% - 8px); }
}

/* Малые экраны: кнопки управления складываются в одну колонку */
@media (max-width:560px){
  .rl-controls{ gap:10px; }
  .rl-controls .btn{ width:100%; flex:1 1 100%; }
  .rl-panel{ padding:14px; }
  .rl-current{ padding:14px 16px; border-radius:16px; }
  .rl-themes-label{ display:none; }    /* лейбл прячем, оставляем только тумблер */
}

/* Совсем узкие экраны (320 / 375 / 414) */
@media (max-width:420px){
  .roulette{ padding:0 12px 10px; }
  .rl-modes{ margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
  .rl-wheel-wrap{ width:min(300px,80vw); }
  .rl-current{ width:min(300px,80vw); padding:12px 14px; }
  .rl-current-value{ font-size:clamp(22px,7vw,32px); }
  .rl-panel-actions .btn{ font-size:13px; padding:10px 12px; }
  .game-tabs{ padding:0 12px; gap:8px; }
  .game-tab{ padding:9px 14px; font-size:12px; }
  /* [FIX] Дублирующие сбросы смещений с !important удалены — теперь они заданы
     один раз в @media(max-width:980px) и действуют на всём мобильном диапазоне. */
}


/* ===== Chat roulette: avatars + winner carousel (added) ===== */
.rl-avstack{ display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.rl-ava{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#05070f; text-transform:uppercase;
  background:#2a3147 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.15);
}
.rl-ava.has-img{ color:transparent; }
.rl-avmore{ font-size:11px; color:var(--muted); margin-left:2px; }

.rl-win-ava{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:8px; }
.rl-ava.big{
  width:64px; height:64px; flex:0 0 64px; font-size:26px;
  border:2px solid rgba(0,245,255,.55); box-shadow:0 0 18px rgba(0,245,255,.25);
}
.rl-win-name{ font-size:13px; font-weight:600; color:var(--cyan); }


/* ===== Waiting placeholder rows (12-slot list, added) ===== */
.rl-row-wait{ opacity:.48; border-left-color:transparent !important; background:rgba(255,255,255,.02); }
.rl-av-wait{ background:rgba(255,255,255,.06) !important; color:var(--muted); }
.rl-row-wait .rl-row-name{ color:var(--muted); font-style:italic; font-weight:500; }

/* ===== Winner avatar inside rl-hub (chat mode) ===== */
.rl-hub.has-winner{ padding:0; overflow:hidden; }
.rl-hub.has-winner i{ display:none; }
.rl-ava.hub{
  width:100%; height:100%; flex:none; border-radius:50%;
  font-size:clamp(18px,4vw,30px);
  background-size:cover; background-position:center;
  border:0; box-shadow:0 0 18px rgba(0,245,255,.25) inset;
}


/* ===== Decay toggle (compact one-row) ===== */
.rl-decay-bar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 0 14px; flex-wrap:wrap;
}
.rl-wm-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  color:var(--text); font-size:13px; user-select:none;
}
.rl-wm-toggle input{
  appearance:none; -webkit-appearance:none;
  width:34px; height:18px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid var(--border-2);
  position:relative; cursor:pointer; transition:background .2s;
}
.rl-wm-toggle input::after{
  content:""; position:absolute; top:1px; left:1px; width:14px; height:14px;
  border-radius:50%; background:#e0e0e0; transition:left .2s, background .2s;
}
.rl-wm-toggle input:checked{ background:linear-gradient(135deg, rgba(0,245,255,.55), rgba(145,70,255,.55)); }
.rl-wm-toggle input:checked::after{ left:17px; background:#fff; }
.rl-decay-hint{ color:var(--muted); font-size:12px; }
.btn.is-locked{ opacity:.4 !important; cursor:not-allowed !important; }


/* ===== Rules modal (compact) ===== */
.rl-rules-modal[hidden]{ display:none; }
.rl-rules-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding:80px 20px 20px; overflow-y:auto; }
.rl-rules-backdrop{ position:absolute; inset:0; background:rgba(3,5,12,.72); backdrop-filter:blur(4px); }
.rl-rules-card{
  position:relative; z-index:1; max-width:520px; width:100%; max-height:85vh; overflow-y:auto;
  padding:22px 24px;
}
.rl-rules-card h3{ font-family:'Orbitron',sans-serif; font-size:18px; margin:0 0 14px; }
.rl-rules-card section{ margin-bottom:14px; }
.rl-rules-card section:last-child{ margin-bottom:0; }
.rl-rules-card h4{ font-family:'Orbitron',sans-serif; font-size:13px; margin:0 0 6px; color:var(--cyan); letter-spacing:.4px; }
.rl-rules-card ul{ margin:0; padding-left:18px; }
.rl-rules-card li{ font-size:13px; line-height:1.5; color:var(--text); margin-bottom:2px; }
.rl-rules-card p{ font-size:13px; margin:4px 0; color:var(--text); }
.rl-rules-ex{ color:var(--muted); }
.rl-rules-card code{
  background:rgba(255,255,255,.06); border:1px solid var(--border-2);
  padding:1px 6px; border-radius:6px; font-size:12px; color:var(--cyan);
}
.rl-rules-close{
  position:absolute; top:20px; right:12px;
  background:transparent; border:0; color:var(--muted); cursor:pointer;
  font-size:16px; padding:6px; border-radius:8px;
}
.rl-rules-close:hover{ color:#fff; background:rgba(255,255,255,.06); }


/* ===== Кружок-номер: жирная белая обводка ТОЛЬКО для классической темы =====
   Радужная и MATRIX тут не затронуты — там цифры остаются цветные, как было. */
.roulette[data-rl-theme="classic"] .rl-row .rl-av{
  background:#0c1020 !important;
  color:#ffffff !important;
  border:2px solid #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.85),
    0 0 10px rgba(0,245,255,.25) !important;
}

/* ===== Указатель колеса: контур+свечение (видно и на белом, и на тёмном) ===== */
.rl-pointer{
  filter:
    drop-shadow(0 0 0.5px rgba(5,7,15,.95))
    drop-shadow(0 0 2px   rgba(5,7,15,.85))
    drop-shadow(0 0 10px  rgba(0,245,255,.85));
}

/* ===== Иконка в центре колеса +30% (на всех темах) ===== */
.rl-hub i{
  font-size:clamp(23px,5.2vw,39px) !important;
}


/* ===== Классическая тема: кружок-номер и кончик по чётности строки =====
   colorFor: i%2===0 → #11151f (тёмный сектор), i%2===1 → #e9ecf4 (светлый сектор)
   .rl-row:nth-child(odd) = индекс 0,2,4... → тёмный сектор → тёмный border-left, светлый кружок
   .rl-row:nth-child(even) = индекс 1,3,5... → светлый сектор → светлый border-left, тёмный кружок */

/* Убираем общий !important border-left, чтобы работали nth-child ниже */
.roulette[data-rl-theme="classic"] .rl-row,
.roulette[data-rl-theme="classic"] .ovl-row{
  border-left-color: transparent !important;
  position: relative;
}

/* Нечётная строка: тёмный сектор — белый border-left, чёрный кружок с белой цифрой */
.roulette[data-rl-theme="classic"] .rl-row:nth-child(odd),
.roulette[data-rl-theme="classic"] .ovl-row:nth-child(odd){
  border-left-color: #ffffff !important;
}

/* Чётная строка: светлый сектор — белый border-left, белый кружок с тёмной цифрой */
.roulette[data-rl-theme="classic"] .rl-row:nth-child(even),
.roulette[data-rl-theme="classic"] .ovl-row:nth-child(even){
  border-left-color: #ffffff !important;
}
.roulette[data-rl-theme="classic"] .rl-row:nth-child(even) .rl-av,
.roulette[data-rl-theme="classic"] .rl-row:nth-child(even) .ovl-num,
.roulette[data-rl-theme="classic"] .ovl-row:nth-child(even) .rl-av,
.roulette[data-rl-theme="classic"] .ovl-row:nth-child(even) .ovl-num{
  background: #e9ecf4 !important;
  color: #0c1020 !important;
  border: 2px solid #0c1020 !important;
}


/* ===== BETA badge (small yellow tag) ===== */
.rl-beta{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  font-size:0.55em;        /* заметно меньше основного заголовка */
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#0c1020;
  background:#ffd13a;
  border-radius:4px;
  vertical-align:middle;
  line-height:1.3;
}
.rl-mode small .rl-beta{ color:#0c1020; }


/* ===== OBS Overlay (auto) ===== */
.ovl-root{
  display:flex; flex-direction:column; gap:14px;
  padding:14px 18px;
  width:100%; min-height:100vh;
  background:transparent;
  color:var(--text);
}
.ovl-top{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  background:rgba(8,11,20,.72); border:1px solid var(--border-2); border-radius:14px;
  padding:10px 14px;
  backdrop-filter:blur(4px);
}
.ovl-top-cell{ display:flex; flex-direction:column; align-items:center; padding:2px 14px; min-width:90px; }
.ovl-top-label{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#ffffff; opacity:0.7; }
.ovl-top-value{
  font-family:'Orbitron',sans-serif; font-weight:800; font-size:14px; color:#ffffff;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.ovl-grid{
  display:grid; grid-template-columns: 320px 1fr; gap:18px;
  flex:1; min-height:0; align-items:stretch;
}
.ovl-panel{
  background:rgba(8,11,20,.72); border:1px solid var(--border-2); border-radius:14px;
  padding:14px; backdrop-filter:blur(4px);
  display:flex; flex-direction:column; gap:10px; min-height:0;
}
.ovl-panel-title{
  margin:0 0 4px; font-family:'Orbitron',sans-serif; font-size:14px;
  color:var(--cyan); letter-spacing:.6px;
}
.ovl-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.ovl-empty{ color:var(--muted); font-size:13px; text-align:center; padding:14px 6px; }
.ovl-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--border); border-left-width:4px;
  border-radius:11px; padding:8px 10px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ovl-row-pulse{
  animation: ovlPulse 0.9s ease;
}
@keyframes ovlPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,245,255,.55); transform: scale(1); }
  40%  { box-shadow: 0 0 20px 4px rgba(0,245,255,.45); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(0,245,255,0); transform: scale(1); }
}
.ovl-num{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0c1020; color:#fff;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 0 8px rgba(0,245,255,.18);
  font-weight:800; font-size:13px;
}
.ovl-row-main{ flex:1; min-width:0; }
.ovl-row-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovl-row-meta{ font-size:11px; color:var(--muted); margin-top:2px; }
.ovl-mult{ color:var(--cyan); font-weight:700; }
.ovl-avstack{ display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.ovl-ava{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#05070f; text-transform:uppercase;
  background:#2a3147 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.15);
}
.ovl-ava.has-img{ color:transparent; }
.ovl-avmore{ font-size:11px; color:var(--muted); margin-left:2px; }
.ovl-avmore.big{ font-size:14px; padding:0 4px; }

/* Сцена с колесом — flex-column, растягивается чтобы winner прижался вниз */
.ovl-stage{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  min-width:0;
  flex:1;
  justify-content:space-between;
}
.ovl-wheel{ width:min(520px, 78vh); }

/* Плашка победителя — стиль совпадает с .ovl-panel */
/* ══ OVL INFO CARD — overlay InfoCard (повторяет rl-infocard) ══ */
.ovl-infocard{
  width:100%; box-sizing:border-box;
  border-radius:16px;
  border:1.5px solid rgba(255,255,255,.10);
  background:rgba(8,11,20,.80);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:16px 20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; min-height:130px; justify-content:center;
  position:relative;
  transition:border-color .4s, box-shadow .4s, background .4s;
}
.ovl-ic-state{
  position:absolute; top:10px; left:14px;
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.30); font-weight:600;
}
.ovl-ic-icon{ font-size:56px; line-height:1; display:block; }
.ovl-ic-num{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(42px,8vw,64px); line-height:1; color:#a78bfa;
}
.ovl-ic-avatar{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.08) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:rgba(255,255,255,.7);
  border:2px solid rgba(255,255,255,.18);
}
.ovl-ic-name{
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:clamp(13px,2.8vw,18px); line-height:1.2; color:#fff;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ovl-ic-sub{ font-size:11px; color:rgba(255,255,255,.45); }

/* wait */
.ovl-infocard.ic-wait .ovl-ic-icon{ color:rgba(255,255,255,.18); font-size:56px; }
.ovl-infocard.ic-wait .ovl-ic-name{ color:rgba(255,255,255,.35); font-size:13px; font-family:inherit; font-weight:400; }
/* spin */
.ovl-infocard.ic-spin{ border-color:rgba(139,109,255,.55); background:linear-gradient(150deg,rgba(83,74,183,.14),rgba(8,11,20,.80)); box-shadow:0 0 24px rgba(139,109,255,.18); }
.ovl-infocard.ic-spin .ovl-ic-state{ color:rgba(167,139,250,.70); }
.ovl-infocard.ic-spin .ovl-ic-num{ animation:ic-num-pulse .35s ease-in-out infinite alternate; }
.ovl-infocard.ic-spin .ovl-ic-sub{ color:rgba(167,139,250,.60); }
/* win */
.ovl-infocard.ic-win{ border-color:rgba(234,179,8,.55); background:linear-gradient(150deg,rgba(161,106,0,.16),rgba(8,11,20,.80)); box-shadow:0 0 28px rgba(234,179,8,.22),0 0 54px rgba(161,106,0,.10); }
.ovl-infocard.ic-win .ovl-ic-state{ color:rgba(250,204,21,.65); }
.ovl-infocard.ic-win .ovl-ic-icon{ font-size:44px; }
.ovl-infocard.ic-win .ovl-ic-avatar{ border-color:rgba(234,179,8,.70); box-shadow:0 0 12px rgba(234,179,8,.28); }
.ovl-infocard.ic-win .ovl-ic-name{ color:#fde68a; }
.ovl-infocard.ic-win .ovl-ic-sub{ color:rgba(250,204,21,.70); font-weight:600; }
.ovl-infocard.ic-win{ animation:ic-win-pop .55s cubic-bezier(.2,.9,.3,1.4) both; }
/* elim */
.ovl-infocard.ic-elim{ border-color:rgba(200,40,40,.40); background:linear-gradient(150deg,rgba(140,20,20,.14),rgba(8,11,20,.80)); box-shadow:0 0 20px rgba(180,30,30,.14); }
.ovl-infocard.ic-elim .ovl-ic-state{ color:rgba(250,100,100,.55); }
.ovl-infocard.ic-elim .ovl-ic-icon{ font-size:42px; color:rgba(220,60,60,.70); }
.ovl-infocard.ic-elim .ovl-ic-avatar{ border-color:rgba(200,40,40,.50); box-shadow:0 0 8px rgba(180,30,30,.18); }
.ovl-infocard.ic-elim .ovl-ic-name{ color:rgba(255,200,200,.85); }
.ovl-infocard.ic-elim .ovl-ic-sub{ color:rgba(250,100,100,.55); }
.ovl-infocard.ic-elim{ animation:ic-elim-in .35s ease both; }

/* старый .ovl-winner — скрываем, но не ломаем JS пока не переключён */
.ovl-winner[hidden]{ display:none !important; }
.ovl-winner{
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap:18px;
  padding:14px 18px;
  background:rgba(8,11,20,.72);
  border:1px solid var(--border-2);
  border-radius:14px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.ovl-winner-avatars{ display:flex; align-items:center; }
.ovl-winner-ava{ width:54px; height:54px; flex:0 0 54px; border-radius:50%; background:#2a3147 center/cover no-repeat; border:2px solid rgba(255,255,255,.7); margin-right:-10px; display:flex; align-items:center; justify-content:center; color:transparent; font-weight:800; }
.ovl-winner-ava:last-child{ margin-right:0; }
.ovl-winner-text{ flex:1; min-width:0; }
.ovl-winner-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#fff; opacity:.7; }
.ovl-winner-name{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(22px,3.6vw,32px); background:linear-gradient(90deg,var(--cyan),#8b6dff,var(--magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:4px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovl-winner-sub{ color:#fff; font-size:13px; opacity:.85; }
.ovl-pop{ animation:ovlPop .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes ovlPop{ 0%{opacity:0;transform:translateY(12px) scale(.92)} 60%{transform:translateY(0) scale(1.03);opacity:1} 100%{transform:translateY(0) scale(1)} }

.ovl-ava.hub{ width:100%; height:100%; flex:none; border-radius:50%; background-size:cover; background-position:center; border:0; font-size:24px; }

@media (max-width: 980px){
  .ovl-grid{ grid-template-columns: 1fr; }
  .ovl-wheel{ width:min(420px, 80vw); }
}


/* ===== OBS Overlay: подгонка под 800x600 + плавный автоскролл списка ===== */
.ovl-root{
  width: 100vw;
  height: 100vh;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
}
.ovl-grid{
  grid-template-columns: 260px 1fr;
  gap: 12px;
  min-height: 0;
  align-items: stretch;
}
.ovl-stage{ min-height: 0; flex:1; justify-content:space-between; }
.ovl-wheel{ width: min(70vh, 480px); }

/* список — viewport, внутри бегает .ovl-list-track */
.ovl-list{
  overflow: hidden;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.ovl-list-track{
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
  transition: none;
}

/* плашка победителя — главный визуальный элемент после остановки */
.ovl-winner{ padding: 16px 20px; }
.ovl-winner-name{ font-size: clamp(24px, 4vw, 36px); }


/* ===== Decay-bar: новые лейблы и встроенная ссылка OBS ===== */
.rl-decay-label{
  font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap;
}
.rl-overlay-inline{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px;
  font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--cyan);
  border:1px solid rgba(0,245,255,.35);
  border-radius:8px;
  text-decoration:none;
  transition:background .18s, border-color .18s;
  margin-left:6px;
}
.rl-overlay-inline:hover{
  background:rgba(0,245,255,.08);
  border-color:var(--cyan);
  color:#fff;
}

/* ===== OBS 800x600: плашка победителя не режется снизу =====
   Колесо и плашка — flex-column внутри .rl-stage.
   Добавляем max-height и overflow-y:auto только при маленьком viewport. */
@media (max-height: 640px){
  .rl-stage{
    overflow-y: auto;
  }
  .rl-wheel-wrap{
    flex-shrink: 1;
  }
}


/* ===== OBS 800x600: компактная инфопанель + участники, колесо НЕ трогать =====
   Верхняя полоса уходит над панелью участников (flex-column в .ovl-panel).
   Список участников ограничен по высоте — колесо остаётся полного размера. */
@media (max-height: 620px){
  .ovl-root{ padding: 6px 10px; gap: 6px; }

  /* Инфопанель компактнее */
  .ovl-top{ padding: 5px 10px; }
  .ovl-top-cell{ padding: 1px 8px; min-width: 70px; }
  .ovl-top-label{ font-size: 9px; }
  .ovl-top-value{ font-size: 12px; }

  .ovl-grid{ gap: 8px; }

  /* Левая колонка: участники + инфопанель над ними, высота ограничена */
  .ovl-panel{ overflow: hidden; }
  .ovl-list{ max-height: 460px; }

  /* Плашка победителя компактнее */
  .ovl-winner{ padding: 10px 14px !important; }
  .ovl-winner-name{ font-size: 20px !important; }
  .ovl-winner-label{ font-size: 10px; }
  .ovl-winner-ava{ width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
}


/* ===== Decay-bar: одна строка с двумя переключателями и OBS ===== */
.rl-decay-bar{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.rl-decay-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rl-decay-divider{
  width: 1px;
  height: 22px;
  background: var(--border-2);
  flex-shrink: 0;
  margin: 0 4px;
}
/* Второй переключатель при отключённом режиме убывания */
.rl-row-disabled{
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}
.rl-obs-copy{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--cyan);
  border: 1px solid rgba(0,245,255,.35);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.rl-obs-copy:hover{
  background: rgba(0,245,255,.08);
  border-color: var(--cyan);
  color: #fff;
}
.rl-obs-link{
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  opacity: 0.8;
}
.rl-obs-link:hover{
  opacity: 1;
  text-decoration: underline;
}

/* ===== OBS кнопка: разделитель внутри ===== */
.rl-obs-sep{
  display: inline-block;
  margin: 0 6px;
  color: rgba(0,245,255,.35);
  font-weight: 300;
}


/* ===== OBS Overlay: строка-ссылка с тултипом «Скопировано» поверх ===== */
.rl-obs-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s;
}
.rl-obs-wrap:hover{ background: rgba(255,255,255,.05); color: var(--text); }
.rl-obs-url{
  color: var(--cyan);
  font-size: 12px;
}
.rl-obs-tip{
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  background: rgba(0,245,255,.15);
  border: 1px solid rgba(0,245,255,.4);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99;
}
.rl-obs-wrap.copied .rl-obs-tip{ display: block; }

/* ===== Задача 1: новый вид decay-bar (ползунки слева от текста) ===== */
.rl-decay-bar{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.rl-decay-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ===== Задача 2: кнопка управления набором участников — стиль как у .btn ===== */
.btn-entry{
  border-color: #850620;
  color: #ffffff !important;
}
.btn-entry:hover{
  background: rgba(133,6,32,.18);
  color: #ffffff !important;
}
.btn-entry.is-closed{
  border-color: rgba(255,200,0,.45);
  color: #ffffff !important;
}
.btn-entry.is-closed:hover{
  background: rgba(255,200,0,.12);
  color: #ffffff !important;
}
.btn-entry:hover{
  background: rgba(133,6,32,.18);
  color: #ffffff !important;
}
.btn-entry.is-closed{
  border-color: rgba(255,200,0,.45);
  color: #ffffff !important;
}
.btn-entry.is-closed:hover{
  background: rgba(133,6,32,.18);
  color: #ffffff !important;
}

/* ===== Задача 4 оверлей: убрать верхнюю панель, счётчики в панели участников ===== */
.ovl-top{ display: none !important; }
.ovl-counters{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.8;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
}
.ovl-counters span{ color: var(--cyan); font-weight: 700; opacity: 1; }
/* Прозрачность панели участников — чуть прозрачнее */
.ovl-panel{
  background: rgba(8,11,20,.50) !important;
}

/* ===== Задача 5: мобильный скролл — убрать overflow-y:hidden ===== */

@media (max-width: 1500px){
  .rl-controls{
    margin:-58px 0 10px;
  }
}

@media (max-width:560px){
  .rl-controls{
    margin-top:20px;
  }
}

@media (max-width: 1400px){
  .rl-controls{
    margin-top:20px;
  }
}