From b35687d09521edf014aa8e90c36fbc2392701861 Mon Sep 17 00:00:00 2001
From: Jeremy Brandenburger <brandenburger@vgak.lan>
Date: Tue, 31 Mar 2026 18:42:48 +0200
Subject: [PATCH] fix: larger stratagem icon with glow, readable queue labels

---
 CHANGELOG.md      |  8 +++++
 public/styles.css | 81 ++++++++++++++++++++++++++++-------------------
 2 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 419f8b8..6059fd8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog – helldivers-trainer
 
+## [2.1.2] – 2026-03-31
+
+### Changed
+- **Stratagem main icon**: Größer (86→110px, mobil 70→88px), hellerer Gold-Filter mit `drop-shadow` Glow, leuchtender Kreis-Hintergrund für besseren Kontrast
+- **Queue preview**: Icons größer (36→44px), Labels wrappen jetzt über 2 Zeilen statt abzuschneiden, Breite von 60→72px pro Item, Abstufung der Opazität (75%/55%/40% statt 70%/45%)
+
+---
+
 ## [2.1.1] – 2026-03-31
 
 ### Fixed
diff --git a/public/styles.css b/public/styles.css
index 703340f..7ee7b2b 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1658,7 +1658,7 @@ select option { background: var(--bg-surface2); }
   .page-title { font-size: 1.3rem; }
   .match-wins { font-size: 1.8rem; }
   .match-status-text { font-size: 1.2rem; }
-  .stratagem-icon-lg { width: 70px; height: 70px; }
+  .stratagem-icon-lg { width: 88px; height: 88px; }
 }
 
 /* ── Stratagem icons ─────────────────────────────────────────────────────── */
@@ -1666,23 +1666,35 @@ select option { background: var(--bg-surface2); }
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 10px;
-  height: 90px;
+  margin-bottom: 14px;
+  height: 130px;
+}
+
+/* Circular glowing backdrop behind the main icon */
+.stratagem-icon-wrap::before {
+  content: '';
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,210,0,0.10) 0%, rgba(255,210,0,0.03) 60%, transparent 80%);
+  border: 1px solid rgba(255,210,0,0.15);
+  pointer-events: none;
 }
 
 .stratagem-icon-lg {
-  width: 86px;
-  height: 86px;
+  width: 110px;
+  height: 110px;
   object-fit: contain;
-  filter: invert(1) sepia(1) saturate(3) hue-rotate(0deg) brightness(1.1);
-  /* Converts monochrome SVG → gold/yellow to match theme */
-  opacity: 0.92;
-  transition: transform 0.25s ease, opacity 0.2s;
+  filter: invert(1) sepia(1) saturate(4) hue-rotate(0deg) brightness(1.25) drop-shadow(0 0 8px rgba(255,210,0,0.4));
+  opacity: 1;
+  transition: transform 0.25s ease, filter 0.2s;
+  position: relative;
 }
 
 .stratagem-icon-lg.icon-complete {
-  transform: scale(1.12);
-  filter: invert(1) sepia(1) saturate(6) hue-rotate(0deg) brightness(1.3);
+  transform: scale(1.14);
+  filter: invert(1) sepia(1) saturate(6) hue-rotate(0deg) brightness(1.5) drop-shadow(0 0 14px rgba(255,210,0,0.7));
 }
 
 .stratagem-icon-lg.icon-wrong {
@@ -1690,8 +1702,8 @@ select option { background: var(--bg-surface2); }
 }
 
 .stratagem-icon-fallback {
-  font-size: 3rem;
-  opacity: 0.25;
+  font-size: 3.5rem;
+  opacity: 0.3;
 }
 
 .stratagem-icon-md {
@@ -1724,50 +1736,55 @@ select option { background: var(--bg-surface2); }
 /* ── Stratagem queue (upcoming stratagems) ───────────────────────────────── */
 .stratagem-queue {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  gap: 10px;
-  margin: 6px 0 10px;
-  min-height: 52px;
+  gap: 16px;
+  margin: 4px 0 12px;
+  min-height: 72px;
 }
 
 .queue-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  opacity: 0.45;
+  gap: 5px;
+  opacity: 0.40;
   transition: opacity 0.2s;
+  width: 72px;
 }
 
-.queue-item:first-child { opacity: 0.7; }
+.queue-item:first-child  { opacity: 0.75; }
+.queue-item:nth-child(2) { opacity: 0.55; }
 
 .queue-icon {
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   object-fit: contain;
-  filter: invert(1) sepia(1) saturate(2) hue-rotate(0deg) brightness(1);
+  filter: invert(1) sepia(1) saturate(3) hue-rotate(0deg) brightness(1.15);
 }
 
 .queue-icon-fallback {
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   background: var(--bg-surface2);
-  border-radius: 6px;
+  border-radius: 8px;
 }
 
 .queue-label {
-  font-size: 0.6rem;
+  font-size: 0.62rem;
   color: var(--text-muted);
-  max-width: 60px;
+  max-width: 72px;
   text-align: center;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.3;
+  word-break: break-word;
 }
 
 /* ── Score popup ─────────────────────────────────────────────────────────── */
@@ -1901,6 +1918,6 @@ select option { background: var(--bg-surface2); }
 @media (max-width: 768px) {
   .summary-grid { grid-template-columns: repeat(2, 1fr); }
   .admin-layout { grid-template-columns: 1fr; }
-  .stratagem-icon-lg { width: 70px; height: 70px; }
+  .stratagem-icon-lg { width: 88px; height: 88px; }
   .stratagem-queue { gap: 8px; }
 }