feat: improve mobile responsiveness across login, entry, and result screens

- Updated HallDrawPanel to use responsive grid layout, switching from 3-column to single-column on mobile with appropriate dividers
- Refactored EntryGate to use useMemo for gateReady state instead of useLayoutEffect, improving initialization logic
- Reduced minimum height of hero sections from 320px to 200px on mobile (sm:320px) in login and entry screens
- Enhanced WinningResultDialog layout with flexbox structure and

src/features/results/check-winning-screen.tsx

@@ -212,17 +212,17 @@ function WinningResultDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         showCloseButton={false}
-        className="max-h-[calc(100dvh-24px)] overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_24px_70px_rgba(15,23,42,0.28)] sm:max-w-md"
+        className="flex max-h-[calc(100dvh-24px)] flex-col gap-0 overflow-hidden rounded-2xl border-[#e4ebf6] bg-white p-0 shadow-[0_24px_70px_rgba(15,23,42,0.28)] sm:max-w-md"
       >
-        <button
-          type="button"
-          onClick={() => onOpenChange(false)}
-          className="absolute right-3 top-3 z-10 inline-flex size-9 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100"
-          aria-label={t("actions.close")}
-        >
-          <XIcon className="size-5" />
-        </button>
-        <div className="max-h-[calc(100dvh-24px)] overflow-y-auto px-5 pb-5 pt-8">
+        <div className="relative shrink-0 px-5 pt-4">
+          <button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className="absolute right-3 top-3 z-10 inline-flex size-9 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100"
+            aria-label={t("actions.close")}
+          >
+            <XIcon className="size-5" />
+          </button>
           <DialogHeader className="items-center text-center">
             <div className="flex size-16 items-center justify-center rounded-full border-4 border-emerald-100 bg-white text-emerald-600">
               <CheckCircle2 className="size-11" />
@@ -236,7 +236,9 @@ function WinningResultDialog({
               {t("results.check.ticketNumber")}
             </DialogDescription>
           </DialogHeader>
+        </div>
 
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-5">
           <div className="mx-auto mt-3 w-fit rounded-xl bg-emerald-50 px-8 py-2 font-mono text-lg font-black text-[#0a8f3e]">
             {query}
           </div>