/* ==========================================================================
   Game Center — Дайс: слайдер «больше/меньше» 0–100 (НЕ два кубика)

   Казино-грейд проход (2026-08-14): механика тут — вероятностный порог на
   шкале, поэтому метафора собрана как приборный риск-гауж (в духе настоящих
   Stake/Evolution dice) — цифровое LED-табло результата + горизонтальная
   шкала с закрашенными зонами выигрыша/проигрыша и золотым флажком-порогом,
   а не рисованные игральные кости, которые семантически не подходят.

   Реальный <input type=range id=dc-range> остаётся на месте и рабочим —
   он лежит прозрачным слоем ПОВЕРХ кастомной отрисовки шкалы (см. dice.js),
   так что нативный drag/тач/accessibility не теряются, глазами же виден
   только наш рисунок трека, флажка и зон.
   ========================================================================== */

.dc-rig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

/* ------------------------------ LED-табло -------------------------------- */

.dc-readout {
  position: relative;
  margin: 4px auto 2px;
  padding: 16px 10px 12px;
  width: min(78vw, 320px);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(6, 4, 14, 0.92), rgba(3, 2, 8, 0.96));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--stroke));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 16px 30px -18px #000;
  transition: border-color 0.25s, box-shadow 0.25s;
}
/* Тонкие горизонтальные риски стекла LED-панели — сугубо декоративная
   текстура, mix-blend-mode не даёт ей перебивать цвет самих цифр. */
.dc-readout__glass {
  position: absolute;
  inset: 2px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Рамка табло реагирует на исход последнего броска — синхронизирована с
   классом .dice-display__roll--win/--lose, который вешает dice.js на сами
   цифры (dice.js его не переименовывал, только эта CSS-привязка новая). */
.dc-readout:has(.dice-display__roll--win) {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 32px -8px var(--green);
}
.dc-readout:has(.dice-display__roll--lose) {
  border-color: color-mix(in srgb, var(--red) 55%, transparent);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 32px -8px var(--red);
}

/* Мерцание цифр, пока идёт бросок (dc-readout--rolling вешается/снимается
   в dice.js вокруг animateRoll) — усиление уже идущего текстового тасования
   чисел, не единственный сигнал «идёт бросок». */
.dc-readout--rolling .dice-display__roll {
  animation: dc-digit-flicker 0.09s steps(1) infinite;
}
@keyframes dc-digit-flicker {
  50% {
    opacity: 0.72;
    filter: blur(0.4px);
  }
}

.dice-display__roll {
  position: relative;
  z-index: 1;
  font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(52px, 17vw, 78px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  color: var(--text);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s, text-shadow 0.2s;
}
.dice-display__roll--win {
  color: var(--green);
  text-shadow: 0 0 10px color-mix(in srgb, var(--green) 75%, transparent),
    0 0 32px color-mix(in srgb, var(--green) 55%, transparent);
}
.dice-display__roll--lose {
  color: var(--red);
  text-shadow: 0 0 10px color-mix(in srgb, var(--red) 70%, transparent),
    0 0 30px color-mix(in srgb, var(--red) 50%, transparent);
}

.dice-display__hint {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------ Риск-гауж -------------------------------- */

.dc-gauge {
  padding: 4px 8px 0;
}

.dc-gauge__track {
  position: relative;
  height: 16px;
  margin: 10px 2px 6px;
}

/* Внутренняя «дорожка» — жёлоб со скруглением, зоны/риски обрезаются по
   нему через overflow:hidden, а флажок и <input> остаются снаружи этого
   слоя (иначе флажок обрезался бы по высоте жёлоба). */
.dc-gauge__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.32));
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.dc-gauge__ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 10%);
  pointer-events: none;
}

.dc-gauge__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: left 0.15s var(--ease-out), width 0.15s var(--ease-out);
}
.dc-gauge__zone--win {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 65%, transparent), color-mix(in srgb, var(--green) 40%, transparent));
  box-shadow: inset 0 0 14px -4px var(--green);
}
.dc-gauge__zone--lose {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 42%, transparent), color-mix(in srgb, var(--red) 30%, transparent));
}

/* Флажок-порог — золотая игла с ореолом, ровно как метка риска на шкале
   рулетки/крэша у остальных игр каталога. */
.dc-gauge__pin {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--gold), 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: left 0.15s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.dc-gauge__pin-glow {
  position: absolute;
  inset: -11px -9px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%);
  animation: dc-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes dc-pin-pulse {
  50% {
    opacity: 0.5;
    transform: scale(1.15);
  }
}

/* Реальный range-инпут: прозрачный, но с увеличенной областью нажатия —
   визуально невидим (opacity:0), тач/drag и accessibility работают как
   у нативного слайдера, рисуем только свой трек/зоны/флажок поверх/под ним. */
.dc-gauge__input {
  position: absolute;
  inset: -14px 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}
.dc-gauge__input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
}
.dc-gauge__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  background: transparent;
}
.dc-gauge__input::-moz-range-track {
  background: transparent;
}
.dc-gauge__input::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
}
.dc-gauge__input:disabled {
  cursor: default;
}

.dc-gauge__scale {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
}

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