diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..61eb5e1
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(make *)"
+    ]
+  }
+}
diff --git a/Makefile b/Makefile
index caee3f8..f274bf4 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,8 @@
-.PHONY: ci lint format-check test install-dev run venv
+# Put the project venv first on PATH so targets work the same whether or not
+# the user has activated it (or has direnv loaded). `make venv` creates it.
+export PATH := $(CURDIR)/.venv/bin:$(PATH)
+
+.PHONY: ci lint format format-check test install-dev run venv
 
 # Run all CI checks — called by GitHub Actions.
 ci: lint format-check frontend-lint test
@@ -11,6 +15,10 @@ lint:
 format-check:
 	ruff format --check .
 
+format:
+	ruff format .
+	ruff check --fix .
+
 test:
 	pytest
 
diff --git a/api/routes.py b/api/routes.py
index acdbc42..1977180 100644
--- a/api/routes.py
+++ b/api/routes.py
@@ -28,6 +28,7 @@
 
 from flask import Blueprint, jsonify, request
 from flask import current_app as app
+from sqlalchemy.exc import NoResultFound
 
 import utils
 from config import config
@@ -129,24 +130,32 @@ def _full_state_payload():
         data["active_question"] = controller.get_active_question()
 
         # Daily-double waiger range for the team currently in control (if any).
+        # Always report a usable range so the host slider is interactive even
+        # before any team has been put in control.
         state = controller.get_complete_state()
-        if state.get("dailydouble") == "enabled":
+        _min = config.get("DAILYDOUBLE_WAIGER_MIN", 0)
+        _max = config.get("DAILYDOUBLE_WAIGER_MAX_MIN", 0)
+        if state.get("dailydouble") in ("enabled", "revealed"):
             try:
                 ctrl_team = controller.get_team_in_control()
                 _min, _max = controller.get_dailydouble_waiger_range(ctrl_team.tid)
-            except Exception:
-                _min, _max = 0, 0
-        else:
-            _min = config.get("DAILYDOUBLE_WAIGER_MIN", 0)
-            _max = config.get("DAILYDOUBLE_WAIGER_MAX_MIN", 0)
+            except NoResultFound:
+                # No team in control yet: keep the config defaults.
+                pass
         data["dailydouble_range"] = {"min": _min, "max": _max}
+        wager = controller.get_dailydouble_wager()
+        data["dailydouble_wager"] = {"team": wager[0], "amount": wager[1]} if wager else None
     else:
         data["teams"] = _teams_payload(controller)
         data["categories"] = []
         data["questions"] = {}
         data["state"] = controller.get_complete_state()
         data["active_question"] = {}
-        data["dailydouble_range"] = {"min": 0, "max": 0}
+        data["dailydouble_range"] = {
+            "min": config.get("DAILYDOUBLE_WAIGER_MIN", 0),
+            "max": config.get("DAILYDOUBLE_WAIGER_MAX_MIN", 0),
+        }
+        data["dailydouble_wager"] = None
 
     return data
 
@@ -242,9 +251,16 @@ def finish():
         pass
     else:
         text = "<p>That's all folks! Thanks for playing!</p>"
+        # Clear any active question / DD before showing the end-of-game
+        # overlay, otherwise stale ui_state can resurrect the DD card on the
+        # viewer the next time it loads.
+        controller.set_state("question", "")
+        controller.end_dailydouble()
         controller.set_state("overlay-question", text)
         controller.set_state("overlay-big", text)
         controller.finish_game()
+        app.socketio.emit("dailydouble-wager", {"team": None, "amount": None}, namespace=GAME_NS)
+        app.socketio.emit("question-hide", {}, namespace=GAME_NS)
         app.socketio.emit("overlay-big", {"id": "final", "html": text}, namespace=GAME_NS)
     _broadcast_state()
     return jsonify(result="success")
@@ -281,6 +297,24 @@ def team_select():
     data = request.get_json(force=True, silent=True) or {}
     tid = data.get("tid") or ""
     controller.set_state("team", tid)
+    # If we're mid-DD and control is reassigned, drop the previous team's
+    # wager (a new one is needed) and re-broadcast the wager range computed
+    # for the new controlling team — the host's slider min/max must follow.
+    state = controller.get_complete_state()
+    if state.get("dailydouble") == "enabled" and tid:
+        controller.clear_dailydouble_wager()
+        app.socketio.emit("dailydouble-wager", {"team": None, "amount": None}, namespace=GAME_NS)
+        try:
+            dbl_min, dbl_max = controller.get_dailydouble_waiger_range(tid)
+            app.socketio.emit(
+                "dailydouble-range",
+                {"team": tid, "range": {"min": dbl_min, "max": dbl_max}},
+                namespace=GAME_NS,
+            )
+        except Exception:  # noqa: BLE001
+            # If the range can't be computed for some reason, leave the
+            # client's previous range in place.
+            pass
     app.socketio.emit("team-select", {"tid": tid or None}, namespace=GAME_NS)
     return jsonify(result="success", tid=tid)
 
@@ -314,7 +348,19 @@ def question_select():
     answer = controller.get_answer(col, row)
 
     if question["dailydouble"] is True:
