/* ==========================================================================
   Game Center — Chicken Road: курица переходит дорогу полоса за полосой
   ========================================================================== */

/* Обёртка нужна ТОЛЬКО чтобы повесить .marquee-frame (бегущие лампочки,
   см. slot.css) снаружи от .chicken-road — сама дорога держит
   overflow:hidden (для скролла полос), а бегущая рамка рисуется в inset:-3px
   и обрежется, если её повесить прямо на overflow:hidden контейнер. #cr-road
   и все его id/классы, за которые цепляется chicken.js, не тронуты —
   обёртка снаружи, вложенность JS-запросов (#cr-road, #cr-track, #cr-bird)
   не меняется. */
.cr-road-frame {
  position: relative;
  border-radius: var(--radius);
  margin: 6px 2px 4px;
}

.chicken-road {
  position: relative;
  height: 196px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 0 30px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.05);
  /* Трава сверху/снизу, асфальт посередине — многослойный «объёмный» асфальт
     вместо плоской заливки: тёмный центр с лёгким продольным градиентом даёт
     ощущение вогнутого полотна дороги (свет сверху, тень по кромкам). */
  background: linear-gradient(
      180deg,
      #2f7a34 0%,
      #275f2b 16%,
      #1c4520 18%,
      #1c4520 18.6%,
      #3a3a42 18.6%,
      #2c2c33 30%,
      #232329 50%,
      #2c2c33 70%,
      #3a3a42 81.4%,
      #1c4520 81.4%,
      #1c4520 82%,
      #275f2b 84%,
      #2f7a34 100%
    );
}

/* Текстура травы — крап + мелкие «травинки»-полоски, чтобы не была плоской
   заливкой. */
.chicken-road::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 6px);
  background-size: 7px 7px, 10px 10px;
  background-position: 0 8%, 0 92%;
  background-repeat: repeat, no-repeat;
  pointer-events: none;
  opacity: 0.55;
}

/* Асфальт: зерно/потёртости + разметка обочины (гужи-«хазард» ленты) там же,
   где раньше был просто цвет-стоп градиента. Маска ограничивает рисунок
   двумя узкими Y-полосами (там, где раньше проходила граница
   трава/асфальт), поверх — диагональное зерно по всему полотну асфальта. */
.chicken-road::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
      37deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 9px
    ),
    repeating-linear-gradient(180deg, #ffb703 0 5px, #201304 5px 10px),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(0, 0, 0, 0.28), transparent 70%);
  background-size: 14px 14px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 17.6%,
    #000 17.6%,
    #000 18.6%,
    transparent 18.6%,
    transparent 81.4%,
    #000 81.4%,
    #000 82.4%,
    transparent 82.4%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 17.6%,
    #000 17.6%,
    #000 18.6%,
    transparent 18.6%,
    transparent 81.4%,
    #000 81.4%,
    #000 82.4%,
    transparent 82.4%,
    transparent 100%
  );
  opacity: 0.85;
}

