Клинок и кана

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Создай браузерную игру «Клинок и кана» — компактную пошаговую языковую RPG на русском языке с обучением базовой японской хирагане. Игра должна быть полностью интерактивной и состоять из двух основных этапов: короткая сюжетная последовательность слева и бой справа.

Визуальный стиль: тёмная атмосферная fantasy-интерфейсная эстетика в сине-фиолетовой палитре, фон с мягким радиальным свечением, полупрозрачные панели, тонкие сине-серые границы, большие скругления и сильные тени. Акценты — алый/розовый для бренда и героя, золотой для важных действий и состояния хода, бирюзовый для учебных заголовков, зелёный и красный для полос здоровья. Интерфейс должен выглядеть как polished game UI, без реалистичной 3D-графики: поле стилизовано CSS-элементами и эмодзи.

В верхней шапке покажи название «КЛИНОК И КАНА», где «И КАНА» выделено розовым. Справа — «Урок 1 · Хирагана» и золотая строка текущего набора знаков «あ い う え お». Основной экран — две панели: узкая боковая панель сюжета слева и большая панель арены справа; на узких экранах панели складываются вертикально.

Левая панель:
- Заголовок главы: «ГЛАВА 1 · ПОРОГ», крупный заголовок «Тропа первых слов», описание «Изучи базовые каны, чтобы понимать приказы в бою и речь героев.»
- Под описанием горизонтальный прогресс-бар: в начале 22%, затем увеличивается на 22 процентных пункта при каждом переходе между сюжетными сценами.
- Сюжетные сцены, сменяемые кнопкой «Продолжить»: 
  1) «Шёпот у ворот», японский текст «こんにちは», romaji «konnichiwa», перевод «„Здравствуйте“ — первое слово странника.»;
  2) «Имя, которое звучит», «わたしは アキラです», «watashi wa Akira desu», перевод «„Я Акира“. Частица は читается как wa.»;
  3) «Враг из тумана», «たたかいましょう», «tatakaimashou», перевод «„Давайте сразимся“. Теперь слово становится приказом.»
- На первых двух сценах кнопка называется «Продолжить», на последней — «В бой». После нажатия на последней сцене начинается бой. Также есть кнопка «Сначала», перезапускающая игру.
- В десктопном виде добавь подсказку с золотой вертикальной линией: «💡 Правило: правильный ответ усиливает атаку. Ошибка не останавливает сюжет — она даёт подсказку.»

Правая панель — боевая сцена «Долина алых фонарей». В верхней строке справа отображай фазу: сначала «Твой ход · выбери клетку», во время языкового задания «Языковой приём · ответь», после победы «Победа · урок закреплён».

Арена: большая перспективная сетка 6 колонок × 4 ряда (24 квадратные клетки), визуально наклонённая в глубину через perspective и rotateX, с чередующимися сине-фиолетовыми оттенками клеток. В центре/на фиксированных клетках размести двух бойцов:
- Акира на клетке с индексом 8 (третий столбец, второй ряд), розово-коралловая округлая фигура с эмодзи меча «⚔», подписью «Акира» и зелёной полосой HP;
- Кицунэ на клетке с индексом 15 (четвёртый столбец, третий ряд), синяя округлая фигура с эмодзи «👹», подписью «Кицунэ» и красной полосой HP.
Начальные значения: у Акиры 78 HP, у Кицунэ 100 HP. Персонажи не перемещаются по сетке — выбор клетки используется только для выбора цели. Клик по клетке подсвечивает её золотой рамкой. Если выбрана клетка врага, в журнале появляется «Цель выбрана. Нажми „Кана-удар“, чтобы проверить слово.», и становится доступна кнопка атаки. При выборе другой клетки показывай «Выбери синюю клетку с Кицунэ.»

В нижней части арены размести тёмный полупрозрачный журнал боя. В начале: «Кана-удар готов. Выбери синюю клетку врага или изучи слово.» После начала боя: «Бой начался. Выбери клетку с Кицунэ.»

Под ареной — нижняя панель состояния. Слева карточка «⚔ Акира · странник» с розовым портретом и зелёным HP-баром, который отражает текущие 78 HP. Справа две кнопки действий:
- «Кана-удар», подпись «ответить · 1 AP»; она отключена, пока не выбран враг, и всегда отключается вне боевой фазы или после смерти врага;
- «Ожидать», подпись «передать ход».

Механика атаки:
1. Игрок выбирает клетку Кицунэ и нажимает «Кана-удар».
2. Открой модальное окно поверх арены с заголовком «Языковой приём · атака», текстом «Прочитай слово», крупным японским словом, подсказкой romaji и четырьмя вариантами ответа в сетке 2×2.
3. Чередуй четыре задания по кругу, начиная с первого: 
   - «あ», подсказка «Прочитай: a · выбери значение», ответы: «а» (верный), «и» (подсказка: Это い), «у» (Это う), «э» (Это え);
   - «い», romaji i, ответы «и» (верный), «а» (Это あ), «о» (Это お), «у» (Это う);
   - «お», romaji o, ответы «о» (верный), «а» (Это あ), «э» (Это え), «и» (Это い);
   - «こんにちは», romaji konnichiwa, ответы «здравствуйте» (верный), «спасибо» (ありがとう), «до свидания» (さようなら), «меч» (けん).
   У каждого ответа показывай маленькую поясняющую строку: у правильного «✓ верный путь», у неправильного «подсказка: ...».
4. Первый вариант ответа всегда является правильным. При правильном ответе начисли 10 очков, уменьши HP Кицунэ на 34 (не ниже нуля), покажи зелёную обратную связь «Попадание! Слово стало частью твоей силы.» и в журнале «Кана-удар попал! Кицунэ потерял 34 HP.» При неправильном ответе уменьши HP Акиры на 8 (не ниже нуля), покажи красную обратную связь «Почти. Запомни подсказку и попробуй снова — ошибка тоже учит.» и журнал «Щит дрогнул. Кицунэ отвечает, но бой продолжается.»
5. После любого ответа покажи кнопку «Вернуться в бой». Закрытие модального окна возвращает к боевой фазе, если враг жив. После трёх правильных попаданий HP Кицунэ становится 0, враг исчезает с арены, фаза меняется на «Победа · урок закреплён», а журнал показывает «勝った！ Katta! Победа. Ты выучил новое слово через бой.»
6. Кнопка «Ожидать» во время боя не открывает урок, а сразу наносит Акире 4 урона и показывает журнал «Ты ждёшь. Кицунэ наносит 4 урона. Внимательность — тоже навык.»

Сделай модальное окно центрированным, с тёмно-синим градиентом, светлой рамкой и скруглениями; затемняй арену полупрозрачным слоем. Все кнопки должны иметь визуальные состояния hover/pressed/disabled. Сохрани читаемость на мобильных экранах: шапка ниже, боковая панель компактнее, арена занимает доступное пространство, сюжетная подсказка скрывается, действия становятся вертикальными в сюжете, а карточки ответов остаются удобной сеткой 2×2. Не добавляй механики, которых нет в описании: нет перемещения, анимационных атак, инвентаря, случайных врагов или дополнительных уровней.