Бейгл — Фэнтезийный Интерфейс

Бейгл

Навыки

Огненный шар
Ледяная стрела
Щит
Исцеление

Навыки босса

Грозовой удар
Призыв миньонов
Ядовитое облако

Локации

Темный лес
Затерянные руины
Кристальная пещера

Инвентарь

Меч героя

Щит стража

Шлем мудреца

Сапоги скорости

Магазин

Зелье здоровья

Кольцо силы

Свиток магии

body { margin: 0; font-family: 'Segoe UI', 'Arial', sans-serif; color: #f3e9d2; background: #1a1a2e; min-height: 100vh; position: relative; overflow-x: hidden; } .fantasy-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%); background-image: url('assets/fantasy-bg.jpg'); background-size: cover; background-position: center; opacity: 0.35; pointer-events: none; } .split-container { display: flex; flex-direction: row; height: calc(100vh - 120px); position: relative; z-index: 1; } .left-panel, .right-panel { flex: 1 1 0; padding: 32px 24px 16px 24px; background: rgba(34, 34, 51, 0.85); box-sizing: border-box; overflow-y: auto; min-width: 0; } .left-panel { border-right: 2px solid #3a3a5a; } header h1 { font-size: 2.2em; margin: 0 0 24px 0; letter-spacing: 2px; color: #ffe066; text-shadow: 0 2px 8px #000; } section { margin-bottom: 32px; } h2 { font-size: 1.3em; margin-bottom: 12px; color: #f7b801; text-shadow: 0 1px 4px #222; } ul { list-style: none; padding: 0; margin: 0; } ul li { margin-bottom: 8px; font-size: 1.1em; padding-left: 8px; } .equipment-list { display: flex; flex-wrap: wrap; gap: 16px; } .equipment-item { display: flex; flex-direction: column; align-items: center; background: rgba(60, 60, 90, 0.7); border-radius: 10px; padding: 12px 10px; width: 90px; box-shadow: 0 2px 8px #0004; } .equipment-item img { width: 48px; height: 48px; margin-bottom: 6px; } .shop-items { display: flex; gap: 18px; flex-wrap: wrap; } .shop-item { display: flex; flex-direction: column; align-items: center; background: rgba(80, 60, 40, 0.7); border-radius: 10px; padding: 12px 10px; width: 100px; box-shadow: 0 2px 8px #0004; } .shop-item img { width: 40px; height: 40px; margin-bottom: 6px; } .shop-item button { margin-top: 8px; background: #ffe066; color: #222; border: none; border-radius: 6px; padding: 6px 12px; font-weight: bold; cursor: pointer; transition: background 0.2s; } .shop-item button:hover { background: #f7b801; } .bottom-interface { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(30, 30, 50, 0.95); padding: 16px 0 8px 0; box-shadow: 0 -2px 12px #0008; display: flex; justify-content: center; } .touch-controls { display: flex; gap: 18px; align-items: center; } .touch-btn { background: #f7b801; color: #222; border: none; border-radius: 8px; padding: 10px 18px; font-size: 1.1em; font-weight: bold; box-shadow: 0 2px 6px #0003; cursor: pointer; transition: background 0.2s, transform 0.1s; } .touch-btn:active { background: #ffe066; transform: scale(0.96); } @media (max-width: 900px) { .split-container { flex-direction: column; height: auto; } .left-panel, .right-panel { border-right: none; border-bottom: 2px solid #3a3a5a; min-height: 220px; } } @media (max-width: 600px) { .equipment-list, .shop-items { flex-direction: column; gap: 10px; } .equipment-item, .shop-item { width: 100%; } .left-panel, .right-panel { padding: 16px 8px; } .bottom-interface { padding: 8px 0 4px 0; } .touch-btn { padding: 8px 10px; font-size: 1em; } }