.chicken-road__track {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  display: flex;
  align-items: center;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cr-lane {
  position: relative;
  flex: 0 0 var(--lane-w, 64px);
  width: var(--lane-w, 64px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Лёгкий вертикальный блик по полосе — добавляет полотну «выпуклости»,
     не мешая асфальтовому зерну родителя (см. .chicken-road::after). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 40%, rgba(0, 0, 0, 0.06) 100%);
}
/* Разметка между полосами — заменяет плоский dashed-бордер нарисованной
   «покрашенной» пунктирной линией со свечением (глянец краски под фарами). */
.cr-lane::before {
  content: '';
  position: absolute;
  right: -1px;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 214, 130, 0.65) 0 7px, transparent 7px 15px);
  filter: drop-shadow(0 0 2px rgba(255, 209, 102, 0.5));
}
.cr-lane:nth-child(5n)::after {
  /* Через каждые 5 полос — столбик-отметка обочины, для ритма */
  content: '';
  position: absolute;
  right: -1px;
  top: -10%;
  bottom: -10%;
  width: 3px;
  background: repeating-linear-gradient(180deg, #ffb703 0 6px, #2b1a05 6px 12px);
  border-radius: 2px;
  box-shadow: 0 0 6px -1px rgba(255, 183, 3, 0.6);
  z-index: 1;
}

.cr-lane__mult {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #241a05;
  background: radial-gradient(circle at 32% 28%, #fff2c4, var(--gold) 55%, #b8862c 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-back), box-shadow 0.2s, filter 0.2s;
}
/* Тир-свечение по величине множителя — тот же принцип нарастающего блеска,
   что у .tile[data-tier] в slot.css, но своими токенами (--accent/--gold),
   без хардкода цвета конкретной игры. Тир 1 — базовый бейдж без надбавки. */
.cr-lane__mult[data-tier='2'] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 0 10px -3px var(--accent);
}
.cr-lane__mult[data-tier='3'] {
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 0 14px -2px var(--accent), 0 0 22px -6px var(--accent-2);
}
.cr-lane__mult[data-tier='4'] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 0 16px -1px var(--gold), 0 0 28px -5px var(--accent-2);
  animation: cr-badge-glow 1.8s ease-in-out infinite;
}
@keyframes cr-badge-glow {
  50% {
    filter: brightness(1.18) saturate(1.1);
  }
}

.cr-lane--passed .cr-lane__mult {
  filter: grayscale(0.5) brightness(0.75);
  transform: scale(0.9);
}
.cr-lane--next .cr-lane__mult {
  transform: scale(1.16);
  box-shadow: 0 0 0 2px var(--gold), 0 4px 14px -2px var(--gold);
  animation: cr-pulse 1s ease-in-out infinite;
}
@keyframes cr-pulse {
  50% {
    filter: brightness(1.15);
  }
}

/* --------------------------- Фоновый трафик (машины) --------------------------
   Атмосферный слой поверх плоского асфальта — раньше дорога была голой
   градиентной полосой без единой машины, из-за чего тема «курица переходит
   ДОРОГУ» никак не читалась. Каждая .cr-car — маленькая плоская top-down
   SVG-машинка, едущая вдоль своей полосы (вертикально — та же логика, что и
   в реальных crash-играх такого жанра: курица идёт горизонтально через
   полосы, а траффик в каждой полосе движется поперёк, вверх/вниз экрана).
   Живут ВНУТРИ .cr-lane → скроллятся вместе с track на transform родителя,
   не требуют отдельной синхронизации с translateX дороги. Чисто декоративно:
   не несут игрового сигнала, поэтому намеренно НЕ добавлены в список
   исключений общего prefers-reduced-motion в styles.css (этот файл трогать
   нельзя) — под reduce-motion машины просто замрут/погаснут почти мгновенно
   благодаря общему *:not(...) правилу, что для чистой атмосферы корректно. */
.cr-car {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 34px;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--car-dur, 2.4s);
  animation-delay: var(--car-delay, 0s);
  will-change: transform;
}
.cr-car--down {
  animation-name: cr-car-drive-down;
}
.cr-car--up {
  animation-name: cr-car-drive-up;
}
/* Развернуть машину на 180° — фары (нарисованы у «верхнего» края SVG)
   оказываются на ведущем крае независимо от направления движения полосы. */
.cr-car--up .cr-car__svg {
  transform: rotate(180deg);
}
.cr-car__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

/* Проезд машины через видимую высоту полосы (полоса ~125px при высоте
   .chicken-road 196px и track top/bottom:18%) — с запасом за края, чтобы
   появление/исчезновение пряталось за .chicken-road (overflow:hidden). */
