/* AttemptsList — board, list, sort-toggle, .row-модификаторы (last/win/skeleton).
   Базовые .row стили (фон, blur, ::before, .w/.r, nickname) — в styles/row.css. */

.board { margin-top: 8px; }

.board-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm); margin-bottom: 8px;
}
.board-tabs[hidden] { display: none; }

#sort-toggle {
  margin-left: auto;
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  padding: 0 0 4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  border: none;
  background: transparent;
  color: var(--text);
}
#sort-toggle:hover { background: transparent; border-color: transparent; }

.list { display: flex; flex-direction: column; gap: var(--gap-sm); }
.list .row { order: var(--order, 0); }

/* === Модификаторы .row (база — styles/row.css) === */
.row.last { border-color: var(--accent); }

/* === Flash-анимация нового ряда (750мс) ===
   Ячейка появляется на rank-позиции МГНОВЕННО, без entry-keyframes на самом .row.
   Border сразу --accent через .last. Плашка ::before сразу финальной ширины --w
   (никакого sweep/grow), но opacity и filter «загораются → тухнут» — это и есть
   визуальный сигнал «новое слово». */
.row.is-new::before { animation: rowBarFlash 750ms ease-out; }
@keyframes rowBarFlash {
  0%   { opacity: 0.32; filter: brightness(1.15) saturate(1.1); }
  100% { opacity: 0.18; filter: none; }
}
/* В light базовый opacity плашки 0.28 (см. row.css). Финал dark-анимации = 0.18
   ниже базы → после animation-end opacity «прыгал назад» к 0.28 (моргание).
   Решение — отдельный keyframes-namespace для light и подмена animation-name. */
@keyframes rowBarFlashLight {
  0%   { opacity: 0.45; filter: brightness(1.10) saturate(1.08); }
  100% { opacity: 0.28; filter: none; }
}
@media (prefers-color-scheme: light) {
  .row.is-new::before { animation-name: rowBarFlashLight; }
}
[data-theme="light"] .row.is-new::before { animation-name: rowBarFlashLight; }
/* Win-row подсветка: одинаково в dark и light. */
.row.win-row { border-color: var(--win); background: rgba(var(--success-rgb), 0.10); }
.row.win-row.last { border-color: var(--win); }

/* Skeleton-строки (показываются до первого applyServerState). */
.row.skeleton {
  pointer-events: none;
  animation: rowIn 0.25s ease, skeletonShimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface-strong) 50%,
    var(--surface) 100%);
  background-size: 200% 100%;
}
.row.skeleton .w,
.row.skeleton .r {
  display: inline-block;
  background: var(--surface-strong);
  border-radius: 4px;
  height: 14px;
  -webkit-mask-image: none;
          mask-image: none;
  position: static;
}
.row.skeleton .w { width: 55%; }
.row.skeleton:nth-child(2n) .w { width: 70%; }
.row.skeleton:nth-child(3n) .w { width: 45%; }
.row.skeleton .r { width: 32px; right: auto; }
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}