From 147904978548ac4e5a3763df4cce9e3b35834442 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Mon, 2 Feb 2026 15:38:02 +0100
Subject: [PATCH] Switch to playful Baloo/Nunito web fonts

---
 wwwroot/index.html |  5 ++++-
 wwwroot/styles.css | 11 +++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/wwwroot/index.html b/wwwroot/index.html
index 36ce481..d0b2eaf 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -4,6 +4,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>CoopGameChooser</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
   <!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
   <meta name="app-base" content="">
@@ -55,8 +58,8 @@
 
   <section>
   <div class="status-bar">
+    <img src="logo.png" alt="CoopGameChooser logo" class="logo-mark">
     <div class="status-left">
-      <img src="logo.png" alt="CoopGameChooser logo" class="logo-mark">
       <span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
       <a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>
     </div>
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index a101430..f818959 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -1,5 +1,5 @@
 :root {
-  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+  font-family: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
   background: #f6e9d6;
   color: #2c1c0d;
 }
@@ -23,7 +23,7 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  gap: 20px;
+  gap: 30px;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid #e3d4bd;
   border-radius: 12px;
@@ -31,12 +31,11 @@
   padding: 10px 14px;
 }
 .status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
-.inline-link { font-size: 14px; }
+.inline-link { font-size: 14px; margin-left: 5px; }
 .logo-mark {
-  height: 44px;
+  height: 60px;
+  margin: -10px;
   width: auto;
-  object-fit: contain;
-  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
 }
 
 .counts {