/* loader.css — прелоадер «разлёт и сборка доски» (loader.js).
   Цвета плиток — бренд школы: --dl-a — акцент (у NEMZO синий #2f5bea, у первой
   школы — красный), --dl-b — тёмный (чернила). Школа меняет их
   своими --accent/--ink, сам прелоадер один на всех. */
.dl {
  --dl-a: var(--accent, #2f5bea);
  --dl-b: var(--ink, #16161a);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px 0; min-height: 132px;
  color: var(--muted, #5c5b57); font-size: .9375rem; line-height: 1.4; text-align: center; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .22s ease;
}
.dl.is-on { opacity: 1; visibility: visible; }
.dl[hidden] { display: none; }
/* Уходит: ложится поверх (ширина задана из loader.js) и гаснет — содержимое
   встаёт на своё место сразу, без скачка. */
.dl.dl-out { position: absolute; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.dl-text { display: block; max-width: 32ch; }

.dl-mark {
  position: relative; display: block; flex: none;
  font-size: 13px; width: 4em; height: 4em; margin: .6em;
  perspective: 13em; perspective-origin: 50% 30%;
}
.dl-board, .dl-flat, .dl-plate { position: absolute; left: 0; top: 0; width: 4em; height: 4em; display: block; }
.dl-board { transform-style: preserve-3d; visibility: hidden; }
.dl-mark.is-moving .dl-board { visibility: visible; }
.dl-mark.is-moving .dl-flat { opacity: 0; }
.dl-tile { position: absolute; display: block; width: 1em; height: 1em; transform-style: preserve-3d; transform-origin: 50% 50% -.1em; }
.dl-f { position: absolute; display: block; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dl-f i, .dl-f b { position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.dl-f i { background: #000; }
.dl-f b { background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .3)); }
.dl-shadow { position: absolute; display: block; width: 1em; height: 1em; opacity: 0; border-radius: .3em; background: radial-gradient(closest-side, rgba(22, 22, 26, .55), rgba(22, 22, 26, 0)); }
.dl-plate { overflow: visible; opacity: 0; fill: none; stroke: var(--dl-b); stroke-width: 1; stroke-dasharray: 3 4; }
.dl-flat {
  z-index: 2; border-radius: .28em; overflow: hidden;
  background: repeating-conic-gradient(var(--dl-b) 0 25%, var(--dl-a) 0 50%) 0 0 / 2em 2em;
}
.dl-glint { position: absolute; display: block; top: -25%; left: -1.6em; width: 1.6em; height: 150%; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); }

/* Первая загрузка страницы (кабинет, вход, тренер) — крупнее и на пол-экрана. */
.dl-page { min-height: 60vh; min-height: 60svh; }
.dl-page .dl-mark { font-size: 18px; }
/* В строке состояния рядом с текстом — компактно, знак слева. */
.dl-row { flex-direction: row; min-height: 0; padding: 6px 0; gap: 10px; text-align: left; justify-content: flex-start; }
.dl-row .dl-mark { font-size: 8px; }

/* Меньше движения — доска не разлетается, а мягко дышит. */
.dl-reduce .dl-flat { animation: dl-pulse 1.6s ease-in-out infinite alternate; }
@keyframes dl-pulse { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: none; } }