diff --git a/public/css/glucksspiel.css b/public/css/glucksspiel.css index 5802db5..459f7d6 100644 --- a/public/css/glucksspiel.css +++ b/public/css/glucksspiel.css @@ -17,7 +17,7 @@ flex-direction: column; gap: 6px; padding: 14px 10px; - background: rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); border-right: 2px solid #6b4b2a; min-width: 140px; flex-shrink: 0; @@ -41,15 +41,22 @@ text-align: left; white-space: nowrap; } -.gs-tab:hover { color: #f0d9a6; filter: brightness(1.2); } +.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; + 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); + width: 10px; + height: 10px; + border-radius: 50%; + flex-shrink: 0; + border: 1px solid rgba(255, 255, 255, 0.3); } /* ── Mittlere Spalte: Sammlung ───────────── */ @@ -92,7 +99,10 @@ overflow: visible; background: #1a0f04; cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; + transition: + transform 0.2s, + box-shadow 0.2s, + border-color 0.2s; aspect-ratio: 3/4; display: flex; flex-direction: column; @@ -100,7 +110,9 @@ .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); + 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 { @@ -114,67 +126,100 @@ } .gs-card.gs-card-selected { border-color: #f0d060; - box-shadow: 0 0 14px rgba(240,208,96,0.5); + box-shadow: 0 0 14px rgba(240, 208, 96, 0.5); } .gs-card img { - width: 100%; height: 100%; - object-fit: cover; display: block; + width: 100%; + height: 100%; + object-fit: cover; + display: block; border-radius: 6px 6px 0 0; } .gs-stat-atk { - position: absolute; right: 8px; top: 38%; + position: absolute; + right: 25px; + top: 40%; transform: translateY(-50%); - background: rgba(180,40,20,0.88); + 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; + border-radius: 45px; + color: #fff; + font-family: "Cinzel", serif; + font-size: 12px; + font-weight: bold; + padding: 2px 4px; + z-index: 5; } .gs-stat-def { - position: absolute; left: 8px; top: 38%; + position: absolute; + left: 25px; + top: 40%; transform: translateY(-50%); - background: rgba(20,80,180,0.88); + 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; + border-radius: 45px; + color: #fff; + font-family: "Cinzel", serif; + font-size: 12px; + font-weight: bold; + padding: 2px 4px; + z-index: 5; } .gs-stat-cd { position: absolute; - bottom: 6px; right: 5px; - width: 18px; height: 18px; + bottom: 14px; + right: 20px; + width: 25px; + height: 25px; border-radius: 50%; - background: rgba(0,0,0,0.75); + 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; + display: flex; + align-items: center; + justify-content: center; + font-family: "Cinzel", serif; + font-size: 20px; + 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; + 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); + 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: 72%; - left: 0; right: 0; - display: flex; justify-content: center; flex-wrap: wrap; - gap: 1px; padding: 0 4px; - pointer-events: none; z-index: 4; + 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: 82%; - left: 0; right: 0; + left: 0; + right: 0; display: flex; justify-content: center; gap: 3px; @@ -194,33 +239,48 @@ line-height: 1; } .gs-badge-range { - background: rgba(30,20,0,0.82); + background: rgba(30, 20, 0, 0.82); border: 1px solid #e8b84b; color: #e8b84b; } .gs-badge-race { - background: rgba(0,25,0,0.82); + 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; + 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; + 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: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; + border-color: #f0d060; + color: #fff5cc; } /* ── Rechte Spalte: Kombinier-Panel ──────── */ @@ -230,7 +290,7 @@ display: flex; flex-direction: column; overflow: hidden; - background: rgba(0,0,0,0.15); + background: rgba(0, 0, 0, 0.15); } .gs-combine-hint { @@ -268,28 +328,40 @@ border-radius: 8px; overflow: visible; background: #0f1a04; - transition: transform 0.2s, border-color 0.2s; + transition: + transform 0.2s, + border-color 0.2s; } .gs-stack-card img { - width: 100%; height: 100%; - object-fit: cover; display: block; + 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; + 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; + font-family: "Cinzel", serif; + font-size: 12px; + color: #f0d9a6; + text-align: center; border-top: 1px solid #3a2810; flex-shrink: 0; min-height: 28px; @@ -313,7 +385,7 @@ .gs-combine-btn:hover:not(:disabled) { border-color: #f0d060; color: #fff; - box-shadow: 0 0 12px rgba(200,160,60,0.4); + box-shadow: 0 0 12px rgba(200, 160, 60, 0.4); } .gs-combine-btn:disabled { opacity: 0.35; @@ -322,11 +394,25 @@ /* ── Empty / Loading ─────────────────────── */ .gs-empty { - grid-column: 1 / -1; text-align: center; - color: #8b6a3c; font-size: 13px; padding: 30px 0; + 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; + 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; + } } -@keyframes gs-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }