Add sturdy-slab image asset to the crafts directory

Makefile

@@ -0,0 +1,93 @@
+# ================================
+# Настройки
+# ================================
+COMPOSE=docker compose
+SERVICE=primoguard
+
+# Список команд
+.PHONY: help install dev build preview up down restart logs pull update ps shell clean prune tunnel
+
+# ================================
+# Помощь
+# ================================
+help:
+  @echo "Доступные команды:"
+  @echo "  make install   - установить npm зависимости"
+  @echo "  make dev       - локальный запуск Astro для разработки"
+  @echo "  make build     - продакшн сборка Astro"
+  @echo "  make preview   - предпросмотр продакшн сборки"
+  @echo "  make up        - поднять Docker контейнер"
+  @echo "  make down      - остановить Docker контейнер"
+  @echo "  make restart   - перезапустить Docker контейнер"
+  @echo "  make logs      - смотреть логи Docker"
+  @echo "  make pull      - обновить проект через git pull"
+  @echo "  make update    - обновить проект и перезапустить Docker"
+  @echo "  make ps        - список контейнеров"
+  @echo "  make shell     - зайти внутрь контейнера"
+  @echo "  make clean     - остановить контейнер"
+  @echo "  make prune     - очистить Docker мусор"
+  @echo "  make tunnel    - запустить Cloudflare Tunnel"
+
+# ================================
+# Локальная разработка
+# ================================
+install:
+  npm install
+
+dev:
+  npm run dev
+
+build:
+  npm run build
+
+preview:
+  npm run preview
+
+# ================================
+# Docker
+# ================================
+up:
+  $(COMPOSE) up -d --build
+
+down:
+  $(COMPOSE) down
+
+restart:
+  $(COMPOSE) down
+  $(COMPOSE) up -d --build
+
+logs:
+  $(COMPOSE) logs -f
+
+ps:
+  $(COMPOSE) ps
+
+shell:
+  docker exec -it $(SERVICE) sh
+
+# ================================
+# Git + Docker
+# ================================
+pull:
+  git pull
+
+update:
+  $(COMPOSE) down
+  git pull
+  $(COMPOSE) up -d --build
+  $(COMPOSE) logs -f
+
+# ================================
+# Очистка
+# ================================
+clean:
+  $(COMPOSE) down
+
+prune:
+  docker system prune -f
+
+# ================================
+# Публичный доступ
+# ================================
+tunnel:
+  cloudflared tunnel --url http://127.0.0.1:4321 --protocol http2 --edge-ip-version 4

astro.config.mjs

@@ -48,7 +48,6 @@ export default defineConfig({
           label: 'О сервере',
           items: [
             { label: 'Главная', link: '/' },
-            { label: 'Сюжет', link: '/story/' },
             { label: 'Начало игры', link: '/getting-started/' }
           ]
         },
@@ -67,7 +66,6 @@ export default defineConfig({
             { label: 'Команды', link: '/commands/' },
             { label: 'Города', link: '/cities/' },
             { label: 'Крафты', link: '/crafting/' },
-            { label: 'SkinRestore', link: '/skinrestore/' },
             {
               label: 'Алкоголь',
               items: [

docker-compose.yml

@@ -1,11 +1,15 @@
-name: parabox-wiki
-
 services:
   wiki:
     build:
       context: .
       dockerfile: Dockerfile
     container_name: parabox-wiki
-    ports:
+    #ports:
-      - "4321:80"
+      #- "4321:80"
     restart: unless-stopped
+    networks:
+      - proxy
+
+networks:
+  proxy:
+    external: true

src/components/WikiHeader.astro

@@ -331,6 +331,101 @@ const topLinks = [
     });
   };
 
+  const normalizeCraftSearch = (value) =>
+    stripDecorativeSymbols(value)
+      .toLowerCase()
+      .replace(/ё/g, 'е')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+  const bindCraftCatalogFilters = () => {
+    const catalogNodes = document.querySelectorAll('[data-craft-catalog]');
+
+    catalogNodes.forEach((catalogNode) => {
+      if (!(catalogNode instanceof HTMLElement)) return;
+      if (catalogNode.dataset.craftBound === 'true') return;
+      catalogNode.dataset.craftBound = 'true';
+
+      const searchInput = catalogNode.querySelector('[data-craft-search]');
+      const filterButtons = Array.from(catalogNode.querySelectorAll('[data-craft-filter]')).filter(
+        (node) => node instanceof HTMLButtonElement
+      );
+      const groupNodes = Array.from(catalogNode.querySelectorAll('[data-craft-group]')).filter(
+        (node) => node instanceof HTMLElement
+      );
+      const emptyState = catalogNode.querySelector('[data-craft-empty]');
+
+      let activeFilter = 'all';
+      const activeButton = filterButtons.find(
+        (buttonNode) =>
+          buttonNode.classList.contains('is-active') ||
+          buttonNode.getAttribute('aria-pressed') === 'true'
+      );
+
+      if (activeButton?.dataset.craftFilter) {
+        activeFilter = activeButton.dataset.craftFilter;
+      }
+
+      const applyFilters = () => {
+        const searchQuery =
+          searchInput instanceof HTMLInputElement ? normalizeCraftSearch(searchInput.value) : '';
+
+        filterButtons.forEach((buttonNode) => {
+          const isActive = (buttonNode.dataset.craftFilter || 'all') === activeFilter;
+          buttonNode.classList.toggle('is-active', isActive);
+          buttonNode.setAttribute('aria-pressed', String(isActive));
+        });
+
+        let visibleCount = 0;
+
+        groupNodes.forEach((groupNode) => {
+          const defaultCategory = groupNode.dataset.craftCategory || '';
+          const itemNodes = Array.from(groupNode.querySelectorAll('[data-craft-item]')).filter(
+            (node) => node instanceof HTMLElement
+          );
+
+          let groupVisibleCount = 0;
+
+          itemNodes.forEach((itemNode) => {
+            const itemCategory = itemNode.dataset.craftCategory || defaultCategory;
+            const itemName =
+              itemNode.dataset.craftName || itemNode.querySelector('h3')?.textContent || '';
+            const normalizedName = normalizeCraftSearch(itemName);
+            const matchesCategory = activeFilter === 'all' || itemCategory === activeFilter;
+            const matchesSearch = !searchQuery || normalizedName.includes(searchQuery);
+            const isVisible = matchesCategory && matchesSearch;
+
+            itemNode.hidden = !isVisible;
+            if (isVisible) groupVisibleCount += 1;
+          });
+
+          groupNode.hidden = groupVisibleCount === 0;
+          visibleCount += groupVisibleCount;
+        });
+
+        if (emptyState instanceof HTMLElement) {
+          emptyState.hidden = visibleCount > 0;
+        }
+      };
+
+      filterButtons.forEach((buttonNode) => {
+        buttonNode.addEventListener('click', () => {
+          const nextFilter = buttonNode.dataset.craftFilter || 'all';
+          if (nextFilter === activeFilter) return;
+          activeFilter = nextFilter;
+          applyFilters();
+        });
+      });
+
+      if (searchInput instanceof HTMLInputElement) {
+        searchInput.addEventListener('input', applyFilters);
+        searchInput.addEventListener('search', applyFilters);
+      }
+
+      applyFilters();
+    });
+  };
+
   const enhanceSidebarGroupLinks = () => {
     const targets = [{ label: 'Алкоголь', href: '/alcohol/' }];
     const labelNodes = document.querySelectorAll('.sidebar-content details > summary .group-label .large');
@@ -407,6 +502,7 @@ const topLinks = [
     decorateSectionIcons();
     annotateLinkDestinations();
     bindCopyIpChips();
+    bindCraftCatalogFilters();
     setReadProgress();
     window.addEventListener('scroll', setReadProgress, { passive: true });
     window.addEventListener('resize', setReadProgress);
@@ -425,6 +521,7 @@ const topLinks = [
     decorateSectionIcons();
     annotateLinkDestinations();
     bindCopyIpChips();
+    bindCraftCatalogFilters();
     setReadProgress();
   });
 </script>

src/content/docs/about-server.md

@@ -13,14 +13,6 @@ description: "Концепция мира, формат сервера и осн
 - Выживание с RPG-элементами
 - Упор на исследование и кооператив
 
-## Лор в двух словах
-
-После Раскола Неба мир разделился на слои. Игроки находят обломки карт, восстанавливают порталы и открывают утраченные ремёсла.
-
-:::caution
-Некоторые сюжетные зоны открываются только после выполнения цепочки квестов.
-:::
-
 ## Техническая база
 
 | Параметр | Значение |

src/content/docs/commands.md

@@ -30,6 +30,16 @@ description: "Справочник игровых команд: чат, личн
 - `/coin` - подбросить монетку.
 - `/dice` - бросить кубик.
 
+### Кастомные пластинки
+
+- `/disc burn <url> [name]` - создать кастомную пластинку из аудио по URL.
+- `/disc erase` - вернуть кастомную пластинку к обычному виду.
+- `/disc search <query>` - найти треки на YouTube.
+
+:::note
+Для `/disc burn` нужно держать музыкальную пластинку в руке.
+:::
+
 ### RP и взаимодействие
 
 - `/do <действие>` - RP-описание действия от третьего лица.
@@ -39,11 +49,33 @@ description: "Справочник игровых команд: чат, личн
 ### Статус игрока
 
 - `/afk` - включить или выключить режим AFK.
+- `/crawl` - позволяет игроку ползти.
+- `/sit` - позволяет игроку сидеть.
+- `/lay` - позволяет игроку лечь.
+
+### ImageFrame (изображения на картах)
+
+- `/imageframe select` - выбрать рамки, в которые будет поставлено изображение.
+- `/imageframe create <name> <url> <width> <height>` - создать новое изображение на картах.
+- `/imageframe create <name> <url> selection` - создать изображение и сразу разместить его в выбранных рамках.
+- `/imageframe get <name>` - получить ранее созданное вами изображение.
+- `/imageframe get <name> selection` - поставить ранее созданное изображение сразу в выбранные рамки.
+- `/imageframe list` - показать список ваших созданных изображений.
+- `/imageframe info` - показать информацию об изображении, которое вы держите в руке.
+- `/imageframe refresh [image_name] [new_url]` - обновить изображение из источника (при необходимости с новой ссылкой).
+- `/imageframe rename <name> <new_name>` - переименовать ваше изображение.
+- `/imageframe delete <name>` - удалить ваше изображение.
+
+:::note
+Для `/imageframe create` используйте прямую ссылку на изображение.  
+`<width>` и `<height>` - это размер в картах (например `2 2` для сетки 2x2).
+:::
 
 ### Информация
 
 - `/ping` - узнать задержку (пинг).
 - `/toponline` - посмотреть топ игроков по наигранному времени.
+- `/breweryx info` - показать уровень опьянения.
 
 ### Символы
 

src/content/docs/crafting.md

@@ -1,18 +1,155 @@
----
+---
 title: "Крафты"
 description: "Раздел по кастомным крафтам сервера PARABOX."
 ---
 
-## Статус раздела
+## Каталог крафтов
 
-Раздел в подготовке. Здесь будет полная база кастомных крафтов.
+<div class="craft-catalog" data-craft-catalog>
+  <div class="craft-controls">
+    <label class="craft-search-field" for="craft-search-input">
+      <span>Поиск по названию</span>
+      <input
+        id="craft-search-input"
+        class="craft-search-input"
+        type="search"
+        placeholder="Например, наковальня или книга"
+        data-craft-search
+      />
+    </label>
+    <div class="craft-filter-group" role="group" aria-label="Фильтр крафтов по категориям">
+      <button type="button" class="craft-filter-chip is-active" data-craft-filter="all" aria-pressed="true">Все</button>
+      <button type="button" class="craft-filter-chip" data-craft-filter="special" aria-pressed="false">Спец-предметы</button>
+      <button type="button" class="craft-filter-chip" data-craft-filter="blocks" aria-pressed="false">Блоки и станции</button>
+      <button type="button" class="craft-filter-chip" data-craft-filter="smelting" aria-pressed="false">Переработка</button>
+    </div>
+  </div>
 
-## Что появится
+  <p class="craft-empty" data-craft-empty hidden>По вашему запросу крафты не найдены.</p>
 
-- рецепты основных предметов сервера;
+  <section class="craft-group" data-craft-group data-craft-category="special">
-- ограничения по доступу к крафтам;
+    <h3>Спец-предметы</h3>
-- примеры прогрессии по этапам игры.
+    <div class="craft-grid">
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="невидимая рамка">
+        <h3>Невидимая рамка</h3>
+        <img class="craft-card-image" src="/crafts/invisible-item-frame.png" alt="Рецепт невидимой рамки" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="невидимая светящаяся рамка">
+        <h3>Невидимая светящаяся рамка</h3>
+        <img class="craft-card-image" src="/crafts/invisible-glow-item-frame.png" alt="Рецепт невидимой светящейся рамки" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="невидимый свет">
+        <h3>Невидимый свет</h3>
+        <img class="craft-card-image" src="/crafts/invisible-light.png" alt="Рецепт невидимого света" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="чародейская книга">
+        <h3>Чародейская книга</h3>
+        <img class="craft-card-image" src="/crafts/enchanted-book.png" alt="Рецепт чародейской книги" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="книга знаний">
+        <h3>Книга знаний</h3>
+        <img class="craft-card-image" src="/crafts/knowledge-book.png" alt="Рецепт книги знаний" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="дыхание дракона">
+        <h3>Дыхание дракона</h3>
+        <img class="craft-card-image" src="/crafts/dragons-breath.png" alt="Рецепт дыхания дракона" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="светящиеся чернила">
+        <h3>Светящиеся чернила</h3>
+        <img class="craft-card-image" src="/crafts/glow-ink-sac.png" alt="Рецепт светящихся чернил" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="мембрана фантома">
+        <h3>Мембрана фантома</h3>
+        <img class="craft-card-image" src="/crafts/phantom-membrane.png" alt="Рецепт мембраны фантома" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="бирка">
+        <h3>Бирка</h3>
+        <img class="craft-card-image" src="/crafts/name-tag.png" alt="Рецепт бирки" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="special" data-craft-name="мешок">
+        <h3>Мешок</h3>
+        <img class="craft-card-image" src="/crafts/bundle.png" alt="Рецепт мешка" loading="lazy" />
+      </article>
+    </div>
+  </section>
 
-:::note
+  <section class="craft-group" data-craft-group data-craft-category="blocks">
-Если нужен конкретный рецепт раньше, уточните его у администрации или в профильном канале.
+    <h3>Блоки и рабочие станции</h3>
-:::
+    <div class="craft-grid">
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="стол лучника">
+        <h3>Стол лучника</h3>
+        <img class="craft-card-image" src="/crafts/fletching-table.png" alt="Рецепт стола лучника" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="стол картографа">
+        <h3>Стол картографа</h3>
+        <img class="craft-card-image" src="/crafts/cartography-table.png" alt="Рецепт стола картографа" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="ткацкий станок">
+        <h3>Ткацкий станок</h3>
+        <img class="craft-card-image" src="/crafts/loom.png" alt="Рецепт ткацкого станка" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="нотный блок">
+        <h3>Нотный блок</h3>
+        <img class="craft-card-image" src="/crafts/note-block.png" alt="Рецепт нотного блока" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="проигрыватель">
+        <h3>Проигрыватель</h3>
+        <img class="craft-card-image" src="/crafts/jukebox.png" alt="Рецепт проигрывателя" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="раздатчик">
+        <h3>Раздатчик</h3>
+        <img class="craft-card-image" src="/crafts/dispenser.png" alt="Рецепт раздатчика" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="колокол">
+        <h3>Колокол</h3>
+        <img class="craft-card-image" src="/crafts/bell.png" alt="Рецепт колокола" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="обтесанное бревно">
+        <h3>Обтесанное бревно</h3>
+        <img class="craft-card-image" src="/crafts/stripped-log-stonecutter.png" alt="Рецепт обтесанного бревна в камнерезе" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="прочный полублок">
+        <h3>Прочный полублок</h3>
+        <img class="craft-card-image" src="/crafts/sturdy-slab.png" alt="Рецепт прочного полублока" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="наковальня вариант 1">
+        <h3>Наковальня (вариант 1)</h3>
+        <img class="craft-card-image" src="/crafts/anvil-variant-base.png" alt="Первый вариант рецепта наковальни" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="blocks" data-craft-name="наковальня вариант 2">
+        <h3>Наковальня (вариант 2)</h3>
+        <img class="craft-card-image" src="/crafts/anvil-variant-l.png" alt="Второй вариант рецепта наковальни" loading="lazy" />
+      </article>
+    </div>
+  </section>
+
+  <section class="craft-group" data-craft-group data-craft-category="smelting">
+    <h3>Переработка и конверсия</h3>
+    <div class="craft-grid">
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="компас из компаса восстановления">
+        <h3>Компас из компаса восстановления</h3>
+        <img class="craft-card-image" src="/crafts/recovery-compass-to-compass-smelting.png" alt="Переплавка компаса восстановления в обычный компас" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="железный слиток из компаса">
+        <h3>Железный слиток из компаса</h3>
+        <img class="craft-card-image" src="/crafts/compass-to-iron-ingot-smelting.png" alt="Переплавка компаса в железный слиток" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="золотой слиток из часов">
+        <h3>Золотой слиток из часов</h3>
+        <img class="craft-card-image" src="/crafts/clock-to-gold-ingot-smelting.png" alt="Переплавка часов в золотой слиток" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="красное стекло">
+        <h3>Красное стекло</h3>
+        <img class="craft-card-image" src="/crafts/red-glass-smelting.png" alt="Переплавка в красное стекло" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="алмазная руда вариант 1">
+        <h3>Алмазная руда (вариант 1)</h3>
+        <img class="craft-card-image" src="/crafts/diamond-ore-variant-k.png" alt="Первый вариант рецепта алмазной руды" loading="lazy" />
+      </article>
+      <article class="lore-card craft-card" data-craft-item data-craft-category="smelting" data-craft-name="алмазная руда вариант 2">
+        <h3>Алмазная руда (вариант 2)</h3>
+        <img class="craft-card-image" src="/crafts/diamond-ore-variant-s.png" alt="Второй вариант рецепта алмазной руды" loading="lazy" />
+      </article>
+    </div>
+  </section>
+</div>

src/content/docs/general.md

@@ -15,9 +15,6 @@ description: "Общая информация и веб-карта сервер
   <a class="map-cta-button" href="https://map.rpcm.su/#world:0:0:0:1500:0:0:0:0:perspective" target="_blank" rel="noopener noreferrer">
     Открыть веб-карту
   </a>
-  <a class="map-ghost-button" href="/cities/">
-    Как использовать карту для городов
-  </a>
 </div>
 
 ---
@@ -36,3 +33,27 @@ description: "Общая информация и веб-карта сервер
 1. Загрузите скин файлом на сайт: [SkinRestorer](https://skinsrestorer.net/upload)
 2. Нажмите кнопку `GENERATE` и скопируйте полученную команду.
 3. Введите команду в чате Minecraft.
+
+---
+
+## ImageForm (бета): гайд
+
+`ImageForm` позволяет делать map-art автоматически по ссылке на изображение, без ручной постройки пиксель-арт схем.
+
+### Как использовать
+
+1. Подготовьте прямую ссылку на картинку (форматы `png`/`jpg`/`webp`).
+2. Зайдите на сервер и вызовите инструмент ImageForm (команда/интерфейс, доступный на вашей роли).
+3. Вставьте ссылку на изображение и подтвердите создание.
+4. Выберите размер и формат карты (если сервер предложит параметры).
+5. Дождитесь генерации и заберите готовый результат.
+
+### Советы по качеству
+
+- используйте изображения с хорошим контрастом и без мелкого текста;
+- лучше всего подходят квадратные или близкие к квадрату картинки;
+- при необходимости уменьшите изображение заранее, чтобы карта читалась лучше.
+
+:::note
+ImageForm работает в бета-режиме: отдельные параметры или ограничения могут меняться в следующих патчах.
+:::

src/content/docs/getting-started.md

@@ -20,10 +20,3 @@ description: "Как подать заявку на сервер PARABOX и чт
 1. Как к вам обращаться (имя или псевдоним).
 2. Ваш никнейм для привязки к серверу.
 3. От какого проекта вы пришли, или откуда узнали о сервере.
-
-## После одобрения
-
-1. Подключитесь по адресу `mc.rpcm.su`.
-2. Пройдите регистрацию в игре.
-3. Выберите город для вступления или создайте свой.
-4. Ознакомьтесь с правилами и базовыми механиками.

src/styles/wiki-egames.css

@@ -728,6 +728,159 @@ starlight-theme-select .caret {
   margin-bottom: 0.45rem;
 }
 
+.craft-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-auto-rows: 1fr;
+  margin: 1rem 0 1.3rem;
+}
+
+.craft-grid > .craft-card {
+  margin-top: 0;
+}
+
+.craft-catalog {
+  margin-top: 0.95rem;
+}
+
+.craft-controls {
+  display: grid;
+  gap: 0.72rem;
+  margin: 0 0 1rem;
+}
+
+.craft-search-field {
+  display: grid;
+  gap: 0.36rem;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: color-mix(in srgb, var(--wiki-text) 92%, var(--sl-color-white));
+}
+
+.craft-search-input {
+  width: 100%;
+  min-height: 2.42rem;
+  border-radius: 0.18rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 82%, transparent);
+  background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
+  color: var(--wiki-text);
+  padding: 0.5rem 0.68rem;
+  font: inherit;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.craft-search-input::placeholder {
+  color: color-mix(in srgb, var(--wiki-muted) 78%, var(--sl-color-white));
+}
+
+.craft-search-input:focus-visible {
+  outline: none;
+  border-color: color-mix(in srgb, var(--sl-color-accent) 68%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 30%, transparent),
+    0 0 0 4px color-mix(in srgb, var(--sl-color-accent) 18%, transparent);
+}
+
+.craft-filter-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.48rem;
+}
+
+.craft-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.1rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 85%, transparent);
+  background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
+  color: color-mix(in srgb, var(--wiki-text) 92%, var(--sl-color-white));
+  padding: 0.4rem 0.82rem;
+  font-family: 'Sora', sans-serif;
+  font-weight: 600;
+  font-size: 0.84rem;
+  letter-spacing: 0.008em;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    background 150ms ease,
+    color 150ms ease;
+}
+
+.craft-filter-chip:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--sl-color-accent) 42%, transparent);
+}
+
+.craft-filter-chip.is-active {
+  border-color: color-mix(in srgb, var(--sl-color-accent) 56%, transparent);
+  background: linear-gradient(
+    120deg,
+    color-mix(in srgb, var(--wiki-blue-2) 74%, #233145),
+    color-mix(in srgb, var(--wiki-purple-2) 64%, #273850)
+  );
+  color: #f7fbff;
+}
+
+.craft-empty {
+  margin: 0.18rem 0 1.02rem;
+  border: 1px dashed color-mix(in srgb, var(--sl-color-accent) 34%, transparent);
+  border-radius: 0.16rem;
+  background: color-mix(in srgb, var(--sl-color-accent-low) 66%, transparent);
+  padding: 0.62rem 0.74rem;
+  font-size: 0.93rem;
+}
+
+.craft-group {
+  margin-bottom: 1.15rem;
+}
+
+.craft-group > h3 {
+  margin-bottom: 0.58rem;
+}
+
+.craft-card {
+  padding: 0.82rem 0.86rem;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.craft-card:hover {
+  transform: none;
+}
+
+.craft-card h3 {
+  margin: 0 0 0.6rem;
+  font-size: 1rem;
+  line-height: 1.35;
+  min-height: calc(1.35em * 2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.craft-card-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 346 / 167;
+  object-fit: cover;
+  border-radius: 0.18rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  background: color-mix(in srgb, #ffffff 18%, transparent);
+  box-shadow: var(--sl-shadow-sm);
+  image-rendering: pixelated;
+}
+
+.craft-card[hidden],
+.craft-group[hidden] {
+  display: none !important;
+}
+
 .alcohol-nav-card {
   display: block;
   color: inherit;