From 0cd85ae2870ed6f037d268eb7a5cd9e6d9fa87ba Mon Sep 17 00:00:00 2001
From: kang <kangdeng28@gmail.com>
Date: Thu, 21 May 2026 17:28:06 +0800
Subject: [PATCH] feat: enhance UI consistency and improve spacing across
 components

- Added styles for player-side toast notifications to improve user feedback.
- Adjusted padding and spacing in various components for a more cohesive layout.
- Updated card and dialog components to streamline visual hierarchy and enhance readability.
- Refactored player panel and navigation elements for better alignment and user experience.
---
 .../(player)/(main)/results/[drawNo]/page.tsx |  2 +-
 src/app/(player)/(main)/results/page.tsx      |  2 +-
 src/app/globals.css                           | 28 +++++++
 src/components/layout/player-app-shell.tsx    |  2 +-
 src/components/layout/player-bottom-nav.tsx   | 11 +--
 src/components/layout/player-panel.tsx        | 79 +++++++++++--------
 src/components/ui/card.tsx                    |  8 +-
 src/components/ui/sonner.tsx                  | 38 +++++----
 src/features/hall/hall-bet-preview-dialog.tsx | 12 +--
 src/features/hall/hall-bet-result-dialog.tsx  | 14 ++--
 src/features/hall/hall-betting-grid.tsx       | 25 ++++--
 src/features/hall/hall-draw-panel.tsx         |  8 +-
 src/features/hall/hall-play-catalog-panel.tsx |  2 +-
 src/features/hall/hall-screen.tsx             | 75 ++++++++++--------
 src/features/hall/hall-wallet-strip.tsx       |  6 +-
 src/features/hall/jackpot-burst-overlay.tsx   |  6 +-
 .../orders/ticket-order-detail-screen.tsx     | 14 +---
 .../orders/ticket-orders-list-screen.tsx      |  8 +-
 src/features/player/entry-gate.tsx            |  4 +-
 src/features/results/check-winning-screen.tsx |  6 +-
 .../results/draw-result-detail-screen.tsx     | 14 +---
 .../results/draw-results-list-screen.tsx      |  8 +-
 .../results/twenty-three-results-grid.tsx     |  2 +-
 src/features/rules/play-rules-screen.tsx      |  3 +-
 src/features/wallet/transfer-in-screen.tsx    |  2 +-
 src/features/wallet/transfer-out-screen.tsx   |  2 +-
 src/features/wallet/wallet-logs-block.tsx     |  2 +-
 src/features/wallet/wallet-logs-screen.tsx    |  6 +-
 src/features/wallet/wallet-screen.tsx         |  8 +-
 .../wallet/wallet-transfer-dialogs.tsx        |  8 +-
 src/features/wallet/wallet-transfer-forms.tsx | 15 ++--
 src/lib/player-spacing.ts                     | 11 +++
 src/lib/utils.ts                              | 12 +++
 33 files changed, 253 insertions(+), 190 deletions(-)
 create mode 100644 src/lib/player-spacing.ts

diff --git a/src/app/(player)/(main)/results/[drawNo]/page.tsx b/src/app/(player)/(main)/results/[drawNo]/page.tsx
index db354ca..f8c170b 100644
--- a/src/app/(player)/(main)/results/[drawNo]/page.tsx
+++ b/src/app/(player)/(main)/results/[drawNo]/page.tsx
@@ -9,7 +9,7 @@ export default async function DrawResultByNoPage(props: PageProps) {
   const drawNo = decodeURIComponent(raw);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-3">
       <DrawResultDetailScreen drawNo={drawNo} />
     </div>
   );
diff --git a/src/app/(player)/(main)/results/page.tsx b/src/app/(player)/(main)/results/page.tsx
index 2abd1d7..2c963c2 100644
--- a/src/app/(player)/(main)/results/page.tsx
+++ b/src/app/(player)/(main)/results/page.tsx
@@ -2,7 +2,7 @@ import { DrawResultsListScreen } from "@/features/results/draw-results-list-scre
 
 export default function DrawResultsHistoryPage() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-3">
       <DrawResultsListScreen />
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index c56032b..b441295 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -127,4 +127,32 @@
   html {
     @apply font-sans;
   }
