style(mobile): 调整移动端组件样式和布局

- 修改移动控制组件的类名和尺寸样式
- 更新移动头部组件的布局和间距配置
- 调整按钮和容器的宽度、内边距和外边距
- 优化响应式设计中的元素对齐方式
- 统一组件内的设计单位和样式规范

src/features/game/components/mobile/mobile-control.tsx

@@ -290,7 +290,7 @@ export function MobileControl() {
         <SmartBackground
           src={mobileAddReduceBg}
           size="100% 100%"
-          className="relative z-20 !ml-[calc(var(--design-unit)*-8)] flex h-full w-design-103 shrink-0 items-center justify-center gap-design-5 bg-center bg-no-repeat px-design-7 text-design-13 font-bold"
+          className="relative z-20 !ml-[calc(var(--design-unit)*-8)] pl-design-15 flex h-full w-design-103 shrink-0 items-center justify-center bg-center bg-no-repeat px-design-7 text-design-13 font-bold"
         >
           <button
             type="button"
@@ -306,10 +306,10 @@ export function MobileControl() {
             <SmartImage
               src={add}
               alt="decrease"
-              className="h-design-22 w-design-22"
+              className="h-design-16 w-design-16"
             />
           </button>
-          <div className="flex h-design-24 w-design-34 items-center justify-center rounded-sm bg-[#091118]">
+          <div className="flex h-design-24 w-design-20 items-center justify-center rounded-sm">
             {selectedBetQuantityLabel}
           </div>
           <button
@@ -326,7 +326,7 @@ export function MobileControl() {
             <SmartImage
               src={reduce}
               alt="increase"
-              className="h-design-22 w-design-22"
+              className="h-design-16 w-design-16"
             />
           </button>
         </SmartBackground>

src/features/game/components/mobile/mobile-header.tsx

@@ -102,7 +102,7 @@ export function MobileHeader() {
   return (
     <header className="relative z-30 h-design-72">
       <div className="border-b-2 border-[#787553] bg-[#020B14] flex h-design-33 w-full items-center px-design-10">
-        <div className="flex h-design-23 w-design-130 pr-design-10 shrink-0 items-center justify-center border-r border-[rgba(128,223,231,0.45)]">
+        <div className="flex h-design-23 min-w-0 flex-1 items-center justify-center border-r border-[rgba(128,223,231,0.45)] pr-design-10">
           <SmartImage
             src={logo}
             alt="logo"
@@ -112,7 +112,7 @@ export function MobileHeader() {
           />
         </div>
         {authStatus === 'authenticated' ? (
-          <div className="flex h-full min-w-0 flex-1 items-center justify-end gap-design-20 px-design-9">
+          <div className="flex h-full shrink-0 items-center justify-end gap-design-20 pl-design-18 pr-design-9">
             <button
               type="button"
               onClick={onOpenUserInfo}
@@ -160,7 +160,7 @@ export function MobileHeader() {
             </button>
           </div>
         ) : (
-          <div className="flex h-full min-w-0 flex-1 items-center justify-end gap-design-8 px-design-9">
+          <div className="flex h-full shrink-0 items-center justify-end gap-design-8 px-design-9">
             <button
               type="button"
               className={`${actionButtonClassName} w-design-72`}