diff --git a/css/style.css b/css/style.css
index 22aec4e..2f407b9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,34 +1,157 @@
-/* Mobile-first styles */
-html,body,#stage{height:100%;margin:0;padding:0}
-html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
-body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#111;color:#fff}
-#stage{position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
-#overlay{position:absolute;left:12px;right:12px;top:18px;text-align:center}
-#overlay h1{margin:0;font-size:20px;letter-spacing:0.5px}
-.hint{opacity:.7;font-size:13px}
+/* ── Reset & base ── */
+html,body,#stage { height:100%; margin:0; padding:0; }
+html,body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
 
-.finger{position:absolute;pointer-events:none;width:88px;height:88px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;background:rgba(255,255,255,0.06);border:3px solid rgba(255,255,255,0.12);backdrop-filter: blur(6px)}
-.finger .label{font-size:18px}
-.finger.highlight{border-color:#ffd54f;box-shadow:0 0 24px rgba(255,213,79,0.18)}
-.finger.winner{background:linear-gradient(135deg,#66ff99,#00b894);border-color:#00a86b;color:#00311a;box-shadow:0 8px 30px rgba(0,168,107,0.28);transform:translate(-50%,-50%) scale(1.05)}
-.finger.lost{opacity:0;transform:translate(-50%,-50%) scale(0.6);transition:all 350ms ease}
-.finger{transition:all 120ms linear}
-
-@media (min-width:600px){
-  .finger{width:72px;height:72px}
-  .finger .label{font-size:16px}
+body {
+  font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
+  background: #0c0c14;
+  color: #fff;
+  overflow: hidden;
 }
 
-.pulse{animation:pulse 1200ms infinite}
-@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
+/* Subtle ambient background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(120,60,255,0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 55% 40% at 90% 110%, rgba(0,180,130,0.07) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
 
-.top-center-hint{position:absolute;left:50%;transform:translateX(-50%);top:8px;font-size:12px;opacity:.9}
+/* ── Stage ── */
+#stage {
+  position: relative;
+  overflow: hidden;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 1;
+}
 
-/* Spinner visuals (subtle ring around centroid while selecting) */
-#spinner{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transform-origin:0 0}
-#spinner .ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;border:2px dashed rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.35)}
-#spinner .pointer{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;background:#ffd54f;border-radius:50%;box-shadow:0 6px 18px rgba(255,213,79,0.18)}
+/* ── Overlay card ── */
+#overlay {
+  position: absolute;
+  left: 50%;
+  top: 28px;
+  transform: translateX(-50%);
+  text-align: center;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.09);
+  border-radius: 20px;
+  padding: 20px 28px 16px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 4px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
+  pointer-events: none;
+  width: max-content;
+  max-width: calc(100vw - 48px);
+  z-index: 10;
+}
 
-/* Transition helpers */
-.finger{transition:transform 130ms linear, opacity 220ms ease, border-color 160ms ease}
+#overlay h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  background: linear-gradient(135deg, #c084fc 0%, #818cf8 45%, #34d399 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 
+#overlay p {
+  margin: 0 0 4px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(255,255,255,0.65);
+}
+
+.hint {
+  font-size: 12px !important;
+  color: rgba(255,255,255,0.35) !important;
+  margin-top: 4px !important;
+}
+
+/* ── Finger circles ── */
+.finger {
+  position: absolute;
+  pointer-events: none;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  transform: translate(-50%,-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: rgba(255,255,255,0.88);
+  background: rgba(255,255,255,0.07);
+  border: 2px solid rgba(255,255,255,0.14);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow:
+    0 0 0 1px rgba(255,255,255,0.04),
+    0 8px 28px rgba(0,0,0,0.35);
+  transition:
+    transform 130ms ease,
+    opacity 250ms ease,
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.finger .label {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+/* Highlight: amber glow */
+.finger.highlight {
+  border-color: #f59e0b;
+  background: rgba(245,158,11,0.14);
+  color: #fef3c7;
+  box-shadow:
+    0 0 0 2px rgba(245,158,11,0.18),
+    0 0 32px rgba(245,158,11,0.28),
+    0 8px 28px rgba(0,0,0,0.35);
+}
+
+/* Winner: green gradient + strong glow */
+.finger.winner {
+  background: linear-gradient(135deg, #34d399, #059669);
+  border-color: #10b981;
+  color: #022c22;
+  font-weight: 900;
+  box-shadow:
+    0 0 0 3px rgba(52,211,153,0.28),
+    0 0 48px rgba(52,211,153,0.35),
+    0 8px 30px rgba(0,0,0,0.4);
+  transform: translate(-50%,-50%) scale(1.08);
+}
+
+/* Lost: shrink and fade */
+.finger.lost {
+  opacity: 0;
+  transform: translate(-50%,-50%) scale(0.45);
+  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1);
+}
+
+/* Pulse animation for winner */
+.pulse { animation: pulse 1400ms ease-in-out infinite; }
+
+@keyframes pulse {
+  0%   { transform: translate(-50%,-50%) scale(1.08); }
+  50%  { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
+  100% { transform: translate(-50%,-50%) scale(1.08); }
+}
+
+/* ── Responsive ── */
+@media (min-width: 600px) {
+  .finger { width: 80px; height: 80px; }
+  .finger .label { font-size: 19px; }
+}
diff --git a/index.html b/index.html
index 937191f..f237bea 100644
--- a/index.html
+++ b/index.html
@@ -3,37 +3,61 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
-  <title>Finger Chooser — Wer bleibt übrig?</title>
-  <meta name="description" content="Finger Chooser: Lege 2 oder mehr Finger auf das Display. Ein Finger wird per Zufall ausgewählt. Optimiert für Mobile.">
+
+  <title>Finger Chooser – Zufällig einen Finger auswählen</title>
+  <meta name="description" content="Lege 2–5 Finger gleichzeitig aufs Display. Die App wählt per Zufallsanimation einen Finger aus. Kostenlos, kein Download – direkt im Browser nutzbar.">
+  <meta name="keywords" content="finger chooser, finger auswählen, zufälliger finger, wer ist dran, finger roulette, multi touch spiel, gruppenspiel smartphone">
   <meta name="robots" content="index,follow">
-  <link rel="canonical" href="/index.html">
+  <link rel="canonical" href="/">
+
+  <!-- Open Graph -->
   <meta property="og:type" content="website">
-  <meta property="og:title" content="Finger Chooser — Wer bleibt übrig?">
-  <meta property="og:description" content="Lege mehrere Finger auf das Display und lass einen zufällig auswählen. Optimiert für Mobile.">
-  <meta name="theme-color" content="#111111">
+  <meta property="og:title" content="Finger Chooser – Zufällig einen Finger auswählen">
+  <meta property="og:description" content="Lege 2–5 Finger gleichzeitig aufs Display. Die App wählt per Zufallsanimation einen Finger aus. Kostenlos, direkt im Browser.">
+  <meta property="og:locale" content="de_DE">
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="Finger Chooser – Zufällig einen Finger auswählen">
+  <meta name="twitter:description" content="Lege 2–5 Finger aufs Display – die App wählt per Animation zufällig einen aus. Kostenlos im Browser.">
+
+  <!-- PWA / Mobile -->
+  <meta name="theme-color" content="#0c0c14">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Finger Chooser">
+
   <link rel="stylesheet" href="css/style.css">
+
   <script type="application/ld+json">
-  {"@context":"https://schema.org","@type":"WebApplication","name":"Finger Chooser","description":"Lege mehrere Finger auf das Display und ein Finger wird zufällig ausgewählt.","applicationCategory":"Game"}
+  {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "Finger Chooser",
+    "description": "Lege mehrere Finger auf das Display – ein Finger wird per Zufallsanimation ausgewählt. Ideal für Gruppenentscheidungen.",
+    "applicationCategory": "GameApplication",
+    "operatingSystem": "Any",
+    "browserRequirements": "Requires JavaScript and a touch-capable browser",
+    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
+    "inLanguage": "de"
+  }
   </script>
 </head>
 <body>
   <main id="stage">
     <div id="overlay">
       <h1>Finger Chooser</h1>
-      <p>Lege 2 oder mehr Finger auf das Display — einer wird zufällig ausgewählt.</p>
-      <p class="hint">Hebe alle Finger an, um neu zu starten.</p>
+      <p>Lege 2 oder mehr Finger auf das Display —<br>einer wird zufällig ausgewählt.</p>
+      <p class="hint">Alle Finger anheben, um neu zu starten.</p>
     </div>
   </main>
 
   <script src="js/app.js"></script>
   <noscript>
-    <style>
-      #overlay{opacity:1;background:transparent}
-    </style>
-    <div style="padding:12px;text-align:center;background:#222;color:#fff">Bitte aktiviere JavaScript, um die Anwendung zu nutzen.</div>
+    <div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c14;color:#fff;font-family:system-ui,sans-serif;text-align:center;padding:24px">
+      Bitte aktiviere JavaScript, um die Anwendung zu nutzen.
+    </div>
   </noscript>
 </body>
 </html>
-
-</body>
-</html>