Changes

src/components/MobileControlsDock.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+type MobileControlsDockProps = {
+  children: React.ReactNode;
+  /** When false, renders nothing. */
+  visible?: boolean;
+  /** Optional override for the outer z-index. */
+  zIndexClassName?: string;
+};
+
+/**
+ * Fixed bottom dock for mobile game controls.
+ * - Always visible on screen
+ * - Respects iOS safe-area
+ * - Keeps design tokens (no raw colors)
+ */
+export function MobileControlsDock({
+  children,
+  visible = true,
+  zIndexClassName = "z-[70]",
+}: MobileControlsDockProps) {
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-x-0 bottom-0 ${zIndexClassName} pointer-events-none pb-[env(safe-area-inset-bottom)] px-3`}
+    >
+      <div className="mx-auto w-full max-w-[520px] pointer-events-auto">
+        <div className="border border-primary/30 bg-background/85 backdrop-blur-md box-glow-strong rounded-lg p-3">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Spacer to prevent fixed dock from covering page content in scroll containers. */
+export function MobileControlsSpacer({ heightClassName = "h-40" }: { heightClassName?: string }) {
+  return <div className={`md:hidden ${heightClassName}`} aria-hidden="true" />;
+}