+}
+
+/* 玩家端 Toast：顶部居中、紧凑尺寸（位置见 components/ui/sonner.tsx） */
+[data-sonner-toaster] {
+  --width: min(280px, calc(100vw - 24px));
+}
+
+[data-sonner-toast][data-styled="true"] {
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 1.35;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
+}
+
+[data-sonner-toast][data-styled="true"] [data-title] {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+[data-sonner-toast][data-styled="true"] [data-description] {
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+[data-sonner-toast][data-styled="true"] [data-icon] svg {
+  width: 14px;
+  height: 14px;
 }
\ No newline at end of file
diff --git a/src/components/layout/player-app-shell.tsx b/src/components/layout/player-app-shell.tsx
index 0315d63..47f81fe 100644
--- a/src/components/layout/player-app-shell.tsx
+++ b/src/components/layout/player-app-shell.tsx
@@ -20,7 +20,7 @@ export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
   return (
     <div className="min-h-dvh bg-white text-foreground">
       <NetworkStatusBanner />
-      <main className="mx-auto flex w-full max-w-lg flex-col pb-[calc(4rem+env(safe-area-inset-bottom,0px)+1.5rem)]">
+      <main className="mx-auto flex w-full max-w-lg flex-col pb-[calc(3.5rem+env(safe-area-inset-bottom,0px)+0.75rem)]">
         {children}
       </main>
       <PlayerBottomNav />
diff --git a/src/components/layout/player-bottom-nav.tsx b/src/components/layout/player-bottom-nav.tsx
index 41ecab7..12adfa5 100644
--- a/src/components/layout/player-bottom-nav.tsx
+++ b/src/components/layout/player-bottom-nav.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import { BarChart3, BookOpen, ClipboardList, Home, Wallet } from "lucide-react";
+import { BarChart3, ClipboardList, Home, Wallet } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
@@ -30,13 +30,6 @@ const tabs = [
     icon: ClipboardList,
     match: (p: string) => p === "/orders" || p.startsWith("/orders/"),
   },
-  {
-    href: "/rules",
-    labelKey: "nav.rules",
-    labelDefault: "规则",
-    icon: BookOpen,
-    match: (p: string) => p === "/rules",
-  },
   {
     href: "/wallet",
     labelKey: "nav.wallet",
@@ -58,7 +51,7 @@ export function PlayerBottomNav() {
       className="fixed bottom-0 left-0 right-0 z-50 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md"
       aria-label={t("nav.aria")}
     >
-      <div className="mx-auto grid h-16 w-full max-w-lg grid-rows-1 [grid-template-columns:repeat(5,minmax(0,1fr))]">
+      <div className="mx-auto grid h-14 w-full max-w-lg grid-rows-1 grid-cols-4">
         {tabs.map(({ href, labelKey, labelDefault, icon: Icon, match }) => {
           const active = match(pathname);
           const label = t(labelKey, { defaultValue: labelDefault });
diff --git a/src/components/layout/player-panel.tsx b/src/components/layout/player-panel.tsx
index d2a7680..426b87f 100644
--- a/src/components/layout/player-panel.tsx
+++ b/src/components/layout/player-panel.tsx
@@ -7,12 +7,15 @@ import { Bell, ChevronLeft } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { LanguageSwitcher } from "@/components/language-switcher";
+import {
+  playerHeaderControl,
+  playerPageHeader,
+  playerPageInset,
+} from "@/lib/player-spacing";
 import { cn } from "@/lib/utils";
 
 type PlayerPanelProps = {
   title: string;
-  subtitle?: string;
-  eyebrow?: string;
   children: ReactNode;
   backHref?: string;
   backLabel?: string;
@@ -22,7 +25,6 @@ type PlayerPanelProps = {
 
 export function PlayerPanel({
   title,
-  subtitle,
   children,
   backHref = "/hall",
   backLabel,
@@ -37,42 +39,53 @@ export function PlayerPanel({
     <div className={cn("mx-auto w-full max-w-[480px]", containerClassName)}>
       <section
         className={cn(
-          "overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900",
+          "overflow-hidden bg-white text-slate-900",
+          playerPageInset,
           className,
         )}
       >
-        <div className="mb-3 flex items-center gap-2 px-1 pt-3">
-          <Link
-            href={backHref}
-            className="flex h-9 shrink-0 items-center gap-1 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]"
-          >
-            <ChevronLeft className="size-4" aria-hidden />
-            {resolvedBackLabel}
-          </Link>
-          <div className="min-w-0 flex-1 text-center">
-            <h1 className="truncate text-lg font-black tracking-normal text-[#0b3f96]">
+        <header className={playerPageHeader}>
+          <div className="flex min-w-0 justify-start">
+            <Link
+              href={backHref}
+              className={cn(
+                playerHeaderControl,
+                "gap-0.5 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
+              )}
+            >
+              <ChevronLeft className="size-4 shrink-0" aria-hidden />
+              <span className="max-w-[4.5rem] truncate">{resolvedBackLabel}</span>
+            </Link>
+          </div>
+
+          <div className="min-w-0 max-w-[min(52vw,12rem)] justify-self-center text-center">
+            <h1 className="truncate text-base font-black leading-tight text-[#0b3f96]">
               {title}
             </h1>
-            {subtitle ? (
-              <p className="truncate text-[11px] font-medium text-slate-500">
-                {subtitle}
-              </p>
-            ) : null}
           </div>
-          <LanguageSwitcher
-            variant="minimal"
-            showFlag={false}
-            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
-          />
-          <button
-            type="button"
-            className="relative flex size-9 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]"
-            aria-label={t("navigation.notifications")}
-          >
-            <Bell className="size-5" aria-hidden />
-            <span className="absolute right-2 top-2 size-2 rounded-full bg-[#ff143d]" />
-          </button>
-        </div>
+
+          <div className="flex min-w-0 items-center justify-end gap-1">
+            <LanguageSwitcher
+              variant="minimal"
+              showFlag={false}
+              className={cn(
+                playerHeaderControl,
+                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
+              )}
+            />
+            <button
+              type="button"
+              className={cn(
+                playerHeaderControl,
+                "relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
+              )}
+              aria-label={t("navigation.notifications")}
+            >
+              <Bell className="size-4" aria-hidden />
+              <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
+            </button>
+          </div>
+        </header>
         {children}
       </section>
     </div>
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 40cac5f..1ebe9c0 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-3 overflow-hidden rounded-xl bg-card py-3 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-2 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-3 group-data-[size=sm]/card:px-2.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-3 group-data-[size=sm]/card:[.border-b]:pb-2",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      className={cn("px-3 group-data-[size=sm]/card:px-2.5", className)}
       {...props}
     />
   )
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-3 group-data-[size=sm]/card:p-2.5",
         className
       )}
       {...props}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 9280ee5..7fb730f 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -10,35 +10,39 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
+      position="top-center"
+      offset={10}
+      mobileOffset={{
+        top: "calc(8px + env(safe-area-inset-top, 0px))",
+      }}
+      gap={6}
+      visibleToasts={2}
+      duration={2800}
+      closeButton={false}
       className="toaster group"
       icons={{
-        success: (
-          <CircleCheckIcon className="size-4" />
-        ),
-        info: (
-          <InfoIcon className="size-4" />
-        ),
-        warning: (
-          <TriangleAlertIcon className="size-4" />
-        ),
-        error: (
-          <OctagonXIcon className="size-4" />
-        ),
-        loading: (
-          <Loader2Icon className="size-4 animate-spin" />
-        ),
+        success: <CircleCheckIcon className="size-3.5 shrink-0" />,
+        info: <InfoIcon className="size-3.5 shrink-0" />,
+        warning: <TriangleAlertIcon className="size-3.5 shrink-0" />,
+        error: <OctagonXIcon className="size-3.5 shrink-0" />,
+        loading: <Loader2Icon className="size-3.5 shrink-0 animate-spin" />,
       }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          "--border-radius": "calc(var(--radius) * 0.8)",
+          "--width": "min(280px, calc(100vw - 24px))",
         } as React.CSSProperties
       }
       toastOptions={{
         classNames: {
-          toast: "cn-toast",
+          toast:
+            "cn-toast !min-h-0 !w-full !max-w-[min(280px,calc(100vw-24px))] !items-center !gap-2 !rounded-lg !border !px-3 !py-2 !text-xs !shadow-md",
+          title: "!text-xs !font-semibold !leading-snug",
+          description: "!text-[11px] !leading-snug !text-muted-foreground",
+          icon: "!mr-0 !size-3.5",
         },
       }}
       {...props}
diff --git a/src/features/hall/hall-bet-preview-dialog.tsx b/src/features/hall/hall-bet-preview-dialog.tsx
index 3e5600e..d9c4655 100644
--- a/src/features/hall/hall-bet-preview-dialog.tsx
+++ b/src/features/hall/hall-bet-preview-dialog.tsx
@@ -4,6 +4,7 @@ import {
   AlertTriangleIcon,
   CheckCircle2,
   LoaderCircle,
+  Lock,
   WalletCards,
   XIcon,
 } from "lucide-react";
@@ -137,7 +138,7 @@ export function HallBetPreviewDialog({
         showCloseButton={false}
         className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg"
       >
-        <div className="relative shrink-0 px-4 pb-3 pt-5 sm:px-5">
+        <div className="relative shrink-0 px-3 pb-2.5 pt-4 sm:px-4">
           <button
             type="button"
             onClick={() => onOpenChange(false)}
@@ -172,9 +173,9 @@ export function HallBetPreviewDialog({
         </div>
 
         <div
-          className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-4 sm:px-5"
+          className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-3 sm:px-4"
         >
-          <div className="space-y-4 py-4">
+          <div className="space-y-3 py-3">
             {!data ? (
               <p className="text-sm text-slate-500">{t("hall.preview.empty")}</p>
             ) : (
@@ -291,7 +292,7 @@ export function HallBetPreviewDialog({
           </div>
         </div>
 
-        <div className="grid shrink-0 grid-cols-2 gap-3 border-t border-[#e8eef7] bg-white p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:p-5">
+        <div className="grid shrink-0 grid-cols-2 gap-2.5 border-t border-[#e8eef7] bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:p-4">
           <Button
             type="button"
             variant="outline"
@@ -305,8 +306,9 @@ export function HallBetPreviewDialog({
             type="button"
             onClick={onConfirmPlace}
             disabled={!data || placing || !allowSubmit}
-            className="h-12 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-300 disabled:shadow-none"
+            className="h-12 gap-2 rounded-lg border-0 bg-[#e5002c] text-base font-black text-white shadow-[0_10px_24px_rgba(229,0,44,0.28)] hover:bg-[#d10028] disabled:bg-slate-500 disabled:opacity-100 disabled:shadow-none"
           >
+            {!allowSubmit && !placing ? <Lock className="size-5 shrink-0" aria-hidden /> : null}
             {placing
               ? t("hall.preview.submitting")
               : allowSubmit
diff --git a/src/features/hall/hall-bet-result-dialog.tsx b/src/features/hall/hall-bet-result-dialog.tsx
index b706bbf..441fd43 100644
--- a/src/features/hall/hall-bet-result-dialog.tsx
+++ b/src/features/hall/hall-bet-result-dialog.tsx
@@ -42,7 +42,7 @@ export function HallBetResultDialog({
         showCloseButton={false}
         className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_18px_60px_rgba(15,23,42,0.18)] ring-[#e8eef7] sm:max-h-[min(92vh,760px)] sm:max-w-lg"
       >
-        <div className="relative shrink-0 px-4 pb-3 pt-7 text-center sm:px-5">
+        <div className="relative shrink-0 px-3 pb-2.5 pt-5 text-center sm:px-4">
           <button
             type="button"
             onClick={() => onOpenChange(false)}
@@ -54,7 +54,7 @@ export function HallBetResultDialog({
           <div className="mx-auto flex size-16 items-center justify-center rounded-full border-4 border-emerald-100 bg-white text-emerald-600 shadow-[0_10px_24px_rgba(22,163,74,0.12)]">
             <CheckCircle2 className="size-11" strokeWidth={2.5} />
           </div>
-          <DialogHeader className="mt-4 items-center gap-2">
+          <DialogHeader className="mt-3 items-center gap-2">
             <DialogTitle className="text-2xl font-black text-slate-950">
               {t("hall.result.title")}
             </DialogTitle>
@@ -68,9 +68,9 @@ export function HallBetResultDialog({
         </div>
 
         <div
-          className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-4 sm:px-5"
+          className="min-h-0 flex-1 overflow-y-auto border-y border-[#e8eef7] px-3 sm:px-4"
         >
-          <div className="space-y-4 py-4">
+          <div className="space-y-3 py-3">
             {!data ? (
               <p className="text-sm text-slate-500">
                 {t("hall.result.empty")}
@@ -92,7 +92,7 @@ export function HallBetResultDialog({
                   </div>
                 </div>
 
-                <div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-4 py-3">
+                <div className="flex items-center justify-between gap-3 rounded-lg border border-[#dbe7ff] bg-[#f4f8ff] px-3 py-2.5">
                   <div className="flex min-w-0 items-center gap-3">
                     <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#0755c7] text-white">
                       <ClipboardList className="size-5" />
@@ -106,7 +106,7 @@ export function HallBetResultDialog({
                   </span>
                 </div>
 
-                <div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-4 py-3 text-xs text-slate-600 sm:grid-cols-2">
+                <div className="grid gap-2 rounded-lg border border-[#e8eef7] bg-white px-3 py-2.5 text-xs text-slate-600 sm:grid-cols-2">
                   <p>
                     {t("hall.result.orderNo")}:{" "}
                     <span className="font-mono font-black text-[#0b3f96]">{data.order_no}</span>
@@ -198,7 +198,7 @@ export function HallBetResultDialog({
           </div>
         </div>
 
-        <div className="grid shrink-0 grid-cols-2 gap-3 border-t border-[#e8eef7] bg-white p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:p-5">
+        <div className="grid shrink-0 grid-cols-2 gap-2.5 border-t border-[#e8eef7] bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:p-4">
           <Button
             type="button"
             variant="outline"
diff --git a/src/features/hall/hall-betting-grid.tsx b/src/features/hall/hall-betting-grid.tsx
index 15a2f3d..0548734 100644
--- a/src/features/hall/hall-betting-grid.tsx
+++ b/src/features/hall/hall-betting-grid.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CirclePlus, Ticket, Trash2, Star } from "lucide-react";
+import { CirclePlus, Lock, Ticket, Trash2, Star } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -865,7 +865,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
 
   if (catalogState.kind === "error") {
     return (
-      <section className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+      <section className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
         <p>{catalogState.message}</p>
         <Button
           type="button"
@@ -886,7 +886,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
 
   return (
     <>
-      <section className="space-y-4" aria-label={t("hall.aria")}>
+      <section className="space-y-3" aria-label={t("hall.aria")}>
         <div className="rounded-xl border border-[#e8eef7] bg-white p-1 shadow-[0_6px_18px_rgba(30,64,175,0.06)]">
           <div className="grid grid-cols-4 gap-1">
             {categoryTabs.map((tab) => {
@@ -920,7 +920,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
         </div>
 
         {jackpot?.enabled ? (
-          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-4 py-3">
+          <div className="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 via-white to-[#f8fbff] px-3 py-2.5">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
                 <p className="text-[11px] font-black uppercase tracking-normal text-amber-700">
@@ -946,7 +946,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
             <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-200 text-slate-600">
               <Ticket className="size-7" aria-hidden />
             </div>
-            <p className="mt-4 text-lg font-bold text-slate-900">
+            <p className="mt-3 text-lg font-bold text-slate-900">
               {t("hall.closed.title")}
             </p>
             <p className="mt-1 text-xs">{t("hall.closed.subtitle")}</p>
@@ -1236,7 +1236,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
               </button>
             </div>
 
-            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-4 py-3 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
+            <div className="flex items-center justify-between rounded-xl border border-[#e9eef7] bg-[#f8fbff] px-3 py-2.5 text-sm shadow-[0_6px_20px_rgba(15,23,42,0.04)]">
               <span className="text-xs font-medium text-slate-500">
                 {t("hall.table.draftTotal")}
               </span>
@@ -1255,9 +1255,18 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
               type="button"
               disabled={!canSubmit || previewLoading}
               onClick={() => void handlePreview()}
-              className="h-12 w-full rounded-xl border-0 bg-[#e5002c] text-base font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]"
+              className={cn(
+                "h-12 w-full gap-2 rounded-xl border-0 text-base font-bold text-white",
+                !isBettable
+                  ? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
+                  : "bg-[#e5002c] shadow-[0_8px_20px_rgba(229,0,44,0.26)] hover:bg-[#d10028]",
+              )}
             >
-              <Ticket className="size-5" aria-hidden />
+              {!isBettable ? (
+                <Lock className="size-5 shrink-0" aria-hidden />
+              ) : (
+                <Ticket className="size-5 shrink-0" aria-hidden />
+              )}
               {previewLoading
                 ? t("hall.table.previewing")
                 : !isBettable
diff --git a/src/features/hall/hall-draw-panel.tsx b/src/features/hall/hall-draw-panel.tsx
index 77997d8..d2ddef0 100644
--- a/src/features/hall/hall-draw-panel.tsx
+++ b/src/features/hall/hall-draw-panel.tsx
@@ -90,7 +90,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
 
   if (error) {
     return (
-      <section className="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
+      <section className="mb-3 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
         <p>{t(error, { defaultValue: error })}</p>
         <Button
           type="button"
@@ -107,7 +107,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
 
   if (raw === undefined || display === undefined) {
     return (
-      <section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
+      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
         <div className="grid grid-cols-3 gap-2">
           <Skeleton className="h-14 rounded-lg" />
           <Skeleton className="h-14 rounded-lg" />
@@ -119,7 +119,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
 
   if (raw === null || display === null) {
     return (
-      <section className="mb-4 rounded-xl border border-[#e3ebf6] bg-white px-3 py-4 text-center text-sm text-slate-500 shadow-sm">
+      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white px-3 py-3 text-center text-sm text-slate-500 shadow-sm">
         {t("draw.noIssue")}
       </section>
     );
@@ -130,7 +130,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
   return (
     <section
       className={cn(
-        "mb-4 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
+        "mb-3 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
         sealedUi && "border-red-200 bg-red-50/30",
       )}
       aria-label={t("draw.currentIssue")}
diff --git a/src/features/hall/hall-play-catalog-panel.tsx b/src/features/hall/hall-play-catalog-panel.tsx
index 6553bdd..f8e8b32 100644
--- a/src/features/hall/hall-play-catalog-panel.tsx
+++ b/src/features/hall/hall-play-catalog-panel.tsx
@@ -142,7 +142,7 @@ export function HallPlayCatalogPanel() {
     );
 
     return (
-      <div className="space-y-6">
+      <div className="space-y-3">
         <p className="text-xs text-muted-foreground">
           {t("hall.playCatalog.meta", {
             currency: data.currency_code,
diff --git a/src/features/hall/hall-screen.tsx b/src/features/hall/hall-screen.tsx
index 8028d85..75352db 100644
--- a/src/features/hall/hall-screen.tsx
+++ b/src/features/hall/hall-screen.tsx
@@ -12,6 +12,8 @@ import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
 import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
 import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
 import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
+import { playerHeaderControl, playerPageInset } from "@/lib/player-spacing";
+import { cn } from "@/lib/utils";
 
 /**
  * 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
@@ -24,40 +26,49 @@ export function HallScreen() {
 
   return (
     <div className="mx-auto w-full max-w-[480px]">
-      <section className="overflow-hidden bg-white px-4 pb-8 pt-4 text-slate-900">
-        <div className="mb-2 flex items-center gap-1 px-1 pt-2">
+      <section className={cn("overflow-hidden bg-white text-slate-900", playerPageInset)}>
+        <header className="mb-2 flex min-h-9 items-center gap-2">
           <div className="flex min-w-0 flex-1 items-center">
-            <div className="inline-flex min-w-0 items-center">
-              <Image
-                src="/logo.png"
-                alt="Nlotto"
-                width={243}
-                height={84}
-                className="h-9 w-auto max-w-[min(100%,220px)] object-contain object-left"
-                priority
-              />
-            </div>
+            <Image
+              src="/logo.png"
+              alt="Nlotto"
+              width={243}
+              height={84}
+              className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
+              priority
+            />
           </div>
-          <LanguageSwitcher
-            variant="minimal"
-            showFlag={false}
-            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc]"
-          />
-          <Link
-            href="/rules"
-            className="shrink-0 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-3 py-1.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]"
-          >
-            {tp("nav.rules")}
-          </Link>
-          <button
-            type="button"
-            className="relative flex size-8 shrink-0 items-center justify-center rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]"
-            aria-label={t("navigation.notifications")}
-          >
-            <Bell className="size-4" aria-hidden />
-            <span className="absolute right-1.5 top-1.5 size-2 rounded-full bg-[#ff143d]" />
-          </button>
-        </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <LanguageSwitcher
+              variant="minimal"
+              showFlag={false}
+              className={cn(
+                playerHeaderControl,
+                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
+              )}
+            />
+            <Link
+              href="/rules"
+              className={cn(
+                playerHeaderControl,
+                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
+              )}
+            >
+              {tp("nav.rules")}
+            </Link>
+            <button
+              type="button"
+              className={cn(
+                playerHeaderControl,
+                "relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
+              )}
+              aria-label={t("navigation.notifications")}
+            >
+              <Bell className="size-4" aria-hidden />
+              <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
+            </button>
+          </div>
+        </header>
 
         <HallDrawPanel drawLive={drawLive} />
 
diff --git a/src/features/hall/hall-wallet-strip.tsx b/src/features/hall/hall-wallet-strip.tsx
index d067cfe..5f195ed 100644
--- a/src/features/hall/hall-wallet-strip.tsx
+++ b/src/features/hall/hall-wallet-strip.tsx
@@ -86,10 +86,10 @@ export function HallWalletStrip() {
   const availableMinor = Number(balance?.available_balance ?? 0);
 
   return (
-    <section className="mb-4 space-y-3" aria-label={t("wallet.balance")}>
+    <section className="mb-3 space-y-2.5" aria-label={t("wallet.balance")}>
       <div
         className={cn(
-          "relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
+          "relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-3 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]",
         )}
       >
         <Image
@@ -116,7 +116,7 @@ export function HallWalletStrip() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-2.5">
         <TransferInDialog
           idPrefix="hall-"
           triggerVariant="hall"
diff --git a/src/features/hall/jackpot-burst-overlay.tsx b/src/features/hall/jackpot-burst-overlay.tsx
index ddf89c4..2c66ec9 100644
--- a/src/features/hall/jackpot-burst-overlay.tsx
+++ b/src/features/hall/jackpot-burst-overlay.tsx
@@ -84,19 +84,19 @@ export function JackpotBurstOverlay({ event, onClose }: JackpotBurstOverlayProps
         </div>
 
         <div className="w-full space-y-2 text-left text-sm">
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
             <span className="text-slate-300">
               {t("hall.jackpotBurst.amount")}
             </span>
             <span className="text-right font-black text-[#f5c542]">{amount}</span>
           </div>
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
             <span className="text-slate-300">
               {t("hall.jackpotBurst.winners")}
             </span>
             <span className="font-bold">{event.winner_count}</span>
           </div>
-          <div className="flex items-center justify-between gap-4 rounded-md bg-white/[0.05] px-3 py-2">
+          <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.05] px-3 py-2">
             <span className="text-slate-300">
               {t("hall.jackpotBurst.triggerLabel")}
             </span>
diff --git a/src/features/orders/ticket-order-detail-screen.tsx b/src/features/orders/ticket-order-detail-screen.tsx
index 2cdc1bf..74cf0f8 100644
--- a/src/features/orders/ticket-order-detail-screen.tsx
+++ b/src/features/orders/ticket-order-detail-screen.tsx
@@ -99,12 +99,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
     return (
       <PlayerPanel
         title={t("orders.betDetail")}
-        subtitle={ticketNo}
-        eyebrow={t("brand.name")}
         backHref="/orders"
         backLabel={t("orders.title")}
       >
-        <div className="space-y-4">
+        <div className="space-y-3">
           <Skeleton className="h-12 rounded-xl" />
           <Skeleton className="h-56 rounded-xl" />
         </div>
@@ -116,12 +114,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
     return (
       <PlayerPanel
         title={t("orders.betDetail")}
-        subtitle={ticketNo}
-        eyebrow={t("brand.name")}
         backHref="/orders"
         backLabel={t("orders.title")}
       >
-        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+        <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
           <p>{error ?? t("orders.noData")}</p>
           <Button
             type="button"
@@ -179,12 +175,10 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
   return (
     <PlayerPanel
       title={t("orders.betDetail")}
-      subtitle={data.ticket_no}
-      eyebrow={t("brand.name")}
       backHref="/orders"
       backLabel={t("orders.title")}
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <Card className="ring-0 border border-[#e8eef7] bg-white shadow-[0_8px_28px_rgba(15,23,42,0.05)]">
           <CardHeader className="space-y-2 border-b border-[#edf2f9] pb-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
@@ -198,7 +192,7 @@ export function TicketOrderDetailScreen({ ticketNo }: { ticketNo: string }) {
               {t("orders.orderNo", { orderNo: data.order_no ?? "—" })}
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4 text-sm">
+          <CardContent className="space-y-3 text-sm">
             <div className="space-y-2.5 text-xs">
               <div className="flex items-baseline justify-between gap-3">
                 <span className="shrink-0 text-slate-500">{t("orders.drawNo")}</span>
diff --git a/src/features/orders/ticket-orders-list-screen.tsx b/src/features/orders/ticket-orders-list-screen.tsx
index 2bf9bb7..3194ae2 100644
--- a/src/features/orders/ticket-orders-list-screen.tsx
+++ b/src/features/orders/ticket-orders-list-screen.tsx
@@ -156,11 +156,9 @@ export function TicketOrdersListScreen() {
   return (
     <PlayerPanel
       title={t("orders.title")}
-      subtitle={t("orders.subtitle")}
-      eyebrow={t("brand.name")}
       containerClassName="max-w-[720px]"
     >
-      <div className="space-y-4">
+      <div className="space-y-3">
         <div className="rounded-2xl border border-[#dfe9f8] bg-white p-3 shadow-[0_10px_28px_rgba(15,23,42,0.05)] sm:p-4">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0 flex-1">
@@ -333,7 +331,7 @@ export function TicketOrdersListScreen() {
             ))}
           </div>
         ) : error ? (
-          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
             <p>{error}</p>
             <Button
               type="button"
@@ -345,7 +343,7 @@ export function TicketOrdersListScreen() {
             </Button>
           </div>
         ) : items.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center">
+          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center">
             <p className="text-sm font-bold text-slate-700">{t("orders.empty")}</p>
             <Link
               href="/hall"
diff --git a/src/features/player/entry-gate.tsx b/src/features/player/entry-gate.tsx
index 63c8a54..fa65395 100644
--- a/src/features/player/entry-gate.tsx
+++ b/src/features/player/entry-gate.tsx
@@ -256,7 +256,7 @@ export function EntryGate() {
         </div>
       </div>
 
-      <div className="flex flex-1 flex-col px-4 py-6">
+      <div className="flex flex-1 flex-col px-3 py-5">
         {phase === "loading" ? (
           <div className="mx-auto w-full max-w-md">
             <div className="mb-6 flex items-center gap-2">
@@ -279,7 +279,7 @@ export function EntryGate() {
               </div>
             </div>
 
-            <div className="space-y-4">
+            <div className="space-y-3">
               {steps.map((step) => (
                 <div key={step.id} className="flex items-start gap-3">
                   <div
diff --git a/src/features/results/check-winning-screen.tsx b/src/features/results/check-winning-screen.tsx
index b451df4..c577033 100644
--- a/src/features/results/check-winning-screen.tsx
+++ b/src/features/results/check-winning-screen.tsx
@@ -90,7 +90,7 @@ export function CheckWinningScreen() {
 
   return (
     <PlayerPanel title={t("results.check.title")} backHref="/results" backLabel={t("results.title")}>
-      <div className="space-y-4">
+      <div className="space-y-3">
         <section className="overflow-hidden rounded-2xl border border-red-100 bg-white shadow-[0_12px_32px_rgba(15,23,42,0.06)]">
           <div className="bg-gradient-to-b from-red-50 to-white px-5 pb-5 pt-8 text-center">
             <div className="mx-auto flex size-24 items-center justify-center rounded-full bg-white text-[#e5002c] shadow-[0_18px_40px_rgba(229,0,44,0.14)]">
@@ -104,7 +104,7 @@ export function CheckWinningScreen() {
             </p>
           </div>
 
-          <div className="space-y-3 px-4 pb-4">
+          <div className="space-y-2.5 px-3 pb-3">
             <label className="block space-y-1.5">
               <span className="text-xs font-black text-slate-700">
                 {t("results.check.ticketNumber")}
@@ -265,7 +265,7 @@ function WinningResultDialog({
             <p className="font-black text-slate-950">
               {t("results.check.drawInfo")}
             </p>
-            <div className="mt-3 grid grid-cols-2 gap-4 text-slate-500">
+            <div className="mt-2.5 grid grid-cols-2 gap-3 text-slate-500">
               <div>
                 <p className="text-xs">{t("results.check.issueNo")}</p>
                 <p className="mt-1 font-mono font-black text-slate-900">{data.draw.draw_no}</p>
diff --git a/src/features/results/draw-result-detail-screen.tsx b/src/features/results/draw-result-detail-screen.tsx
index b13fd22..363997f 100644
--- a/src/features/results/draw-result-detail-screen.tsx
+++ b/src/features/results/draw-result-detail-screen.tsx
@@ -108,12 +108,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
     return (
       <PlayerPanel
         title={t("results.detailTitle")}
-        subtitle={drawNo}
-        eyebrow={t("results.title")}
         backHref="/results"
         backLabel={t("results.title")}
       >
-        <div className="space-y-4">
+        <div className="space-y-3">
           <Skeleton className="h-12 rounded-xl" />
           <Skeleton className="h-56 rounded-xl" />
         </div>
@@ -125,12 +123,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
     return (
       <PlayerPanel
         title={t("results.detailTitle")}
-        subtitle={drawNo}
-        eyebrow={t("results.title")}
         backHref="/results"
         backLabel={t("results.title")}
       >
-        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+        <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
           <p>{error ?? t("results.noData")}</p>
           <Button type="button" size="sm" variant="secondary" onClick={() => void load()}>
             {t("actions.retry")}
@@ -156,12 +152,10 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
   return (
     <PlayerPanel
       title={t("results.detailTitle")}
-      subtitle={data.draw_no}
-      eyebrow={t("results.title")}
       backHref="/results"
       backLabel={t("results.title")}
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <JackpotResultsStrip currencyCode={currency} />
 
         <Card className="overflow-hidden border-[#e5edf8] bg-white shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
@@ -209,7 +203,7 @@ export function DrawResultDetailScreen({ drawNo }: DrawResultDetailScreenProps)
               )}
             </div>
           </CardHeader>
-          <CardContent className="space-y-4 pt-4">
+          <CardContent className="space-y-3 pt-3">
             <div className="rounded-xl border border-[#e8eef7] bg-[#f8fbff] p-3 shadow-[0_4px_14px_rgba(15,23,42,0.04)]">
               <div className="flex items-center justify-between gap-2">
                 <p className="text-sm font-black text-[#0b3f96]">
diff --git a/src/features/results/draw-results-list-screen.tsx b/src/features/results/draw-results-list-screen.tsx
index f2b1f5b..4331aa9 100644
--- a/src/features/results/draw-results-list-screen.tsx
+++ b/src/features/results/draw-results-list-screen.tsx
@@ -108,8 +108,8 @@ export function DrawResultsListScreen() {
   }, [fetchList, lastPage, loading, loadingMore, page]);
 
   return (
-    <PlayerPanel title={t("results.title")} subtitle={t("results.subtitle")} eyebrow={t("brand.name")}>
-      <div className="space-y-4">
+    <PlayerPanel title={t("results.title")}>
+      <div className="space-y-3">
         <JackpotResultsStrip currencyCode={jackpotCurrency} />
 
         <div className="rounded-xl border border-[#e6edf8] bg-[#f8fbff] p-3">
@@ -215,7 +215,7 @@ export function DrawResultsListScreen() {
             <Skeleton className="h-28 rounded-xl" />
           </div>
         ) : error ? (
-          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
             <p>{error}</p>
             <Button
               type="button"
@@ -227,7 +227,7 @@ export function DrawResultsListScreen() {
             </Button>
           </div>
         ) : items && items.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-4 py-10 text-center text-sm text-slate-500">
+          <div className="rounded-xl border border-dashed border-[#dce7f7] bg-[#f8fbff] px-3 py-8 text-center text-sm text-slate-500">
             {t("results.empty")}
           </div>
         ) : (
diff --git a/src/features/results/twenty-three-results-grid.tsx b/src/features/results/twenty-three-results-grid.tsx
index 9af54d2..65d292d 100644
--- a/src/features/results/twenty-three-results-grid.tsx
+++ b/src/features/results/twenty-three-results-grid.tsx
@@ -72,7 +72,7 @@ export function TwentyThreeResultsGrid({
   ];
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-3">
       <div className="grid grid-cols-3 gap-2">
         {prizeCards.map((card) => (
           <div
diff --git a/src/features/rules/play-rules-screen.tsx b/src/features/rules/play-rules-screen.tsx
index 11d1f23..1709232 100644
--- a/src/features/rules/play-rules-screen.tsx
+++ b/src/features/rules/play-rules-screen.tsx
@@ -81,11 +81,10 @@ export function PlayRulesScreen() {
   return (
     <PlayerPanel
       title={t("rules.title")}
-      subtitle={t("rules.subtitle")}
       backHref="/hall"
       className="bg-[#f7f9fd]"
     >
-      <div className="space-y-4">
+      <div className="space-y-3">
         <Card className="border-[#dbe7fb] bg-white shadow-sm">
           <CardHeader className="space-y-3 pb-3">
             <div className="flex items-center gap-2">
diff --git a/src/features/wallet/transfer-in-screen.tsx b/src/features/wallet/transfer-in-screen.tsx
index 26fac36..b03ad53 100644
--- a/src/features/wallet/transfer-in-screen.tsx
+++ b/src/features/wallet/transfer-in-screen.tsx
@@ -48,7 +48,7 @@ export function TransferInScreen() {
 
   if (loading && !balance) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-3">
         <Skeleton className="h-8 w-40" />
         <Skeleton className="h-48 w-full rounded-xl" />
       </div>
diff --git a/src/features/wallet/transfer-out-screen.tsx b/src/features/wallet/transfer-out-screen.tsx
index cd5f301..df6d8a7 100644
--- a/src/features/wallet/transfer-out-screen.tsx
+++ b/src/features/wallet/transfer-out-screen.tsx
@@ -48,7 +48,7 @@ export function TransferOutScreen() {
 
   if (loading && !balance) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-3">
         <Skeleton className="h-8 w-40" />
         <Skeleton className="h-48 w-full rounded-xl" />
       </div>
diff --git a/src/features/wallet/wallet-logs-block.tsx b/src/features/wallet/wallet-logs-block.tsx
index 366a542..5022c7f 100644
--- a/src/features/wallet/wallet-logs-block.tsx
+++ b/src/features/wallet/wallet-logs-block.tsx
@@ -188,7 +188,7 @@ export function LogRow({
         : "border-blue-200 bg-blue-50 text-blue-700";
 
   return (
-    <li className="rounded-2xl border border-[#e1eaf6] bg-white px-4 py-3.5 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
+    <li className="rounded-2xl border border-[#e1eaf6] bg-white px-3 py-3 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
diff --git a/src/features/wallet/wallet-logs-screen.tsx b/src/features/wallet/wallet-logs-screen.tsx
index bfa4e11..7cd3d02 100644
--- a/src/features/wallet/wallet-logs-screen.tsx
+++ b/src/features/wallet/wallet-logs-screen.tsx
@@ -98,14 +98,12 @@ export function WalletLogsScreen() {
   return (
     <PlayerPanel
       title={t("wallet.logsTitle")}
-      subtitle={t("wallet.logsSubtitle")}
-      eyebrow={t("brand.name")}
       backHref="/wallet"
       backLabel={t("wallet.title")}
     >
-      <div className="space-y-4">
+      <div className="space-y-3">
         {error ? (
-          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
             <p>{error}</p>
             <Button
               type="button"
diff --git a/src/features/wallet/wallet-screen.tsx b/src/features/wallet/wallet-screen.tsx
index 453d05a..412462d 100644
--- a/src/features/wallet/wallet-screen.tsx
+++ b/src/features/wallet/wallet-screen.tsx
@@ -140,10 +140,10 @@ export function WalletScreen() {
   }, [hasMore, loadMore, loading, loadingMore, logsLoading]);
 
   return (
-    <PlayerPanel title={t("wallet.title")} subtitle={t("wallet.subtitle")} eyebrow={t("brand.name")}>
-      <div className="space-y-4">
+    <PlayerPanel title={t("wallet.title")}>
+      <div className="space-y-3">
         {error ? (
-          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
             <p>{error}</p>
             <Button
               type="button"
@@ -155,7 +155,7 @@ export function WalletScreen() {
           </div>
         ) : null}
 
-        <section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-4 py-5 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]">
+        <section className="relative overflow-hidden rounded-xl bg-[#e5002c] px-3 py-4 text-white shadow-[0_10px_28px_rgba(229,0,44,0.25)]">
           <Image
             src="/entry/image5.png"
             alt=""
diff --git a/src/features/wallet/wallet-transfer-dialogs.tsx b/src/features/wallet/wallet-transfer-dialogs.tsx
index 0ff7402..1c30a5a 100644
--- a/src/features/wallet/wallet-transfer-dialogs.tsx
+++ b/src/features/wallet/wallet-transfer-dialogs.tsx
@@ -59,13 +59,13 @@ export function TransferInDialog({
         {resolvedTriggerLabel}
       </Button>
       <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
-        <DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left">
+        <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">
           <DialogTitle className="text-lg font-semibold">{t("wallet.transferInTitle")}</DialogTitle>
           <DialogDescription className="text-sm leading-relaxed">
             {t("wallet.dialogInDescription", { currency })}
           </DialogDescription>
         </DialogHeader>
-        <div className="px-5 py-4">
+        <div className="px-4 py-3">
           <TransferInPanel
             variant="dialog"
             currency={currency}
@@ -117,13 +117,13 @@ export function TransferOutDialog({
         {resolvedTriggerLabel}
       </Button>
       <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
-        <DialogHeader className="space-y-1.5 border-b border-border px-5 py-4 text-left">
+        <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">
           <DialogTitle className="text-lg font-semibold">{t("wallet.transferOutTitle")}</DialogTitle>
           <DialogDescription className="text-sm leading-relaxed">
             {t("wallet.dialogOutDescription")}
           </DialogDescription>
         </DialogHeader>
-        <div className="px-5 py-4">
+        <div className="px-4 py-3">
           <TransferOutPanel
             variant="dialog"
             currency={currency}
diff --git a/src/features/wallet/wallet-transfer-forms.tsx b/src/features/wallet/wallet-transfer-forms.tsx
index b19de57..8227a97 100644
--- a/src/features/wallet/wallet-transfer-forms.tsx
+++ b/src/features/wallet/wallet-transfer-forms.tsx
@@ -24,6 +24,7 @@ import {
   parseDecimalInputToMinor,
 } from "@/lib/money";
 import { useCurrencyCatalog } from "@/hooks/use-currency-catalog";
+import { randomIdempotentKey } from "@/lib/utils";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
 import { LotteryApiBizError } from "@/types/api/errors";
 
@@ -57,7 +58,7 @@ type PanelVariant = "dialog" | "page";
 
 function TransferInfoBlock({ children }: { children: ReactNode }) {
   return (
-    <div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm leading-relaxed">
+    <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5 text-sm leading-relaxed">
       {children}
     </div>
   );
@@ -160,7 +161,7 @@ export function TransferInPanel({
       await postWalletTransferIn({
         amount: parsedMinor,
         currency,
-        idempotent_key: crypto.randomUUID(),
+        idempotent_key: randomIdempotentKey(),
       });
       toast.success(t("wallet.successIn"));
       setAmountText("");
@@ -205,7 +206,7 @@ export function TransferInPanel({
 
   return (
     <>
-      <div className="grid gap-4">
+      <div className="grid gap-3">
         <TransferInfoBlock>
           <p className="text-muted-foreground">
             {t("wallet.mainBalance")}{" "}
@@ -292,7 +293,7 @@ export function TransferOutPanel({
       await postWalletTransferOut({
         amount: parsedMinor,
         currency,
-        idempotent_key: crypto.randomUUID(),
+        idempotent_key: randomIdempotentKey(),
       });
       toast.success(t("wallet.successOut"));
       setAmountText("");
@@ -337,7 +338,7 @@ export function TransferOutPanel({
 
   return (
     <>
-      <div className="grid gap-4">
+      <div className="grid gap-3">
         <TransferInfoBlock>
           <p className="text-muted-foreground">
             {t("wallet.lotteryAvailable")}{" "}
@@ -395,8 +396,6 @@ export function TransferInPage({
   return (
     <PlayerPanel
       title={t("wallet.transferInTitle")}
-      subtitle={t("wallet.transferInSubtitle", { currency })}
-      eyebrow={t("wallet.title")}
       backHref="/wallet"
       backLabel={t("wallet.title")}
     >
@@ -431,8 +430,6 @@ export function TransferOutPage({
   return (
     <PlayerPanel
       title={t("wallet.transferOutTitle")}
-      subtitle={t("wallet.transferOutSubtitle", { currency })}
-      eyebrow={t("wallet.title")}
       backHref="/wallet"
       backLabel={t("wallet.title")}
     >
diff --git a/src/lib/player-spacing.ts b/src/lib/player-spacing.ts
new file mode 100644
index 0000000..48a9604
--- /dev/null
+++ b/src/lib/player-spacing.ts
@@ -0,0 +1,11 @@
+/** 玩家端统一紧凑间距（页面壳、区块堆叠、区块间距） */
+export const playerPageInset = "px-3 pb-6 pt-2";
+/** 顶栏：左右等宽列 + 居中标题，避免返回键与标题高低不齐 */
+export const playerPageHeader =
+  "mb-2 grid min-h-9 grid-cols-[1fr_auto_1fr] items-center gap-x-2";
+/** 顶栏左右控件统一高度 */
+export const playerHeaderControl =
+  "inline-flex h-8 shrink-0 items-center justify-center";
+export const playerStack = "space-y-3";
+export const playerStackGap = "gap-3";
+export const playerSectionMb = "mb-3";
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..b68db48 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,15 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/** 幂等键：优先 Web Crypto，HTTP/旧环境回退为类 UUID 字符串 */
+export function randomIdempotentKey(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID()
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}