feat: build dark fantasy application shell

apps/web/src/app/layout/game-footer/game-footer.component.html

@@ -0,0 +1,5 @@
+<footer class="game-footer">
+  <span class="game-footer__status"><span aria-hidden="true">●</span> Verbindung bereit</span>
+  <span class="game-footer__ornament" aria-hidden="true"></span>
+  <span>Aschenfelder</span>
+</footer>

apps/web/src/app/layout/game-footer/game-footer.component.scss

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+}
+
+.game-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  min-block-size: 3.3rem;
+  padding-inline: var(--ar-space-5);
+  border-block-start: 1px solid var(--ar-border-highlight);
+  color: var(--ar-text-muted);
+  background: var(--ar-panel);
+  font-size: var(--ar-font-sm);
+}
+
+.game-footer > :last-child {
+  justify-self: end;
+}
+
+.game-footer__status span {
+  color: var(--ar-success);
+}
+
+.game-footer__ornament {
+  inline-size: 0.8rem;
+  block-size: 0.8rem;
+  transform: rotate(45deg);
+  border: 1px solid var(--ar-gold);
+}

apps/web/src/app/layout/game-footer/game-footer.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-game-footer',
+  templateUrl: './game-footer.component.html',
+  styleUrl: './game-footer.component.scss',
+})
+export class GameFooterComponent {}