@keyframes cr-car-drive-down {
  0% {
    transform: translate(-50%, -42px);
    opacity: 0;
  }
  9% {
    opacity: 0.92;
  }
  88% {
    opacity: 0.92;
  }
  100% {
    transform: translate(-50%, 168px);
    opacity: 0;
  }
}
@keyframes cr-car-drive-up {
  0% {
    transform: translate(-50%, 168px);
    opacity: 0;
  }
  9% {
    opacity: 0.92;
  }
  88% {
    opacity: 0.92;
  }
  100% {
    transform: translate(-50%, -42px);
    opacity: 0;
  }
}

.cr-car__body {
  fill: var(--car-body, #8b8f9c);
}
.cr-car__roof {
  fill: var(--car-body-dk, rgba(0, 0, 0, 0.35));
  opacity: 0.82;
}
.cr-car__light {
  fill: #fff2c4;
  filter: drop-shadow(0 0 3px rgba(255, 224, 140, 0.95)) drop-shadow(0 0 6px rgba(255, 209, 102, 0.55));
}
.cr-car__tail {
  fill: #ff3d51;
  filter: drop-shadow(0 0 2px rgba(255, 61, 81, 0.7));
}

/* Небольшая палитра «раскрасок» машин — часть завязана на игровые
   --accent/--accent-2 (задаются инлайново в chicken.js на .game), часть —
   нейтральные металлики/красный, чтобы траффик не выглядел одноцветным. */
.cr-car--gold {
  --car-body: #d8a13b;
  --car-body-dk: #6b4c15;
}
.cr-car--accent {
  --car-body: var(--accent);
  --car-body-dk: color-mix(in srgb, var(--accent) 55%, #000);
}
.cr-car--accent2 {
  --car-body: var(--accent-2);
  --car-body-dk: color-mix(in srgb, var(--accent-2) 55%, #000);
}
.cr-car--silver {
  --car-body: #b7bdc9;
  --car-body-dk: #4c515c;
}
.cr-car--crimson {
  --car-body: #c23b4a;
  --car-body-dk: #5c151d;
}

/* Опасность на сожжённой полосе — машина/огонь на месте, где сбило */
.cr-lane--hit {
  background: radial-gradient(circle, rgba(255, 61, 81, 0.4), transparent 70%);
}
.cr-lane__hazard {
  position: absolute;
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(255, 61, 81, 0.8));
  animation: cr-hazard-in 0.35s var(--ease-back);
}
@keyframes cr-hazard-in {
  from {
    transform: scale(0.4) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
/* Тормозной след под сбившей машиной — усиливает драму столкновения.
   Специально на ::after (не ::before, который занят линией разметки полосы
   выше) — на редких полосах-«каждой пятой» это может немного спорить со
   столбиком-меткой обочины (:nth-child(5n)::after), это осознанный
   компромисс: важнее не убивать разметку на каждой сбитой полосе. */
.cr-lane--hit::after {
  content: '';
  position: absolute;
  inset: 30% 10%;
  background: repeating-linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.5) 0 3px,
    transparent 3px 9px
  );
  filter: blur(0.3px);
  opacity: 0.7;
  z-index: 0;
}

/* Курица — фиксирована по X, дорога скроллится под ней (см. chicken.js) */
.chicken-road__bird {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: var(--bird-x, 70px);
  width: 40px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 3;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55));
  transition: filter 0.2s;
}
.chicken-road__bird__inner {
  position: relative;
  display: inline-block;
  transition: transform 0.15s var(--ease-back);
  /* Лёгкое «дыхание» на месте, пока курица ждёт следующего шага — оживляет
     персонажа без игрового сигнала (чисто декоративный ambient-цикл, под
     prefers-reduced-motion гасится общим правилом в styles.css как и любая
     другая decorative-анимация без смысловой нагрузки). Переопределяется
     более специфичными правилами --hop/--busted/--win ниже. */
  animation: cr-idle-bob 2.4s ease-in-out infinite;
}
@keyframes cr-idle-bob {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-2.5px) rotate(-2deg);
  }
}

