Добавить две одиночные мини-игры: ./blocks и ./invaders

Тетрис- и Space Invaders-подобные аркады на чистом canvas/JS, без
мультиплеера и без сервера — в отличие от ./tanks это классические
одиночные игры. Названия сайта — generic (не «Тетрис»/«Space Invaders»),
та же логика, что и с переименованием ./battlecity в ./tanks: обе
франшизы — активно защищаемые товарные знаки (The Tetris Company,
Taito).

./blocks — 10x20 поле, 7 фигур, вращение с простым wall-kick, ускорение
по уровням, next-piece превью, hard drop.
./invaders — волны врагов, стрельба игрока и врагов, жизни, ускорение
с каждой волной.

Обе — клавиатура + сенсорные кнопки, RU/EN (не сбрасывает партию при
переключении языка — в отличие от бага, который чинили в ./tanks).
Кросс-ссылки между всеми тремя играми на каждой игровой странице,
подвал whoami обновлён списком всех трёх.

frontend/css/arcade.css

@@ -0,0 +1,206 @@
+/* --- общие стили для одиночных аркад (./blocks, ./invaders) --- */
+
+.arcade-crosslinks {
+  color: var(--color-silver);
+  font-size: 0.85rem;
+  margin: 0 0 1.5rem;
+}
+
+.arcade-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  margin: 1.5rem 0;
+}
+
+.arcade-canvas-slot {
+  position: relative;
+}
+
+.arcade-canvas-slot canvas {
+  border: var(--border);
+  background: var(--color-bg);
+  display: block;
+}
+
+.arcade-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.1rem;
+  padding-top: 0.5rem;
+  width: 200px;
+}
+
+.arcade-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.85rem;
+  color: var(--color-silver);
+  text-align: center;
+}
+
+.arcade-stats b {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.arcade-next-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.arcade-next-slot span {
+  color: var(--color-silver);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.arcade-next-slot canvas {
+  border: var(--border);
+  background: var(--color-bg-raised);
+}
+
+.arcade-controls__hint {
+  color: var(--color-silver);
+  font-size: 0.75rem;
+  text-align: center;
+  margin: 0;
+}
+
+.arcade-dpad {
+  display: grid;
+  grid-template-columns: repeat(3, 44px);
+  grid-template-rows: repeat(2, 44px);
+  gap: 4px;
+}
+
+.arcade-dpad button {
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-accent-dim);
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  font-size: 1.1rem;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+.arcade-dpad button:active {
+  background: var(--color-accent-dim);
+  color: var(--color-bg);
+}
+
+.arcade-dpad__up { grid-column: 2; grid-row: 1; }
+.arcade-dpad__left { grid-column: 1; grid-row: 2; }
+.arcade-dpad__right { grid-column: 3; grid-row: 2; }
+.arcade-dpad__down { grid-column: 2; grid-row: 2; }
+
+/* --- пара кнопок влево/вправо (./invaders — вертикаль не нужна) --- */
+.arcade-lr {
+  display: flex;
+  gap: 4px;
+}
+
+.arcade-lr button {
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-accent-dim);
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  font-size: 1.1rem;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+  width: 62px;
+  height: 44px;
+}
+
+.arcade-lr button:active {
+  background: var(--color-accent-dim);
+  color: var(--color-bg);
+}
+
+.arcade-action-btn {
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-accent);
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.6rem 1.2rem;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+  width: 100%;
+}
+
+.arcade-action-btn:active {
+  background: var(--color-accent);
+  color: var(--color-bg);
+}
+
+.arcade-result-overlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 14, 12, 0.92);
+  z-index: 5;
+  text-align: center;
+}
+
+.arcade-result {
+  padding: 2rem;
+  border: var(--border);
+  background: var(--color-bg-raised);
+}
+
+.arcade-result h2 {
+  font-size: 2.2rem;
+  margin: 0 0 0.75rem;
+  letter-spacing: 0.05em;
+  color: var(--color-accent);
+  text-shadow: 0 0 16px var(--color-accent-dim);
+}
+
+.arcade-result p {
+  color: var(--color-fg);
+  margin: 0 0 1.5rem;
+}
+
+.arcade-result__actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.arcade-result__actions button {
+  background: transparent;
+  border: 1px solid var(--color-accent-dim);
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  padding: 0.5rem 1.25rem;
+  cursor: pointer;
+}
+
+.arcade-result__actions button:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 6px var(--color-accent-dim);
+}
+
+@media (max-width: 640px) {
+  .arcade-layout {
+    flex-direction: column;
+  }
+
+  .arcade-controls {
+    width: 100%;
+    max-width: 260px;
+  }
+}

frontend/css/game.css

@@ -1,3 +1,9 @@
+.arcade-crosslinks {
+  color: var(--color-silver);
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+}
+
 .lobby-panel {
   border: var(--border);
   background: var(--color-bg-raised);