/*
 * Оформление "Судоку".
 *
 * Вся геометрия поля выводится из одной переменной --board-size, поэтому
 * интерфейс одинаково работает в окне любого размера, на телефоне и в
 * полноэкранном режиме. Модуль WebAssembly задаёт клеткам только классы
 * состояния - размеры и цвета живут здесь.
 *
 * Цвета фона и границ - те же, что в остальных играх набора.
 */

:root {
    color-scheme: dark;

    /* Тёмное окружение: страница, карточка игры и коробка поля. */
    --page-top: #141d1f;
    --page-bottom: #0b1112;
    --card: #172224;
    --tray: #111a1c;
    --line: #2c3d40;
    --line-strong: #3d5458;
    --line-block: #4e6b71;
    --ink: #e9f1f2;
    --ink-soft: #8ea5a8;
    --accent: #2bb3e8;
    --accent-bright: #5fc9f1;
    --accent-ink: #0b1618;
    --accent-soft: rgba(43, 179, 232, 0.14);

    /* Подсветка поля. */
    --cell-empty: rgba(255, 255, 255, 0.02);
    --cell-given: rgba(255, 255, 255, 0.05);
    --tint-unit: rgba(43, 179, 232, 0.14);
    --tint-same: rgba(255, 196, 46, 0.16);
    --tint-select: rgba(43, 179, 232, 0.26);
    --tint-hint: rgba(120, 220, 150, 0.16);
    --tint-hint-target: rgba(120, 220, 150, 0.3);
    --hint-line: #63d29a;
    --danger: #f4551e;
    --danger-soft: rgba(244, 85, 30, 0.2);
    --player-ink: #5fc9f1;

    /* Отступы страницы и карточки: их же вычитает расчёт стороны поля. */
    --outer-pad: clamp(8px, 2vmin, 24px);
    --card-pad: clamp(12px, 2.2vmin, 22px);

    /* Зазор между полем и колонкой цифр справа от него. */
    --pad-gap: clamp(3px, 0.8vmin, 7px);

    /* Сторона поля: вписывается в ширину карточки вместе с колонкой цифр, в
       высоту экрана и в разумный максимум. Делитель 1.13 - это поле плюс
       клавиша цифры; запас в 6px оставлен на полосу прокрутки. */
    --board-fit: calc(
        (100vw - 2 * (var(--outer-pad) + var(--card-pad)) - var(--pad-gap) - 6px) / 1.13
    );
    --board-size: min(var(--board-fit), 48vh, 520px);
    --cell: calc(var(--board-size) / 9);

    /* Клавиша цифры - почти десятый столбец поля, а --ui-width - ширина
       полосы с управлением: по ней мельчают подписи кнопок. Переменная
       подставляется там, где объявлена, поэтому обе строки повторяются всюду,
       где сторона поля задаётся заново. */
    --pad-key: calc(var(--board-size) * 0.12);
    --ui-width: calc(var(--board-size) + var(--pad-gap) + var(--pad-key));

    --radius-card: 12px;
    --radius-tray: 10px;
}

@supports (height: 100dvh) {
    :root {
        --board-size: min(var(--board-fit), 48dvh, 520px);
    }
}

