Add overnight pause for draft timers (#335)

* Add overnight pause feature for draft timers

Protects players from having their pick timer expire while asleep.
Admins configure a nightly window (league-wide or per-user timezone);
the timer freezes during that window while autodraft can still fire.

Fixes #66

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix TS error: guard getUserDisplayName against undefined user

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/AutodraftSettings.tsx

@@ -94,7 +94,6 @@ interface CompactAutodraftBadgeProps {
   isEnabled: boolean;
   mode: AutodraftMode;
   queueOnly: boolean;
-  isMyTurn: boolean;
   showChevron?: boolean;
 }
 
@@ -102,7 +101,6 @@ export function CompactAutodraftBadge({
   isEnabled,
   mode,
   queueOnly,
-  isMyTurn,
   showChevron = false,
 }: CompactAutodraftBadgeProps) {
   const state = toAutodraftState(isEnabled, mode, queueOnly);
@@ -122,9 +120,6 @@ export function CompactAutodraftBadge({
         {label}
         {showChevron && <ChevronDown className="h-3 w-3" />}
       </span>
-      {isMyTurn && (
-        <span className="text-xs text-amber-accent font-medium">Your turn!</span>
-      )}
     </div>
   );
 }
@@ -137,6 +132,7 @@ interface AutodraftBadgeWithPopoverProps {
   queueOnly: boolean;
   isMyTurn: boolean;
   onUpdate: (isEnabled: boolean, mode: AutodraftMode, queueOnly: boolean) => void;
+  showOvernightNote?: boolean;
 }
 
 function AutodraftOptions({
@@ -243,6 +239,7 @@ export function AutodraftBadgeWithPopover({
   queueOnly,
   isMyTurn,
   onUpdate,
+  showOvernightNote = false,
 }: AutodraftBadgeWithPopoverProps) {
   const [open, setOpen] = useState(false);
 
@@ -258,7 +255,6 @@ export function AutodraftBadgeWithPopover({
               isEnabled={isEnabled}
               mode={mode}
               queueOnly={queueOnly}
-              isMyTurn={isMyTurn}
               showChevron
             />
           </button>
@@ -299,6 +295,11 @@ export function AutodraftBadgeWithPopover({
               );
             })}
           </div>
+          {showOvernightNote && (
+            <p className="text-xs text-muted-foreground mt-3 pt-3 border-t leading-relaxed">
+              Autodraft picks still fire during the overnight pause — the pause only freezes the timer if autodraft is off.
+            </p>
+          )}
         </PopoverContent>
       </Popover>
     </div>
@@ -313,6 +314,7 @@ interface AutodraftSettingsProps {
   queueOnly: boolean;
   isMyTurn: boolean;
   onUpdate: (isEnabled: boolean, mode: AutodraftMode, queueOnly: boolean) => void;
+  showOvernightNote?: boolean;
 }
 
 export function AutodraftSettings({
@@ -323,6 +325,7 @@ export function AutodraftSettings({
   queueOnly,
   isMyTurn,
   onUpdate,
+  showOvernightNote,
 }: AutodraftSettingsProps) {
   const [localState, setLocalState] = useState<AutodraftState>(
     toAutodraftState(isEnabled, mode, queueOnly)
@@ -440,6 +443,11 @@ export function AutodraftSettings({
       {isMyTurn && (
         <p className="text-xs text-muted-foreground mt-2">You're on the clock!</p>
       )}
+      {showOvernightNote && (
+        <p className="text-xs text-muted-foreground mt-3 leading-relaxed">
+          If overnight pause is enabled, autodraft picks still fire during your overnight window — the pause only protects your timer if autodraft is off.
+        </p>
+      )}
     </div>
   );
 }

app/components/draft/DraftGridSection.tsx

@@ -56,6 +56,7 @@ interface DraftGridSectionProps {
   isCommissioner: boolean;
   seasonStatus?: SeasonStatus;
   draftPaused?: boolean;
+  overnightPauseInfo?: { isActive: boolean; resumesAt: Date | null; pausedTeamIds?: Set<string> };
   onAdjustTimeBankOpen?: (teamId: string) => void;
   onSetAutodraftOpen?: (teamId: string) => void;
   onForceAutopick?: (pickNumber: number, teamId: string) => void;
@@ -75,6 +76,7 @@ export const DraftGridSection = memo(function DraftGridSection({
   isCommissioner,
   seasonStatus,
   draftPaused,
+  overnightPauseInfo,
   onAdjustTimeBankOpen,
   onSetAutodraftOpen,
   onForceAutopick,
@@ -90,6 +92,8 @@ export const DraftGridSection = memo(function DraftGridSection({
     [draftGrid, currentPick]
   );
 
+  const isOvernightActive = overnightPauseInfo?.isActive ?? false;
+
   return (
     <div className="h-full flex flex-col p-4">
       <h2 className="text-xl font-semibold mb-4 flex-shrink-0">Draft Grid</h2>
@@ -101,6 +105,9 @@ export const DraftGridSection = memo(function DraftGridSection({
               const teamTime = teamTimers[slot.team.id];
               const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled || false;
               const isConnected = connectedTeams.has(slot.team.id);
+              const isCurrentTeamOvernight = slot.team.id === currentTeamId
+                ? isOvernightActive
+                : (overnightPauseInfo?.pausedTeamIds?.has(slot.team.id) ?? false);
 
               const headerInner = (
                 <div className="relative">
@@ -127,9 +134,9 @@ export const DraftGridSection = memo(function DraftGridSection({
                     <span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
                   </div>
                   <div
-                    className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}
+                    className={`text-xs font-mono px-1 ${isCurrentTeamOvernight ? "text-muted-foreground" : getTimerColorClass(teamTime)}`}
                   >
-                    {formatClockTime(teamTime)}
+                    {isCurrentTeamOvernight ? `🌙 ${formatClockTime(teamTime)}` : formatClockTime(teamTime)}
                   </div>
                   {isCommissioner && (onAdjustTimeBankOpen || onSetAutodraftOpen) && (
                     <button
@@ -228,6 +235,8 @@ export const DraftGridSection = memo(function DraftGridSection({
                               coronaState={pendingCorona}
                               seasonStatus={seasonStatus}
                               draftPaused={draftPaused}
+                              isOvernightPause={isCurrent && isOvernightActive}
+                              resumesAt={isCurrent && isOvernightActive && overnightPauseInfo?.resumesAt ? overnightPauseInfo.resumesAt : undefined}
                               className="cursor-context-menu"
                             >
                               {mobileButtons}
@@ -301,6 +310,8 @@ export const DraftGridSection = memo(function DraftGridSection({
                         coronaState={pendingCorona}
                         seasonStatus={seasonStatus}
                         draftPaused={draftPaused}
+                        isOvernightPause={isCurrent && isOvernightActive}
+                        resumesAt={isCurrent && isOvernightActive && overnightPauseInfo?.resumesAt ? overnightPauseInfo.resumesAt : undefined}
                       >
                         {mobileButtons}
                       </DraftPickCell>

app/components/draft/DraftPickCell.tsx

@@ -25,6 +25,8 @@ type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
   coronaState?: CoronaState;
   seasonStatus?: SeasonStatus;
   draftPaused?: boolean;
+  isOvernightPause?: boolean;
+  resumesAt?: Date;
 };
 
 const coronaClasses: Record<CoronaVariant, string> = {
@@ -60,6 +62,8 @@ function DraftPickCell({
   coronaState,
   seasonStatus,
   draftPaused,
+  isOvernightPause,
+  resumesAt,
   className,
   children,
   ...rest
@@ -70,6 +74,8 @@ function DraftPickCell({
   let currentLabel = "On The Clock";
   if (seasonStatus === "pre_draft") {
     currentLabel = "Up Next";
+  } else if (seasonStatus === "draft" && isOvernightPause) {
+    currentLabel = "🌙 Overnight Pause";
   } else if (seasonStatus === "draft" && draftPaused) {
     currentLabel = "Paused Draft";
   }
@@ -136,7 +142,14 @@ function DraftPickCell({
               </div>
             </>
           ) : isCurrent ? (
-            <div className="text-sm font-bold text-white">{currentLabel}</div>
+            <>
+              <div className="text-sm font-bold text-white">{currentLabel}</div>
+              {resumesAt && (
+                <div className="text-[10px] text-muted-foreground mt-0.5">
+                  Resumes {resumesAt.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}
+                </div>
+              )}
+            </>
           ) : null}
         </div>
         {children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}

app/components/draft/MiniDraftGrid.tsx

@@ -51,6 +51,7 @@ export interface MiniDraftGridProps {
   connectedTeams?: Set<string>;
   seasonStatus?: SeasonStatus;
   draftPaused?: boolean;
+  overnightPauseInfo?: { isActive: boolean; resumesAt: Date | null; pausedTeamIds?: Set<string> };
   onAdjustTimeBankOpen?: (teamId: string) => void;
   onSetAutodraftOpen?: (teamId: string) => void;
   onForceAutopick?: (pickNumber: number, teamId: string) => void;
@@ -70,6 +71,7 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
   connectedTeams,
   seasonStatus,
   draftPaused,
+  overnightPauseInfo,
   onAdjustTimeBankOpen,
   onSetAutodraftOpen,
   onForceAutopick,
@@ -151,6 +153,9 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
     ? [displayedIndices[0], displayedIndices[1], extraIndex]
     : [displayedIndices[0], displayedIndices[1]];
 
+  const currentTeamId = draftGrid.flat().find((c) => c.pickNumber === currentPick)?.teamId;
+  const isOvernightActive = overnightPauseInfo?.isActive ?? false;
+
   return (
     <div ref={scrollContainerRef} className="overflow-x-auto">
       <div className="inline-block min-w-full">
@@ -160,6 +165,9 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
             const teamTime = teamTimers[slot.team.id];
             const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled ?? false;
             const isConnected = connectedTeams ? connectedTeams.has(slot.team.id) : true;
+            const isCurrentTeamOvernight = slot.team.id === currentTeamId
+              ? isOvernightActive
+              : (overnightPauseInfo?.pausedTeamIds?.has(slot.team.id) ?? false);
 
             const headerContent = (
               <>
@@ -171,8 +179,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                     {ownerMap[slot.team.id] || slot.team.name}
                   </span>
                 </div>
-                <div className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}>
+                <div className={`text-xs font-mono px-1 ${isCurrentTeamOvernight ? "text-muted-foreground" : getTimerColorClass(teamTime)}`}>
-                  {formatClockTime(teamTime)}
+                  {isCurrentTeamOvernight ? `🌙 ${formatClockTime(teamTime)}` : formatClockTime(teamTime)}
                 </div>
               </>
             );
@@ -253,6 +261,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                               pick={pickData}
                               seasonStatus={seasonStatus}
                               draftPaused={draftPaused}
+                              isOvernightPause={isCurrent && isOvernightActive}
+                              resumesAt={isCurrent && isOvernightActive && overnightPauseInfo?.resumesAt ? overnightPauseInfo.resumesAt : undefined}
                               className="cursor-context-menu"
                             />
                           </ContextMenuTrigger>
@@ -317,6 +327,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                         pick={pickData}
                         seasonStatus={seasonStatus}
                         draftPaused={draftPaused}
+                        isOvernightPause={isCurrent && isOvernightActive}
+                        resumesAt={isCurrent && isOvernightActive && overnightPauseInfo?.resumesAt ? overnightPauseInfo.resumesAt : undefined}
                       />
                     );
                   })}

app/components/league/DraftInfoCard.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import { ChevronRight, ChessPawn, Hourglass, LayoutGrid } from "lucide-react";
+import { ChevronRight, ChessPawn, Hourglass, LayoutGrid, Moon } from "lucide-react";
 import { Link } from "react-router";
 import { formatClockTime } from "~/lib/draft-timer";
 import { Button } from "~/components/ui/button";
@@ -24,6 +24,10 @@ export interface DraftInfoCardProps {
   draftRoomHref: string;
   /** 1-based draft position for the current user; omit or undefined to hide the panel */
   userDraftPosition?: number;
+  overnightPauseMode?: "none" | "league" | "per_user";
+  overnightPauseStart?: string | null;
+  overnightPauseEnd?: string | null;
+  overnightPauseTimezone?: string | null;
 }
 
 // ─── Sub-components ───────────────────────────────────────────────────────────
@@ -52,6 +56,10 @@ function DraftInfoCardVariant({
   draftDateTime,
   draftRoomHref,
   userDraftPosition,
+  overnightPauseMode,
+  overnightPauseStart,
+  overnightPauseEnd,
+  overnightPauseTimezone,
 }: DraftInfoCardProps) {
   const flexSpots = Math.max(0, draftRounds - sportsCount);
 
@@ -66,6 +74,31 @@ function DraftInfoCardVariant({
     flexSpots > 0 ? `${flexSpots} flex` : null,
   ].filter(Boolean).join(" + ");
 
+  const hasPosition = userDraftPosition !== null && userDraftPosition !== undefined;
+  const hasOvernight = !!(overnightPauseMode && overnightPauseMode !== "none" && overnightPauseStart && overnightPauseEnd);
+
+  // Mechanics row: Rounds + (Your Pick?) + Timer
+  // When overnight is shown, Draft Date moves to the top row so mechanics has 2–3 items.
+  // When no overnight, Draft Date stays in this row giving 3–4 items.
+  const mechanicsColsClass = hasOvernight
+    ? (hasPosition ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-2")
+    : (hasPosition ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-2 sm:grid-cols-3");
+
+  const timerPanel = (
+    <InfoPanel
+      label={timerLabel}
+      value={
+        <span className="flex items-center gap-1.5">
+          {draftTimerMode === "chess_clock"
+            ? <ChessPawn className="h-4 w-4 shrink-0 text-muted-foreground" />
+            : <Hourglass className="h-4 w-4 shrink-0 text-muted-foreground" />}
+          {timerValue}
+        </span>
+      }
+      sub={timerSub}
+    />
+  );
+
   return (
     <Card>
       <CardHeader className="pb-4">
@@ -82,36 +115,46 @@ function DraftInfoCardVariant({
         </div>
       </CardHeader>
 
-      <CardContent>
+      <CardContent className="space-y-2">
-        <div className={`grid gap-2 ${userDraftPosition !== null && userDraftPosition !== undefined ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-2 sm:grid-cols-3"}`}>
+        {/* Scheduling row: Draft Date + Overnight Pause side-by-side when overnight is configured */}
-          {/* Draft Date */}
+        {hasOvernight && (
-          <InfoPanel
+          <div className="grid grid-cols-2 gap-2">
-            label="Draft Date"
+            <InfoPanel
-            value={draftDateTime ? format(new Date(draftDateTime), "MMM d, yyyy") : "TBD"}
+              label="Draft Date"
-            sub={draftDateTime ? format(new Date(draftDateTime), "p") : undefined}
+              value={draftDateTime ? format(new Date(draftDateTime), "MMM d, yyyy") : "TBD"}
-          />
+              sub={draftDateTime ? format(new Date(draftDateTime), "p") : undefined}
+            />
+            <InfoPanel
+              label="Overnight Pause"
+              value={
+                <span className="flex items-center gap-1.5">
+                  <Moon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  {formatHHMM(overnightPauseStart ?? "")} – {formatHHMM(overnightPauseEnd ?? "")}
+                </span>
+              }
+              sub={overnightPauseMode === "league" && overnightPauseTimezone
+                ? overnightPauseTimezone
+                : "per-user timezone"}
+            />
+          </div>
+        )}
 
-          {/* Rounds */}
+        {/* Mechanics row: Rounds + Your Pick? + Timer (+ Draft Date when no overnight) */}
+        <div className={`grid gap-2 ${mechanicsColsClass}`}>
+          {!hasOvernight && (
+            <InfoPanel
+              label="Draft Date"
+              value={draftDateTime ? format(new Date(draftDateTime), "MMM d, yyyy") : "TBD"}
+              sub={draftDateTime ? format(new Date(draftDateTime), "p") : undefined}
+            />
+          )}
           <InfoPanel label="Rounds" value={draftRounds} sub={roundsSub} />
-
+          {hasPosition && (
-          {/* User's Draft Position (only when set) */}
-          {userDraftPosition !== null && userDraftPosition !== undefined && (
             <InfoPanel label="Your Pick" value={`#${userDraftPosition}`} sub="round 1 position" />
           )}
-
+          {timerPanel}
-          {/* Timer */}
+          {/* placeholder to keep grid balanced on mobile when only 2 items */}
-          <InfoPanel
+          {hasOvernight && !hasPosition && <div />}
-            label={timerLabel}
-            value={
-              <span className="flex items-center gap-1.5">
-                {draftTimerMode === "chess_clock"
-                  ? <ChessPawn className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  : <Hourglass className="h-4 w-4 shrink-0 text-muted-foreground" />}
-                {timerValue}
-              </span>
-            }
-            sub={timerSub}
-          />
         </div>
       </CardContent>
     </Card>
@@ -120,6 +163,16 @@ function DraftInfoCardVariant({
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
+/** Formats "23:00" → "11 PM", "07:00" → "7 AM". */
+function formatHHMM(hhmm: string): string {
+  const [hStr, mStr] = hhmm.split(":");
+  const h = parseInt(hStr, 10);
+  const m = parseInt(mStr, 10);
+  const period = h < 12 ? "AM" : "PM";
+  const h12 = h % 12 === 0 ? 12 : h % 12;
+  return m === 0 ? `${h12} ${period}` : `${h12}:${String(m).padStart(2, "0")} ${period}`;
+}
+
 /** Converts a seconds value to a short human-readable string, e.g. "1 minute", "10 seconds", "2 hours". */
 function formatHumanTime(seconds: number): string {
   const h = Math.floor(seconds / 3600);

app/components/league/TimezonePromptBanner.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect";
+
+const VALID_TIMEZONES = new Set(
+  TIMEZONE_OPTIONS.flatMap((g) => g.zones.map((z) => z.value))
+);
+
+interface TimezonePromptBannerProps {
+  /** Called with the saved timezone value after a successful POST. */
+  onSaved?: (timezone: string) => void;
+}
+
+export function TimezonePromptBanner({ onSaved }: TimezonePromptBannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  if (dismissed || saved) return null;
+
+  const detectedTz =
+    typeof window !== "undefined"
+      ? (() => {
+          try {
+            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            return VALID_TIMEZONES.has(tz) ? tz : null;
+          } catch {
+            return null;
+          }
+        })()
+      : null;
+
+  if (!detectedTz) return null;
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const body = new FormData();
+      body.set("timezone", detectedTz);
+      const res = await fetch("/api/user/timezone", { method: "POST", body });
+      if (res.ok) {
+        setSaved(true);
+        onSaved?.(detectedTz);
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-3 px-4 py-2 bg-blue-950/40 border-b border-blue-800/40 text-sm text-blue-200">
+      <span>
+        Set your timezone to <strong>{detectedTz}</strong> for overnight pick
+        protection?
+      </span>
+      <div className="flex items-center gap-2 shrink-0">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-3 py-1 rounded bg-blue-700 hover:bg-blue-600 text-white text-xs font-medium disabled:opacity-50"
+        >
+          {saving ? "Saving…" : "Save"}
+        </button>
+        <button
+          onClick={() => setDismissed(true)}
+          className="text-blue-400 hover:text-blue-200 text-xs"
+        >
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}

app/components/league/TimezoneSelect.tsx

@@ -0,0 +1,141 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+
+export const TIMEZONE_OPTIONS: { region: string; zones: { value: string; label: string }[] }[] = [
+  {
+    region: "North America",
+    zones: [
+      { value: "America/New_York", label: "Eastern Time (ET)" },
+      { value: "America/Chicago", label: "Central Time (CT)" },
+      { value: "America/Denver", label: "Mountain Time (MT)" },
+      { value: "America/Phoenix", label: "Mountain Time – Arizona (no DST)" },
+      { value: "America/Los_Angeles", label: "Pacific Time (PT)" },
+      { value: "America/Anchorage", label: "Alaska Time (AKT)" },
+      { value: "Pacific/Honolulu", label: "Hawaii Time (HT)" },
+      { value: "America/Toronto", label: "Eastern Time – Toronto" },
+      { value: "America/Vancouver", label: "Pacific Time – Vancouver" },
+      { value: "America/Edmonton", label: "Mountain Time – Edmonton" },
+      { value: "America/Winnipeg", label: "Central Time – Winnipeg" },
+      { value: "America/Halifax", label: "Atlantic Time – Halifax" },
+      { value: "America/St_Johns", label: "Newfoundland Time" },
+      { value: "America/Mexico_City", label: "Central Time – Mexico City" },
+    ],
+  },
+  {
+    region: "South America",
+    zones: [
+      { value: "America/Sao_Paulo", label: "Brasília Time (BRT)" },
+      { value: "America/Argentina/Buenos_Aires", label: "Argentina Time (ART)" },
+      { value: "America/Bogota", label: "Colombia Time (COT)" },
+      { value: "America/Lima", label: "Peru Time (PET)" },
+      { value: "America/Santiago", label: "Chile Time (CLT)" },
+    ],
+  },
+  {
+    region: "Europe",
+    zones: [
+      { value: "Europe/London", label: "GMT / British Time (GMT/BST)" },
+      { value: "Europe/Dublin", label: "Irish Time (GMT/IST)" },
+      { value: "Europe/Paris", label: "Central European Time (CET/CEST)" },
+      { value: "Europe/Berlin", label: "Central European Time – Berlin" },
+      { value: "Europe/Amsterdam", label: "Central European Time – Amsterdam" },
+      { value: "Europe/Madrid", label: "Central European Time – Madrid" },
+      { value: "Europe/Rome", label: "Central European Time – Rome" },
+      { value: "Europe/Warsaw", label: "Central European Time – Warsaw" },
+      { value: "Europe/Helsinki", label: "Eastern European Time (EET/EEST)" },
+      { value: "Europe/Athens", label: "Eastern European Time – Athens" },
+      { value: "Europe/Bucharest", label: "Eastern European Time – Bucharest" },
+      { value: "Europe/Kyiv", label: "Eastern European Time – Kyiv" },
+      { value: "Europe/Moscow", label: "Moscow Time (MSK)" },
+    ],
+  },
+  {
+    region: "Africa",
+    zones: [
+      { value: "Africa/Johannesburg", label: "South Africa Time (SAST)" },
+      { value: "Africa/Cairo", label: "Eastern European Time – Cairo" },
+      { value: "Africa/Lagos", label: "West Africa Time (WAT)" },
+      { value: "Africa/Nairobi", label: "East Africa Time (EAT)" },
+    ],
+  },
+  {
+    region: "Asia / Middle East",
+    zones: [
+      { value: "Asia/Dubai", label: "Gulf Standard Time (GST)" },
+      { value: "Asia/Riyadh", label: "Arabia Standard Time (AST)" },
+      { value: "Asia/Kolkata", label: "India Standard Time (IST)" },
+      { value: "Asia/Dhaka", label: "Bangladesh Standard Time (BST)" },
+      { value: "Asia/Bangkok", label: "Indochina Time (ICT)" },
+      { value: "Asia/Singapore", label: "Singapore Time (SGT)" },
+      { value: "Asia/Shanghai", label: "China Standard Time (CST)" },
+      { value: "Asia/Hong_Kong", label: "Hong Kong Time (HKT)" },
+      { value: "Asia/Tokyo", label: "Japan Standard Time (JST)" },
+      { value: "Asia/Seoul", label: "Korea Standard Time (KST)" },
+      { value: "Asia/Karachi", label: "Pakistan Standard Time (PKT)" },
+      { value: "Asia/Colombo", label: "Sri Lanka Time (SLST)" },
+      { value: "Asia/Tehran", label: "Iran Standard Time (IRST)" },
+      { value: "Asia/Jerusalem", label: "Israel Standard Time (IST/IDT)" },
+    ],
+  },
+  {
+    region: "Oceania",
+    zones: [
+      { value: "Australia/Sydney", label: "Australian Eastern Time (AEST/AEDT)" },
+      { value: "Australia/Melbourne", label: "Australian Eastern Time – Melbourne" },
+      { value: "Australia/Brisbane", label: "Australian Eastern Time – Queensland" },
+      { value: "Australia/Adelaide", label: "Australian Central Time (ACST/ACDT)" },
+      { value: "Australia/Perth", label: "Australian Western Time (AWST)" },
+      { value: "Pacific/Auckland", label: "New Zealand Time (NZST/NZDT)" },
+      { value: "Pacific/Fiji", label: "Fiji Time (FJT)" },
+    ],
+  },
+  {
+    region: "UTC / Other",
+    zones: [
+      { value: "UTC", label: "UTC (Coordinated Universal Time)" },
+    ],
+  },
+];
+
+interface TimezoneSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  name?: string;
+}
+
+export function TimezoneSelect({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Select timezone…",
+  name,
+}: TimezoneSelectProps) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled} name={name}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="max-h-80">
+        {TIMEZONE_OPTIONS.map((group) => (
+          <SelectGroup key={group.region}>
+            <SelectLabel>{group.region}</SelectLabel>
+            {group.zones.map((tz) => (
+              <SelectItem key={tz.value} value={tz.value}>
+                {tz.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

app/hooks/useDraftRoomState.ts

@@ -125,6 +125,9 @@ export function useDraftRoomState({
   const [timeBankDirection, setTimeBankDirection] = useState<"add" | "remove">("add");
   const [isAdjustingTimeBank, setIsAdjustingTimeBank] = useState(false);
 
+  const [isOvernightPause, setIsOvernightPause] = useState(false);
+  const [overnightResumesAt, setOvernightResumesAt] = useState<Date | null>(null);
+
   return {
     picks, setPicks,
     currentPick, setCurrentPick,
@@ -160,5 +163,7 @@ export function useDraftRoomState({
     timeBankUnit, setTimeBankUnit,
     timeBankDirection, setTimeBankDirection,
     isAdjustingTimeBank, setIsAdjustingTimeBank,
+    isOvernightPause, setIsOvernightPause,
+    overnightResumesAt, setOvernightResumesAt,
   };
 }

app/hooks/useDraftSocketEvents.ts

@@ -36,6 +36,8 @@ interface UseDraftSocketEventsParams {
   setConnectedTeams: (fn: (prev: Set<string>) => Set<string>) => void;
   setQueue: (fn: (prev: QueueItem[]) => QueueItem[]) => void;
   setTeamTimers: (fn: (prev: Record<string, number>) => Record<string, number>) => void;
+  setIsOvernightPause: (value: boolean) => void;
+  setOvernightResumesAt: (value: Date | null) => void;
 }
 
 export function useDraftSocketEvents({
@@ -60,6 +62,8 @@ export function useDraftSocketEvents({
   setConnectedTeams,
   setQueue,
   setTeamTimers,
+  setIsOvernightPause,
+  setOvernightResumesAt,
 }: UseDraftSocketEventsParams) {
   useEffect(() => {
     type PickMadePayload = {
@@ -93,7 +97,13 @@ export function useDraftSocketEvents({
       }
     };
 
-    const handleTimerUpdate = (data: { teamId: string; timeRemaining: number; currentPickNumber: number | null }) => {
+    const handleTimerUpdate = (data: {
+      teamId: string;
+      timeRemaining: number;
+      currentPickNumber: number | null;
+      overnightPauseActive?: boolean;
+      resumesAtUTC?: number;
+    }) => {
       setTeamTimers((prev) => {
         if (prev[data.teamId] === data.timeRemaining) return prev;
         return { ...prev, [data.teamId]: data.timeRemaining };
@@ -101,6 +111,9 @@ export function useDraftSocketEvents({
       if (data.currentPickNumber !== null) {
         setCurrentPick(data.currentPickNumber);
       }
+      const pauseActive = data.overnightPauseActive ?? false;
+      setIsOvernightPause(pauseActive);
+      setOvernightResumesAt(pauseActive && data.resumesAtUTC ? new Date(data.resumesAtUTC) : null);
     };
 
     const handleDraftPaused = () => setIsPaused(true);

app/lib/__tests__/overnight-pause.test.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect } from "vitest";
+import { isInOvernightWindow, getOvernightResumeUTC } from "../overnight-pause";
+
+// Helper to build a Date at a specific local time in a timezone.
+// We use a known UTC offset approach: format a UTC date, check what local time
+// it produces, then shift until we hit the desired time.
+function dateAtLocalTime(
+  timezone: string,
+  year: number,
+  month: number, // 1-indexed
+  day: number,
+  hour: number,
+  minute: number
+): Date {
+  // Use a binary-search-free approach: construct approximate UTC, then correct
+  const approxUtc = Date.UTC(year, month - 1, day, hour, minute);
+  const probe = new Date(approxUtc);
+  const fmt = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  const parts = fmt.formatToParts(probe);
+  const localHour = parseInt(parts.find((p) => p.type === "hour")?.value ?? "0", 10);
+  const localMin = parseInt(parts.find((p) => p.type === "minute")?.value ?? "0", 10);
+  const h = localHour === 24 ? 0 : localHour;
+  const diffMs = ((hour * 60 + minute) - (h * 60 + localMin)) * 60 * 1000;
+  return new Date(approxUtc + diffMs);
+}
+
+// ─── isInOvernightWindow ──────────────────────────────────────────────────────
+
+describe("isInOvernightWindow — midnight-spanning window (23:00–07:00)", () => {
+  const tz = "America/New_York";
+  const start = "23:00";
+  const end = "07:00";
+
+  it("returns true just after window starts (23:30)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 23, 30))).toBe(true);
+  });
+
+  it("returns true at exact window start (23:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 23, 0))).toBe(true);
+  });
+
+  it("returns true past midnight (01:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 16, 1, 0))).toBe(true);
+  });
+
+  it("returns true just before window ends (06:59)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 16, 6, 59))).toBe(true);
+  });
+
+  it("returns false exactly at window end (07:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 16, 7, 0))).toBe(false);
+  });
+
+  it("returns false in the middle of the day (14:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 14, 0))).toBe(false);
+  });
+
+  it("returns false just before window starts (22:59)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 22, 59))).toBe(false);
+  });
+});
+
+describe("isInOvernightWindow — same-day window (10:00–18:00)", () => {
+  const tz = "America/Chicago";
+  const start = "10:00";
+  const end = "18:00";
+
+  it("returns true at 14:00", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 14, 0))).toBe(true);
+  });
+
+  it("returns true at exact start (10:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 10, 0))).toBe(true);
+  });
+
+  it("returns false at exact end (18:00)", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 18, 0))).toBe(false);
+  });
+
+  it("returns false at 09:59", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 9, 59))).toBe(false);
+  });
+
+  it("returns false at 20:00", () => {
+    expect(isInOvernightWindow(tz, start, end, dateAtLocalTime(tz, 2025, 6, 15, 20, 0))).toBe(false);
+  });
+});
+
+describe("isInOvernightWindow — different IANA timezones", () => {
+  it("works for Europe/London at 00:30 in a midnight-spanning window", () => {
+    const d = dateAtLocalTime("Europe/London", 2025, 6, 15, 0, 30);
+    expect(isInOvernightWindow("Europe/London", "23:00", "07:00", d)).toBe(true);
+  });
+
+  it("works for Asia/Tokyo — 23:30 is in window", () => {
+    const d = dateAtLocalTime("Asia/Tokyo", 2025, 6, 15, 23, 30);
+    expect(isInOvernightWindow("Asia/Tokyo", "23:00", "07:00", d)).toBe(true);
+  });
+
+  it("works for Asia/Tokyo — 14:00 is not in window", () => {
+    const d = dateAtLocalTime("Asia/Tokyo", 2025, 6, 15, 14, 0);
+    expect(isInOvernightWindow("Asia/Tokyo", "23:00", "07:00", d)).toBe(false);
+  });
+});
+
+// ─── getOvernightResumeUTC ────────────────────────────────────────────────────
+
+describe("getOvernightResumeUTC", () => {
+  it("returns a future date when called during the overnight window", () => {
+    const tz = "America/New_York";
+    // 2:00 AM ET — inside the 23:00–07:00 window
+    const now = dateAtLocalTime(tz, 2025, 6, 16, 2, 0);
+    const resume = getOvernightResumeUTC(tz, "07:00", now);
+    expect(resume.getTime()).toBeGreaterThan(now.getTime());
+  });
+
+  it("returns a date that represents 07:00 in target timezone", () => {
+    const tz = "America/Chicago";
+    const now = dateAtLocalTime(tz, 2025, 6, 16, 1, 0);
+    const resume = getOvernightResumeUTC(tz, "07:00", now);
+    // Verify it shows as 07:00 in Chicago
+    const fmt = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+    const parts = fmt.formatToParts(resume);
+    const h = parseInt(parts.find((p) => p.type === "hour")?.value ?? "0", 10);
+    const m = parseInt(parts.find((p) => p.type === "minute")?.value ?? "0", 10);
+    expect(h).toBe(7);
+    expect(m).toBe(0);
+  });
+
+  it("returns tomorrow's end time when current time is after window end (daytime)", () => {
+    const tz = "America/New_York";
+    // 14:00 ET — outside the window, should return tomorrow 07:00
+    const now = dateAtLocalTime(tz, 2025, 6, 16, 14, 0);
+    const resume = getOvernightResumeUTC(tz, "07:00", now);
+    expect(resume.getTime()).toBeGreaterThan(now.getTime());
+  });
+});

app/lib/overnight-pause.ts

@@ -0,0 +1,96 @@
+/**
+ * Utilities for overnight pause windows.
+ * Works in both Node.js and browser — uses only Intl, no extra dependencies.
+ */
+
+function getLocalMinutes(timezone: string, now: Date): number {
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  const parts = formatter.formatToParts(now);
+  const hour = parseInt(parts.find((p) => p.type === "hour")?.value ?? "0", 10);
+  const minute = parseInt(parts.find((p) => p.type === "minute")?.value ?? "0", 10);
+  // Intl hour12:false can return "24" for midnight — normalize to 0
+  return (hour === 24 ? 0 : hour) * 60 + minute;
+}
+
+/**
+ * Build a UTC Date representing "the given date at HH:MM in the given timezone."
+ * Corrects for the UTC offset by comparing what local time the naive UTC produces.
+ */
+function utcForLocalTime(
+  timezone: string,
+  year: number,
+  month: number, // 1-indexed
+  day: number,
+  hour: number,
+  minute: number
+): Date {
+  // Start with a naive UTC (treating target H:M as UTC)
+  const approxUTC = Date.UTC(year, month - 1, day, hour, minute, 0);
+  const probe = new Date(approxUTC);
+  const localMins = getLocalMinutes(timezone, probe);
+  const targetMins = hour * 60 + minute;
+  // Shift: if local is behind target, add the gap; if ahead, subtract it
+  return new Date(approxUTC + (targetMins - localMins) * 60 * 1000);
+}
+
+/**
+ * Returns true if `now` falls inside the overnight pause window defined by
+ * startHHMM–endHHMM in the given IANA timezone.
+ *
+ * The window almost always spans midnight (e.g. "23:00"–"07:00"), but a
+ * same-day window (e.g. "10:00"–"18:00") is also handled correctly.
+ */
+export function isInOvernightWindow(
+  timezone: string,
+  startHHMM: string,
+  endHHMM: string,
+  now = new Date()
+): boolean {
+  const currentMinutes = getLocalMinutes(timezone, now);
+  const [sh, sm] = startHHMM.split(":").map(Number);
+  const [eh, em] = endHHMM.split(":").map(Number);
+  const startMinutes = sh * 60 + sm;
+  const endMinutes = eh * 60 + em;
+
+  if (startMinutes > endMinutes) {
+    // Spans midnight: in window if current >= start OR current < end
+    return currentMinutes >= startMinutes || currentMinutes < endMinutes;
+  }
+  // Same-day window: in window if start <= current < end
+  return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+}
+
+/**
+ * Returns the next UTC Date when endHHMM will occur in the given timezone.
+ * Used to tell clients when the overnight window will end.
+ */
+export function getOvernightResumeUTC(
+  timezone: string,
+  endHHMM: string,
+  now = new Date()
+): Date {
+  const [eh, em] = endHHMM.split(":").map(Number);
+
+  // Get current calendar date in the target timezone
+  const dateFmt = new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+  const [year, month, day] = dateFmt.format(now).split("-").map(Number);
+
+  // Candidate: today at endHHMM in the target timezone
+  const candidate = utcForLocalTime(timezone, year, month, day, eh, em);
+
+  // If this moment has already passed, advance one day
+  if (candidate.getTime() <= now.getTime()) {
+    return new Date(candidate.getTime() + 24 * 60 * 60 * 1000);
+  }
+  return candidate;
+}

app/models/draft-utils.ts

@@ -705,6 +705,7 @@ export async function executeAutoPick(params: {
         teamId,
         timeRemaining: emitTimeRemaining,
         currentPickNumber: nextPickNumber,
+        overnightPauseActive: false,
       });
     } catch (error) {
       logger.error("[AutoPick] Socket.IO timer-update error:", error);

app/models/user.ts

@@ -1,4 +1,4 @@
-import { eq, inArray } from "drizzle-orm";
+import { eq, inArray, and } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
 
@@ -74,3 +74,23 @@ export async function findAllUsers(): Promise<User[]> {
     orderBy: (users, { asc }) => [asc(users.displayName)],
   });
 }
+
+/**
+ * Returns true if the user currently owns a team in a draft-status season.
+ * Used to prevent timezone changes mid-draft.
+ */
+export async function isUserInActiveDraft(userId: string): Promise<boolean> {
+  const db = database();
+  const result = await db
+    .select({ id: schema.teams.id })
+    .from(schema.teams)
+    .innerJoin(schema.seasons, eq(schema.teams.seasonId, schema.seasons.id))
+    .where(
+      and(
+        eq(schema.teams.ownerId, userId),
+        eq(schema.seasons.status, "draft")
+      )
+    )
+    .limit(1);
+  return result.length > 0;
+}

app/routes.ts

@@ -47,6 +47,7 @@ export default [
   route("api/draft/rollback", "routes/api/draft.rollback.ts"),
   route("api/draft/adjust-time-bank", "routes/api/draft.adjust-time-bank.ts"),
   route("api/autodraft/update", "routes/api/autodraft.update.ts"),
+  route("api/user/timezone", "routes/api/user.timezone.ts"),
   route("api/seasons/:seasonId/draft", "routes/api/seasons.$seasonId.draft.ts"),
   route("login", "routes/login.tsx"),
   route("register", "routes/register.tsx"),

app/routes/api/user.timezone.ts

@@ -0,0 +1,32 @@
+import type { ActionFunctionArgs } from "react-router";
+import { auth } from "~/lib/auth.server";
+import { updateUser, isUserInActiveDraft } from "~/models/user";
+import { TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect";
+
+const VALID_TIMEZONES = new Set(
+  TIMEZONE_OPTIONS.flatMap((g) => g.zones.map((z) => z.value))
+);
+
+export async function action(args: ActionFunctionArgs) {
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  if (!session) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const formData = await args.request.formData();
+  const timezone = formData.get("timezone") as string | null;
+
+  if (!timezone || !VALID_TIMEZONES.has(timezone)) {
+    return Response.json({ error: "Invalid timezone" }, { status: 400 });
+  }
+
+  if (await isUserInActiveDraft(session.user.id)) {
+    return Response.json(
+      { error: "Cannot change timezone during an active draft" },
+      { status: 403 }
+    );
+  }
+
+  await updateUser(session.user.id, { timezone });
+  return Response.json({ success: true });
+}

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -1,7 +1,7 @@
 import { useLoaderData, Link, useRevalidator } from "react-router";
 import { useDraftSocket } from "~/hooks/useDraftSocket";
 import { logger } from "~/lib/logger";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "~/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import { auth } from "~/lib/auth.server";
@@ -20,8 +20,9 @@ import { getDraftParticipants } from "~/models/participant";
 import { getSeasonTimers } from "~/models/draft-timer";
 import { getSeasonAutodraftSettings } from "~/models/autodraft-settings";
 import { hasCommissionerRecord } from "~/models/commissioner";
+import { findUsersByIds, getUserDisplayName } from "~/models/user";
+import { isInOvernightWindow } from "~/lib/overnight-pause";
 import logomarkUrl from "../../../public/logomark.svg?url";
-import { buildOwnerMap } from "~/lib/owner-map";
 import { DraftSidebar } from "~/components/DraftSidebar";
 import { TeamRosterView } from "~/components/draft/TeamRosterView";
 import { DraftSummaryView } from "~/components/draft/DraftSummaryView";
@@ -113,7 +114,32 @@ export async function loader(args: Route.LoaderArgs) {
     ? (autodraftSettings.find((s) => s.teamId === userTeam.id) ?? null)
     : null;
 
-  const ownerMap = await buildOwnerMap(draftSlots);
+  // Single users query builds both the owner display-name map and the timezone
+  // map for overnight pause moon icons — avoids two separate findUsersByIds calls.
+  const uniqueOwnerIds = [...new Set(
+    draftSlots.map((s) => s.team.ownerId).filter((id): id is string => id !== null)
+  )];
+  const userRows = uniqueOwnerIds.length ? await findUsersByIds(uniqueOwnerIds) : [];
+  const userById = new Map(userRows.map((u) => [u.id, u]));
+
+  const ownerMap: Record<string, string> = {};
+  for (const slot of draftSlots) {
+    if (slot.team.ownerId) {
+      const user = userById.get(slot.team.ownerId);
+      const name = user ? getUserDisplayName(user) : null;
+      if (name) ownerMap[slot.team.id] = name;
+    }
+  }
+
+  const teamTimezoneMap: Record<string, string | null> =
+    season.overnightPauseMode === "per_user"
+      ? Object.fromEntries(
+          draftSlots.map((slot) => [
+            slot.team.id,
+            slot.team.ownerId ? (userById.get(slot.team.ownerId)?.timezone || null) : null,
+          ])
+        )
+      : {};
 
   return {
     season,
@@ -128,6 +154,7 @@ export async function loader(args: Route.LoaderArgs) {
     isCommissioner: !!isCommissioner,
     currentUserId: userId,
     ownerMap,
+    teamTimezoneMap,
   };
 }
 
@@ -145,6 +172,7 @@ export default function DraftRoom() {
     isCommissioner,
     currentUserId,
     ownerMap,
+    teamTimezoneMap,
   } = useLoaderData<typeof loader>();
   const { revalidate, state: revalidatorState } = useRevalidator();
   const { isConnected, connectionError, isReconnecting, reconnectCount, socketVersion, on, off } = useDraftSocket(season.id, userTeam?.id);
@@ -203,6 +231,8 @@ export default function DraftRoom() {
     timeBankUnit, setTimeBankUnit,
     timeBankDirection, setTimeBankDirection,
     isAdjustingTimeBank, setIsAdjustingTimeBank,
+    isOvernightPause, setIsOvernightPause,
+    overnightResumesAt, setOvernightResumesAt,
   } = useDraftRoomState({
     draftPicks,
     season,
@@ -214,6 +244,27 @@ export default function DraftRoom() {
     userQueue,
   });
 
+  // Advances every second so isInOvernightWindow sees the real current time.
+  const [nowForPauseCheck, setNowForPauseCheck] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => setNowForPauseCheck(new Date()), 1_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Compute which teams are currently in their overnight pause window.
+  const pausedTeamIds = useMemo(() => {
+    const { overnightPauseMode: mode, overnightPauseStart: start, overnightPauseEnd: end, overnightPauseTimezone: fallbackTz } = season;
+    if (mode === "none" || !start || !end) return new Set<string>();
+    const result = new Set<string>();
+    for (const slot of draftSlots) {
+      const tz = mode === "league"
+        ? (fallbackTz || null)
+        : (teamTimezoneMap[slot.team.id] || fallbackTz || null);
+      if (tz && isInOvernightWindow(tz, start, end, nowForPauseCheck)) result.add(slot.team.id);
+    }
+    return result;
+  }, [season, draftSlots, teamTimezoneMap, nowForPauseCheck]);
+
   const {
     authDegraded,
     authFetch,
@@ -365,6 +416,8 @@ export default function DraftRoom() {
     setConnectedTeams,
     setQueue,
     setTeamTimers,
+    setIsOvernightPause,
+    setOvernightResumesAt,
   });
 
   // Persist sidebar collapsed state
@@ -956,13 +1009,14 @@ export default function DraftRoom() {
     connectedTeams,
     seasonStatus: season.status,
     draftPaused: isPaused,
+    overnightPauseInfo: { isActive: isOvernightPause, resumesAt: overnightResumesAt, pausedTeamIds },
     onAdjustTimeBankOpen: isCommissioner ? handleAdjustTimeBankOpen : undefined,
     onSetAutodraftOpen: isCommissioner ? handleSetAutodraftOpen : undefined,
     onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
     onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
     onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
     onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
-  }), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, teamTimers, autodraftStatus, connectedTeams, season.status, isPaused, isCommissioner, handleAdjustTimeBankOpen, handleSetAutodraftOpen, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
+  }), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, teamTimers, autodraftStatus, connectedTeams, season.status, isPaused, isOvernightPause, overnightResumesAt, pausedTeamIds, isCommissioner, handleAdjustTimeBankOpen, handleSetAutodraftOpen, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
 
   const availableParticipantsSectionProps = useMemo(() => ({
     participants: filteredParticipants,
@@ -1002,6 +1056,7 @@ export default function DraftRoom() {
     ownerMap,
     seasonStatus: season.status,
     draftPaused: isPaused,
+    overnightPauseInfo: { isActive: isOvernightPause, resumesAt: overnightResumesAt, pausedTeamIds },
     onAdjustTimeBankOpen: isCommissioner ? handleAdjustTimeBankOpen : undefined,
     onSetAutodraftOpen: isCommissioner ? handleSetAutodraftOpen : undefined,
     onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
@@ -1145,12 +1200,20 @@ export default function DraftRoom() {
       {season.status === "draft" && !isDraftComplete && currentDraftSlot && (
         <div className={`md:hidden flex-shrink-0 flex items-center justify-between px-4 py-2 border-b ${
           isMyTurn
-            ? "bg-electric/25 border-electric"
+            ? isOvernightPause
+              ? "bg-blue-950/40 border-blue-800/40"
+              : "bg-electric/25 border-electric"
             : "bg-muted/30"
         }`}>
           <div>
-            <div className={`text-xs font-bold uppercase tracking-wider ${isMyTurn ? "text-electric" : "text-muted-foreground"}`}>
+            <div className={`text-xs font-bold uppercase tracking-wider ${
-              {isMyTurn ? "Your Turn!" : "On the Clock"}
+              isMyTurn
+                ? isOvernightPause ? "text-blue-400" : "text-electric"
+                : "text-muted-foreground"
+            }`}>
+              {isMyTurn
+                ? isOvernightPause ? "Overnight Pause" : "Your Turn!"
+                : "On the Clock"}
             </div>
             <div className="text-sm font-bold">
               {currentDraftSlotOwnerName ?? currentDraftSlot.team.name}
@@ -1161,6 +1224,10 @@ export default function DraftRoom() {
           </div>
           {isPaused ? (
             <span className="text-sm font-bold text-amber-accent">Paused</span>
+          ) : isOvernightPause ? (
+            <span className={`text-xl font-mono font-bold tabular-nums ${currentClockColor}`}>
+              🌙 {formatClockTime(currentClockTime)}
+            </span>
           ) : (
             <span className={`text-xl font-mono font-bold tabular-nums ${currentClockColor}`}>
               {formatClockTime(currentClockTime)}
@@ -1170,9 +1237,11 @@ export default function DraftRoom() {
       )}
 
       {/* Desktop Tab Navigation Row */}
-      <div className={`hidden md:flex flex-shrink-0 items-center justify-between px-4 py-2 border-b transition-all duration-300 ${
+      <div className={`hidden md:grid md:grid-cols-3 flex-shrink-0 items-center px-4 py-2 border-b transition-all duration-300 ${
         isMyTurn && season.status === "draft" && !isDraftComplete
-          ? "bg-electric/25 border-electric shadow-[0_0_24px_0_rgb(0_200_255_/_0.18)]"
+          ? isOvernightPause
+            ? "bg-blue-950/40 border-blue-800/40"
+            : "bg-electric/25 border-electric shadow-[0_0_24px_0_rgb(0_200_255_/_0.18)]"
           : "bg-card"
       }`}>
         <Tabs
@@ -1188,17 +1257,36 @@ export default function DraftRoom() {
             <TabsTrigger value="summary">Summary</TabsTrigger>
           </TabsList>
         </Tabs>
-        {userTeam && (
+        <div className="flex justify-center">
-          <AutodraftBadgeWithPopover
+          {isMyTurn && season.status === "draft" && !isDraftComplete && (
-            seasonId={season.id}
+            isOvernightPause ? (
-            teamId={userTeam.id}
+              <span className="text-sm text-blue-200 text-center leading-snug">
-            isEnabled={userAutodraft.isEnabled}
+                🌙 Overnight pause active — timer frozen
-            mode={userAutodraft.mode}
+                {overnightResumesAt && (
-            queueOnly={userAutodraft.queueOnly}
+                  <> until {overnightResumesAt.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}</>
-            isMyTurn={isMyTurn}
+                )}. You can still pick.
-            onUpdate={handleAutodraftUpdate}
+              </span>
-          />
+            ) : (
-        )}
+              <span className="text-base font-bold tracking-wide text-electric">
+                It&apos;s your turn!
+              </span>
+            )
+          )}
+        </div>
+        <div className="flex justify-end">
+          {userTeam && (
+            <AutodraftBadgeWithPopover
+              seasonId={season.id}
+              teamId={userTeam.id}
+              isEnabled={userAutodraft.isEnabled}
+              mode={userAutodraft.mode}
+              queueOnly={userAutodraft.queueOnly}
+              isMyTurn={isMyTurn}
+              onUpdate={handleAutodraftUpdate}
+              showOvernightNote={season.overnightPauseMode !== "none"}
+            />
+          )}
+        </div>
       </div>
 
       {/* Main Content — single layout tree based on isMobile to avoid duplicate component instances */}

app/routes/leagues/$leagueId.server.ts

@@ -17,6 +17,7 @@ import { getUpcomingEventsForDraftedParticipants } from "~/models/scoring-event"
 import { getUpcomingGroupStageMatchesForParticipants } from "~/models/group-stage-match";
 import { getDraftedParticipantsBySportsSeason, getDraftedParticipantsWithPoints, type DraftedParticipantWithPoints } from "~/models/draft-pick";
 import { getAuditLogForSeason } from "~/models/audit-log";
+import { findUserById } from "~/models/user";
 import type { Route } from "./+types/$leagueId";
 
 export async function loader(args: Route.LoaderArgs) {
@@ -205,9 +206,18 @@ export async function loader(args: Route.LoaderArgs) {
     ? await getAuditLogForSeason(season.id, { limit: 5 })
     : { entries: [], total: 0, hasMore: false };
 
+  // Show timezone banner in per_user overnight pause mode when user hasn't set their timezone
+  const showTimezoneBanner =
+    userId &&
+    season?.status === "pre_draft" &&
+    season?.overnightPauseMode === "per_user"
+      ? !(await findUserById(userId))?.timezone
+      : false;
+
   return {
     league,
     season,
+    showTimezoneBanner: !!showTimezoneBanner,
     teams,
     commissioners,
     currentUserId: userId,

app/routes/leagues/$leagueId.settings.tsx

@@ -68,6 +68,10 @@ import {
 import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";
 import { toast } from "sonner";
 
+function isValidHHMM(s: string): boolean {
+  return /^\d{2}:\d{2}$/.test(s);
+}
+
 export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
   return [{ title: `Settings — ${data?.league?.name ?? "League"} - Brackt` }];
 }
@@ -156,6 +160,8 @@ export async function loader(args: Route.LoaderArgs) {
     name: o.name,
   }));
 
+  const commishTimezone = (await findUserById(userId))?.timezone ?? null;
+
   return {
     league,
     season,
@@ -170,6 +176,7 @@ export async function loader(args: Route.LoaderArgs) {
     ownerMap: Object.fromEntries(ownerMap),
     commissioners: commissionerUserData,
     currentUserId: userId,
+    commishTimezone,
   };
 }
 
@@ -587,6 +594,28 @@ export async function action(args: Route.ActionArgs) {
         seasonUpdates.draftTimerMode = draftTimerMode;
       }
 
+      // Overnight pause settings
+      const overnightPauseMode = formData.get("overnightPauseMode") as "none" | "league" | "per_user" | null;
+      if (overnightPauseMode && ["none", "league", "per_user"].includes(overnightPauseMode)) {
+        if (overnightPauseMode !== season.overnightPauseMode) {
+          seasonUpdates.overnightPauseMode = overnightPauseMode;
+        }
+        if (overnightPauseMode !== "none") {
+          const start = formData.get("overnightPauseStart") as string | null;
+          const end = formData.get("overnightPauseEnd") as string | null;
+          const tz = formData.get("overnightPauseTimezone") as string | null;
+          if (start && isValidHHMM(start) && start !== season.overnightPauseStart) {
+            seasonUpdates.overnightPauseStart = start;
+          }
+          if (end && isValidHHMM(end) && end !== season.overnightPauseEnd) {
+            seasonUpdates.overnightPauseEnd = end;
+          }
+          if (tz && tz.length > 0 && tz !== season.overnightPauseTimezone) {
+            seasonUpdates.overnightPauseTimezone = tz;
+          }
+        }
+      }
+
       // Handle scoring rules (only if in pre_draft status and values changed)
       if (season.status === "pre_draft") {
         const scoringFields = [
@@ -823,10 +852,11 @@ export async function action(args: Route.ActionArgs) {
 }
 
 export default function LeagueSettings({ loaderData, actionData }: Route.ComponentProps) {
-  const { league, season, teams, teamCount, teamsWithOwners, allSportsSeasons, draftSlots, isAdmin, allUsers, leagueMembers, ownerMap, commissioners, currentUserId } = loaderData;
+  const { league, season, teams, teamCount, teamsWithOwners, allSportsSeasons, draftSlots, isAdmin, allUsers, leagueMembers, ownerMap, commissioners, currentUserId, commishTimezone } = loaderData;
   const navigation = useNavigation();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">(season?.draftTimerMode ?? "chess_clock");
+  const [overnightMode, setOvernightMode] = useState<"none" | "league" | "per_user">(season?.overnightPauseMode ?? "none");
   const [selectedSports, setSelectedSports] = useState<Set<string>>(
     new Set(season?.seasonSports?.map((s) => s.sportsSeason.id) || [])
   );
@@ -844,7 +874,6 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
       ? format(new Date(season.draftDateTime), "HH:mm")
       : ""
   );
-
   // Update draft order when loader data changes (after randomization)
   useEffect(() => {
     const newOrder = draftSlots.length > 0
@@ -1239,6 +1268,137 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
           </CardContent>
         </Card>
 
+        {/* Overnight Pause */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Overnight Pause</CardTitle>
+            <CardDescription>
+              Protect players from having their pick timer expire while they&apos;re asleep.
+              Autodraft will still fire for teams that have it enabled.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="overnightPauseMode">Pause Mode</Label>
+              <select
+                id="overnightPauseMode"
+                name="overnightPauseMode"
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                value={overnightMode}
+                onChange={(e) => setOvernightMode(e.target.value as "none" | "league" | "per_user")}
+                disabled={!canEditDraftRounds}
+              >
+                <option value="none">No pause — timer always runs</option>
+                <option value="league">League-wide — one timezone for everyone</option>
+                <option value="per_user">Per-user — each player&apos;s own timezone</option>
+              </select>
+              <p className="text-sm text-muted-foreground">
+                Per-user mode: each player sets their timezone in their profile. League-wide mode: one timezone applies to all teams.
+              </p>
+              {overnightMode === "per_user" && (
+                <div className={`rounded-md border px-3 py-2.5 text-sm space-y-1 ${commishTimezone ? "border-border bg-muted/40 text-muted-foreground" : "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400"}`}>
+                  <p>Each player&apos;s profile timezone is used to determine their overnight window. Players without one set fall back to the timezone below.</p>
+                  {!commishTimezone && (
+                    <p>
+                      You haven&apos;t set your timezone yet —{" "}
+                      <a href="/profile" className="font-medium underline underline-offset-2">
+                        set it in your profile
+                      </a>
+                      .
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="overnightPauseStart">Pause starts at</Label>
+                <input
+                  id="overnightPauseStart"
+                  name="overnightPauseStart"
+                  type="time"
+                  defaultValue={season?.overnightPauseStart ?? "23:00"}
+                  disabled={!canEditDraftRounds}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="overnightPauseEnd">Pause ends at</Label>
+                <input
+                  id="overnightPauseEnd"
+                  name="overnightPauseEnd"
+                  type="time"
+                  defaultValue={season?.overnightPauseEnd ?? "07:00"}
+                  disabled={!canEditDraftRounds}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="overnightPauseTimezone">
+                Timezone
+                <span className="text-muted-foreground font-normal ml-1">
+                  (league mode) or fallback for users without one set (per-user mode)
+                </span>
+              </Label>
+              <select
+                id="overnightPauseTimezone"
+                name="overnightPauseTimezone"
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                defaultValue={season?.overnightPauseTimezone ?? commishTimezone ?? ""}
+                disabled={!canEditDraftRounds}
+              >
+                <option value="">Select a timezone…</option>
+                <optgroup label="North America">
+                  <option value="America/New_York">Eastern Time (ET)</option>
+                  <option value="America/Chicago">Central Time (CT)</option>
+                  <option value="America/Denver">Mountain Time (MT)</option>
+                  <option value="America/Phoenix">Mountain Time – Arizona (no DST)</option>
+                  <option value="America/Los_Angeles">Pacific Time (PT)</option>
+                  <option value="America/Anchorage">Alaska Time (AKT)</option>
+                  <option value="Pacific/Honolulu">Hawaii Time (HT)</option>
+                  <option value="America/Toronto">Eastern Time – Toronto</option>
+                  <option value="America/Vancouver">Pacific Time – Vancouver</option>
+                  <option value="America/Winnipeg">Central Time – Winnipeg</option>
+                  <option value="America/Halifax">Atlantic Time – Halifax</option>
+                  <option value="America/Mexico_City">Central Time – Mexico City</option>
+                </optgroup>
+                <optgroup label="South America">
+                  <option value="America/Sao_Paulo">Brasília Time (BRT)</option>
+                  <option value="America/Argentina/Buenos_Aires">Argentina Time (ART)</option>
+                  <option value="America/Bogota">Colombia Time (COT)</option>
+                  <option value="America/Santiago">Chile Time (CLT)</option>
+                </optgroup>
+                <optgroup label="Europe">
+                  <option value="Europe/London">GMT / British Time (GMT/BST)</option>
+                  <option value="Europe/Dublin">Irish Time (GMT/IST)</option>
+                  <option value="Europe/Paris">Central European Time (CET/CEST)</option>
+                  <option value="Europe/Berlin">Central European Time – Berlin</option>
+                  <option value="Europe/Moscow">Moscow Time (MSK)</option>
+                </optgroup>
+                <optgroup label="Asia / Middle East">
+                  <option value="Asia/Dubai">Gulf Standard Time (GST)</option>
+                  <option value="Asia/Kolkata">India Standard Time (IST)</option>
+                  <option value="Asia/Singapore">Singapore Time (SGT)</option>
+                  <option value="Asia/Shanghai">China Standard Time (CST)</option>
+                  <option value="Asia/Tokyo">Japan Standard Time (JST)</option>
+                  <option value="Asia/Seoul">Korea Standard Time (KST)</option>
+                </optgroup>
+                <optgroup label="Oceania">
+                  <option value="Australia/Sydney">Australian Eastern Time (AEST/AEDT)</option>
+                  <option value="Australia/Perth">Australian Western Time (AWST)</option>
+                  <option value="Pacific/Auckland">New Zealand Time (NZST/NZDT)</option>
+                </optgroup>
+                <optgroup label="UTC">
+                  <option value="UTC">UTC (Coordinated Universal Time)</option>
+                </optgroup>
+              </select>
+            </div>
+          </CardContent>
+        </Card>
+
         {/* Scoring Rules */}
         <ScoringRulesEditor
           scoringRules={season ? {

app/routes/leagues/$leagueId.tsx

@@ -13,6 +13,7 @@ import { SportsSeasonsSummary } from "~/components/league/SportsSeasonsSummary";
 import { UpcomingEventsCard } from "~/components/sport-season/UpcomingEventsCard";
 import { buildTiedRankChecker, getDisplayRank } from "~/lib/standings-display";
 import { StandingsPreview, type StandingsPreviewEntry } from "~/components/league/StandingsPreview";
+import { TimezonePromptBanner } from "~/components/league/TimezonePromptBanner";
 
 
 export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
@@ -40,6 +41,7 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
     origin,
     upcomingCalendarEvents,
     recentActivity,
+    showTimezoneBanner,
   } = loaderData;
 
   const myTeam = teams.find((t) => t.ownerId === currentUserId);
@@ -131,6 +133,7 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
 
   return (
     <div className="container mx-auto py-8 px-4">
+      {showTimezoneBanner && <TimezonePromptBanner />}
       <div className="mb-8">
         <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
           <div>
@@ -200,6 +203,10 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
               draftBoardHref={`/leagues/${league.id}/draft-board/${season.id}`}
               draftRoomHref={`/leagues/${league.id}/draft/${season.id}`}
               userDraftPosition={userDraftPosition}
+              overnightPauseMode={season.overnightPauseMode}
+              overnightPauseStart={season.overnightPauseStart}
+              overnightPauseEnd={season.overnightPauseEnd}
+              overnightPauseTimezone={season.overnightPauseTimezone}
             />
           )}
 

app/routes/leagues/__tests__/draft-reset.test.ts

@@ -26,6 +26,10 @@ const createMockSeason = (overrides: {
   currentPickNumber: null,
   draftStartedAt: null,
   draftPaused: false,
+  overnightPauseMode: 'none' as const,
+  overnightPauseStart: null,
+  overnightPauseEnd: null,
+  overnightPauseTimezone: null,
   inviteCode: 'ABC123',
   pointsFor1st: 100,
   pointsFor2nd: 70,

app/routes/leagues/__tests__/settings-update.test.ts

@@ -56,6 +56,10 @@ const mockSeason = {
   currentPickNumber: null,
   draftStartedAt: null,
   draftPaused: false,
+  overnightPauseMode: 'none' as const,
+  overnightPauseStart: null,
+  overnightPauseEnd: null,
+  overnightPauseTimezone: null,
   inviteCode: 'TEST123',
   pointsFor1st: 100,
   pointsFor2nd: 70,

app/routes/leagues/__tests__/team-management.test.ts

@@ -191,6 +191,7 @@ describe('Team Management - Admin User List', () => {
         lastName: 'One',
         imageUrl: null,
         isAdmin: false,
+        timezone: null,
         createdAt: new Date(),
         updatedAt: new Date(),
       },
@@ -205,6 +206,7 @@ describe('Team Management - Admin User List', () => {
         lastName: 'Two',
         imageUrl: null,
         isAdmin: false,
+        timezone: null,
         createdAt: new Date(),
         updatedAt: new Date(),
       },
@@ -240,6 +242,7 @@ describe('Team Management - Admin User List', () => {
           lastName: 'One',
           imageUrl: null,
           isAdmin: false,
+          timezone: null,
           createdAt: new Date(),
           updatedAt: new Date(),
         },

app/routes/leagues/new.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Form, redirect, Link } from "react-router";
 import { auth } from "~/lib/auth.server";
 import type { Route } from "./+types/new";
@@ -11,6 +11,7 @@ import { linkMultipleSportsToSeason } from "~/models/season-sport";
 import { createManyTeams } from "~/models/team";
 import { findActiveSeasonTemplates, findSeasonTemplateWithSportsSeasons } from "~/models/season-template";
 import { findDraftableSportsSeasons } from "~/models/sports-season";
+import { findUserById } from "~/models/user";
 import { generateUniqueTeamNames } from "~/utils/team-names";
 import { format } from "date-fns";
 import { CalendarIcon, Check } from "lucide-react";
@@ -42,16 +43,19 @@ import {
 import { cn } from "~/lib/utils";
 import { parseDraftSpeed } from "~/lib/draft-timer";
 import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";
+import { TimezoneSelect } from "~/components/league/TimezoneSelect";
 
 export function meta(): Route.MetaDescriptors {
   return [{ title: "New League - Brackt" }];
 }
 
-export async function loader() {
+export async function loader(args: Route.LoaderArgs) {
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  const userId = session?.user.id ?? null;
+
   const templates = await findActiveSeasonTemplates();
   const allSportsSeasons = await findDraftableSportsSeasons();
 
-  // Fetch templates with their sports seasons for mapping
   const templatesWithSports = await Promise.all(
     templates.map(async (template) => {
       const templateWithSports = await findSeasonTemplateWithSportsSeasons(template.id);
@@ -64,9 +68,14 @@ export async function loader() {
     })
   );
 
+  const commishTimezone = userId
+    ? ((await findUserById(userId))?.timezone ?? null)
+    : null;
+
   return {
     templates: templatesWithSports,
-    allSportsSeasons: allSportsSeasons as Array<typeof allSportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }>
+    allSportsSeasons: allSportsSeasons as Array<typeof allSportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }>,
+    commishTimezone,
   };
 }
 
@@ -88,11 +97,9 @@ export async function action(args: Route.ActionArgs) {
   const draftSpeed = formData.get("draftSpeed");
   const draftTimerMode = (formData.get("draftTimerMode") as "chess_clock" | "standard") || "chess_clock";
 
-  // Map draft speed to time values
   const { draftInitialTime: draftInitialTimeNum, draftIncrementTime: draftIncrementTimeNum } =
     parseDraftSpeed(draftSpeed as string | null, draftTimerMode);
 
-  // Validation
   if (typeof name !== "string" || !name.trim()) {
     return { error: "League name is required" };
   }
@@ -111,7 +118,6 @@ export async function action(args: Route.ActionArgs) {
     return { error: "Draft rounds must be between 1 and 50" };
   }
 
-  // Extract and validate scoring rules
   const scoringFields = [
     "pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
     "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"
@@ -131,20 +137,30 @@ export async function action(args: Route.ActionArgs) {
     }
   }
 
+  const rawPauseMode = formData.get("overnightPauseMode") as string | null;
+  const overnightPauseMode: "none" | "league" | "per_user" =
+    rawPauseMode === "league" || rawPauseMode === "per_user" ? rawPauseMode : "none";
+  const overnightPauseStart = overnightPauseMode !== "none"
+    ? (formData.get("overnightPauseStart") as string | null) ?? "23:00"
+    : null;
+  const overnightPauseEnd = overnightPauseMode !== "none"
+    ? (formData.get("overnightPauseEnd") as string | null) ?? "07:00"
+    : null;
+  const overnightPauseTimezone = overnightPauseMode !== "none"
+    ? (formData.get("overnightPauseTimezone") as string | null) ?? null
+    : null;
+
   try {
-    // Create league
     const league = await createLeague({
       name: name.trim(),
       createdBy: userId,
     });
 
-    // Make creator a commissioner
     await createCommissioner({
       leagueId: league.id,
       userId: userId,
     });
 
-    // Create first season
     const currentYear = new Date().getFullYear();
     const season = await createSeason({
       leagueId: league.id,
@@ -156,16 +172,17 @@ export async function action(args: Route.ActionArgs) {
       draftInitialTime: draftInitialTimeNum,
       draftIncrementTime: draftIncrementTimeNum,
       draftTimerMode,
+      overnightPauseMode,
+      overnightPauseStart,
+      overnightPauseEnd,
+      overnightPauseTimezone,
       ...scoringRules,
     });
 
-    // Set this as the current season for the league
     await setCurrentSeason(league.id, season.id);
 
-    // Add selected sports to the season
     const selectedSports = formData.getAll("sportsSeasons");
 
-    // Validate that draft rounds is at least the number of sports
     if (selectedSports.length > draftRoundsNum) {
       return {
         error: `You need at least ${selectedSports.length} draft rounds for the ${selectedSports.length} sports selected. Currently set to ${draftRoundsNum} rounds.`
@@ -181,7 +198,6 @@ export async function action(args: Route.ActionArgs) {
       );
     }
 
-    // Create teams with fun random names
     const joinAsPlayer = formData.get("joinAsPlayer") === "on";
     const teamNames = generateUniqueTeamNames(teamCountNum);
     const teams = teamNames.map((teamName, i) => ({
@@ -192,7 +208,6 @@ export async function action(args: Route.ActionArgs) {
 
     await createManyTeams(teams);
 
-    // Redirect to league homepage
     return redirect(`/leagues/${league.id}`);
   } catch (error) {
     logger.error("Error creating league:", error);
@@ -201,13 +216,22 @@ export async function action(args: Route.ActionArgs) {
 }
 
 export default function NewLeague({ loaderData, actionData }: Route.ComponentProps) {
-  const { templates, allSportsSeasons } = loaderData;
+  const { templates, allSportsSeasons, commishTimezone } = loaderData;
   const [selectedTemplate, setSelectedTemplate] = useState<string>("");
   const [selectedSports, setSelectedSports] = useState<Set<string>>(new Set());
   const [draftRounds, setDraftRounds] = useState<number>(20);
   const [draftDate, setDraftDate] = useState<Date>();
   const [draftTime, setDraftTime] = useState<string>("");
   const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">("chess_clock");
+  const [overnightMode, setOvernightMode] = useState<"none" | "league" | "per_user">("none");
+  const [overnightTimezone, setOvernightTimezone] = useState<string>(commishTimezone ?? "");
+
+  useEffect(() => {
+    if (!overnightTimezone) {
+      const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      if (detected) setOvernightTimezone(detected);
+    }
+  }, [overnightTimezone]);
 
   const handleSportToggle = (sportId: string) => {
     const newSelected = new Set(selectedSports);
@@ -224,7 +248,6 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
     setSelectedSports(new Set(sportsSeasonIds));
   };
 
-  // Calculate flex spots and minimum rounds
   const sportsCount = selectedSports.size;
   const minRounds = sportsCount;
   const recommendedRounds = Math.ceil(sportsCount * 1.25);
@@ -425,6 +448,89 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
               </p>
             </div>
 
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="overnightPauseMode">Overnight Pause</Label>
+                <select
+                  id="overnightPauseMode"
+                  name="overnightPauseMode"
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  value={overnightMode}
+                  onChange={(e) => setOvernightMode(e.target.value as "none" | "league" | "per_user")}
+                >
+                  <option value="none">No pause — timer always runs</option>
+                  <option value="league">League-wide — one timezone for everyone</option>
+                  <option value="per_user">Per-user — each player&apos;s own timezone</option>
+                </select>
+                <p className="text-sm text-muted-foreground">
+                  Protect players from having their pick timer expire while they&apos;re asleep. Autodraft still fires normally.
+                </p>
+              </div>
+
+              {overnightMode === "per_user" && (
+                <div className={`rounded-md border px-3 py-2.5 text-sm space-y-1 ${commishTimezone ? "border-border bg-muted/40 text-muted-foreground" : "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400"}`}>
+                  <p>Each player&apos;s profile timezone is used to determine their overnight window. Players without one set fall back to the timezone below.</p>
+                  {!commishTimezone && (
+                    <p>
+                      You haven&apos;t set your timezone yet —{" "}
+                      <a href="/profile" className="font-medium underline underline-offset-2">
+                        set it in your profile
+                      </a>
+                      .
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {overnightMode !== "none" && (
+                <>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="overnightPauseStart">Pause starts at</Label>
+                      <input
+                        id="overnightPauseStart"
+                        name="overnightPauseStart"
+                        type="time"
+                        defaultValue="23:00"
+                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="overnightPauseEnd">Pause ends at</Label>
+                      <input
+                        id="overnightPauseEnd"
+                        name="overnightPauseEnd"
+                        type="time"
+                        defaultValue="07:00"
+                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="overnightPauseTimezone">
+                      Timezone
+                      {overnightMode === "per_user" && (
+                        <span className="text-muted-foreground font-normal ml-1">
+                          (fallback for users without one set)
+                        </span>
+                      )}
+                    </Label>
+                    <TimezoneSelect
+                      value={overnightTimezone}
+                      onChange={setOvernightTimezone}
+                      name="overnightPauseTimezone"
+                    />
+                    {overnightMode === "per_user" && (
+                      <p className="text-sm text-muted-foreground">
+                        Each player sets their timezone in their profile. This is used as a fallback if they haven&apos;t set one.
+                      </p>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+
             <ScoringRulesEditor disabled={false} />
 
             <div className="space-y-4">
@@ -435,7 +541,6 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
 
               <input type="hidden" name="templateId" value={selectedTemplate} />
 
-              {/* Template Cards */}
               {templates.length > 0 && (
                 <div className="grid gap-3">
                   {templates.map((template) => (
@@ -471,7 +576,6 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
                 </div>
               )}
 
-              {/* Sports Checkboxes */}
               <div className="space-y-3">
                 <div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
                   <p className="text-sm text-muted-foreground">

app/routes/user-profile.tsx

@@ -1,11 +1,17 @@
 import { redirect, Form } from "react-router";
+import { useEffect, useState } from "react";
 import { auth } from "~/lib/auth.server";
-import { findUserById, updateUser } from "~/models/user";
+import { findUserById, updateUser, isUserInActiveDraft } from "~/models/user";
 import type { Route } from "./+types/user-profile";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
+import { TimezoneSelect, TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect";
+
+const VALID_TIMEZONES = new Set(
+  TIMEZONE_OPTIONS.flatMap((g) => g.zones.map((z) => z.value))
+);
 
 export function meta(): Route.MetaDescriptors {
   return [{ title: "Profile - Brackt" }];
@@ -20,7 +26,8 @@ export async function loader(args: Route.LoaderArgs) {
   if (!user) {
     return redirect("/");
   }
-  return { user };
+  const isInActiveDraft = await isUserInActiveDraft(session.user.id);
+  return { user, isInActiveDraft };
 }
 
 export async function action(args: Route.ActionArgs) {
@@ -34,19 +41,39 @@ export async function action(args: Route.ActionArgs) {
   const username = formData.get("username") as string | null;
   const firstName = formData.get("firstName") as string | null;
   const lastName = formData.get("lastName") as string | null;
+  const timezone = formData.get("timezone") as string | null;
+
+  const timezoneValue =
+    timezone && VALID_TIMEZONES.has(timezone) ? timezone : undefined;
 
   await updateUser(session.user.id, {
     displayName: displayName || undefined,
     username: username || undefined,
     firstName: firstName || undefined,
     lastName: lastName || undefined,
+    timezone: timezoneValue,
   });
 
   return { success: true };
 }
 
 export default function UserProfilePage({ loaderData, actionData }: Route.ComponentProps) {
-  const { user } = loaderData;
+  const { user, isInActiveDraft } = loaderData;
+  const [timezone, setTimezone] = useState(user.timezone ?? "");
+
+  // Auto-detect browser timezone if not already set
+  useEffect(() => {
+    if (!user.timezone) {
+      try {
+        const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        if (detected && VALID_TIMEZONES.has(detected)) {
+          setTimezone(detected);
+        }
+      } catch {
+        // Intl not available — leave blank
+      }
+    }
+  }, [user.timezone]);
 
   return (
     <div className="container mx-auto py-8 px-4 max-w-lg">
@@ -97,6 +124,27 @@ export default function UserProfilePage({ loaderData, actionData }: Route.Compon
               <Label>Email</Label>
               <p className="text-sm text-muted-foreground">{user.email}</p>
             </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="timezone">Timezone</Label>
+              {/* Hidden input carries the controlled value into the form submission */}
+              <input type="hidden" name="timezone" value={timezone} />
+              <TimezoneSelect
+                value={timezone}
+                onChange={setTimezone}
+                disabled={isInActiveDraft}
+              />
+              {isInActiveDraft ? (
+                <p className="text-xs text-muted-foreground">
+                  Timezone cannot be changed while you are in an active draft.
+                </p>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  Used for overnight pick protection. We pre-filled your browser&apos;s detected timezone.
+                </p>
+              )}
+            </div>
+
             <Button type="submit" className="w-full">Save Changes</Button>
           </Form>
         </CardContent>

database/schema.ts

@@ -12,6 +12,7 @@ export const users = pgTable("users", {
   lastName: varchar("last_name", { length: 255 }),
   imageUrl: varchar("image_url", { length: 512 }), // mapped as BetterAuth's "image" field
   isAdmin: boolean("is_admin").notNull().default(false),
+  timezone: varchar("timezone", { length: 50 }), // IANA timezone string, e.g. "America/Chicago"
   createdAt: timestamp("created_at").defaultNow().notNull(),
   updatedAt: timestamp("updated_at").defaultNow().notNull(),
 });
@@ -107,6 +108,12 @@ export const draftTimerModeEnum = pgEnum("draft_timer_mode", [
   "standard",
 ]);
 
+export const overnightPauseModeEnum = pgEnum("overnight_pause_mode", [
+  "none",
+  "league",
+  "per_user",
+]);
+
 export const probabilitySourceEnum = pgEnum("probability_source", [
   "manual",
   "futures_odds",
@@ -188,6 +195,10 @@ export const seasons = pgTable("seasons", {
   currentPickNumber: integer("current_pick_number").default(1),
   draftStartedAt: timestamp("draft_started_at"),
   draftPaused: boolean("draft_paused").notNull().default(false),
+  overnightPauseMode: overnightPauseModeEnum("overnight_pause_mode").notNull().default("none"),
+  overnightPauseStart: varchar("overnight_pause_start", { length: 5 }), // "23:00"
+  overnightPauseEnd: varchar("overnight_pause_end", { length: 5 }),     // "07:00"
+  overnightPauseTimezone: varchar("overnight_pause_timezone", { length: 50 }), // IANA — league TZ (league mode) or per-user fallback
   inviteCode: varchar("invite_code", { length: 20 }).notNull().unique(),
   // Scoring configuration (8 values for 1st through 8th)
   pointsFor1st: integer("points_for_1st").notNull().default(100),

drizzle/0083_fearless_leader.sql

@@ -0,0 +1,6 @@
+CREATE TYPE "public"."overnight_pause_mode" AS ENUM('none', 'league', 'per_user');--> statement-breakpoint
+ALTER TABLE "seasons" ADD COLUMN "overnight_pause_mode" "overnight_pause_mode" DEFAULT 'none' NOT NULL;--> statement-breakpoint
+ALTER TABLE "seasons" ADD COLUMN "overnight_pause_start" varchar(5);--> statement-breakpoint
+ALTER TABLE "seasons" ADD COLUMN "overnight_pause_end" varchar(5);--> statement-breakpoint
+ALTER TABLE "seasons" ADD COLUMN "overnight_pause_timezone" varchar(50);--> statement-breakpoint
+ALTER TABLE "users" ADD COLUMN "timezone" varchar(50);

drizzle/meta/_journal.json

@@ -582,6 +582,13 @@
       "when": 1777090754037,
       "tag": "0082_stale_pride",
       "breakpoints": true
+    },
+    {
+      "idx": 83,
+      "version": "7",
+      "when": 1777180952144,
+      "tag": "0083_fearless_leader",
+      "breakpoints": true
     }
   ]
 }

server/timer.ts

@@ -3,6 +3,7 @@ import { eq, and, asc, sql } from "drizzle-orm";
 import type { InferSelectModel } from "drizzle-orm";
 import { getSocketIO } from "./socket";
 import { executeAutoPick, calculatePickInfo } from "~/models/draft-utils";
+import { isInOvernightWindow, getOvernightResumeUTC } from "~/lib/overnight-pause";
 import { logger } from "./logger";
 import { db } from "./db";
 
@@ -13,6 +14,63 @@ let timerTickRunning = false;
 // a redundant query on every tick.
 const draftSlotsCache = new Map<string, { teamId: string; draftOrder: number }[]>();
 
+// Team timezone cache for per_user overnight pause mode (seasonId → teamId → timezone).
+// Populated lazily; evicted when the season leaves active drafting.
+const teamTimezoneCache = new Map<string, Map<string, string | null>>();
+
+async function getTeamTimezone(seasonId: string, teamId: string): Promise<string | null> {
+  let seasonMap = teamTimezoneCache.get(seasonId);
+  if (!seasonMap) {
+    try {
+      const rows = await db
+        .select({ teamId: schema.teams.id, timezone: schema.users.timezone })
+        .from(schema.teams)
+        .leftJoin(schema.users, sql`${schema.teams.ownerId}::uuid = ${schema.users.id}`)
+        .where(eq(schema.teams.seasonId, seasonId));
+      seasonMap = new Map(rows.map((r) => [r.teamId, r.timezone || null]));
+    } catch (err) {
+      // ownerId column is varchar; if any row still holds a non-UUID value
+      // (pre-migration remnant) the ::uuid cast throws. Degrade gracefully.
+      logger.error("[Timer] getTeamTimezone cast failed, skipping overnight check:", err);
+      seasonMap = new Map();
+    }
+    teamTimezoneCache.set(seasonId, seasonMap);
+  }
+  return seasonMap.get(teamId) ?? null;
+}
+
+/**
+ * Determine whether the current team's pick is in an overnight pause window.
+ * Returns { active: false } or { active: true, resumesAtUTC: number }.
+ */
+async function checkOvernightPause(
+  season: InferSelectModel<typeof schema.seasons>,
+  currentTeamId: string
+): Promise<{ active: boolean; resumesAtUTC?: number }> {
+  const mode = season.overnightPauseMode;
+  const start = season.overnightPauseStart;
+  const end = season.overnightPauseEnd;
+
+  if (mode === "none" || !start || !end) return { active: false };
+
+  let tz: string | null = null;
+  if (mode === "league") {
+    tz = season.overnightPauseTimezone || null;
+  } else {
+    // per_user: use the team owner's timezone, fall back to league timezone
+    tz = await getTeamTimezone(season.id, currentTeamId);
+    if (!tz) tz = season.overnightPauseTimezone || null;
+  }
+
+  if (!tz) return { active: false };
+
+  if (isInOvernightWindow(tz, start, end)) {
+    const resumesAt = getOvernightResumeUTC(tz, end);
+    return { active: true, resumesAtUTC: resumesAt.getTime() };
+  }
+  return { active: false };
+}
+
 /**
  * Start the draft timer system
  * Runs every second to update all active draft timers
@@ -73,6 +131,9 @@ async function updateDraftTimers(): Promise<void> {
   for (const cachedId of draftSlotsCache.keys()) {
     if (!activeIds.has(cachedId)) draftSlotsCache.delete(cachedId);
   }
+  for (const cachedId of teamTimezoneCache.keys()) {
+    if (!activeIds.has(cachedId)) teamTimezoneCache.delete(cachedId);
+  }
 
   for (const season of activeDrafts) {
     // Skip if draft is paused
@@ -153,6 +214,10 @@ async function updateDraftTimers(): Promise<void> {
     // while_on means "pick immediately when it's my turn" — bypass the countdown.
     const isWhileOn = shouldAutodraft && autodraftSettings?.mode === "while_on";
 
+    // Overnight pause: freeze timer for non-autodraft teams in their overnight window.
+    const overnightPause = await checkOvernightPause(season, currentTeamId);
+    const isOvernightFreeze = overnightPause.active && !shouldAutodraft;
+
     // Trigger pick when: timer expired  OR  team is in while_on autodraft mode.
     // The chain picks consecutive while_on teams after each pick, but it is capped at
     // totalTeams iterations. The while_on bypass here fills the gap: the timer picks
@@ -174,6 +239,7 @@ async function updateDraftTimers(): Promise<void> {
           teamId: currentTeamId,
           timeRemaining: 0,
           currentPickNumber,
+          overnightPauseActive: false,
         });
       }
 
@@ -188,6 +254,19 @@ async function updateDraftTimers(): Promise<void> {
       continue;
     }
 
+    // Overnight freeze: skip decrement, notify clients to display the pause indicator.
+    if (isOvernightFreeze) {
+      io.to(`draft-${season.id}`).emit("timer-update", {
+        seasonId: season.id,
+        teamId: currentTeamId,
+        timeRemaining: timer.timeRemaining,
+        currentPickNumber,
+        overnightPauseActive: true,
+        resumesAtUTC: overnightPause.resumesAtUTC,
+      });
+      continue;
+    }
+
     // Atomically decrement timer (race-condition safe: uses DB-level update
     // so concurrent increments from pick handlers are never overwritten)
     const [updatedTimer] = await db
@@ -207,6 +286,7 @@ async function updateDraftTimers(): Promise<void> {
       teamId: currentTeamId,
       timeRemaining: newTimeRemaining,
       currentPickNumber,
+      overnightPauseActive: false,
     });
 
     // If timer just hit 0, trigger auto-pick (next_pick mode or no autodraft)