luneraria-control-center/public/index.html
Martin Stickelbroeck 2fce25b07e
Some checks are pending
CI/CD Cloud Deployment / test-and-build (push) Waiting to run
feat: Support col.stickelbroeck.com (Spieleseite) & col-admin.stickelbroeck.com (Schaltzentrale)
2026-10-12 10:16:35 +02:00

753 lines
38 KiB
HTML
Raw Permalink 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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Champions of Luneraria - Der kompetitive 3-Lane Autobattler (3 vs. 3). Taktische MOBA-Tiefe trifft deterministische Tower-Defense. Unity 6 URP, C#-Simulation und volles Glutpakt-Heer.">
<meta name="theme-color" content="#030508">
<title>Champions of Luneraria · Offizieller 3-Lane Autobattler</title>
<!-- Studio Grade Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- A11y Skip Link -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
<!-- Ambient Dynamic Mouse Light -->
<div class="cursor-ambient-glow" aria-hidden="true"></div>
<!-- Header / Navigation -->
<header class="site-header" role="banner">
<div class="container nav-container">
<a href="#" class="brand-wrapper" aria-label="Champions of Luneraria Startseite">
<div class="brand-emblem">
<svg class="brand-emblem-svg" viewBox="0 0 42 42" fill="none">
<circle cx="21" cy="21" r="19" stroke="#38e8d8" stroke-width="2" stroke-dasharray="8 4" opacity="0.8" />
<polygon points="21,5 35,21 21,37 7,21" fill="#08203c" stroke="#38e8d8" stroke-width="1.8" />
<circle cx="21" cy="21" r="5" fill="#38e8d8" />
</svg>
</div>
<div class="brand-text-block">
<span class="brand-title">Luneraria <span>3v3</span></span>
<span class="brand-tagline">Competitive Autobattler</span>
</div>
</a>
<nav role="navigation" aria-label="Hauptnavigation">
<ul class="nav-menu">
<li><a href="#radar" class="nav-link">3-Lane Karte</a></li>
<li><a href="#zyklus" class="nav-link">Rundenzyklus</a></li>
<li><a href="#helden" class="nav-link">Champions</a></li>
<li><a href="#armee" class="nav-link">Glutpakt-Heer</a></li>
<li><a href="#cinema" class="nav-link">Gameplay</a></li>
<li><a href="#galerie" class="nav-link">Galerie</a></li>
<li><a href="#download" class="nav-link">Download</a></li>
</ul>
</nav>
<div class="nav-controls">
<button id="btnAudioSynth" class="btn-audio-synth" aria-pressed="false" aria-label="Atmosphärischen Synthesizer umschalten">
<div class="equalizer-bars" aria-hidden="true">
<span class="eq-bar"></span>
<span class="eq-bar"></span>
<span class="eq-bar"></span>
<span class="eq-bar"></span>
</div>
<span class="audio-label">Atmosphäre</span>
</button>
<a href="https://col-admin.stickelbroeck.com" target="_blank" rel="noopener" class="btn-cyan-ghost" style="padding: 9px 16px; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
<span>Schaltzentrale</span>
</a>
<a href="#download" class="btn-gold-sheen">
<span>Spielen</span>
</a>
</div>
</div>
</header>
<!-- Hauptinhalt -->
<main id="main-content">
<!-- 1. Hero Stage (Cinematic Triple-A) -->
<section class="hero-stage" aria-labelledby="hero-headline">
<div class="hero-video-wrapper">
<video class="hero-bg-video" autoplay muted loop playsinline preload="auto">
<source src="assets/video/turmkampf.mp4" type="video/mp4">
</video>
</div>
<div class="hero-vignette-overlay" aria-hidden="true"></div>
<canvas id="heroParticleCanvas" class="hero-canvas" aria-hidden="true"></canvas>
<div class="container hero-inner-content">
<div class="studio-kicker">
<span class="kicker-live-dot" aria-hidden="true"></span>
Meilenstein U5.5 · Unity 6 URP · Volles Glutpakt-Heer
</div>
<h1 id="hero-headline" class="hero-epic-headline">
Champions of <span class="gradient-accent">Luneraria</span>
</h1>
<p class="hero-lead-paragraph">
Der autoritative <strong>3-Lane Autobattler</strong> (3 gegen 3).
Kombiniere tiefgreifende MOBA-Makrostrategie mit deterministischer Tower-Defense.
Plane verdeckt im Team, rüste Champions mit Artefakten aus und stürze den Mondherz-Ancient der Feinde.
</p>
<div class="hero-actions-cluster">
<a href="#download" class="btn-gold-sheen">
<span>Kostenlos Herunterladen</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</a>
<a href="#cinema" class="btn-cyan-ghost">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
<span>Gameplay Trailer</span>
</a>
</div>
<!-- Hero KPI Ribbon -->
<div class="hero-kpi-bar animate-on-scroll">
<div class="kpi-cell">
<div class="kpi-metric">3 <span class="kpi-highlight">vs</span> 3</div>
<span class="kpi-subtext">Team-Autobattler</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">20 <span class="kpi-highlight">Hz</span></div>
<span class="kpi-subtext">C# Regelkern</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">16 <span class="kpi-highlight">+ 2</span></div>
<span class="kpi-subtext">Türme & Ancients</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">120<span class="kpi-highlight">+</span></div>
<span class="kpi-subtext">FPS bei 110+ Units</span>
</div>
</div>
</div>
</section>
<!-- 2. Tactical Radar 3-Lane Map Visualizer -->
<section id="radar" class="section-boundary" aria-labelledby="radar-section-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Taktische Lage</span>
<h2 id="radar-section-title" class="main-section-heading">Das Schlachtfeld von Luneraria</h2>
<p class="section-body-text">
Exakte Spiegelsymmetrie zwischen Team Blau und Team Rot. Drei Höhenstufen,
eine zentrale Kluft und die umkämpfte Bossgrotte auf der Hauptachse.
</p>
</div>
<div class="tactical-radar-wrapper animate-on-scroll">
<!-- Interactive SVG Radar -->
<div id="radarScreenContainer" class="radar-screen-viewport"></div>
<!-- Dossier Inspector Panel -->
<div class="radar-side-console">
<div class="radar-target-dossier">
<div class="dossier-header-row">
<h3 id="dossierTitle" class="dossier-title">Mid-Lane (Zentralplattform)</h3>
<span id="dossierBadge" class="dossier-badge">Direkte Offensive</span>
</div>
<!-- Miniature Screenshot Thumbnail of the selected landmark -->
<div style="width: 100%; height: 130px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border-glass);">
<img id="dossierPreviewImg" src="assets/img/hero-overview.png" alt="Landmark Vorschau" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="dossier-stats-grid">
<div class="dossier-stat-row">
<span class="dossier-stat-label">Länge</span>
<span id="dossierLength" class="dossier-stat-val">61,16 Meter</span>
</div>
<div class="dossier-stat-row">
<span class="dossier-stat-label">Höhenprofil</span>
<span id="dossierElevation" class="dossier-stat-val">Plateau (0 m)</span>
</div>
</div>
<p id="dossierDesc" class="dossier-description">
Die kürzeste und blutigste Route. Führt geradlinig über die uralte Runensteinplattform direkt über die Symmetriekluft. Der Verlust der beiden Mid-Türme legt sofort die Flanken zur eigenen Basis frei.
</p>
</div>
<!-- Tactical Zone Selectors -->
<div class="radar-selector-stack" role="tablist" aria-label="Kartenbereiche anwählen">
<button class="radar-zone-btn is-active" data-target="mid" role="tab" aria-selected="true">
<span>Mid-Lane (Zentrum)</span>
<span class="btn-side-pill">61 m</span>
</button>
<button class="radar-zone-btn" data-target="top" role="tab" aria-selected="false">
<span>Top-Lane (Hochland)</span>
<span class="btn-side-pill">97 m</span>
</button>
<button class="radar-zone-btn" data-target="bot" role="tab" aria-selected="false">
<span>Bottom-Lane (Delta)</span>
<span class="btn-side-pill">97 m</span>
</button>
<button class="radar-zone-btn" data-target="grotto" role="tab" aria-selected="false">
<span>Bossgrotte „Mondschlund“</span>
<span class="btn-side-pill">Superboss</span>
</button>
<button class="radar-zone-btn" data-target="blue_ancient" role="tab" aria-selected="false">
<span>Blauer Ancient (West)</span>
<span class="btn-side-pill">Basis Blau</span>
</button>
<button class="radar-zone-btn" data-target="red_ancient" role="tab" aria-selected="false">
<span>Roter Ancient (Ost)</span>
<span class="btn-side-pill">Basis Rot</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 3. Interactive Battle Flow (Rundenzyklus Timeline) -->
<section id="zyklus" class="section-boundary" aria-labelledby="flow-section-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Der Match-Rhythmus</span>
<h2 id="flow-section-title" class="main-section-heading">Der 5-Phasen-Rundenzyklus</h2>
<p class="section-body-text">
Kein unüberlegtes Dauerklicken. Jede Runde verlangt wirtschaftliches Weitblick, präzise Aufstellung
und mutige Entscheidungen bei der Bossjagd.
</p>
</div>
<div class="flow-interactive-wrapper animate-on-scroll">
<!-- Step Selector Column -->
<div class="flow-step-selector" role="tablist" aria-label="Rundenphasen durchschalten">
<button class="flow-step-btn is-active" data-step="1" role="tab" aria-selected="true">
<span class="step-num-badge">01</span>
<div class="step-btn-content">
<h4>Geheime Aufstellung</h4>
<p>Verdeckte Truppenwahl & Ökonomie</p>
</div>
</button>
<button class="flow-step-btn" data-step="2" role="tab" aria-selected="false">
<span class="step-num-badge">02</span>
<div class="step-btn-content">
<h4>Simultaner Aufmarsch</h4>
<p>Formationsbildung bei Rundenstart</p>
</div>
</button>
<button class="flow-step-btn" data-step="3" role="tab" aria-selected="false">
<span class="step-num-badge">03</span>
<div class="step-btn-content">
<h4>Deterministischer Clash</h4>
<p>20 Hz Kollision, Fokusfeuer & Rüstung</p>
</div>
</button>
<button class="flow-step-btn" data-step="4" role="tab" aria-selected="false">
<span class="step-num-badge">04</span>
<div class="step-btn-content">
<h4>Mondschlund-Expedition</h4>
<p>Superboss besiegen & Lane entsenden</p>
</div>
</button>
<button class="flow-step-btn" data-step="5" role="tab" aria-selected="false">
<span class="step-num-badge">05</span>
<div class="step-btn-content">
<h4>Der Ancient-Sturz</h4>
<p>16 Türme in Ruinen & Match-Ende</p>
</div>
</button>
</div>
<!-- Dynamic Stage Preview Box -->
<div class="flow-stage-display">
<div class="flow-stage-image-box">
<img id="flowStageImg" src="assets/img/planung-hud.jpg" alt="Vorschau der aktuellen Spielphase">
</div>
<div class="flow-stage-text-box">
<h3 id="flowStageTitle" class="flow-stage-title">Phase 1: Die Geheime Aufstellung</h3>
<p id="flowStageDesc" class="flow-stage-desc">
Wähle Truppen im HUD, investiere in Einkommen und positioniere deine Einheiten auf den Aufmarschfeldern deiner Lane. Bis zum Signal der Schlacht bleibt deine Aufstellung für die Feinde unsichtbar.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 4. Champions & Helden Roster -->
<section id="helden" class="section-boundary" aria-labelledby="roster-section-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Elite-Einheiten</span>
<h2 id="roster-section-title" class="main-section-heading">Die Champions von Luneraria</h2>
<p class="section-body-text">
Jeder Spieler wählt seinen Champion. Statte Items wie die Glutklinge aus,
schalte Talente frei und konfiguriere die Auslösebedingung deines Ultimates.
</p>
</div>
<div class="roster-card-container animate-on-scroll">
<!-- Hero Tabs -->
<div class="roster-tab-row" role="tablist" aria-label="Helden auswählen">
<button class="roster-tab-btn is-active" data-champion="sylvara" role="tab" aria-selected="true">Sylvara (Mondklinge)</button>
<button class="roster-tab-btn" data-champion="brunhild" role="tab" aria-selected="false">Brunhild (Walküre)</button>
<button class="roster-tab-btn" data-champion="funkenlanze" role="tab" aria-selected="false">Funkenlanze (Glutpakt)</button>
</div>
<div class="roster-stage-grid">
<div class="roster-portrait-frame">
<img id="rosterImg" src="assets/img/held-kampf.jpg" alt="Sylvara im Kampf">
<div class="roster-portrait-overlay">
<p id="rosterQuote" class="roster-hero-quote">
„Zwei Klingen, ein Sprung – und die hintere Reihe verstummt vor dem ersten Zauber.“
</p>
</div>
</div>
<div class="roster-details-column">
<span id="rosterBadge" class="roster-class-tag">Elfen · Assassine / Flankenspringerin</span>
<h3 id="rosterName" class="roster-hero-name">Sylvara, die Mondklinge</h3>
<div id="rosterAbilityStack" class="hero-abilities-stack">
<div class="hero-ability-card">
<div class="ability-card-head">
<span class="ability-title">Schattensprung</span>
<span class="ability-key-pill">Passiv</span>
</div>
<p class="ability-description-text">Springt beim ersten Angriff der Runde direkt in die gegnerische Backline auf verwundbare Fernkämpfer.</p>
</div>
<div class="hero-ability-card">
<div class="ability-card-head">
<span class="ability-title">Mondsichel-Wurf</span>
<span class="ability-key-pill">Skill 1</span>
</div>
<p class="ability-description-text">Schleudert rotierende Mondklingen durch Gegnerketten, die auf dem Rückweg magischen Schnittschaden verursachen.</p>
</div>
<div class="hero-ability-card">
<div class="ability-card-head">
<span class="ability-title">Mondsicheltanz</span>
<span class="ability-key-pill">Ultimate</span>
</div>
<p class="ability-description-text">Wirbelt mit blendendem Mondlicht durch bis zu 5 Ziele. Löst bedingungsgesteuert aus, sobald ein Fernkämpfer isoliert ist.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 5. Das Glutpakt-Heer (Armee-Inspektor) -->
<section id="armee" class="section-boundary" aria-labelledby="army-section-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Fraktions-Arsenal</span>
<h2 id="army-section-title" class="main-section-heading">Das Glutpakt-Heer (U5.5)</h2>
<p class="section-body-text">
Alle zehn Einheiten der vulkanischen Glutpakt-Armee wurden in Meilenstein U5.5 komplett auf
Meshy-Figuren mit automatischer LOD-Generierung und GPU-Batched-Skinning gehoben.
</p>
</div>
<div class="army-filter-bar animate-on-scroll">
<button class="army-filter-btn is-active" data-filter="all">Alle Einheiten</button>
<button class="army-filter-btn" data-filter="melee">Nahkämpfer</button>
<button class="army-filter-btn" data-filter="ranged">Fernkämpfer</button>
<button class="army-filter-btn" data-filter="siege">Belagerung & Magie</button>
</div>
<div class="army-grid">
<!-- g01 Kohlenbeißer -->
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
<div class="unit-render-holder">
<img src="assets/img/fig-kohlenbeisser.jpg" alt="Kohlenbeißer 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 1</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g01_kohlenbeisser_icon.png" alt="Kohlenbeißer Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Kohlenbeißer</h3>
<span class="unit-subtype-tag">Schwarm-Nahkämpfer</span>
<p class="unit-summary-text">
Zieht in Überzahl in die vorderste Reihe. Seine glutdurchzogene Steinhaut absorbiert Schnittschaden und erzeugt stetigen Druck auf schwache Linien.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 20 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_blade.png" alt="Schaden"> Klinge</span>
<span class="param-pill"><img src="assets/icons/type_armor_light.png" alt="Rüstung"> Leicht</span>
</div>
</div>
</article>
<!-- g04 Basaltbastion -->
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
<div class="unit-render-holder">
<img src="assets/img/fig-basaltbastion.jpg" alt="Basaltbastion 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 4</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g04_basaltbastion_icon.png" alt="Basaltbastion Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Basaltbastion</h3>
<span class="unit-subtype-tag">Massiver Frontpanzer</span>
<p class="unit-summary-text">
Ein titanischer Block aus magmatischem Basalt. Hält selbst schwerstem Turmbeschuss stand und schützt Fernkämpfer vor feindlichen Flanken.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 110 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
</div>
</div>
</article>
<!-- g05 Funkenlanze -->
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
<div class="unit-render-holder">
<img src="assets/img/fig-funkenlanze.jpg" alt="Funkenlanze 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 5 / Heldin</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g05_funkenlanze_icon.png" alt="Funkenlanze Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Funkenlanze</h3>
<span class="unit-subtype-tag">Präzisions-Kriegerin</span>
<p class="unit-summary-text">
Trägt eine eigenständig geriggte Lanze mit flüssiger Glutspitze. Durchsticht Reihen gepanzerter Truppen und dient als Vorlage für Heldenklassen.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 145 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_pierce.png" alt="Schaden"> Stoß</span>
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
</div>
</div>
</article>
<!-- g06 Glasballiste -->
<article class="unit-inspected-card animate-on-scroll" data-category="siege">
<div class="unit-render-holder">
<img src="assets/img/fig-glasballiste.jpg" alt="Glasballiste 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 6</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g06_glasballiste_icon.png" alt="Glasballiste Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Glasballiste</h3>
<span class="unit-subtype-tag">Belagerungsmaschine</span>
<p class="unit-summary-text">
Feuert geschmolzene Glasbolzen über extreme Reichweite. Richtet verheerenden Bonusschaden an feindlichen Türmen und Ancients an.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 180 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_pierce.png" alt="Schaden"> Stoß</span>
<span class="param-pill"><img src="assets/icons/type_armor_light.png" alt="Rüstung"> Leicht</span>
</div>
</div>
</article>
<!-- g08 Kraterrufer -->
<article class="unit-inspected-card animate-on-scroll" data-category="ranged">
<div class="unit-render-holder">
<img src="assets/img/fig-kraterrufer.jpg" alt="Kraterrufer 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 8</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g08_kraterrufer_icon.png" alt="Kraterrufer Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Kraterrufer</h3>
<span class="unit-subtype-tag">Magma-Schamane</span>
<p class="unit-summary-text">
Beschwört feurige Risse unter gegnerischen Einheitenbündeln. Exzellent geeignet gegen dichte Heere und zersplitterte Angriffsreihen.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 220 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
<span class="param-pill"><img src="assets/icons/type_armor_aether.png" alt="Rüstung"> Äther</span>
</div>
</div>
</article>
<!-- g09 Herdhüter -->
<article class="unit-inspected-card animate-on-scroll" data-category="siege">
<div class="unit-render-holder">
<img src="assets/img/fig-herdhueter.jpg" alt="Herdhüter 3D Render" loading="lazy">
<span class="unit-tier-badge">Tier 9</span>
<div class="unit-crest-token">
<img src="assets/icons/unit_g09_herdhueter_icon.png" alt="Herdhüter Icon" loading="lazy">
</div>
</div>
<div class="unit-body-details">
<h3 class="unit-headline">Herdhüter</h3>
<span class="unit-subtype-tag">Aura-Unterstützer</span>
<p class="unit-summary-text">
Kanalisiert stetige Wärmeströme auf verbündete Truppen, die das Kampftempo steigern und feindliche Verlangsamungen negieren.
</p>
<div class="unit-parameters-bar">
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 260 Gold</span>
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- 6. Gameplay Cinema Theater -->
<section id="cinema" class="section-boundary" aria-labelledby="cinema-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Im Gefecht</span>
<h2 id="cinema-title" class="main-section-heading">Echte Gameplay-Aufnahmen</h2>
<p class="section-body-text">
Direkt aufgezeichnet aus dem Unity 6 URP-Player auf macOS Apple Silicon.
Volle PBR-Materialien, Hit-VFX, Turm-Bolzen und der Boss-Einsturz.
</p>
</div>
<div class="cinema-theater-box animate-on-scroll">
<video id="cinemaVideoPlayer" controls playsinline poster="assets/img/hero-overview.png">
<source src="assets/video/turmkampf.mp4" type="video/mp4">
</video>
<div class="cinema-controls-bar">
<span id="cinemaTitleText" class="cinema-title-text">Szene 1: Turmkampf & Belagerung</span>
<div class="cinema-scene-picker">
<button class="scene-btn is-active" data-src="assets/video/turmkampf.mp4" data-title="Szene 1: Turmkampf & Belagerung">Turmkampf</button>
<button class="scene-btn" data-src="assets/video/bossbegegnung.mp4" data-title="Szene 2: Bossgrotte Mondschlund & Schlundkrone">Bossgrotte</button>
</div>
</div>
</div>
</div>
</section>
<!-- 7. Screenshot Mosaic & Lightbox -->
<section id="galerie" class="section-boundary" aria-labelledby="gallery-section-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Visuals</span>
<h2 id="gallery-section-title" class="main-section-heading">Galerie der Schlacht</h2>
<p class="section-body-text">
Klicke auf die Aufnahmen für hochauflösende 1080p-Ansichten.
</p>
</div>
<div class="gallery-mosaic-grid">
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Mid-Lane Übersicht">
<img src="assets/img/hero-overview.png" alt="Mid-Lane Übersicht in Unity URP" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">Mid-Lane Übersicht · URP Shading</span>
</div>
</div>
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Mondherz-Ancient">
<img src="assets/img/ancient.png" alt="Mondherz-Ancient Kristall" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">Mondherz-Ancient Kristall</span>
</div>
</div>
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Bossgrotte Mondschlund">
<img src="assets/img/bosskampf.jpg" alt="Bossgrotte Mondschlund" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">Bossgrotte Mondschlund</span>
</div>
</div>
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Turmfamilie">
<img src="assets/img/tuerme.png" alt="Grenzwacht- und Bastionstürme" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">Grenzwacht- & Bastionstürme</span>
</div>
</div>
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Aufmarsch der Armeen">
<img src="assets/img/aufmarsch.jpg" alt="Simultaner Aufmarsch der Einheiten" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">Simultaner Rundenaufmarsch</span>
</div>
</div>
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Responsives HUD">
<img src="assets/img/planung-hud.jpg" alt="Ingame-HUD UI Toolkit" loading="lazy">
<div class="mosaic-hover-overlay">
<span class="mosaic-label">UI Toolkit Ingame-HUD</span>
</div>
</div>
</div>
</div>
</section>
<!-- 8. Architecture & Engineering Benchmark -->
<section class="section-boundary" aria-labelledby="tech-bench-title">
<div class="container">
<div class="heading-block animate-on-scroll">
<span class="eyebrow-tag">Studio Engineering</span>
<h2 id="tech-bench-title" class="main-section-heading">Deterministische Performance</h2>
<p class="section-body-text">
Keine Desyncs, kein Würfelglück. Gebaut nach den höchsten technischen Maßstäben
moderner E-Sport-Architektur.
</p>
</div>
<div class="hero-kpi-bar animate-on-scroll" style="margin-bottom: 2rem;">
<div class="kpi-cell">
<div class="kpi-metric">457 / 457</div>
<span class="kpi-subtext">Tests Bestanden</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">0.00 Dev</div>
<span class="kpi-subtext">Golden-Parität zu Godot</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">&lt; 0.1 ms</div>
<span class="kpi-subtext">C# Simulationsschritt</span>
</div>
<div class="kpi-cell">
<div class="kpi-metric">Native TCP</div>
<span class="kpi-subtext">20 Snapshots / Sekunde</span>
</div>
</div>
</div>
</section>
<!-- 9. Platform Download & Requirements Matrix -->
<section id="download" class="section-boundary" aria-labelledby="download-fortress-title">
<div class="container">
<div class="download-fortress-box animate-on-scroll">
<div class="heading-block" style="margin-bottom: 2.5rem;">
<span class="eyebrow-tag">Jetzt Einsteigen</span>
<h2 id="download-fortress-title" class="main-section-heading">Spiele die Aktuelle Demo</h2>
<p class="section-body-text">
Frei verfügbar für Entwickler, Tester und Strategie-Pioniere. Nativ kompiliert für moderne Plattformen.
</p>
</div>
<!-- Platform Selector Switch -->
<div class="platform-switch-row" role="tablist" aria-label="Plattform auswählen">
<button class="platform-select-btn is-active" data-platform="mac" role="tab" aria-selected="true">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.66-.82 1.11-1.96.99-3.1-.96.04-2.12.64-2.8 1.44-.6.69-1.12 1.83-1 2.95 1.07.08 2.15-.47 2.81-1.29z"/></svg>
<span>macOS (Apple Silicon)</span>
</button>
<button class="platform-select-btn" data-platform="win" role="tab" aria-selected="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.951-1.801"/></svg>
<span>Windows 11 (x64 / ARM)</span>
</button>
<button class="platform-select-btn" data-platform="linux" role="tab" aria-selected="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a5 5 0 0 0-5 5v3a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5zm-7 13c0 3.31 3.13 6 7 6s7-2.69 7-6c0-2-2-4-5-5h-4c-3 1-5 3-5 5z"/></svg>
<span>Linux (Fedora / Ubuntu)</span>
</button>
</div>
<div class="spec-and-cta-grid">
<div class="spec-breakdown-card">
<div class="spec-table">
<div class="spec-row">
<span class="spec-label">Betriebssystem</span>
<span id="specOS" class="spec-value">macOS 14 Sonoma (empfohlen: macOS 15+)</span>
</div>
<div class="spec-row">
<span class="spec-label">Grafikchip</span>
<span id="specGPU" class="spec-value">Apple Silicon (M1 / M2 / M3 / M4 / M5) oder Metal-GPU</span>
</div>
<div class="spec-row">
<span class="spec-label">Arbeitsspeicher</span>
<span id="specRAM" class="spec-value">8 GB RAM (empfohlen: 16 GB)</span>
</div>
<div class="spec-row">
<span class="spec-label">Festplattenspeicher</span>
<span id="specStorage" class="spec-value">350 MB freier Speicherplatz</span>
</div>
</div>
</div>
<div class="cta-package-card">
<span style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 700;">Paket-Bezeichnung</span>
<div id="specPackageName" style="font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff;">
ChampionsOfLuneraria-macOS-universal.zip
</div>
<a href="../dist/luneraria/" class="btn-gold-sheen" style="width: 100%;">
<span>Paket Herunterladen</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</a>
<span style="font-size: 0.78rem; color: var(--text-muted);">
Inklusive Offline-Modus, Bot-Gegner & lokaler Loopback-Lobby
</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Studio Lightbox Modal -->
<div id="studioLightboxModal" class="studio-lightbox-modal" role="dialog" aria-modal="true" aria-label="Screenshot Vollansicht">
<div class="lightbox-frame">
<button id="lightboxCloseTrigger" class="lightbox-close-trigger" aria-label="Schließen">&times;</button>
<div class="lightbox-viewport">
<img id="lightboxActiveImg" src="" alt="Screenshot Detailansicht">
</div>
</div>
</div>
<!-- Studio Footer -->
<footer class="studio-footer" role="contentinfo">
<div class="container">
<div class="footer-top-row">
<div>
<span style="font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: 0.08em;">CHAMPIONS OF LUNERARIA</span>
<p style="font-size: 0.82rem; color: var(--text-muted); margin-top: 4px;">Competitive 3-Lane Autobattler · Powered by Unity 6.3 LTS & C# Core</p>
</div>
<button id="btnScrollTop" class="btn-up-arrow">
<span>Nach oben</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</button>
</div>
<div class="footer-bottom-row">
<p>&copy; 2026 Champions of Luneraria. Alle Rechte vorbehalten.</p>
<div style="display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--lunar-cyan);">
<span style="width: 7px; height: 7px; background: var(--lunar-cyan); border-radius: 50%; display: inline-block;"></span>
Lokaler Server aktiv auf Port 8088
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/audio.js"></script>
<script src="assets/js/map.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>