Remove PixiJS dependencies and references from the project, transitioning to a plain DOM approach for UI rendering. Update documentation to reflect these changes and enhance the layout and structure of the game screen for improved user experience.

src/HSchool.Client/src/style.css

@@ -24,7 +24,7 @@ body {
 }
 
 #app {
-  max-width: 900px;
+  max-width: 1080px;
   margin: 0 auto;
   padding: 32px 20px 72px;
 }
@@ -191,6 +191,101 @@ body {
   margin-top: 20px;
 }
 
+.screen.game .clock {
+  padding: 20px;
+}
+
+.screen.game .clock__time {
+  font-size: 40px;
+}
+
+/* Manager */
+
+.manager {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(200px, 1fr) minmax(240px, 1.35fr);
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.panel {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-raised);
+}
+
+.panel__title {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.panel__name {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.panel__section {
+  margin-top: 12px;
+}
+
+.panel__section-title {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+}
+
+.panel__empty {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree .tree {
+  margin-top: 2px;
+}
+
+.tree__button {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tree__button:hover {
+  border-color: var(--border);
+}
+
+.tree__button--active {
+  border-color: var(--accent);
+  background: rgba(76, 201, 240, 0.16);
+  color: var(--accent);
+}
+
+@media (max-width: 800px) {
+  .manager {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* Controls */
 
 .button {