-        ctrl_team = controller.get_team_in_control()
+        # A Daily Double normally requires a team to be in control (they had
+        # to pick the clue to trigger it). If that invariant is broken — most
+        # likely because the operator forgot to use the roulette — fall back
+        # to team1 and log loudly so it's noticed.
+        try:
+            ctrl_team = controller.get_team_in_control()
+        except NoResultFound:
+            app.logger.warning(
+                "Daily Double selected with no team in control; falling back to team1. "
+                "Normally, you should use the roulette to assign control before picking a clue."
+            )
+            controller.set_state("team", "team1")
+            ctrl_team = controller.get_team_in_control()
         dbl_min, dbl_max = controller.get_dailydouble_waiger_range(ctrl_team.tid)
 
         controller.set_state("question", qid)
@@ -324,7 +370,12 @@ def question_select():
         app.socketio.emit("question-hide", {}, namespace=GAME_NS)
         app.socketio.emit(
             "dailydouble",
-            {"qid": qid, "category": question["category"]},
+            {
+                "qid": qid,
+                "category": question["category"],
+                "team": ctrl_team.tid,
+                "range": {"min": dbl_min, "max": dbl_max},
+            },
             namespace=GAME_NS,
         )
         return jsonify(
@@ -336,7 +387,7 @@ def question_select():
         )
 
     controller.set_state("question", qid)