/* Светлая тема: меняются только цвета, вся геометрия общая. */
:root[data-theme="light"] {
    color-scheme: light;

    --page-top: #eef3f4;
    --page-bottom: #dde7e9;
    --card: #f7fafa;
    --tray: #ffffff;
    --line: #ccd9db;
    --line-strong: #9cb2b6;
    --line-block: #7b9298;
    --ink: #14242a;
    --ink-soft: #5b7175;
    --accent: #0f7fb0;
    --accent-bright: #1595cd;
    --accent-ink: #ffffff;
    --accent-soft: rgba(15, 127, 176, 0.12);

    --cell-empty: rgba(20, 36, 42, 0.01);
    --cell-given: rgba(20, 36, 42, 0.06);
    --tint-unit: rgba(15, 127, 176, 0.13);
    --tint-same: rgba(217, 157, 15, 0.2);
    --tint-select: rgba(15, 127, 176, 0.24);
    --tint-hint: rgba(28, 150, 90, 0.14);
    --tint-hint-target: rgba(28, 150, 90, 0.26);
    --hint-line: #1c965a;
    --danger: #c53c0c;
    --danger-soft: rgba(197, 60, 12, 0.16);
    --player-ink: #0f7fb0;
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: var(--outer-pad);
    padding-top: max(var(--outer-pad), env(safe-area-inset-top));
    padding-bottom: max(var(--outer-pad), env(safe-area-inset-bottom));
    background: none;
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Карточка игры */

.app {
    /* Высота рядов с кнопками: считается от ширины полосы управления, чтобы на
       телефоне ряды были не выше клавиши с цифрой. */
    --row-height: clamp(28px, calc(var(--ui-width) * 0.094), 36px);

    display: grid;
    gap: clamp(6px, 1.2vmin, 14px);
    width: 100%;
    max-width: calc(var(--ui-width) + 2 * var(--card-pad));
    padding: var(--card-pad);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.head__title {
    margin: 0;
    font-size: clamp(18px, 3.2vmin, 25px);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.head__tools {
    display: flex;
    gap: 8px;
}

.icon-button {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--tray);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-soft);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.icon-button:hover {
    color: var(--ink);
    border-color: var(--line-strong);
}

.icon-button--active {
    background: var(--accent-soft);
    border-color: rgba(43, 179, 232, 0.45);
    color: var(--accent);
}

.icon-button[hidden] {
    display: none;
}

/* У кнопки паузы два глифа: чёрточки в игре и треугольник на паузе. */
.icon-button__glyph--play,
.icon-button--active .icon-button__glyph--pause {
    display: none;
}

.icon-button--active .icon-button__glyph--play {
    display: block;
}

.icon-button__glyph {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Показатели партии */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 0.9vmin, 9px);
}

.stat {
    display: grid;
    align-content: center;
    padding: clamp(3px, 0.6vmin, 6px) clamp(4px, 1vmin, 8px);
    background: var(--tray);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--line);
    text-align: center;
}

.stat__label {
    color: var(--ink-soft);
    font-size: clamp(8px, 1.2vmin, 10px);
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
}

