From 4cc2b70dbce40e5ab5399cffc79295d89b7e76e7 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Wed, 12 Nov 2025 23:17:54 +0100
Subject: [PATCH] fix: Significantly improve text and button visibility on
 match hero
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Back button: solid black/60 background with backdrop-blur instead of ghost
- Download Demo button: solid primary background instead of outline
- Map name: triple-layer text shadow for maximum contrast
- Score labels: full white with strong shadows, uppercase styling
- Score numbers: triple shadow with glow effect (0.95/0.8/0.6 opacity layers)
- Colon separator: full white with strong shadow
- Metadata text/icons: strong text shadows and drop-shadow filters
- Tabs container: increased to black/70 with stronger backdrop-blur

All text elements now have multiple layers of shadows for readability
on bright map backgrounds like de_dust2.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/match/[id]/+layout.svelte | 46 ++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/routes/match/[id]/+layout.svelte b/src/routes/match/[id]/+layout.svelte
index c3f563e..b810020 100644
--- a/src/routes/match/[id]/+layout.svelte
+++ b/src/routes/match/[id]/+layout.svelte
@@ -57,7 +57,7 @@
 		<div class="mb-4">
 			<button
 				onclick={handleBack}
-				class="btn btn-ghost btn-sm gap-2 text-white/80 hover:text-white"
+				class="btn btn-sm gap-2 bg-black/60 text-white backdrop-blur-sm hover:bg-black/80"
 			>
 				<ArrowLeft class="h-4 w-4" />
 				<span>Back to Matches</span>
@@ -70,10 +70,17 @@
 				{#if match.map}
 					<Badge variant="default" size="lg">{match.map}</Badge>
 				{/if}
-				<h1 class="mt-2 text-4xl font-bold text-white drop-shadow-lg">{mapName}</h1>
+				<h1
+					class="mt-2 text-4xl font-bold text-white"
+					style="text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);"
+				>
+					{mapName}
+				</h1>
 			</div>
 			{#if match.demo_parsed}
-				<button class="btn btn-outline btn-primary gap-2">
+				<button
+					class="btn gap-2 bg-primary/90 text-primary-content backdrop-blur-sm hover:bg-primary"
+				>
 					<Download class="h-4 w-4" />
 					Download Demo
 				</button>
@@ -83,20 +90,32 @@
 		<!-- Score -->
 		<div class="mb-6 flex items-center justify-center gap-6">
 			<div class="text-center">
-				<div class="text-sm font-medium text-white/90 drop-shadow-md">TERRORISTS</div>
+				<div
+					class="text-sm font-medium uppercase tracking-wider text-white"
+					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
+				>
+					Terrorists
+				</div>
 				<div
 					class="font-mono text-5xl font-bold text-terrorist"
-					style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
+					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
 				>
 					{match.score_team_a}
 				</div>
 			</div>
-			<div class="text-3xl font-bold text-white/60 drop-shadow-lg">:</div>
+			<div class="text-3xl font-bold text-white" style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);">
+				:
+			</div>
 			<div class="text-center">
-				<div class="text-sm font-medium text-white/90 drop-shadow-md">COUNTER-TERRORISTS</div>
+				<div
+					class="text-sm font-medium uppercase tracking-wider text-white"
+					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
+				>
+					Counter-Terrorists
+				</div>
 				<div
 					class="font-mono text-5xl font-bold text-ct"
-					style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
+					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
 				>
 					{match.score_team_b}
 				</div>
@@ -104,13 +123,16 @@
 		</div>
 
 		<!-- Match Meta -->
-		<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white drop-shadow-md">
+		<div
+			class="flex flex-wrap items-center justify-center gap-4 text-sm text-white"
+			style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
+		>
 			<div class="flex items-center gap-2">
-				<Calendar class="h-4 w-4" />
+				<Calendar class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
 				<span>{formattedDate}</span>
 			</div>
 			<div class="flex items-center gap-2">
-				<Clock class="h-4 w-4" />
+				<Clock class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
 				<span>{duration}</span>
 			</div>
 			<Badge variant="info" size="sm">MR12 ({match.max_rounds} rounds)</Badge>
@@ -120,7 +142,7 @@
 		</div>
 
 		<!-- Tabs -->
-		<div class="mt-6 rounded-lg bg-black/50 p-4 backdrop-blur-sm">
+		<div class="mt-6 rounded-lg bg-black/70 p-4 backdrop-blur-md">
 			<Tabs {tabs} variant="bordered" size="md" />
 		</div>
 	</div>