fix(office-ui): resolve blank/frozen office canvas and add sidebar collapse

Office canvas fixes:
- Lazy-create the Phaser game via ResizeObserver on the first non-zero
  layout instead of creating it inside the display:none office page with
  inline px fallback sizes. Phaser's RESIZE-mode 500ms parent poll has no
  zero guard, so the old path shrank the canvas to 0x0 (blue-black screen)
  and later restored it to a stale wrong size (clipped office).
- On unhide, re-measure with scale.getParentBounds() before scale.refresh();
  plain scale.resize() is clobbered by the stale cached parentSize in
  RESIZE mode.
- Fix whole-game freeze when clicking an office card: camera effects
  resolve ease names via EaseMap, which has no 'Cubic.Out' key, leaving
  effect.ease undefined and killing the RAF loop with a per-frame
  TypeError. Use 'Cubic.easeOut' for cam.pan in panToOffice/resetCameraView.
- Bound GameBridge queues (latest snapshot supersedes, event queue capped)
  since game creation is now deferred until the Office page is first opened.

Sidebar:
- Add a collapse/expand handle on the canvas/sidebar boundary with a 220ms
  grid transition; state persists in localStorage. The canvas follows the
  column change automatically through the ResizeObserver path. Stacked
  (<=1024px) layout collapses the bottom panel and moves the handle to the
  bottom edge.

README:
- Add Simplified Chinese translation (README.zh-CN.md) with a language
  switcher in both files; fix stale TOC entries in the English README.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

opc/plugins/office_ui/frontend_src/index.css

@@ -478,12 +478,22 @@ html, body, #root {
   height: 100%;
   min-height: 0;
   overflow: hidden;
+  /* Canvas follows via ResizeObserver in PhaserGame, so the column change animates cleanly */
+  transition: grid-template-columns 220ms ease;
 }
 
 .main-grid.hidden {
   display: none;
 }
 
+.main-grid.sidebar-collapsed {
+  grid-template-columns: 1fr 0px;
+}
+
+.main-grid.sidebar-collapsed .sidebar {
+  border-left: none;
+}
+
 /* ── Canvas ─────────────────────────────────────────── */
 
 .canvas-wrap {
@@ -535,6 +545,35 @@ html, body, #root {
   transform: scale(1.05);
 }
 
+/* Handle on the canvas/sidebar boundary that collapses or expands the side panel */
+.sidebar-collapse-btn {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 56px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-right: none;
+  border-radius: 8px 0 0 8px;
+  background: rgba(20, 27, 43, 0.94);
+  color: var(--text-secondary);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 6;
+  transition: background 150ms, color 150ms;
+}
+
+.sidebar-collapse-btn:hover {
+  background: var(--surface-hover);
+  color: var(--text);
+}
+
 /* ── Sidebar ────────────────────────────────────────── */
 
 .sidebar {
@@ -1314,6 +1353,14 @@ html, body, #root {
   .main-grid {
     grid-template-columns: 1fr;
     grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
+    transition: grid-template-rows 220ms ease;
+  }
+  .main-grid.sidebar-collapsed {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr) 0;
+  }
+  .main-grid.sidebar-collapsed .sidebar {
+    border-top: none;
   }
   .sidebar {
     border-left: none;
@@ -1321,6 +1368,22 @@ html, body, #root {
     max-height: 48vh;
     min-height: 0;
   }
+  /* Sidebar stacks below the canvas here — move the handle to the bottom edge */
+  .sidebar-collapse-btn {
+    top: auto;
+    bottom: 0;
+    right: 50%;
+    transform: translateX(50%);
+    width: 56px;
+    height: 18px;
+    border: 1px solid var(--border);
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+  }
+  .sidebar-collapse-btn .collapse-glyph {
+    display: inline-block;
+    transform: rotate(90deg);
+  }
   .stat-chips { display: none; }
 }