Задача

Необходимо сверстать страницу игрового стола, полностью соответствующую макету из Figma. Ключевое требование - пиксельная точность верстки (отклонение не более 1-2 пикселей). Проект выполняется в рамках существующего стека.

Стек технологий

• Шаблоны: HTML на Jinja2
• Стили: Обычный CSS
• Логика: Ванильный JavaScript (без React/Vue)
• Бэкенд: FastAPI (для отдачи HTML и статики)

Требования

• Использовать Flex и Grid (аналог Auto Layout). Позиционирование через absolute только для оверлеев и бейджей.
• Сохранить существующую JS-логику: не менять ID, классы и data-атрибуты.
• Вынести повторяющиеся значения (цвета, отступы, шрифты, тени, радиусы) в CSS-переменные :root.
• Реализовать корректную вложенность элементов, как в макете Figma.
• Запрещается использовать фреймворки, сборщики, Tailwind, npm.

Режим проверки (Overlay)

Добавить специальный режим, который включается/выключается клавишей O. При активации макет должен перекрываться PNG-изображением (экспорт из Figma) через /static/debug/figma_screen.png с прозрачностью 50%.

Результат работы

Необходимо предоставить список измененных файлов и краткий changelog (что было изменено/добавлено).