feat: tablet-first UX overhaul with wizard improvements

- Tablet-first responsive scoreboard: whole player card is tap target
- Per-step wizard backgrounds and live summary panel
- Larger touch targets, safe-area handling, reduced-motion support
- German UI error strings in App.tsx
- Updated SOUL.md and README.md for current architecture
- Cleanup: removed legacy components, .cursor/, UI_IMPROVEMENTS.md
- Renamed package to bscscore, fixed TOTAL_WIZARD_STEPS

src/lib/features/new-game/components/NameEntryModal.module.css

@@ -1,66 +1,81 @@
 .modalOverlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 16px;
+  padding: var(--space-lg);
+  padding-top: calc(var(--space-lg) + var(--safe-area-top));
+  padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
 }
 
 .modalContent {
   width: min(420px, 100%);
-  background: var(--color-surface);
+  background: linear-gradient(180deg, #2a2a2a 0%, var(--color-surface) 100%);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  padding: 16px;
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  padding: var(--space-xl);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--space-md);
 }
 
 .modalTitle {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl);
+  font-weight: 700;
   color: var(--color-text);
 }
 
 .modalInput {
   width: 100%;
+  min-height: var(--touch-target-comfortable);
+  font-size: max(16px, var(--font-size-base));
 }
 
 .modalActions {
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  justify-content: stretch;
+  gap: var(--space-md);
+  flex-wrap: wrap;
 }
 
-.actionButton {
-  border: 1px solid var(--color-border);
-  background: var(--color-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-md);
-  padding: 10px 14px;
-  cursor: pointer;
-  min-height: var(--touch-target-min);
-}
-
-.actionButton:hover,
-.actionButton:focus {
-  border-color: var(--color-primary);
-  outline: none;
-}
-
-.confirmButton {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: #fff;
+.modalActionButton {
+  flex: 1;
+  min-width: 120px;
 }
 
 .errorText {
   color: var(--color-danger);
-  font-size: 0.9rem;
+  font-size: var(--font-size-sm);
   margin: 0;
+  font-weight: 500;
+}
+
+@media (max-width: 600px) {
+  .modalOverlay {
+    padding: 16px;
+    padding-top: calc(16px + var(--safe-area-top));
+    padding-bottom: calc(16px + var(--safe-area-bottom));
+    align-items: stretch;
+  }
+
+  .modalContent {
+    width: 100%;
+    flex: 1;
+    max-height: none;
+    justify-content: center;
+  }
+
+  .modalActions {
+    flex-direction: column;
+  }
+
+  .modalActionButton {
+    width: 100%;
+    min-width: 0;
+  }
 }