/* Абсурдия — слой полировки дизайна (превью). Подключается последним, ничего не удаляет из базовых стилей. */

/* 1. Шапка: стекло с размытием и тонкая градиентная линия снизу */
.theme-pop .top {
  background: linear-gradient(180deg, rgba(24, 14, 46, .82), rgba(19, 11, 37, .74));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.theme-pop .top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rose) 20%, var(--gold) 50%, var(--mint) 80%, transparent);
  opacity: .55;
}
.theme-pop .nav a { transition: background .18s, color .18s, transform .18s cubic-bezier(.3, 1.4, .5, 1); }
.theme-pop .nav a:hover { transform: translateY(-1px); }

/* 2. Ритм секций главной: без огромных пустот между блоками */

.theme-pop .sec-head { margin-bottom: 18px; }

/* 3. Шаги «Как играть»: отклик на наведение и цветная тень в тон номера */
.theme-pop .step { transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .22s; }
.theme-pop .step:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--rose); }
.theme-pop .step:nth-child(2):hover { box-shadow: 8px 8px 0 var(--gold); }
.theme-pop .step:nth-child(3):hover { box-shadow: 8px 8px 0 var(--mint); }
.theme-pop .step span { line-height: 1.5; }

/* 4. Кнопки: «вдавливание» при нажатии и ровная анимация */
.theme-pop .btn { transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), box-shadow .14s, background .18s, color .18s, border-color .18s; }
.theme-pop .btn:not(:disabled):hover { transform: translate(-1px, -1px); }
.theme-pop .btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--hard); }

/* 5. Поля ввода: заметный, но мягкий фокус в цветах темы */
.theme-pop input[type="text"]:focus, .theme-pop input[type="search"]:focus,
.theme-pop input[type="email"]:focus, .theme-pop input[type="password"]:focus,
.theme-pop input[type="number"]:focus, .theme-pop textarea:focus, .theme-pop select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 122, 184, .22), 0 0 18px rgba(244, 198, 91, .14);
}

/* 6. Пустые состояния: живой градиент вместо пустой рамки */
.theme-pop .empty {
  background: linear-gradient(135deg, rgba(255, 122, 184, .07), rgba(111, 224, 200, .05));
  border-width: 2px;
  border-radius: 22px;
}

/* 7. Карточки миров: плавное появление обложки и мягкая подсветка */
.theme-pop .card { transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .22s; }
.theme-pop .card .cover::after { background: linear-gradient(180deg, transparent 50%, rgba(15, 11, 26, .82)); }

/* 8. Подвал: аккуратные ссылки */
.footer a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .18); transition: color .15s, border-color .15s; }
.footer a:hover { color: var(--gold-2); border-color: var(--gold); }

/* 9. Скроллбар в цветах сайта */
html { scrollbar-color: #4a3a78 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a3f8f, #3b2a66); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--rose), #7a4fb8); background-clip: padding-box; }

/* 10. Выделение текста */
::selection { background: rgba(255, 122, 184, .45); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .theme-pop .step:hover, .theme-pop .btn:hover, .theme-pop .nav a:hover { transform: none; }
}