-    controller.set_state("dailydouble", "")
+    controller.end_dailydouble()
     app.socketio.emit(
         "question-show",
         {
@@ -355,11 +406,61 @@ def question_select():
     )
 
 
+@api_bp.route("/dailydouble/reveal", methods=["POST"])
+def dailydouble_reveal():
+    """Reveal the DD clue: flip state to 'revealed' and broadcast the text."""
+    controller = _controller()
+    state = controller.get_complete_state()
+    if state.get("dailydouble") != "enabled":
+        return jsonify(result="failure", error="Daily Double not active or already revealed"), 400
+    qid = state.get("question") or ""
+    try:
+        col, row = utils.parse_question_id(qid)
+    except utils.InvalidQuestionId:
+        return jsonify(result="failure", error="No active DD question"), 400
+    question = controller.get_question(col, row)
+    controller.set_state("dailydouble", "revealed")
+    app.socketio.emit(
+        "dailydouble-reveal",
+        {"qid": qid, "text": question["text"], "category": question["category"]},
+        namespace=GAME_NS,
+    )
+    return jsonify(result="success")
+
+
+@api_bp.route("/dailydouble/wager", methods=["POST"])
+def dailydouble_wager():
+    """Persist + broadcast the controlling team's live DD wager."""
+    controller = _controller()
+    data = request.get_json(force=True, silent=True) or {}
+    try:
+        amount = int(data.get("amount"))
+    except (TypeError, ValueError):
+        return jsonify(result="failure", error="Invalid amount"), 400
+    try:
+        ctrl_team = controller.get_team_in_control()
+    except NoResultFound:
+        return jsonify(result="failure", error="No team in control"), 400
+    # Late import to dodge circular imports (controller imports model, etc.).
+    from controller import GameProblem
+
+    try:
+        tid, amount = controller.set_dailydouble_wager(ctrl_team.tid, amount)
+    except GameProblem as e:
+        return jsonify(result="failure", error=str(e)), 400
+    app.socketio.emit(
+        "dailydouble-wager",
+        {"team": tid, "amount": amount},
+        namespace=GAME_NS,
+    )
+    return jsonify(result="success", team=tid, amount=amount)
+
+
 @api_bp.route("/question/deselect", methods=["POST"])
 def question_deselect():
     controller = _controller()
     controller.set_state("question", "")
-    controller.set_state("dailydouble", "")
+    controller.end_dailydouble()
     app.socketio.emit("question-hide", {}, namespace=GAME_NS)
     _broadcast_board_update()
     return jsonify(result="success")
@@ -393,6 +494,8 @@ def submit_answer():
         waiger = answers.get(f"{tid}-waiger-dailydouble", 0)
         if not controller.answer_dailydouble(col, row, team, answer, waiger):
             return jsonify(result="failure", error="Answer submission failed"), 500
+        controller.end_dailydouble()
+        app.socketio.emit("dailydouble-wager", {"team": None, "amount": None}, namespace=GAME_NS)
 
     # Team that ultimately "won" this question stays in control.
     ctl_team = controller.get_good_answer_team(col, row)
diff --git a/controller.py b/controller.py
index b50c961..dfe31bb 100644
--- a/controller.py
+++ b/controller.py
@@ -274,6 +274,37 @@ def get_dailydouble_waiger_range(team_id):
             _max = config.get("DAILYDOUBLE_WAIGER_MAX_MIN")
         return (_min, _max)
 
+    @staticmethod
+    def set_dailydouble_wager(tid: str, amount: int) -> tuple[str, int]:
+        """Validate and persist the DD wager for the controlling team."""
+        _min, _max = Controller.get_dailydouble_waiger_range(tid)
+        if not (_min <= amount <= _max):
+            raise GameProblem(f"Wager {amount} outside [{_min}, {_max}] for {tid}")
+        Controller.set_state("dailydouble-wager", f"{tid}:{amount}")
+        return tid, amount
+
+    @staticmethod
+    def get_dailydouble_wager() -> tuple[str, int] | None:
+        """Return the persisted (tid, amount) wager, or None."""
+        raw = Controller.get_state("dailydouble-wager") or ""
+        if ":" not in raw:
+            return None
+        tid, amount = raw.split(":", 1)
+        try:
+            return tid, int(amount)
+        except ValueError:
+            return None
+
+    @staticmethod
+    def clear_dailydouble_wager() -> None:
+        Controller.set_state("dailydouble-wager", "")
+
+    @staticmethod
+    def end_dailydouble() -> None:
+        """Turn DD off and clear any wager. Use everywhere DD ends."""
+        Controller.set_state("dailydouble", "")
+        Controller.clear_dailydouble_wager()
+
     @staticmethod
     def teams_exists():
         if Team.query.all():
diff --git a/frontend/src/api.js b/frontend/src/api.js
index 2f941e5..5a18c15 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -39,6 +39,10 @@ export const api = {
     request("/team/select", { method: "POST", body: { tid } }),
   roulette: () => request("/team/roulette", { method: "POST" }),
 
+  setWager: (amount) =>
+    request("/dailydouble/wager", { method: "POST", body: { amount } }),
+  revealDailyDouble: () => request("/dailydouble/reveal", { method: "POST" }),
+
   showMessage: (id, text) =>
     request("/message/show", { method: "POST", body: { id, text } }),
   hideMessage: () => request("/message/hide", { method: "POST" }),
diff --git a/frontend/src/components/DailyDoubleAnimation.vue b/frontend/src/components/DailyDoubleAnimation.vue
index 6ba1dde..7a30d8b 100644
--- a/frontend/src/components/DailyDoubleAnimation.vue
+++ b/frontend/src/components/DailyDoubleAnimation.vue
@@ -1,25 +1,14 @@
 <script setup>
-import { onMounted, ref } from "vue";
-
-const emit = defineEmits(["done"]);
-const visible = ref(true);
-
-onMounted(() => {
-  // Match CSS animation duration (2s) plus a small tail.
-  setTimeout(() => {
-    visible.value = false;
-    emit("done");
-  }, 2200);
-});
+// Visibility is controlled by the parent: it mounts this component when DD
+// becomes active and unmounts it when DD ends. The CSS animation runs once
+// (`forwards`) so the card stays put after the flip.
 </script>
 
 <template>
-  <Transition name="fade">
-    <div v-if="visible" class="dailydouble-overlay">
-      <div class="dailydouble-inner">
-        <span>DAILY</span>
-        <span>DOUBLE</span>
-      </div>
+  <div class="dailydouble-overlay">
+    <div class="dailydouble-inner">
+      <span>DAILY</span>
+      <span>DOUBLE</span>
     </div>
-  </Transition>
+  </div>
 </template>
diff --git a/frontend/src/components/QuestionOverlay.vue b/frontend/src/components/QuestionOverlay.vue
index e5237e3..b8a7e09 100644
--- a/frontend/src/components/QuestionOverlay.vue
+++ b/frontend/src/components/QuestionOverlay.vue
@@ -4,7 +4,13 @@ import { useGameStore } from "@/stores/game";
 
 const game = useGameStore();
 
-const visible = computed(() => !!game.activeQuestionId && !game.isDailyDouble);
+// Show the clue overlay for normal questions, and for DDs once the operator
+// has revealed the clue. Hidden during the DD wager phase.
+const visible = computed(
+  () =>
+    !!game.activeQuestionId &&
+    (!game.isDailyDouble || game.isDailyDoubleRevealed),
+);
 const html = computed(() => game.active_question?.text ?? "");
 </script>
 
diff --git a/frontend/src/components/TeamPanelViewer.vue b/frontend/src/components/TeamPanelViewer.vue
new file mode 100644
index 0000000..0b7133e
--- /dev/null
+++ b/frontend/src/components/TeamPanelViewer.vue
@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  team: { type: Object, required: true },
+  idx: { type: Number, required: true },
+  selected: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+  <div
+    :id="team.tid"
+    class="black-box flex-pad"
+    :class="{ 'team-selected': selected }"
+    style="width: 80%; max-width: 250px; margin: auto"
+  >
+    <div class="col-player flex-horizontal-pad">
+      <div class="row-player flex-vertical-pad" style="height: 30%">
+        <div :id="`${team.tid}-score`" class="box-ceopardy box-score">
+          <p>${{ team.score }}</p>
+        </div>
+      </div>
+      <div class="row-player flex-vertical-pad" style="height: 70%">
+        <div
+          :id="`${team.tid}-name`"
+          class="box-ceopardy box-team"
+          :class="`team${idx + 1}-font`"
+        >
+          <p>{{ team.name }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/TeamRow.vue b/frontend/src/components/TeamRow.vue
new file mode 100644
index 0000000..c9ff721
--- /dev/null
+++ b/frontend/src/components/TeamRow.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { useGameStore } from "@/stores/game";
+import TeamPanelViewer from "@/components/TeamPanelViewer.vue";
+
+const game = useGameStore();
+</script>
+
+<template>
+  <div class="container-results">
+    <div
+      v-for="(team, idx) in game.teams"
+      :key="team.tid"
+      class="container-team"
+    >
+      <TeamPanelViewer
+        :team="team"
+        :idx="idx"
+        :selected="game.selectedTeam === team.tid"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/TeamRowDailyDouble.vue b/frontend/src/components/TeamRowDailyDouble.vue
new file mode 100644
index 0000000..9fd67bc
--- /dev/null
+++ b/frontend/src/components/TeamRowDailyDouble.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from "vue";
+import { useGameStore } from "@/stores/game";
+import TeamPanelViewer from "@/components/TeamPanelViewer.vue";
+
+const game = useGameStore();
+
+// Resolve the team currently in control (the one playing the DD). Falls back
+// to null while the operator hasn't picked one yet — the layout still renders
+// so the row doesn't pop in/out, but we leave the panel slot empty.
+const playingIdx = computed(() =>
+  game.teams.findIndex((t) => t.tid === game.selectedTeam),
+);
+const playingTeam = computed(() =>
+  playingIdx.value >= 0 ? game.teams[playingIdx.value] : null,
+);
+
+// Live wager from the host's slider. May be null until the operator nudges it.
+const wagerAmount = computed(() => game.dailydouble_wager?.amount ?? null);
+</script>
+
+<template>
+  <div class="container-results">
+    <!-- Slot 1: the playing team's panel -->
+    <div class="container-team">
+      <TeamPanelViewer
+        v-if="playingTeam"
+        :team="playingTeam"
+        :idx="playingIdx"
+        :selected="true"
+      />
+    </div>
+
+    <!-- Slots 2..N: a single mask box covering the rest with wager + score -->
+    <div
+      class="container-team dd-info-box-wrap"
+      :style="{ flexGrow: Math.max(1, game.teams.length - 1) }"
+    >
+      <div
+        class="black-box flex-pad"
+        style="width: 100%; max-width: 600px; margin: auto"
+      >
+        <div class="box-ceopardy dd-info-box-inner">
+          <span class="dd-info-label">Wager:</span>
+          <span class="dd-info-amount">
+            {{ wagerAmount == null ? "all in?" : `$${wagerAmount}` }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/TeamScoringPanel.vue b/frontend/src/components/TeamScoringPanel.vue
index 427983b..e7ec1c1 100644
--- a/frontend/src/components/TeamScoringPanel.vue
+++ b/frontend/src/components/TeamScoringPanel.vue
@@ -33,6 +33,22 @@ function updateDouble(val) {
 function updateWaiger(val) {
   const key = `${tid.value}-waiger-dailydouble`;
   emit("update:answers", { ...props.answers, [key]: val });
+  // Live-broadcast the wager so the viewer can show it. Throttled so a slider
+  // drag doesn't flood Socket.IO; trailing edge is preserved.
+  scheduleWagerBroadcast(val);
+}
+
+let wagerTimer = null;
+let wagerPending = null;
+function scheduleWagerBroadcast(val) {
+  wagerPending = val;
+  if (wagerTimer) return;
+  api.setWager(wagerPending).catch(() => {});
+  wagerPending = null;
+  wagerTimer = setTimeout(() => {
+    wagerTimer = null;
+    if (wagerPending !== null) scheduleWagerBroadcast(wagerPending);
+  }, 100);
 }
 
 function selectTeam() {
@@ -43,11 +59,12 @@ const answerVal = computed(() => props.answers[tid.value] ?? 0);
 const doubleVal = computed(
   () => props.answers[`${tid.value}-dailydouble`] ?? -1,
 );
-const waigerVal = computed(
-  () =>
+const waigerVal = computed({
+  get: () =>
     props.answers[`${tid.value}-waiger-dailydouble`] ??
     game.dailydouble_range.max,
-);
+  set: (val) => updateWaiger(Number(val)),
+});
 
 const teamFontClass = `team${props.idx + 1}-font`;
 </script>
@@ -58,7 +75,6 @@ const teamFontClass = `team${props.idx + 1}-font`;
       class="black-box flex-small-pad"
       :class="{
         'team-selected': teamSelected,
-        disabled: disabled,
       }"
       style="width: 100%; margin: auto"
     >
@@ -74,14 +90,14 @@ const teamFontClass = `team${props.idx + 1}-font`;
             >
               <div
                 class="form-icon form-click"
-                title="Give control to this team"
+                title="Reassign control to this team"
                 @click="selectTeam"
               >
                 <i class="fa-solid fa-crosshairs fa-2x" />
               </div>
             </div>
           </div>
-          <div class="box-team-middle">
+          <div class="box-team-middle" :class="{ disabled: disabled }">
             <div class="box-ceopardy box-team-host" :class="teamFontClass">
               <p>{{ team.name }}</p>
             </div>
@@ -108,14 +124,13 @@ const teamFontClass = `team${props.idx + 1}-font`;
             <!-- Daily double scoring -->
             <div v-else class="box-answer-range">
               <input
+                v-model.number="waigerVal"
                 class="team-range"
                 :name="`${tid}-waiger-dailydouble`"
                 type="range"
                 :min="game.dailydouble_range.min"
                 :max="game.dailydouble_range.max"
                 step="1"
-                :value="waigerVal"
-                @input="updateWaiger(Number($event.target.value))"
               />
               <div class="box-answer-range-label">
                 <div><p>Minimum</p></div>
diff --git a/frontend/src/components/ViewerBoard.vue b/frontend/src/components/ViewerBoard.vue
index 4161713..468386f 100644
--- a/frontend/src/components/ViewerBoard.vue
+++ b/frontend/src/components/ViewerBoard.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { computed } from "vue";
 import { useGameStore } from "@/stores/game";
+import DailyDoubleAnimation from "@/components/DailyDoubleAnimation.vue";
+import TeamRow from "@/components/TeamRow.vue";
+import TeamRowDailyDouble from "@/components/TeamRowDailyDouble.vue";
 
 const game = useGameStore();
 
@@ -88,42 +91,20 @@ function questionLabel(row) {
             </div>
           </div>
         </div>
+        <!-- DD overlay stays inside the black border until the clue is revealed. -->
+        <DailyDoubleAnimation
+          v-if="game.isDailyDouble && !game.isDailyDoubleRevealed"
+          :key="game.dailydoubleTrigger"
+        />
       </div>
     </div>
 
     <div class="container-separator-h" />
 
-    <!-- Team result cards -->
-    <div class="container-results">
-      <div
-        v-for="(team, idx) in game.teams"
-        :key="team.tid"
-        class="container-team"
-      >
-        <div
-          :id="team.tid"
-          class="black-box flex-pad"
-          :class="{ 'team-selected': game.selectedTeam === team.tid }"
-          style="width: 80%; max-width: 250px; margin: auto"
-        >
-          <div class="col-player flex-horizontal-pad">
-            <div class="row-player flex-vertical-pad" style="height: 30%">
-              <div :id="`${team.tid}-score`" class="box-ceopardy box-score">
-                <p>${{ team.score }}</p>
-              </div>
-            </div>
-            <div class="row-player flex-vertical-pad" style="height: 70%">
-              <div
-                :id="`${team.tid}-name`"
-                class="box-ceopardy box-team"
-                :class="`team${idx + 1}-font`"
-              >
-                <p>{{ team.name }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- Team result cards: normal row vs DD layout, swapped with a fade. -->
+    <Transition name="dd-rowfade" mode="out-in">
+      <TeamRowDailyDouble v-if="game.isDailyDouble" key="dd" />
+      <TeamRow v-else key="normal" />
+    </Transition>
   </div>
 </template>
diff --git a/frontend/src/stores/game.js b/frontend/src/stores/game.js
index 8aedb13..dec5530 100644
--- a/frontend/src/stores/game.js
+++ b/frontend/src/stores/game.js
@@ -26,6 +26,9 @@ export const useGameStore = defineStore("game", {
     active_question: {},
     messages: [],
     dailydouble_range: { min: 0, max: 0 },
+    // {team, amount} as the host moves the wager slider during a DD; null
+    // outside DD or before the operator has set anything.
+    dailydouble_wager: null,
     // Incremented every time the server fires a new daily-double. Lets the
     // viewer trigger the flip animation without watching for state changes
     // that might bounce during reconnects.
@@ -41,7 +44,10 @@ export const useGameStore = defineStore("game", {
     teamByTid: (s) => (tid) => s.teams.find((t) => t.tid === tid),
     activeQuestionId: (s) => s.ui_state.question || "",
     selectedTeam: (s) => s.ui_state.team || "",
-    isDailyDouble: (s) => s.ui_state.dailydouble === "enabled",
+    isDailyDouble: (s) =>
+      s.ui_state.dailydouble === "enabled" ||
+      s.ui_state.dailydouble === "revealed",
+    isDailyDoubleRevealed: (s) => s.ui_state.dailydouble === "revealed",
     bigOverlayHtml: (s) => s.ui_state["overlay-big"] || "",
     questionAnswered: (s) => (qid) => !!s.questions[qid]?.answered,
   },
@@ -65,6 +71,8 @@ export const useGameStore = defineStore("game", {
       if (data.messages) this.messages = data.messages;
       if (data.dailydouble_range)
         this.dailydouble_range = data.dailydouble_range;
+      if (data.dailydouble_wager !== undefined)
+        this.dailydouble_wager = data.dailydouble_wager;
     },
 
     connectSocket() {
@@ -92,15 +100,41 @@ export const useGameStore = defineStore("game", {
         this.active_question = {};
         this.ui_state.question = "";
         this.ui_state.dailydouble = "";
+        this.dailydouble_wager = null;
       });
 
       s.on("dailydouble", (data) => {
         this.ui_state.question = data.qid;
         this.ui_state.dailydouble = "enabled";
         this.active_question = { category: data.category, dailydouble: true };
+        if (data.team) this.ui_state.team = data.team;
+        if (data.range) this.dailydouble_range = data.range;
+        this.dailydouble_wager = null;
         this.dailydoubleTrigger += 1;
       });
 
+      s.on("dailydouble-reveal", (data) => {
+        this.ui_state.dailydouble = "revealed";
+        this.active_question = {
+          ...this.active_question,
+          text: data.text,
+          category: data.category,
+          dailydouble: true,
+        };
+        this.ui_state.question = data.qid;
+      });
+
+      s.on("dailydouble-range", (data) => {
+        if (data?.range) this.dailydouble_range = data.range;
+      });
+
+      s.on("dailydouble-wager", (data) => {
+        this.dailydouble_wager =
+          data && data.team != null && data.amount != null
+            ? { team: data.team, amount: data.amount }
+            : null;
+      });
+
       s.on("board-update", (data) => {
         this.questions = { ...this.questions, ...data.questions };
         if (data.teams) this.teams = data.teams;
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index e366f3d..14e2853 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -2,6 +2,18 @@
    The Jeopardy-style visuals (dark brown chrome + blue question boxes) are
    kept exactly as before so the crowd-facing board still "feels" right. */
 
+:root {
+  /* Black-frame thickness used as padding by .flex-pad / .flex-*-pad helpers.
+     The visible black border around a question box is two of these stacked
+     (outer .black-box.flex-pad + per-row/col .flex-*-pad). */
+  --ceopardy-pad: calc(0.3vh + 0.3vw);
+  --ceopardy-pad-small: calc(0.2vh + 0.1vw);
+  /* The Jeopardy-style gold used for clue/value text on a blue background.
+     Pair with --ceopardy-text-shadow for the embossed look. */
+  --ceopardy-gold: #d9a24f;
+  --ceopardy-text-shadow: 2px 2px 0 #000000;
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -91,6 +103,7 @@ button {
 }
 .container-bottom-right {
   width: 50%;
+  position: relative;
 }
 .box-team-side {
   display: flex;
@@ -210,8 +223,8 @@ button {
 .form-no-form:active,
 .form-no-form:focus {
   outline: none;
-  color: #d9a24f;
-  border-color: #d9a24f;
+  color: var(--ceopardy-gold);
+  border-color: var(--ceopardy-gold);
 }
 .form-no-form::placeholder {
   opacity: 0.5;
@@ -235,8 +248,8 @@ button {
   cursor: pointer;
 }
 .form-click:hover {
-  color: #d9a24f;
-  border-color: #d9a24f;
+  color: var(--ceopardy-gold);
+  border-color: var(--ceopardy-gold);
   transition: all 0.5s ease-out;
 }
 .disabled {
@@ -246,12 +259,12 @@ button {
 [contenteditable='true']:active,
 [contenteditable='true']:focus {
   outline: none;
-  color: #d9a24f;
-  border-color: #d9a24f;
+  color: var(--ceopardy-gold);
+  border-color: var(--ceopardy-gold);
 }
 [contenteditable='true']:hover {
-  color: #d9a24f;
-  border-color: #d9a24f;
+  color: var(--ceopardy-gold);
+  border-color: var(--ceopardy-gold);
   transition: all 0.5s ease-out;
 }
 .form-cursive[contenteditable='true']:active,
@@ -348,6 +361,53 @@ svg:hover polygon {
   padding-right: 5px;
 }
 
+/* DD team-row variant: playing team in slot 1 + a wide info box for the rest.
+   No height override here — .container-results already sets the row height.
+   Wager label and amount sit side-by-side, default font, white text. */
+.dd-info-box-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--ceopardy-pad) * 2);
+  color: #ffffff;
+}
+.dd-info-label,
+.dd-info-amount {
+  font-size: calc(2.5vh + 1vw);
+}
+
+/* Reveal-clue button shown inside the host's active-question card during DD.
+   Typography intentionally matches `.box-question-host p` so it reads as
+   the same family of element as the clue text it replaces. */
+.dd-reveal-btn {
+  position: absolute;
+  bottom: calc(var(--ceopardy-pad) * 2);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.4rem 1rem;
+  background-color: #0001a1;
+  color: var(--ceopardy-gold);
+  text-shadow: var(--ceopardy-text-shadow);
+  font-size: calc(1.5vh + 2vw);
+  line-height: 90%;
+  border: 2px solid var(--ceopardy-gold);
+  border-radius: 0.4rem;
+  cursor: pointer;
+}
+.dd-reveal-btn:hover {
+  background-color: #000181;
+}
+
+/* Fade between TeamRow ↔ TeamRowDailyDouble. */
+.dd-rowfade-enter-active,
+.dd-rowfade-leave-active {
+  transition: opacity 300ms ease-in-out;
+}
+.dd-rowfade-enter-from,
+.dd-rowfade-leave-to {
+  opacity: 0;
+}
+
 /* Grid primitives */
 .row-ceopardy {
   display: flex;
@@ -400,7 +460,7 @@ svg:hover polygon {
 }
 .box-category-viewer p {
   color: #ffffff;
-  text-shadow: 2px 2px 0px #000000;
+  text-shadow: var(--ceopardy-text-shadow);
   font-size: calc(2vh + 1.5vw);
   line-height: 90%;
 }
@@ -410,7 +470,7 @@ svg:hover polygon {
 }
 .box-category-host p {
   color: #ffffff;
-  text-shadow: 2px 2px 0px #000000;
+  text-shadow: var(--ceopardy-text-shadow);
   font-size: calc(1.2vh + 0.8vw);
   line-height: 90%;
 }
@@ -449,15 +509,15 @@ svg:hover polygon {
   width: 100%;
 }
 .box-question-host p {
-  color: #d9a24f;
-  text-shadow: 2px 2px 0px #000000;
+  color: var(--ceopardy-gold);
+  text-shadow: var(--ceopardy-text-shadow);
   font-size: calc(1.5vh + 2vw);
   line-height: 90%;
   margin: 0;
 }
 .box-question-viewer p {
-  color: #d9a24f;
-  text-shadow: 2px 2px 0px #000000;
+  color: var(--ceopardy-gold);
+  text-shadow: var(--ceopardy-text-shadow);
   font-size: calc(3vh + 2vw);
   line-height: 90%;
   margin: 0;
@@ -467,11 +527,11 @@ svg:hover polygon {
 }
 
 .box-overlay {
-  padding: calc(0.3vh + 0.3vw);
+  padding: var(--ceopardy-pad);
   height: 100%;
 }
 .box-fake-overlay {
-  padding: calc(0.2vh + 0.1vw);
+  padding: var(--ceopardy-pad-small);
   height: 100%;
 }
 .box-team p {
@@ -505,7 +565,7 @@ svg:hover polygon {
 
 .box-score p {
   color: #ffffff;
-  text-shadow: 2px 2px 0px #000000;
+  text-shadow: var(--ceopardy-text-shadow);
   font-size: 2.5vw;
   line-height: 90%;
   margin: 0;
@@ -521,26 +581,26 @@ svg:hover polygon {
   height: 100%;
 }
 .flex-pad {
-  padding: calc(0.3vh + 0.3vw);
+  padding: var(--ceopardy-pad);
 }
 .flex-small-pad {
-  padding: calc(0.2vh + 0.1vw);
+  padding: var(--ceopardy-pad-small);
 }
 .flex-horizontal-pad {
-  padding-left: calc(0.3vh + 0.3vw);
-  padding-right: calc(0.3vh + 0.3vw);
+  padding-left: var(--ceopardy-pad);
+  padding-right: var(--ceopardy-pad);
 }
 .flex-vertical-pad {
-  padding-top: calc(0.3vh + 0.3vw);
-  padding-bottom: calc(0.3vh + 0.3vw);
+  padding-top: var(--ceopardy-pad);
+  padding-bottom: var(--ceopardy-pad);
 }
 .flex-horizontal-small-pad {
-  padding-left: calc(0.2vh + 0.1vw);
-  padding-right: calc(0.2vh + 0.1vw);
+  padding-left: var(--ceopardy-pad-small);
+  padding-right: var(--ceopardy-pad-small);
 }
 .flex-vertical-small-pad {
-  padding-top: calc(0.2vh + 0.1vw);
-  padding-bottom: calc(0.2vh + 0.1vw);
+  padding-top: var(--ceopardy-pad-small);
+  padding-bottom: var(--ceopardy-pad-small);
 }
 .flex-border-header {
   border-top-width: 0;
@@ -571,10 +631,18 @@ svg:hover polygon {
   opacity: 0;
 }
 
-/* Daily Double flip animation */
+/* Daily Double flip animation — covers the dollar-value grid only and stays
+   in place while DD is active (parent controls mount/unmount). The overlay
+   lives inside the .black-box so it sits within the rounded black border. */
+.container-questions-viewer .black-box {
+  position: relative;
+  overflow: hidden;
+}
 .dailydouble-overlay {
-  position: fixed;
-  inset: 0;
+  position: absolute;
+  /* Match the black border around question boxes: two stacked pads
+     (.black-box.flex-pad + per-row/col .flex-*-pad). */
+  inset: calc(var(--ceopardy-pad) * 2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -585,18 +653,17 @@ svg:hover polygon {
 .dailydouble-inner {
   background: rgb(0, 1, 161);
   color: white;
-  width: 60vw;
-  height: 40vh;
-  border: 1px solid black;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-weight: bolder;
   font-family: 'Gyparody', Helvetica, sans-serif;
-  font-size: calc(6vh + 2vw);
-  text-shadow: 2px 2px 0px #000000;
-  transform: scale(0.1) rotateX(0deg);
+  font-size: calc(8vh + 3vw);
+  text-shadow: var(--ceopardy-text-shadow);
+  transform: scale(0.05) rotateX(0deg);
   animation: dailydouble-spin 2s ease-out forwards;
 }
 @keyframes dailydouble-spin {
@@ -634,7 +701,7 @@ svg:hover polygon {
   font-size: calc(1.5vh + 1vw);
 }
 .start-menu a:hover {
-  color: #d9a24f;
+  color: var(--ceopardy-gold);
 }
 .animate-horizontal-left {
   animation: horizontal-left 2s ease infinite;
@@ -685,7 +752,7 @@ input[type='range']::-webkit-slider-thumb {
   height: 12px;
   width: 28px;
   border-radius: 7px;
-  background: #d9a24f;
+  background: var(--ceopardy-gold);
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -3.5px;
@@ -706,39 +773,21 @@ input[type='range']::-moz-range-thumb {
   height: 20px;
   width: 39px;
   border-radius: 7px;
-  background: #d9a24f;
+  background: var(--ceopardy-gold);
   cursor: pointer;
 }
 
 /* Wide screens */
 @media (min-width: 1230px) {
+  :root {
+    --ceopardy-pad: 8px;
+    --ceopardy-pad-small: 4px;
+  }
   .container-all {
     margin-left: auto !important;
     margin-right: auto !important;
     width: 1200px;
   }
-  .flex-pad {
-    padding: 8px;
-  }
-  .flex-small-pad {
-    padding: 4px;
-  }
-  .flex-horizontal-pad {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-  .flex-vertical-pad {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-  .flex-horizontal-small-pad {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-  .flex-vertical-small-pad {
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
   .box-category-host p { font-size: 20px; }
   .box-question-host p { font-size: 40px; }
   .box-question-status span { font-size: 12px; }
diff --git a/frontend/src/views/HostView.vue b/frontend/src/views/HostView.vue
index 01b8150..875f526 100644
--- a/frontend/src/views/HostView.vue
+++ b/frontend/src/views/HostView.vue
@@ -78,6 +78,10 @@ async function onSelectQuestion(qid) {
   }
   const data = await api.selectQuestion(qid);
   if (data?.dailydouble) {
+    if (data.dailydouble_range) game.dailydouble_range = data.dailydouble_range;
+    if (data.team) game.ui_state.team = data.team;
+    // No buzzer race in a Daily Double — only the controlling team plays.
+    lockBuzzers();
     playSound("dailydouble");
   } else {
     unlockBuzzers();
@@ -104,6 +108,7 @@ async function onFinish() {
     window.confirm("Bring the game to the final round (if any). Are you sure?")
   ) {
     await api.finish();
+    router.push({ name: "start" });
   }
 }
 function playTimeout() {
@@ -162,11 +167,22 @@ watch(
 );
 
 const activeHtml = computed(() => {
-  if (game.isDailyDouble) {
+  if (game.isDailyDouble && !game.isDailyDoubleRevealed) {
     return "<p>Daily Double!<br/>Please input user bet.</p>";
   }
   return game.active_question?.text ?? "";
 });
+
+const canRevealDailyDouble = computed(
+  () =>
+    game.isDailyDouble &&
+    !game.isDailyDoubleRevealed &&
+    game.dailydouble_wager != null,
+);
+
+async function onRevealDailyDouble() {
+  await api.revealDailyDouble();
+}
 </script>
 
 <template>
@@ -204,6 +220,14 @@ const activeHtml = computed(() => {
         <div class="black-box flex-small-pad">
           <div class="box-fake-overlay">
             <div class="box-ceopardy box-question-host" v-html="activeHtml" />
+            <button
+              v-if="canRevealDailyDouble"
+              type="button"
+              class="dd-reveal-btn"
+              @click="onRevealDailyDouble"
+            >
+              <i class="fa-solid fa-eye" /> Reveal clue
+            </button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/views/ViewerView.vue b/frontend/src/views/ViewerView.vue
index ef6df67..423a8ac 100644
--- a/frontend/src/views/ViewerView.vue
+++ b/frontend/src/views/ViewerView.vue
@@ -1,41 +1,10 @@
 <script setup>
 // Crowd-facing UI. Listens to the store for state changes pushed from the
-// server and renders the big Jeopardy board.
-import { ref, watch } from "vue";
+// server and renders the big Jeopardy board. The viewer is silent — all
+// sounds (buzzers, daily-double, etc.) play on the host machine only.
 import ViewerBoard from "@/components/ViewerBoard.vue";
 import QuestionOverlay from "@/components/QuestionOverlay.vue";
 import BigOverlay from "@/components/BigOverlay.vue";
-import DailyDoubleAnimation from "@/components/DailyDoubleAnimation.vue";
-import { useGameStore } from "@/stores/game";
-
-const game = useGameStore();
-
-// Show the daily-double flip when the server fires the event. We watch the
-// trigger counter, not `isDailyDouble`, so we won't replay the animation on
-// reconnect if the game was already in DD mode.
-const ddAnimating = ref(false);
-watch(
-  () => game.dailydoubleTrigger,
-  () => {
-    ddAnimating.value = true;
-    playSound("dailydouble");
-  },
-);
-
-const sounds = {
-  dailydouble: "/static/sounds/daily-double.mp3",
-  reveal: "/static/sounds/reveal.mp3",
-};
-function playSound(name) {
-  try {
-    const audio = new Audio(sounds[name]);
-    audio.play().catch(() => {
-      // Browsers may block auto-play until the user has interacted.
-    });
-  } catch {
-    /* ignore */
-  }
-}
 </script>
 
 <template>
@@ -43,6 +12,5 @@ function playSound(name) {
     <ViewerBoard />
     <QuestionOverlay />
     <BigOverlay />
-    <DailyDoubleAnimation v-if="ddAnimating" @done="ddAnimating = false" />
   </div>
 </template>