lchoward · lchoward · Feb 19, 2026 · Feb 19, 2026
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,7 @@ import SetupScreen from "./components/SetupScreen/SetupScreen";
 import GameScreen from "./components/GameScreen/GameScreen";
 import RoundEntry from "./components/RoundEntry/RoundEntry";
 import PlayerDetail from "./components/PlayerDetail/PlayerDetail";
+import RoundDetail from "./components/RoundDetail/RoundDetail";
 import PlayGameScreen from "./components/PlayGameScreen/PlayGameScreen";
 import PlayRound from "./components/PlayRound/PlayRound";
 
@@ -28,6 +29,7 @@ function AppContent() {
       {screen === "game" && (isPlayMode ? <PlayGameScreen /> : <GameScreen />)}
       {screen === "round" && (isPlayMode ? <PlayRound /> : <RoundEntry />)}
       {screen === "detail" && <PlayerDetail />}
+      {screen === "roundDetail" && <RoundDetail />}
     </>
   );
 }

diff --git a/src/components/PlayerDetail/PlayerDetail.jsx b/src/components/PlayerDetail/PlayerDetail.jsx
@@ -35,7 +35,7 @@ export default function PlayerDetail() {
           <div
             key={i}
             className={styles.roundHistoryItem}
-            onClick={() => dispatch({ type: ACTIONS.NAVIGATE, payload: { screen: "round", editingRound: i, playerId: player.id } })}
+            onClick={() => dispatch({ type: ACTIONS.NAVIGATE, payload: { screen: "roundDetail", editingRound: i, playerId: player.id } })}
           >
             <div>
               <div className={styles.round}>Round {i + 1}</div>

diff --git a/src/components/RoundDetail/RoundDetail.jsx b/src/components/RoundDetail/RoundDetail.jsx
@@ -0,0 +1,114 @@
+import { useGame } from "../../context/GameContext";
+import { ACTIONS } from "../../context/gameReducer";
+import { calculateScore } from "../../utils/scoring";
+import CardVisual from "../CardVisual/CardVisual";
+import styles from "./RoundDetail.module.css";
+
+export default function RoundDetail() {
+  const { game, editingRound, selectedPlayer, dispatch } = useGame();
+  const round = editingRound !== null ? game.rounds[editingRound] : null;
+
+  if (!round) {
+    dispatch({ type: ACTIONS.NAVIGATE, payload: { screen: "game" } });
+    return null;
+  }
+
+  const goBack = () => {
+    dispatch({ type: ACTIONS.NAVIGATE, payload: { screen: "detail", playerId: selectedPlayer } });
+  };
+
+  const goEdit = () => {
+    dispatch({ type: ACTIONS.NAVIGATE, payload: { screen: "round", editingRound, playerId: selectedPlayer } });
+  };
+
+  const getRunningTotal = (playerId, upToRound) => {
+    let total = 0;
+    for (let i = 0; i <= upToRound; i++) {
+      const r = game.rounds[i]?.playerResults[playerId];
+      if (r) total += r.score;
+    }
+    return total;
+  };
+
+  const getPlayerInitial = (pid) => {
+    const player = game.players.find(p => p.id === pid);
+    return player ? player.name.charAt(0).toUpperCase() : "?";
+  };
+
+  return (
+    <div className={`app ${styles.roundDetail} fade-in`}>
+      <button className={styles.backBtn} onClick={goBack}>
+        ← Player Detail
+      </button>
+
+      <div className={styles.header}>
+        <div className={styles.roundTitle}>Round {editingRound + 1}</div>
+        <button className={styles.editBtn} onClick={goEdit}>Edit</button>
+      </div>
+
+      {game.players.map(p => {
+        const r = round.playerResults[p.id];
+        if (!r) return null;
+
+        const totalBefore = getRunningTotal(p.id, editingRound - 1);
+        const totalAfter = totalBefore + r.score;
+        const scoreResult = calculateScore(r.numberCards || [], r.modifiers || [], r.busted);
+        const isOrigin = p.id === selectedPlayer;
+
+        return (
+          <div key={p.id} className={`${styles.playerSection} ${isOrigin ? styles.highlight : ""}`}>
+            <div className={styles.playerHeader}>
+              <div className={styles.playerName}>
+                {p.name}
+                {r.flip7 && <span className={styles.flip7Badge}>Flip 7!</span>}
+              </div>
+              <div className={styles.scoreInfo}>
+                <div className={`${styles.roundScore} ${r.busted ? styles.bust : styles.positive}`}>
+                  {r.busted ? "BUST" : `+${r.score}`}
+                </div>
+                <div className={styles.runningTotal}>
+                  {totalBefore} → {totalAfter}
+                </div>
+              </div>
+            </div>
+
+            {(r.numberCards?.length > 0 || r.modifiers?.length > 0 || r.actions?.length > 0) && (
+              <div className={styles.cards}>
+                {(r.numberCards || []).map((c, i) => (
+                  <CardVisual key={`n${i}`} type="number" value={c} small />
+                ))}
+                {(r.modifiers || []).map((m, i) => (
+                  <CardVisual key={`m${i}`} type="modifier" value={m} small />
+                ))}
+                {(r.actions || []).map((a, i) => (
+                  <CardVisual key={`a${i}`} type="action" value={a} small />
+                ))}
+              </div>
+            )}
+
+            {!r.busted && (r.numberCards?.length > 0 || r.modifiers?.length > 0) && (
+              <div className={styles.breakdown}>{scoreResult.breakdown}</div>
+            )}
+          </div>
+        );
+      })}
+
+      {round.dealOrder?.length > 0 && (
+        <div className={styles.dealTimeline}>
+          <div className={styles.dealTimelineLabel}>Deal Order</div>
+          <div className={styles.timelineChips}>
+            {round.dealOrder.map((d, i) => (
+              <span key={d.seq ?? i} className={`${styles.timelineChip} ${
+                d.cardType === "modifier" ? styles.timelineMod :
+                d.cardType === "action" ? styles.timelineAction : ""
+              }`}>
+                <span className={styles.seqNum}>{i + 1}.</span>
+                {getPlayerInitial(d.playerId)}: {d.cardValue}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/RoundDetail/RoundDetail.module.css b/src/components/RoundDetail/RoundDetail.module.css
@@ -0,0 +1,149 @@
+.roundDetail { padding-top: 20px; }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.roundTitle {
+  font-family: 'Fredoka', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.editBtn {
+  padding: 6px 16px;
+  border-radius: 20px;
+  border: 2px solid var(--primary);
+  background: none;
+  color: var(--primary);
+  font-family: 'Fredoka', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.editBtn:hover {
+  background: var(--primary);
+  color: #fff;
+}
+
+.playerSection {
+  background: var(--surface);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  border: 2px solid transparent;
+}
+
+.highlight {
+  border-color: var(--primary);
+}
+
+.playerHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.playerName {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.scoreInfo {
+  text-align: right;
+}
+
+.roundScore {
+  font-family: 'Fredoka', sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.positive { color: var(--primary); }
+.bust { color: var(--accent2); }
+
+.runningTotal {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.breakdown {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.flip7Badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(46, 204, 113, 0.15);
+  color: #2ecc71;
+  margin-left: 8px;
+}
+
+.dealTimeline {
+  background: var(--surface);
+  border-radius: var(--radius-sm);
+  padding: 12px 16px;
+  margin-top: 8px;
+}
+
+.dealTimelineLabel {
+  font-size: 12px;
+  color: var(--text-dim);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.timelineChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.timelineChip {
+  font-size: 11px;
+  background: var(--surface2);
+  padding: 3px 8px;
+  border-radius: 10px;
+  color: var(--text-dim);
+}
+
+.seqNum {
+  font-weight: 700;
+  margin-right: 3px;
+  color: var(--text);
+}
+
+.timelineMod { color: var(--accent); }
+.timelineAction { color: #9b59b6; }
+
+.backBtn {
+  background: none;
+  border: none;
+  color: var(--primary);
+  font-family: 'Fredoka', sans-serif;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
diff --git a/src/context/gameReducer.js b/src/context/gameReducer.js
@@ -100,6 +100,8 @@ export function gameReducer(state, action) {
           return { ...state, screen: "game", selectedPlayer: null, editingRound: null };
         case "round":
           return { ...state, screen: "round", editingRound: editingRound ?? null, selectedPlayer: playerId ?? state.selectedPlayer };
+        case "roundDetail":
+          return { ...state, screen: "roundDetail", editingRound: editingRound ?? null, selectedPlayer: playerId ?? state.selectedPlayer };
         case "detail":
           return { ...state, screen: "detail", selectedPlayer: playerId };
         default:

diff --git a/src/context/gameReducer.test.js b/src/context/gameReducer.test.js
@@ -45,6 +45,15 @@ describe("NAVIGATE", () => {
     expect(result.selectedPlayer).toBe("p1");
   });
 
+  it("navigates to roundDetail with editing info", () => {
+    const result = gameReducer(makeState(), {
+      type: ACTIONS.NAVIGATE, payload: { screen: "roundDetail", editingRound: 2, playerId: "p1" },
+    });
+    expect(result.screen).toBe("roundDetail");
+    expect(result.editingRound).toBe(2);
+    expect(result.selectedPlayer).toBe("p1");
+  });
+
   it("navigates to detail with player", () => {
     const result = gameReducer(makeState(), {
       type: ACTIONS.NAVIGATE, payload: { screen: "detail", playerId: "p2" },