/* ============================================================
   СТИЛИ ДЛЯ РЕЖИМА "РОЗЫГРЫШ"
   Не меняют базовый дизайн основной страницы.
   ============================================================ */

.raffle-mode-field { width: 100%; }

/* В режиме розыгрыша название занимает место minValue. */
#raffleNameField { min-width: 0; }
#raffleNameField input { width: 100%; }

.raffle-deadline-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.raffle-deadline-line input[type='time'] {
  margin-left: auto;
}

.raffle-deadline-line input[type='time']:disabled {
  opacity: .55;
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
}

/* Призы — компактные "колбаски" внутри прокручиваемой области. */
#rafflePrizesList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
}

.prizes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.prize-add-button {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.prize-add-button:hover {
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}

.prize-item {
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) minmax(100px, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
}

.prize-item input {
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.prize-quantity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
}

.prize-quantity input {
  width: 52px;
  text-align: center;
}

.prize-remove-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  opacity: .45;
  cursor: pointer;
}

.prize-remove-btn:hover { opacity: .85; }
.prize-remove-btn:disabled { opacity: .2; cursor: not-allowed; }

#raffleShareArea { margin-top: 12px; }
#raffleShareArea .broadcast__row { grid-template-columns: minmax(0, 1fr) 48px 48px; }
#raffleQrContainer img { max-width: 200px; border-radius: 8px; }
#raffleParticipantCount { font-weight: 700; text-align: center; opacity: .8; }

@media (max-width: 600px) {
  .prize-item {
    grid-template-columns: minmax(0, 1fr) 28px;
    border-radius: 18px;
  }
  .prize-item .prize-description,
  .prize-item .prize-quantity { grid-column: 1; }
  .prize-item .prize-remove-btn { grid-column: 2; grid-row: 1 / span 3; }
}


/* ============================================================
   СЛУЧАЙНЫЙ ВЫБОР
   Использует тот же компактный визуальный принцип, что и призы.
   ============================================================ */
/* .choice-options { width: 100%; } */

.choice-add-button {
  display: block;
  /* width: 100%; */
  min-height: 38px;
  margin: 0 auto 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  color: var(--fg);
  font: inherit;
  font-weight: 700;
}

.choice-add-button:hover {
  background: color-mix(in srgb, var(--fg) 9%, var(--bg));
}

.choice-options__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
}

.choice-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
}

.choice-option__input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.choice-option__remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  opacity: .45;
}

.choice-option__remove:hover { opacity: .85; }

/* Название приза компактнее описания. */
.prize-name {
  font-size: 13px !important;
  font-weight: 600;
}

.prize-description {
  font-size: 15px !important;
}

/* Кнопка добавления — над главным призом, по центру. */
#raffleAddPrizeButton {
  display: block;
  width: auto;
  min-width: 120px;
  height: 34px;
  margin: 0 auto 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  color: var(--fg);
  font: inherit;
  font-weight: 700;
}

#rafflePrizesList {
  width: 100%;
  min-width: 0;
}

.prize-item {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

.prize-count {
  appearance: textfield;
  -moz-appearance: textfield;
}

.prize-count::-webkit-outer-spin-button,
.prize-count::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* «Да / Нет»: цвет результата может окрашивать всю форму, если варианты являются CSS-цветами. */
.page.boolean-result-colored {
  background-color: var(--boolean-result-background);
}

.choice-options {
  margin: 15px;
}

.page.mode-result-themed {
  background: var(--mode-result-background);
  transition: background 260ms ease;
}

.page.mode-result-themed .hero__result-box,
.page.mode-result-themed .settings,
.page.mode-result-themed .history-section,
.page.mode-result-themed .broadcast {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.page.mode-coin-flip .hero__result,
.hero__result.mode-coin-flip {
  animation: gen2win-coin-flip 700ms ease-in-out;
  transform-origin: center;
}

@keyframes gen2win-coin-flip {
  0% { transform: perspective(600px) rotateY(0deg) scale(1); }
  50% { transform: perspective(600px) rotateY(720deg) scale(1.08); }
  100% { transform: perspective(600px) rotateY(1440deg) scale(1); }
}

.boolean-mode-field .range-field {
  min-width: 0;
}

.boolean-mode-field .range-field input {
  width: 100%;
}

.mode-rules-hint {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  color: var(--muted, currentColor);
  font-size: .85rem;
  line-height: 1.45;
}