diff --git a/public/css/glucksspiel.css b/public/css/glucksspiel.css
new file mode 100644
index 0000000..69d14b6
--- /dev/null
+++ b/public/css/glucksspiel.css
@@ -0,0 +1,332 @@
+/* ============================================================
+ public/css/glucksspiel.css
+============================================================ */
+
+/* ── Layout ─────────────────────────────── */
+.gs-wrap {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ font-family: "Cinzel", serif;
+ overflow: hidden;
+}
+
+/* ── Fraktions-Tabs (ganz links) ─────────── */
+.gs-faction-tabs {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 14px 10px;
+ background: rgba(0,0,0,0.3);
+ border-right: 2px solid #6b4b2a;
+ min-width: 140px;
+ flex-shrink: 0;
+ overflow-y: auto;
+}
+
+.gs-tab {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 9px 12px;
+ background: linear-gradient(135deg, #2a1a08, #1a0f04);
+ border: 2px solid #6b4b2a;
+ border-radius: 8px;
+ color: #c8a86a;
+ font-family: "Cinzel", serif;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+ text-align: left;
+ white-space: nowrap;
+}
+.gs-tab:hover { color: #f0d9a6; filter: brightness(1.2); }
+.gs-tab.gs-tab-active {
+ color: #fff !important;
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 14px rgba(200,160,60,0.3) !important;
+}
+.gs-tab-dot {
+ width: 10px; height: 10px;
+ border-radius: 50%; flex-shrink: 0;
+ border: 1px solid rgba(255,255,255,0.3);
+}
+
+/* ── Mittlere Spalte: Sammlung ───────────── */
+.gs-collection {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ border-right: 2px solid #6b4b2a;
+ overflow: hidden;
+}
+
+.gs-col-header {
+ font-family: "Cinzel", serif;
+ font-size: 14px;
+ font-weight: 700;
+ color: #f0d9a6;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ padding: 10px 16px;
+ background: linear-gradient(#3a2810cc, #1a0f04cc);
+ border-bottom: 2px solid #6b4b2a;
+ flex-shrink: 0;
+}
+
+.gs-grid {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 8px;
+ overflow-y: auto;
+ padding: 10px 12px;
+ align-content: start;
+}
+
+/* ── Karte ───────────────────────────────── */
+.gs-card {
+ position: relative;
+ border: 2px solid #6b4b2a;
+ border-radius: 8px;
+ overflow: visible;
+ background: #1a0f04;
+ cursor: pointer;
+ transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+ aspect-ratio: 3/4;
+ display: flex;
+ flex-direction: column;
+}
+.gs-card:hover {
+ transform: scale(1.06) translateY(-4px);
+ border-color: #f0d060;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 14px rgba(200,160,60,0.3);
+ z-index: 10;
+}
+.gs-card.gs-card-disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+.gs-card.gs-card-disabled:hover {
+ transform: none;
+ box-shadow: none;
+ border-color: #6b4b2a;
+}
+.gs-card.gs-card-selected {
+ border-color: #f0d060;
+ box-shadow: 0 0 14px rgba(240,208,96,0.5);
+}
+.gs-card img {
+ width: 100%; height: 100%;
+ object-fit: cover; display: block;
+ border-radius: 6px 6px 0 0;
+}
+.gs-stat-atk {
+ position: absolute; right: 8px; top: 38%;
+ transform: translateY(-50%);
+ background: rgba(180,40,20,0.88);
+ border: 1px solid #ff6040;
+ border-radius: 45px; color: #fff;
+ font-family: "Cinzel", serif; font-size: 9px; font-weight: bold;
+ padding: 2px 4px; z-index: 5;
+}
+.gs-stat-def {
+ position: absolute; left: 8px; top: 38%;
+ transform: translateY(-50%);
+ background: rgba(20,80,180,0.88);
+ border: 1px solid #4090ff;
+ border-radius: 45px; color: #fff;
+ font-family: "Cinzel", serif; font-size: 9px; font-weight: bold;
+ padding: 2px 4px; z-index: 5;
+}
+.gs-stat-cd {
+ position: absolute;
+ bottom: 6px; right: 5px;
+ width: 18px; height: 18px;
+ border-radius: 50%;
+ background: rgba(0,0,0,0.75);
+ border: 1px solid #f0d060;
+ display: flex; align-items: center; justify-content: center;
+ font-family: "Cinzel", serif; font-size: 8px; font-weight: bold;
+ color: #f0d9a6; z-index: 5; pointer-events: none;
+}
+.gs-card-footer {
+ position: absolute; bottom: 4px; left: 6px;
+ z-index: 5; pointer-events: none;
+}
+.gs-count-owned {
+ font-family: "Cinzel", serif; font-size: 12px;
+ color: #000; font-weight: bold;
+ text-shadow: 0 0 3px rgba(255,255,255,0.6);
+}
+
+/* ── Rarity Kristalle ───────────────────── */
+.gs-rarity {
+ position: absolute;
+ top: 75%;
+ left: 0; right: 0;
+ display: flex; justify-content: center; flex-wrap: wrap;
+ gap: 1px; padding: 0 4px;
+ pointer-events: none; z-index: 4;
+}
+
+/* ── Reichweite & Laufen Badges ─────────── */
+.gs-range-race {
+ position: absolute;
+ top: 86%;
+ left: 0; right: 0;
+ display: flex;
+ justify-content: center;
+ gap: 3px;
+ pointer-events: none;
+ z-index: 6;
+}
+.gs-badge-range,
+.gs-badge-race {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ padding: 1px 4px;
+ border-radius: 20px;
+ font-family: "Cinzel", serif;
+ font-size: 9px;
+ font-weight: bold;
+ line-height: 1;
+}
+.gs-badge-range {
+ background: rgba(30,20,0,0.82);
+ border: 1px solid #e8b84b;
+ color: #e8b84b;
+}
+.gs-badge-race {
+ background: rgba(0,25,0,0.82);
+ border: 1px solid #7de87d;
+ color: #7de87d;
+}
+
+/* ── Pagination ──────────────────────────── */
+.gs-pagination {
+ display: flex; align-items: center; justify-content: center;
+ gap: 5px; padding: 8px 10px; flex-shrink: 0;
+ border-top: 1px solid #3a2810;
+}
+.gs-page-btn {
+ background: linear-gradient(#3a2810, #1a0f04);
+ border: 1px solid #8b6a3c; border-radius: 5px;
+ color: #f0d9a6; font-family: "Cinzel", serif;
+ font-size: 11px; padding: 3px 10px; cursor: pointer; transition: 0.15s;
+}
+.gs-page-btn:hover { border-color: #f0d060; }
+.gs-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.gs-page-btn.gs-page-active {
+ background: linear-gradient(#6b4b2a, #3c2414);
+ border-color: #f0d060; color: #fff5cc;
+}
+
+/* ── Rechte Spalte: Kombinier-Panel ──────── */
+.gs-combine-panel {
+ width: 320px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background: rgba(0,0,0,0.15);
+}
+
+.gs-combine-hint {
+ padding: 14px 16px;
+ font-family: "Cinzel", serif;
+ font-size: 11px;
+ color: #8b6a3c;
+ line-height: 1.7;
+ border-bottom: 1px solid #3a2810;
+ flex-shrink: 0;
+}
+
+.gs-combine-grid {
+ flex: 1;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ padding: 20px 12px 10px;
+ overflow: hidden;
+}
+
+/* Gestapelter Kartenstapel */
+.gs-card-stack {
+ position: relative;
+ width: 240px;
+ aspect-ratio: 3/4;
+ cursor: pointer;
+}
+
+.gs-stack-card {
+ position: absolute;
+ width: 100%;
+ aspect-ratio: 3/4;
+ border: 2px solid #4a8b2a;
+ border-radius: 8px;
+ overflow: hidden;
+ background: #0f1a04;
+ transition: transform 0.2s, border-color 0.2s;
+}
+.gs-stack-card img {
+ width: 100%; height: 100%;
+ object-fit: cover; display: block;
+}
+.gs-card-stack:hover .gs-stack-card:last-child {
+ border-color: #ff4444;
+}
+.gs-card-stack:hover .gs-stack-card:last-child::after {
+ content: "✕ Entfernen";
+ position: absolute; inset: 0;
+ background: rgba(180,0,0,0.6);
+ display: flex; align-items: center; justify-content: center;
+ font-family: "Cinzel", serif; font-size: 11px;
+ color: #fff; border-radius: 6px; pointer-events: none;
+}
+
+.gs-combine-count {
+ padding: 6px 12px;
+ font-family: "Cinzel", serif; font-size: 12px;
+ color: #f0d9a6; text-align: center;
+ border-top: 1px solid #3a2810;
+ flex-shrink: 0;
+ min-height: 28px;
+}
+
+.gs-combine-btn {
+ margin: 10px 16px 14px;
+ padding: 12px;
+ background: linear-gradient(#6b4b2a, #3c2414);
+ border: 2px solid #8b6a3c;
+ border-radius: 8px;
+ color: #f0d9a6;
+ font-family: "Cinzel", serif;
+ font-size: 14px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: 0.2s;
+ flex-shrink: 0;
+}
+.gs-combine-btn:hover:not(:disabled) {
+ border-color: #f0d060;
+ color: #fff;
+ box-shadow: 0 0 12px rgba(200,160,60,0.4);
+}
+.gs-combine-btn:disabled {
+ opacity: 0.35;
+ cursor: not-allowed;
+}
+
+/* ── Empty / Loading ─────────────────────── */
+.gs-empty {
+ grid-column: 1 / -1; text-align: center;
+ color: #8b6a3c; font-size: 13px; padding: 30px 0;
+}
+.gs-loading {
+ text-align: center; color: #8b6a3c; font-size: 13px;
+ padding: 20px 0; animation: gs-pulse 1.2s infinite;
+}
+@keyframes gs-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
diff --git a/public/js/gaststaette/glucksspiel.js b/public/js/gaststaette/glucksspiel.js
index 4676fb9..cfb1358 100644
--- a/public/js/gaststaette/glucksspiel.js
+++ b/public/js/gaststaette/glucksspiel.js
@@ -27,6 +27,14 @@ function rarityImgs(rarity, size = 13) {
return img.repeat(count);
}
+function gsRangeIcon() {
+ return ``;
+}
+
+function gsRaceIcon() {
+ return ``;
+}
+
// State
let gs_groupId = null;
let gs_page = 1;
@@ -56,6 +64,14 @@ export async function loadGlucksspiel() {
const container = document.getElementById("gs-tab1");
if (!container) return;
+ // CSS einmalig laden
+ if (!document.querySelector('link[href="/css/glucksspiel.css"]')) {
+ const link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.href = "/css/glucksspiel.css";
+ document.head.appendChild(link);
+ }
+
// Nur beim ersten Aufruf rendern
if (gs_initialized) return;
gs_initialized = true;
@@ -119,288 +135,6 @@ function renderShell() {
-
-
`;
}
@@ -493,6 +227,11 @@ function renderGrid(grid, cards) {
× ${available < 0 ? 0 : available}
${c.rarity ? `${rarityImgs(c.rarity, 12)}
` : ""}
+ ${(c.range != null || c.race != null) ? `
+
+ ${c.range != null ? `${gsRangeIcon()} ${c.range}` : ""}
+ ${c.race != null ? `${gsRaceIcon()} ${c.race}` : ""}
+
` : ""}
`;
}).join("");