add Timer style

src/ui/Duel/Main.tsx

@@ -23,8 +23,8 @@ const NeosDuel = () => {
       <Alert />
       <Menu />
       <LifeBar />
-      <Mat />
       <Timer />
+      <Mat />
       <CardModal />
       <CardListModal />
       <HintNotification />

src/ui/Duel/PlayMat/Timer/index.scss

+#timer-container {
+  position: fixed;
+  display: flex;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  padding: 20px 35px;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.timer {
+  width: 100px;
+  color: white;
+  background-color: #323232;
+  font-family: var(--theme-font);
+  border: 1px solid #222;
+  padding: 1rem;
+  padding-bottom: 0.6rem;
+  border-radius: 8px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.2rem;
+}

src/ui/Duel/PlayMat/Timer/index.tsx

@@ -27,5 +27,9 @@ export const Timer: React.FC = () => {
     setTime(snap.timeLimits.op);
   }, [snap.timeLimits.op]);
 
-  return <div>{<AnimatedNumbers animateToNumber={time} />}</div>;
+  return (
+    <div id="timer-container">
+      <div className="timer">{<AnimatedNumbers animateToNumber={time} />}</div>
+    </div>
+  );
 };