Files
grimhold/app/templates/index.html
T

1043 lines
60 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Mythic Depths — High Fantasy Mystery Dungeon</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-void: #09080e;
--stone-border: #4a3f66;
}
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
body {
background-color: var(--bg-void);
background-image: radial-gradient(circle at 50% 15%, #1f1933 0%, #09080e 75%);
color: #f1f5f9;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
font-family: 'Inter', sans-serif;
overflow: hidden;
height: 100dvh;
width: 100vw;
margin: 0;
}
.font-cinzel { font-family: 'Cinzel', serif; }
.fantasy-card {
background: linear-gradient(180deg, rgba(26, 21, 40, 0.97) 0%, rgba(14, 11, 22, 0.99) 100%);
border: 1px solid var(--stone-border);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
}
.fantasy-btn {
background: linear-gradient(180deg, #372e50 0%, #201a30 100%);
border: 1px solid #574877;
color: #f8fafc;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition: all 0.1s ease;
}
.fantasy-btn:hover {
background: linear-gradient(180deg, #483c69 0%, #2a2240 100%);
border-color: #816aa8;
}
.fantasy-btn:active {
transform: scale(0.96);
}
.gold-btn {
background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
border: 1px solid #fcd34d;
color: #1e1302;
font-weight: 700;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: all 0.1s ease;
}
.gold-btn:active {
transform: scale(0.96);
}
.emerald-btn {
background: linear-gradient(180deg, #10b981 0%, #047857 100%);
border: 1px solid #6ee7b7;
color: #022c22;
font-weight: 700;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
transition: all 0.1s ease;
}
.emerald-btn:active {
transform: scale(0.96);
}
/* Rarity Borders */
.rarity-common { border-color: #57534e; }
.rarity-rare { border-color: #38bdf8; box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.16); }
.rarity-epic { border-color: #c084fc; box-shadow: inset 0 0 10px rgba(192, 132, 252, 0.22); }
.rarity-legendary { border-color: #fbbf24; box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.28); }
.custom-scroll::-webkit-scrollbar { width: 5px; height: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(15, 13, 23, 0.5); }
.custom-scroll::-webkit-scrollbar-thumb { background: #4a3f66; border-radius: 4px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#dungeon-canvas {
display: block;
touch-action: none;
}
.glass-panel {
background: rgba(16, 13, 25, 0.92);
backdrop-filter: blur(8px);
border-color: rgba(87, 72, 119, 0.45);
}
/* Mobile D-Pad touch buttons */
.dpad-btn {
background: rgba(34, 28, 52, 0.88);
border: 1.5px solid rgba(139, 116, 184, 0.65);
color: #f8fafc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
touch-action: none;
}
.dpad-btn:active {
background: rgba(245, 158, 11, 0.85);
color: #1c1302;
transform: scale(0.92);
}
</style>
</head>
<body class="flex flex-col h-[100dvh] overflow-hidden">
<!-- ================= TOP HEADER: TITLE, MENU BUTTONS & LIVE RESOURCE BAR ================= -->
<header class="glass-panel z-20 border-b border-stone-800 shrink-0 flex flex-col">
<!-- Row 1: Floor Info & Action Menu Buttons -->
<div class="px-2 sm:px-4 py-1 flex items-center justify-between gap-1">
<!-- Left: Title & Floor -->
<div class="flex items-center space-x-1.5 sm:space-x-2.5 min-w-0">
<span class="text-lg sm:text-xl shrink-0">🏰</span>
<div class="min-w-0">
<div class="flex items-center space-x-1.5">
<span class="font-cinzel font-bold text-xs sm:text-sm text-amber-400 tracking-wider hidden sm:inline">MYTHIC DEPTHS</span>
<span id="hud-floor-badge" class="px-1.5 py-0.5 rounded bg-amber-950 text-amber-300 font-bold border border-amber-700/60 font-mono text-[10px] sm:text-xs">Ebene 1/10</span>
<span id="hud-zone-name" class="text-stone-300 text-[11px] sm:text-xs font-medium truncate max-w-[100px] sm:max-w-none">Goblin-Minen</span>
<span id="hud-save-badge" class="text-[9px] text-emerald-400 font-mono hidden sm:inline opacity-80" title="Spielstand wird automatisch gespeichert">💾 Gespeichert</span>
</div>
</div>
</div>
<!-- Right: Main Menu Controls (Clean, Uncluttered & Expandable) -->
<div class="flex items-center space-x-1 sm:space-x-1.5 shrink-0">
<!-- Town / Dungeon Toggle -->
<button onclick="toggleTownOrDungeon()" id="btn-town-toggle" class="gold-btn px-2 sm:px-2.5 py-1 rounded-lg text-xs font-semibold flex items-center space-x-1" title="Zwischen Stadt Grimhold und Dungeon wechseln">
<span id="icon-town-toggle">🏘️</span>
<span id="label-town-toggle" class="hidden sm:inline">Stadt</span>
</button>
<!-- Character & Bag (with level-up / unspent points indicator ⭐) -->
<button onclick="openInventoryModal()" class="fantasy-btn px-2 sm:px-2.5 py-1 rounded-lg text-xs font-semibold flex items-center space-x-1 relative" title="Charakter & Inventar [I]">
<span>🎒</span>
<span class="hidden md:inline">Held</span>
<span id="hud-bag-count" class="text-[10px] font-mono text-amber-300">1</span>
<span id="hud-stat-points-alert" class="hidden absolute -top-1 -right-1 px-1 text-[9px] bg-amber-400 text-black font-bold rounded-full animate-pulse" title="Freie Attributspunkte verfügbar!">⭐</span>
</button>
<!-- Desktop Quick Links (Hidden on mobile to keep header clean) -->
<button onclick="openCraftingModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden md:inline-flex items-center space-x-1 border-emerald-600/60" title="Handwerk & Alchemie [C]">
<span>⚒️</span>
<span class="hidden lg:inline">Handwerk</span>
</button>
<button onclick="openShortcutsModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden sm:inline-flex items-center" title="Shortcuts & Tasten frei belegen">
<span>⌨️</span>
</button>
<button onclick="openChatModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden sm:inline-flex items-center space-x-1 border-cyan-500/50" title="Multiplayer Live-Chat">
<span>💬</span>
<span id="online-count-badge" class="px-1 rounded-full bg-cyan-900/90 text-cyan-200 text-[9px] font-mono">1</span>
</button>
<!-- The Universal Expandable Hamburger Menu (One-click access to everything on mobile & desktop!) -->
<button onclick="openTopMenuModal()" id="btn-hamburger-menu" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold border-amber-500/60 flex items-center space-x-1.5 hover:border-amber-400" title="Hauptmenü, Laufkreuz & Einstellungen">
<span class="text-sm">☰</span>
<span class="text-amber-300 font-cinzel text-xs">Menü</span>
</button>
</div>
</div>
<!-- Row 2: Always-Visible Live Resources & Crafting Materials Strip -->
<div class="px-2 sm:px-4 py-1 bg-stone-950/90 border-t border-stone-800/80 flex items-center space-x-1.5 sm:space-x-2.5 overflow-x-auto no-scrollbar text-[11px] font-mono">
<!-- Core Currencies -->
<div class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900 border border-stone-800 shrink-0" title="Goldmünzen">
<span>💰</span>
<span class="text-stone-400 hidden sm:inline text-[10px]">Gold:</span>
<span id="hud-gold" class="font-bold text-amber-300">0</span>
</div>
<div class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900 border border-stone-800 shrink-0" title="Pfeile & Munition für Fernkampf">
<span>🏹</span>
<span class="text-stone-400 hidden sm:inline text-[10px]">Pfeile:</span>
<span id="hud-arrows" class="font-bold text-emerald-300">0</span>
</div>
<span class="text-stone-700">|</span>
<!-- All 8 Crafting Materials Directly Visible in Header! -->
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Eisenerz (Klicken für Schmiede)">
<span>🪨</span>
<span class="text-stone-400 text-[10px]">Erz:</span>
<span id="mat-iron_ore" class="font-bold text-stone-200">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Eschenholz (Klicken für Schmiede)">
<span>🪵</span>
<span class="text-stone-400 text-[10px]">Holz:</span>
<span id="mat-wood_branch" class="font-bold text-amber-200">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Blutkraut (Alchemie)">
<span>🌿</span>
<span class="text-stone-400 text-[10px]">Kraut:</span>
<span id="mat-healing_herb" class="font-bold text-emerald-300">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Mana-Splitter">
<span>💎</span>
<span class="text-stone-400 text-[10px]">Kristall:</span>
<span id="mat-mana_shard" class="font-bold text-cyan-300">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Spinnenseide">
<span>🕸️</span>
<span class="text-stone-400 text-[10px]">Seide:</span>
<span id="mat-spider_silk" class="font-bold text-purple-300">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Monsterknochen">
<span>🦴</span>
<span class="text-stone-400 text-[10px]">Knochen:</span>
<span id="mat-monster_bone" class="font-bold text-stone-300">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Feueressenz">
<span>🔥</span>
<span class="text-stone-400 text-[10px]">Essenz:</span>
<span id="mat-fire_essence" class="font-bold text-orange-400">0</span>
</div>
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Mythril-Barren">
<span>🔷</span>
<span class="text-stone-400 text-[10px]">Mythril:</span>
<span id="mat-mythril_ingot" class="font-bold text-sky-400">0</span>
</div>
</div>
</header>
<!-- ================= MAIN CENTERPIECE: CANVAS VIEWPORT ================= -->
<main class="relative flex-1 min-h-0 w-full overflow-hidden flex items-center justify-center bg-black">
<!-- Game Canvas -->
<canvas id="dungeon-canvas" class="w-full h-full cursor-crosshair"></canvas>
<!-- Aiming Mode Indicator Banner -->
<div id="aim-mode-banner" class="hidden absolute top-10 left-1/2 -translate-x-1/2 z-20 bg-emerald-950/95 border border-emerald-400 px-3 py-1.5 rounded-xl text-xs font-semibold text-emerald-200 shadow-xl flex items-center space-x-2 max-w-[95%]">
<span class="text-base animate-pulse">🎯</span>
<span id="aim-mode-text" class="truncate">Ziel-Modus: Tippe auf Gegner oder Feuern!</span>
<button onclick="cycleAimTarget()" class="fantasy-btn px-2 py-0.5 rounded text-[10px] shrink-0">🔄 Ziel</button>
<button onclick="cancelAimMode()" class="px-2 py-0.5 rounded bg-rose-900 text-rose-200 text-[10px] shrink-0">✕</button>
</div>
<!-- Floor Transition Banner -->
<div id="floor-transition-banner" class="hidden absolute inset-0 z-30 bg-black/85 flex flex-col items-center justify-center pointer-events-none transition-opacity duration-300">
<div class="text-4xl sm:text-5xl mb-2 animate-bounce">🏰</div>
<h2 id="trans-floor-title" class="font-cinzel text-xl sm:text-2xl font-bold text-amber-400 mb-1">Ebene 1: Goblin-Minen</h2>
<p id="trans-floor-desc" class="text-xs sm:text-sm text-stone-300 italic px-4 text-center">Du steigst mit kaum mehr als deiner Waffe in die Dunkelheit hinab...</p>
</div>
<!-- Live Toast Combat Message Banner -->
<div id="combat-log-ticker" class="absolute top-2 left-1/2 -translate-x-1/2 z-10 glass-panel px-3 py-1 rounded-full text-[11px] sm:text-xs font-semibold text-stone-200 pointer-events-none max-w-[94%] sm:max-w-lg text-center shadow-lg transition-all opacity-0 border">
Willkommen in Mythic Depths.
</div>
<!-- Mini-Map Corner Overlay (Toggleable on mobile) -->
<div id="minimap-container" class="absolute top-2 right-2 z-10 glass-panel p-1 rounded-lg border border-stone-700/60 shadow-xl pointer-events-none opacity-85">
<canvas id="minimap-canvas" width="116" height="84" class="rounded bg-black/85 w-[88px] h-[64px] sm:w-[132px] sm:h-[94px]"></canvas>
</div>
<!-- ERGONOMIC MOBILE CONTROLS OVERLAY (Shown on touch / mobile screens, toggleable via settings) -->
<div id="mobile-controls-overlay" class="absolute bottom-2 left-2 z-20 pointer-events-none sm:hidden">
<!-- Left Thumb: Responsive 3x3 D-Pad (Toggleable in Menu / Settings) -->
<div id="mobile-dpad-container" class="grid grid-cols-3 gap-1.5 pointer-events-auto p-1.5 rounded-2xl bg-black/50 backdrop-blur-md border border-stone-700/80 shadow-2xl">
<div></div>
<button onpointerdown="handleTouchDpad(event, 0, -1)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▲</button>
<div></div>
<button onpointerdown="handleTouchDpad(event, -1, 0)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">◀</button>
<button onpointerdown="handleTouchWait(event)" class="gold-btn w-12 h-12 rounded-xl flex flex-col items-center justify-center text-xs font-bold leading-none">
<span>⏳</span>
<span class="text-[8px] mt-0.5">Rast</span>
</button>
<button onpointerdown="handleTouchDpad(event, 1, 0)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▶</button>
<div></div>
<button onpointerdown="handleTouchDpad(event, 0, 1)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▼</button>
<div></div>
</div>
</div>
</main>
<!-- ================= BOTTOM HUD: VITALITY & 6 EDITABLE QUICKSLOTS ================= -->
<footer class="glass-panel z-20 px-2 sm:px-4 py-1.5 border-t border-stone-800 shrink-0 flex flex-col items-center">
<!-- Health, Mana & XP Row -->
<div class="w-full max-w-4xl flex items-center justify-between gap-2 sm:gap-4 mb-1.5 text-xs">
<!-- HP -->
<div class="flex-1 flex flex-col justify-center">
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
<span class="font-cinzel font-bold text-rose-400">❤️ Leben</span>
<span class="font-mono font-bold text-stone-200" id="hud-hp-text">80 / 80</span>
</div>
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
<div id="hud-hp-bar" class="h-full bg-gradient-to-r from-red-700 via-rose-600 to-red-500 rounded-full transition-all duration-150" style="width: 100%"></div>
</div>
</div>
<!-- Mana -->
<div class="flex-1 flex flex-col justify-center">
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
<span class="font-cinzel font-bold text-cyan-400">🔮 Mana</span>
<span class="font-mono font-bold text-stone-200" id="hud-mp-text">25 / 25</span>
</div>
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
<div id="hud-mp-bar" class="h-full bg-gradient-to-r from-blue-700 via-cyan-600 to-cyan-400 rounded-full transition-all duration-150" style="width: 100%"></div>
</div>
</div>
<!-- XP & Level -->
<div class="flex-1 flex flex-col justify-center">
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
<span class="font-cinzel font-bold text-amber-400 truncate">
<span id="hud-hero-icon">⚔️</span> <span id="hud-hero-class">Klingensänger</span>
</span>
<span class="font-mono text-stone-300 text-[10px]" id="hud-xp-text">St. 1</span>
</div>
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
<div id="hud-xp-bar" class="h-full bg-gradient-to-r from-amber-600 to-yellow-400 rounded-full transition-all duration-150" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Action Bar: Arrow Indicator + 6 Quickslots + Desktop Action Buttons -->
<div class="w-full max-w-4xl flex items-center justify-between sm:justify-center gap-1 sm:gap-2">
<!-- Arrows Badge: Visible whether weapon is equipped or laid down! -->
<div id="hud-bar-weapon-badge" onclick="triggerRangedAttackOrAim()" class="px-2 py-1 rounded-xl bg-stone-900 border border-stone-800 flex items-center space-x-1.5 shrink-0 cursor-pointer hover:border-emerald-500/50" title="Fernkampf / Pfeile (Klicken zum Zielen)">
<span id="hud-bar-weapon-icon" class="text-sm">🏹</span>
<div class="leading-none text-left">
<div class="text-[8px] text-stone-400 font-mono uppercase">Pfeile</div>
<div id="hud-bar-arrows-val" class="text-xs font-mono font-bold text-emerald-400">0</div>
</div>
</div>
<div id="quickslots-bar" class="flex-1 grid grid-cols-6 gap-1 sm:gap-1.5">
<!-- Populated by renderQuickslotsBar() -->
</div>
<button onclick="triggerRangedAttackOrAim()" class="emerald-btn py-1.5 px-2.5 rounded-xl hidden sm:flex items-center space-x-1" title="Fernkampf / Ziel-Modus">
<span class="text-sm">🎯</span>
<div class="text-left leading-tight">
<div class="text-[9px] font-mono opacity-80" id="keybind-label-ranged">[F]</div>
<div class="text-[11px] font-cinzel font-bold">Fernkampf</div>
</div>
</button>
<button onclick="playerWaitTurn()" class="gold-btn py-1.5 px-2.5 rounded-xl hidden sm:flex items-center space-x-1" title="1 Runde rasten / Treppe nutzen">
<span class="text-sm">⏳</span>
<div class="text-left leading-tight">
<div class="text-[9px] font-mono opacity-80" id="keybind-label-wait">[Space]</div>
<div class="text-[11px] font-cinzel font-bold">Rasten</div>
</div>
</button>
</div>
</footer>
<!-- ================= MODAL 1: RPG CHARACTER VIEW & INVENTORY (8 SLOTS + RUCKSACK) ================= -->
<div id="modal-inventory" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-3xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
<!-- Header -->
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-xl">🛡️</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Held, Ausrüstung & Inventar</h2>
<p class="text-[11px] text-stone-300">Held oben, 8 Ausrüstungs-Slots und mitwachsender Beutel darunter.</p>
</div>
</div>
<div class="flex items-center space-x-1.5">
<button onclick="closeInventoryModal(); openCraftingModal();" class="emerald-btn px-2.5 py-1 rounded-lg text-xs">⚒️ Handwerk</button>
<button onclick="closeInventoryModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
</div>
<!-- Scrollable Body (Layout on Mobile & PC: Character Top -> Stats -> Skills -> 8 Equipment Slots -> Bag) -->
<div class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1">
<!-- 1. Top Character Avatar & Level Card -->
<div id="character-avatar-card">
<!-- Populated by updateInventoryUI() -->
</div>
<!-- 2. Hero Combat Summary Strip -->
<div class="grid grid-cols-3 sm:grid-cols-6 gap-1.5 p-2 rounded-xl bg-stone-950 border border-stone-800 text-center text-[11px] font-mono">
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">⚔️ Nahkampf</div>
<div class="font-bold text-amber-300" id="stat-melee-atk">12</div>
</div>
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">🏹 Fernkampf</div>
<div class="font-bold text-emerald-300" id="stat-ranged-atk">—</div>
</div>
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">🛡️ Rüstung</div>
<div class="font-bold text-sky-300" id="stat-total-def">2</div>
</div>
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">🎯 Kritisch</div>
<div class="font-bold text-rose-300" id="stat-crit-pct">10%</div>
</div>
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">⚡ Magie</div>
<div class="font-bold text-cyan-300" id="stat-spell-pwr">100%</div>
</div>
<div class="p-1 rounded bg-stone-900/80">
<div class="text-[9px] text-stone-400">🏹 Pfeile</div>
<div class="font-bold text-emerald-400" id="stat-arrows-count">0</div>
</div>
</div>
<!-- 3. Permanent Skill & Attribute Points Card (HP, Mana, Stärke) -->
<div id="stat-points-banner" class="p-3 rounded-xl bg-stone-950 border border-amber-500/40 text-xs shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="font-cinzel font-bold text-amber-300 flex items-center gap-1.5 text-xs sm:text-sm" id="stat-banner-status">
<span>⭐</span> <span>Attributs-Verteilung</span>
</span>
<span class="font-mono text-[11px] px-2 py-0.5 rounded bg-amber-950/80 text-amber-300 border border-amber-700/60" id="stat-points-count-badge">
<b id="stat-points-count">0</b> freie Punkte
</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs" id="stat-buttons-container">
<!-- Populated by updateInventoryUI() -->
</div>
</div>
<!-- 4. Visual Equipment Slots (8 Slots in 2 columns: 4 left body, 4 right weapon/relics) -->
<div>
<div class="flex items-center justify-between mb-2">
<h3 class="font-cinzel font-bold text-xs text-amber-400 uppercase tracking-wider">Angelegte Ausrüstung (8 Feste Slots)</h3>
<span class="text-[10px] text-stone-400 font-mono">Tippe auf Ablegen zum Ausziehen</span>
</div>
<div id="paperdoll-slots-container">
<!-- Populated by updateInventoryUI() -->
</div>
</div>
<!-- 5. Unified Inventory Grid (Rucksack) -->
<div>
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-1.5">
<h3 class="font-cinzel font-bold text-xs text-stone-200 uppercase tracking-wider">Gegenstände im Beutel</h3>
<span class="text-[10px] text-stone-400 hidden sm:inline">(Startet mit 5, wächst um +2 Plätze pro Stufe)</span>
</div>
<span class="text-xs font-mono text-amber-400 font-bold" id="inv-capacity-text">0 / 5 Plätze</span>
</div>
<!-- Category Filter Bar for Bag Items (Waffe, Hut, Rüstung, Hose, Schuhe, etc.) -->
<div id="inv-filter-bar" class="flex items-center gap-1 overflow-x-auto no-scrollbar py-1 mb-2.5 text-[11px] shrink-0">
<!-- Populated by renderInventoryFilters() -->
</div>
<div id="backpack-list" class="space-y-2">
<!-- Populated by updateInventoryUI() as clean cards with full stats badges -->
</div>
</div>
</div>
</div>
</div>
<!-- ================= MODAL 2: SCHMIEDE, ALCHEMIE & FÄHIGKEITEN ================= -->
<div id="modal-crafting" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-xl">⚒️</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-emerald-400 leading-tight">Schmiede & Alchemie</h2>
<p class="text-[11px] text-stone-400">Fertige Ausrüstung, Pfeile und Tränke aus deinen gesammelten Rohstoffen.</p>
</div>
</div>
<div class="flex items-center space-x-1.5">
<button onclick="closeCraftingModal(); openInventoryModal();" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs">🎒 Zum Rucksack</button>
<button onclick="closeCraftingModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
</div>
<!-- Category Tabs -->
<div class="flex flex-wrap gap-1.5 mb-3 shrink-0 text-xs">
<button onclick="setCraftFilter('all')" id="craft-cat-all" class="gold-btn px-2.5 py-1 rounded-lg">Alle</button>
<button onclick="setCraftFilter('starter')" id="craft-cat-starter" class="fantasy-btn px-2.5 py-1 rounded-lg">🛡️ Grund-Ausrüstung</button>
<button onclick="setCraftFilter('ammo')" id="craft-cat-ammo" class="fantasy-btn px-2.5 py-1 rounded-lg">🏹 Pfeile & Wurfwaffen</button>
<button onclick="setCraftFilter('alchemy')" id="craft-cat-alchemy" class="fantasy-btn px-2.5 py-1 rounded-lg">🧪 Tränke & Bomben</button>
<button onclick="setCraftFilter('master')" id="craft-cat-master" class="fantasy-btn px-2.5 py-1 rounded-lg">✨ Meister-Schmiede</button>
</div>
<!-- Recipes List -->
<div id="crafting-recipes-grid" class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1">
<!-- Populated by renderCraftingUI() -->
</div>
</div>
</div>
<!-- ================= MODAL 3: SHORTCUTS & QUICKSLOTS EDITOR ================= -->
<div id="modal-shortcuts" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 custom-scroll max-h-[92dvh] overflow-y-auto">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3">
<div class="flex items-center space-x-2">
<span class="text-xl">⌨️</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Tastaturkürzel & Quickslots anpassen</h2>
<p class="text-[11px] text-stone-400">Belege Tasten für Angriff, Rasten und deine 6 Aktions-Slots frei nach Wunsch.</p>
</div>
</div>
<button onclick="closeShortcutsModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<!-- Core Combat Keys: Attack & Rest (Editable!) -->
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 mb-3">
<div class="text-[11px] font-cinzel text-amber-400 uppercase font-bold mb-2">⚔️ Haupt-Aktionen</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
<div class="p-2.5 rounded-lg bg-stone-900 border border-stone-800 flex items-center justify-between">
<div>
<div class="font-bold text-stone-200">⚔️ Angriff / Fernkampf</div>
<div class="text-[10px] text-stone-400">Feuert Fernkampf oder greift an</div>
</div>
<button onclick="startRebindingKey('attack')" id="btn-rebind-attack" class="gold-btn px-3 py-1 rounded-lg font-mono text-xs">
Taste: <span id="label-key-attack">F</span>
</button>
</div>
<div class="p-2.5 rounded-lg bg-stone-900 border border-stone-800 flex items-center justify-between">
<div>
<div class="font-bold text-stone-200">⏳ 1 Runde Rasten</div>
<div class="text-[10px] text-stone-400">Regeneriert +1 MP & überspringt Zug</div>
</div>
<button onclick="startRebindingKey('wait')" id="btn-rebind-wait" class="gold-btn px-3 py-1 rounded-lg font-mono text-xs">
Taste: <span id="label-key-wait">Space</span>
</button>
</div>
</div>
</div>
<!-- 6 Quickslots Selector -->
<div class="text-[11px] font-cinzel text-cyan-400 uppercase font-bold mb-1.5">⚡ Schnellzugriff-Slots (1–6)</div>
<div id="shortcut-editor-slots" class="grid grid-cols-3 sm:grid-cols-6 gap-2 mb-3"></div>
<!-- Active Slot Config -->
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 mb-3">
<div class="flex items-center justify-between pb-2 border-b border-stone-800 mb-2.5">
<span id="sc-selected-slot-title" class="font-cinzel font-bold text-amber-400 text-sm">Slot 1</span>
<button onclick="startRebindingSlotKey()" id="btn-rebind-slot-key" class="gold-btn px-3 py-1 rounded-lg text-xs font-mono">
Slot-Taste ändern
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[38vh] overflow-y-auto custom-scroll pr-1">
<div>
<div class="text-[11px] font-cinzel text-cyan-400 uppercase mb-1.5">⚡ Fähigkeiten & Zauber</div>
<div id="sc-assign-skills-list" class="space-y-1.5"></div>
</div>
<div>
<div class="text-[11px] font-cinzel text-emerald-400 uppercase mb-1.5">🧪 Tränke & Wurfwaffen</div>
<div id="sc-assign-items-list" class="space-y-1.5"></div>
</div>
</div>
</div>
<!-- System Keybinds -->
<div class="p-2.5 rounded-xl bg-stone-900/70 border border-stone-800 mb-3 text-xs hidden sm:block">
<div class="font-cinzel font-bold text-stone-300 uppercase mb-1.5 text-[11px]">System-Tasten</div>
<div class="grid grid-cols-4 gap-2" id="system-keybinds-grid"></div>
</div>
<div class="flex justify-between items-center pt-2 border-t border-stone-800">
<button onclick="resetDefaultShortcuts()" class="fantasy-btn px-3 py-1.5 rounded-xl text-xs text-stone-400">↺ Standard</button>
<button onclick="closeShortcutsModal()" class="gold-btn px-5 py-1.5 rounded-xl text-xs font-cinzel font-bold">Fertig</button>
</div>
</div>
</div>
<!-- ================= MODAL 4: HELDENAUSWAHL (START / NEW GAME) ================= -->
<div id="modal-hero-select" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-6 shadow-2xl border border-stone-700 custom-scroll max-h-[92dvh] overflow-y-auto">
<div class="text-center mb-3">
<span class="text-3xl">🏰</span>
<h2 class="font-cinzel text-xl sm:text-2xl font-bold text-amber-400 tracking-wide mt-1">Mythic Depths</h2>
<p class="text-xs text-stone-400 mt-0.5">Du beginnst fast mit leeren Händen. Sammle Rohstoffe, schmiede Ausrüstung und überlebe 10 Ebenen!</p>
</div>
<!-- Resume Active Run Banner (shown if a run is already in progress) -->
<div id="resume-run-box" class="hidden mb-4 p-3 rounded-xl bg-emerald-950/70 border border-emerald-500/70 flex items-center justify-between">
<div class="text-xs">
<div class="font-bold text-emerald-300">💾 Aktiver Spielstand vorhanden!</div>
<div class="text-[11px] text-stone-300" id="resume-run-info">Ebene 1 • Stufe 1</div>
</div>
<button onclick="closeHeroSelectModal()" class="emerald-btn px-4 py-2 rounded-xl text-xs font-cinzel font-bold">
▶ Weiterspielen
</button>
</div>
<!-- Hero Name Input -->
<div class="mb-3 flex items-center justify-center">
<div class="w-full max-w-xs">
<label class="block text-[10px] text-stone-400 uppercase font-cinzel mb-1 text-center">Name deines Helden</label>
<input id="input-player-name" type="text" maxlength="20" placeholder="Abenteurer" value="Abenteurer"
class="w-full px-3 py-1.5 rounded-xl bg-stone-950 border border-stone-700 text-amber-300 font-bold text-center text-xs focus:outline-none focus:border-amber-400">
</div>
</div>
<!-- 3 Hero Classes Cards (Zero-to-Hero Starter Loadouts) -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5 mb-4">
<!-- Knight -->
<div onclick="selectHeroClass('knight')" id="card-class-knight" class="p-3 rounded-xl border-2 border-amber-500/80 bg-stone-900/90 cursor-pointer transition flex flex-col justify-between">
<div>
<div class="text-2xl mb-1 text-center">⚔️</div>
<h3 class="font-cinzel font-bold text-sm text-amber-400 text-center">Klingensänger</h3>
<div class="text-[10px] text-stone-400 text-center mb-2">Krieger-Novize</div>
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
<div>❤️ HP: <span class="text-rose-400 font-bold">110</span> | 🔮 MP: <span class="text-cyan-400 font-bold">25</span></div>
<div>🗡️ Start: <span class="text-stone-200">Rostiges Kurzschwert</span></div>
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
</div>
</div>
<div class="text-[10px] text-amber-300/90 mt-2 italic text-center">Skills: Wirbelwind & Schildstoß</div>
</div>
<!-- Mage -->
<div onclick="selectHeroClass('mage')" id="card-class-mage" class="p-3 rounded-xl border border-stone-800 bg-stone-900/60 cursor-pointer transition flex flex-col justify-between">
<div>
<div class="text-2xl mb-1 text-center">🔮</div>
<h3 class="font-cinzel font-bold text-sm text-cyan-400 text-center">Arkanist</h3>
<div class="text-[10px] text-stone-400 text-center mb-2">Zauberlehrling</div>
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
<div>❤️ HP: <span class="text-rose-400 font-bold">75</span> | 🔮 MP: <span class="text-cyan-400 font-bold">70</span></div>
<div>🪄 Start: <span class="text-cyan-300">Alter Lehrstab (4F)</span></div>
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
</div>
</div>
<div class="text-[10px] text-cyan-300/90 mt-2 italic text-center">Skills: Arkanpfeil, Feuerball & Frost</div>
</div>
<!-- Ranger -->
<div onclick="selectHeroClass('ranger')" id="card-class-ranger" class="p-3 rounded-xl border border-stone-800 bg-stone-900/60 cursor-pointer transition flex flex-col justify-between">
<div>
<div class="text-2xl mb-1 text-center">🏹</div>
<h3 class="font-cinzel font-bold text-sm text-emerald-400 text-center">Waldläufer</h3>
<div class="text-[10px] text-stone-400 text-center mb-2">Wildnis-Späher</div>
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
<div>❤️ HP: <span class="text-rose-400 font-bold">90</span> | 🔮 MP: <span class="text-cyan-400 font-bold">35</span></div>
<div>🏹 Start: <span class="text-emerald-300">Ast-Kurzbogen + 8🏹</span></div>
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
</div>
</div>
<div class="text-[10px] text-emerald-300/90 mt-2 italic text-center">Skills: Meisterschuss & Dornenfalle</div>
</div>
</div>
<button onclick="startNewDungeonRun()" class="gold-btn w-full py-3 rounded-xl font-cinzel text-sm sm:text-base flex items-center justify-center space-x-2">
<span>⚔️</span>
<span>Neuen Durchlauf bei Null starten</span>
</button>
</div>
</div>
<!-- ================= MODAL 5: GAME OVER / VICTORY ================= -->
<div id="modal-gameover" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-md w-full rounded-2xl p-5 shadow-2xl border border-stone-700 text-center">
<div class="text-5xl mb-2" id="gameover-icon">💀</div>
<h2 class="font-cinzel text-2xl font-bold mb-1" id="gameover-title">Gefallen im Verlies</h2>
<p class="text-xs text-stone-400 mb-4" id="gameover-cause"></p>
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 text-xs mb-4 space-y-1.5 font-mono text-left">
<div class="flex justify-between"><span class="text-stone-400">Erreichte Ebene:</span><span class="font-bold text-amber-300" id="go-stat-floor">Ebene 1</span></div>
<div class="flex justify-between"><span class="text-stone-400">Besiegte Feinde:</span><span class="font-bold text-rose-400" id="go-stat-kills">0</span></div>
<div class="flex justify-between"><span class="text-stone-400">Gesammeltes Gold:</span><span class="font-bold text-yellow-300" id="go-stat-gold">0 💰</span></div>
<div class="flex justify-between"><span class="text-stone-400">Überlebte Züge:</span><span class="font-bold text-stone-200" id="go-stat-turns">0 ⏳</span></div>
<div class="flex justify-between pt-1.5 border-t border-stone-800 text-sm">
<span class="text-stone-200 font-cinzel font-bold">Gesamt-Score:</span>
<span class="font-bold text-amber-400 text-base" id="go-stat-score">0 Punkte</span>
</div>
</div>
<div class="space-y-2">
<button onclick="openHeroSelectModal()" class="gold-btn w-full py-2.5 rounded-xl font-cinzel text-sm font-bold">⚔️ Neues Abenteuer wagen</button>
<button onclick="openHighscoresModal()" class="fantasy-btn w-full py-2 rounded-xl text-xs font-semibold">🏆 Zur Bestenliste</button>
</div>
</div>
</div>
<!-- ================= MODAL 6: BESTENLISTE ================= -->
<div id="modal-highscores" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 custom-scroll max-h-[90dvh] overflow-y-auto">
<div class="flex items-center justify-between pb-3 border-b border-stone-800 mb-3">
<div class="flex items-center space-x-2">
<span class="text-xl">🏆</span>
<h2 class="font-cinzel text-lg font-bold text-amber-400">Halle der Helden</h2>
</div>
<button onclick="closeHighscoresModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<div id="highscores-list" class="space-y-1.5 text-xs"></div>
</div>
</div>
<!-- ================= MODAL 7: STADT-HANDELSKONTOR (MERCHANT BALTHASAR) ================= -->
<div id="modal-town-shop" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-2xl">🧔</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Händler Balthasar — Stadtmarkt</h2>
<p class="text-[11px] text-stone-300">Kaufe Ausrüstung, Tränke & Rohstoffe oder verkaufe deine Beute mit +30% Stadt-Bonus!</p>
</div>
</div>
<div class="flex items-center space-x-2">
<div class="px-2.5 py-1 rounded-lg bg-stone-950 border border-amber-500/40 text-xs font-mono font-bold text-amber-300">
💰 <span id="shop-gold-display">0</span>G
</div>
<button onclick="closeTownShopModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
</div>
<!-- Shop Tabs -->
<div class="flex gap-1.5 mb-2 shrink-0 text-xs">
<button onclick="setTownShopTab('buy_gear')" id="shop-tab-buy_gear" class="gold-btn px-3 py-1.5 rounded-lg">🛡️ Ausrüstung kaufen</button>
<button onclick="setTownShopTab('buy_supplies')" id="shop-tab-buy_supplies" class="fantasy-btn px-3 py-1.5 rounded-lg">🧪 Tränke & Rohstoffe</button>
<button onclick="setTownShopTab('sell')" id="shop-tab-sell" class="fantasy-btn px-3 py-1.5 rounded-lg">💰 Beute verkaufen (+30%)</button>
</div>
<!-- Shop Category Sub-Filter Bar (Waffe, Hut, Rüstung, Hose, Schuhe, etc.) -->
<div id="shop-filter-bar" class="flex items-center gap-1 overflow-x-auto no-scrollbar py-1 mb-2.5 text-[11px] shrink-0">
<!-- Rendered by renderTownShopFilters() -->
</div>
<div id="town-shop-content" class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1"></div>
</div>
</div>
<!-- ================= MODAL: SPIELER-HAUS & UNENDLICHE TRUHE ================= -->
<div id="modal-player-house" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
<!-- House Modal Header -->
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-2xl">🏡</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Dein Anwesen in Grimhold</h2>
<p class="text-[11px] text-stone-300">Account-gebundenes Eigenheim • Kiste mit unendlichem Platz • Bett & Schmiede</p>
</div>
</div>
<button onclick="closePlayerHouseModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<!-- House Content View (Populated by renderPlayerHouseUI()) -->
<div id="player-house-view" class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1">
<!-- Rendered by JavaScript -->
</div>
</div>
</div>
<!-- ================= MODAL 8: WELTPORTAL — MEHRERE DUNGEONS AUSWÄHLEN ================= -->
<div id="modal-dungeons" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-2xl">🌀</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-cyan-300 leading-tight">Weltportal von Grimhold — Dungeon-Wahl</h2>
<p class="text-[11px] text-stone-300">Jeder Dungeon umfasst 10 Ebenen und einen eigenen Endboss. Dein Charakter & Inventar reisen mit!</p>
</div>
</div>
<button onclick="closeDungeonsModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<div id="dungeons-list-container" class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1"></div>
</div>
</div>
<!-- ================= MODAL 9: MULTIPLAYER LIVE-CHAT & ONLINE-HELDEN ================= -->
<div id="modal-chat" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 hidden">
<div class="fantasy-card max-w-xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col h-[82dvh] max-h-[640px]">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-2.5 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-xl">💬</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-cyan-300 leading-tight">Taverne & Globaler Helden-Chat</h2>
<p class="text-[11px] text-stone-300">Tausche dich live mit anderen Spielern in Grimhold aus.</p>
</div>
</div>
<button onclick="closeChatModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<!-- Active Online Players Strip -->
<div class="mb-2.5 p-2 rounded-xl bg-stone-950 border border-stone-800 shrink-0">
<div class="text-[10px] font-cinzel text-amber-400 uppercase font-bold mb-1">🟢 Aktive Helden online</div>
<div id="online-players-list" class="flex flex-wrap gap-1.5 text-[11px]"></div>
</div>
<!-- Chat Messages Feed -->
<div id="chat-messages-box" class="flex-1 overflow-y-auto custom-scroll p-2.5 rounded-xl bg-stone-950/90 border border-stone-800 space-y-2 text-xs mb-2.5"></div>
<!-- Send Input -->
<form onsubmit="submitChatMessage(event)" class="flex gap-2 shrink-0">
<input id="chat-input-field" type="text" maxlength="200" placeholder="Nachricht an alle Helden schreiben..."
class="flex-1 px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-stone-100 text-xs focus:outline-none focus:border-cyan-400">
<button type="submit" class="emerald-btn px-4 py-2 rounded-xl text-xs font-bold shrink-0">Senden</button>
</form>
</div>
</div>
<!-- ================= MODAL 10: FREE2PLAY GAST & KONTO-REGISTRIERUNG / LOGIN ================= -->
<div id="modal-account" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700">
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3">
<div class="flex items-center space-x-2">
<span class="text-xl">👤</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Helden-Konto & Cloud-Save</h2>
<p class="text-[11px] text-stone-300">100% Free-to-Play — Registrierung sichert deinen Spielstand auf allen Geräten!</p>
</div>
</div>
<button onclick="closeAccountModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<div id="account-logged-in-box" class="hidden space-y-3">
<div class="p-3 rounded-xl bg-emerald-950/60 border border-emerald-500/50 text-xs">
<div class="text-emerald-300 font-bold text-sm mb-0.5">✅ Eingeloggt als <span id="account-username-display" class="text-amber-300">Held</span></div>
<div class="text-stone-300 text-[11px]">Dein Spielstand wird automatisch in der Cloud mit deinem Konto synchronisiert (PC & Smartphone).</div>
</div>
<button onclick="logoutAccount()" class="fantasy-btn w-full py-2 rounded-xl text-xs text-rose-300 font-bold">Abmelden (Zurück zum Gast-Modus)</button>
</div>
<div id="account-auth-form-box" class="space-y-3 text-xs">
<div class="p-2.5 rounded-xl bg-stone-950 border border-stone-800 text-[11px] text-stone-300">
💡 <b>Gast-Fortschritt übernehmen:</b> Wenn du dich jetzt registrierst oder einloggst, wird dein aktueller Held & Fortschritt automatisch auf dein Konto übertragen!
</div>
<div>
<label class="block text-[10px] uppercase font-cinzel text-stone-300 mb-1">Benutzername (3–20 Zeichen)</label>
<input id="auth-username-input" type="text" maxlength="20" placeholder="Dein Heldenname"
class="w-full px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-amber-300 font-bold focus:outline-none focus:border-amber-400">
</div>
<div>
<label class="block text-[10px] uppercase font-cinzel text-stone-300 mb-1">Passwort (mind. 4 Zeichen)</label>
<input id="auth-password-input" type="password" placeholder="••••••••"
class="w-full px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-stone-100 focus:outline-none focus:border-amber-400">
</div>
<div id="auth-error-msg" class="hidden text-rose-400 text-[11px] font-semibold text-center"></div>
<div class="grid grid-cols-2 gap-2 pt-1">
<button onclick="submitAccountAuth('login')" class="fantasy-btn py-2.5 rounded-xl font-cinzel font-bold text-xs border-amber-500/40">🔑 Einloggen</button>
<button onclick="submitAccountAuth('register')" class="gold-btn py-2.5 rounded-xl font-cinzel font-bold text-xs">✨ Registrieren</button>
</div>
</div>
</div>
</div>
<!-- ================= MODAL: EXPANDABLE TOP MENU & SETTINGS (Clean Mobile & Desktop Menu) ================= -->
<div id="modal-top-menu" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[90dvh]">
<!-- Header -->
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
<div class="flex items-center space-x-2">
<span class="text-xl">☰</span>
<div>
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Hauptmenü & Einstellungen</h2>
<p class="text-[11px] text-stone-300">Steuerung, Audio, Shortcuts und Spielfunktionen</p>
</div>
</div>
<button onclick="closeTopMenuModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
</div>
<!-- Scrollable List of Menu Options -->
<div class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1 text-xs">
<!-- Setting: Virtual D-Pad (Laufkreuz) Toggle -->
<div class="p-3 rounded-xl bg-stone-900 border border-stone-800 flex items-center justify-between gap-2">
<div>
<div class="font-bold text-stone-200 flex items-center gap-1.5">
<span>🕹️</span> <span>Virtuelles Laufkreuz (D-Pad)</span>
</div>
<div class="text-[10px] text-stone-300">Steuerkreuz ein/ausblenden (Du kannst auch direkt auf die Karte tippen)</div>
</div>
<button onclick="toggleDpad()" id="menu-toggle-dpad-btn" class="gold-btn px-3 py-1.5 rounded-xl font-mono font-bold text-xs shrink-0">
<span id="menu-toggle-dpad-val" class="text-emerald-400 font-bold">AN</span>
</button>
</div>
<!-- Shortcuts & Controls -->
<button onclick="closeTopMenuModal(); openShortcutsModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-500/50 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-amber-300 flex items-center gap-1.5">
<span>⌨️</span> <span>Tastaturkürzel & Shortcuts</span>
</div>
<div class="text-[10px] text-stone-300">Belege Tasten für Angriff, Rasten und deine 6 Quickslots frei</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
<!-- Handwerk / Alchemie -->
<button onclick="closeTopMenuModal(); openCraftingModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-emerald-600/40 hover:border-emerald-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-emerald-300 flex items-center gap-1.5">
<span>⚒️</span> <span>Handwerk & Alchemie</span>
</div>
<div class="text-[10px] text-stone-300">Pfeile & Tränke unterwegs brauen, Waffen/Rüstung an Schmiede</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
<!-- Live Chat -->
<button onclick="closeTopMenuModal(); openChatModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-cyan-500/40 hover:border-cyan-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-cyan-300 flex items-center gap-1.5">
<span>💬</span> <span>Multiplayer Live-Chat</span>
</div>
<div class="text-[10px] text-stone-300">Mit anderen Helden chatten & Online-Spieler sehen</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
<!-- Account / Cloud Save -->
<button onclick="closeTopMenuModal(); openAccountModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-stone-200 flex items-center gap-1.5">
<span>👤</span> <span>Konto & Cloud-Save</span>
</div>
<div class="text-[10px] text-stone-300">Free2Play Gast oder kostenloses Konto für Geräte-Synchronisation</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
<!-- Zoom Toggle -->
<button onclick="cycleZoom()" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-stone-200 flex items-center gap-1.5">
<span>🔍</span> <span>Karten-Zoom ändern</span>
</div>
<div class="text-[10px] text-stone-300">Vergrößert oder verkleinert den Dungeon-Ausschnitt</div>
</div>
<span class="text-amber-400 font-bold font-mono text-xs">Umschalten</span>
</button>
<!-- Sound Toggle -->
<div class="p-3 rounded-xl bg-stone-900 border border-stone-800 flex items-center justify-between gap-2">
<div>
<div class="font-bold text-stone-200 flex items-center gap-1.5">
<span>🔊</span> <span>Sound & Effekte</span>
</div>
<div class="text-[10px] text-stone-300">Kampf-, Zauber- und Schritt-Sounds</div>
</div>
<button onclick="toggleSound(); updateTopMenuUI();" id="menu-toggle-sound-btn" class="fantasy-btn px-3 py-1.5 rounded-xl font-mono font-bold text-xs shrink-0">
<span id="menu-toggle-sound-val" class="text-emerald-400 font-bold">AN</span>
</button>
</div>
<!-- Highscores -->
<button onclick="closeTopMenuModal(); openHighscoresModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-amber-300 flex items-center gap-1.5">
<span>🏆</span> <span>Bestenliste & Ruhmeshalle</span>
</div>
<div class="text-[10px] text-stone-300">Top 50 Abenteurer der Ahnengruft</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
<!-- Hero Selection / New Run -->
<button onclick="closeTopMenuModal(); openHeroSelectModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-rose-400 flex items-center justify-between text-left transition">
<div>
<div class="font-bold text-stone-300 flex items-center gap-1.5">
<span>⚙️</span> <span>Helden-Auswahl / Neuer Lauf</span>
</div>
<div class="text-[10px] text-stone-300">Neues Spiel mit anderer Klasse oder neuen Namen starten</div>
</div>
<span class="text-stone-300 font-mono text-sm">➔</span>
</button>
</div>
</div>
</div>
<!-- ================= MODAL: EMPTY QUIVER (NO ARROWS) POP-UP ================= -->
<div id="modal-no-arrows" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-3 hidden">
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-rose-500/60 flex flex-col text-center">
<div class="w-14 h-14 mx-auto rounded-2xl bg-rose-950/80 border border-rose-500/60 flex items-center justify-center text-3xl mb-2.5 shadow">
🏹
</div>
<h3 class="font-cinzel text-base sm:text-lg font-bold text-rose-300 mb-1">Dein Köcher ist leer!</h3>
<p class="text-xs text-stone-300 mb-3">
Du hast keine Pfeile mehr für den Fernkampf. Schnitze sofort Pfeile aus gesammeltem Holz & Erz, kämpfe mit Fäusten/Nahkampfwaffen oder reise zu Händler Balthasar in die Stadt.
</p>
<div class="p-2.5 rounded-xl bg-stone-950 border border-stone-800 text-xs font-mono text-stone-300 mb-3 flex items-center justify-around">
<span>🪵 Holz: <b id="no-arrows-wood-count" class="text-amber-300">0</b></span>
<span>🪨 Erz: <b id="no-arrows-ore-count" class="text-stone-200">0</b></span>
<span>💰 Gold: <b id="no-arrows-gold-count" class="text-amber-400">0</b></span>
</div>
<div class="space-y-2 text-xs">
<button onclick="craftArrowsQuickFromModal()" id="btn-quick-craft-arrows" class="w-full py-2.5 rounded-xl emerald-btn flex items-center justify-center space-x-2 font-bold shadow">
<span>🪵</span>
<span>Pfeile herstellen</span>
</button>
<button onclick="closeNoArrowsModal(); if (!inTown) toggleTownOrDungeon(); else openTownShopModal();" class="w-full py-2.5 rounded-xl gold-btn flex items-center justify-center space-x-2 font-bold shadow">
<span>🏘️</span>
<span>Zu Händler Balthasar in die Stadt</span>
</button>
<button onclick="closeNoArrowsModal()" class="w-full py-2 rounded-xl fantasy-btn text-stone-300 font-semibold">
Abbrechen (Nahkampf nutzen)
</button>
</div>
</div>
</div>
<!-- Main Game Script -->
<script src="/static/app.js?v=mythic_5.2.0"></script>
</body>
</html>