/* Контактная тень под курицей — сплющивается при прыжке, вытягивается в
   воздухе (см. .chicken-road__bird--hop ниже), даёт ощущение веса/полёта. */
.chicken-road__bird__shadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 26px;
  height: 8px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 72%);
  filter: blur(0.5px);
  z-index: 0;
}
.chicken-road__bird--hop .chicken-road__bird__shadow {
  animation: cr-hop-shadow 0.42s var(--ease-back);
}
@keyframes cr-hop-shadow {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  35% {
    transform: translateX(-50%) scale(0.55);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
}

/* Пылевой хлопок при приземлении после прыжка */
.chicken-road__bird__dust {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.chicken-road__bird--hop .chicken-road__bird__dust {
  animation: cr-dust-puff 0.42s var(--ease-out);
}
@keyframes cr-dust-puff {
  0%, 55% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }
  75% {
    opacity: 0.65;
    transform: translateX(-50%) scale(2.6);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(3.4);
  }
}

.chicken-road__bird--hop .chicken-road__bird__inner {
  animation: cr-hop 0.42s var(--ease-back);
}
@keyframes cr-hop {
  0% {
    transform: translateY(0) rotate(0);
  }
  35% {
    transform: translateY(-16px) rotate(-12deg);
  }
  65% {
    transform: translateY(-4px) rotate(6deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.chicken-road__bird--busted .chicken-road__bird__inner {
  animation: cr-busted 0.6s var(--ease-out) forwards;
}
@keyframes cr-busted {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  40% {
    transform: translate(10px, -10px) rotate(35deg);
    opacity: 1;
  }
  100% {
    transform: translate(26px, 22px) rotate(110deg);
    opacity: 0;
  }
}
.chicken-road__bird--busted .chicken-road__bird__shadow,
.chicken-road__bird--busted .chicken-road__bird__dust {
  opacity: 0;
}
.chicken-road__bird--win .chicken-road__bird__inner {
  animation: cr-win-bounce 0.6s var(--ease-back);
  filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px var(--accent-2));
}
@keyframes cr-win-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-18px) scale(1.15);
  }
  55% {
    transform: translateY(2px) scale(0.96);
  }
}

/* Начальная «стартовая площадка» перед первой полосой */
.chicken-road__start {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: var(--bird-x, 70px);
  z-index: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 209, 102, 0.14) 0 8px,
    transparent 8px 16px
  );
}

/* --------------------------- Выбор сложности --------------------------- */

.cr-diff-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--dim);
  margin-top: -2px;
}

/* --------------------------- Кнопка «Забрать» --------------------------- */

.cr-cashout-btn {
  cursor: pointer;
  transition: transform 0.15s var(--ease-back), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cr-cashout-btn:active:not(:disabled) {
  transform: scale(0.94);
}
.cr-cashout-btn:disabled {
  opacity: 0.45;
}
.cr-cashout-btn--ready {
  background: linear-gradient(160deg, rgba(255, 209, 102, 0.35), rgba(255, 209, 102, 0.1));
  border-color: rgba(255, 209, 102, 0.55);
  box-shadow: 0 0 18px -6px var(--gold);
}
.cr-cashout-btn--ready .bet__amount {
  color: var(--gold);
}

/* Переключатель сложности использует общий .segmented (styles.css) — тот
   настроен под горизонтальный скролл с "естественной" шириной пунктов
   (нужно для 6+ вкладок профиля/наград) — с 4 пунктами это сжимало кнопки
   в левый угол вместо ровного деления ширины (тот же баг, что был у
   #dc-direction в Дайсе и #pk-risk в Plinko, 2026-08-14). Переопределяем
   ТОЛЬКО для #cr-difficulty, не трогая styles.css. */
#cr-difficulty {
  justify-content: center;
}
#cr-difficulty .segmented__item {
  flex: 1 1 0;
  text-align: center;
}