.stat__value {
    font-size: clamp(12px, 2vmin, 17px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Поле и колонка цифр: они всегда стоят рядом и центрируются вместе. */

.play {
    display: grid;
    grid-template-columns: var(--board-size) var(--pad-key);
    gap: var(--pad-gap);
    justify-content: center;
}

.field {
    position: relative;
    width: var(--board-size);
    height: var(--board-size);
}

.board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 100%;
    height: 100%;
    background: var(--tray);
    border: 2px solid var(--line-block);
    border-radius: var(--radius-tray);
    overflow: hidden;
    /* Убирает задержку 300 мс и зум по двойному тапу (§11). */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Строки нужны доступности (role="row"), а раскладку отдаём сетке поля. */
.row {
    display: contents;
}

.cell {
    position: relative;
    display: grid;
    place-items: center;
    background: var(--cell-empty);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--player-ink);
    font-size: calc(var(--cell) * 0.58);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease;
}

/* Границы блоков 3x3 - толще и светлее. */
.cell:nth-child(3n) {
    border-right: 2px solid var(--line-block);
}

.cell:nth-child(9) {
    border-right: 0;
}

.row:nth-child(3n) .cell {
    border-bottom: 2px solid var(--line-block);
}

.row:nth-child(9) .cell {
    border-bottom: 0;
}

.cell__value {
    position: relative;
    z-index: 1;
}

.cell__notes {
    position: absolute;
    inset: 6%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    color: var(--ink-soft);
    font-size: calc(var(--cell) * 0.25);
    font-weight: 500;
}

.cell__note {
    display: grid;
    place-items: center;
    font-style: normal;
    opacity: 0;
}

.cell__note--on {
    opacity: 1;
}

/* Подсказки-цифры не меняются, поэтому выглядят спокойнее игровых. */
.cell--given {
    background: var(--cell-given);
    color: var(--ink);
    font-weight: 700;
    cursor: default;
}

.cell--unit {
    background: var(--tint-unit);
}

.cell--same {
    background: var(--tint-same);
}

.cell--hint-soft {
    background: var(--tint-hint);
}

.cell--hint-target {
    background: var(--tint-hint-target);
}

.cell--hint {
    box-shadow: inset 0 0 0 2px var(--hint-line);
}

/* Ошибки помечены не только цветом: в углу появляется треугольник, а
   неверная цифра получает волнистое подчёркивание (§11). */
.cell--conflict,
.cell--wrong {
    background: var(--danger-soft);
    color: var(--danger);
}

.cell--conflict::after,
.cell--wrong::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 24%;
    height: 24%;
    background: var(--danger);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.cell--wrong .cell__value {
    text-decoration: underline wavy;
    text-underline-offset: 0.12em;
}

.cell--selected {
    background: var(--tint-select);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Заслонки поля: пауза, генерация, итоги */

.veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 6%;
    background: rgba(11, 18, 19, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-tray);
    text-align: center;
    animation: fade-in 200ms ease both;
}

:root[data-theme="light"] .veil {
    background: rgba(240, 245, 246, 0.86);
}

.veil[hidden] {
    display: none;
}

.veil__title {
    margin: 0;
    font-size: clamp(18px, 3.6vmin, 26px);
    font-weight: 700;
}

.veil__hint {
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(11px, 2vmin, 14px);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.win {
    display: grid;
    gap: clamp(8px, 2%, 14px);
    justify-items: center;
    padding: clamp(14px, 4%, 24px) clamp(16px, 6%, 30px);
    background: var(--card);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.win__title {
    margin: 0;
    font-size: clamp(19px, 4vmin, 27px);
    font-weight: 700;
}

.win__summary {
    display: flex;
    gap: clamp(14px, 5%, 28px);
    justify-content: center;
}

.win__item {
    display: grid;
    gap: 2px;
}

.win__label {
    color: var(--ink-soft);
    font-size: clamp(9px, 1.6vmin, 11px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.win__value {
    font-size: clamp(15px, 2.8vmin, 21px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.win__note {
    margin: 0;
    padding: 5px 12px;
    background: var(--accent-soft);
    border-radius: 999px;
    color: var(--accent);
    font-size: clamp(11px, 2vmin, 13px);
    font-weight: 600;
}

.win__note[hidden] {
    display: none;
}

/* Подсказка решателя */

.hint {
    padding: clamp(8px, 1.6vmin, 12px) clamp(10px, 2vmin, 14px);
    background: var(--tray);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--hint-line);
}

.hint[hidden] {
    display: none;
}

.hint__text {
    margin: 0;
    font-size: clamp(11px, 2vmin, 13.5px);
}

/* Цифровая панель: колонка справа от поля, ростом ровно с него. */

.pad {
    display: grid;
    grid-template-rows: repeat(9, 1fr);
    gap: var(--pad-gap);
}

.pad__key {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1px;
    min-height: 0;
    padding: 2px 3px;
    background: var(--tray);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pad__key:hover:not([disabled]) {
    border-color: var(--line-strong);
}

.pad__digit {
    justify-self: center;
    font-size: clamp(13px, calc(var(--pad-key) * 0.52), 24px);
    font-weight: 700;
    line-height: 1;
}

/* Счётчик оставшихся вхождений цифры (§11). Он стоит отдельным столбцом у
   правого края: на самой мелкой клавише цифры всё равно не сойдутся. Пока
   счётчик пуст, столбец схлопывается и цифра снова ровно по центру. */
.pad__count {
    align-self: end;
    color: var(--ink-soft);
    font-size: clamp(7px, calc(var(--pad-key) * 0.24), 11px);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pad__key--active {
    background: var(--accent-soft);
    border-color: rgba(43, 179, 232, 0.5);
    color: var(--accent);
}

.pad__key--done,
.pad__key[disabled] {
    color: var(--ink-soft);
    cursor: default;
    opacity: 0.45;
}

/* Инструменты: пять кнопок в один ряд. Ряд никогда не переносится - при
   нехватке места мельчает подпись и сходит на нет зазор, кнопки допустимо
   ставить вплотную. */

.tools {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(2px, 0.7vmin, 7px);
}

.tool {
    min-width: 0;
    min-height: var(--row-height);
    padding: 3px 2px;
    background: var(--tray);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-size: clamp(9px, calc(var(--ui-width) * 0.031), 13px);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tool:hover:not([disabled]) {
    border-color: var(--line-strong);
}

.tool--active {
    background: var(--accent-soft);
    border-color: rgba(43, 179, 232, 0.5);
    color: var(--accent);
}

.tool[disabled] {
    color: var(--ink-soft);
    cursor: default;
    opacity: 0.45;
}

/* Управление партией */

.foot {
    display: grid;
    gap: clamp(5px, 1vmin, 9px);
}

/* Ряд не переносится: узкому окну достаётся мелкий шрифт и тесный зазор. */
.foot__row {
    display: flex;
    align-items: center;
    gap: clamp(3px, 1vmin, 9px);
}

.foot__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.foot__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.select {
    min-width: 0;
    min-height: var(--row-height);
    padding: 0 6px;
    background: var(--tray);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-size: clamp(10px, calc(var(--ui-width) * 0.031), 14px);
    cursor: pointer;
    touch-action: manipulation;
}

.button {
    min-width: 0;
    min-height: var(--row-height);
    padding: 0.3em 0.9em;
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    color: var(--accent-ink);
    font: inherit;
    font-size: clamp(10px, calc(var(--ui-width) * 0.031), 14px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    transition: background 150ms ease, translate 120ms ease;
}

.button:hover {
    background: var(--accent-bright);
}

.button:active {
    translate: 0 1px;
}

.button--ghost {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(43, 179, 232, 0.3);
    color: var(--accent);
}

.button--ghost:hover {
    background: rgba(43, 179, 232, 0.22);
}

.status {
    margin: 0;
    padding: 5px 9px;
    background: var(--accent-soft);
    border-radius: 9px;
    color: var(--accent);
    font-size: clamp(10px, 1.8vmin, 12.5px);
    line-height: 1.3;
}

.status[hidden] {
    display: none;
}

.stats-line {
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(10px, 1.7vmin, 12px);
    line-height: 1.3;
}

/* Настройки: тело раскрывается вверх поверх остальных блоков, поэтому
   разметка не сдвигается ни на пиксель. */

.settings {
    position: relative;
    background: var(--tray);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--line);
}

.settings__summary {
    padding: 7px 12px;
    color: var(--ink-soft);
    font-size: clamp(10px, 1.8vmin, 12.5px);
    cursor: pointer;
    touch-action: manipulation;
}

.settings__body {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--card);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 34px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .settings__body {
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 34px rgba(20, 36, 42, 0.18);
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 2vmin, 13px);
    cursor: pointer;
}

.check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    touch-action: manipulation;
}

.settings__actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.boot-error {
    margin: 0;
    padding: 12px 14px;
    background: rgba(224, 76, 58, 0.14);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(224, 76, 58, 0.34);
    color: #ff9d8c;
    font-size: 13px;
}

.boot-error[hidden] {
    display: none;
}

/* Низкий экран: поле чуть меньше, лишние пояснения убраны - управление должно
   оставаться на виду без прокрутки. */
@media (max-height: 700px) {
    :root {
        --board-size: min(var(--board-fit), 44vh, 520px);
    }

    @supports (height: 100dvh) {
        :root {
            --board-size: min(var(--board-fit), 44dvh, 520px);
        }
    }

    .stats-line {
        display: none;
    }
}

/* Высокое окно на настольном экране: поле можно сделать крупнее - управление
   всё равно умещается ниже без прокрутки. */
@media (min-width: 500px) and (min-height: 820px) {
    :root {
        --board-size: min(var(--board-fit), 56vh, 560px);
    }

    @supports (height: 100dvh) {
        :root {
            --board-size: min(var(--board-fit), 56dvh, 560px);
        }
    }
}

/* Полный экран: та же карточка, но во весь экран устройства. */

.app:fullscreen,
.app:-webkit-full-screen {
    --board-size: min(80vw, 62vh, 620px);
    --pad-key: calc(var(--board-size) * 0.12);
    --ui-width: calc(var(--board-size) + var(--pad-gap) + var(--pad-key));

    width: 100%;
    height: 100%;
    max-width: none;
    grid-template-columns: min(100%, calc(var(--ui-width) + 2 * var(--card-pad)));
    align-content: center;
    justify-content: center;
    padding: clamp(14px, 2.5vmin, 36px);
    background: radial-gradient(125% 100% at 50% 0%, var(--page-top), var(--page-bottom));
    border-radius: 0;
}

@supports (height: 100dvh) {
    .app:fullscreen {
        --board-size: min(80vw, 62dvh, 620px);
    }
}

/* Телефон лёжа: поле слева, всё управление справа. */

@media (orientation: landscape) and (max-height: 620px) {
    :root {
        --board-size: min(80vh, 42vw, 460px);
        /* Управление ужато в колонку справа - подписи считают по ней. */
        --ui-width: 260px;
    }

    .app {
        grid-template-areas:
            "play head"
            "play stats"
            "play hint"
            "play tools"
            "play foot";
        grid-template-columns: auto minmax(210px, 330px);
        grid-template-rows: auto auto auto auto 1fr;
        gap: clamp(6px, 1.4vmin, 14px) clamp(12px, 2.2vmin, 22px);
        align-items: start;
        width: auto;
        max-width: none;
    }

    .head {
        grid-area: head;
    }

    .stats {
        grid-area: stats;
        grid-template-columns: repeat(4, 1fr);
    }

    .play {
        grid-area: play;
        align-self: center;
    }

    .hint {
        grid-area: hint;
    }

    .tools {
        grid-area: tools;
    }

    .foot {
        grid-area: foot;
    }

    /* Лёжа у панели настроек мало места по высоте: ужимаем отступы и галочки,
       чтобы она целиком умещалась в карточке. */
    .settings__body {
        gap: 5px;
        padding: 8px 10px;
    }

    .check {
        font-size: clamp(10px, 1.8vmin, 12px);
    }

    .check input {
        width: 15px;
        height: 15px;
    }

    .app:fullscreen,
    .app:-webkit-full-screen {
        --board-size: min(92vh, 46vw, 600px);
        --ui-width: 300px;

        grid-template-columns: auto minmax(210px, 330px);
        align-content: center;
    }

    @supports (height: 100dvh) {
        :root {
            --board-size: min(80dvh, 42vw, 460px);
        }

        .app:fullscreen {
            --board-size: min(92dvh, 46vw, 600px);
        }
    }
}

/* Широкое окно лёжа: под кнопкой настроек места больше, чем над ней, - панель
   раскрывается вниз. На узких экранах лёжа так нельзя: панель ушла бы за низ
   экрана, поэтому там она по-прежнему идёт вверх. */
@media (orientation: landscape) and (max-height: 620px)
    and (min-height: 500px) and (min-width: 950px) {
    .settings__body {
        top: calc(100% + 6px);
        bottom: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cell,
    .button,
    .tool,
    .pad__key,
    .icon-button {
        transition-duration: 1ms;
    }

    .veil {
        animation: none;
    }
}