diff --git a/src/App.jsx b/src/App.jsx
index 550ba2e..ba25c6c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -26,8 +26,10 @@ export default function App() {
       return {
         ringProgress: progress,
         waterLevel: progress,
+        waterVariant: "countdown",
         title: "倒數",
         subtitle: `總長 ${formatHMS(cd.totalMs)}`,
+        flashKey: null,
       };
     }
 
@@ -36,9 +38,14 @@ export default function App() {
     const phase = (sw.elapsedMs % loop) / loop;
     return {
       ringProgress: phase,
-      waterLevel: 0.15 + phase * 0.7, // keep some padding (never fully empty/full)
-      title: "碼表",
-      subtitle: sw.isRunning ? "流動中…" : "休息一下也很好",
+      waterLevel: 0.5,
+      waterVariant: "stopwatch",
+      title: "碼錶",
+      subtitle: sw.isRunning ? "流動中…" : "跑跑跑~向前跑~",
+      flashKey:
+        sw.isRunning && sw.elapsedMs >= 10000
+          ? Math.floor(sw.elapsedMs / 10000)
+          : null,
     };
   }, [mode, sw.elapsedMs, sw.isRunning, cd.remainingMs, cd.totalMs]);
 
@@ -70,7 +77,7 @@ export default function App() {
       <header className="header">
         <div className="brand">
           <div className="brandTitle">Tide Timer</div>
-          <div className="brandTag">療癒型碼表 / 倒數</div>
+          <div className="brandTag">療癒型碼錶 / 倒數</div>
         </div>
         <ModeSwitch mode={mode} setMode={(m) => {
           // stop running when switching modes (keeps mental model simple)
@@ -84,7 +91,10 @@ export default function App() {
         <section className="card breathe" aria-label="Timer">
           <div className="vizWrap">
             <Ring progress={viz.ringProgress} />
-            <WaterGauge level={viz.waterLevel} />
+            {mode === "stopwatch" && viz.flashKey !== null ? (
+              <div className="ringFlash" key={viz.flashKey} />
+            ) : null}
+            <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} />
             <div className="vizOverlay">
               <div className="modeTitle">{viz.title}</div>
               <TimeDisplay primary={primaryTime} secondary={viz.subtitle} />
@@ -108,7 +118,7 @@ export default function App() {
             extraLeft={
               mode === "stopwatch" ? (
                 <button className="btn" onClick={onLap} disabled={!sw.isRunning}>
-                  Lap
+                  記錄
                 </button>
               ) : null
             }
diff --git a/src/components/LapList.jsx b/src/components/LapList.jsx
index b824470..582691a 100644
--- a/src/components/LapList.jsx
+++ b/src/components/LapList.jsx
@@ -5,7 +5,7 @@ export default function LapList({ laps }) {
   if (!laps.length) return null;
   return (
     <div className="laps">
-      <div className="lapsTitle">Laps</div>
+      <div className="lapsTitle">記錄</div>
       <ol className="lapsList">
         {laps.map((ms, idx) => (
           <li key={idx} className="lapItem">
diff --git a/src/components/ModeSwitch.jsx b/src/components/ModeSwitch.jsx
index 4e42c75..261ec8e 100644
--- a/src/components/ModeSwitch.jsx
+++ b/src/components/ModeSwitch.jsx
@@ -9,7 +9,7 @@ export default function ModeSwitch({ mode, setMode }) {
         role="tab"
         aria-selected={mode === "stopwatch"}
       >
-        碼表
+        碼錶
       </button>
       <button
         className={`pill ${mode === "countdown" ? "active" : ""}`}
diff --git a/src/components/WaterGauge.jsx b/src/components/WaterGauge.jsx
index e55aa7d..d12ae54 100644
--- a/src/components/WaterGauge.jsx
+++ b/src/components/WaterGauge.jsx
@@ -2,10 +2,19 @@ import React from "react";
 import { clamp } from "../lib/time.js";
 
 /**
- * WaterGauge: soothing water level + slow wave drift.
- * level: 0..1 (1 = full)
+ * WaterGauge: soothing water level + slow wave drift (countdown),
+ * or static dark plate for stopwatch.
+ * level: 0..1 (1 = full) for animated mode
  */
-export default function WaterGauge({ level = 0.5 }) {
+export default function WaterGauge({ level = 0.5, variant = "countdown" }) {
+  if (variant === "stopwatch") {
+    return (
+      <div className="waterGauge waterGaugeStatic" aria-hidden="true">
+        <div className="waterPlate" />
+      </div>
+    );
+  }
+
   const l = clamp(level, 0, 1);
   const y = `${(1 - l) * 100}%`;
 
diff --git a/src/lib/time.js b/src/lib/time.js
index 1a27cf0..73498a8 100644
--- a/src/lib/time.js
+++ b/src/lib/time.js
@@ -7,7 +7,7 @@ export function formatHMS(ms, { showMs = false } = {}) {
   const h = Math.floor(total / 3600000);
   const m = Math.floor((total % 3600000) / 60000);
   const s = Math.floor((total % 60000) / 1000);
-  const msPart = total % 1000;
+  const msPart = Math.floor((total % 1000) / 10);
 
   const mm = String(m).padStart(2, "0");
   const ss = String(s).padStart(2, "0");
@@ -16,5 +16,5 @@ export function formatHMS(ms, { showMs = false } = {}) {
   const base = `${hh}:${mm}:${ss}`;
   if (!showMs) return base;
 
-  return `${base}.${String(msPart).padStart(3, "0")}`;
+  return `${base}.${String(msPart).padStart(2, "0")}`;
 }
diff --git a/src/styles.css b/src/styles.css
index 0b8e3a0..6a1d12f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -106,13 +106,22 @@ a { color: inherit; }
 .vizOverlay {
   position: absolute;
   inset: 0;
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   pointer-events: none;
-  padding-top: 10px;
 }
-.modeTitle { font-size: 14px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
+.modeTitle {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+  color: var(--muted);
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
 
 .timeDisplay { display: grid; gap: 10px; justify-items: center; }
 .timePrimary {
@@ -251,6 +260,24 @@ a { color: inherit; }
   transform: rotate(-90deg);
   transition: stroke-dashoffset 140ms linear;
 }
+.ringFlash {
+  position: absolute;
+  width: 280px;
+  height: 280px;
+  border-radius: 999px;
+  border: 2px solid rgba(255,255,255,0.75);
+  z-index: 2;
+  box-shadow:
+    0 0 30px rgba(255,255,255,0.45),
+    0 0 60px rgba(255,255,255,0.25);
+  pointer-events: none;
+  animation: ringFlash 0.9s ease-out forwards;
+}
+@keyframes ringFlash {
+  0% { opacity: 0; transform: scale(0.95); }
+  25% { opacity: 0.95; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1.14); }
+}
 
 /* Water */
 .waterGauge {
@@ -263,6 +290,13 @@ a { color: inherit; }
   background: radial-gradient(200px 140px at 50% 30%, rgba(255,255,255,0.12), rgba(0,0,0,0.04));
   box-shadow: inset 0 -30px 60px rgba(0,0,0,0.25);
 }
+.waterGaugeStatic {
+  background: radial-gradient(210px 160px at 50% 34%, rgba(255,255,255,0.06), rgba(0,0,0,0.58));
+  border: 1px solid rgba(255,255,255,0.14);
+  box-shadow:
+    inset 0 -30px 60px rgba(0,0,0,0.45),
+    inset 0 18px 40px rgba(0,0,0,0.35);
+}
 .waterFill {
   position: absolute;
   inset: 0;
@@ -270,6 +304,15 @@ a { color: inherit; }
   transition: transform 180ms linear;
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
 }
+.waterPlate {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(160px 140px at 50% 38%, rgba(255,255,255,0.08), rgba(0,0,0,0.7));
+  box-shadow:
+    inset 0 14px 40px rgba(0,0,0,0.55),
+    inset 0 -12px 30px rgba(0,0,0,0.4);
+}
 .waterSurface {
   position: absolute;
   left: 0; right: 0;