/* ===== Колесо удачи — изолированные стили с повышенной специфичностью ===== */
.lw[data-lw]{
  /* базовые переменные */
  --lw-bg:#f6fff4; --lw-text:#222; --lw-muted:#6b7280;
  --lw-brand:#6cb33e; --lw-btn:#41b74f; --lw-btn-hover:#3aa047;

  /* геометрия */
  --lw-size:360px;      /* диаметр сцены в развёрнутом виде */
  --lw-scale:.36;       /* стартовый масштаб (мини) */

  /* цвета секторов */
  --lw-green-1:#d5f7c6; --lw-green-2:#bff0a6;  /* салатовые */
  --lw-yellow-1:#fff2b6; --lw-yellow-2:#ffe59f;/* жёлтые */

  position:relative; isolation:isolate; z-index:10; /* отдельный контекст, выше темы */
  max-width:560px; margin:14px auto;
  background:var(--lw-bg); color:var(--lw-text);
  border-radius:14px; padding:10px 12px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-family:Inter,"SF Pro Display",Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.lw[data-lw] *{ box-sizing:border-box }

/* Заголовки / тексты — фиксируем начертания */
.lw[data-lw] .lw__title{
  margin:0 0 2px !important; color:var(--lw-brand);
  font:800 20px/1.2 Inter,"SF Pro Display",Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.lw[data-lw] .lw__subtitle{
  margin:0 0 4px !important; color:var(--lw-muted);
  font:400 13px/1.35 Inter,Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ===== Колесо ===== */
.lw[data-lw] .lw__wheel{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.lw[data-lw] .lw__wheel > *{ margin:0 !important } /* гасим чужие margin */

.lw[data-lw] .lw__frame{
  /* РЕАЛЬНЫЕ размеры контейнера зависят от масштаба → нет пустых зон и наезда на кнопку */
  width:calc(var(--lw-size)*var(--lw-scale));
  height:calc(var(--lw-size)*var(--lw-scale));
  margin-inline:auto !important;
  margin-bottom:10px !important;  /* фикс-отступ до кнопки */
  position:relative;               /* якорь для абсолютного центрирования сцены */
}

/* Сцена: абсолютное центрирование + масштаб.
   Это устраняет субпиксельные сдвиги вправо/влево при scale(). */
.lw[data-lw] .lw__stage{
  width:var(--lw-size); height:var(--lw-size);
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(var(--lw-scale));
  transform-origin:center center;
  will-change:transform;
}

/* Развёрнутый режим — просто меняем переменную масштаба (унаследуется вниз) */
.lw[data-lw] .lw--expanded{ --lw-scale:1; }

/* Слои canvas. Важные защиты от темы: max-width: none; width/height фикс! */
.lw[data-lw] .lw__canvas,
.lw[data-lw] .lw__confetti{
  position:absolute; inset:0; margin:auto !important; display:block;
  width:360px !important; height:360px !important;   /* НЕ давать теме сжимать canvas */
  max-width:none !important; max-height:none !important;
  border-radius:50%; transform-origin:center center;
}
.lw[data-lw] .lw__canvas{ z-index:1; }
.lw[data-lw] .lw__confetti{ pointer-events:none; z-index:2; }

/* Стрелка */
.lw[data-lw] .lw__pointer{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent; border-right:16px solid transparent;
  border-bottom:26px solid #ff6a00;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));
  z-index:3;
}

/* Управление */
.lw[data-lw] .lw__controls{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap }
.lw[data-lw] .lw__btn{
  border:none !important; border-radius:10px !important; padding:10px 14px !important;
  background:var(--lw-btn) !important; color:#fff !important; cursor:pointer !important;
  transition:background .3s; font-weight:600; font-family:inherit !important;
}
.lw[data-lw] .lw__btn:hover{ background:var(--lw-btn-hover) !important }
.lw[data-lw] .lw__btn[disabled]{ opacity:.6; cursor:not-allowed !important }

/* Счётчик и таймер */
.lw[data-lw] .lw__attempts{
  margin:0 !important; color:var(--lw-muted);
  font:300 11px/1.15 Inter,Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.lw[data-lw] .lw__timer{
  min-height:14px; margin:0 !important; color:#4b5563;
  font:300 11px/1.15 Inter,Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* Призы */
.lw[data-lw] .lw__prizes{ margin-top:6px !important; display:flex; flex-direction:column; gap:6px }
.lw[data-lw] .lw__prize{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:#fff; border-radius:12px; padding:8px 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transform:translateY(10px); opacity:0; animation:lw-in .35s ease forwards;
}
.lw[data-lw] .lw__prize-title{ font-weight:800 }
.lw[data-lw] .lw__prize-cta{
  text-decoration:none; background:#111; color:#fff; border-radius:10px;
  padding:8px 12px; font-weight:800; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.12);
}
@keyframes lw-in{ from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Шире на больших экранах */
@media (min-width:768px){ .lw[data-lw]{ max-width:760px; padding:12px } }
@media (min-width:1024px){ .lw[data-lw]{ max-width:900px } }
/* Базовый контейнер */
.carousel {
  position: relative;
  max-width: 980px;      /* подстройте под макет */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
}

/* Лента */
.carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  touch-action: pan-y;    /* не блокируем вертикальный скролл страницы */
  user-select: none;
  -webkit-user-drag: none;
}

/* Слайд на всю ширину */
.carousel__slide {
  flex: 0 0 100%;
  position: relative;
  aspect-ratio: 20/5;     /* можно убрать или заменить */
}

.carousel__slide a,
.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel__slide img {
  object-fit: cover;
}

/* Нежная маска по краям — опционально */
.carousel::after, .carousel::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,.08), transparent 80%),
    linear-gradient(to left,  rgba(0,0,0,.08), transparent 80%);
  mix-blend-mode: multiply;
}
/* Контейнеру позиционирование, чтобы псевдослои были внутри него */
.carousel {
  position: relative;
}

/* Ссылка поверх всего и точно кликабельна */
.carousel__slide a {
  position: relative;
  z-index: 2;
  pointer-events: auto;   /* явно разрешаем клики */
  display: block;
}

/* Картинка не перехватывает события мыши — клики пойдут в <a> */
.carousel__slide img {
  pointer-events: none;
}