Lock Android portrait via fullscreen then orientation.lock.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/styles/app.css

@@ -34,8 +34,8 @@ body {
 }
 
 /*
- * 手机横屏时不进入横屏布局：把 #root 旋成竖屏坐标系。
- * 能调用 screen.orientation.lock 的环境（如安卓已安装 PWA）则系统本身不转，此类样式不生效。
+ * 手机横屏兜底：JS 会写 #root 行内样式；此处仅约束 html/body。
+ * 安卓 Chrome 普通页需「全屏 + orientation.lock」才能系统级锁竖屏。
  */
 html.phone-portrait-lock.phone-landscape,
 html.phone-portrait-lock.phone-landscape body {
@@ -50,20 +50,22 @@ html.phone-portrait-lock.phone-landscape body {
   inset: 0;
 }
 
-html.phone-portrait-lock.phone-landscape #root {
-  position: absolute;
-  width: 100vh;
-  width: 100dvh;
-  height: 100vw;
-  height: 100dvw;
-  top: 100%;
-  top: 100dvh;
-  left: 0;
-  transform: rotate(-90deg);
-  transform-origin: left top;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: none;
+.portrait-lock-hint {
+  position: fixed;
+  left: 50%;
+  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
+  transform: translateX(-50%);
+  z-index: 10000;
+  margin: 0;
+  padding: 10px 16px;
+  border: 1px solid rgba(240, 185, 11, 0.45);
+  border-radius: 999px;
+  background: rgba(11, 14, 17, 0.92);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
 }
 
 button,